Hook it up to the data-source

.gitignore

@@ -0,0 +1 @@
+__pycache__

CLAUDE.md

@@ -1,90 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is a **Test Results Dashboard** project (Tcid) that provides interactive visualization of AI model testing results. The project consists of two main applications:
-
-1. **Gradio Dashboard** (`app.py`) - Python-based web dashboard using Gradio and Matplotlib
-2. **HTML Dashboard** (`index.html`) - Standalone HTML dashboard with Chart.js visualization
-
-Both dashboards display test results for AI models including metrics like passed, failed, skipped, and error counts.
-
-## Architecture
-
-### Core Components
-
-- **app.py**: Main Gradio application with dark theme UI, sidebar navigation, and matplotlib pie charts
-- **model_stats.json**: JSON data file containing test results for different AI models
-- **index.html**: Self-contained HTML dashboard with device-specific performance comparison (NVIDIA vs AMD)
-- **requirements.txt**: Python dependencies (currently only matplotlib>=3.8)
-
-### Data Structure
-
-Model statistics follow this format:
-```json
-{
-    "model_name": {
-        "passed": int,
-        "failed": int, 
-        "skipped": int,
-        "error": int
-    }
-}
-```
-
-The HTML dashboard extends this with device-specific data for NVIDIA and AMD performance comparisons.
-
-## Development Commands
-
-### Environment Setup
-```bash
-# Activate virtual environment
-source venv_tci/bin/activate
-
-# Install dependencies
-pip install -r requirements.txt
-```
-
-### Running the Applications
-
-**Gradio Dashboard:**
-```bash
-python app.py
-```
-
-**HTML Dashboard:**
-Open `index.html` directly in a web browser - no server required.
-
-### Python Environment
-- Python 3.12.4
-- Virtual environment located at `venv_tci/`
-- Dependencies managed via `requirements.txt`
-
-## Key Implementation Details
-
-### Gradio Application (app.py)
-- Uses `MODELS` dictionary for hardcoded test data (lines 8-12)
-- `plot_model_stats()` function generates matplotlib pie charts with dark theme
-- Custom CSS for dark theme styling (lines 77-133)
-- Sidebar navigation with model selection buttons
-- Real-time chart updates on model selection
-
-### Data Management
-- Model data is currently hardcoded in `app.py` 
-- External JSON data file `model_stats.json` exists but is not integrated
-- HTML dashboard has embedded JavaScript data
-
-### Styling
-- Dark theme with black backgrounds (#000000)
-- Custom color scheme: Green (passed), Red (failed), Orange (skipped), Purple (error)
-- Responsive design with sidebar layout
-
-## Hugging Face Spaces Configuration
-
-This project is configured as a Hugging Face Space:
-- SDK: Gradio 5.38.0
-- App file: app.py
-- Space emoji: 👁
-- Color theme: indigo to pink gradient

app.py

@@ -1,8 +1,12 @@
 import matplotlib.pyplot as plt
 import matplotlib
 import numpy as np
-
+import pandas as pd
 import gradio as gr
+import threading
+import time
+from datetime import datetime
+from data import get_data
 
 # Configure matplotlib to prevent memory warnings and set dark background
 matplotlib.rcParams['figure.max_open_warning'] = 0
@@ -11,129 +15,87 @@ matplotlib.rcParams['axes.facecolor'] = '#000000'
 matplotlib.rcParams['savefig.facecolor'] = '#000000'
 plt.ioff()  # Turn off interactive mode to prevent figure accumulation
 
+# Global variables for data
+df = pd.DataFrame()
+available_models = []
+last_update_time = None
+
+def load_data():
+    """Load data from the data source."""
+    global df, available_models, last_update_time
+    try:
+        print(f"[{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}] Loading data...")
+        new_df = get_data()
+        new_models = new_df.index.tolist()
+        
+        # Update global variables
+        df = new_df
+        available_models = new_models
+        last_update_time = datetime.now()
+        
+        print(f"[{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}] Data loaded successfully: {len(available_models)} models")
+        print(f"Models: {available_models[:5]}{'...' if len(available_models) > 5 else ''}")
+        
+        return True
+    except Exception as e:
+        print(f"[{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}] Error loading data: {e}")
+        return False
+
+def schedule_data_reload():
+    """Schedule the next data reload."""
+    def reload_data():
+        load_data()
+        # Schedule the next reload in 15 minutes (900 seconds)
+        timer = threading.Timer(900.0, reload_data)
+        timer.daemon = True  # Dies when main thread dies
+        timer.start()
+        print(f"[{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}] Next data reload scheduled in 15 minutes")
+    
+    # Start the first reload timer
+    timer = threading.Timer(900.0, reload_data)
+    timer.daemon = True
+    timer.start()
+    print(f"[{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}] Data auto-reload scheduled every 15 minutes")
 
-# Sample test results with test names
-MODELS = {
-    "llama": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore"],
-            "failed": ["network_timeout"],
-            "skipped": ["gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "distributed", "multi_gpu"],
-            "error": []
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops"],
-            "failed": ["network_timeout", "distributed"],
-            "skipped": ["multi_gpu"],
-            "error": []
-        }
-    },
-    "gemma3": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "retry_logic", "timeout_handle", "graceful_shutdown", "hot_reload", "config_watch", "env_vars", "secrets_mgmt", "tls_cert", "encryption", "compression", "serialization", "deserialization", "validation"],
-            "failed": ["gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "distributed", "multi_gpu", "opencl_init", "driver_conflict", "memory_bandwidth", "compute_units", "rocm_version", "hip_compile", "kernel_launch", "buffer_transfer", "atomic_ops", "wavefront_sync"],
-            "skipped": ["perf_test", "stress_test", "load_test", "endurance", "benchmark", "profiling", "memory_leak", "cpu_usage", "disk_io", "network_bw", "latency", "throughput"],
-            "error": []
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "retry_logic", "timeout_handle", "graceful_shutdown", "hot_reload", "config_watch", "env_vars", "secrets_mgmt", "tls_cert", "encryption", "compression", "serialization", "deserialization", "validation", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops"],
-            "failed": ["distributed", "multi_gpu", "cuda_version", "nvcc_compile", "stream_sync", "device_reset", "peer_access", "unified_memory", "texture_bind", "surface_write", "constant_mem", "shared_mem"],
-            "skipped": ["perf_test", "stress_test", "load_test", "endurance", "benchmark", "profiling", "memory_leak", "cpu_usage", "disk_io", "network_bw"],
-            "error": []
-        }
-    },
-    "csm": {
-        "amd": {
-            "passed": [],
-            "failed": [],
-            "skipped": [],
-            "error": ["system_crash"]
-        },
-        "nvidia": {
-            "passed": [],
-            "failed": [],
-            "skipped": [],
-            "error": ["system_crash"]
-        }
-    },
-    "claude": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break"],
-            "failed": ["gpu_accel", "cuda_ops", "ml_inference", "distributed", "multi_gpu", "opencl_init", "driver_conflict"],
-            "skipped": ["tensor_ops", "perf_test", "stress_test", "load_test", "endurance", "benchmark"],
-            "error": ["memory_bandwidth"]
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops"],
-            "failed": ["distributed", "multi_gpu", "cuda_version", "nvcc_compile"],
-            "skipped": ["perf_test", "stress_test", "load_test", "endurance"],
-            "error": []
-        }
-    },
-    "mistral": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring"],
-            "failed": ["gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "distributed", "multi_gpu", "opencl_init", "driver_conflict", "memory_bandwidth", "compute_units", "rocm_version", "hip_compile", "kernel_launch"],
-            "skipped": ["security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break"],
-            "error": ["buffer_transfer", "atomic_ops"]
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "security_scan"],
-            "failed": ["distributed", "multi_gpu", "cuda_version", "nvcc_compile", "stream_sync", "device_reset"],
-            "skipped": ["password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter"],
-            "error": ["peer_access"]
-        }
-    },
-    "phi": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection"],
-            "failed": ["gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "distributed", "multi_gpu", "opencl_init", "driver_conflict", "memory_bandwidth"],
-            "skipped": ["rate_limiter", "load_balance", "circuit_break", "retry_logic", "timeout_handle", "graceful_shutdown"],
-            "error": []
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "rate_limiter"],
-            "failed": ["distributed", "multi_gpu", "cuda_version"],
-            "skipped": ["load_balance", "circuit_break", "retry_logic", "timeout_handle"],
-            "error": []
-        }
-    },
-    "qwen": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety"],
-            "failed": ["backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "distributed", "multi_gpu"],
-            "skipped": ["retry_logic", "timeout_handle", "graceful_shutdown", "hot_reload", "config_watch"],
-            "error": ["env_vars", "secrets_mgmt", "tls_cert"]
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops"],
-            "failed": ["log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "distributed", "multi_gpu", "cuda_version", "nvcc_compile"],
-            "skipped": ["retry_logic", "timeout_handle", "graceful_shutdown", "hot_reload"],
-            "error": ["config_watch", "env_vars"]
-        }
-    },
-    "deepseek": {
-        "amd": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "retry_logic", "timeout_handle", "graceful_shutdown", "hot_reload", "config_watch", "env_vars", "secrets_mgmt", "tls_cert", "encryption", "compression"],
-            "failed": ["gpu_accel", "cuda_ops", "ml_inference", "tensor_ops", "opencl_init", "driver_conflict", "memory_bandwidth", "compute_units"],
-            "skipped": ["distributed", "multi_gpu", "serialization", "deserialization", "validation"],
-            "error": []
-        },
-        "nvidia": {
-            "passed": ["auth_login", "data_validation", "api_response", "file_upload", "cache_hit", "user_permissions", "db_query", "session_mgmt", "input_sanitize", "rate_limit", "error_handling", "memory_alloc", "thread_safety", "backup_restore", "config_load", "log_rotation", "health_check", "metrics", "alerts", "monitoring", "security_scan", "password_hash", "jwt_token", "oauth_flow", "csrf_protect", "xss_filter", "sql_injection", "rate_limiter", "load_balance", "circuit_break", "retry_logic", "timeout_handle", "graceful_shutdown", "hot_reload", "config_watch", "env_vars", "secrets_mgmt", "tls_cert", "encryption", "compression", "gpu_accel", "cuda_ops", "ml_inference", "tensor_ops"],
-            "failed": ["distributed", "multi_gpu"],
-            "skipped": ["serialization", "deserialization", "validation"],
-            "error": []
-        }
-    }
-}
+# Load data once at startup
+if not load_data():
+    print("WARNING: Failed to load data! Adding fallback models.")
+    available_models = ["auto", "bert", "clip", "llama", "t5"]  # Fallback models for testing
+
+# Start the auto-reload scheduler
+schedule_data_reload()
 
 def generate_underlined_line(text: str) -> str:
     return text + "\n" + "─" * len(text) + "\n"
 
 def plot_model_stats(model_name: str) -> tuple[plt.Figure, str, str]:
     """Draws a pie chart of model's passed, failed, skipped, and error stats."""
-    model_stats = MODELS[model_name]
+    if df.empty or model_name not in df.index:
+        # Handle case where model data is not available
+        fig, ax = plt.subplots(figsize=(10, 8), facecolor='#000000')
+        ax.set_facecolor('#000000')
+        ax.text(0.5, 0.5, f'No data available for {model_name}', 
+                horizontalalignment='center', verticalalignment='center',
+                transform=ax.transAxes, fontsize=16, color='#888888',
+                fontfamily='monospace', weight='normal')
+        ax.set_xlim(0, 1)
+        ax.set_ylim(0, 1)
+        ax.axis('off')
+        return fig, "No data available", "No data available"
+    
+    row = df.loc[model_name]
+    
+    # Handle missing values and get counts directly from dataframe
+    success_amd = int(row.get('success_amd', 0)) if pd.notna(row.get('success_amd', 0)) else 0
+    success_nvidia = int(row.get('success_nvidia', 0)) if pd.notna(row.get('success_nvidia', 0)) else 0
+    failed_multi_amd = int(row.get('failed_multi_no_amd', 0)) if pd.notna(row.get('failed_multi_no_amd', 0)) else 0
+    failed_multi_nvidia = int(row.get('failed_multi_no_nvidia', 0)) if pd.notna(row.get('failed_multi_no_nvidia', 0)) else 0
+    failed_single_amd = int(row.get('failed_single_no_amd', 0)) if pd.notna(row.get('failed_single_no_amd', 0)) else 0
+    failed_single_nvidia = int(row.get('failed_single_no_nvidia', 0)) if pd.notna(row.get('failed_single_no_nvidia', 0)) else 0
+    
+    # Calculate total failures
+    total_failed_amd = failed_multi_amd + failed_single_amd
+    total_failed_nvidia = failed_multi_nvidia + failed_single_nvidia
     
     # Softer color palette - less pastel, more vibrant
     colors = {
@@ -143,9 +105,20 @@ def plot_model_stats(model_name: str) -> tuple[plt.Figure, str, str]:
         'error': '#8B0000'      # Dark red
     }
     
-    # Convert test lists to counts for chart display
-    amd_stats = {k: len(v) for k, v in model_stats['amd'].items()}
-    nvidia_stats = {k: len(v) for k, v in model_stats['nvidia'].items()}
+    # Create stats dictionaries directly from dataframe values
+    amd_stats = {
+        'passed': success_amd,
+        'failed': total_failed_amd,
+        'skipped': 0,  # Not available in this dataset
+        'error': 0     # Not available in this dataset
+    }
+    
+    nvidia_stats = {
+        'passed': success_nvidia,
+        'failed': total_failed_nvidia,
+        'skipped': 0,  # Not available in this dataset
+        'error': 0     # Not available in this dataset
+    }
     
     # Filter out categories with 0 values for cleaner visualization
     amd_filtered = {k: v for k, v in amd_stats.items() if v > 0}
@@ -234,68 +207,88 @@ def plot_model_stats(model_name: str) -> tuple[plt.Figure, str, str]:
     plt.tight_layout()
     plt.subplots_adjust(top=0.85, wspace=0.4)  # Added wspace for padding between charts
     
-    # Generate separate failed tests info for AMD and NVIDIA with exclusive/common separation
-    amd_failed = set(model_stats['amd']['failed'])
-    nvidia_failed = set(model_stats['nvidia']['failed'])
-    
-    # Find exclusive and common failures
-    amd_exclusive = amd_failed - nvidia_failed
-    nvidia_exclusive = nvidia_failed - amd_failed
-    common_failures = amd_failed & nvidia_failed
-    
-    # Build AMD info
-    amd_failed_info = ""
-    if not amd_exclusive and not common_failures:
-        msg = "Error(s) detected" if model_stats["amd"]["error"] else "No failures"
-        amd_failed_info += generate_underlined_line(msg)
-    if amd_exclusive:
-        amd_failed_info += generate_underlined_line("Failures on AMD (exclusive):")
-        amd_failed_info += "\n".join(sorted(amd_exclusive))
-        amd_failed_info += "\n\n" if common_failures else ""
-    if common_failures:
-        amd_failed_info += generate_underlined_line("Failures on AMD (common):")
-        amd_failed_info += "\n".join(sorted(common_failures))
-    
-    # Build NVIDIA info
-    nvidia_failed_info = ""
-    if not nvidia_exclusive and not common_failures:
-        msg = "Error(s) detected" if model_stats["nvidia"]["error"] else "No failures"
-        nvidia_failed_info += generate_underlined_line(msg)
-    if nvidia_exclusive:
-        nvidia_failed_info += generate_underlined_line("Failures on NVIDIA (exclusive):")
-        nvidia_failed_info += "\n".join(sorted(nvidia_exclusive))
-        nvidia_failed_info += "\n\n" if common_failures else ""
-    if common_failures:
-        nvidia_failed_info += generate_underlined_line("Failures on NVIDIA (common):")
-        nvidia_failed_info += "\n".join(sorted(common_failures))
+    # Generate failure info directly from dataframe
+    failures_amd = row.get('failures_amd', {})
+    failures_nvidia = row.get('failures_nvidia', {})
+    
+    amd_failed_info = extract_failure_info(failures_amd, 'AMD', failed_multi_amd, failed_single_amd)
+    nvidia_failed_info = extract_failure_info(failures_nvidia, 'NVIDIA', failed_multi_nvidia, failed_single_nvidia)
     
     return fig, amd_failed_info, nvidia_failed_info
 
-def get_model_stats_summary(model_name: str) -> tuple:
-    """Get summary stats for a model (total tests, success rate, status indicator)."""
-    stats = MODELS[model_name]
-    # Combine AMD and NVIDIA results
-    total_passed = len(stats['amd']['passed']) + len(stats['nvidia']['passed'])
-    total_failed = len(stats['amd']['failed']) + len(stats['nvidia']['failed'])
-    total_skipped = len(stats['amd']['skipped']) + len(stats['nvidia']['skipped'])
-    total_error = len(stats['amd']['error']) + len(stats['nvidia']['error'])
-    
-    total = total_passed + total_failed + total_skipped + total_error
-    success_rate = (total_passed / total * 100) if total > 0 else 0
-    
-    # Determine status indicator color
-    if success_rate >= 80:
-        status_class = "success-high"
-    elif success_rate >= 50:
-        status_class = "success-medium"
-    else:
-        status_class = "success-low"
-    
-    return total, success_rate, status_class
+def extract_failure_info(failures_obj, device: str, multi_count: int, single_count: int) -> str:
+    """Extract failure information from failures object."""
+    if (not failures_obj or pd.isna(failures_obj)) and multi_count == 0 and single_count == 0:
+        return f"No failures on {device}"
+    
+    info_lines = []
+    
+    # Add counts summary
+    if multi_count > 0 or single_count > 0:
+        info_lines.append(generate_underlined_line(f"Failure Summary for {device}:"))
+        if multi_count > 0:
+            info_lines.append(f"Multi GPU failures: {multi_count}")
+        if single_count > 0:
+            info_lines.append(f"Single GPU failures: {single_count}")
+        info_lines.append("")
+    
+    # Try to extract detailed failure information
+    try:
+        if isinstance(failures_obj, dict):
+            # Check for multi and single failure categories
+            if 'multi' in failures_obj and failures_obj['multi']:
+                info_lines.append(generate_underlined_line(f"Multi GPU failure details:"))
+                if isinstance(failures_obj['multi'], list):
+                    # Handle list of failures (could be strings or dicts)
+                    for i, failure in enumerate(failures_obj['multi'][:10]):  # Limit to first 10
+                        if isinstance(failure, dict):
+                            # Extract meaningful info from dict (e.g., test name, line, etc.)
+                            failure_str = failure.get('line', failure.get('test', failure.get('name', str(failure))))
+                            info_lines.append(f"  {i+1}. {failure_str}")
+                        else:
+                            info_lines.append(f"  {i+1}. {str(failure)}")
+                    if len(failures_obj['multi']) > 10:
+                        info_lines.append(f"... and {len(failures_obj['multi']) - 10} more")
+                else:
+                    info_lines.append(str(failures_obj['multi']))
+                info_lines.append("")
+            
+            if 'single' in failures_obj and failures_obj['single']:
+                info_lines.append(generate_underlined_line(f"Single GPU failure details:"))
+                if isinstance(failures_obj['single'], list):
+                    # Handle list of failures (could be strings or dicts)
+                    for i, failure in enumerate(failures_obj['single'][:10]):  # Limit to first 10
+                        if isinstance(failure, dict):
+                            # Extract meaningful info from dict (e.g., test name, line, etc.)
+                            failure_str = failure.get('line', failure.get('test', failure.get('name', str(failure))))
+                            info_lines.append(f"  {i+1}. {failure_str}")
+                        else:
+                            info_lines.append(f"  {i+1}. {str(failure)}")
+                    if len(failures_obj['single']) > 10:
+                        info_lines.append(f"... and {len(failures_obj['single']) - 10} more")
+                else:
+                    info_lines.append(str(failures_obj['single']))
+        
+        return "\n".join(info_lines) if info_lines else f"No detailed failure info for {device}"
+    
+    except Exception as e:
+        if multi_count > 0 or single_count > 0:
+            return f"Failures detected on {device} (Multi: {multi_count}, Single: {single_count})\nDetails unavailable: {str(e)}"
+        return f"Error processing failure info for {device}: {str(e)}"
 
 def create_summary_page() -> plt.Figure:
     """Create a summary page with model names and both AMD/NVIDIA test stats bars."""
-    fig, ax = plt.subplots(figsize=(16, len(MODELS) * 2.5 + 2), facecolor='#000000')
+    if df.empty:
+        fig, ax = plt.subplots(figsize=(16, 8), facecolor='#000000')
+        ax.set_facecolor('#000000')
+        ax.text(0.5, 0.5, 'No data available', 
+                horizontalalignment='center', verticalalignment='center',
+                transform=ax.transAxes, fontsize=20, color='#888888',
+                fontfamily='monospace', weight='normal')
+        ax.axis('off')
+        return fig
+    
+    fig, ax = plt.subplots(figsize=(16, len(available_models) * 2.5 + 2), facecolor='#000000')
     ax.set_facecolor('#000000')
     
     colors = {
@@ -307,11 +300,37 @@ def create_summary_page() -> plt.Figure:
     
     visible_model_count = 0
     max_y = 0
-    for i, (model_name, model_data) in enumerate(MODELS.items()):
-        # Process AMD and NVIDIA data
-        amd_stats = {k: len(v) for k, v in model_data['amd'].items()}
+    
+    for i, model_name in enumerate(available_models):
+        if model_name not in df.index:
+            continue
+            
+        row = df.loc[model_name]
+        
+        # Get values directly from dataframe
+        success_amd = int(row.get('success_amd', 0)) if pd.notna(row.get('success_amd', 0)) else 0
+        success_nvidia = int(row.get('success_nvidia', 0)) if pd.notna(row.get('success_nvidia', 0)) else 0
+        failed_multi_amd = int(row.get('failed_multi_no_amd', 0)) if pd.notna(row.get('failed_multi_no_amd', 0)) else 0
+        failed_multi_nvidia = int(row.get('failed_multi_no_nvidia', 0)) if pd.notna(row.get('failed_multi_no_nvidia', 0)) else 0
+        failed_single_amd = int(row.get('failed_single_no_amd', 0)) if pd.notna(row.get('failed_single_no_amd', 0)) else 0
+        failed_single_nvidia = int(row.get('failed_single_no_nvidia', 0)) if pd.notna(row.get('failed_single_no_nvidia', 0)) else 0
+        
+        # Calculate stats
+        amd_stats = {
+            'passed': success_amd,
+            'failed': failed_multi_amd + failed_single_amd,
+            'skipped': 0,
+            'error': 0
+        }
+        
+        nvidia_stats = {
+            'passed': success_nvidia,
+            'failed': failed_multi_nvidia + failed_single_nvidia,
+            'skipped': 0,
+            'error': 0
+        }
+        
         amd_total = sum(amd_stats.values())
-        nvidia_stats = {k: len(v) for k, v in model_data['nvidia'].items()}
         nvidia_total = sum(nvidia_stats.values())
         
         if amd_total == 0 and nvidia_total == 0:
@@ -391,471 +410,41 @@ def create_summary_page() -> plt.Figure:
     
     return fig
 
-# Custom CSS for dark theme
-dark_theme_css = """
-/* Global dark theme */
-.gradio-container {
-    background-color: #000000 !important;
-    color: white !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden !important;
-}
-
-/* Remove borders from all components */
-.gr-box, .gr-form, .gr-panel {
-    border: none !important;
-    background-color: #000000 !important;
-}
-
-/* Sidebar styling */
-.sidebar {
-    background: linear-gradient(145deg, #111111, #1a1a1a) !important;
-    border: none !important;
-    padding: 25px !important;
-    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
-    margin: 0 !important;
-    height: 100vh !important;
-    position: fixed !important;
-    left: 0 !important;
-    top: 0 !important;
-    width: 300px !important;
-    box-sizing: border-box !important;
-    overflow-y: auto !important;
-    scrollbar-width: thin !important;
-    scrollbar-color: #333333 #111111 !important;
-}
-
-/* Sidebar scrollbar styling */
-.sidebar::-webkit-scrollbar {
-    width: 8px !important;
-    background: #111111 !important;
-}
-
-.sidebar::-webkit-scrollbar-track {
-    background: #111111 !important;
-}
-
-.sidebar::-webkit-scrollbar-thumb {
-    background-color: #333333 !important;
-    border-radius: 4px !important;
-}
-
-.sidebar::-webkit-scrollbar-thumb:hover {
-    background-color: #555555 !important;
-}
-
-/* Enhanced model button styling */
-.model-button {
-    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
-    color: white !important;
-    border: 2px solid transparent !important;
-    margin: 2px 0 !important;
-    border-radius: 5px !important;
-    padding: 8px 12px !important;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    position: relative !important;
-    overflow: hidden !important;
-    box-shadow: 
-        0 4px 15px rgba(0, 0, 0, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
-    font-family: monospace !important;
-}
-
-.model-button:hover {
-    background: linear-gradient(135deg, #3a3a3a, #2e2e2e) !important;
-    color: #74b9ff !important;
-}
-
-.model-button:active {
-    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
-    color: #5a9bd4 !important;
-}
-
-/* Model stats badge */
-.model-stats {
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-    margin-top: 8px !important;
-    font-size: 12px !important;
-    opacity: 0.8 !important;
-}
-
-.stats-badge {
-    background: rgba(116, 185, 255, 0.2) !important;
-    padding: 4px 8px !important;
-    border-radius: 10px !important;
-    font-weight: 500 !important;
-    font-size: 11px !important;
-    color: #74b9ff !important;
-}
-
-.success-indicator {
-    width: 8px !important;
-    height: 8px !important;
-    border-radius: 50% !important;
-    display: inline-block !important;
-    margin-right: 6px !important;
-}
-
-.success-high { background-color: #4CAF50 !important; }
-.success-medium { background-color: #FF9800 !important; }
-.success-low { background-color: #F44336 !important; }
-
-/* Summary button styling - distinct from model buttons */
-.summary-button {
-    background: linear-gradient(135deg, #4a4a4a, #3e3e3e) !important;
-    color: white !important;
-    border: 2px solid #555555 !important;
-    margin: 2px 0 15px 0 !important;
-    border-radius: 5px !important;
-    padding: 12px 12px !important;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    position: relative !important;
-    overflow: hidden !important;
-    box-shadow: 
-        0 4px 15px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
-    font-family: monospace !important;
-    height: 60px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
-    align-items: center !important;
-    line-height: 1.2 !important;
-}
-
-.summary-button:hover {
-    background: linear-gradient(135deg, #5a5a5a, #4e4e4e) !important;
-    color: #74b9ff !important;
-    border-color: #666666 !important;
-}
-
-.summary-button:active {
-    background: linear-gradient(135deg, #4a4a4a, #3e3e3e) !important;
-    color: #5a9bd4 !important;
-}
-
-/* Regular button styling for non-model buttons */
-.gr-button:not(.model-button):not(.summary-button) {
-    background-color: #222222 !important;
-    color: white !important;
-    border: 1px solid #444444 !important;
-    margin: 5px 0 !important;
-    border-radius: 8px !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button:not(.model-button):not(.summary-button):hover {
-    background-color: #333333 !important;
-    border-color: #666666 !important;
-}
-
-/* Plot container with smooth transitions and controlled scrolling */
-.plot-container {
-    background-color: #000000 !important;
-    border: none !important;
-    transition: opacity 0.6s ease-in-out !important;
-    flex: 1 1 auto !important;
-    min-height: 0 !important;
-    overflow-y: auto !important;
-    scrollbar-width: thin !important;
-    scrollbar-color: #333333 #000000 !important;
-}
-
-/* Custom scrollbar for plot container */
-.plot-container::-webkit-scrollbar {
-    width: 8px !important;
-    background: #000000 !important;
-}
-
-.plot-container::-webkit-scrollbar-track {
-    background: #000000 !important;
-}
-
-.plot-container::-webkit-scrollbar-thumb {
-    background-color: #333333 !important;
-    border-radius: 4px !important;
-}
-
-.plot-container::-webkit-scrollbar-thumb:hover {
-    background-color: #555555 !important;
-}
-
-/* Gradio plot component styling */
-.gr-plot {
-    background-color: #000000 !important;
-    transition: opacity 0.6s ease-in-out !important;
-}
-
-.gr-plot .gradio-plot {
-    background-color: #000000 !important;
-    transition: opacity 0.6s ease-in-out !important;
-}
-
-.gr-plot img {
-    transition: opacity 0.6s ease-in-out !important;
-}
-
-/* Target the plot wrapper */
-div[data-testid="plot"] {
-    background-color: #000000 !important;
-}
-
-/* Target all possible plot containers */
-.plot-container img,
-.gr-plot img,
-.gradio-plot img {
-    background-color: #000000 !important;
-}
-
-/* Ensure plot area background */
-.gr-plot > div,
-.plot-container > div {
-    background-color: #000000 !important;
-}
-
-/* Prevent white flash during plot updates */
-.plot-container::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #000000;
-    z-index: -1;
-}
-
-/* Force all plot elements to have black background */
-.plot-container *,
-.gr-plot *,
-div[data-testid="plot"] * {
-    background-color: #000000 !important;
-}
-
-/* Override any white backgrounds in matplotlib */
-.plot-container canvas,
-.gr-plot canvas {
-    background-color: #000000 !important;
-}
-
-/* Text elements */
-h1, h2, h3, p, .markdown {
-    color: white !important;
-}
-
-/* Sidebar header enhancement */
-.sidebar h1 {
-    background: linear-gradient(45deg, #74b9ff, #a29bfe) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    text-align: center !important;
-    margin-bottom: 15px !important;
-    font-size: 28px !important;
-    font-weight: 700 !important;
-    font-family: monospace !important;
-}
-
-/* Sidebar description text */
-.sidebar p {
-    text-align: center !important;
-    margin-bottom: 20px !important;
-    line-height: 1.5 !important;
-    font-size: 14px !important;
-    font-family: monospace !important;
-}
-
-.sidebar strong {
-    color: #74b9ff !important;
-    font-weight: 600 !important;
-    font-family: monospace !important;
-}
-
-.sidebar em {
-    color: #a29bfe !important;
-    font-style: normal !important;
-    opacity: 0.9 !important;
-    font-family: monospace !important;
-}
-
-/* Remove all borders globally */
-* {
-    border-color: transparent !important;
-}
-
-/* Main content area */
-.main-content {
-    background-color: #000000 !important;
-    padding: 20px 20px 40px 20px !important;
-    margin-left: 300px !important;
-    height: 100vh !important;
-    overflow-y: auto !important;
-    box-sizing: border-box !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-
-/* Custom scrollbar for main content */
-.main-content {
-    scrollbar-width: thin !important;
-    scrollbar-color: #333333 #000000 !important;
-}
-
-.main-content::-webkit-scrollbar {
-    width: 8px !important;
-    background: #000000 !important;
-}
-
-.main-content::-webkit-scrollbar-track {
-    background: #000000 !important;
-}
-
-.main-content::-webkit-scrollbar-thumb {
-    background-color: #333333 !important;
-    border-radius: 4px !important;
-}
-
-.main-content::-webkit-scrollbar-thumb:hover {
-    background-color: #555555 !important;
-}
-
-/* Failed tests display - seamless appearance with constrained height */
-.failed-tests textarea {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    font-family: monospace !important;
-    font-size: 14px !important;
-    border: none !important;
-    padding: 10px !important;
-    outline: none !important;
-    line-height: 1.4 !important;
-    height: 180px !important;
-    max-height: 180px !important;
-    min-height: 180px !important;
-    overflow-y: auto !important;
-    resize: none !important;
-    scrollbar-width: thin !important;
-    scrollbar-color: #333333 #000000 !important;
-    scroll-behavior: auto;
-    transition: opacity 0.5s ease-in-out !important;
-}
-
-/* WebKit scrollbar styling for failed tests */
-.failed-tests textarea::-webkit-scrollbar {
-    width: 8px !important;
-}
-
-.failed-tests textarea::-webkit-scrollbar-track {
-    background: #000000 !important;
-}
-
-.failed-tests textarea::-webkit-scrollbar-thumb {
-    background-color: #333333 !important;
-    border-radius: 4px !important;
-}
-
-.failed-tests textarea::-webkit-scrollbar-thumb:hover {
-    background-color: #555555 !important;
-}
-
-/* Prevent white flash in text boxes during updates */
-.failed-tests::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #000000;
-    z-index: -1;
-}
-
-.failed-tests {
-    background-color: #000000 !important;
-    height: 200px !important;
-    max-height: 200px !important;
-    min-height: 200px !important;
-    position: relative;
-    transition: opacity 0.5s ease-in-out !important;
-    flex-shrink: 0 !important;
-}
-
-.failed-tests .gr-textbox {
-    background-color: #000000 !important;
-    border: none !important;
-    height: 180px !important;
-    max-height: 180px !important;
-    min-height: 180px !important;
-    transition: opacity 0.5s ease-in-out !important;
-}
-
-/* Force all textbox elements to have black background */
-.failed-tests *,
-.failed-tests .gr-textbox *,
-.failed-tests textarea * {
-    background-color: #000000 !important;
-}
-
-/* Summary display styling */
-.summary-display textarea {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    font-family: monospace !important;
-    font-size: 24px !important;
-    border: none !important;
-    padding: 20px !important;
-    outline: none !important;
-    line-height: 2 !important;
-    text-align: right !important;
-    resize: none !important;
-}
-
-.summary-display {
-    background-color: #000000 !important;
-}
-
-
-
-/* Detail view layout */
-.detail-view {
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
-    min-height: 0 !important;
-}
-
-/* JavaScript to reset scroll position */
-.scroll-reset {
-    animation: resetScroll 0.1s ease;
-}
-
-@keyframes resetScroll {
-    0% { scroll-behavior: auto; }
-    100% { scroll-behavior: auto; }
-}
-
-
-"""
+# Load CSS from external file
+def load_css():
+    try:
+        with open("styles.css", "r") as f:
+            return f.read()
+    except FileNotFoundError:
+        print("Warning: styles.css not found, using minimal default styles")
+        return "body { background: #000; color: #fff; }"
 
 # Create the Gradio interface with sidebar and dark theme
-with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo:
+with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
     
     with gr.Row():
-        # Sidebar for model selection
+        # Sidebar for model selection  
         with gr.Column(scale=1, elem_classes=["sidebar"]):
             gr.Markdown("# 🤖 TCID")
-            gr.Markdown("**Transformer CI Dashboard**\n\n*Analyze transformers CI results across AMD and NVIDIA devices*\n")
+            gr.Markdown("**Transformer CI Dashboard**\n\n*Result overview by model and hardware*\n")
+            
+            # Data status indicator
+            if last_update_time:
+                status_text = f"📊 **Updated:** {last_update_time.strftime('%H:%M')}\n\n*Auto-refresh: 15min*"
+            else:
+                status_text = f"📊 **Loading...**\n\n*Auto-refresh: 15min*"
+            status_display = gr.Markdown(status_text)
+            
+            # Manual refresh button
+            refresh_button = gr.Button(
+                "🔄 refresh data",
+                variant="secondary", 
+                size="sm",
+                elem_classes=["refresh-button"]
+            )
+            
+            # CI job links
+            ci_links_display = gr.Markdown("🔗 **CI Jobs:** *Loading...*")
             
             # Summary button at the top
             summary_button = gr.Button(
@@ -865,16 +454,18 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
                 elem_classes=["summary-button"]
             )
             
-            # Model selection buttons in sidebar
-            model_buttons = []
-            for model_name in MODELS.keys():
-                btn = gr.Button(
-                    f"{model_name.lower()}", 
-                    variant="secondary",
-                    size="lg",
-                    elem_classes=["model-button"]
-                )
-                model_buttons.append(btn)
+            # Back to simple buttons that work
+            # Model selector dropdown - much better for long lists
+            gr.Markdown(f"**Select Model ({len(available_models)}):**")
+            
+            model_choices = [model.lower() for model in available_models] if available_models else ["auto", "bert", "clip", "llama"]
+            model_dropdown = gr.Dropdown(
+                choices=model_choices,
+                value=model_choices[0] if model_choices else "auto",
+                label="Choose Model",
+                interactive=True,
+                allow_custom_value=False
+            )
         
         # Main content area
         with gr.Column(scale=4, elem_classes=["main-content"]):
@@ -901,7 +492,7 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
                 with gr.Row():
                     with gr.Column(scale=1):
                         amd_failed_tests_output = gr.Textbox(
-                            value="Failures on AMD (exclusive):\n─────────────────────────────\nnetwork_timeout\n\nFailures on AMD (common):\n────────────────────────\ndistributed",
+                            value="",
                             lines=8,
                             max_lines=8,
                             interactive=False,
@@ -910,7 +501,7 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
                         )
                     with gr.Column(scale=1):
                         nvidia_failed_tests_output = gr.Textbox(
-                            value="Failures on NVIDIA (exclusive):\n─────────────────────────────────\nmulti_gpu\n\nFailures on NVIDIA (common):\n────────────────────────────\ndistributed",
+                            value="",
                             lines=8,
                             max_lines=8,
                             interactive=False,
@@ -918,27 +509,127 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
                             elem_classes=["failed-tests"]
                         )
     
-    # Set up click handlers for each button
-    for i, (model_name, button) in enumerate(zip(MODELS.keys(), model_buttons)):
-        button.click(
-            fn=lambda name=model_name: plot_model_stats(name),
-            outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
-        ).then(
-            fn=lambda: [gr.update(visible=False), gr.update(visible=True)],
-            outputs=[summary_display, detail_view]
-        ).then(
-            fn=None,
-            js="() => { setTimeout(() => { document.querySelectorAll('textarea').forEach(t => { if (t.closest('.failed-tests')) { t.scrollTop = 0; setTimeout(() => { t.style.scrollBehavior = 'smooth'; t.scrollTo({ top: 0, behavior: 'smooth' }); t.style.scrollBehavior = 'auto'; }, 50); } }); }, 300); }"
-        )
+    # Set up change handler for dropdown
+    model_dropdown.change(
+        fn=lambda selected_model: plot_model_stats(selected_model),
+        inputs=[model_dropdown],
+        outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
+    ).then(
+        fn=lambda: [gr.update(visible=False), gr.update(visible=True)],
+        outputs=[summary_display, detail_view]
+    )
     
     # Summary button click handler
+    def show_summary_and_update_links():
+        """Show summary page and update CI links."""
+        return create_summary_page(), get_ci_links()
+    
     summary_button.click(
-        fn=lambda: create_summary_page(),
-        outputs=[summary_display]
+        fn=show_summary_and_update_links,
+        outputs=[summary_display, ci_links_display]
+    ).then(
+        fn=lambda: [gr.update(visible=True), gr.update(visible=False)],
+        outputs=[summary_display, detail_view]
+    )
+    
+    # Function to get current status text
+    def get_status_text():
+        """Get current status text with last update time."""
+        if last_update_time:
+            return f"📊 **Updated:** {last_update_time.strftime('%H:%M')}\n\n*Auto-refresh: 15min*"
+        else:
+            return f"📊 **Loading...**\n\n*Auto-refresh: 15min*"
+    
+    # Function to get CI job links
+    def get_ci_links():
+        """Get CI job links from the most recent data."""
+        try:
+            # Check if df exists and is not empty
+            if 'df' not in globals() or df is None or df.empty:
+                return "🔗 **CI Jobs:** *Loading...*"
+            
+            # Get links from any available model (they should be the same for all models in a run)
+            amd_multi_link = None
+            amd_single_link = None
+            nvidia_multi_link = None
+            nvidia_single_link = None
+            
+            for model_name in df.index:
+                row = df.loc[model_name]
+                
+                # Extract AMD links
+                if pd.notna(row.get('job_link_amd')) and (not amd_multi_link or not amd_single_link):
+                    amd_link_raw = row.get('job_link_amd')
+                    if isinstance(amd_link_raw, dict):
+                        if 'multi' in amd_link_raw and not amd_multi_link:
+                            amd_multi_link = amd_link_raw['multi']
+                        if 'single' in amd_link_raw and not amd_single_link:
+                            amd_single_link = amd_link_raw['single']
+                
+                # Extract NVIDIA links
+                if pd.notna(row.get('job_link_nvidia')) and (not nvidia_multi_link or not nvidia_single_link):
+                    nvidia_link_raw = row.get('job_link_nvidia')
+                    if isinstance(nvidia_link_raw, dict):
+                        if 'multi' in nvidia_link_raw and not nvidia_multi_link:
+                            nvidia_multi_link = nvidia_link_raw['multi']
+                        if 'single' in nvidia_link_raw and not nvidia_single_link:
+                            nvidia_single_link = nvidia_link_raw['single']
+                
+                # Break if we have all links
+                if amd_multi_link and amd_single_link and nvidia_multi_link and nvidia_single_link:
+                    break
+            
+            links_md = "🔗 **CI Jobs:**\n\n"
+            
+            # AMD links
+            if amd_multi_link or amd_single_link:
+                links_md += "**AMD:**\n"
+                if amd_multi_link:
+                    links_md += f"• [Multi GPU]({amd_multi_link})\n"
+                if amd_single_link:
+                    links_md += f"• [Single GPU]({amd_single_link})\n"
+                links_md += "\n"
+            
+            # NVIDIA links
+            if nvidia_multi_link or nvidia_single_link:
+                links_md += "**NVIDIA:**\n"
+                if nvidia_multi_link:
+                    links_md += f"• [Multi GPU]({nvidia_multi_link})\n"
+                if nvidia_single_link:
+                    links_md += f"• [Single GPU]({nvidia_single_link})\n"
+            
+            if not (amd_multi_link or amd_single_link or nvidia_multi_link or nvidia_single_link):
+                links_md += "*No links available*"
+                
+            return links_md
+        except Exception as e:
+            print(f"Error getting CI links: {e}")
+            return "🔗 **CI Jobs:** *Error loading links*"
+    
+    # Refresh button click handler
+    def refresh_data_and_status():
+        """Manual data refresh triggered by user."""
+        success = load_data()
+        if success:
+            # Return updated summary page, status, and CI links
+            return create_summary_page(), get_status_text(), get_ci_links()
+        else:
+            # Return current summary page, status, and CI links if reload failed
+            return create_summary_page(), get_status_text(), get_ci_links()
+    
+    refresh_button.click(
+        fn=refresh_data_and_status,
+        outputs=[summary_display, status_display, ci_links_display]
     ).then(
         fn=lambda: [gr.update(visible=True), gr.update(visible=False)],
         outputs=[summary_display, detail_view]
     )
 
+    # Auto-update CI links when the interface loads
+    demo.load(
+        fn=get_ci_links,
+        outputs=[ci_links_display]
+    )
+
 if __name__ == "__main__":
     demo.launch()

data.py

@@ -0,0 +1,86 @@
+from huggingface_hub import HfApi, HfFileSystem, login
+import pandas as pd
+
+fs = HfFileSystem()
+
+IMPORTANT_MODELS = [
+    "auto",
+    "bert",  # old but dominant (encoder only)
+    "gpt2",  # old (decoder)
+    "t5",  # old (encoder-decoder)
+    "modernbert",  # (encoder only)
+    "vit",  # old (vision) - fixed comma
+    "clip",  # old but dominant (vision)
+    "detr",  # objection detection, segmentation (vision)
+    "table-transformer",  # objection detection (visioin) - maybe just detr?
+    "got_ocr2",  # ocr (vision)
+    "whisper",  # old but dominant (audio)
+    "wav2vec2",  # old (audio)
+    "llama",  # new and dominant (meta)
+    "gemma3",  # new (google)
+    "qwen2",  # new (Alibaba)
+    "mistral3",  # new (Mistral) - added missing comma
+    "qwen2_5_vl",  # new (vision)
+    "llava",  # many models from it (vision)
+    "smolvlm",  # new (video)
+    "internvl",  # new (video)
+    "gemma3n",  # new (omnimodal models)
+    "qwen2_5_omni",  # new (omnimodal models)
+]
+
+
+def get_data():
+    files_amd = fs.glob(
+        "hf://datasets/optimum-amd/transformers_daily_ci/**/runs/**/ci_results_run_models_gpu/model_results.json"
+    )
+    files_amd.sort(reverse=True)
+
+    df_amd = pd.read_json(f"hf://{files_amd[0]}", orient="index")
+    df_amd.index.name = "model_name"
+    df_amd["failed_multi_no_amd"] = df_amd["failures"].apply(
+        lambda x: len(x["multi"]) if "multi" in x else 0
+    )
+    df_amd["failed_single_no_amd"] = df_amd["failures"].apply(
+        lambda x: len(x["single"]) if "single" in x else 0
+    )
+
+    files_nvidia = fs.glob(
+        "hf://datasets/hf-internal-testing/transformers_daily_ci/**/ci_results_run_models_gpu/model_results.json"
+    )
+    files_nvidia.sort(reverse=True)
+
+    df_nvidia = pd.read_json(
+        f"https://huggingface.co/datasets/hf-internal-testing/transformers_daily_ci/raw/main/{files_nvidia[0].lstrip('datasets/hf-internal-testing/transformers_daily_ci/')}",
+        orient="index",
+    )
+    df_nvidia.index.name = "model_name"
+    df_nvidia["failed_multi_no_nvidia"] = df_nvidia["failures"].apply(
+        lambda x: len(x["multi"]) if "multi" in x else 0
+    )
+    df_nvidia["failed_single_no_nvidia"] = df_nvidia["failures"].apply(
+        lambda x: len(x["single"]) if "single" in x else 0
+    )
+    df_nvidia
+
+    joined = df_amd.join(df_nvidia, rsuffix="_nvidia", lsuffix="_amd", how="outer")
+    joined = joined[
+        [
+            "success_amd",
+            "success_nvidia",
+            "failed_multi_no_amd",
+            "failed_multi_no_nvidia",
+            "failed_single_no_amd",
+            "failed_single_no_nvidia",
+            "failures_amd",
+            "failures_nvidia",
+            "job_link_amd",
+            "job_link_nvidia",
+        ]
+    ]
+
+    joined.index = joined.index.str.replace("^models_", "", regex=True)
+
+    important_models_lower = [model.lower() for model in IMPORTANT_MODELS]
+    filtered_joined = joined[joined.index.str.lower().isin(important_models_lower)]
+
+    return filtered_joined

styles.css

@@ -0,0 +1,589 @@
+/* Global dark theme */
+.gradio-container {
+    background-color: #000000 !important;
+    color: white !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
+}
+
+/* Remove borders from all components */
+.gr-box, .gr-form, .gr-panel {
+    border: none !important;
+    background-color: #000000 !important;
+}
+
+/* Simplified sidebar styling */
+.sidebar {
+    background: linear-gradient(145deg, #111111, #1a1a1a) !important;
+    border: none !important;
+    padding: 15px !important;
+    margin: 0 !important;
+    height: 100vh !important;
+    position: fixed !important;
+    left: 0 !important;
+    top: 0 !important;
+    width: 300px !important;
+    box-sizing: border-box !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
+/* Target the actual Gradio column containing sidebar */
+div[data-testid="column"]:has(.sidebar) {
+    height: 100vh !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
+/* Scrollbar styling for sidebar */
+.sidebar::-webkit-scrollbar {
+    width: 8px !important;
+    background: #111111 !important;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: #111111 !important;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
+}
+
+/* Ensure all sidebar content fits within width */
+.sidebar * {
+    max-width: 100% !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+}
+
+/* Specific control for markdown content */
+.sidebar .markdown,
+.sidebar h1, 
+.sidebar h2, 
+.sidebar h3,
+.sidebar p {
+    max-width: 100% !important;
+    word-wrap: break-word !important;
+    overflow: hidden !important;
+}
+
+/* Sidebar scrollbar styling */
+.sidebar::-webkit-scrollbar {
+    width: 8px !important;
+    background: #111111 !important;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: #111111 !important;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
+}
+
+/* Force button containers to single column - DISABLED */
+/*
+.sidebar .gr-button,
+.sidebar button {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 2px 0 !important;
+    flex: none !important;
+}
+*/
+
+/* Model button styling - DISABLED */
+/*
+.model-button {
+    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
+    color: white !important;
+    border: 1px solid #555 !important;
+    margin: 3px 0 !important;
+    border-radius: 6px !important;
+    padding: 8px 12px !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.3px !important;
+    font-family: monospace !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+    display: block !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+}
+
+.model-button:hover {
+    background: linear-gradient(135deg, #3a3a3a, #2e2e2e) !important;
+    border-color: #74b9ff !important;
+    color: #74b9ff !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 2px 8px rgba(116, 185, 255, 0.2) !important;
+}
+*/
+
+/*
+.model-button:active {
+    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
+    color: #5a9bd4 !important;
+}
+*/
+
+/* Model stats badge */
+.model-stats {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    margin-top: 8px !important;
+    font-size: 12px !important;
+    opacity: 0.8 !important;
+}
+
+.stats-badge {
+    background: rgba(116, 185, 255, 0.2) !important;
+    padding: 4px 8px !important;
+    border-radius: 10px !important;
+    font-weight: 500 !important;
+    font-size: 11px !important;
+    color: #74b9ff !important;
+}
+
+.success-indicator {
+    width: 8px !important;
+    height: 8px !important;
+    border-radius: 50% !important;
+    display: inline-block !important;
+    margin-right: 6px !important;
+}
+
+.success-high { background-color: #4CAF50 !important; }
+.success-medium { background-color: #FF9800 !important; }
+.success-low { background-color: #F44336 !important; }
+
+/* Refresh button styling */
+.refresh-button {
+    background: linear-gradient(135deg, #2d5aa0, #1e3f73) !important;
+    color: white !important;
+    border: 1px solid #3a6bc7 !important;
+    margin: 0 0 10px 0 !important;
+    border-radius: 5px !important;
+    padding: 6px 8px !important;
+    transition: all 0.3s ease !important;
+    font-weight: 500 !important;
+    font-size: 11px !important;
+    text-transform: lowercase !important;
+    letter-spacing: 0.1px !important;
+    font-family: monospace !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    box-sizing: border-box !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.refresh-button:hover {
+    background: linear-gradient(135deg, #3a6bc7, #2d5aa0) !important;
+    border-color: #4a7bd9 !important;
+}
+
+/* Summary button styling - distinct from model buttons */
+.summary-button {
+    background: linear-gradient(135deg, #4a4a4a, #3e3e3e) !important;
+    color: white !important;
+    border: 2px solid #555555 !important;
+    margin: 0 0 15px 0 !important;
+    border-radius: 5px !important;
+    padding: 12px 10px !important;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    box-shadow: 
+        0 4px 15px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.3px !important;
+    font-family: monospace !important;
+    height: 60px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+    line-height: 1.2 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    box-sizing: border-box !important;
+}
+
+/* Simplified Gradio layout control */
+.sidebar .gr-column,
+.sidebar .gradio-column {
+    width: 100% !important;
+}
+
+/* Simplified Gradio targeting */
+div[data-testid="column"]:has(.sidebar) {
+    width: 300px !important;
+    min-width: 300px !important;
+}
+
+/* Button container with fixed height - DISABLED */
+/*
+.button-container {
+    height: 50vh !important;
+    max-height: 50vh !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #111111 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    padding: 5px 0 !important;
+    margin-top: 10px !important;
+}
+*/
+
+/* Removed simple scroll CSS - was hiding buttons */
+
+.summary-button:hover {
+    background: linear-gradient(135deg, #5a5a5a, #4e4e4e) !important;
+    color: #74b9ff !important;
+    border-color: #666666 !important;
+}
+
+.summary-button:active {
+    background: linear-gradient(135deg, #4a4a4a, #3e3e3e) !important;
+    color: #5a9bd4 !important;
+}
+
+/* Regular button styling for non-model buttons */
+.gr-button:not(.model-button):not(.summary-button) {
+    background-color: #222222 !important;
+    color: white !important;
+    border: 1px solid #444444 !important;
+    margin: 5px 0 !important;
+    border-radius: 8px !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-button:not(.model-button):not(.summary-button):hover {
+    background-color: #333333 !important;
+    border-color: #666666 !important;
+}
+
+/* Plot container with smooth transitions and controlled scrolling */
+.plot-container {
+    background-color: #000000 !important;
+    border: none !important;
+    transition: opacity 0.6s ease-in-out !important;
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #000000 !important;
+}
+
+/* Custom scrollbar for plot container */
+.plot-container::-webkit-scrollbar {
+    width: 8px !important;
+    background: #000000 !important;
+}
+
+.plot-container::-webkit-scrollbar-track {
+    background: #000000 !important;
+}
+
+.plot-container::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.plot-container::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
+}
+
+/* Gradio plot component styling */
+.gr-plot {
+    background-color: #000000 !important;
+    transition: opacity 0.6s ease-in-out !important;
+}
+
+.gr-plot .gradio-plot {
+    background-color: #000000 !important;
+    transition: opacity 0.6s ease-in-out !important;
+}
+
+.gr-plot img {
+    transition: opacity 0.6s ease-in-out !important;
+}
+
+/* Target the plot wrapper */
+div[data-testid="plot"] {
+    background-color: #000000 !important;
+}
+
+/* Target all possible plot containers */
+.plot-container img,
+.gr-plot img,
+.gradio-plot img {
+    background-color: #000000 !important;
+}
+
+/* Ensure plot area background */
+.gr-plot > div,
+.plot-container > div {
+    background-color: #000000 !important;
+}
+
+/* Prevent white flash during plot updates */
+.plot-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000000;
+    z-index: -1;
+}
+
+/* Force all plot elements to have black background */
+.plot-container *,
+.gr-plot *,
+div[data-testid="plot"] * {
+    background-color: #000000 !important;
+}
+
+/* Override any white backgrounds in matplotlib */
+.plot-container canvas,
+.gr-plot canvas {
+    background-color: #000000 !important;
+}
+
+/* Text elements */
+h1, h2, h3, p, .markdown {
+    color: white !important;
+}
+
+/* Sidebar header enhancement */
+.sidebar h1 {
+    background: linear-gradient(45deg, #74b9ff, #a29bfe) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    text-align: center !important;
+    margin-bottom: 15px !important;
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    font-family: monospace !important;
+}
+
+/* Sidebar description text */
+.sidebar p {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+    line-height: 1.5 !important;
+    font-size: 14px !important;
+    font-family: monospace !important;
+}
+
+/* CI Links styling */
+.sidebar a {
+    color: #74b9ff !important;
+    text-decoration: none !important;
+    font-weight: 500 !important;
+    font-family: monospace !important;
+    transition: color 0.3s ease !important;
+}
+
+.sidebar a:hover {
+    color: #a29bfe !important;
+    text-decoration: underline !important;
+}
+
+.sidebar strong {
+    color: #74b9ff !important;
+    font-weight: 600 !important;
+    font-family: monospace !important;
+}
+
+.sidebar em {
+    color: #a29bfe !important;
+    font-style: normal !important;
+    opacity: 0.9 !important;
+    font-family: monospace !important;
+}
+
+/* Remove all borders globally */
+* {
+    border-color: transparent !important;
+}
+
+/* Main content area */
+.main-content {
+    background-color: #000000 !important;
+    padding: 20px 20px 40px 20px !important;
+    margin-left: 300px !important;
+    height: 100vh !important;
+    overflow-y: auto !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* Custom scrollbar for main content */
+.main-content {
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #000000 !important;
+}
+
+.main-content::-webkit-scrollbar {
+    width: 8px !important;
+    background: #000000 !important;
+}
+
+.main-content::-webkit-scrollbar-track {
+    background: #000000 !important;
+}
+
+.main-content::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.main-content::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
+}
+
+/* Failed tests display - seamless appearance with constrained height */
+.failed-tests textarea {
+    background-color: #000000 !important;
+    color: #FFFFFF !important;
+    font-family: monospace !important;
+    font-size: 14px !important;
+    border: none !important;
+    padding: 10px !important;
+    outline: none !important;
+    line-height: 1.4 !important;
+    height: 180px !important;
+    max-height: 180px !important;
+    min-height: 180px !important;
+    overflow-y: auto !important;
+    resize: none !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #000000 !important;
+    scroll-behavior: auto;
+    transition: opacity 0.5s ease-in-out !important;
+}
+
+/* WebKit scrollbar styling for failed tests */
+.failed-tests textarea::-webkit-scrollbar {
+    width: 8px !important;
+}
+
+.failed-tests textarea::-webkit-scrollbar-track {
+    background: #000000 !important;
+}
+
+.failed-tests textarea::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.failed-tests textarea::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
+}
+
+/* Prevent white flash in text boxes during updates */
+.failed-tests::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000000;
+    z-index: -1;
+}
+
+.failed-tests {
+    background-color: #000000 !important;
+    height: 200px !important;
+    max-height: 200px !important;
+    min-height: 200px !important;
+    position: relative;
+    transition: opacity 0.5s ease-in-out !important;
+    flex-shrink: 0 !important;
+}
+
+.failed-tests .gr-textbox {
+    background-color: #000000 !important;
+    border: none !important;
+    height: 180px !important;
+    max-height: 180px !important;
+    min-height: 180px !important;
+    transition: opacity 0.5s ease-in-out !important;
+}
+
+/* Force all textbox elements to have black background */
+.failed-tests *,
+.failed-tests .gr-textbox *,
+.failed-tests textarea * {
+    background-color: #000000 !important;
+}
+
+/* Summary display styling */
+.summary-display textarea {
+    background-color: #000000 !important;
+    color: #FFFFFF !important;
+    font-family: monospace !important;
+    font-size: 24px !important;
+    border: none !important;
+    padding: 20px !important;
+    outline: none !important;
+    line-height: 2 !important;
+    text-align: right !important;
+    resize: none !important;
+}
+
+.summary-display {
+    background-color: #000000 !important;
+}
+
+/* Detail view layout */
+.detail-view {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    min-height: 0 !important;
+}
+
+/* JavaScript to reset scroll position */
+.scroll-reset {
+    animation: resetScroll 0.1s ease;
+}
+
+@keyframes resetScroll {
+    0% { scroll-behavior: auto; }
+    100% { scroll-behavior: auto; }
+}