Migrate to Gradio app with interactive features

Replace static HTML with Gradio application featuring:
- Interactive search and filtering
- Model size range slider
- Benchmark category filters
- Quick filter presets (size and category)
- Sortable columns
- CSV export
- Provider logos and clickable model links
- Color-coded scores by benchmark category

README.md

@@ -3,100 +3,101 @@ title: Official Benchmarks Leaderboard 2026
 emoji: 🏆
 colorFrom: purple
 colorTo: blue
-sdk: static
+sdk: gradio
+sdk_version: 5.50.0
+app_file: app.py
 pinned: false
-hf_oauth: true
-hf_oauth_expiration_minutes: 480
-hf_oauth_scopes:
-  - email
-  - read-repos
-  - gated-repos
 ---
 
-# Official Benchmarks Leaderboard 2026
+# 🏆 Official Benchmarks Leaderboard 2026
 
-A unified leaderboard aggregating scores from 12 official HuggingFace benchmarks, covering diverse AI capabilities from mathematical reasoning to coding, vision, and language understanding.
+A unified leaderboard for **11 official HuggingFace benchmarks**. Compare AI models across math, coding, knowledge, vision, agent, and language tasks.
 
-## Features
+## ✨ Features
 
-- 📊 **12 Official Benchmarks**: GSM8K, MMLU-Pro, GPQA, HLE, olmOCR, SWE-bench, and more
-- 🔓 **OAuth Authentication**: Sign in with HuggingFace to access gated datasets (GPQA, HLE)
-- 🎨 **Beautiful Design**: Modern gradient UI with dark mode support
-- 🔍 **Interactive Filters**: Search and filter models by provider and type
-- 📈 **Real-time Data**: Fetched directly from official HuggingFace APIs
-- 🏢 **Provider Logos**: Official organization avatars from HuggingFace
+- 📊 **11 Official Benchmarks**: GSM8K, MMLU-Pro, GPQA, HLE, SWE-bench, AIME, HMMT, and more
+- 🎛️ **Quick Filters**: One-click presets for model sizes and benchmark categories
+- 🔍 **Interactive Search**: Filter by model name or provider
+- 📏 **Size Range Slider**: Filter models by parameter count (0-1100B+)
+- 🎯 **Category Selection**: Choose specific benchmark categories to display
+- 📥 **Export CSV**: Download filtered leaderboard data
+- 🔄 **Sortable Columns**: Click any header to sort the table
+- 🎨 **Modern Design**: Clean, responsive interface with provider logos
 
-## Benchmarks Included
+## 🎯 Benchmarks Included
 
-### Math & Reasoning
+### 📐 Math
 - **GSM8K**: Grade School Math (8.5K problems)
 - **AIME 2026**: American Invitational Mathematics Examination
-- **HMMT Feb 2026**: Harvard-MIT Mathematics Tournament
+- **HMMT 2026**: Harvard-MIT Mathematics Tournament
 
-### Knowledge & Understanding
-- **MMLU-Pro**: Massive Multi-task Language Understanding (57K questions)
-- **GPQA Diamond**: PhD-level expert questions (🔒 gated)
-- **HLE**: Humanity's Last Exam (🔒 gated)
+### 🧠 Knowledge
+- **MMLU-Pro**: Massive Multi-task Language Understanding
+- **GPQA Diamond**: PhD-level expert questions
+- **HLE**: Humanity's Last Exam
 
-### Coding
+### 💻 Coding
 - **SWE-bench Verified**: Real-world software engineering tasks
 - **SWE-bench Pro**: Advanced software engineering challenges
 
-### Vision
+### 👁️ Vision
 - **olmOCR**: OCR evaluation benchmark
 
-### Other
+### 🤖 Agent
 - **Terminal-Bench 2.0**: Terminal command understanding
-- **ArguAna**: MTEB text retrieval
-- **EvasionBench**: Language understanding challenges
 
-## OAuth & Gated Datasets
+### 💬 Language
+- **EvasionBench**: Language understanding challenges
 
-This Space uses OAuth to access gated datasets like GPQA and HLE. 
+## 🚀 Quick Start
 
-**To access all benchmarks:**
-1. Click "Sign in with HuggingFace" button
-2. Grant permissions to access gated repositories
-3. The leaderboard will automatically fetch data from gated benchmarks
+The leaderboard loads automatically from the HuggingFace dataset: `OpenEvals/leaderboard-data`
 
-**Required Scopes:**
-- `openid`, `profile`: User identification
-- `read-repos`: Access to your repositories
-- `gated-repos`: Access to gated datasets you've been granted access to
+**Quick Filters:**
+- 🔹 **Small (<10B)**, 🔸 **Medium (10-100B)**, 🔶 **Large (100B+)** - Filter by model size
+- 💻 **Coding**, 🧠 **Knowledge**, 📐 **Math**, etc. - Show only specific categories
 
-## Data Sources
+## 📊 Data Source
 
-All scores are fetched from official HuggingFace leaderboard APIs:
-- API Pattern: `https://huggingface.co/api/datasets/{org}/{dataset}/leaderboard`
-- Provider logos: `https://huggingface.co/api/organizations/{org}/avatar`
+**Dataset**: [OpenEvals/leaderboard-data](https://huggingface.co/datasets/OpenEvals/leaderboard-data)
 
-## Development
+All scores are aggregated from official HuggingFace benchmark leaderboards. The dataset is updated regularly with the latest model evaluations.
 
-### Fetching Latest Data
+## 💻 Local Development
 
 ```bash
-# Fetch all public benchmarks
-python3 scripts/fetch_api_only.py
+# Install dependencies
+pip install -r requirements.txt
 
-# Fetch provider logos
-python3 scripts/fetch_provider_logos.py
+# Run the app
+python app.py
 ```
 
-### Project Structure
+## 📁 Project Structure
 
 ```
 .
-├── benchmarks.html          # Main leaderboard page
+├── app.py                    # Main Gradio application
+├── utils/
+│   ├── data_loader.py       # Load data from HuggingFace dataset
+│   ├── filters.py           # Filter and search logic
+│   ├── formatters.py        # Data formatting utilities
+│   └── html_generator.py    # Generate HTML leaderboard table
+├── static/
+│   └── sortTable.js         # Client-side table sorting
 ├── data/
-│   ├── leaderboard.json    # Model scores and metadata
-│   └── provider_logos.json # Provider avatar URLs
-├── scripts/
-│   ├── fetch_api_only.py   # Fetch benchmark data
-│   └── fetch_provider_logos.py  # Fetch provider logos
-└── README.md
+│   └── provider_logos.json  # Provider avatar URLs
+└── requirements.txt         # Python dependencies
 ```
 
-## License
+## 🔧 Technologies
+
+- **Gradio 5.50.0**: Interactive web interface
+- **Datasets**: HuggingFace datasets library
+- **Pandas**: Data manipulation
+- **RangeSlider**: Custom Gradio component for size filtering
+
+## 📝 License
 
 Data is sourced from official HuggingFace benchmarks. Please refer to individual benchmark pages for specific licensing information.
 

app.py

@@ -0,0 +1,597 @@
+"""
+Official Benchmarks Leaderboard 2026 - Gradio App
+
+A unified leaderboard aggregating scores from 11 official HuggingFace benchmarks.
+"""
+
+import gradio as gr
+import pandas as pd
+from gradio_rangeslider import RangeSlider
+from utils.data_loader import (
+    load_leaderboard_data,
+    get_benchmark_info,
+    load_provider_logos,
+)
+from utils.filters import filter_data, calculate_stats, parse_benchmark_selections
+from utils.formatters import format_for_display, create_empty_table, prepare_export_data
+from utils.html_generator import generate_leaderboard_html
+
+# Global data cache
+leaderboard_data = None
+provider_logos = None
+
+
+def initialize_data():
+    """Load initial data on app startup."""
+    global leaderboard_data, provider_logos
+    leaderboard_data = load_leaderboard_data()
+    provider_logos = load_provider_logos()
+    return leaderboard_data
+
+
+def refresh_data():
+    """Reload data from HuggingFace dataset."""
+    global leaderboard_data
+    print("Refreshing data from HuggingFace...")
+    leaderboard_data = load_leaderboard_data()
+
+    # Return updated table with current filters - we'll trigger a full update
+    return gr.Info("Data refreshed successfully!")
+
+
+def update_table(
+    search_term,
+    size_range,
+    bench_math,
+    bench_knowledge,
+    bench_coding,
+    bench_vision,
+    bench_agent,
+    bench_language,
+):
+    """
+    Update the leaderboard table based on all filters.
+
+    Returns:
+        tuple: (html_string, num_models, num_benchmarks, num_scores)
+    """
+    # Extract min and max from range slider tuple
+    size_min, size_max = size_range
+
+    # Parse benchmark selections from all checkbox groups
+    selected_benchmarks = parse_benchmark_selections(
+        bench_math,
+        bench_knowledge,
+        bench_coding,
+        bench_vision,
+        bench_agent,
+        bench_language,
+    )
+
+    # Handle case where no benchmarks are selected
+    if not selected_benchmarks or len(selected_benchmarks) == 0:
+        empty_html = generate_leaderboard_html(pd.DataFrame(), [], provider_logos)
+        return empty_html, 0, 0, 0
+
+    # Filter the data
+    filtered_df = filter_data(
+        leaderboard_data, search_term, size_min, size_max, selected_benchmarks
+    )
+
+    # Calculate statistics
+    stats = calculate_stats(filtered_df, selected_benchmarks)
+
+    # Generate HTML table
+    html_table = generate_leaderboard_html(
+        filtered_df, selected_benchmarks, provider_logos
+    )
+
+    return (html_table, stats["models"], stats["benchmarks"], stats["scores"])
+
+
+def select_all_benchmarks():
+    """Select all benchmark checkboxes."""
+    return (
+        ["GSM8K", "AIME 2026", "HMMT"],  # Math
+        ["MMLU-Pro", "GPQA", "HLE"],  # Knowledge
+        ["SWE-V", "SWE-Pro"],  # Coding
+        ["olmOCR"],  # Vision
+        ["TB 2.0"],  # Agent
+        ["EvasionB"],  # Language
+    )
+
+
+def clear_all_benchmarks():
+    """Clear all benchmark checkboxes."""
+    return [], [], [], [], [], []
+
+
+def export_to_csv(
+    search_term,
+    size_range,
+    bench_math,
+    bench_knowledge,
+    bench_coding,
+    bench_vision,
+    bench_agent,
+    bench_language,
+):
+    """
+    Export filtered data to CSV file.
+
+    Returns:
+        str: Path to temporary CSV file
+    """
+    # Extract min and max from range slider tuple
+    size_min, size_max = size_range
+
+    # Parse benchmark selections
+    selected_benchmarks = parse_benchmark_selections(
+        bench_math,
+        bench_knowledge,
+        bench_coding,
+        bench_vision,
+        bench_agent,
+        bench_language,
+    )
+
+    if not selected_benchmarks:
+        return None
+
+    # Filter the data
+    filtered_df = filter_data(
+        leaderboard_data, search_term, size_min, size_max, selected_benchmarks
+    )
+
+    # Prepare for export (without HTML/markdown)
+    export_df = prepare_export_data(filtered_df, selected_benchmarks)
+
+    # Save to temporary file
+    import tempfile
+
+    tmp_file = tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".csv")
+    export_df.to_csv(tmp_file.name, index=False)
+    tmp_file.close()
+
+    return tmp_file.name
+
+
+# Minimal CSS - only for leaderboard table
+custom_css = """
+/* Leaderboard table container */
+.leaderboard-html-container {
+    margin-top: 16px;
+}
+"""
+
+# JavaScript to enable table sorting
+custom_js = """
+function() {
+    // Load and execute the sorting script
+    const script = document.createElement('script');
+    script.textContent = `
+let currentSortColumn = null;
+let currentSortDirection = 'desc';
+
+function sortTable(colIndex) {
+  const table = document.querySelector('#leaderboardTable');
+  if (!table) return;
+  
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+  
+  const rows = Array.from(tbody.querySelectorAll('tr'));
+  
+  if (currentSortColumn === colIndex) {
+    currentSortDirection = currentSortDirection === 'desc' ? 'asc' : 'desc';
+  } else {
+    currentSortColumn = colIndex;
+    currentSortDirection = 'desc';
+  }
+  
+  rows.sort((a, b) => {
+    if (colIndex === 0) {
+      const aVal = a.dataset.name || '';
+      const bVal = b.dataset.name || '';
+      return currentSortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+    } else {
+      const aCell = a.cells[colIndex];
+      const bCell = b.cells[colIndex];
+      const aText = aCell ? aCell.textContent.trim() : '';
+      const bText = bCell ? bCell.textContent.trim() : '';
+      const aScore = aText === '—' ? -1 : parseFloat(aText);
+      const bScore = bText === '—' ? -1 : parseFloat(bText);
+      
+      if (isNaN(aScore) && isNaN(bScore)) return 0;
+      if (isNaN(aScore)) return 1;
+      if (isNaN(bScore)) return -1;
+      
+      return currentSortDirection === 'desc' ? bScore - aScore : aScore - bScore;
+    }
+  });
+  
+  rows.forEach(row => tbody.appendChild(row));
+  updateSortIndicators(colIndex);
+}
+
+function updateSortIndicators(colIndex) {
+  const headers = document.querySelectorAll('#leaderboardTable thead th');
+  headers.forEach((th, index) => {
+    const sortArrow = th.querySelector('.sa');
+    if (sortArrow) {
+      if (index === colIndex) {
+        sortArrow.textContent = currentSortDirection === 'desc' ? '↓' : '↑';
+        th.classList.add('sorted');
+      } else {
+        sortArrow.textContent = '↕';
+        th.classList.remove('sorted');
+      }
+    }
+  });
+}
+    `;
+    document.head.appendChild(script);
+}
+"""
+
+# Build the Gradio interface
+with gr.Blocks(
+    title="Official Benchmarks Leaderboard 2026", css=custom_css, js=custom_js
+) as app:
+    # Header
+    gr.Markdown("# 🏆 Official Benchmarks Leaderboard 2026")
+    gr.Markdown(
+        "Unified leaderboard for **11 official Hugging Face benchmarks**. "
+        "Compare AI models across math, coding, knowledge, vision, agent, and language tasks."
+    )
+
+    # Statistics row
+    with gr.Row():
+        stat_models = gr.Number(
+            label="📊 Models", value=0, precision=0, interactive=False
+        )
+        stat_benchmarks = gr.Number(
+            label="🎯 Benchmarks", value=11, precision=0, interactive=False
+        )
+        stat_scores = gr.Number(
+            label="✅ Total Scores", value=0, precision=0, interactive=False
+        )
+
+    # Quick filter presets
+    with gr.Row():
+        gr.Markdown("**Quick Filters:**")
+        preset_small = gr.Button("🔹 Small (<10B)", size="sm", variant="secondary")
+        preset_medium = gr.Button("🔸 Medium (10-100B)", size="sm", variant="secondary")
+        preset_large = gr.Button("🔶 Large (100B+)", size="sm", variant="secondary")
+
+    with gr.Row():
+        gr.Markdown("**By Category:**")
+        preset_coding = gr.Button("💻 Coding", size="sm", variant="secondary")
+        preset_knowledge = gr.Button("🧠 Knowledge", size="sm", variant="secondary")
+        preset_math = gr.Button("📐 Math", size="sm", variant="secondary")
+        preset_vision = gr.Button("👁️ Vision", size="sm", variant="secondary")
+        preset_agent = gr.Button("🤖 Agent", size="sm", variant="secondary")
+        preset_language = gr.Button("💬 Language", size="sm", variant="secondary")
+
+    # Filters Section
+    with gr.Accordion("🎛️ Filters & Settings", open=True):
+        # Search, Size Range, and Refresh on same row
+        with gr.Row():
+            search_box = gr.Textbox(
+                label="🔍 Search", placeholder="Try 'Llama', 'GPT', 'Qwen'...", scale=2
+            )
+            size_range = RangeSlider(
+                minimum=0,
+                maximum=1100,
+                value=(0, 1100),
+                step=10,
+                label="📏 Size Range (Billions)",
+                scale=2,
+            )
+            refresh_btn = gr.Button("🔄 Refresh", scale=1)
+
+        # Benchmark category filters
+        gr.Markdown("### 🎯 Benchmarks")
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                bench_math = gr.CheckboxGroup(
+                    choices=["GSM8K", "AIME 2026", "HMMT"],
+                    value=["GSM8K", "AIME 2026", "HMMT"],
+                    label="📐 Math",
+                )
+            with gr.Column(scale=1):
+                bench_knowledge = gr.CheckboxGroup(
+                    choices=["MMLU-Pro", "GPQA", "HLE"],
+                    value=["MMLU-Pro", "GPQA", "HLE"],
+                    label="🧠 Knowledge",
+                )
+            with gr.Column(scale=1):
+                bench_coding = gr.CheckboxGroup(
+                    choices=["SWE-V", "SWE-Pro"],
+                    value=["SWE-V", "SWE-Pro"],
+                    label="💻 Coding",
+                )
+            with gr.Column(scale=1):
+                bench_vision = gr.CheckboxGroup(
+                    choices=["olmOCR"], value=[], label="👁️ Vision"
+                )
+            with gr.Column(scale=1):
+                bench_agent = gr.CheckboxGroup(
+                    choices=["TB 2.0"], value=["TB 2.0"], label="🤖 Agent"
+                )
+            with gr.Column(scale=1):
+                bench_language = gr.CheckboxGroup(
+                    choices=["EvasionB"], value=["EvasionB"], label="💬 Language"
+                )
+
+        # Quick actions for benchmark selection
+        with gr.Row():
+            select_all_btn = gr.Button("✓ Select All", size="sm")
+            clear_all_btn = gr.Button("✗ Clear All", size="sm")
+
+    # Status message for user feedback
+    status_msg = gr.Markdown("", visible=False)
+
+    # Main leaderboard table
+    gr.Markdown("## 📊 Leaderboard")
+    gr.Markdown("*💡 Tip: Click any column header to sort the table*")
+
+    leaderboard_table = gr.HTML(
+        value="<div style='text-align:center;padding:40px;color:#94a3b8;'>Loading leaderboard data...</div>",
+        label="",
+        elem_classes="leaderboard-html-container",
+    )
+
+    # Export button with better feedback
+    with gr.Row():
+        export_btn = gr.Button("📥 Export CSV", size="sm")
+        export_file = gr.File(label="Download", visible=False)
+
+    # Footer
+    gr.Markdown(
+        "---\n"
+        "**Data Source**: [OpenEvals/leaderboard-data](https://huggingface.co/datasets/OpenEvals/leaderboard-data) | "
+        "**Open Source Models Only** | "
+        "Made with ❤️ by the Benchmarks Team"
+    )
+
+    # Define all filter inputs
+    filter_inputs = [
+        search_box,
+        size_range,
+        bench_math,
+        bench_knowledge,
+        bench_coding,
+        bench_vision,
+        bench_agent,
+        bench_language,
+    ]
+
+    # Define all outputs
+    table_outputs = [leaderboard_table, stat_models, stat_benchmarks, stat_scores]
+
+    benchmark_outputs = [
+        bench_math,
+        bench_knowledge,
+        bench_coding,
+        bench_vision,
+        bench_agent,
+        bench_language,
+    ]
+
+    # Event handlers - attach update_table to all filter changes
+    # Use trigger_mode for smoother interactions (debounce on typing)
+    search_box.change(
+        fn=update_table,
+        inputs=filter_inputs,
+        outputs=table_outputs,
+        show_progress="hidden",
+        trigger_mode="always_last",  # Debounce search input
+    )
+
+    # Other filters update immediately
+    for filter_input in [
+        size_range,
+        bench_math,
+        bench_knowledge,
+        bench_coding,
+        bench_vision,
+        bench_agent,
+        bench_language,
+    ]:
+        filter_input.change(
+            fn=update_table,
+            inputs=filter_inputs,
+            outputs=table_outputs,
+            show_progress="minimal",
+        )
+
+    # Refresh button - reloads data and updates table
+    def refresh_and_update(*filter_args):
+        refresh_data()
+        return update_table(*filter_args)
+
+    refresh_btn.click(
+        fn=refresh_and_update,
+        inputs=filter_inputs,
+        outputs=table_outputs,
+        show_progress="full",
+    )
+
+    # Select All / Clear All buttons
+    select_all_btn.click(fn=select_all_benchmarks, outputs=benchmark_outputs).then(
+        fn=update_table, inputs=filter_inputs, outputs=table_outputs
+    )
+
+    clear_all_btn.click(fn=clear_all_benchmarks, outputs=benchmark_outputs).then(
+        fn=update_table, inputs=filter_inputs, outputs=table_outputs
+    )
+
+    # Export button with success message
+    def export_with_feedback(*args):
+        filepath = export_to_csv(*args)
+        return filepath, gr.File(visible=True)
+
+    export_btn.click(
+        fn=export_with_feedback,
+        inputs=filter_inputs,
+        outputs=[export_file, export_file],
+        show_progress="minimal",
+    )
+
+    # Preset filter handlers
+    def apply_small_models():
+        return "", (0, 10)  # search, size_range
+
+    def apply_medium_models():
+        return "", (10, 100)
+
+    def apply_large_models():
+        return "", (100, 1100)
+
+    # Category filter functions - deselect all except the chosen category
+    def apply_coding_filter():
+        return (
+            "",
+            (0, 1100),
+            [],
+            [],
+            ["SWE-V", "SWE-Pro"],
+            [],
+            [],
+            [],
+        )  # search, size_range, math, knowledge, coding, vision, agent, language
+
+    def apply_knowledge_filter():
+        return "", (0, 1100), [], ["MMLU-Pro", "GPQA", "HLE"], [], [], [], []
+
+    def apply_math_filter():
+        return "", (0, 1100), ["GSM8K", "AIME 2026", "HMMT"], [], [], [], [], []
+
+    def apply_vision_filter():
+        return "", (0, 1100), [], [], [], ["olmOCR"], [], []
+
+    def apply_agent_filter():
+        return "", (0, 1100), [], [], [], [], ["TB 2.0"], []
+
+    def apply_language_filter():
+        return "", (0, 1100), [], [], [], [], [], ["EvasionB"]
+
+    # Size preset handlers
+    preset_small.click(fn=apply_small_models, outputs=[search_box, size_range]).then(
+        fn=update_table, inputs=filter_inputs, outputs=table_outputs
+    )
+
+    preset_medium.click(fn=apply_medium_models, outputs=[search_box, size_range]).then(
+        fn=update_table, inputs=filter_inputs, outputs=table_outputs
+    )
+
+    preset_large.click(fn=apply_large_models, outputs=[search_box, size_range]).then(
+        fn=update_table, inputs=filter_inputs, outputs=table_outputs
+    )
+
+    # Category preset handlers
+    preset_coding.click(
+        fn=apply_coding_filter,
+        outputs=[
+            search_box,
+            size_range,
+            bench_math,
+            bench_knowledge,
+            bench_coding,
+            bench_vision,
+            bench_agent,
+            bench_language,
+        ],
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+    preset_knowledge.click(
+        fn=apply_knowledge_filter,
+        outputs=[
+            search_box,
+            size_range,
+            bench_math,
+            bench_knowledge,
+            bench_coding,
+            bench_vision,
+            bench_agent,
+            bench_language,
+        ],
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+    preset_math.click(
+        fn=apply_math_filter,
+        outputs=[
+            search_box,
+            size_range,
+            bench_math,
+            bench_knowledge,
+            bench_coding,
+            bench_vision,
+            bench_agent,
+            bench_language,
+        ],
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+    preset_vision.click(
+        fn=apply_vision_filter,
+        outputs=[
+            search_box,
+            size_range,
+            bench_math,
+            bench_knowledge,
+            bench_coding,
+            bench_vision,
+            bench_agent,
+            bench_language,
+        ],
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+    preset_agent.click(
+        fn=apply_agent_filter,
+        outputs=[
+            search_box,
+            size_range,
+            bench_math,
+            bench_knowledge,
+            bench_coding,
+            bench_vision,
+            bench_agent,
+            bench_language,
+        ],
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+    preset_language.click(
+        fn=apply_language_filter,
+        outputs=[
+            search_box,
+            size_range,
+            bench_math,
+            bench_knowledge,
+            bench_coding,
+            bench_vision,
+            bench_agent,
+            bench_language,
+        ],
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+    # Initialize data and populate table on app load
+    def init_wrapper():
+        initialize_data()
+        return None
+
+    app.load(
+        fn=init_wrapper,  # Load data without returning it
+        outputs=None,
+    ).then(fn=update_table, inputs=filter_inputs, outputs=table_outputs)
+
+
+if __name__ == "__main__":
+    # Initialize data before launching
+    print("Initializing leaderboard app...")
+    initialize_data()
+    print("✓ Data loaded successfully")
+    print("Launching Gradio app...")
+
+    app.launch(server_name="0.0.0.0", server_port=7860, share=False)

requirements.txt

@@ -0,0 +1,12 @@
+# Gradio Leaderboard Requirements
+
+# Core dependencies
+gradio>=4.0.0
+gradio_rangeslider>=0.0.8
+datasets>=2.14.0
+pandas>=2.0.0
+huggingface_hub>=0.19.0
+pyarrow>=14.0.0
+
+# Additional utilities
+requests>=2.31.0

static/sortTable.js

@@ -0,0 +1,93 @@
+/**
+ * Table sorting functionality for the leaderboard
+ * Allows clicking column headers to sort by model name or benchmark scores
+ */
+
+let currentSortColumn = null;
+let currentSortDirection = 'desc';
+
+/**
+ * Sort the leaderboard table by the specified column index
+ * @param {number} colIndex - The column index to sort by (0 = model name, 1+ = benchmarks)
+ */
+function sortTable(colIndex) {
+  const table = document.querySelector('#leaderboardTable');
+  if (!table) return;
+  
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+  
+  const rows = Array.from(tbody.querySelectorAll('tr'));
+  
+  // Toggle sort direction if clicking same column
+  if (currentSortColumn === colIndex) {
+    currentSortDirection = currentSortDirection === 'desc' ? 'asc' : 'desc';
+  } else {
+    currentSortColumn = colIndex;
+    currentSortDirection = 'desc';
+  }
+  
+  // Sort rows
+  rows.sort((a, b) => {
+    let aVal, bVal;
+    
+    if (colIndex === 0) {
+      // Sort by model name (stored in data-name attribute)
+      aVal = a.dataset.name || '';
+      bVal = b.dataset.name || '';
+      return currentSortDirection === 'asc' 
+        ? aVal.localeCompare(bVal)
+        : bVal.localeCompare(aVal);
+    } else {
+      // Sort by benchmark score
+      const aCell = a.cells[colIndex];
+      const bCell = b.cells[colIndex];
+      
+      // Extract score from cell text content
+      const aText = aCell ? aCell.textContent.trim() : '';
+      const bText = bCell ? bCell.textContent.trim() : '';
+      
+      // Parse scores (handle "—" as missing = -1)
+      const aScore = aText === '—' ? -1 : parseFloat(aText);
+      const bScore = bText === '—' ? -1 : parseFloat(bText);
+      
+      // Handle missing scores - put them at the end
+      if (isNaN(aScore) && isNaN(bScore)) return 0;
+      if (isNaN(aScore)) return 1;
+      if (isNaN(bScore)) return -1;
+      
+      // Both are numbers, compare them
+      return currentSortDirection === 'desc' 
+        ? bScore - aScore
+        : aScore - bScore;
+    }
+  });
+  
+  // Re-append rows in sorted order
+  rows.forEach(row => tbody.appendChild(row));
+  
+  // Update sort indicators
+  updateSortIndicators(colIndex);
+}
+
+/**
+ * Update the sort direction indicators in column headers
+ * @param {number} colIndex - The currently sorted column index
+ */
+function updateSortIndicators(colIndex) {
+  const headers = document.querySelectorAll('#leaderboardTable thead th');
+  headers.forEach((th, index) => {
+    const sortArrow = th.querySelector('.sa');
+    if (sortArrow) {
+      if (index === colIndex) {
+        // Update arrow for sorted column
+        sortArrow.textContent = currentSortDirection === 'desc' ? '↓' : '↑';
+        th.classList.add('sorted');
+      } else {
+        // Reset arrow for other columns
+        sortArrow.textContent = '↕';
+        th.classList.remove('sorted');
+      }
+    }
+  });
+}

utils/__init__.py

@@ -0,0 +1,14 @@
+"""
+Utility modules for the Gradio leaderboard app.
+"""
+
+from .data_loader import load_leaderboard_data
+from .filters import filter_data
+from .formatters import format_for_display, format_score
+
+__all__ = [
+    "load_leaderboard_data",
+    "filter_data",
+    "format_for_display",
+    "format_score",
+]

utils/data_loader.py

@@ -0,0 +1,205 @@
+"""
+Data loading utilities for the leaderboard.
+Loads data from HuggingFace dataset and integrates provider logos.
+"""
+
+import json
+import os
+import pandas as pd
+from datasets import load_dataset
+
+
+def load_provider_logos():
+    """
+    Load provider logos from data/provider_logos.json
+
+    Returns:
+        dict: Provider name -> logo URL mapping
+    """
+    logos_path = os.path.join(
+        os.path.dirname(__file__), "..", "data", "provider_logos.json"
+    )
+
+    try:
+        with open(logos_path, "r") as f:
+            logos = json.load(f)
+        return logos
+    except FileNotFoundError:
+        print(f"Warning: Provider logos file not found at {logos_path}")
+        return {}
+    except json.JSONDecodeError as e:
+        print(f"Warning: Could not parse provider logos JSON: {e}")
+        return {}
+
+
+def format_params(param_billions):
+    """
+    Format parameter count for display.
+
+    Args:
+        param_billions: Parameter count in billions (float or None)
+
+    Returns:
+        str: Formatted parameter string (e.g., "72.7B", "Unknown")
+    """
+    if pd.isna(param_billions) or param_billions is None:
+        return "Unknown"
+
+    if param_billions >= 1000:
+        return f"{param_billions:.0f}B"
+    elif param_billions >= 100:
+        return f"{param_billions:.0f}B"
+    elif param_billions >= 10:
+        return f"{param_billions:.1f}B"
+    else:
+        return f"{param_billions:.2f}B"
+
+
+def load_leaderboard_data():
+    """
+    Load leaderboard data from HuggingFace dataset.
+
+    Returns:
+        pandas.DataFrame: Complete leaderboard data with:
+            - All model metadata
+            - All benchmark scores
+            - Provider logos
+            - Formatted parameters
+    """
+    print("Loading leaderboard data from HuggingFace dataset...")
+
+    # Load dataset from HF
+    try:
+        ds = load_dataset("OpenEvals/leaderboard-data", split="train")
+        df = ds.to_pandas()
+        print(f"✓ Loaded {len(df)} models from dataset")
+    except Exception as e:
+        print(f"✗ Error loading dataset: {e}")
+        raise
+
+    # Load provider logos
+    logos = load_provider_logos()
+    print(f"✓ Loaded {len(logos)} provider logos")
+
+    # Add logo URLs to dataframe
+    df["logo_url"] = df["provider"].map(logos)
+
+    # Format parameters for display
+    df["parameters_display"] = df["parameters_billions"].apply(format_params)
+
+    # Sort by model name by default
+    df = df.sort_values("model_name").reset_index(drop=True)
+
+    print(f"✓ Data loaded successfully: {len(df)} models, {df.columns.size} columns")
+
+    return df
+
+
+def get_benchmark_columns():
+    """
+    Get list of all benchmark score column names.
+
+    Returns:
+        list: Column names for benchmark scores
+    """
+    return [
+        "gsm8k_score",
+        "mmluPro_score",
+        "gpqa_score",
+        "hle_score",
+        "olmOcr_score",
+        "sweVerified_score",
+        "swePro_score",
+        "aime2026_score",
+        "terminalBench_score",
+        "evasionBench_score",
+        "hmmt2026_score",
+    ]
+
+
+def get_benchmark_info():
+    """
+    Get metadata about each benchmark.
+
+    Returns:
+        dict: Benchmark key -> metadata mapping
+    """
+    return {
+        "gsm8k": {
+            "name": "GSM8K",
+            "full_name": "Grade School Math 8K",
+            "category": "math",
+            "color": "#7c3aed",
+            "url": "https://huggingface.co/datasets/openai/gsm8k",
+        },
+        "mmluPro": {
+            "name": "MMLU-Pro",
+            "full_name": "Massive Multi-task Language Understanding Pro",
+            "category": "knowledge",
+            "color": "#2563eb",
+            "url": "https://huggingface.co/datasets/TIGER-Lab/MMLU-Pro",
+        },
+        "gpqa": {
+            "name": "GPQA◆",
+            "full_name": "PhD-level Expert Questions",
+            "category": "knowledge",
+            "color": "#2563eb",
+            "url": "https://huggingface.co/datasets/Idavidrein/gpqa",
+        },
+        "hle": {
+            "name": "HLE",
+            "full_name": "Humanity's Last Exam",
+            "category": "knowledge",
+            "color": "#2563eb",
+            "url": "https://lastexam.ai",
+        },
+        "olmOcr": {
+            "name": "olmOCR",
+            "full_name": "OCR Evaluation Benchmark",
+            "category": "vision",
+            "color": "#db2777",
+            "url": "https://huggingface.co/datasets/allenai/olmOCR-bench",
+        },
+        "sweVerified": {
+            "name": "SWE-V",
+            "full_name": "SWE-bench Verified",
+            "category": "coding",
+            "color": "#059669",
+            "url": "https://www.swebench.com",
+        },
+        "swePro": {
+            "name": "SWE-Pro",
+            "full_name": "SWE-bench Pro",
+            "category": "coding",
+            "color": "#059669",
+            "url": "https://scale.com/leaderboard/swe_bench_pro_public",
+        },
+        "aime2026": {
+            "name": "AIME 2026",
+            "full_name": "American Invitational Mathematics Examination 2026",
+            "category": "math",
+            "color": "#7c3aed",
+            "url": "https://matharena.ai/?comp=aime--aime_2026",
+        },
+        "terminalBench": {
+            "name": "TB 2.0",
+            "full_name": "Terminal-Bench 2.0",
+            "category": "agent",
+            "color": "#0d9488",
+            "url": "https://www.tbench.ai/leaderboard/terminal-bench/2.0",
+        },
+        "evasionBench": {
+            "name": "EvasionB",
+            "full_name": "EvasionBench",
+            "category": "language",
+            "color": "#ea580c",
+            "url": "https://huggingface.co/datasets/FutureMa/EvasionBench",
+        },
+        "hmmt2026": {
+            "name": "HMMT",
+            "full_name": "Harvard-MIT Mathematics Tournament Feb 2026",
+            "category": "math",
+            "color": "#7c3aed",
+            "url": "https://matharena.ai/?comp=hmmt--hmmt_feb_2026",
+        },
+    }

utils/filters.py

@@ -0,0 +1,151 @@
+"""
+Filter logic for the leaderboard.
+Handles search, size range, and benchmark selection filtering.
+"""
+
+import pandas as pd
+
+
+def filter_data(df, search_term, size_min, size_max, selected_benchmarks):
+    """
+    Apply all filters to the leaderboard dataframe.
+
+    Args:
+        df (pd.DataFrame): Original leaderboard dataframe
+        search_term (str): Search string for model names (case-insensitive)
+        size_min (float): Minimum model size in billions
+        size_max (float): Maximum model size in billions
+        selected_benchmarks (list): List of benchmark keys to filter by
+
+    Returns:
+        pd.DataFrame: Filtered dataframe
+    """
+    filtered = df.copy()
+
+    # 1. Search filter - match model name or provider
+    if search_term and search_term.strip():
+        search_lower = search_term.lower().strip()
+        filtered = filtered[
+            filtered["model_name"].str.lower().str.contains(search_lower, na=False)
+            | filtered["provider"].str.lower().str.contains(search_lower, na=False)
+        ]
+
+    # 2. Size filter
+    # Include models with unknown sizes (they should always be visible)
+    size_mask = (
+        (filtered["parameters_billions"] >= size_min)
+        & (filtered["parameters_billions"] <= size_max)
+    ) | filtered["parameters_billions"].isna()
+
+    filtered = filtered[size_mask]
+
+    # 3. Benchmark filter - only show models with at least one score in selected benchmarks
+    if selected_benchmarks and len(selected_benchmarks) > 0:
+        benchmark_cols = [f"{bench}_score" for bench in selected_benchmarks]
+
+        # Filter to only include columns that exist in the dataframe
+        existing_benchmark_cols = [
+            col for col in benchmark_cols if col in filtered.columns
+        ]
+
+        if existing_benchmark_cols:
+            # Keep rows that have at least one non-null score in the selected benchmarks
+            has_score_mask = filtered[existing_benchmark_cols].notna().any(axis=1)
+            filtered = filtered[has_score_mask]
+    else:
+        # If no benchmarks selected, return empty dataframe
+        filtered = filtered.iloc[0:0]  # Empty with same structure
+
+    return filtered
+
+
+def calculate_stats(df, selected_benchmarks):
+    """
+    Calculate statistics for the filtered data.
+
+    Args:
+        df (pd.DataFrame): Filtered leaderboard dataframe
+        selected_benchmarks (list): List of selected benchmark keys
+
+    Returns:
+        dict: Statistics with keys 'models', 'benchmarks', 'scores'
+    """
+    total_models = len(df)
+    total_benchmarks = len(selected_benchmarks) if selected_benchmarks else 0
+
+    # Count non-null scores in selected benchmarks
+    if selected_benchmarks and len(selected_benchmarks) > 0:
+        benchmark_cols = [f"{bench}_score" for bench in selected_benchmarks]
+        existing_cols = [col for col in benchmark_cols if col in df.columns]
+
+        if existing_cols and len(df) > 0:
+            total_scores = df[existing_cols].notna().sum().sum()
+        else:
+            total_scores = 0
+    else:
+        total_scores = 0
+
+    return {
+        "models": total_models,
+        "benchmarks": total_benchmarks,
+        "scores": int(total_scores),
+    }
+
+
+def parse_benchmark_selections(*checkbox_groups):
+    """
+    Parse benchmark selections from multiple checkbox groups.
+    Converts display names back to benchmark keys.
+
+    Args:
+        *checkbox_groups: Variable number of lists containing selected display names
+
+    Returns:
+        list: List of benchmark keys
+    """
+    # Mapping from display names to benchmark keys
+    display_to_key = {
+        "GSM8K": "gsm8k",
+        "AIME 2026": "aime2026",
+        "HMMT": "hmmt2026",
+        "MMLU-Pro": "mmluPro",
+        "GPQA": "gpqa",
+        "HLE": "hle",
+        "SWE-V": "sweVerified",
+        "SWE-Pro": "swePro",
+        "olmOCR": "olmOcr",
+        "TB 2.0": "terminalBench",
+        "EvasionB": "evasionBench",
+    }
+
+    selected_keys = []
+
+    for group in checkbox_groups:
+        if group:  # Check if not None and not empty
+            for display_name in group:
+                key = display_to_key.get(display_name)
+                if key:
+                    selected_keys.append(key)
+
+    return selected_keys
+
+
+def get_default_benchmarks():
+    """
+    Get the default set of selected benchmarks (all except olmOCR).
+
+    Returns:
+        list: List of default benchmark keys
+    """
+    return [
+        "gsm8k",
+        "mmluPro",
+        "gpqa",
+        "hle",
+        "sweVerified",
+        "swePro",
+        "aime2026",
+        "terminalBench",
+        "evasionBench",
+        "hmmt2026",
+    ]

utils/formatters.py

@@ -0,0 +1,177 @@
+"""
+Data formatting utilities for Gradio display.
+Handles formatting of model names, scores, and table structure.
+"""
+
+import pandas as pd
+from .data_loader import get_benchmark_info
+
+
+def format_score(score_value):
+    """
+    Format a benchmark score for display.
+
+    Args:
+        score_value: Score value (float, int, or None)
+
+    Returns:
+        str: Formatted score ("85.3" or "—" for missing)
+    """
+    if pd.isna(score_value) or score_value is None:
+        return "—"
+    return f"{score_value:.1f}"
+
+
+def format_model_name_with_provider(row):
+    """
+    Create model name display with provider initials prefix.
+
+    Args:
+        row: DataFrame row with 'model_name', 'provider' columns
+
+    Returns:
+        str: Model name with provider prefix (e.g., "[HF] mistralai/Mistral-7B")
+    """
+    model_name = row["model_name"]
+    provider = row["provider"]
+
+    # Add provider initials as prefix
+    initials = provider[:3].upper() if provider else "???"
+    return f"[{initials}] {model_name}"
+
+
+def format_hf_link(row):
+    """
+    Create HuggingFace link for the model.
+
+    Args:
+        row: DataFrame row with 'model_name' column
+
+    Returns:
+        str: HuggingFace URL
+    """
+    model_name = row["model_name"]
+    return f"https://huggingface.co/{model_name}"
+
+
+def format_for_display(df, selected_benchmarks):
+    """
+    Format dataframe for Gradio display.
+
+    Args:
+        df (pd.DataFrame): Filtered leaderboard dataframe
+        selected_benchmarks (list): List of benchmark keys to display
+
+    Returns:
+        pd.DataFrame: Formatted dataframe ready for gr.Dataframe
+    """
+    if df.empty:
+        # Return empty dataframe with proper structure
+        return pd.DataFrame(columns=["Model", "Parameters", "🔗 Link"])
+
+    display_df = df.copy()
+
+    # Create model column with provider prefix
+    display_df["Model"] = display_df.apply(format_model_name_with_provider, axis=1)
+
+    # Create HF link column
+    display_df["HF Link"] = display_df.apply(format_hf_link, axis=1)
+
+    # Start with base columns
+    columns_to_show = ["Model", "parameters_display", "HF Link"]
+    column_names = ["Model", "Parameters", "🔗 Link"]
+
+    # Get benchmark info for display names
+    benchmark_info = get_benchmark_info()
+
+    # Add selected benchmark columns
+    for bench_key in selected_benchmarks:
+        score_col = f"{bench_key}_score"
+
+        if score_col in display_df.columns:
+            # Get display name from benchmark info
+            display_name = benchmark_info.get(bench_key, {}).get("name", bench_key)
+
+            # Format scores
+            display_df[display_name] = display_df[score_col].apply(format_score)
+
+            columns_to_show.append(display_name)
+            column_names.append(display_name)
+
+    # Select only the columns we want to show
+    result_df = display_df[columns_to_show].copy()
+
+    # Rename columns for clarity
+    result_df.columns = column_names
+
+    return result_df
+
+
+def create_empty_table(selected_benchmarks):
+    """
+    Create an empty table with proper column structure.
+
+    Args:
+        selected_benchmarks (list): List of benchmark keys
+
+    Returns:
+        pd.DataFrame: Empty dataframe with proper columns
+    """
+    benchmark_info = get_benchmark_info()
+
+    columns = ["Model", "Parameters", "🔗 Link"]
+
+    for bench_key in selected_benchmarks:
+        display_name = benchmark_info.get(bench_key, {}).get("name", bench_key)
+        columns.append(display_name)
+
+    return pd.DataFrame(columns=columns)
+
+
+def get_column_datatypes(selected_benchmarks):
+    """
+    Get Gradio datatype specification for table columns.
+
+    Args:
+        selected_benchmarks (list): List of benchmark keys
+
+    Returns:
+        list: List of datatype strings for gr.Dataframe
+    """
+    # Base columns: Model (str), Provider (str), Parameters (str)
+    datatypes = ["str", "str", "str"]
+
+    # Add 'str' for each benchmark column (they're pre-formatted as strings)
+    for _ in selected_benchmarks:
+        datatypes.append("str")
+
+    return datatypes
+
+
+def prepare_export_data(df, selected_benchmarks):
+    """
+    Prepare data for CSV export (without HTML/markdown formatting).
+
+    Args:
+        df (pd.DataFrame): Filtered leaderboard dataframe
+        selected_benchmarks (list): List of benchmark keys
+
+    Returns:
+        pd.DataFrame: Clean dataframe for CSV export
+    """
+    if df.empty:
+        return pd.DataFrame()
+
+    export_df = df[["model_name", "provider", "parameters_display"]].copy()
+    export_df.columns = ["Model", "Provider", "Parameters"]
+
+    benchmark_info = get_benchmark_info()
+
+    # Add benchmark scores
+    for bench_key in selected_benchmarks:
+        score_col = f"{bench_key}_score"
+        if score_col in df.columns:
+            display_name = benchmark_info.get(bench_key, {}).get("name", bench_key)
+            export_df[display_name] = df[score_col].apply(format_score)
+
+    return export_df

utils/html_generator.py

@@ -0,0 +1,292 @@
+"""
+HTML table generator for the leaderboard.
+Generates styled HTML tables with client-side sorting and provider logos.
+"""
+
+import pandas as pd
+from typing import Dict, List
+from .data_loader import get_benchmark_info
+
+
+# Benchmark to category mapping (for color coding)
+BENCHMARK_CATEGORIES = {
+    "gsm8k": "math",
+    "aime2026": "math",
+    "hmmt2026": "math",
+    "mmluPro": "knowledge",
+    "gpqa": "knowledge",
+    "hle": "knowledge",
+    "sweVerified": "coding",
+    "swePro": "coding",
+    "olmOcr": "vision",
+    "terminalBench": "agent",
+    "evasionBench": "language",
+}
+
+# Category color mapping (for score styling)
+CATEGORY_COLORS = {
+    "math": "#7c3aed",  # purple
+    "knowledge": "#2563eb",  # blue
+    "coding": "#059669",  # green
+    "agent": "#0d9488",  # teal
+    "language": "#ea580c",  # orange
+    "vision": "#db2777",  # pink
+}
+
+
+def get_table_css() -> str:
+    """
+    Returns the CSS styles for the leaderboard table (light mode only).
+    Extracted from index.html and adapted for Gradio embedding.
+    """
+    return """
+*{margin:0;padding:0;box-sizing:border-box;}
+:root{
+  --bg:#f9fafb;--bg2:#f3f4f6;--surface:#ffffff;--surface-alt:#f9fafb;
+  --border:#e5e7eb;--border-hover:#d1d5db;
+  --shadow-sm:0 1px 3px rgba(15,23,42,.04),0 1px 2px rgba(15,23,42,.06);
+  --shadow:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
+  --shadow-lg:0 12px 40px rgba(15,23,42,.08),0 4px 12px rgba(15,23,42,.06);
+  --text:#111827;--text-sec:#6b7280;--text-muted:#9ca3af;
+  --ac:#6366f1;--ac2:#4f46e5;--ac-bg:rgba(99,102,241,.06);
+  --teal:#0d9488;--amber:#d97706;--green:#16a34a;--rose:#e11d48;--purple:#7c3aed;
+  --radius:16px;--radius-sm:10px;--radius-xs:6px;
+  --font:'Source Sans Pro',sans-serif;--font-mono:'IBM Plex Mono',monospace;
+  --tr:0.22s cubic-bezier(0.4,0,0.2,1);
+}
+
+/* TABLE */
+.tw{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;box-shadow:var(--shadow);margin-bottom:20px;}
+table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--font);}
+thead{background:var(--surface-alt);position:sticky;top:0;z-index:100;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
+thead tr{border-bottom:2px solid var(--border);}
+th{padding:12px 8px;text-align:center;font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);white-space:nowrap;cursor:pointer;user-select:none;vertical-align:bottom;line-height:1.6;font-weight:700;transition:var(--tr);}
+th.c-model{text-align:left;padding-left:14px;min-width:180px;position:sticky;left:0;background:var(--surface-alt);z-index:101;}
+th:hover{color:var(--ac);background:rgba(99,102,241,.08);transform:translateY(-1px);}
+th.sorted{color:var(--ac);font-weight:800;}
+.sa{opacity:.6;font-size:7px;margin-left:3px;}
+th a{color:inherit;text-decoration:none;}
+th a:hover{color:var(--ac);text-decoration:underline;}
+tbody tr{border-bottom:1px solid var(--border);transition:background var(--tr);}
+tbody tr:last-child{border-bottom:none;}
+tbody tr:hover{background:rgba(99,102,241,.025);}
+td{padding:10px 6px;text-align:center;vertical-align:middle;}
+td.c-model{text-align:left;padding-left:14px;position:sticky;left:0;background:var(--surface);z-index:9;border-right:1px solid var(--border);}
+tbody tr:hover td.c-model{background:rgba(99,102,241,.025);}
+
+/* MODEL CELL */
+.mc{display:flex;flex-direction:column;gap:2px;}
+.mn{font-weight:700;font-size:12px;color:var(--text);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
+.mn a{color:var(--text);text-decoration:none;transition:var(--tr);position:relative;}
+.mn a:hover{color:var(--ac);text-decoration:none;}
+.mn a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--ac);transition:width 0.3s ease;}
+.mn a:hover::after{width:100%;}
+.ms{display:flex;gap:4px;align-items:center;margin-top:2px;}
+.mp{font-size:8px;color:var(--text-muted);font-family:var(--font-mono);}
+
+/* PROVIDER LOGO */
+.provider-logo-inline{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-right:6px;vertical-align:middle;display:inline-block;}
+.provider-logo-fallback-inline{width:16px;height:16px;border-radius:50%;background:var(--ac-bg);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--ac);font-family:var(--font-mono);margin-right:6px;vertical-align:middle;}
+
+/* SCORE CELL */
+.sc{display:flex;flex-direction:column;align-items:center;gap:2px;}
+.sn{font-family:var(--font-mono);font-size:11px;font-weight:700;}
+.na{color:var(--text-muted);font-size:9px;font-family:var(--font-mono);}
+
+/* EMPTY STATE */
+.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:13px;}
+.empty-state strong{color:var(--text-sec);font-size:15px;display:block;margin-bottom:8px;}
+"""
+
+
+def get_benchmark_category_color(benchmark_key: str) -> str:
+    """
+    Get the color for a benchmark based on its category.
+
+    Args:
+        benchmark_key: The benchmark key (e.g., 'gsm8k', 'mmluPro')
+
+    Returns:
+        str: Hex color code for the category
+    """
+    category = BENCHMARK_CATEGORIES.get(benchmark_key, "knowledge")
+    return CATEGORY_COLORS.get(category, "#6366f1")
+
+
+def generate_table_headers(selected_benchmarks: List[str]) -> str:
+    """
+    Generate HTML for table headers with sorting functionality.
+
+    Args:
+        selected_benchmarks: List of benchmark keys to display
+
+    Returns:
+        str: HTML string for <thead> element
+    """
+    benchmarks_info = get_benchmark_info()
+
+    # Start with model header (column 0)
+    headers_html = "<thead><tr>\n"
+    headers_html += '  <th class="c-model" onclick="sortTable(0)">Model <span class="sa">↕</span></th>\n'
+
+    # Add benchmark headers (columns 1+)
+    for idx, bench_key in enumerate(selected_benchmarks, start=1):
+        bench_info = benchmarks_info.get(bench_key, {})
+        bench_name = bench_info.get("name", bench_key)
+        headers_html += f'  <th onclick="sortTable({idx})">{bench_name} <span class="sa">↕</span></th>\n'
+
+    headers_html += "</tr></thead>\n"
+    return headers_html
+
+
+def generate_model_cell(row: pd.Series, provider_logos: Dict[str, str]) -> str:
+    """
+    Generate HTML for the model cell (sticky first column).
+
+    Args:
+        row: DataFrame row containing model data
+        provider_logos: Dictionary mapping provider names to logo URLs
+
+    Returns:
+        str: HTML string for model <td> element
+    """
+    model_id = row.get("model_id", "")
+    model_name = row.get("model_name", model_id)
+    provider = row.get("provider", "Unknown")
+    # Try parameters_display first (formatted), then parameters_billions
+    params = row.get("parameters_display", row.get("parameters", "Unknown"))
+
+    # Get provider logo - first try logo_url column, then fallback to provider_logos dict
+    provider_logo_url = row.get("logo_url")
+    if not provider_logo_url or pd.isna(provider_logo_url):
+        provider_logo_url = provider_logos.get(provider)
+
+    if provider_logo_url:
+        logo_html = f'<img src="{provider_logo_url}" alt="{provider}" class="provider-logo-inline" title="{provider}" onerror="this.style.display=\'none\';">'
+    else:
+        # Fallback: show first 2 letters of provider name
+        initials = provider[:2].upper() if provider and provider != "Unknown" else "??"
+        logo_html = f'<span class="provider-logo-fallback-inline" title="{provider}">{initials}</span>'
+
+    # Format HuggingFace link - use model_name which contains the repo path (e.g., "Meta/Llama-3")
+    hf_link = f"https://huggingface.co/{model_name}" if model_name else "#"
+
+    cell_html = f'''  <td class="c-model">
+    <div class="mc">
+      <div class="mn">
+        {logo_html}
+        <a href="{hf_link}" target="_blank" rel="noopener noreferrer">{model_name}</a>
+      </div>
+      <div class="ms">
+        <span class="mp">{provider}</span>
+        <span class="mp">{params}</span>
+      </div>
+    </div>
+  </td>'''
+
+    return cell_html
+
+
+def generate_score_cell(score, benchmark_key: str) -> str:
+    """
+    Generate HTML for a score cell with category-specific color.
+
+    Args:
+        score: The benchmark score (float, None, or NaN)
+        benchmark_key: The benchmark key (for color coding)
+
+    Returns:
+        str: HTML string for score <td> element
+    """
+    # Check if score is missing/invalid
+    if pd.isna(score) or score is None:
+        return '  <td><div class="sc"><span class="na">—</span></div></td>'
+
+    try:
+        score_float = float(score)
+        color = get_benchmark_category_color(benchmark_key)
+        score_display = f"{score_float:.1f}"
+
+        return f'  <td><div class="sc"><div class="sn" style="color: {color};">{score_display}</div></div></td>'
+    except (ValueError, TypeError):
+        return '  <td><div class="sc"><span class="na">—</span></div></td>'
+
+
+def generate_table_rows(
+    df: pd.DataFrame, selected_benchmarks: List[str], provider_logos: Dict[str, str]
+) -> str:
+    """
+    Generate HTML for all table rows.
+
+    Args:
+        df: DataFrame containing leaderboard data
+        selected_benchmarks: List of benchmark keys to display
+        provider_logos: Dictionary mapping provider names to logo URLs
+
+    Returns:
+        str: HTML string for <tbody> element
+    """
+    if df.empty:
+        return """<tbody>
+  <tr>
+    <td colspan="100" class="empty-state">
+      <strong>No models match your criteria</strong>
+      Try adjusting your search or filter settings
+    </td>
+  </tr>
+</tbody>"""
+
+    rows_html = "<tbody>\n"
+
+    for _, row in df.iterrows():
+        model_name = row.get("model_name", row.get("model_id", "Unknown"))
+        rows_html += f'<tr data-name="{model_name}">\n'
+
+        # Model cell (sticky first column)
+        rows_html += generate_model_cell(row, provider_logos) + "\n"
+
+        # Score cells for each selected benchmark
+        for bench_key in selected_benchmarks:
+            score_col = f"{bench_key}_score"
+            score = row.get(score_col)
+            rows_html += generate_score_cell(score, bench_key) + "\n"
+
+        rows_html += "</tr>\n"
+
+    rows_html += "</tbody>\n"
+    return rows_html
+
+
+def generate_leaderboard_html(
+    df: pd.DataFrame, selected_benchmarks: List[str], provider_logos: Dict[str, str]
+) -> str:
+    """
+    Generate complete HTML table for the leaderboard.
+
+    Args:
+        df: DataFrame containing filtered leaderboard data
+        selected_benchmarks: List of benchmark keys to display
+        provider_logos: Dictionary mapping provider names to logo URLs
+
+    Returns:
+        str: Complete HTML string with styles, table, and inline JavaScript
+    """
+    css = get_table_css()
+    headers = generate_table_headers(selected_benchmarks)
+    rows = generate_table_rows(df, selected_benchmarks, provider_logos)
+
+    # Note: JavaScript for sorting is loaded via Gradio's js parameter in app.py
+    html = f"""
+<style>
+{css}
+</style>
+
+<div class="tw">
+  <table id="leaderboardTable">
+    {headers}
+    {rows}
+  </table>
+</div>
+"""
+
+    return html