update to model lookup, table column selection and other QoL features

app.py

@@ -22,12 +22,13 @@ from ui_components import (
     format_leaderboard_header,
     format_metric_details,
     format_model_card,
+    format_model_comparison,
 )
 
 PAGE_SIZE = 50
 
 
-def update_leaderboard_table(selected_leaderboard, search_query="", current_page=1, sort_column=None, progress=gr.Progress()):
+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."""
     if not selected_leaderboard:
         return (
@@ -39,6 +40,7 @@ def update_leaderboard_table(selected_leaderboard, search_query="", current_page
             gr.update(interactive=False),
             gr.update(choices=[], value=None),
             "0 / 0",
+            gr.update(choices=[], value=[]),
         )
     
     metadata = get_eval_metadata(selected_leaderboard)
@@ -48,6 +50,20 @@ def update_leaderboard_table(selected_leaderboard, search_query="", current_page
     
     df = build_leaderboard_table(selected_leaderboard, "", progress_callback)
     
+    # 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:
         mask = df.astype(str).apply(lambda row: row.str.contains(search_query, case=False, na=False).any(), axis=1)
         df = df[mask]
@@ -74,6 +90,17 @@ def update_leaderboard_table(selected_leaderboard, search_query="", current_page
     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),
@@ -83,6 +110,7 @@ def update_leaderboard_table(selected_leaderboard, search_query="", current_page
         next_btn,
         sort_column_update,
         page_info,
+        column_selector_update,
     )
 
 
@@ -113,6 +141,41 @@ def search_model(model_query):
     return format_model_card(model_name, model_data)
 
 
+def compare_models(selected_models):
+    """Compare multiple selected models."""
+    if not selected_models or len(selected_models) == 0:
+        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>
+        """
+    
+    # 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]
+    
+    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])
+    elif len(all_results) > 1:
+        # Multiple models - show comparison
+        return format_model_comparison(list(all_results.keys()), all_results)
+    else:
+        return """
+        <div class="no-results">
+            <h3>No results found</h3>
+            <p>Try selecting different models</p>
+        </div>
+        """
+
+
 def get_model_suggestions(query):
     """Get model name suggestions for autocomplete."""
     if not query or len(query) < 2:
@@ -165,7 +228,7 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
                 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 = update_leaderboard_table(initial_value, "", 1, "Average")
+            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)
             
@@ -176,13 +239,22 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
                 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,
+                )
+            
             leaderboard_table = gr.Dataframe(
                 value=init_df,
                 label=None,
                 interactive=False,
                 wrap=False,
                 elem_classes="dataframe",
-                column_widths=["28%", "12%", "7%", "7%"]
             )
             
             # Pagination below table - centered
@@ -212,26 +284,38 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
         
         # === TAB 2: Model View ===
         with gr.TabItem("🔍 Model Lookup"):
-            gr.Markdown("### Find a model's benchmarks across all leaderboards")
+            gr.Markdown("### Find and compare models across all leaderboards")
+            
+            selected_models_state = gr.State(value=[])
+            default_compare_html = """
+                <div class="no-results">
+                    <h3>Search for models to compare</h3>
+                    <p>Type in the dropdown above, then click a model to add it</p>
+                </div>
+            """
             
             with gr.Row(elem_classes="controls-bar"):
                 with gr.Column(scale=4):
-                    model_search_dropdown = gr.Dropdown(
-                        choices=[],
-                        label="Model Name",
-                        allow_custom_value=True,
+                    all_models = get_all_model_names()
+                    model_dropdown = gr.Dropdown(
+                        choices=all_models,
+                        label="Search models to add",
                         interactive=True,
+                        allow_custom_value=False,
                         filterable=True,
                     )
                 with gr.Column(scale=1, min_width=100):
-                    model_search_btn = gr.Button("Search", variant="primary", size="sm")
+                    clear_models_btn = gr.Button("Clear All", variant="secondary", size="sm")
             
-            model_card_view = gr.HTML(value="""
-                <div class="no-results">
-                    <h3>Search for a model</h3>
-                    <p>Start typing to see suggestions, then select a model</p>
-                </div>
-            """)
+            selected_models_group = gr.CheckboxGroup(
+                choices=[],
+                value=[],
+                label="Selected Models (click to remove)",
+                interactive=True,
+                elem_classes="selected-models-group"
+            )
+            
+            model_card_view = gr.HTML(value=default_compare_html)
     
     # Submission guide
     with gr.Accordion("📤 How to Submit Data", open=False):
@@ -259,22 +343,30 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
     def reset_page():
         return 1
     
+    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]
+    
     # === 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], 
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
+        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]
     )
     
     search_box.input(
         fn=reset_page, outputs=[current_page_state]
     ).then(
-        fn=update_leaderboard_table,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state],
+        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]
     )
     
@@ -285,8 +377,16 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
     ).then(
         fn=reset_page, outputs=[current_page_state]
     ).then(
-        fn=update_leaderboard_table,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state],
+        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]
+    )
+    
+    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]
     )
     
@@ -295,24 +395,24 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
         inputs=[page_dropdown],
         outputs=[current_page_state]
     ).then(
-        fn=update_leaderboard_table,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state],
+        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]
     )
     
     prev_btn.click(
         fn=go_prev, inputs=[current_page_state], outputs=[current_page_state]
     ).then(
-        fn=update_leaderboard_table,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state],
+        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]
     )
     
     next_btn.click(
         fn=go_next, inputs=[current_page_state], outputs=[current_page_state]
     ).then(
-        fn=update_leaderboard_table,
-        inputs=[leaderboard_selector, search_box, current_page_state, sort_column_state],
+        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]
     )
     
@@ -325,36 +425,72 @@ with gr.Blocks(title="Every Eval Ever", theme=get_theme(), css=get_custom_css())
         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],
-        outputs=[leaderboard_table, header_view, metrics_view, page_dropdown, prev_btn, next_btn, sort_column_dropdown, page_info]
+        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 update_model_suggestions(query):
-        """Update dropdown choices based on query."""
-        if not query or len(query) < 2:
-            return gr.update(choices=[])
-        _, matches = search_model_across_leaderboards(query)
-        return gr.update(choices=matches[:20])
-    
-    model_search_dropdown.input(
-        fn=update_model_suggestions,
-        inputs=[model_search_dropdown],
-        outputs=[model_search_dropdown]
+    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
+            return (
+                current_selected,
+                gr.update(value=None),
+                gr.update(choices=current_selected, value=current_selected),
+                comparison_html
+            )
+        
+        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)
+        
+        return (
+            current_selected,
+            gr.update(value=None),
+            gr.update(choices=current_selected, value=current_selected),
+            comparison_html
+        )
+    
+    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
+    
+    def clear_all_models():
+        """Clear all selected models."""
+        return (
+            [],
+            gr.update(value=None),
+            gr.update(choices=[], value=[]),
+            default_compare_html
+        )
+    
+    # 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]
     )
     
-    model_search_btn.click(
-        fn=search_model,
-        inputs=[model_search_dropdown],
-        outputs=[model_card_view]
+    selected_models_group.change(
+        fn=update_selection,
+        inputs=[selected_models_group],
+        outputs=[selected_models_state, model_card_view]
     )
     
-    model_search_dropdown.select(
-        fn=search_model,
-        inputs=[model_search_dropdown],
-        outputs=[model_card_view]
+    clear_models_btn.click(
+        fn=clear_all_models,
+        outputs=[selected_models_state, model_dropdown, selected_models_group, model_card_view]
     )
     
     DATA_DIR.mkdir(exist_ok=True)

data_loader.py

@@ -289,12 +289,12 @@ def build_leaderboard_table(selected_leaderboard, search_query="", progress_call
              return df
 
         numeric_cols = df.select_dtypes(include=['float', 'int']).columns
-        df[numeric_cols] = df[numeric_cols].round(3)
+        df[numeric_cols] = df[numeric_cols].round(2)
         
         # Add Average Score
         eval_only_cols = [c for c in numeric_cols if c not in ["Params (B)"]]
         if len(eval_only_cols) > 0:
-            df["Average"] = df[eval_only_cols].mean(axis=1).round(3)
+            df["Average"] = df[eval_only_cols].mean(axis=1).round(2)
 
         # Base columns: Model, Developer, Params, Average
         # Eval columns: all evaluation scores

ui_components.py

@@ -235,16 +235,10 @@ def get_custom_css():
     width: 100% !important;
     border-collapse: collapse !important;
     font-size: 0.95rem !important;
-    table-layout: fixed !important;
+    table-layout: auto !important;
     background: #2E3440 !important;
 }
 
-.dataframe thead th:nth-child(1) { width: 28%; }
-.dataframe thead th:nth-child(2) { width: 12%; }
-.dataframe thead th:nth-child(3) { width: 7%; }
-.dataframe thead th:nth-child(4) { width: 7%; }
-.dataframe thead th:nth-child(n+5) { width: auto; }
-
 .dataframe thead,
 .dataframe thead tr {
     background: #2E3440 !important;
@@ -314,32 +308,28 @@ def get_custom_css():
     white-space: nowrap !important;
 }
 
-/* Developer - frost blue */
+/* 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;
 }
 
-/* Params - aurora orange */
 .dataframe tbody td:nth-child(3) {
-    font-family: 'JetBrains Mono', monospace !important;
     color: #D08770 !important;
-    text-align: right !important;
 }
 
-/* Average - aurora green */
 .dataframe tbody td:nth-child(4) {
-    font-family: 'JetBrains Mono', monospace !important;
     font-weight: 600 !important;
     color: #A3BE8C !important;
-    text-align: right !important;
 }
 
-/* Metrics - frost teal */
 .dataframe tbody td:nth-child(n+5) {
-    font-family: 'JetBrains Mono', monospace !important;
-    text-align: right !important;
-    color: #8FBCBB !important;
     white-space: nowrap !important;
 }
 
@@ -464,6 +454,350 @@ def get_custom_css():
     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;
+}
+
+.model-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.model-name {
+    font-weight: 600;
+    color: #ECEFF4;
+    font-size: 0.9rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.summary-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.summary-stat {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.summary-stat .stat-label {
+    font-size: 0.75rem;
+    color: #D8DEE9;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.summary-stat .stat-value {
+    font-family: 'JetBrains Mono', monospace;
+    color: #8FBCBB;
+}
+
+.summary-stat.primary .stat-value.large {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #A3BE8C;
+}
+
+.leaderboard-comparison-card {
+    background: #3B4252;
+    border: 1px solid #434C5E;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.lb-card-header {
+    background: #434C5E;
+    padding: 0.875rem 1.25rem;
+}
+
+.lb-card-header h3 {
+    margin: 0;
+    color: #88C0D0;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.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-name-row {
+    margin-bottom: 0.25rem;
+}
+
+.metric-title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #ECEFF4;
+}
+
+.metric-title.sub {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #D8DEE9;
+}
+
+.model-score-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0;
+}
+
+.model-score-row.compact {
+    padding: 0.25rem 0;
+}
+
+.model-score-row.best-score {
+    background: rgba(163, 190, 140, 0.1);
+    border-radius: 4px;
+    padding-left: 0.5rem;
+    margin-left: -0.5rem;
+}
+
+.model-score-row.no-data {
+    opacity: 0.5;
+}
+
+.model-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    flex-shrink: 0;
+}
+
+.model-indicator.small {
+    width: 6px;
+    height: 6px;
+}
+
+.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;
+}
+
+.score-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 4px;
+    opacity: 0.3;
+}
+
+.score-bar.thin {
+    opacity: 0.2;
+}
+
+.score-value {
+    position: relative;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #ECEFF4;
+    z-index: 1;
+}
+
+.score-value.small {
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.score-value.dim {
+    color: #4C566A;
+}
+
+/* === 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;
+}
+
+.selected-models-group label span::before {
+    content: "×";
+    font-size: 0.75rem;
+    color: #EBCB8B;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.selected-models-group label:hover span::before {
+    opacity: 1;
+}
+
+.selected-models-group input[type="checkbox"] {
+    display: none;
+}
+
+/* === Heat Map Table === */
+.heatmap-table-wrapper {
+    overflow-x: auto;
+    margin-top: 1rem;
+}
+
+.heatmap-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85rem;
+}
+
+.heatmap-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.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;
+}
+
+.heatmap-table th.metric-header {
+    min-width: 120px;
+}
+
+.heatmap-table th.model-header {
+    text-align: center;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.heatmap-table td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid #3B4252;
+}
+
+.heatmap-table td.metric-name {
+    font-weight: 500;
+    color: #D8DEE9;
+    background: #2E3440;
+}
+
+.heatmap-table td.score-cell {
+    text-align: center;
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 500;
+    transition: all 0.15s ease;
+}
+
+.heatmap-table td.score-cell.best {
+    background: rgba(163, 190, 140, 0.25);
+    color: #A3BE8C;
+    font-weight: 700;
+}
+
+.heatmap-table td.score-cell.good {
+    background: rgba(163, 190, 140, 0.12);
+    color: #A3BE8C;
+}
+
+.heatmap-table td.score-cell.mid {
+    background: rgba(235, 203, 139, 0.12);
+    color: #EBCB8B;
+}
+
+.heatmap-table td.score-cell.low {
+    background: rgba(208, 135, 112, 0.12);
+    color: #D08770;
+}
+
+.heatmap-table td.score-cell.worst {
+    background: rgba(191, 97, 106, 0.15);
+    color: #BF616A;
+}
+
+.heatmap-table td.score-cell.na {
+    color: #4C566A;
+    font-style: italic;
+}
+
+.heatmap-table tr.avg-row {
+    background: rgba(136, 192, 208, 0.08);
+}
+
+.heatmap-table tr.avg-row td.metric-name {
+    font-weight: 700;
+    color: #88C0D0;
+    background: rgba(136, 192, 208, 0.08);
+}
+
 /* === Buttons === */
 button {
     border-radius: 8px !important;
@@ -808,7 +1142,7 @@ 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:.3f}" if avg else "—"
+        avg_str = f"{avg:.2f}" if avg else "—"
             
         html += f"""
         <div class="leaderboard-section">
@@ -822,7 +1156,7 @@ def format_model_card(model_name, model_data):
         sorted_results = sorted(results.items(), key=lambda x: x[1] if x[1] is not None else 0, reverse=True)
         
         for i, (metric_name, score) in enumerate(sorted_results):
-            score_display = f"{score:.3f}" if score is not None else "—"
+            score_display = f"{score:.2f}" if score is not None else "—"
             highlight_class = "highlight" if i == 0 else ""
             
             html += f"""
@@ -836,3 +1170,194 @@ def format_model_card(model_name, model_data):
     
     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>
+        """
+    
+    # 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)
+    
+    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>
+        """
+    
+    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">
+    """
+    
+    # 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())
+        
+        leaderboard_metrics = sorted(leaderboard_metrics)
+        if not leaderboard_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
+        
+        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>'
+        
+        # Individual metric rows
+        for metric_name in leaderboard_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)
+            
+            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
+            
+            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"
+                        else:
+                            cell_class = "worst"
+                    else:
+                        cell_class = ""
+                    html += f'<td class="score-cell {cell_class}">{score:.2f}</td>'
+                else:
+                    html += '<td class="score-cell na">—</td>'
+            
+            html += '</tr>'
+        
+        html += '</tbody></table></div>'
+        
+        html += """
+            </div>
+        </div>
+        """
+    
+    html += "</div>"
+    return html