Update on table scheme

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import pandas as pd
+import json
 from collections import OrderedDict
 
 from src.about import (
@@ -46,28 +47,34 @@ DEFAULT_GROUPS = [
 ALWAYS_VISIBLE_COLS = ["Model", "Type"]
 
 # ============================================================
-# Column-to-color mapping
-# Soft, harmonious palette: dark/light pairs for each group
+# Column-to-color mapping (used by JS)
 # ============================================================
-COLUMN_COLORS = {}
-# Overall (dark amber)
-for col in ["Overall"]:
-    COLUMN_COLORS[col] = "rgba(232, 180, 58, 0.30)"
-# Overall by Category (light amber)
-for col in ["Abst.(All)", "Know.(All)", "Perc.(All)", "Spat.(All)", "Trans.(All)"]:
-    COLUMN_COLORS[col] = "rgba(242, 200, 90, 0.15)"
-# In-Domain Overall (dark green)
-for col in ["Overall(In-Domain)"]:
-    COLUMN_COLORS[col] = "rgba(82, 183, 120, 0.30)"
-# In-Domain by Category (light green)
-for col in ["Abst.(ID)", "Know.(ID)", "Perc.(ID)", "Spat.(ID)", "Trans.(ID)"]:
-    COLUMN_COLORS[col] = "rgba(110, 200, 145, 0.15)"
-# Out-of-Domain Overall (dark blue)
-for col in ["Overall(Out-of-Domain)"]:
-    COLUMN_COLORS[col] = "rgba(95, 150, 215, 0.30)"
-# Out-of-Domain by Category (light blue)
-for col in ["Abst.(OOD)", "Know.(OOD)", "Perc.(OOD)", "Spat.(OOD)", "Trans.(OOD)"]:
-    COLUMN_COLORS[col] = "rgba(125, 175, 228, 0.15)"
+COLUMN_COLORS = {
+    # Overall (dark amber)
+    "Overall": "rgba(232, 180, 58, 0.30)",
+    # Overall by Category (light amber)
+    "Abst.(All)": "rgba(242, 200, 90, 0.15)",
+    "Know.(All)": "rgba(242, 200, 90, 0.15)",
+    "Perc.(All)": "rgba(242, 200, 90, 0.15)",
+    "Spat.(All)": "rgba(242, 200, 90, 0.15)",
+    "Trans.(All)": "rgba(242, 200, 90, 0.15)",
+    # In-Domain Overall (dark green)
+    "Overall(In-Domain)": "rgba(82, 183, 120, 0.30)",
+    # In-Domain by Category (light green)
+    "Abst.(ID)": "rgba(110, 200, 145, 0.15)",
+    "Know.(ID)": "rgba(110, 200, 145, 0.15)",
+    "Perc.(ID)": "rgba(110, 200, 145, 0.15)",
+    "Spat.(ID)": "rgba(110, 200, 145, 0.15)",
+    "Trans.(ID)": "rgba(110, 200, 145, 0.15)",
+    # Out-of-Domain Overall (dark blue)
+    "Overall(Out-of-Domain)": "rgba(95, 150, 215, 0.30)",
+    # Out-of-Domain by Category (light blue)
+    "Abst.(OOD)": "rgba(125, 175, 228, 0.15)",
+    "Know.(OOD)": "rgba(125, 175, 228, 0.15)",
+    "Perc.(OOD)": "rgba(125, 175, 228, 0.15)",
+    "Spat.(OOD)": "rgba(125, 175, 228, 0.15)",
+    "Trans.(OOD)": "rgba(125, 175, 228, 0.15)",
+}
 
 # ============================================================
 # Static model scores data
@@ -86,6 +93,12 @@ MODEL_LINKS = {
     "HunyuanVideo-I2V": "https://huggingface.co/tencent/HunyuanVideo-I2V",
 }
 
+def make_model_link(model_name):
+    """Create a clickable HTML link for a model if URL exists."""
+    if model_name in MODEL_LINKS:
+        return f'<a href="{MODEL_LINKS[model_name]}" target="_blank">{model_name}</a>'
+    return model_name
+
 MODELS_DATA = [
     {
         "Model": "Human",
@@ -186,60 +199,105 @@ def build_full_dataframe():
     # Round numeric columns to 3 decimal places for clean display
     numeric_cols = df.select_dtypes(include="number").columns
     df[numeric_cols] = df[numeric_cols].round(3)
+    # Add clickable links to model names
+    df["Model"] = df["Model"].apply(make_model_link)
     return df
 
 
 FULL_DF = build_full_dataframe()
 
 
-def render_html_table(selected_groups):
-    """Render the leaderboard as a styled HTML table with column group colors."""
+def get_filtered_df(selected_groups):
+    """Filter DataFrame columns based on selected column groups."""
     if not selected_groups:
-        selected_groups = ["Overall"]
+        selected_groups = ["Overall"]  # Always show at least Overall
 
     cols = list(ALWAYS_VISIBLE_COLS)
     for group_name, group_cols in COLUMN_GROUPS.items():
         if group_name in selected_groups:
             cols.extend(group_cols)
 
-    df = FULL_DF[cols]
-
-    # Build HTML table
-    html = '<div class="leaderboard-scroll"><table class="leaderboard-html-table">\n'
-
-    # Header
-    html += '<thead><tr>\n'
-    for col in cols:
-        bg = COLUMN_COLORS.get(col, "")
-        style = f' style="background-color: {bg};"' if bg else ''
-        html += f'  <th{style}>{col}</th>\n'
-    html += '</tr></thead>\n'
-
-    # Body
-    html += '<tbody>\n'
-    for _, row in df.iterrows():
-        html += '<tr>\n'
-        for col in cols:
-            bg = COLUMN_COLORS.get(col, "")
-            style = f' style="background-color: {bg};"' if bg else ''
-            val = row[col]
-
-            if col == "Model":
-                # Render model name with link
-                model_name = val
-                if model_name in MODEL_LINKS:
-                    cell = f'<a href="{MODEL_LINKS[model_name]}" target="_blank">{model_name}</a>'
-                else:
-                    cell = model_name
-            elif isinstance(val, float):
-                cell = f'{val:.3f}'
-            else:
-                cell = str(val)
-
-            html += f'  <td{style}>{cell}</td>\n'
-        html += '</tr>\n'
-    html += '</tbody>\n</table></div>'
-    return html
+    return FULL_DF[cols]
+
+
+# ============================================================
+# Build the JS that colors columns by reading header text.
+# Passed via Gradio's js= parameter on demo.load so it runs
+# reliably after the page is fully rendered.
+# ============================================================
+COLOR_MAP_JSON = json.dumps(COLUMN_COLORS)
+
+COLORING_JS = f"""
+() => {{
+    const COLOR_MAP = {COLOR_MAP_JSON};
+
+    function colorColumns() {{
+        const container = document.querySelector('#leaderboard-table');
+        if (!container) return;
+
+        // Gradio Dataframe can use <table> or a virtual grid.
+        // Try standard <table> first.
+        const table = container.querySelector('table');
+        if (table) {{
+            const headers = table.querySelectorAll('thead th, thead td');
+            const headerTexts = [];
+            headers.forEach(th => headerTexts.push(th.textContent.trim()));
+
+            // Color header cells
+            headers.forEach((th, i) => {{
+                const color = COLOR_MAP[headerTexts[i]];
+                if (color) th.style.backgroundColor = color;
+            }});
+
+            // Color body cells
+            table.querySelectorAll('tbody tr').forEach(row => {{
+                const cells = row.querySelectorAll('td');
+                cells.forEach((td, i) => {{
+                    const color = COLOR_MAP[headerTexts[i]];
+                    if (color) td.style.backgroundColor = color;
+                }});
+            }});
+            return;
+        }}
+
+        // Fallback: Gradio virtual/svelte table (div-based grid)
+        const headerRow = container.querySelector('.header-row, .headers, [class*="header"]');
+        if (!headerRow) return;
+        const headerCells = headerRow.querySelectorAll('[class*="cell"], th, div');
+        const headerTexts = [];
+        headerCells.forEach(c => headerTexts.push(c.textContent.trim()));
+
+        headerCells.forEach((c, i) => {{
+            const color = COLOR_MAP[headerTexts[i]];
+            if (color) c.style.backgroundColor = color;
+        }});
+
+        const bodyRows = container.querySelectorAll('.body .row, tbody tr, [class*="row"]:not([class*="header"])');
+        bodyRows.forEach(row => {{
+            const cells = row.querySelectorAll('[class*="cell"], td, div');
+            cells.forEach((td, i) => {{
+                const color = COLOR_MAP[headerTexts[i]];
+                if (color) td.style.backgroundColor = color;
+            }});
+        }});
+    }}
+
+    // Run immediately, then with delays to catch late renders
+    colorColumns();
+    setTimeout(colorColumns, 300);
+    setTimeout(colorColumns, 800);
+    setTimeout(colorColumns, 1500);
+
+    // Also observe DOM changes to re-color when columns are toggled
+    const target = document.querySelector('#leaderboard-table');
+    if (target) {{
+        const obs = new MutationObserver(() => {{
+            setTimeout(colorColumns, 50);
+        }});
+        obs.observe(target, {{ childList: true, subtree: true }});
+    }}
+}}
+"""
 
 
 # ============================================================
@@ -260,15 +318,17 @@ with demo:
                     interactive=True,
                 )
 
-            leaderboard_html = gr.HTML(
-                value=render_html_table(DEFAULT_GROUPS),
+            leaderboard_table = gr.Dataframe(
+                value=get_filtered_df(DEFAULT_GROUPS),
+                interactive=False,
                 elem_id="leaderboard-table",
+                datatype=["html"] + ["str"] * 20,
             )
 
             column_selector.change(
-                fn=render_html_table,
+                fn=get_filtered_df,
                 inputs=[column_selector],
-                outputs=[leaderboard_html],
+                outputs=[leaderboard_table],
             )
 
         with gr.TabItem("📝 About", elem_id="llm-benchmark-tab-table", id=1):
@@ -287,4 +347,8 @@ with demo:
                 show_copy_button=True,
             )
 
+    # Use Gradio's js= parameter on load — this is the official way
+    # to run JS after the page is fully rendered
+    demo.load(fn=None, inputs=None, outputs=None, js=COLORING_JS)
+
 demo.queue(default_concurrency_limit=40).launch()

src/display/css_html_js.py

@@ -22,7 +22,11 @@ custom_css = """
 }
 
 #leaderboard-table {
-    margin-top: 15px;
+    margin-top: 15px
+}
+
+#leaderboard-table-lite {
+    margin-top: 15px
 }
 
 #search-bar-table-box > div:first-child {
@@ -34,6 +38,31 @@ custom_css = """
     padding: 0px;
 }
 
+/* Model column — wider to avoid truncation */
+#leaderboard-table td:nth-child(1),
+#leaderboard-table th:nth-child(1) {
+    min-width: 220px !important;
+    white-space: nowrap;
+}
+
+/* Type column — wider to avoid truncation */
+#leaderboard-table td:nth-child(2),
+#leaderboard-table th:nth-child(2) {
+    min-width: 170px !important;
+    white-space: nowrap;
+}
+
+/* Model links: underline + hover color change */
+#leaderboard-table td a {
+    color: #2563eb;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.2s ease;
+}
+#leaderboard-table td a:hover {
+    color: #d97706;
+}
+
 .tab-buttons button {
     font-size: 20px;
 }
@@ -82,74 +111,6 @@ custom_css = """
 #box-filter > .form{
     border: 0
 }
-
-/* ============================================================
-   Styled HTML leaderboard table
-   ============================================================ */
-
-.leaderboard-scroll {
-    overflow-x: auto;
-    width: 100%;
-}
-
-.leaderboard-html-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-size: 14px;
-    line-height: 1.5;
-}
-
-.leaderboard-html-table thead th {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    padding: 10px 14px;
-    text-align: center;
-    font-weight: 600;
-    font-size: 13px;
-    border-bottom: 2px solid #d1d5db;
-    white-space: nowrap;
-}
-
-.leaderboard-html-table tbody td {
-    padding: 8px 14px;
-    text-align: center;
-    border-bottom: 1px solid #e5e7eb;
-}
-
-/* Model column — left-aligned, wider */
-.leaderboard-html-table th:first-child,
-.leaderboard-html-table td:first-child {
-    text-align: left;
-    min-width: 220px;
-    white-space: nowrap;
-    font-weight: 500;
-}
-
-/* Type column — left-aligned, wider */
-.leaderboard-html-table th:nth-child(2),
-.leaderboard-html-table td:nth-child(2) {
-    text-align: left;
-    min-width: 170px;
-    white-space: nowrap;
-}
-
-/* Row hover */
-.leaderboard-html-table tbody tr:hover td {
-    filter: brightness(0.95);
-}
-
-/* Model links: underline + hover color change */
-.leaderboard-html-table td a {
-    color: #2563eb;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    transition: color 0.2s ease;
-}
-.leaderboard-html-table td a:hover {
-    color: #d97706;
-}
 """
 
 get_window_url_params = """