Upload 43 files

index.html

@@ -584,7 +584,7 @@
                                 </svg>
                             </div>
                             <div class="stat-content">
-                                <div class="stat-label">Transformers Library</div>
+                                <div class="stat-label">ML Library Status</div>
                                 <div class="stat-value" id="transformers-status-value">Checking...</div>
                             </div>
                         </div>
@@ -598,7 +598,7 @@
                                 </svg>
                             </div>
                             <div class="stat-content">
-                                <div class="stat-label">HuggingFace Hub</div>
+                                <div class="stat-label">HF Hub Connection</div>
                                 <div class="stat-value" id="hf-status-value">Checking...</div>
                             </div>
                         </div>
@@ -614,7 +614,7 @@
                                 </svg>
                             </div>
                             <div class="stat-content">
-                                <div class="stat-label">Models Loaded</div>
+                                <div class="stat-label">AI Models Ready</div>
                                 <div class="stat-value" id="models-status-value">0</div>
                             </div>
                         </div>
@@ -627,7 +627,7 @@
                                 </svg>
                             </div>
                             <div class="stat-content">
-                                <div class="stat-label">Last Test Run</div>
+                                <div class="stat-label">Last Diagnostic</div>
                                 <div class="stat-value" id="last-test-value" style="font-size: 13px;">Never</div>
                             </div>
                         </div>
@@ -645,7 +645,7 @@
                                 </svg>
                                 Run Full Diagnostic
                             </button>
-                            <button class="btn-secondary" onclick="refreshDiagnosticStatus()">
+                            <button class="btn-refresh" onclick="refreshDiagnosticStatus()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
                                     <polyline points="23 4 23 10 17 10"></polyline>
                                     <polyline points="1 20 1 14 7 14"></polyline>
@@ -653,7 +653,7 @@
                                 </svg>
                                 Refresh Status
                             </button>
-                            <button class="btn-secondary" onclick="downloadDiagnosticLog()">
+                            <button class="btn-refresh" onclick="downloadDiagnosticLog()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
                                     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                     <polyline points="7 10 12 15 17 10"></polyline>

static/css/main.css

@@ -1967,121 +1967,7 @@ body.light-theme ::-webkit-scrollbar-track {
     font-weight: 600;
 }
 
-/* Diagnostic Actions */
-.diagnostic-actions {
-    display: flex;
-    gap: 12px;
-    margin-bottom: 32px;
-    flex-wrap: wrap;
-}
-
-.diagnostic-actions .btn-primary {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 12px 24px;
-    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-    border: none;
-    border-radius: 10px;
-    color: white;
-    font-weight: 600;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    position: relative;
-    overflow: hidden;
-}
-
-.diagnostic-actions .btn-primary::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.diagnostic-actions .btn-primary:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
-}
-
-.diagnostic-actions .btn-primary:hover:not(:disabled)::before {
-    width: 300px;
-    height: 300px;
-}
-
-.diagnostic-actions .btn-primary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-}
-
-.diagnostic-actions .btn-primary:disabled::before {
-    display: none;
-}
-
-.diagnostic-actions .btn-primary svg {
-    width: 16px;
-    height: 16px;
-    stroke-width: 2;
-    flex-shrink: 0;
-}
-
-.diagnostic-actions .btn-secondary {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 12px 24px;
-    background: rgba(102, 126, 234, 0.15);
-    border: 1px solid var(--primary);
-    border-radius: 10px;
-    color: var(--text-primary);
-    font-weight: 600;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    position: relative;
-    overflow: hidden;
-}
-
-.diagnostic-actions .btn-secondary::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(102, 126, 234, 0.1);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.diagnostic-actions .btn-secondary:hover {
-    background: rgba(102, 126, 234, 0.25);
-    border-color: var(--primary-light);
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
-}
-
-.diagnostic-actions .btn-secondary:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.diagnostic-actions .btn-secondary svg {
-    width: 16px;
-    height: 16px;
-    stroke-width: 2;
-    flex-shrink: 0;
-}
+/* Diagnostic Actions - Removed custom styles, using standard button classes */
 
 /* Test Progress */
 #test-progress {
@@ -2175,16 +2061,7 @@ body.light-theme ::-webkit-scrollbar-track {
         grid-template-columns: 1fr;
     }
 
-    .diagnostic-actions {
-        flex-direction: column;
-    }
-
-    .diagnostic-actions .btn-primary,
-    .diagnostic-actions .btn-secondary {
-        width: 100%;
-        justify-content: center;
-        padding: 14px 24px;
-    }
+    /* Diagnostic actions use standard button classes, no special mobile handling needed */
 
     .summary-grid {
         grid-template-columns: 1fr;

static/js/app.js

@@ -1601,20 +1601,31 @@ async function refreshDiagnosticStatus() {
             
             if (transformersStatusEl) {
                 const transformersAvailable = modelsData.transformers_available || false;
-                transformersStatusEl.textContent = transformersAvailable ? 'Available' : 'Not Available';
+                transformersStatusEl.textContent = transformersAvailable ? '✅ Installed' : '❌ Not Installed';
                 transformersStatusEl.style.color = transformersAvailable ? 'var(--success)' : 'var(--danger)';
             }
             
             if (hfStatusEl) {
                 const hfMode = modelsData.hf_mode || 'off';
                 const isConnected = hfMode !== 'off';
-                hfStatusEl.textContent = isConnected ? `Connected (${hfMode})` : 'Offline Mode';
+                const modeText = hfMode === 'public' ? 'Public' : hfMode === 'auth' ? 'Authenticated' : 'Offline';
+                hfStatusEl.textContent = isConnected ? `✅ ${modeText}` : '⚠️ Offline';
                 hfStatusEl.style.color = isConnected ? 'var(--success)' : 'var(--warning)';
             }
             
             if (modelsLoadedEl) {
                 const modelsLoaded = modelsData.models_loaded || 0;
-                modelsLoadedEl.textContent = modelsLoaded;
+                const modelsFailed = modelsData.models_failed || 0;
+                if (modelsLoaded > 0) {
+                    modelsLoadedEl.textContent = `${modelsLoaded} Ready`;
+                    modelsLoadedEl.style.color = 'var(--success)';
+                } else if (modelsFailed > 0) {
+                    modelsLoadedEl.textContent = `${modelsFailed} Failed`;
+                    modelsLoadedEl.style.color = 'var(--danger)';
+                } else {
+                    modelsLoadedEl.textContent = '0';
+                    modelsLoadedEl.style.color = 'var(--text-secondary)';
+                }
             }
         }