new version with updates

README.md

@@ -1,12 +1,12 @@
 ---
-title: Every Eval Ever Space
-emoji: 🌍
-colorFrom: gray
-colorTo: green
+title: Eee Test
+emoji: 👀
+colorFrom: pink
+colorTo: purple
 sdk: gradio
-sdk_version: 6.1.0
+sdk_version: 5.49.1
 app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1,7 +1,4 @@
-"""
-Evaluation Leaderboard - Gradio Interface
-Displays model evaluation results from HuggingFace datasets.
-"""
+
 import gradio as gr
 import pandas as pd
 from pathlib import Path
@@ -23,25 +20,15 @@ from ui_components import (
     format_metric_details,
     format_model_card,
     format_model_comparison,
+    create_radar_plot,
 )
 
 PAGE_SIZE = 50
 
 
-def update_leaderboard_table(selected_leaderboard, search_query="", current_page=1, sort_column=None, selected_columns=None, progress=gr.Progress()):
-    """Loads and aggregates data for the selected leaderboard."""
+def get_leaderboard_data(selected_leaderboard, progress=gr.Progress()):
     if not selected_leaderboard:
-        return (
-            pd.DataFrame(),
-            format_leaderboard_header(None, {}),
-            format_metric_details(None, {}),
-            gr.update(choices=[], value=None),
-            gr.update(interactive=False),
-            gr.update(interactive=False),
-            gr.update(choices=[], value=None),
-            "0 / 0",
-            gr.update(choices=[], value=[]),
-        )
+        return pd.DataFrame(), {}
     
     metadata = get_eval_metadata(selected_leaderboard)
     
@@ -49,73 +36,37 @@ def update_leaderboard_table(selected_leaderboard, search_query="", current_page
         progress(value, desc=desc)
     
     df = build_leaderboard_table(selected_leaderboard, "", progress_callback)
+    return df, metadata
+
+
+def filter_and_paginate(df, search_query, sort_column, selected_columns, current_page):
+    if df.empty:
+        return df.copy(), 1, 1
     
-    # Get all available columns BEFORE filtering (for column selector)
-    all_available_columns = list(df.columns) if not df.empty else []
-    
-    # Filter columns if selected (if None or empty, show all columns)
-    if selected_columns is not None and len(selected_columns) > 0:
-        # Ensure Model column is always included
-        base_cols = ["Model"]
-        available_cols = list(df.columns)
-        cols_to_show = [col for col in base_cols if col in available_cols]
-        # Add Developer and other selected columns
-        cols_to_show.extend([col for col in selected_columns if col in available_cols and col not in cols_to_show])
-        if cols_to_show:
-            df = df[cols_to_show]
-    
-    if search_query and not df.empty:
+    df = df.copy()
+    all_columns = list(df.columns)
+    
+    if selected_columns:
+        cols = ["Model"] + [c for c in all_columns if c in selected_columns and c != "Model"]
+        df = df[cols]
+    
+    if search_query:
         mask = df.astype(str).apply(lambda row: row.str.contains(search_query, case=False, na=False).any(), axis=1)
         df = df[mask]
     
-    filtered_count = len(df)
-    
-    if sort_column and sort_column in df.columns and not df.empty:
+    if sort_column and sort_column in df.columns:
         df = df.sort_values(by=sort_column, ascending=False, na_position='last')
     
-    total_pages = max(1, (filtered_count + PAGE_SIZE - 1) // PAGE_SIZE) if filtered_count > 0 else 1
+    total_rows = len(df)
+    total_pages = max(1, (total_rows + PAGE_SIZE - 1) // PAGE_SIZE)
     current_page = max(1, min(current_page, total_pages))
+    start = (current_page - 1) * PAGE_SIZE
+    end = start + PAGE_SIZE
     
-    start_idx = (current_page - 1) * PAGE_SIZE
-    end_idx = start_idx + PAGE_SIZE
-    df_paginated = df.iloc[start_idx:end_idx] if not df.empty else df
-    
-    page_choices = [str(i) for i in range(1, total_pages + 1)]
-    page_dropdown = gr.update(choices=page_choices, value=str(current_page))
-    prev_btn = gr.update(interactive=(current_page > 1))
-    next_btn = gr.update(interactive=(current_page < total_pages))
-    page_info = f"{current_page} / {total_pages}"
-    
-    sort_choices = list(df.columns) if not df.empty else []
-    default_sort = sort_column if sort_column and sort_column in sort_choices else ("Average" if "Average" in sort_choices else (sort_choices[0] if sort_choices else None))
-    sort_column_update = gr.update(choices=sort_choices, value=default_sort)
-    
-    # Get all available columns for column selector (use full list, not filtered)
-    # Include all columns except Model in the selector (Model is always shown)
-    column_choices = [col for col in all_available_columns if col != "Model"]
-    # Preserve current selection, or default to all columns if None or empty
-    if selected_columns is None or len(selected_columns) == 0:
-        column_value = column_choices
-    else:
-        # Preserve user's selection, filtering out any invalid choices
-        column_value = [col for col in selected_columns if col in column_choices]
-    column_selector_update = gr.update(choices=column_choices, value=column_value)
-    
-    return (
-        df_paginated,
-        format_leaderboard_header(selected_leaderboard, metadata),
-        format_metric_details(selected_leaderboard, metadata),
-        page_dropdown,
-        prev_btn,
-        next_btn,
-        sort_column_update,
-        page_info,
-        column_selector_update,
-    )
+    return df.iloc[start:end], current_page, total_pages
 
 
 def search_model(model_query):
-    """Search for a model and return formatted card."""
     if not model_query or len(model_query) < 2:
         return """
         <div class="no-results">
@@ -134,7 +85,6 @@ def search_model(model_query):
         </div>
         """
     
-    # Use the first matching model
     model_name = list(results.keys())[0]
     model_data = results[model_name]
     
@@ -142,42 +92,38 @@ def search_model(model_query):
 
 
 def compare_models(selected_models):
-    """Compare multiple selected models."""
-    if not selected_models or len(selected_models) == 0:
+    if not selected_models:
         return """
         <div class="no-results">
             <h3>Select models to compare</h3>
             <p>Choose multiple models from the dropdown to see a side-by-side comparison</p>
         </div>
-        """
+        """, None
     
-    # Get data for all selected models
     all_results = {}
     for model_name in selected_models:
         results, _ = search_model_across_leaderboards(model_name)
         if results:
-            # Use the first matching model (exact match preferred)
             matched_model = list(results.keys())[0]
             all_results[matched_model] = results[matched_model]
+            
+    plot = create_radar_plot(list(all_results.keys()), all_results)
     
     if len(all_results) == 1:
-        # Single model - show card view
         model_name = list(all_results.keys())[0]
-        return format_model_card(model_name, all_results[model_name])
+        return format_model_card(model_name, all_results[model_name]), plot
     elif len(all_results) > 1:
-        # Multiple models - show comparison
-        return format_model_comparison(list(all_results.keys()), all_results)
+        return format_model_comparison(list(all_results.keys()), all_results), plot
     else:
         return """
         <div class="no-results">
             <h3>No results found</h3>
             <p>Try selecting different models</p>
         </div>
-        """
+        """, None
 
 
 def get_model_suggestions(query):
-    """Get model name suggestions for autocomplete."""
     if not query or len(query) < 2:
         return gr.update(choices=[])
     
@@ -185,13 +131,28 @@ def get_model_suggestions(query):
     return gr.update(choices=matches[:15])
 
 
-# Load data at startup
 load_hf_dataset_on_startup()
 
-# Build interface
+initial_leaderboards = get_available_leaderboards()
+initial_leaderboard = initial_leaderboards[0] if initial_leaderboards else None
+
+if initial_leaderboard:
+    _init_df, _init_metadata = get_leaderboard_data(initial_leaderboard)
+    _init_columns = [c for c in _init_df.columns if c != "Model"] if not _init_df.empty else []
+    _init_df_display, _, _init_total_pages = filter_and_paginate(_init_df, "", "Average", None, 1)
+else:
+    _init_df = pd.DataFrame()
+    _init_metadata = {}
+    _init_columns = []
+    _init_df_display = pd.DataFrame()
+    _init_total_pages = 1
+
 with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css()) as demo:
     
-    # Header
+    full_df_state = gr.State(value=_init_df)
+    metadata_state = gr.State(value=_init_metadata)
+    current_page_state = gr.State(value=1)
+    
     gr.HTML("""
         <div class="app-header">
             <div class="logo-mark">E³</div>
@@ -206,83 +167,53 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
     """)
     
     with gr.Tabs():
-        # === TAB 1: Leaderboard View ===
-        with gr.TabItem("📊 Leaderboards"):
-            with gr.Row(elem_classes="controls-bar"):
-                initial_choices = get_available_leaderboards()
-                initial_value = initial_choices[0] if initial_choices else None
-                
-                with gr.Column(scale=2, min_width=200):
-                    leaderboard_selector = gr.Dropdown(
-                        choices=initial_choices,
-                        value=initial_value,
-                        label="Leaderboard",
-                        interactive=True
-                    )
-                with gr.Column(scale=3, min_width=250):
-                    search_box = gr.Textbox(
-                        label="Filter",
-                        placeholder="Filter models...",
-                        show_label=True
-                    )
-                with gr.Column(scale=1, min_width=100):
-                    refresh_btn = gr.Button("↻ Refresh", variant="secondary", size="sm")
-            
-            init_df, init_header, init_metrics, init_page_dropdown, init_prev, init_next, init_sort_cols, init_page_info, init_column_selector = update_leaderboard_table(initial_value, "", 1, "Average", None)
-            
-            header_view = gr.HTML(value=init_header)
-            
-            # Hidden sort state (default to Average)
-            sort_column_dropdown = gr.Dropdown(
-                choices=init_sort_cols.get("choices", []) if hasattr(init_sort_cols, 'get') else [],
-                value=init_sort_cols.get("value") if hasattr(init_sort_cols, 'get') else None,
-                visible=False,
-            )
-            
-            # Column selector
-            with gr.Row(elem_classes="controls-bar"):
-                column_selector = gr.CheckboxGroup(
-                    choices=init_column_selector.get("choices", []) if isinstance(init_column_selector, dict) else [],
-                    value=init_column_selector.get("value", []) if isinstance(init_column_selector, dict) else [],
-                    label="Columns to Display",
-                    interactive=True,
-                    show_label=True,
+        with gr.TabItem("Leaderboards"):
+            with gr.Column(elem_classes="controls-bar"):
+                with gr.Row():
+                    with gr.Column(scale=4, min_width=260):
+                        leaderboard_selector = gr.Dropdown(
+                            choices=initial_leaderboards,
+                            value=initial_leaderboard,
+                            label="Leaderboard",
+                            interactive=True
+                        )
+                    with gr.Column(scale=1, min_width=120):
+                        refresh_btn = gr.Button("↻ Refresh", variant="secondary", size="sm")
+
+                search_box = gr.Textbox(
+                    label="Filter",
+                    placeholder="Filter models...",
+                    show_label=True
                 )
             
+            header_view = gr.HTML(value=format_leaderboard_header(initial_leaderboard, _init_metadata))
+            
+            with gr.Row(elem_classes="column-selector-bar"):
+                with gr.Column(scale=5, min_width=320):
+                    column_selector = gr.Dropdown(
+                        choices=_init_columns,
+                        value=_init_columns,
+                        label="Columns to Display",
+                        multiselect=True,
+                        interactive=True,
+                        elem_classes="column-selector-dropdown"
+                    )
+        
             leaderboard_table = gr.Dataframe(
-                value=init_df,
+                value=_init_df_display,
                 label=None,
                 interactive=False,
                 wrap=False,
                 elem_classes="dataframe",
             )
             
-            # Pagination below table - centered
             with gr.Row(elem_classes="pagination-bar"):
                 prev_btn = gr.Button("←", variant="secondary", size="sm", min_width=60)
-                page_info = gr.Markdown(value=init_page_info, elem_classes="page-info")
+                page_info = gr.Markdown(value=f"1 / {_init_total_pages}", elem_classes="page-info")
                 next_btn = gr.Button("→", variant="secondary", size="sm", min_width=60)
-                # Extract choices and value from gr.update() dict, ensuring value is in choices
-                if isinstance(init_page_dropdown, dict):
-                    page_choices = init_page_dropdown.get("choices", ["1"])
-                    page_value = str(init_page_dropdown.get("value", "1")) if init_page_dropdown.get("value") is not None else "1"
-                    # Ensure value exists in choices
-                    if page_value not in page_choices:
-                        page_value = page_choices[0] if page_choices else "1"
-                    if not page_choices:
-                        page_choices = ["1"]
-                else:
-                    page_choices = ["1"]
-                    page_value = "1"
-                page_dropdown = gr.Dropdown(
-                    choices=page_choices,
-                    value=page_value,
-                    visible=False,
-                )
             
-            metrics_view = gr.HTML(value=init_metrics)
+            metrics_view = gr.HTML(value=format_metric_details(initial_leaderboard, _init_metadata))
         
-        # === TAB 2: Model View ===
         with gr.TabItem("🔍 Model Lookup"):
             gr.Markdown("### Find and compare models across all leaderboards")
             
@@ -315,182 +246,141 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
                 elem_classes="selected-models-group"
             )
             
+            radar_view = gr.Plot(label="Radar Comparison")
             model_card_view = gr.HTML(value=default_compare_html)
     
-    # Submission guide
     with gr.Accordion("📤 How to Submit Data", open=False):
         gr.Markdown("""
-**Submit via GitHub Pull Request:**
-
+Submit via GitHub Pull Request:
 1. Fork [evaleval/every_eval_ever](https://github.com/evaleval/every_eval_ever)
 2. Add JSON files to `data/<leaderboard>/<developer>/<model>/`
-3. Open a PR — automated validation runs on submission
+3. Open a PR - automated validation runs on submission
 4. After merge, data syncs to HuggingFace automatically
 
-[Submission Guide](https://github.com/evaleval/every_eval_ever#contributor-guide) · [JSON Schema](https://github.com/evaleval/every_eval_ever/blob/main/eval.schema.json)
+[Submission Guide](https://github.com/evaleval/every_eval_ever#contributor-guide) - [JSON Schema](https://github.com/evaleval/every_eval_ever/blob/main/eval.schema.json)
         """)
     
-    # === State ===
-    current_page_state = gr.State(value=1)
-    sort_column_state = gr.State(value="Average")
-    
-    def go_prev(current):
-        return max(1, current - 1)
-    
-    def go_next(current):
-        return current + 1
+    def load_leaderboard(leaderboard_name):
+        df, metadata = get_leaderboard_data(leaderboard_name)
+        columns = [c for c in df.columns if c != "Model"] if not df.empty else []
+        df_display, page, total_pages = filter_and_paginate(df, "", "Average", None, 1)
+        
+        return (
+            df,  # full_df_state
+            metadata,  # metadata_state
+            1,  # current_page_state
+            df_display,  # leaderboard_table
+            format_leaderboard_header(leaderboard_name, metadata),  # header_view
+            format_metric_details(leaderboard_name, metadata),  # metrics_view
+            gr.update(choices=columns, value=columns),  # column_selector
+            f"1 / {total_pages}",  # page_info
+        )
     
-    def reset_page():
-        return 1
+    def update_table(full_df, search_query, selected_columns, current_page):
+        df_display, page, total_pages = filter_and_paginate(
+            full_df, search_query, "Average", selected_columns, current_page
+        )
+        return df_display, f"{page} / {total_pages}", page
     
-    def update_table_only(selected_leaderboard, search_query, current_page, sort_column, selected_columns):
-        """Update table without modifying column selector (for column changes)."""
-        result = update_leaderboard_table(selected_leaderboard, search_query, current_page, sort_column, selected_columns)
-        # Return all outputs except the last one (column_selector)
-        return result[:-1]
+    def go_page(full_df, search_query, selected_columns, current_page, delta):
+        new_page = max(1, current_page + delta)
+        df_display, page, total_pages = filter_and_paginate(
+            full_df, search_query, "Average", selected_columns, new_page
+        )
+        return df_display, f"{page} / {total_pages}", page
     
-    # === Leaderboard Events ===
     leaderboard_selector.change(
-        fn=reset_page, outputs=[current_page_state]
-    ).then(
-        fn=lambda: "Average", outputs=[sort_column_state]
-    ).then(
-        fn=lambda: None, outputs=[column_selector]
-    ).then(
-        fn=update_leaderboard_table, 
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector], 
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info, column_selector]
+        fn=load_leaderboard,
+        inputs=[leaderboard_selector],
+        outputs=[full_df_state, metadata_state, current_page_state, leaderboard_table, header_view, metrics_view, column_selector, page_info]
     )
     
     search_box.input(
-        fn=reset_page, outputs=[current_page_state]
-    ).then(
-        fn=update_table_only,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
+        fn=lambda df, q, cols: update_table(df, q, cols, 1),
+        inputs=[full_df_state, search_box, column_selector],
+        outputs=[leaderboard_table, page_info, current_page_state]
     )
     
-    sort_column_dropdown.change(
-        fn=lambda col: col,
-        inputs=[sort_column_dropdown],
-        outputs=[sort_column_state]
-    ).then(
-        fn=reset_page, outputs=[current_page_state]
-    ).then(
-        fn=update_table_only,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
-    )
+    def on_column_change(df, q, cols):
+        if not cols:
+            cols = [c for c in df.columns if c != "Model"]
+        return update_table(df, q, cols, 1)
     
     column_selector.change(
-        fn=reset_page, outputs=[current_page_state]
-    ).then(
-        fn=update_table_only,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
-    )
-    
-    page_dropdown.change(
-        fn=lambda p: int(p) if p else 1,
-        inputs=[page_dropdown],
-        outputs=[current_page_state]
-    ).then(
-        fn=update_table_only,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
+        fn=on_column_change,
+        inputs=[full_df_state, search_box, column_selector],
+        outputs=[leaderboard_table, page_info, current_page_state]
     )
     
     prev_btn.click(
-        fn=go_prev, inputs=[current_page_state], outputs=[current_page_state]
-    ).then(
-        fn=update_table_only,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
+        fn=lambda df, q, cols, p: go_page(df, q, cols, p, -1),
+        inputs=[full_df_state, search_box, column_selector, current_page_state],
+        outputs=[leaderboard_table, page_info, current_page_state]
     )
     
     next_btn.click(
-        fn=go_next, inputs=[current_page_state], outputs=[current_page_state]
-    ).then(
-        fn=update_table_only,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
+        fn=lambda df, q, cols, p: go_page(df, q, cols, p, 1),
+        inputs=[full_df_state, search_box, column_selector, current_page_state],
+        outputs=[leaderboard_table, page_info, current_page_state]
     )
     
     refresh_btn.click(
-        fn=lambda: gr.Dropdown(choices=get_available_leaderboards()),
+        fn=lambda: (clear_cache(), gr.update(choices=get_available_leaderboards()))[1],
         outputs=[leaderboard_selector]
-    ).then(
-        fn=lambda: clear_cache()
-    ).then(
-        fn=reset_page, outputs=[current_page_state]
-    ).then(
-        fn=lambda: "Average", outputs=[sort_column_state]
-    ).then(
-        fn=lambda: None, outputs=[column_selector]
-    ).then(
-        fn=update_leaderboard_table,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state, column_selector],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info, column_selector]
     )
     
-    # === Model Search Events ===
     def add_model_and_compare(selected_model, current_selected):
-        """Add a model and auto-compare."""
         if not selected_model:
-            comparison_html = compare_models(current_selected) if current_selected else default_compare_html
+            comparison_html, plot = compare_models(current_selected) if current_selected else (default_compare_html, None)
             return (
                 current_selected,
                 gr.update(value=None),
                 gr.update(choices=current_selected, value=current_selected),
-                comparison_html
+                comparison_html,
+                plot
             )
         
-        if current_selected is None:
-            current_selected = []
-        
         if selected_model not in current_selected:
             current_selected = current_selected + [selected_model]
         
-        comparison_html = compare_models(current_selected)
+        comparison_html, plot = compare_models(current_selected)
         
         return (
             current_selected,
             gr.update(value=None),
             gr.update(choices=current_selected, value=current_selected),
-            comparison_html
+            comparison_html,
+            plot
         )
     
     def update_selection(selected_list):
-        """Update selection from checkbox changes."""
-        selected_list = selected_list or []
-        comparison_html = compare_models(selected_list) if selected_list else default_compare_html
-        return selected_list, comparison_html
+        comparison_html, plot = compare_models(selected_list) if selected_list else (default_compare_html, None)
+        return selected_list, gr.update(choices=selected_list, value=selected_list), comparison_html, plot
     
     def clear_all_models():
-        """Clear all selected models."""
         return (
             [],
             gr.update(value=None),
             gr.update(choices=[], value=[]),
-            default_compare_html
+            default_compare_html,
+            None
         )
     
-    # Select from dropdown adds model and auto-compares
     model_dropdown.select(
         fn=add_model_and_compare,
         inputs=[model_dropdown, selected_models_state],
-        outputs=[selected_models_state, model_dropdown, selected_models_group, model_card_view]
+        outputs=[selected_models_state, model_dropdown, selected_models_group, model_card_view, radar_view]
     )
     
     selected_models_group.change(
         fn=update_selection,
         inputs=[selected_models_group],
-        outputs=[selected_models_state, model_card_view]
+        outputs=[selected_models_state, selected_models_group, model_card_view, radar_view]
     )
     
     clear_models_btn.click(
         fn=clear_all_models,
-        outputs=[selected_models_state, model_dropdown, selected_models_group, model_card_view]
+        outputs=[selected_models_state, model_dropdown, selected_models_group, model_card_view, radar_view]
     )
     
     DATA_DIR.mkdir(exist_ok=True)

pyproject.toml

@@ -1,10 +1,16 @@
 [project]
-name = "eee-test"
-version = "0.1.0"
-description = "Add your description here"
+authors = [
+    { name = "Sree Harsha Nelaturu", email = "nelaturu.harsha@gmail.com" },
+    { name = "Every Eval Ever Team"}
+]
+name = "e3_space"
+version = "0.1.1"
+description = "Space for every eval ever in the EvalEval Coalition."
 readme = "README.md"
-requires-python = ">=3.11"
+requires-python = ">=3.13"
 dependencies = [
-    "gradio>=5.49.1",
+    "datasets>=4.4.1",
+    "gradio>=6.1.0",
     "pandas>=2.3.2",
+    "plotly>=6.5.0",
 ]

requirements.txt

@@ -0,0 +1,211 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile pyproject.toml -o requirements.txt
+aiofiles==24.1.0
+    # via gradio
+aiohappyeyeballs==2.6.1
+    # via aiohttp
+aiohttp==3.13.2
+    # via fsspec
+aiosignal==1.4.0
+    # via aiohttp
+annotated-doc==0.0.4
+    # via fastapi
+annotated-types==0.7.0
+    # via pydantic
+anyio==4.12.0
+    # via
+    #   gradio
+    #   httpx
+    #   starlette
+attrs==25.4.0
+    # via aiohttp
+audioop-lts==0.2.2
+    # via gradio
+brotli==1.2.0
+    # via gradio
+certifi==2025.11.12
+    # via
+    #   httpcore
+    #   httpx
+    #   requests
+charset-normalizer==3.4.4
+    # via requests
+click==8.3.1
+    # via
+    #   typer
+    #   typer-slim
+    #   uvicorn
+datasets==4.4.1
+    # via e3-space (pyproject.toml)
+dill==0.4.0
+    # via
+    #   datasets
+    #   multiprocess
+fastapi==0.124.2
+    # via gradio
+ffmpy==1.0.0
+    # via gradio
+filelock==3.20.0
+    # via
+    #   datasets
+    #   huggingface-hub
+frozenlist==1.8.0
+    # via
+    #   aiohttp
+    #   aiosignal
+fsspec==2025.10.0
+    # via
+    #   datasets
+    #   gradio-client
+    #   huggingface-hub
+gradio==6.1.0
+    # via e3-space (pyproject.toml)
+gradio-client==2.0.1
+    # via gradio
+groovy==0.1.2
+    # via gradio
+h11==0.16.0
+    # via
+    #   httpcore
+    #   uvicorn
+hf-xet==1.2.0
+    # via huggingface-hub
+httpcore==1.0.9
+    # via httpx
+httpx==0.28.1
+    # via
+    #   datasets
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   safehttpx
+huggingface-hub==1.2.2
+    # via
+    #   datasets
+    #   gradio
+    #   gradio-client
+idna==3.11
+    # via
+    #   anyio
+    #   httpx
+    #   requests
+    #   yarl
+jinja2==3.1.6
+    # via gradio
+markdown-it-py==4.0.0
+    # via rich
+markupsafe==3.0.3
+    # via
+    #   gradio
+    #   jinja2
+mdurl==0.1.2
+    # via markdown-it-py
+multidict==6.7.0
+    # via
+    #   aiohttp
+    #   yarl
+multiprocess==0.70.18
+    # via datasets
+narwhals==2.13.0
+    # via plotly
+numpy==2.3.5
+    # via
+    #   datasets
+    #   gradio
+    #   pandas
+orjson==3.11.5
+    # via gradio
+packaging==25.0
+    # via
+    #   datasets
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   plotly
+pandas==2.3.3
+    # via
+    #   e3-space (pyproject.toml)
+    #   datasets
+    #   gradio
+pillow==12.0.0
+    # via gradio
+plotly==6.5.0
+    # via e3-space (pyproject.toml)
+propcache==0.4.1
+    # via
+    #   aiohttp
+    #   yarl
+pyarrow==22.0.0
+    # via datasets
+pydantic==2.12.4
+    # via
+    #   fastapi
+    #   gradio
+pydantic-core==2.41.5
+    # via pydantic
+pydub==0.25.1
+    # via gradio
+pygments==2.19.2
+    # via rich
+python-dateutil==2.9.0.post0
+    # via pandas
+python-multipart==0.0.20
+    # via gradio
+pytz==2025.2
+    # via pandas
+pyyaml==6.0.3
+    # via
+    #   datasets
+    #   gradio
+    #   huggingface-hub
+requests==2.32.5
+    # via datasets
+rich==14.2.0
+    # via typer
+safehttpx==0.1.7
+    # via gradio
+semantic-version==2.10.0
+    # via gradio
+shellingham==1.5.4
+    # via
+    #   huggingface-hub
+    #   typer
+six==1.17.0
+    # via python-dateutil
+starlette==0.50.0
+    # via
+    #   fastapi
+    #   gradio
+tomlkit==0.13.3
+    # via gradio
+tqdm==4.67.1
+    # via
+    #   datasets
+    #   huggingface-hub
+typer==0.20.0
+    # via gradio
+typer-slim==0.20.0
+    # via huggingface-hub
+typing-extensions==4.15.0
+    # via
+    #   fastapi
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   pydantic
+    #   pydantic-core
+    #   typer
+    #   typer-slim
+    #   typing-inspection
+typing-inspection==0.4.2
+    # via pydantic
+tzdata==2025.2
+    # via pandas
+urllib3==2.6.1
+    # via requests
+uvicorn==0.38.0
+    # via gradio
+xxhash==3.6.0
+    # via datasets
+yarl==1.22.0
+    # via aiohttp

ui_components.py

@@ -1,1150 +1,783 @@
-"""
-UI Components: Themes, CSS, and HTML formatters for the Gradio interface.
-Nord color theme with balanced contrast.
-"""
 import gradio as gr
+import plotly.graph_objects as go
+from data_loader import get_eval_metadata
 
 
 def get_theme():
-    """Returns the Nord-themed Gradio theme, locked to dark mode."""
     return gr.themes.Base(
         primary_hue="blue",
         neutral_hue="slate",
-        font=[gr.themes.GoogleFont("DM Sans"), "system-ui", "sans-serif"],
-        font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
     ).set(
-        body_background_fill="#2E3440",
-        body_background_fill_dark="#2E3440",
-        body_text_color="#ECEFF4",
-        body_text_color_dark="#ECEFF4",
-        body_text_color_subdued="#4C566A",
-        body_text_color_subdued_dark="#4C566A",
-        block_background_fill="#3B4252",
-        block_background_fill_dark="#3B4252",
-        block_border_width="1px",
-        block_border_color="#434C5E",
-        block_border_color_dark="#434C5E",
-        block_label_text_color="#D8DEE9",
-        block_label_text_color_dark="#D8DEE9",
-        block_title_text_color="#ECEFF4",
-        block_title_text_color_dark="#ECEFF4",
-        input_background_fill="#2E3440",
-        input_background_fill_dark="#2E3440",
-        input_border_color="#4C566A",
-        input_border_color_dark="#4C566A",
-        button_primary_background_fill="#88C0D0",
-        button_primary_background_fill_dark="#88C0D0",
-        button_primary_text_color="#2E3440",
-        button_primary_text_color_dark="#2E3440",
-        button_secondary_background_fill="#434C5E",
-        button_secondary_background_fill_dark="#434C5E",
-        button_secondary_text_color="#ECEFF4",
-        button_secondary_text_color_dark="#ECEFF4",
+        body_background_fill="#f5f5f5",
+        body_text_color="#0a0a0a",
+        body_text_color_subdued="#525252",
+        block_background_fill="#ffffff",
+        block_border_color="#e5e5e5",
+        block_label_text_color="#525252",
+        block_title_text_color="#0a0a0a",
+        input_background_fill="#ffffff",
+        input_border_color="#e5e5e5",
+        button_primary_background_fill="#3b82f6",
+        button_primary_text_color="#ffffff",
+        button_secondary_background_fill="#ffffff",
+        button_secondary_text_color="#0a0a0a",
+        button_secondary_border_color="#e5e5e5",
     )
 
 
 def get_custom_css():
-    """Returns custom CSS with Nord colors."""
     return """
-/* === Nord Theme ===
-   Polar Night: #2E3440 (bg), #3B4252 (surface), #434C5E, #4C566A
-   Snow Storm:  #D8DEE9, #E5E9F0, #ECEFF4
-   Frost:       #8FBCBB, #88C0D0, #81A1C1, #5E81AC
-   Aurora:      #BF616A, #D08770, #EBCB8B, #A3BE8C, #B48EAD
-*/
-
-/* Lock the UI to dark Nord regardless of OS preference */
 :root {
-    color-scheme: dark;
-    background-color: #2E3440;
+    --brand-black: #0a0a0a;
+    --brand-dark: #1a1a1a;
+    --brand-gray: #2a2a2a;
+    --brand-light: #f5f5f5;
+    --brand-accent: #3b82f6;
 }
 
-body {
-    background: #2E3440 !important;
-    color: #ECEFF4 !important;
+body, .gradio-container {
+    background: var(--brand-light) !important;
+    color: var(--brand-black) !important;
 }
 
-/* === Base === */
 .gradio-container {
-    max-width: 100% !important;
-    margin: 0 !important;
-    padding: 1.25rem 2.5rem 2rem !important;
-    background: #2E3440 !important;
-    color: #ECEFF4 !important;
-    font-family: 'DM Sans', system-ui, sans-serif !important;
-    font-size: 16px !important;
+    max-width: 100%;
+    padding: 1.25rem 2.5rem 2rem;
+}
+
+.gradio-container *:focus-visible {
+    outline: none !important;
+    box-shadow: inset 0 0 0 1.5px #3b82f6 !important;
+}
+
+.gradio-container .block,
+.gradio-container .wrap,
+.gradio-container .form,
+.gradio-container .container {
+    box-shadow: none !important;
 }
 
-/* === Header === */
 .app-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
-    padding: 1.25rem 1.5rem;
-    background: #3B4252;
-    border: 1px solid #434C5E;
+    padding: 1rem 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 12px;
 }
 
-.app-header .logo-mark {
+.logo-mark {
     width: 48px;
     height: 48px;
-    background: linear-gradient(135deg, #88C0D0 0%, #81A1C1 100%);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: 1.1rem;
-    color: #2E3440;
-}
-
-.app-header .brand {
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-}
-
-.app-header h1 {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #ECEFF4;
-    letter-spacing: -0.02em;
-}
-
-.app-header .tagline {
-    color: #D8DEE9;
-    font-size: 0.85rem;
-}
-
-.app-header .header-right {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.app-header .version-badge {
-    background: rgba(136, 192, 208, 0.2);
-    border: 1px solid rgba(136, 192, 208, 0.4);
-    border-radius: 6px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.7rem;
-    font-family: 'JetBrains Mono', monospace;
-    color: #88C0D0;
-}
-
-/* === Tabs === */
-.tabs {
-    border: none !important;
-    background: transparent !important;
-}
-
-.tab-nav {
-    background: #3B4252 !important;
-    border: 1px solid #434C5E !important;
-    border-radius: 10px !important;
-    padding: 0.25rem !important;
-    gap: 0.25rem !important;
-    margin-bottom: 1.25rem !important;
-    display: inline-flex !important;
-}
-
-.tab-nav button {
-    background: transparent !important;
-    border: none !important;
-    color: #D8DEE9 !important;
-    padding: 0.75rem 1.5rem !important;
-    font-size: 0.95rem !important;
-    font-weight: 500 !important;
-    border-radius: 8px !important;
-    transition: all 0.15s ease !important;
-}
-
-.tab-nav button.selected {
-    color: #2E3440 !important;
-    background: #88C0D0 !important;
-}
-
-.tab-nav button:hover:not(.selected) {
-    background: #434C5E !important;
-    color: #ECEFF4 !important;
+    color: #ffffff;
 }
 
-.tabitem {
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
-}
+.brand h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #0a0a0a; }
+.brand .tagline { color: #525252; font-size: 0.9rem; }
+.header-right { margin-left: auto; }
 
-/* === Controls bar === */
-.controls-bar {
-    background: #3B4252 !important;
-    border: 1px solid #434C5E !important;
-    border-radius: 10px !important;
-    padding: 0.75rem 1.25rem !important;
-    margin-bottom: 1rem !important;
-    gap: 0.75rem !important;
-}
-
-.controls-bar label {
-    font-size: 0.75rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.04em !important;
-    color: #D8DEE9 !important;
-    font-weight: 500 !important;
+.version-badge {
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid #3b82f6;
+    border-radius: 8px;
+    padding: 0.35rem 0.6rem;
+    font-size: 0.78rem;
+    color: #3b82f6;
 }
 
-/* === Info banner === */
 .info-banner {
-    background: #3B4252 !important;
-    border: 1px solid #434C5E !important;
-    border-left: 3px solid #88C0D0 !important;
-    border-radius: 0 10px 10px 0 !important;
-    padding: 0.75rem 1rem !important;
-    margin-bottom: 1rem !important;
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-left: 3px solid #3b82f6;
+    border-radius: 10px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
 }
 
-.info-banner h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #ECEFF4;
-}
+.info-banner h3 { margin: 0; font-weight: 600; color: #0a0a0a; }
 
-.info-banner .eval-tags {
+.leaderboard-header {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
     flex-wrap: wrap;
-    gap: 0.375rem;
-}
-
-.info-banner .eval-tag {
-    background: rgba(143, 188, 187, 0.15);
-    border: 1px solid rgba(143, 188, 187, 0.3);
-    border-radius: 4px;
-    padding: 0.3rem 0.6rem;
-    font-size: 0.8rem;
-    font-family: 'JetBrains Mono', monospace;
-    color: #8FBCBB;
-}
-
-/* === Dataframe - seamless styling === */
-.dataframe,
-.dataframe > div,
-.dataframe > div > div,
-.dataframe .table-wrap,
-.dataframe .svelte-1gfkn6j {
-    background: #2E3440 !important;
-    border: none !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-}
-
-.dataframe table {
-    width: 100% !important;
-    border-collapse: collapse !important;
-    font-size: 0.95rem !important;
-    table-layout: auto !important;
-    background: #2E3440 !important;
-}
-
-.dataframe thead,
-.dataframe thead tr {
-    background: #2E3440 !important;
-    position: sticky;
-    top: 0;
-    z-index: 10;
+    margin-bottom: 0.4rem;
 }
 
-.dataframe thead th {
-    padding: 0.875rem 1rem !important;
-    font-weight: 600 !important;
-    font-size: 0.75rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-    color: #81A1C1 !important;
-    border-bottom: 1px solid #434C5E !important;
-    border-top: none !important;
-    text-align: left !important;
-    background: #2E3440 !important;
-}
-
-.dataframe tbody,
-.dataframe tbody tr {
-    background: #2E3440 !important;
-}
-
-.dataframe tbody tr {
-    border-bottom: 1px solid #3B4252 !important;
-}
-
-.dataframe tbody tr:hover {
-    background: rgba(136, 192, 208, 0.04) !important;
-}
-
-.dataframe tbody td {
-    padding: 0.75rem 1rem !important;
-    color: #E5E9F0 !important;
-    background: #2E3440 !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    border: none !important;
-}
-
-/* === Pagination bar === */
-.pagination-bar {
-    margin-top: 1rem !important;
-    padding: 1rem 0 !important;
-    border-top: 1px solid #3B4252 !important;
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    gap: 1rem !important;
-}
-
-.page-info {
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 1rem !important;
-    color: #D8DEE9 !important;
-    min-width: 80px !important;
-    text-align: center !important;
-}
-
-/* Model name - white, readable */
-.dataframe tbody td:first-child {
-    font-weight: 500 !important;
-    color: #ECEFF4 !important;
-    white-space: nowrap !important;
-}
-
-/* All other columns - use monospace for numbers */
-.dataframe tbody td:not(:first-child) {
-    font-family: 'JetBrains Mono', monospace !important;
-    color: #8FBCBB !important;
-    text-align: left !important;
-}
-
-.dataframe tbody td:nth-child(2) {
-    color: #88C0D0 !important;
-    white-space: nowrap !important;
-}
-
-.dataframe tbody td:nth-child(3) {
-    color: #D08770 !important;
-}
-
-.dataframe tbody td:nth-child(4) {
-    font-weight: 600 !important;
-    color: #A3BE8C !important;
-}
-
-.dataframe tbody td:nth-child(n+5) {
-    white-space: nowrap !important;
+.lb-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: #0a0a0a;
+    margin: 0;
+    line-height: 1.35;
 }
 
-/* === Status text === */
-.status-text {
-    font-size: 0.9rem !important;
-    color: #D8DEE9 !important;
-    padding: 0.5rem 0 !important;
-    font-family: 'JetBrains Mono', monospace !important;
+.lb-by {
+    font-size: 0.9rem;
+    color: #525252;
+    margin: 0.1rem 0 0 0;
+    line-height: 1.35;
 }
 
-/* === Model Card === */
-.model-card-container {
+.lb-meta {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 0.1rem;
 }
 
-.model-card-header {
-    background: #3B4252;
-    border: 1px solid #434C5E;
-    border-radius: 12px;
-    padding: 1.5rem 2rem;
-}
+.eval-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.eval-tags { margin-top: 0.35rem; }
 
-.model-card-header h2 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.5rem;
+.eval-tag {
+    border-radius: 10px;
+    padding: 0.3rem 0.65rem;
+    font-size: 0.82rem;
     font-weight: 600;
-    color: #ECEFF4;
+    color: #0a0a0a;
+    border: 1px solid #e5e5e5;
+    background: #f8fafc;
 }
 
-.model-card-header .model-meta {
-    display: flex;
-    gap: 1.5rem;
-    color: #D8DEE9;
-    font-size: 0.95rem;
-}
+.eval-tag:nth-child(5n + 1) { border-color: #3b82f6; background: rgba(59, 130, 246, 0.12); color: #0a1d4a; }
+.eval-tag:nth-child(5n + 2) { border-color: #10b981; background: rgba(16, 185, 129, 0.12); color: #0b3b2b; }
+.eval-tag:nth-child(5n + 3) { border-color: #f97316; background: rgba(249, 115, 22, 0.12); color: #4b1f07; }
+.eval-tag:nth-child(5n + 4) { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.12); color: #2f0f5a; }
+.eval-tag:nth-child(5n)     { border-color: #06b6d4; background: rgba(6, 182, 212, 0.12); color: #053f46; }
 
-.model-card-header .model-meta strong {
-    color: #8FBCBB;
+.source-link {
+    font-size: 0.75rem;
+    color: #3b82f6;
+    text-decoration: none;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #3b82f6;
+    border-radius: 6px;
 }
 
-.leaderboard-section {
-    background: #3B4252;
-    border: 1px solid #434C5E;
-    border-radius: 10px;
-    overflow: hidden;
-}
+.source-link:hover { background: rgba(59, 130, 246, 0.1); }
 
-.leaderboard-section-header {
-    background: #434C5E;
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid #4C566A;
+.pagination-bar {
+    margin-top: 0.75rem;
+    padding: 0.85rem 0 0.25rem;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
+    gap: 0.85rem;
 }
 
-.leaderboard-section-header h3 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #88C0D0;
-}
+.page-info { font-size: 1rem; min-width: 80px; text-align: center; color: #0a0a0a; }
 
-.leaderboard-section-header .lb-avg {
-    background: rgba(163, 190, 140, 0.15);
-    border: 1px solid rgba(163, 190, 140, 0.3);
-    border-radius: 8px;
-    padding: 0.5rem 1rem;
-    font-size: 0.85rem;
-    color: #D8DEE9;
+.metrics-section {
+    margin-top: 1.25rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid #e5e5e5;
 }
 
-.leaderboard-section-header .lb-avg strong {
-    color: #A3BE8C;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 1.1rem;
+.metrics-section h3 {
+    font-size: 0.9rem;
     font-weight: 700;
-}
-
-.scores-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 1px;
-    background: #434C5E;
-}
-
-.score-item {
-    background: #3B4252;
-    padding: 1rem 1.25rem;
-}
-
-.score-item .score-label {
-    font-size: 0.8rem;
+    color: #525252;
+    margin: 0 0 0.9rem 0;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: #D8DEE9;
-    margin-bottom: 0.375rem;
-}
-
-.score-item .score-value {
-    font-size: 1.5rem;
-    font-weight: 600;
-    font-family: 'JetBrains Mono', monospace;
-    color: #A3BE8C;
-}
-
-.score-item.highlight .score-value {
-    color: #88C0D0;
-}
-
-.no-results {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: #D8DEE9;
-}
-
-.no-results h3 {
-    color: #ECEFF4;
-    margin-bottom: 0.5rem;
-}
-
-
-/* === New Comparison View === */
-.comparison-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.comparison-summary {
-    background: #3B4252;
-    border: 1px solid #434C5E;
-    border-radius: 12px;
-    padding: 1.5rem;
-}
-
-.comparison-summary h2 {
-    margin: 0 0 1rem 0;
-    color: #ECEFF4;
-    font-size: 1.25rem;
-}
-
-.summary-cards {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-.summary-card {
-    flex: 1;
-    min-width: 200px;
-    background: #2E3440;
-    border-radius: 8px;
-    padding: 1rem;
 }
 
-.summary-card-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 0.75rem;
 }
 
-.model-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+.metrics-grid .metric-card {
+    align-self: start;
 }
 
-.model-name {
-    font-weight: 600;
-    color: #ECEFF4;
-    font-size: 0.9rem;
+.metric-card {
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 10px;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.summary-card-body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    position: relative;
 }
 
-.summary-stat {
+.metric-card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 0.85rem 1rem;
+    cursor: pointer;
 }
 
-.summary-stat .stat-label {
-    font-size: 0.75rem;
-    color: #D8DEE9;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.metric-card-header:hover {
+    background: #f9f9f9;
 }
 
-.summary-stat .stat-value {
-    font-family: 'JetBrains Mono', monospace;
-    color: #8FBCBB;
-}
+.metric-card-name { font-weight: 600; color: #0a0a0a; }
+.metric-card-direction { font-size: 0.82rem; color: #525252; }
+.metric-card-direction .arrow { color: #22c55e; font-weight: 700; }
 
-.summary-stat.primary .stat-value.large {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #A3BE8C;
+.metric-card-body {
+    display: none;
+    padding: 0.85rem 1rem;
+    border-top: 1px solid #e5e5e5;
+    color: #0a0a0a;
 }
 
-.leaderboard-comparison-card {
-    background: #3B4252;
-    border: 1px solid #434C5E;
-    border-radius: 12px;
-    overflow: hidden;
+.metric-card input.metric-toggle {
+    display: none;
 }
 
-.lb-card-header {
-    background: #434C5E;
-    padding: 0.875rem 1.25rem;
+.metric-card input.metric-toggle:checked ~ .metric-card-body {
+    display: block;
 }
 
-.lb-card-header h3 {
-    margin: 0;
-    color: #88C0D0;
-    font-size: 1rem;
-    font-weight: 600;
+.metric-card input.metric-toggle:checked ~ .metric-card-header {
+    background: #f9f9f9;
+    border-bottom: 1px solid #e5e5e5;
 }
 
-.lb-card-body {
-    padding: 1rem 1.25rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.metric-comparison {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
+.metric-card input.metric-toggle:checked ~ .metric-card-header .metric-card-name,
+.metric-card input.metric-toggle:checked ~ .metric-card-header .metric-card-direction {
+    color: #0a0a0a;
 }
 
-.metric-name-row {
-    margin-bottom: 0.25rem;
+/* Ensure multiple cards can be open at once and are closable */
+.metric-card input.metric-toggle:not(:checked) ~ .metric-card-body {
+    display: none;
 }
 
-.metric-title {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #ECEFF4;
+.metric-type-badge {
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    padding: 0.2rem 0.45rem;
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid #3b82f6;
+    border-radius: 6px;
+    color: #3b82f6;
+}
+
+.heatmap-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+.heatmap-table th { padding: 0.55rem 0.65rem; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; color: #525252; background: #f5f5f5; }
+.heatmap-table td { padding: 0.45rem 0.65rem; text-align: center; border-bottom: 1px solid #e5e5e5; }
+.heatmap-table td.metric-name { text-align: left; font-weight: 600; color: #0a0a0a; }
+.heatmap-table td.score-cell { font-weight: 600; }
+.heatmap-table td.score-cell.best { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
+.heatmap-table td.score-cell.good { background: rgba(34, 197, 94, 0.08); color: #16a34a; }
+.heatmap-table td.score-cell.mid { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
+.heatmap-table td.score-cell.low { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
+.heatmap-table td.score-cell.worst { background: rgba(239, 68, 68, 0.18); color: #b91c1c; }
+.heatmap-table td.score-cell.na { color: #525252; font-style: italic; }
+
+/* Model chips */
+.selected-models-group label {
+    display: inline-flex !important;
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 16px;
+    padding: 0.35rem 0.85rem;
+    font-size: 0.88rem;
+    color: #0a0a0a;
+    cursor: pointer;
+    margin: 0.18rem 0.32rem 0.18rem 0 !important;
 }
 
-.metric-title.sub {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: #D8DEE9;
-}
+.selected-models-group input[type="checkbox"] { display: none; }
 
-.model-score-row {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0;
-}
+.no-results { text-align: center; padding: 2.5rem 1rem; color: #525252; }
 
-.model-score-row.compact {
-    padding: 0.25rem 0;
-}
+.gradio-container footer { display: none; }
 
-.model-score-row.best-score {
-    background: rgba(163, 190, 140, 0.1);
-    border-radius: 4px;
-    padding-left: 0.5rem;
-    margin-left: -0.5rem;
-}
+.block, .form, .wrap, .container { background: #ffffff !important; }
 
-.model-score-row.no-data {
-    opacity: 0.5;
+body, .gradio-container, p, span, div, h1, h2, h3, h4, h5, h6, label, td, th {
+    color: #0a0a0a !important;
 }
 
-.model-indicator {
-    width: 8px;
-    height: 8px;
-    border-radius: 2px;
-    flex-shrink: 0;
+.label-wrap span, .prose, .markdown, .prose p, .prose li, .markdown p, .markdown li {
+    color: #525252 !important;
 }
 
-.model-indicator.small {
-    width: 6px;
-    height: 6px;
+input, textarea, select {
+    background: #ffffff !important;
+    color: #0a0a0a !important;
+    border: 1px solid #e5e5e5 !important;
+    border-radius: 8px !important;
 }
 
-.score-bar-container {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    height: 24px;
-    background: #2E3440;
-    border-radius: 4px;
-    padding: 0 0.5rem;
-    position: relative;
+input::placeholder, textarea::placeholder {
+    color: #a1a1a1 !important;
 }
 
-.score-bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    border-radius: 4px;
-    opacity: 0.3;
+input:focus, textarea:focus, select:focus {
+    border-color: #3b82f6 !important;
+    outline: none !important;
+    box-shadow: inset 0 0 0 1.5px #3b82f6 !important;
 }
 
-.score-bar.thin {
-    opacity: 0.2;
+select, .wrap select, .wrap input, input[type="text"], textarea {
+    min-height: 44px !important;
+    padding: 0.55rem 0.75rem !important;
+    font-size: 0.96rem !important;
 }
 
-.score-value {
-    position: relative;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: #ECEFF4;
-    z-index: 1;
+button {
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    transition: all 0.15s ease !important;
 }
 
-.score-value.small {
-    font-size: 0.8rem;
-    font-weight: 500;
+button.primary, button[variant="primary"] {
+    background: #3b82f6 !important;
+    color: #ffffff !important;
+    border: none !important;
 }
 
-.score-value.dim {
-    color: #4C566A;
+button.primary:hover, button[variant="primary"]:hover {
+    background: #2563eb !important;
 }
 
-/* === Selected Models Chips === */
-.selected-models-group label {
-    display: inline-flex !important;
-    align-items: center !important;
-    background: #434C5E;
-    border: 1px solid #4C566A;
-    border-radius: 16px;
-    padding: 0.35rem 0.85rem;
-    font-size: 0.85rem;
-    color: #ECEFF4;
-    gap: 0.4rem;
-    cursor: pointer;
-    margin: 0.15rem 0.3rem 0.15rem 0 !important;
+button.secondary, button[variant="secondary"], button:not(.primary):not([variant="primary"]) {
+    background: #ffffff !important;
+    color: #0a0a0a !important;
+    border: 1px solid #e5e5e5 !important;
 }
 
-.selected-models-group label span::before {
-    content: "×";
-    font-size: 0.75rem;
-    color: #EBCB8B;
-    opacity: 0;
-    transition: opacity 0.15s ease;
+button.secondary:hover, button[variant="secondary"]:hover {
+    border-color: #3b82f6 !important;
+    background: #f5f5f5 !important;
 }
 
-.selected-models-group label:hover span::before {
-    opacity: 1;
+.tab-nav, .tabs {
+    border-bottom: 1px solid #e5e5e5 !important;
 }
 
-.selected-models-group input[type="checkbox"] {
-    display: none;
+.tab-nav button, .tabs button {
+    color: #525252 !important;
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 2px solid transparent !important;
 }
 
-/* === Heat Map Table === */
-.heatmap-table-wrapper {
-    overflow-x: auto;
-    margin-top: 1rem;
+.tab-nav button.selected, .tabs button.selected {
+    color: #3b82f6 !important;
+    border-bottom-color: #3b82f6 !important;
 }
 
-.heatmap-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.85rem;
+.wrap, .secondary-wrap, .primary-wrap {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding: 0 !important;
 }
 
-.heatmap-table thead {
-    position: sticky;
-    top: 0;
-    z-index: 10;
+ul[role="listbox"], .dropdown, .options {
+    background: #ffffff !important;
+    border: 1px solid #e5e5e5 !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
 }
 
-.heatmap-table th {
-    background: #434C5E;
-    padding: 0.625rem 0.75rem;
-    font-weight: 600;
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #81A1C1;
-    text-align: left;
-    border-bottom: 2px solid #4C566A;
-    white-space: nowrap;
+ul[role="listbox"] li, .dropdown li, .options li {
+    color: #0a0a0a !important;
 }
 
-.heatmap-table th.metric-header {
-    min-width: 120px;
+ul[role="listbox"] li:hover, .dropdown li:hover, .options li:hover {
+    background: #f5f5f5 !important;
 }
 
-.heatmap-table th.model-header {
-    text-align: center;
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
+ul[role="listbox"] li.active, .dropdown li.active, .options li.active {
+    background: #f5f5f5 !important;
+    color: #0a0a0a !important;
 }
 
-.heatmap-table td {
-    padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid #3B4252;
+ul[role="listbox"] li.selected, .dropdown li.selected {
+    background: rgba(59, 130, 246, 0.1) !important;
+    color: #3b82f6 !important;
 }
 
-.heatmap-table td.metric-name {
-    font-weight: 500;
-    color: #D8DEE9;
-    background: #2E3440;
+.accordion {
+    border: 1px solid #e5e5e5 !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
 }
 
-.heatmap-table td.score-cell {
-    text-align: center;
-    font-family: 'JetBrains Mono', monospace;
-    font-weight: 500;
-    transition: all 0.15s ease;
+.accordion > button {
+    color: #0a0a0a !important;
 }
 
-.heatmap-table td.score-cell.best {
-    background: rgba(163, 190, 140, 0.25);
-    color: #A3BE8C;
-    font-weight: 700;
+.selected-models-group label, .checkbox-group label {
+    display: inline-flex !important;
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 20px !important;
+    padding: 0.4rem 0.9rem !important;
+    font-size: 0.88rem !important;
+    color: #0a0a0a !important;
+    cursor: pointer !important;
+    margin: 0.2rem !important;
+    transition: all 0.15s ease !important;
 }
 
-.heatmap-table td.score-cell.good {
-    background: rgba(163, 190, 140, 0.12);
-    color: #A3BE8C;
+.selected-models-group label:hover, .checkbox-group label:hover {
+    border-color: #3b82f6 !important;
+    background: #f5f5f5 !important;
 }
 
-.heatmap-table td.score-cell.mid {
-    background: rgba(235, 203, 139, 0.12);
-    color: #EBCB8B;
+.selected-models-group input[type="checkbox"], .checkbox-group input[type="checkbox"] {
+    display: none !important;
 }
 
-.heatmap-table td.score-cell.low {
-    background: rgba(208, 135, 112, 0.12);
-    color: #D08770;
+table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    background: #ffffff !important;
 }
 
-.heatmap-table td.score-cell.worst {
-    background: rgba(191, 97, 106, 0.15);
-    color: #BF616A;
+table th {
+    background: #f5f5f5 !important;
+    color: #525252 !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    font-size: 0.75rem !important;
+    padding: 0.75rem !important;
+    border-bottom: 1px solid #e5e5e5 !important;
+    text-align: left !important;
 }
 
-.heatmap-table td.score-cell.na {
-    color: #4C566A;
-    font-style: italic;
+table td {
+    padding: 0.65rem 0.75rem !important;
+    border-bottom: 1px solid #e5e5e5 !important;
+    color: #0a0a0a !important;
 }
 
-.heatmap-table tr.avg-row {
-    background: rgba(136, 192, 208, 0.08);
+table tr:hover td {
+    background: #f9f9f9 !important;
 }
 
-.heatmap-table tr.avg-row td.metric-name {
-    font-weight: 700;
-    color: #88C0D0;
-    background: rgba(136, 192, 208, 0.08);
+.dataframe {
+    background: #ffffff !important;
+    border: 1px solid #e5e5e5 !important;
+    box-shadow: none !important;
+    border-radius: px !important;
+    overflow: hidden !important;
 }
 
-/* === Buttons === */
-button {
-    border-radius: 8px !important;
-    font-weight: 500 !important;
+.dataframe table {
+    width: 100% !important;
+    border-collapse: collapse !important;
     font-size: 0.95rem !important;
-    transition: all 0.15s ease !important;
-}
-
-button.primary {
-    background: #88C0D0 !important;
-    color: #2E3440 !important;
-    border: none !important;
-}
-
-button.primary:hover:not(:disabled) {
-    background: #8FBCBB !important;
-}
-
-button.secondary,
-button[variant="secondary"] {
-    background: #434C5E !important;
-    color: #ECEFF4 !important;
-    border: 1px solid #4C566A !important;
-}
-
-button.secondary:hover:not(:disabled),
-button[variant="secondary"]:hover:not(:disabled) {
-    background: #4C566A !important;
+    table-layout: auto !important;
+    background: #ffffff !important;
 }
 
-button:disabled {
-    opacity: 0.35 !important;
+.dataframe thead,
+.dataframe thead tr {
+    background: #ffffff !important;
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 10 !important;
 }
 
-/* === Inputs === */
-input[type="text"],
-select {
-    background: #2E3440 !important;
-    border: 1px solid #4C566A !important;
-    border-radius: 8px !important;
-    color: #ECEFF4 !important;
-    font-size: 1rem !important;
+.dataframe thead th {
+    padding: 0.875rem 1rem !important;
+    font-weight: 700 !important;
+    font-size: 0.75rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    color: #0a0a0a !important;
+    border-bottom: 2px solid #e5e5e5 !important;
+    border-top: none !important;
+    text-align: left !important;
+    background: #ffffff !important;
+    white-space: nowrap !important;
+    border-radius: 0 !important;
 }
 
-input[type="text"]:focus,
-select:focus {
-    border-color: #88C0D0 !important;
-    box-shadow: 0 0 0 3px rgba(136, 192, 208, 0.15) !important;
+.dataframe thead th span, 
+.dataframe thead th div, 
+.dataframe thead th button {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    margin: 0 !important;
     outline: none !important;
 }
 
-input::placeholder {
-    color: #4C566A !important;
+.dataframe thead th span[role="button"],
+.dataframe thead th span[class*="svelte"] {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+    padding: 0 !important;
+    width: auto !important;
 }
 
-/* === Accordion === */
-.accordion {
-    background: #3B4252 !important;
-    border: 1px solid #434C5E !important;
-    border-radius: 10px !important;
-    margin-top: 1.5rem !important;
+/* Also target the SVG icon if it exists to ensure it doesn't have a background */
+.dataframe thead th svg {
+    background: transparent !important;
+    box-shadow: none !important;
 }
 
-.accordion > .label-wrap {
+.dataframe thead th span:hover,
+.dataframe thead th span[role="button"]:hover,
+.dataframe thead th span[class*="svelte"]:hover,
+.dataframe thead th button:hover {
     background: transparent !important;
-    padding: 1rem 1.25rem !important;
-    color: #D8DEE9 !important;
-    font-size: 0.95rem !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #3b82f6 !important;
 }
 
-.accordion > .wrap {
-    padding: 0.5rem 1.25rem 1.25rem !important;
-    color: #D8DEE9 !important;
-    font-size: 0.95rem !important;
-    line-height: 1.6 !important;
+.token {
+    background-color: rgba(59, 130, 246, 0.12) !important;
+    border: 1px solid rgba(59, 130, 246, 0.3) !important;
+    color: #1e3a8a !important;
+    border-radius: 6px !important;
+    padding: 2px 8px !important;
+    gap: 4px !important;
 }
 
-.accordion code {
-    background: #434C5E !important;
-    padding: 0.125rem 0.375rem !important;
+.token-remove {
+    background-color: rgba(255, 255, 255, 0.4) !important;
+    border: 1px solid rgba(30, 58, 138, 0.5) !important; /* Dark blue outline */
+    color: #1e3a8a !important;
     border-radius: 4px !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.8rem !important;
-    color: #8FBCBB !important;
+    margin-left: 6px !important;
+    padding: 1px !important;
+    opacity: 0.9 !important;
+    min-width: 18px !important;
+    min-height: 18px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
-/* === Metrics section === */
-.metrics-section {
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid #434C5E;
+.token-remove svg {
+    width: 12px !important;
+    height: 12px !important;
 }
 
-.metrics-section h3 {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #D8DEE9;
-    margin: 0 0 1rem 0;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.token-remove:hover {
+    background-color: #1e3a8a !important;
+    color: #ffffff !important;
+    border-color: #1e3a8a !important;
 }
 
-.metrics-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 0.75rem;
+.selector-item {
+    border-radius: 6px !important;
 }
 
-.metric-card {
-    background: #3B4252;
-    border: 1px solid #434C5E;
-    border-radius: 8px;
-    overflow: hidden;
+.gradio-container .token {
+    box-shadow: none !important;
+    font-weight: 500 !important;
 }
 
-.metric-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    list-style: none;
+.gradio-container .token span {
+    color: #1e3a8a !important;
 }
 
-.metric-card-header::-webkit-details-marker {
-    display: none;
+.dataframe tbody,
+.dataframe tbody tr {
+    background: #ffffff !important;
 }
 
-.metric-card-name {
-    font-weight: 500;
-    font-size: 0.95rem;
-    color: #ECEFF4;
+.dataframe tbody tr {
+    border-bottom: 1px solid #e5e5e5 !important;
 }
 
-.metric-card-direction {
-    font-size: 0.8rem;
-    color: #D8DEE9;
+.dataframe tbody tr:hover {
+    background: #f9f9f9 !important;
 }
 
-.metric-card-direction .arrow {
-    color: #A3BE8C;
-    font-weight: 600;
+.dataframe tbody td {
+    padding: 0.75rem 1rem !important;
+    color: #0a0a0a !important;
+    background: #ffffff !important;
+    border: none !important;
+    border-bottom: 1px solid #e5e5e5 !important;
 }
 
-.metric-card-body {
-    padding: 0.875rem 1.25rem;
-    border-top: 1px solid #434C5E;
-    font-size: 0.9rem;
-    color: #D8DEE9;
-    line-height: 1.5;
+.dataframe tbody td:first-child {
+    font-weight: 700 !important;
+    color: #0a0a0a !important;
+    white-space: normal !important;
+    word-break: break-word !important;
+    max-width: 400px;
+    min-width: 250px;
 }
 
-.metric-type-badge {
-    font-size: 0.65rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding: 0.15rem 0.4rem;
-    background: rgba(180, 142, 173, 0.2);
-    border: 1px solid rgba(180, 142, 173, 0.35);
-    border-radius: 4px;
-    color: #B48EAD;
-    font-family: 'JetBrains Mono', monospace;
+.dataframe tbody td:not(:first-child) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+    text-align: left !important;
+    white-space: nowrap !important;
 }
 
-/* === Scrollbar === */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+.dataframe td:nth-child(2),
+.dataframe th:nth-child(2) {
+    max-width: 220px;
+    min-width: 140px;
 }
 
-::-webkit-scrollbar-track {
-    background: #2E3440;
+.column-selector-dropdown {
+    min-width: 300px;
 }
 
-::-webkit-scrollbar-thumb {
-    background: #4C566A;
-    border-radius: 4px;
+.column-selector-dropdown .wrap {
+    flex-wrap: nowrap !important;
+    overflow-x: auto !important;
+    gap: 0.25rem !important;
+    padding: 0.5rem !important;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #5E81AC;
+.column-selector-dropdown .wrap input {
+    width: 100% !important;
+    padding-left: 0.5rem !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* === Responsive === */
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 1rem !important;
-    }
-    
-    .scores-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+.heatmap-table {
+    border: 1px solid #e5e5e5 !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
 }
 
-/* === Overrides === */
-.gradio-container footer {
-    display: none !important;
+.heatmap-table th {
+    background: #f5f5f5 !important;
+    color: #525252 !important;
+    padding: 0.6rem 0.75rem !important;
+    font-size: 0.72rem !important;
+    border-bottom: 2px solid #e5e5e5 !important;
 }
 
-.block {
-    background: #3B4252 !important;
+.heatmap-table td {
+    padding: 0.5rem 0.75rem !important;
+    border-bottom: 1px solid #e5e5e5 !important;
 }
 
-.gradio-radio label {
-    background: #434C5E !important;
-    border: 1px solid #4C566A !important;
-    color: #ECEFF4 !important;
-    border-radius: 8px !important;
-    font-size: 0.85rem !important;
+.heatmap-table td.metric-name {
+    background: #f5f5f5 !important;
+    font-weight: 600 !important;
 }
 
-.gradio-radio label.selected {
-    background: #88C0D0 !important;
-    border-color: #88C0D0 !important;
-    color: #2E3440 !important;
-}
+.heatmap-table td.score-cell.best { background: rgba(34, 197, 94, 0.2) !important; color: #15803d !important; }
+.heatmap-table td.score-cell.good { background: rgba(34, 197, 94, 0.1) !important; color: #16a34a !important; }
+.heatmap-table td.score-cell.mid { background: rgba(234, 179, 8, 0.15) !important; color: #a16207 !important; }
+.heatmap-table td.score-cell.low { background: rgba(239, 68, 68, 0.12) !important; color: #dc2626 !important; }
+.heatmap-table td.score-cell.worst { background: rgba(239, 68, 68, 0.2) !important; color: #b91c1c !important; }
+.heatmap-table td.score-cell.na { color: #a1a1a1 !important; font-style: italic !important; }
+
+.gradio-container footer { display: none !important; }
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: #f5f5f5; }
+::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
 """
 
 
 def format_leaderboard_header(selected_leaderboard, metadata):
-    """Formats the leaderboard header info section."""
     if not selected_leaderboard:
-        return """
-        <div style="text-align: center; padding: 2rem 1rem; color: #D8DEE9;">
-            <div style="font-size: 1.1rem;">Select a leaderboard to explore</div>
-        </div>
-        """
+        return '<div style="text-align: center; padding: 2rem; color: #525252;">Select a leaderboard to explore</div>'
     
     if not metadata or not metadata.get("evals"):
-        return f"""
-        <div class="info-banner">
-            <h3>{selected_leaderboard}</h3>
-        </div>
-        """
+        return f'<div class="info-banner"><h3>{selected_leaderboard}</h3></div>'
     
     source_info = metadata.get("source_info", {})
     org = source_info.get("organization", "Unknown")
     url = source_info.get("url", "#")
-    eval_names = list(metadata["evals"].keys())
+    eval_names = sorted(list(metadata["evals"].keys()))
     
     eval_tags = "".join([f'<span class="eval-tag">{name}</span>' for name in eval_names])
     
-    return f"""
+    return f'''
     <div class="info-banner">
-        <div style="display: flex; justify-content: space-between; align-items: center; gap: 1rem;">
-            <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
-                <h3 style="margin: 0;">{selected_leaderboard}</h3>
-                <span style="color: #D8DEE9; font-size: 0.8rem;">by {org}</span>
-                <div class="eval-tags" style="margin: 0;">{eval_tags}</div>
+        <div class="leaderboard-header">
+            <div class="lb-meta">
+                <div class="lb-title">{selected_leaderboard}</div>
+                <div class="lb-by">By {org}</div>
             </div>
-            <a href="{url}" target="_blank" style="
-                font-size: 0.75rem;
-                color: #88C0D0;
-                text-decoration: none;
-                padding: 0.375rem 0.75rem;
-                border: 1px solid rgba(136, 192, 208, 0.4);
-                border-radius: 6px;
-                white-space: nowrap;
-            ">Source →</a>
+            <a href="{url}" target="_blank" class="source-link">Source →</a>
         </div>
+        <div class="eval-tags">{eval_tags}</div>
     </div>
-    """
+    '''
 
 
 def format_metric_details(selected_leaderboard, metadata):
-    """Formats metric detail cards."""
     if not selected_leaderboard or not metadata or not metadata.get("evals"):
         return ""
-    
+
     evals = metadata.get("evals", {})
-    
-    html = """
-    <div class="metrics-section">
-        <h3>Metric Reference</h3>
-        <div class="metrics-grid">
-    """
-    
-    for eval_name, info in evals.items():
-        score_type = info['score_type'].upper() if info.get('score_type') else "—"
+
+    cards_html = ""
+    for i, (eval_name, info) in enumerate(evals.items()):
+        score_type = info.get('score_type', '').upper() or "—"
         direction = "Lower is better" if info.get('lower_is_better') else "Higher is better"
         arrow = "↓" if info.get('lower_is_better') else "↑"
-        
+
         details = ""
         if info.get('score_type') == "continuous" and info.get('min_score') is not None:
             details = f"Range: [{info['min_score']} – {info['max_score']}]"
         elif info.get('score_type') == "levels" and info.get('level_names'):
             details = f"Levels: {', '.join(str(l) for l in info['level_names'])}"
-        
-        html += f"""
-        <details class="metric-card">
-            <summary class="metric-card-header">
+
+        card_id = f"mc{i}"
+        cards_html += f'''
+        <div class="metric-card" id="{card_id}">
+            <input type="checkbox" id="toggle-{card_id}" class="metric-toggle" />
+            <label class="metric-card-header" for="toggle-{card_id}">
                 <span class="metric-card-name">{eval_name}</span>
                 <span class="metric-card-direction"><span class="arrow">{arrow}</span> {direction}</span>
-            </summary>
+            </label>
             <div class="metric-card-body">
                 <div>{info.get('description', 'No description')}</div>
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem;">
-                    <span style="font-size: 0.75rem; color: #D8DEE9;">{details}</span>
+                    <span style="font-size: 0.75rem; color: #525252;">{details}</span>
                     <span class="metric-type-badge">{score_type}</span>
                 </div>
             </div>
-        </details>
-        """
-    
-    html += "</div></div>"
-    return html
+        </div>
+        '''
+
+    return f'''
+    <div class="metrics-section">
+        <h3>Metric Reference</h3>
+        <div class="metrics-grid">{cards_html}</div>
+    </div>
+    '''
 
 
 def format_model_card(model_name, model_data):
-    """Formats a model card showing all evals across leaderboards."""
     if not model_data:
-        return """
-        <div class="no-results">
-            <h3>No results found</h3>
-            <p>Try searching for a different model name</p>
-        </div>
-        """
+        return '<div class="no-results"><h3>No results found</h3><p>Try a different model name</p></div>'
     
     first = list(model_data.values())[0]
     developer = first.get("developer", "Unknown")
     params = first.get("params")
     arch = first.get("architecture", "Unknown")
-    
     params_str = f"{params}B" if params else "—"
     
-    html = f"""
-    <div class="model-card-container">
-        <div class="model-card-header">
-            <h2>{model_name}</h2>
-            <div class="model-meta">
-                <span><strong>Developer:</strong> {developer}</span>
-                <span><strong>Parameters:</strong> {params_str}</span>
-                <span><strong>Architecture:</strong> {arch}</span>
-            </div>
+    html = f'''
+    <div style="padding: 1rem; background: #ffffff; border-radius: 10px; border: 1px solid #e5e5e5;">
+        <h2 style="margin: 0 0 0.5rem 0; color: #0a0a0a;">{model_name}</h2>
+        <div style="color: #525252; margin-bottom: 1rem;">
+            <span>Developer: {developer}</span> · 
+            <span>Params: {params_str}</span> · 
+            <span>Arch: {arch}</span>
         </div>
-    """
+    '''
     
     for leaderboard_name, data in model_data.items():
         results = data.get("results", {})
@@ -1154,221 +787,197 @@ def format_model_card(model_name, model_data):
         scores = [v for v in results.values() if v is not None]
         avg = sum(scores) / len(scores) if scores else None
         avg_str = f"{avg:.2f}" if avg else "—"
-            
-        html += f"""
-        <div class="leaderboard-section">
-            <div class="leaderboard-section-header">
-                <h3>{leaderboard_name}</h3>
-                <span class="lb-avg">Avg: <strong>{avg_str}</strong></span>
-            </div>
-            <div class="scores-grid">
-        """
         
-        sorted_results = sorted(results.items(), key=lambda x: x[1] if x[1] is not None else 0, reverse=True)
+        html += f'<div style="margin-bottom: 1rem;"><h4 style="color: #0a0a0a;">{leaderboard_name} <span style="color: #525252;">(avg: {avg_str})</span></h4>'
+        html += '<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">'
         
-        for i, (metric_name, score) in enumerate(sorted_results):
+        for metric_name, score in sorted(results.items(), key=lambda x: x[1] if x[1] else 0, reverse=True):
             score_display = f"{score:.2f}" if score is not None else "—"
-            highlight_class = "highlight" if i == 0 else ""
-            
-            html += f"""
-                <div class="score-item {highlight_class}">
-                    <div class="score-label">{metric_name}</div>
-                    <div class="score-value">{score_display}</div>
-                </div>
-            """
+            html += f'<div style="padding: 0.4rem 0.8rem; border-radius: 6px; background: #f5f5f5; border: 1px solid #e5e5e5;"><span style="color: #525252;">{metric_name}:</span> <strong style="color: #0a0a0a;">{score_display}</strong></div>'
         
-        html += "</div></div>"
+        html += '</div></div>'
     
-    html += "</div>"
+    html += '</div>'
     return html
 
 
 def format_model_comparison(selected_models, all_results):
-    """Formats a comparison view showing multiple models with visual indicators."""
     if not selected_models or not all_results:
-        return """
-        <div class="no-results">
-            <h3>Select models to compare</h3>
-            <p>Choose multiple models from the dropdown to see a side-by-side comparison</p>
-        </div>
-        """
+        return '<div class="no-results"><h3>Select models to compare</h3><p>Choose models from the dropdown</p></div>'
     
-    # Get all unique leaderboards across selected models
     all_leaderboards = set()
     model_data_dict = {}
     
     for model_name in selected_models:
         if model_name in all_results:
             model_data_dict[model_name] = all_results[model_name]
-            for leaderboard_name in all_results[model_name].keys():
-                all_leaderboards.add(leaderboard_name)
+            for lb in all_results[model_name].keys():
+                all_leaderboards.add(lb)
     
     if not model_data_dict:
-        return """
-        <div class="no-results">
-            <h3>No data found for selected models</h3>
-            <p>Try selecting different models</p>
-        </div>
-        """
+        return '<div class="no-results"><h3>No data found</h3></div>'
     
     all_leaderboards = sorted(all_leaderboards)
-    model_colors = ['#88C0D0', '#A3BE8C', '#EBCB8B', '#D08770', '#B48EAD', '#8FBCBB', '#81A1C1', '#BF616A']
-    
-    # Calculate overall averages for summary
-    overall_avgs = {}
-    for model_name in selected_models:
-        if model_name in model_data_dict:
-            all_scores = []
-            for lb_data in model_data_dict[model_name].values():
-                all_scores.extend([v for v in lb_data.get("results", {}).values() if v is not None])
-            overall_avgs[model_name] = sum(all_scores) / len(all_scores) if all_scores else None
     
-    html = """
-    <div class="comparison-container">
-        <div class="comparison-summary">
-            <h2>Model Comparison</h2>
-            <div class="summary-cards">
-    """
+    html = '<div style="padding: 1rem; background: #ffffff; border-radius: 10px; border: 1px solid #e5e5e5;">'
     
-    # Summary cards for each model
-    for i, model_name in enumerate(selected_models):
-        color = model_colors[i % len(model_colors)]
-        avg = overall_avgs.get(model_name)
-        avg_str = f"{avg:.2f}" if avg is not None else "—"
-        
-        # Get model info
-        model_info = list(model_data_dict.get(model_name, {}).values())
-        developer = model_info[0].get("developer", "Unknown") if model_info else "Unknown"
-        
-        html += f"""
-            <div class="summary-card" style="border-left: 4px solid {color};">
-                <div class="summary-card-header">
-                    <span class="model-dot" style="background: {color};"></span>
-                    <span class="model-name">{model_name}</span>
-                </div>
-                <div class="summary-card-body">
-                    <div class="summary-stat">
-                        <span class="stat-label">Developer</span>
-                        <span class="stat-value">{developer}</span>
-                    </div>
-                    <div class="summary-stat primary">
-                        <span class="stat-label">Overall Avg</span>
-                        <span class="stat-value large">{avg_str}</span>
-                    </div>
-                </div>
-            </div>
-        """
-    
-    html += """
-            </div>
-        </div>
-    """
-    
-    # Leaderboard comparison cards
     for leaderboard_name in all_leaderboards:
-        leaderboard_metrics = set()
-        for model_data in model_data_dict.values():
-            if leaderboard_name in model_data:
-                results = model_data[leaderboard_name].get("results", {})
-                leaderboard_metrics.update(results.keys())
+        metrics = set()
+        for md in model_data_dict.values():
+            if leaderboard_name in md:
+                metrics.update(md[leaderboard_name].get("results", {}).keys())
         
-        leaderboard_metrics = sorted(leaderboard_metrics)
-        if not leaderboard_metrics:
+        metrics = sorted(metrics)
+        if not metrics:
             continue
         
-        # Calculate averages for ranking
-        model_avgs = {}
-        for model_name in selected_models:
-            if model_name in model_data_dict and leaderboard_name in model_data_dict[model_name]:
-                results = model_data_dict[model_name][leaderboard_name].get("results", {})
-                scores = [v for v in results.values() if v is not None]
-                model_avgs[model_name] = sum(scores) / len(scores) if scores else None
-        
-        html += f"""
-        <div class="leaderboard-comparison-card">
-            <div class="lb-card-header">
-                <h3>{leaderboard_name}</h3>
-            </div>
-            <div class="lb-card-body">
-        """
-        
-        # Compact heat-map table
-        html += '<div class="heatmap-table-wrapper">'
-        html += '<table class="heatmap-table">'
-        
-        # Header with model names
-        html += '<thead><tr><th class="metric-header">Metric</th>'
-        for i, model_name in enumerate(selected_models):
-            # Truncate long names
-            short_name = model_name if len(model_name) <= 20 else model_name[:18] + "…"
-            html += f'<th class="model-header" title="{model_name}">{short_name}</th>'
-        html += '</tr></thead>'
-        
-        html += '<tbody>'
-        
-        # Average row first
-        html += '<tr class="avg-row"><td class="metric-name">Average</td>'
-        valid_avgs_list = [model_avgs.get(m) for m in selected_models if model_avgs.get(m) is not None]
-        max_avg_val = max(valid_avgs_list) if valid_avgs_list else None
+        html += f'<h3 style="margin: 1rem 0 0.5rem; color: #0a0a0a;">{leaderboard_name}</h3>'
+        html += '<div style="overflow-x: auto;"><table class="heatmap-table"><thead><tr><th>Metric</th>'
         
         for model_name in selected_models:
-            avg = model_avgs.get(model_name)
-            if avg is not None:
-                cell_class = "best" if avg == max_avg_val and len(valid_avgs_list) > 1 else ""
-                html += f'<td class="score-cell {cell_class}">{avg:.2f}</td>'
-            else:
-                html += '<td class="score-cell na">—</td>'
-        html += '</tr>'
+            short = model_name[:20] + "…" if len(model_name) > 20 else model_name
+            html += f'<th title="{model_name}">{short}</th>'
+        html += '</tr></thead><tbody>'
         
-        # Individual metric rows
-        for metric_name in leaderboard_metrics:
+        for metric_name in metrics:
             html += f'<tr><td class="metric-name">{metric_name}</td>'
             
-            # Get all scores for this metric
-            metric_scores = {}
-            for model_name in selected_models:
-                if model_name in model_data_dict and leaderboard_name in model_data_dict[model_name]:
-                    results = model_data_dict[model_name][leaderboard_name].get("results", {})
-                    metric_scores[model_name] = results.get(metric_name)
+            scores = {}
+            for m in selected_models:
+                if m in model_data_dict and leaderboard_name in model_data_dict[m]:
+                    scores[m] = model_data_dict[m][leaderboard_name].get("results", {}).get(metric_name)
             
-            valid_scores = [v for v in metric_scores.values() if v is not None]
-            if valid_scores:
-                max_score = max(valid_scores)
-                min_score = min(valid_scores)
-                score_range = max_score - min_score if max_score > min_score else 1
-            else:
-                max_score = min_score = score_range = None
+            valid = [v for v in scores.values() if v is not None]
+            max_s = max(valid) if valid else None
+            min_s = min(valid) if valid else None
             
             for model_name in selected_models:
-                score = metric_scores.get(model_name)
-                if score is not None and score_range is not None:
-                    # Determine color class based on relative position
-                    if len(valid_scores) > 1:
-                        pct = (score - min_score) / score_range if score_range > 0 else 1
-                        if score == max_score:
-                            cell_class = "best"
-                        elif pct >= 0.75:
-                            cell_class = "good"
-                        elif pct >= 0.5:
-                            cell_class = "mid"
-                        elif pct >= 0.25:
-                            cell_class = "low"
+                score = scores.get(model_name)
+                if score is not None:
+                    if len(valid) > 1 and max_s and min_s:
+                        if score == max_s:
+                            cls = "best"
+                        elif max_s > min_s:
+                            pct = (score - min_s) / (max_s - min_s)
+                            cls = "good" if pct >= 0.75 else "mid" if pct >= 0.5 else "low" if pct >= 0.25 else "worst"
                         else:
-                            cell_class = "worst"
+                            cls = ""
                     else:
-                        cell_class = ""
-                    html += f'<td class="score-cell {cell_class}">{score:.2f}</td>'
+                        cls = ""
+                    html += f'<td class="score-cell {cls}">{score:.2f}</td>'
                 else:
                     html += '<td class="score-cell na">—</td>'
-            
             html += '</tr>'
         
         html += '</tbody></table></div>'
-        
-        html += """
-            </div>
-        </div>
-        """
     
-    html += "</div>"
+    html += '</div>'
     return html
+
+
+def create_radar_plot(selected_models, all_results):
+    if not selected_models or not all_results:
+        return None
+
+    metric_data = {}
+    leaderboards_involved = set()
+
+    for model in selected_models:
+        if model not in all_results:
+            continue
+        
+        model_data = all_results[model]
+        for lb_name, lb_data in model_data.items():
+            leaderboards_involved.add(lb_name)
+            results = lb_data.get("results", {})
+            for metric, score in results.items():
+                if score is None: continue
+                key = f"{lb_name}: {metric}"
+                if key not in metric_data:
+                    metric_data[key] = {}
+                metric_data[key][model] = score
+
+    if not metric_data:
+        return None
+
+    meta_cache = {}
+    for lb in leaderboards_involved:
+        meta_cache[lb] = get_eval_metadata(lb)
+
+    fig = go.Figure()
+    
+    categories = sorted(metric_data.keys())
+    
+    for model in selected_models:
+        r_values = []
+        theta_values = []
+        hover_texts = []
+        
+        for cat in categories:
+            lb_name, metric_name = cat.split(": ", 1)
+            
+            val = metric_data[cat].get(model)
+            if val is None:
+                r_values.append(None)
+                theta_values.append(cat)
+                hover_texts.append(f"{cat}<br>N/A")
+            else:
+                meta = meta_cache.get(lb_name, {}).get("evals", {}).get(metric_name, {})
+                min_s = meta.get("min_score")
+                max_s = meta.get("max_score")
+                
+                observed_vals = []
+                for m in selected_models:
+                    v = metric_data[cat].get(m)
+                    if v is not None:
+                        observed_vals.append(v)
+                
+                observed_max = max(observed_vals) if observed_vals else 1.0
+                
+                if min_s is None:
+                    min_s = 0
+                if max_s is None:
+                    if observed_max > 1:
+                        max_s = 100
+                    else:
+                        max_s = 1
+                    max_s = max(max_s, observed_max)
+                
+                if max_s == min_s:
+                    norm_val = 1.0
+                else:
+                    norm_val = (val - min_s) / (max_s - min_s)
+                
+                norm_val = max(0.0, min(1.0, norm_val))
+                
+                r_values.append(norm_val)
+                theta_values.append(cat)
+                hover_texts.append(f"{cat}<br>Score: {val:.2f} (Norm: {norm_val:.2f})")
+            
+        if r_values:
+            r_values.append(r_values[0])
+            theta_values.append(theta_values[0])
+            hover_texts.append(hover_texts[0])
+        
+        fig.add_trace(go.Scatterpolar(
+            r=r_values,
+            theta=theta_values,
+            name=model,
+            hovertext=hover_texts,
+            hoverinfo="text",
+            fill='toself'
+        ))
+
+    fig.update_layout(
+        polar=dict(
+            radialaxis=dict(
+                visible=True,
+                range=[0, 1]
+            )
+        ),
+        showlegend=True,
+        margin=dict(l=80, r=80, t=20, b=20),
+        title="Model Comparison Radar (Normalized Scores)"
+    )
+    
+    return fig