update

frontend/public/admin.js

@@ -27,7 +27,16 @@ function refreshAll() {
 // Load system statistics
 async function loadSystemStats() {
     try {
-        const response = await fetch(`${API_BASE}/api/stats`);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+        
+        const response = await fetch(`${API_BASE}/api/stats`, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
         const data = await response.json();
         
         const html = `
@@ -59,14 +68,25 @@ async function loadSystemStats() {
         
         document.getElementById('systemStats').innerHTML = html;
     } catch (error) {
-        document.getElementById('systemStats').innerHTML = `<div class="error">Error loading stats: ${error.message}</div>`;
+        console.error('Error loading system stats:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        document.getElementById('systemStats').innerHTML = `<div class="error">Error: ${errorMsg}</div>`;
     }
 }
 
 // Load Ollama status
 async function loadOllamaStatus() {
     try {
-        const response = await fetch(`${API_BASE}/api/ollama/ping`);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+        
+        const response = await fetch(`${API_BASE}/api/ollama/ping`, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
         const data = await response.json();
         
         const isActive = data.status === 'success';
@@ -102,25 +122,37 @@ async function loadOllamaStatus() {
         
         document.getElementById('ollamaStatus').innerHTML = html;
     } catch (error) {
-        document.getElementById('ollamaStatus').innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        console.error('Error loading Ollama status:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        document.getElementById('ollamaStatus').innerHTML = `<div class="error">Error: ${errorMsg}</div>`;
     }
 }
 
 // Load GPU status
 async function loadGPUStatus() {
     try {
-        const response = await fetch(`${API_BASE}/api/ollama/gpu-status`);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+        
+        const response = await fetch(`${API_BASE}/api/ollama/gpu-status`, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
         const data = await response.json();
         
-        const gpuActive = data.gpu_in_use;
+        const gpuActive = data.gpu_in_use || false;
+        const gpuAvailable = data.gpu_available || false;
         const statusClass = gpuActive ? 'status-active' : 'status-warning';
         
-        const html = `
+        let html = `
             <div class="stat-row">
                 <span class="stat-label">GPU Available</span>
                 <span class="stat-value">
-                    <span class="status-indicator ${data.gpu_available ? 'status-active' : 'status-inactive'}"></span>
-                    ${data.gpu_available ? 'Yes' : 'No'}
+                    <span class="status-indicator ${gpuAvailable ? 'status-active' : 'status-inactive'}"></span>
+                    ${gpuAvailable ? 'Yes' : 'No'}
                 </span>
             </div>
             <div class="stat-row">
@@ -134,26 +166,76 @@ async function loadGPUStatus() {
                 <span class="stat-label">Models Loaded</span>
                 <span class="stat-value">${data.models_loaded || 0}</span>
             </div>
-            ${data.gpu_details ? `
-            <div class="stat-row">
-                <span class="stat-label">GPU Model</span>
-                <span class="stat-value">${data.gpu_details.model}</span>
-            </div>
-            <div class="stat-row">
-                <span class="stat-label">GPU Layers</span>
-                <span class="stat-value">${data.gpu_details.gpu_layers}</span>
-            </div>
-            ` : ''}
-            ${!gpuActive ? `
-            <div style="margin-top: 10px; padding: 10px; background: #fef3c7; border-radius: 5px; font-size: 12px;">
-                💡 Enable GPU for 5-10x faster processing
-            </div>
-            ` : ''}
+        `;
+        
+        // Add GPU details if available
+        if (data.gpu_details) {
+            const details = data.gpu_details;
+            
+            if (details.model || details.gpu_name) {
+                html += `
+                <div class="stat-row">
+                    <span class="stat-label">GPU Model</span>
+                    <span class="stat-value" style="font-size: 12px;">${details.model || details.gpu_name || 'N/A'}</span>
+                </div>`;
+            }
+            
+            if (details.gpu_layers !== undefined) {
+                html += `
+                <div class="stat-row">
+                    <span class="stat-label">GPU Layers</span>
+                    <span class="stat-value">${details.gpu_layers}</span>
+                </div>`;
+            }
+            
+            if (details.layers_offloaded) {
+                html += `
+                <div class="stat-row">
+                    <span class="stat-label">Layers Offloaded</span>
+                    <span class="stat-value">${details.layers_offloaded}</span>
+                </div>`;
+            }
+            
+            if (details.memory_used) {
+                html += `
+                <div class="stat-row">
+                    <span class="stat-label">GPU Memory</span>
+                    <span class="stat-value">${details.memory_used}</span>
+                </div>`;
+            }
+            
+            if (details.utilization) {
+                html += `
+                <div class="stat-row">
+                    <span class="stat-label">GPU Utilization</span>
+                    <span class="stat-value">${details.utilization}</span>
+                </div>`;
+            }
+            
+            if (details.note) {
+                html += `
+                <div style="margin-top: 10px; padding: 10px; background: #dbeafe; border-radius: 5px; font-size: 11px;">
+                    ℹ️ ${details.note}
+                </div>`;
+            }
+        }
+        
+        // Add recommendation
+        if (data.recommendation) {
+            const bgColor = gpuActive ? '#d1fae5' : '#fef3c7';
+            const icon = gpuActive ? '✓' : '💡';
+            html += `
+            <div style="margin-top: 10px; padding: 10px; background: ${bgColor}; border-radius: 5px; font-size: 12px; white-space: pre-line;">
+                ${icon} ${data.recommendation}
+            </div>`;
+        }
         `;
         
         document.getElementById('gpuStatus').innerHTML = html;
     } catch (error) {
-        document.getElementById('gpuStatus').innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        console.error('Error loading GPU status:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        document.getElementById('gpuStatus').innerHTML = `<div class="error">Error: ${errorMsg}</div>`;
     }
 }
 
@@ -204,7 +286,16 @@ async function runPerformanceTest() {
 // Load available models
 async function loadModels() {
     try {
-        const response = await fetch(`${API_BASE}/api/ollama/models`);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+        
+        const response = await fetch(`${API_BASE}/api/ollama/models`, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
         const data = await response.json();
         
         if (data.models && data.models.length > 0) {
@@ -227,14 +318,25 @@ async function loadModels() {
             document.getElementById('modelsList').innerHTML = '<div>No models found</div>';
         }
     } catch (error) {
-        document.getElementById('modelsList').innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        console.error('Error loading models:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        document.getElementById('modelsList').innerHTML = `<div class="error">Error: ${errorMsg}</div>`;
     }
 }
 
 // Load configuration
 async function loadConfig() {
     try {
-        const response = await fetch(`${API_BASE}/api/ollama/config`);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+        
+        const response = await fetch(`${API_BASE}/api/ollama/config`, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
         const data = await response.json();
         
         const html = `
@@ -262,14 +364,25 @@ async function loadConfig() {
         
         document.getElementById('configInfo').innerHTML = html;
     } catch (error) {
-        document.getElementById('configInfo').innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        console.error('Error loading config:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        document.getElementById('configInfo').innerHTML = `<div class="error">Error: ${errorMsg}</div>`;
     }
 }
 
 // Load clustering statistics
 async function loadClusteringStats() {
     try {
-        const response = await fetch(`${API_BASE}/api/stats`);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+        
+        const response = await fetch(`${API_BASE}/api/stats`, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
         const data = await response.json();
         
         const clusteringRate = data.clustered_articles > 0 
@@ -310,7 +423,9 @@ async function loadClusteringStats() {
         
         document.getElementById('clusteringStats').innerHTML = html;
     } catch (error) {
-        document.getElementById('clusteringStats').innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        console.error('Error loading clustering stats:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        document.getElementById('clusteringStats').innerHTML = `<div class="error">Error: ${errorMsg}</div>`;
     }
 }
 
@@ -512,7 +627,16 @@ async function loadRecentArticles() {
     const container = document.getElementById('recentArticles');
     
     try {
-        const response = await fetch('/api/admin/recent-articles');
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+        
+        const response = await fetch('/api/admin/recent-articles', { signal: controller.signal });
+        clearTimeout(timeoutId);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
         const data = await response.json();
         
         if (data.articles && data.articles.length > 0) {
@@ -548,7 +672,9 @@ async function loadRecentArticles() {
             container.innerHTML = '<p style="color: #666;">No summarized articles found.</p>';
         }
     } catch (error) {
-        container.innerHTML = '<p style="color: red;">Failed to load recent articles</p>';
+        console.error('Error loading recent articles:', error);
+        const errorMsg = error.name === 'AbortError' ? 'Request timeout' : error.message;
+        container.innerHTML = `<p style="color: red;">Error: ${errorMsg}</p>`;
     }
 }