Upload 46 files

static/css/main.css

@@ -63,6 +63,7 @@ body {
     line-height: 1.6;
     min-height: 100vh;
     overflow-x: hidden;
+    font-size: 15px;
 }
 
 /* Animated background particles */
@@ -284,6 +285,11 @@ body::before {
     font-size: 18px;
     font-weight: 700;
     color: var(--text-primary);
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    min-height: 1.2em;
+    line-height: 1.2;
 }
 
 /* Sidebar Overlay for Mobile */
@@ -564,6 +570,11 @@ body::before {
     font-weight: 800;
     color: var(--primary);
     margin-bottom: 5px;
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    min-height: 1.2em;
+    line-height: 1.2;
 }
 
 .stat-label {
@@ -870,6 +881,540 @@ table tr:hover {
     }
 }
 
+/* =============================================================================
+   Large Screen Optimizations (1440px+)
+   ============================================================================= */
+
+@media (min-width: 1440px) {
+    :root {
+        --sidebar-width: 320px;
+    }
+    
+    body {
+        font-size: 16px;
+    }
+    
+    .sidebar-header {
+        padding: 30px 25px;
+    }
+    
+    .sidebar-logo .logo-icon {
+        width: 50px;
+        height: 50px;
+        font-size: 24px;
+    }
+    
+    .sidebar-logo .logo-text h1 {
+        font-size: 22px;
+    }
+    
+    .sidebar-logo .logo-text p {
+        font-size: 12px;
+    }
+    
+    .nav-item {
+        padding: 16px 20px;
+        font-size: 16px;
+        gap: 14px;
+    }
+    
+    .nav-item svg {
+        width: 22px;
+        height: 22px;
+    }
+    
+    .top-header {
+        padding: 25px 40px;
+    }
+    
+    .header-title h2 {
+        font-size: 28px;
+    }
+    
+    .header-title p {
+        font-size: 14px;
+    }
+    
+    .icon-btn {
+        width: 44px;
+        height: 44px;
+        font-size: 18px;
+    }
+    
+    .content-area {
+        padding: 40px;
+    }
+    
+    .glass-card {
+        padding: 30px;
+        border-radius: 18px;
+        margin-bottom: 25px;
+    }
+    
+    .glass-card h3 {
+        font-size: 24px;
+        margin-bottom: 25px;
+        padding-bottom: 12px;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 25px;
+    }
+    
+    .stat-card {
+        padding: 30px;
+        border-radius: 18px;
+    }
+    
+    .stat-icon {
+        width: 80px;
+        height: 80px;
+        font-size: 36px;
+    }
+    
+    .stat-value {
+        font-size: 42px;
+    }
+    
+    .stat-label {
+        font-size: 15px;
+    }
+    
+    .stat-trend {
+        font-size: 13px;
+    }
+    
+    .grid-2 {
+        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+        gap: 25px;
+    }
+    
+    .form-group {
+        margin-bottom: 25px;
+    }
+    
+    .form-group label {
+        font-size: 15px;
+        margin-bottom: 10px;
+    }
+    
+    .form-group input,
+    .form-group textarea,
+    .form-group select {
+        padding: 14px;
+        font-size: 15px;
+        border-radius: 12px;
+    }
+    
+    .btn-primary, .btn-refresh {
+        padding: 14px 28px;
+        font-size: 15px;
+        border-radius: 12px;
+    }
+    
+    .news-card {
+        padding: 25px;
+        border-radius: 18px;
+        gap: 25px;
+    }
+    
+    .news-card-image {
+        width: 140px;
+        height: 140px;
+        font-size: 36px;
+    }
+    
+    .news-card-title {
+        font-size: 20px;
+    }
+    
+    .news-card-excerpt {
+        font-size: 15px;
+    }
+    
+    .sentiment-gauge-container {
+        width: 350px;
+        height: 175px;
+    }
+    
+    .ai-result-card {
+        padding: 30px;
+    }
+    
+    .ai-result-header h4 {
+        font-size: 24px;
+    }
+    
+    .ai-result-metric-value {
+        font-size: 42px;
+    }
+}
+
+/* =============================================================================
+   Extra Large Screen Optimizations (1920px+)
+   ============================================================================= */
+
+@media (min-width: 1920px) {
+    :root {
+        --sidebar-width: 360px;
+    }
+    
+    body {
+        font-size: 17px;
+    }
+    
+    .sidebar-header {
+        padding: 35px 30px;
+    }
+    
+    .sidebar-logo .logo-icon {
+        width: 55px;
+        height: 55px;
+        font-size: 26px;
+    }
+    
+    .sidebar-logo .logo-text h1 {
+        font-size: 24px;
+    }
+    
+    .sidebar-logo .logo-text p {
+        font-size: 13px;
+    }
+    
+    .nav-item {
+        padding: 18px 24px;
+        font-size: 17px;
+        gap: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .nav-item svg {
+        width: 24px;
+        height: 24px;
+    }
+    
+    .top-header {
+        padding: 30px 50px;
+    }
+    
+    .header-title h2 {
+        font-size: 32px;
+    }
+    
+    .header-title p {
+        font-size: 15px;
+    }
+    
+    .icon-btn {
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+    
+    .content-area {
+        padding: 50px;
+        max-width: 1920px;
+        margin: 0 auto;
+    }
+    
+    .glass-card {
+        padding: 35px;
+        border-radius: 20px;
+        margin-bottom: 30px;
+    }
+    
+    .glass-card h3 {
+        font-size: 26px;
+        margin-bottom: 30px;
+        padding-bottom: 15px;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        gap: 30px;
+        margin-bottom: 40px;
+    }
+    
+    .stat-card {
+        padding: 35px;
+        border-radius: 20px;
+        gap: 25px;
+    }
+    
+    .stat-icon {
+        width: 90px;
+        height: 90px;
+        font-size: 40px;
+    }
+    
+    .stat-value {
+        font-size: 48px;
+    }
+    
+    .stat-label {
+        font-size: 16px;
+    }
+    
+    .stat-trend {
+        font-size: 14px;
+    }
+    
+    .grid-2 {
+        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+        gap: 30px;
+    }
+    
+    .form-group {
+        margin-bottom: 30px;
+    }
+    
+    .form-group label {
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    
+    .form-group input,
+    .form-group textarea,
+    .form-group select {
+        padding: 16px;
+        font-size: 16px;
+        border-radius: 14px;
+    }
+    
+    .btn-primary, .btn-refresh {
+        padding: 16px 32px;
+        font-size: 16px;
+        border-radius: 14px;
+    }
+    
+    .news-card {
+        padding: 30px;
+        border-radius: 20px;
+        gap: 30px;
+        margin-bottom: 25px;
+    }
+    
+    .news-card-image {
+        width: 160px;
+        height: 160px;
+        font-size: 40px;
+    }
+    
+    .news-card-title {
+        font-size: 22px;
+    }
+    
+    .news-card-excerpt {
+        font-size: 16px;
+    }
+    
+    .sentiment-gauge-container {
+        width: 400px;
+        height: 200px;
+    }
+    
+    .ai-result-card {
+        padding: 35px;
+    }
+    
+    .ai-result-header h4 {
+        font-size: 26px;
+    }
+    
+    .ai-result-metric-value {
+        font-size: 48px;
+    }
+    
+    table th,
+    table td {
+        padding: 16px;
+        font-size: 16px;
+    }
+}
+
+/* =============================================================================
+   Ultra-Wide Screen Optimizations (2560px+)
+   ============================================================================= */
+
+@media (min-width: 2560px) {
+    :root {
+        --sidebar-width: 400px;
+    }
+    
+    body {
+        font-size: 18px;
+    }
+    
+    .sidebar-header {
+        padding: 40px 35px;
+    }
+    
+    .sidebar-logo .logo-icon {
+        width: 60px;
+        height: 60px;
+        font-size: 28px;
+    }
+    
+    .sidebar-logo .logo-text h1 {
+        font-size: 26px;
+    }
+    
+    .sidebar-logo .logo-text p {
+        font-size: 14px;
+    }
+    
+    .nav-item {
+        padding: 20px 28px;
+        font-size: 18px;
+        gap: 18px;
+        margin-bottom: 12px;
+        border-radius: 14px;
+    }
+    
+    .nav-item svg {
+        width: 26px;
+        height: 26px;
+    }
+    
+    .top-header {
+        padding: 35px 60px;
+    }
+    
+    .header-title h2 {
+        font-size: 36px;
+    }
+    
+    .header-title p {
+        font-size: 16px;
+    }
+    
+    .icon-btn {
+        width: 52px;
+        height: 52px;
+        font-size: 22px;
+    }
+    
+    .content-area {
+        padding: 60px;
+        max-width: 2400px;
+    }
+    
+    .glass-card {
+        padding: 40px;
+        border-radius: 24px;
+        margin-bottom: 35px;
+    }
+    
+    .glass-card h3 {
+        font-size: 28px;
+        margin-bottom: 35px;
+        padding-bottom: 18px;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+        gap: 35px;
+        margin-bottom: 50px;
+    }
+    
+    .stat-card {
+        padding: 40px;
+        border-radius: 24px;
+        gap: 30px;
+    }
+    
+    .stat-icon {
+        width: 100px;
+        height: 100px;
+        font-size: 44px;
+    }
+    
+    .stat-value {
+        font-size: 54px;
+    }
+    
+    .stat-label {
+        font-size: 17px;
+    }
+    
+    .stat-trend {
+        font-size: 15px;
+    }
+    
+    .grid-2 {
+        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+        gap: 35px;
+    }
+    
+    .form-group {
+        margin-bottom: 35px;
+    }
+    
+    .form-group label {
+        font-size: 17px;
+        margin-bottom: 14px;
+    }
+    
+    .form-group input,
+    .form-group textarea,
+    .form-group select {
+        padding: 18px;
+        font-size: 17px;
+        border-radius: 16px;
+    }
+    
+    .btn-primary, .btn-refresh {
+        padding: 18px 36px;
+        font-size: 17px;
+        border-radius: 16px;
+    }
+    
+    .news-card {
+        padding: 35px;
+        border-radius: 24px;
+        gap: 35px;
+        margin-bottom: 30px;
+    }
+    
+    .news-card-image {
+        width: 180px;
+        height: 180px;
+        font-size: 44px;
+    }
+    
+    .news-card-title {
+        font-size: 24px;
+    }
+    
+    .news-card-excerpt {
+        font-size: 17px;
+    }
+    
+    .sentiment-gauge-container {
+        width: 450px;
+        height: 225px;
+    }
+    
+    .ai-result-card {
+        padding: 40px;
+    }
+    
+    .ai-result-header h4 {
+        font-size: 28px;
+    }
+    
+    .ai-result-metric-value {
+        font-size: 54px;
+    }
+    
+    table th,
+    table td {
+        padding: 18px;
+        font-size: 17px;
+    }
+}
+
 /* =============================================================================
    Light Theme
    ============================================================================= */
@@ -1240,6 +1785,40 @@ body.light-theme ::-webkit-scrollbar-track {
     vertical-align: middle;
 }
 
+/* Model Status Styles */
+.model-status {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.model-status.available {
+    background: rgba(16, 185, 129, 0.2);
+    border: 1px solid rgba(16, 185, 129, 0.4);
+    color: var(--success);
+}
+
+.model-status.unavailable {
+    background: rgba(239, 68, 68, 0.2);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    color: var(--danger);
+}
+
+/* Ensure stat values are always visible */
+.stat-value:empty::before {
+    content: '0';
+    opacity: 0.5;
+}
+
+.stat-mini span:empty::before {
+    content: '-';
+    opacity: 0.5;
+}
+
 /* Responsive adjustments for news cards */
 @media (max-width: 768px) {
     .news-card {

static/js/app.js

@@ -1,6 +1,29 @@
 // Crypto Intelligence Hub - Main JavaScript with Sidebar Navigation
 // Enhanced Pro Trading Terminal UI
 
+// =============================================================================
+// Console Warning Filter (suppress external server warnings)
+// =============================================================================
+(function() {
+    const originalWarn = console.warn;
+    console.warn = function(...args) {
+        const message = args.join(' ');
+        // Suppress Permissions-Policy warnings from external servers (e.g., Hugging Face)
+        if (message.includes('Unrecognized feature:') && 
+            (message.includes('ambient-light-sensor') || 
+             message.includes('battery') || 
+             message.includes('document-domain') ||
+             message.includes('layout-animations') ||
+             message.includes('legacy-image-formats') ||
+             message.includes('oversized-images') ||
+             message.includes('vr') ||
+             message.includes('wake-lock'))) {
+            return; // Suppress these warnings
+        }
+        originalWarn.apply(console, args);
+    };
+})();
+
 // =============================================================================
 // Toast Notification System
 // =============================================================================
@@ -325,36 +348,97 @@ async function loadDashboard() {
     }
     
     try {
-        // Load resources
-        const resourcesRes = await fetch('/api/resources');
+        // Load resources summary (use the correct endpoint)
+        const resourcesRes = await fetch('/api/resources/summary');
         if (!resourcesRes.ok) {
             throw new Error(`Resources API returned ${resourcesRes.status}`);
         }
-        const resourcesData = await resourcesRes.json();
+        let resourcesData = await resourcesRes.json();
         
         console.log('Resources data:', resourcesData);
         
-        if (resourcesData.success && resourcesData.summary) {
-            const totalResources = resourcesData.summary.total_resources || 0;
-            const freeResources = resourcesData.summary.free_resources || 0;
-            const modelsAvailable = resourcesData.summary.models_available || 0;
-            
-            document.getElementById('stat-total-resources').textContent = totalResources;
-            document.getElementById('stat-free-resources').textContent = freeResources;
-            document.getElementById('stat-models').textContent = modelsAvailable;
-            
-            // Update sidebar stats
-            const sidebarResources = document.getElementById('sidebar-resources');
-            const sidebarModels = document.getElementById('sidebar-models');
-            if (sidebarResources) sidebarResources.textContent = totalResources;
-            if (sidebarModels) sidebarModels.textContent = modelsAvailable;
+        // Check if data is an array (unexpected format - might be from wrong endpoint)
+        if (Array.isArray(resourcesData)) {
+            // Try to extract summary from array if it contains objects with summary property
+            const summaryObj = resourcesData.find(item => item && typeof item === 'object' && !Array.isArray(item) && item.summary);
+            if (summaryObj && summaryObj.summary) {
+                resourcesData = summaryObj;
+                console.log('Extracted summary from array response');
+            } else {
+                // Fallback: use array length as total resources estimate
+                const totalResources = resourcesData.length;
+                console.log(`Using array length (${totalResources}) as resource count estimate`);
+                document.getElementById('stat-total-resources').textContent = totalResources;
+                document.getElementById('stat-free-resources').textContent = Math.floor(totalResources * 0.8); // Estimate 80% free
+                document.getElementById('stat-models').textContent = '0';
+                
+                // Update sidebar stats
+                const sidebarResources = document.getElementById('sidebar-resources');
+                const sidebarModels = document.getElementById('sidebar-models');
+                if (sidebarResources) sidebarResources.textContent = totalResources;
+                if (sidebarModels) sidebarModels.textContent = '0';
+                return; // Exit early since we can't process array format properly
+            }
+        }
+        
+        // Check if we have the summary object
+        let summary = null;
+        if (resourcesData && typeof resourcesData === 'object' && !Array.isArray(resourcesData)) {
+            summary = resourcesData.summary || resourcesData;
+        }
+        
+        // Validate that summary is an object with expected properties
+        if (summary && typeof summary === 'object' && !Array.isArray(summary)) {
+            // Check if it has at least one of the expected properties
+            const hasExpectedProperties = summary.total_resources !== undefined || 
+                                         summary.free_resources !== undefined || 
+                                         summary.models_available !== undefined ||
+                                         (resourcesData.success !== false && resourcesData.success !== undefined);
             
-            // Load categories chart
-            if (resourcesData.summary.categories) {
-                createCategoriesChart(resourcesData.summary.categories);
+            if (hasExpectedProperties || resourcesData.success === true) {
+                const totalResources = summary.total_resources || 0;
+                const freeResources = summary.free_resources || 0;
+                const modelsAvailable = summary.models_available || 0;
+                
+                // Update metric cards - ensure elements exist before updating
+                const totalResourcesEl = document.getElementById('stat-total-resources');
+                const freeResourcesEl = document.getElementById('stat-free-resources');
+                const modelsEl = document.getElementById('stat-models');
+                
+                if (totalResourcesEl) totalResourcesEl.textContent = totalResources;
+                if (freeResourcesEl) freeResourcesEl.textContent = freeResources;
+                if (modelsEl) modelsEl.textContent = modelsAvailable;
+                
+                // Update sidebar stats
+                const sidebarResources = document.getElementById('sidebar-resources');
+                const sidebarModels = document.getElementById('sidebar-models');
+                if (sidebarResources) sidebarResources.textContent = totalResources;
+                if (sidebarModels) sidebarModels.textContent = modelsAvailable;
+                
+                // Load categories chart - handle both object and simple count format
+                if (summary.categories && typeof summary.categories === 'object' && !Array.isArray(summary.categories)) {
+                    const categories = summary.categories;
+                    // Convert {category: {count: N}} to {category: N} for chart
+                    const chartData = {};
+                    for (const [key, value] of Object.entries(categories)) {
+                        chartData[key] = typeof value === 'object' && value !== null ? (value.count || value) : value;
+                    }
+                    createCategoriesChart(chartData);
+                }
+            } else {
+                // Data structure exists but doesn't have expected properties
+                console.warn('Resources data missing expected properties:', resourcesData);
+                document.getElementById('stat-total-resources').textContent = '0';
+                document.getElementById('stat-free-resources').textContent = '0';
+                document.getElementById('stat-models').textContent = '0';
             }
         } else {
-            console.warn('Resources data format unexpected:', resourcesData);
+            // Invalid data format - log minimal info to avoid console spam
+            if (Array.isArray(resourcesData)) {
+                console.log(`Resources API returned array (${resourcesData.length} items) instead of summary object`);
+            } else {
+                console.log('Resources data format unexpected - not a valid object:', typeof resourcesData);
+            }
             document.getElementById('stat-total-resources').textContent = '0';
             document.getElementById('stat-free-resources').textContent = '0';
             document.getElementById('stat-models').textContent = '0';
@@ -364,10 +448,20 @@ async function loadDashboard() {
         try {
             const statusRes = await fetch('/api/status');
             if (statusRes.ok) {
-            const statusData = await statusRes.json();
-            
-                const providers = statusData.total_apis || statusData.total_providers || 0;
-                document.getElementById('stat-providers').textContent = providers;
+                const statusData = await statusRes.json();
+                
+                // Handle different response formats
+                let providers = 0;
+                if (statusData.providers && typeof statusData.providers === 'object') {
+                    providers = statusData.providers.total || 0;
+                } else {
+                    providers = statusData.total_apis || statusData.total_providers || statusData.providers || 0;
+                }
+                
+                const providersEl = document.getElementById('stat-providers');
+                if (providersEl) {
+                    providersEl.textContent = providers;
+                }
             
             // Display system status
             const systemStatusDiv = document.getElementById('system-status');
@@ -791,15 +885,34 @@ async function loadModels() {
         if (statusRes.ok) {
             const statusData = await statusRes.json();
             
+            // Handle different response formats from API
+            const isOk = statusData.ok || statusData.success || statusData.status === 'ok';
+            const pipelinesLoaded = statusData.pipelines_loaded || statusData.models_loaded || 0;
+            const availableModels = statusData.available_models || statusData.loaded_models || [];
+            const modelsCount = Array.isArray(availableModels) ? availableModels.length : (availableModels || 0);
+            const hfMode = statusData.hf_mode || 'unknown';
+            const transformersAvailable = statusData.transformers_available !== undefined ? statusData.transformers_available : false;
+            const statusMessage = statusData.status_message || (isOk ? 'Active' : 'Partial');
+            
             modelsStatusDiv.innerHTML = `
-                <div class="alert ${statusData.ok ? 'alert-success' : 'alert-warning'}">
-                    <strong>Status:</strong> ${statusData.ok ? '✅ Active' : '⚠️ Partial'}<br>
-                    <strong>Pipelines Loaded:</strong> ${statusData.pipelines_loaded || 0}<br>
-                    <strong>Available Models:</strong> ${statusData.available_models?.length || 0}<br>
-                    <strong>HF Mode:</strong> ${statusData.hf_mode || 'unknown'}<br>
-                    <strong>Transformers Available:</strong> ${statusData.transformers_available ? '✅' : '❌'}
+                <div class="alert ${isOk ? 'alert-success' : 'alert-warning'}">
+                    <strong>Status:</strong> ${isOk ? '✅ ' : '⚠️ '}${statusMessage}<br>
+                    <strong>Pipelines Loaded:</strong> ${pipelinesLoaded}<br>
+                    <strong>Available Models:</strong> ${modelsCount}<br>
+                    <strong>HF Mode:</strong> ${hfMode}<br>
+                    <strong>Transformers Available:</strong> ${transformersAvailable ? '✅' : '❌'}
                 </div>
             `;
+            
+            // Update stat-models in dashboard and sidebar
+            const modelsStatEl = document.getElementById('stat-models');
+            const sidebarModelsEl = document.getElementById('sidebar-models');
+            if (modelsStatEl) {
+                modelsStatEl.textContent = modelsCount;
+            }
+            if (sidebarModelsEl) {
+                sidebarModelsEl.textContent = modelsCount;
+            }
                         } else {
             throw new Error('Models status endpoint not available');
         }
@@ -809,6 +922,19 @@ async function loadModels() {
         if (listRes.ok) {
             const listData = await listRes.json();
             
+            // Update sidebar models count
+            const sidebarModels = document.getElementById('sidebar-models');
+            const modelsStatEl = document.getElementById('stat-models');
+            const totalModels = listData.total_models || (listData.models ? listData.models.length : 0);
+            const loadedModels = listData.models ? listData.models.filter(m => m.loaded).length : 0;
+            
+            if (sidebarModels) {
+                sidebarModels.textContent = loadedModels > 0 ? loadedModels : totalModels;
+            }
+            if (modelsStatEl) {
+                modelsStatEl.textContent = loadedModels > 0 ? loadedModels : totalModels;
+            }
+            
             if (listData.models && listData.models.length > 0) {
                 modelsListDiv.innerHTML = `
                     <div style="overflow-x: auto;">
@@ -822,14 +948,22 @@ async function loadModels() {
                                 </tr>
                             </thead>
                             <tbody>
-                                ${listData.models.map(model => `
+                                ${listData.models.map(model => {
+                                    const modelId = model.model_id || model.id || model.key || 'N/A';
+                                    const task = model.task || 'N/A';
+                                    const category = model.category || 'N/A';
+                                    const isLoaded = model.loaded === true;
+                                    const statusClass = isLoaded ? 'available' : 'unavailable';
+                                    const statusText = isLoaded ? '✅ Loaded' : '❌ Not Loaded';
+                                    return `
                                     <tr>
-                                        <td><strong>${model.model_id || model.key}</strong></td>
-                                        <td>${model.task || 'N/A'}</td>
-                                        <td>${model.category || 'N/A'}</td>
-                                        <td><span class="model-status ${model.loaded ? 'available' : 'unavailable'}">${model.loaded ? '✅ Loaded' : '❌ Not Loaded'}</span></td>
-                                        </tr>
-                                `).join('')}
+                                        <td><strong>${modelId}</strong></td>
+                                        <td>${task}</td>
+                                        <td>${category}</td>
+                                        <td><span class="model-status ${statusClass}">${statusText}</span></td>
+                                    </tr>
+                                `;
+                                }).join('')}
                             </tbody>
                         </table>
                     </div>