show only failing models feature

app.py

@@ -99,6 +99,30 @@ function refresh() {
         window.location.href = url.href;
     }
 }
+
+// Handle "Show only failing models" toggle
+function setupFailingModelsFilter() {
+    // Wait for DOM to be ready
+    setTimeout(() => {
+        const checkbox = document.querySelector('.failing-models-toggle input[type="checkbox"]');
+        if (checkbox) {
+            checkbox.addEventListener('change', (e) => {
+                const showOnlyFailing = e.target.checked;
+                const passingModels = document.querySelectorAll('.model-button.no-failures');
+                
+                passingModels.forEach(btn => {
+                    if (showOnlyFailing) {
+                        btn.style.display = 'none';
+                    } else {
+                        btn.style.display = 'block';
+                    }
+                });
+            });
+        }
+    }, 500);
+}
+
+setupFailingModelsFilter();
 """
 
 # Create the Gradio interface with sidebar and dark theme
@@ -128,6 +152,14 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css(), js=js_func)
                 interactive=True,
                 elem_classes=["history-view-button"]
             )
+            
+            # Toggle to show only failing models
+            show_only_failing = gr.Checkbox(
+                label="Show only failing models",
+                value=False,
+                interactive=True,
+                elem_classes=["failing-models-toggle"]
+            )
 
 
             # Model selection header (clickable toggle)
@@ -151,12 +183,17 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css(), js=js_func)
                     button_classes = ["model-button"]
                     if has_failures:
                         button_classes.append("model-button-failed")
+                        button_classes.append("has-failures")
+                    else:
+                        button_classes.append("model-button-passing")
+                        button_classes.append("no-failures")
                     
                     btn = gr.Button(
                         model_name,
                         variant="secondary",
                         size="sm",
-                        elem_classes=button_classes
+                        elem_classes=button_classes,
+                        elem_id=f"model-btn-{model_name}"
                     )
                     model_buttons.append(btn)
 

styles.css

@@ -194,6 +194,42 @@ div[data-testid="column"]:has(.sidebar) {
     transition: all 0.3s ease !important;
 }
 
+/* Failing models toggle styling */
+.failing-models-toggle {
+    background: linear-gradient(145deg, #1a1a1a, #0f0f0f) !important;
+    border: 1px solid #333 !important;
+    border-radius: 6px !important;
+    padding: 10px 12px !important;
+    margin: 8px 0px 15px 0px !important;
+    transition: all 0.3s ease !important;
+}
+
+.failing-models-toggle:hover {
+    background: linear-gradient(145deg, #252525, #1a1a1a) !important;
+    border-color: #444 !important;
+}
+
+.failing-models-toggle label {
+    color: #E53E3E !important;
+    font-family: monospace !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    cursor: pointer !important;
+}
+
+.failing-models-toggle input[type="checkbox"] {
+    accent-color: #E53E3E !important;
+    cursor: pointer !important;
+    width: 18px !important;
+    height: 18px !important;
+}
+
+.failing-models-toggle input[type="checkbox"]:checked {
+    accent-color: #FF6B6B !important;
+}
+
 
 /* Model button styling */
 .model-button {