Upload 47 files

api_server_extended.py

@@ -902,14 +902,30 @@ async def get_status():
         except Exception:
             pass
         
+        # Get system health metrics
+        online_count = 0
+        degraded_count = 0
+        offline_count = 0
+        response_times = []
+        
+        # Try to get health status from providers if available
+        # This is a simplified version - in production you'd check actual provider health
+        system_health = "ok" if len(providers) > 0 else "unknown"
+        
         return {
             "status": "ok",
+            "system_health": system_health,
             "timestamp": datetime.now().isoformat(),
+            "last_update": datetime.now().isoformat(),
             "providers": {
                 "total": len(providers),
                 "free": free_count,
                 "paid": paid_count
             },
+            "online": online_count,
+            "degraded": degraded_count,
+            "offline": offline_count,
+            "avg_response_time_ms": round(sum(response_times) / len(response_times), 2) if response_times else 0,
             "resources": resources_data,
             "models": {
                 "total": model_count

static/css/main.css

@@ -470,23 +470,36 @@ body::before {
 /* Stats Grid */
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin-bottom: 30px;
 }
 
+@media (max-width: 1400px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .stat-card {
     background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(31, 41, 55, 0.6));
     border: 1px solid var(--border);
     border-radius: 16px;
-    padding: 25px;
+    padding: 20px;
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 15px;
     transition: all var(--transition-normal);
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
+    min-height: 120px;
 }
 
 .stat-card::before {
@@ -527,13 +540,13 @@ body::before {
 }
 
 .stat-icon {
-    width: 70px;
-    height: 70px;
-    border-radius: 16px;
+    width: 60px;
+    height: 60px;
+    border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 32px;
+    font-size: 28px;
     flex-shrink: 0;
 }
 
@@ -566,7 +579,7 @@ body::before {
 }
 
 .stat-value {
-    font-size: 36px;
+    font-size: 32px;
     font-weight: 800;
     color: var(--primary);
     margin-bottom: 5px;

static/js/app.js

@@ -463,22 +463,51 @@ async function loadDashboard() {
                     providersEl.textContent = providers;
                 }
             
-            // Display system status
+            // Display system status - handle different response formats
             const systemStatusDiv = document.getElementById('system-status');
-            const healthStatus = statusData.system_health || 'unknown';
-            const healthClass = healthStatus === 'healthy' ? 'alert-success' : 
-                               healthStatus === 'degraded' ? 'alert-warning' : 'alert-error';
-            
-            systemStatusDiv.innerHTML = `
-                <div class="alert ${healthClass}">
-                    <strong>System Status:</strong> ${healthStatus}<br>
-                    <strong>Online APIs:</strong> ${statusData.online || 0}<br>
-                    <strong>Degraded APIs:</strong> ${statusData.degraded || 0}<br>
-                    <strong>Offline APIs:</strong> ${statusData.offline || 0}<br>
-                    <strong>Avg Response Time:</strong> ${statusData.avg_response_time_ms || 0}ms<br>
-                    <strong>Last Update:</strong> ${new Date(statusData.last_update || Date.now()).toLocaleString('en-US')}
-                </div>
-            `;
+            if (systemStatusDiv) {
+                // Try to get health status from different possible fields
+                const healthStatus = statusData.system_health || statusData.status || 'ok';
+                const healthClass = healthStatus === 'healthy' || healthStatus === 'ok' ? 'alert-success' : 
+                                   healthStatus === 'degraded' ? 'alert-warning' : 'alert-error';
+                
+                // Get provider counts
+                const providers = statusData.providers || {};
+                const totalProviders = providers.total || statusData.total_apis || 0;
+                const onlineProviders = statusData.online || 0;
+                const degradedProviders = statusData.degraded || 0;
+                const offlineProviders = statusData.offline || 0;
+                const avgResponseTime = statusData.avg_response_time_ms || 0;
+                const lastUpdate = statusData.last_update || statusData.timestamp || new Date().toISOString();
+                
+                // Format last update time
+                let formattedTime = 'N/A';
+                try {
+                    const updateDate = new Date(lastUpdate);
+                    formattedTime = updateDate.toLocaleString('en-US', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    });
+                } catch (e) {
+                    formattedTime = lastUpdate;
+                }
+                
+                systemStatusDiv.innerHTML = `
+                    <div class="alert ${healthClass}">
+                        <strong>System Status:</strong> ${healthStatus === 'ok' ? 'Healthy' : healthStatus}<br>
+                        <strong>Total Providers:</strong> ${totalProviders}<br>
+                        <strong>Online APIs:</strong> ${onlineProviders}<br>
+                        <strong>Degraded APIs:</strong> ${degradedProviders}<br>
+                        <strong>Offline APIs:</strong> ${offlineProviders}<br>
+                        <strong>Avg Response Time:</strong> ${avgResponseTime}ms<br>
+                        <strong>Last Update:</strong> ${formattedTime}
+                    </div>
+                `;
+            }
             } else {
                 throw new Error('Status endpoint not available');
             }
@@ -904,14 +933,16 @@ async function loadModels() {
                 </div>
             `;
             
-            // Update stat-models in dashboard and sidebar
+            // Update stat-models in dashboard and sidebar with actual loaded count
             const modelsStatEl = document.getElementById('stat-models');
             const sidebarModelsEl = document.getElementById('sidebar-models');
+            // Use pipelines_loaded if available, otherwise use modelsCount
+            const displayCount = pipelinesLoaded > 0 ? pipelinesLoaded : modelsCount;
             if (modelsStatEl) {
-                modelsStatEl.textContent = modelsCount;
+                modelsStatEl.textContent = displayCount;
             }
             if (sidebarModelsEl) {
-                sidebarModelsEl.textContent = modelsCount;
+                sidebarModelsEl.textContent = displayCount;
             }
                         } else {
             throw new Error('Models status endpoint not available');
@@ -988,6 +1019,11 @@ async function loadModels() {
 async function initializeModels() {
     ToastManager.info('Initializing models... This may take a moment.');
     
+    const modelsStatusDiv = document.getElementById('models-status');
+    if (modelsStatusDiv) {
+        modelsStatusDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Initializing models...</div>';
+    }
+    
     try {
         const response = await fetch('/api/models/initialize', { method: 'POST' });
         if (!response.ok) {
@@ -996,15 +1032,28 @@ async function initializeModels() {
         
         const data = await response.json();
         
-        if (data.status === 'ok') {
-            ToastManager.success('Models initialized successfully!');
-            loadModels(); // Reload models list
+        // Handle different response formats
+        const isOk = data.status === 'ok' || data.ok === true || (data.models_loaded && data.models_loaded > 0);
+        const modelsLoaded = data.models_loaded || data.pipelines_loaded || 0;
+        const modelsFailed = data.models_failed || data.pipelines_failed || 0;
+        
+        if (isOk) {
+            ToastManager.success(`Models initialized successfully! ${modelsLoaded} model(s) loaded.`);
+        } else if (modelsLoaded > 0) {
+            ToastManager.warning(`Models partially initialized: ${modelsLoaded} loaded, ${modelsFailed} failed`);
         } else {
-            ToastManager.warning('Models partially initialized');
+            ToastManager.warning('No models loaded. Using fallback mode.');
         }
+        
+        // Reload models list and status
+        await loadModels();
     } catch (error) {
         console.error('Error initializing models:', error);
-        ToastManager.error('Failed to initialize models');
+        ToastManager.error('Failed to initialize models: ' + error.message);
+        
+        if (modelsStatusDiv) {
+            modelsStatusDiv.innerHTML = `<div class="alert alert-error">Error initializing models: ${error.message}</div>`;
+        }
     }
 }