Upload 47 files

index.html

@@ -14,11 +14,11 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
     
     <!-- Styles -->
-    <link rel="stylesheet" href="/static/css/main.css?v=2">
-    <link rel="stylesheet" href="/static/css/toast.css?v=2">
-    <script src="/static/js/trading-pairs-loader.js?v=2" defer></script>
-    <script src="/static/js/toast.js?v=2" defer></script>
-    <script src="/static/js/app.js?v=2" defer></script>
+    <link rel="stylesheet" href="/static/css/main.css?v=4">
+    <link rel="stylesheet" href="/static/css/toast.css?v=4">
+    <script src="/static/js/trading-pairs-loader.js?v=4" defer></script>
+    <script src="/static/js/toast.js?v=4" defer></script>
+    <script src="/static/js/app.js?v=4" defer></script>
     
     <!-- Favicon -->
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

static/css/main.css

@@ -33,8 +33,8 @@
     --glow: 0 0 20px rgba(102, 126, 234, 0.3);
     
     /* Sidebar */
-    --sidebar-width: 280px;
-    --sidebar-collapsed-width: 80px;
+    --sidebar-width: 240px;
+    --sidebar-collapsed-width: 70px;
     
     /* Gradients */
     --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -114,7 +114,7 @@ body::before {
 }
 
 .sidebar-header {
-    padding: 25px 20px;
+    padding: 16px 16px;
     border-bottom: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
@@ -124,7 +124,7 @@ body::before {
 .sidebar-logo {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
     transition: var(--transition-normal);
 }
 
@@ -134,10 +134,10 @@ body::before {
 }
 
 .sidebar-logo .logo-icon {
-    width: 45px;
-    height: 45px;
+    width: 36px;
+    height: 36px;
     background: var(--gradient-purple);
-    border-radius: 12px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -153,7 +153,7 @@ body::before {
 }
 
 .sidebar-logo .logo-text h1 {
-    font-size: 20px;
+    font-size: 17px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
@@ -163,7 +163,7 @@ body::before {
 }
 
 .sidebar-logo .logo-text p {
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text-secondary);
     font-weight: 500;
 }
@@ -188,31 +188,31 @@ body::before {
 /* Sidebar Navigation */
 .sidebar-nav {
     flex: 1;
-    padding: 20px 15px;
+    padding: 14px 12px;
     overflow-y: auto;
 }
 
 .nav-item {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 14px 18px;
+    gap: 10px;
+    padding: 11px 14px;
     background: transparent;
     border: 1px solid transparent;
-    border-radius: 12px;
+    border-radius: 10px;
     color: var(--text-secondary);
     cursor: pointer;
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 600;
     transition: all var(--transition-fast);
     width: 100%;
     text-align: left;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
 }
 
 .nav-item svg {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     flex-shrink: 0;
     stroke-width: 2;
 }
@@ -233,7 +233,7 @@ body::before {
 
 /* Sidebar Footer */
 .sidebar-footer {
-    padding: 20px;
+    padding: 14px 16px;
     border-top: 1px solid var(--border);
 }
 

static/js/app.js

@@ -6,6 +6,8 @@
 // =============================================================================
 (function() {
     const originalWarn = console.warn;
+    const originalError = console.error;
+    
     console.warn = function(...args) {
         const message = args.join(' ');
         // Suppress Permissions-Policy warnings from external servers (e.g., Hugging Face)
@@ -22,6 +24,18 @@
         }
         originalWarn.apply(console, args);
     };
+    
+    console.error = function(...args) {
+        const message = args.join(' ');
+        // Suppress Hugging Face Spaces SSE errors (only relevant for HF deployment)
+        if (message.includes('/api/spaces/') && message.includes('/events') ||
+            message.includes('Failed to fetch Space status') ||
+            message.includes('SSE Stream ended') ||
+            message.includes('ERR_HTTP2_PROTOCOL_ERROR')) {
+            return; // Suppress these errors (not relevant for local deployment)
+        }
+        originalError.apply(console, args);
+    };
 })();
 
 // =============================================================================
@@ -856,13 +870,19 @@ async function loadModels() {
             const transformersAvailable = statusData.transformers_available !== undefined ? statusData.transformers_available : false;
             const statusMessage = statusData.status_message || (isOk ? 'Active' : 'Partial');
             
+            // Determine if lazy loading is active
+            const isLazyLoading = hfMode === 'public' && pipelinesLoaded === 0 && modelsCount > 0;
+            const alertClass = isLazyLoading ? 'alert-info' : (isOk ? 'alert-success' : 'alert-warning');
+            const statusIcon = isLazyLoading ? 'ℹ️' : (isOk ? '✅' : '⚠️');
+            
             modelsStatusDiv.innerHTML = `
-                <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>
+                <div class="alert ${alertClass}">
+                    <strong>Status:</strong> ${statusIcon} ${statusMessage}<br>
+                    <strong>Models Configured:</strong> ${modelsCount} (Lazy Loading)<br>
+                    <strong>Models Loaded:</strong> ${pipelinesLoaded}<br>
                     <strong>HF Mode:</strong> ${hfMode}<br>
-                    <strong>Transformers Available:</strong> ${transformersAvailable ? '✅' : '❌'}
+                    <strong>Transformers:</strong> ${transformersAvailable ? '✅ Available' : '❌ Not Available'}
+                    ${isLazyLoading ? '<br><br><em>💡 Models will load automatically on first use (sentiment analysis, etc.)</em>' : ''}
                 </div>
             `;
             
@@ -917,8 +937,9 @@ async function loadModels() {
                                     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';
+                                    const hasError = model.error && model.error.length > 0;
+                                    const statusClass = isLoaded ? 'available' : (hasError ? 'error' : 'standby');
+                                    const statusText = isLoaded ? '✅ Loaded' : (hasError ? '❌ Error' : '⏸️ Standby');
                                     return `
                                     <tr>
                                         <td><strong>${modelId}</strong></td>