Add color to each columns, expand the columns

app.py

@@ -10,7 +10,7 @@ from src.about import (
     LLM_BENCHMARKS_TEXT,
     TITLE,
 )
-from src.display.css_html_js import custom_css
+from src.display.css_html_js import custom_css, COLOR_COLUMNS_JS
 
 
 # ============================================================
@@ -23,11 +23,11 @@ COLUMN_GROUPS = OrderedDict([
     ("Overall by Category", [
         "Abst.(All)", "Know.(All)", "Perc.(All)", "Spat.(All)", "Trans.(All)",
     ]),
-    ("In-Domain (ID)", ["ID"]),
+    ("In-Domain (ID)", ["Overall(In-Domain)"]),
     ("In-Domain by Category", [
         "Abst.(ID)", "Know.(ID)", "Perc.(ID)", "Spat.(ID)", "Trans.(ID)",
     ]),
-    ("Out-of-Domain (OOD)", ["OOD"]),
+    ("Out-of-Domain (OOD)", ["Overall(Out-of-Domain)"]),
     ("Out-of-Domain by Category", [
         "Abst.(OOD)", "Know.(OOD)", "Perc.(OOD)", "Spat.(OOD)", "Trans.(OOD)",
     ]),
@@ -72,7 +72,7 @@ MODELS_DATA = [
     {
         "Model": "Human",
         "Type": "👤 Reference",
-        "Overall": 0.974, "ID": 0.960, "OOD": 0.988,
+        "Overall": 0.974, "Overall(In-Domain)": 0.960, "Overall(Out-of-Domain)": 0.988,
         "Abst.(All)": 0.947, "Know.(All)": 0.972, "Perc.(All)": 0.994, "Spat.(All)": 0.969, "Trans.(All)": 0.981,
         "Abst.(ID)": 0.919, "Know.(ID)": 0.956, "Perc.(ID)": 1.000, "Spat.(ID)": 0.950, "Trans.(ID)": 1.000,
         "Abst.(OOD)": 1.000, "Know.(OOD)": 1.000, "Perc.(OOD)": 0.990, "Spat.(OOD)": 1.000, "Trans.(OOD)": 0.970,
@@ -81,7 +81,7 @@ MODELS_DATA = [
     {
         "Model": "CogVideoX1.5-5B-I2V",
         "Type": "🟢 Open-source",
-        "Overall": 0.2727, "ID": 0.2831, "OOD": 0.2623,
+        "Overall": 0.2727, "Overall(In-Domain)": 0.2831, "Overall(Out-of-Domain)": 0.2623,
         "Abst.(All)": 0.2548, "Know.(All)": 0.2952, "Perc.(All)": 0.2525, "Spat.(All)": 0.2996, "Trans.(All)": 0.2903,
         "Abst.(ID)": 0.2408, "Know.(ID)": 0.3285, "Perc.(ID)": 0.2567, "Spat.(ID)": 0.3281, "Trans.(ID)": 0.3051,
         "Abst.(OOD)": 0.2809, "Know.(OOD)": 0.2352, "Perc.(OOD)": 0.2501, "Spat.(OOD)": 0.2539, "Trans.(OOD)": 0.2824,
@@ -89,7 +89,7 @@ MODELS_DATA = [
     {
         "Model": "HunyuanVideo-I2V",
         "Type": "🟢 Open-source",
-        "Overall": 0.2726, "ID": 0.2799, "OOD": 0.2653,
+        "Overall": 0.2726, "Overall(In-Domain)": 0.2799, "Overall(Out-of-Domain)": 0.2653,
         "Abst.(All)": 0.1956, "Know.(All)": 0.3614, "Perc.(All)": 0.2910, "Spat.(All)": 0.2698, "Trans.(All)": 0.2733,
         "Abst.(ID)": 0.2068, "Know.(ID)": 0.3573, "Perc.(ID)": 0.2933, "Spat.(ID)": 0.2802, "Trans.(ID)": 0.3160,
         "Abst.(OOD)": 0.1747, "Know.(OOD)": 0.3688, "Perc.(OOD)": 0.2897, "Spat.(OOD)": 0.2530, "Trans.(OOD)": 0.2502,
@@ -97,7 +97,7 @@ MODELS_DATA = [
     {
         "Model": "Wan2.2-I2V-A14B",
         "Type": "🟢 Open-source",
-        "Overall": 0.3714, "ID": 0.4125, "OOD": 0.3287,
+        "Overall": 0.3714, "Overall(In-Domain)": 0.4125, "Overall(Out-of-Domain)": 0.3287,
         "Abst.(All)": 0.4212, "Know.(All)": 0.3556, "Perc.(All)": 0.3710, "Spat.(All)": 0.3397, "Trans.(All)": 0.3465,
         "Abst.(ID)": 0.4301, "Know.(ID)": 0.3823, "Perc.(ID)": 0.4147, "Spat.(ID)": 0.4043, "Trans.(ID)": 0.4192,
         "Abst.(OOD)": 0.4046, "Know.(OOD)": 0.3077, "Perc.(OOD)": 0.3427, "Spat.(OOD)": 0.2364, "Trans.(OOD)": 0.3073,
@@ -105,7 +105,7 @@ MODELS_DATA = [
     {
         "Model": "LTX-2",
         "Type": "🟢 Open-source",
-        "Overall": 0.3129, "ID": 0.3287, "OOD": 0.2971,
+        "Overall": 0.3129, "Overall(In-Domain)": 0.3287, "Overall(Out-of-Domain)": 0.2971,
         "Abst.(All)": 0.2908, "Know.(All)": 0.3531, "Perc.(All)": 0.3200, "Spat.(All)": 0.2980, "Trans.(All)": 0.3093,
         "Abst.(ID)": 0.3156, "Know.(ID)": 0.3621, "Perc.(ID)": 0.3257, "Spat.(ID)": 0.3399, "Trans.(ID)": 0.3060,
         "Abst.(OOD)": 0.2444, "Know.(OOD)": 0.3369, "Perc.(OOD)": 0.3167, "Spat.(OOD)": 0.2308, "Trans.(OOD)": 0.3110,
@@ -114,7 +114,7 @@ MODELS_DATA = [
     {
         "Model": "Runway Gen-4 Turbo",
         "Type": "🔵 Proprietary",
-        "Overall": 0.4031, "ID": 0.3920, "OOD": 0.4141,
+        "Overall": 0.4031, "Overall(In-Domain)": 0.3920, "Overall(Out-of-Domain)": 0.4141,
         "Abst.(All)": 0.4370, "Know.(All)": 0.4165, "Perc.(All)": 0.4223, "Spat.(All)": 0.3357, "Trans.(All)": 0.3696,
         "Abst.(ID)": 0.3956, "Know.(ID)": 0.4094, "Perc.(ID)": 0.4288, "Spat.(ID)": 0.3409, "Trans.(ID)": 0.3629,
         "Abst.(OOD)": 0.5147, "Know.(OOD)": 0.4294, "Perc.(OOD)": 0.4185, "Spat.(OOD)": 0.3274, "Trans.(OOD)": 0.3733,
@@ -122,7 +122,7 @@ MODELS_DATA = [
     {
         "Model": "Sora 2",
         "Type": "🔵 Proprietary",
-        "Overall": 0.5457, "ID": 0.5691, "OOD": 0.5225,
+        "Overall": 0.5457, "Overall(In-Domain)": 0.5691, "Overall(Out-of-Domain)": 0.5225,
         "Abst.(All)": 0.5824, "Know.(All)": 0.4749, "Perc.(All)": 0.5458, "Spat.(All)": 0.5298, "Trans.(All)": 0.5640,
         "Abst.(ID)": 0.6023, "Know.(ID)": 0.4767, "Perc.(ID)": 0.5810, "Spat.(ID)": 0.5720, "Trans.(ID)": 0.5967,
         "Abst.(OOD)": 0.5462, "Know.(OOD)": 0.4715, "Perc.(OOD)": 0.5254, "Spat.(OOD)": 0.4623, "Trans.(OOD)": 0.5465,
@@ -130,7 +130,7 @@ MODELS_DATA = [
     {
         "Model": "Kling 2.6",
         "Type": "🔵 Proprietary",
-        "Overall": 0.3691, "ID": 0.4082, "OOD": 0.3300,
+        "Overall": 0.3691, "Overall(In-Domain)": 0.4082, "Overall(Out-of-Domain)": 0.3300,
         "Abst.(All)": 0.4866, "Know.(All)": 0.2556, "Perc.(All)": 0.3095, "Spat.(All)": 0.3504, "Trans.(All)": 0.4149,
         "Abst.(ID)": 0.4647, "Know.(ID)": 0.3225, "Perc.(ID)": 0.3749, "Spat.(ID)": 0.3471, "Trans.(ID)": 0.5193,
         "Abst.(OOD)": 0.5277, "Know.(OOD)": 0.1350, "Perc.(OOD)": 0.2717, "Spat.(OOD)": 0.3556, "Trans.(OOD)": 0.3588,
@@ -138,7 +138,7 @@ MODELS_DATA = [
     {
         "Model": "Veo 3.1",
         "Type": "🔵 Proprietary",
-        "Overall": 0.4800, "ID": 0.5307, "OOD": 0.4288,
+        "Overall": 0.4800, "Overall(In-Domain)": 0.5307, "Overall(Out-of-Domain)": 0.4288,
         "Abst.(All)": 0.5991, "Know.(All)": 0.4225, "Perc.(All)": 0.4568, "Spat.(All)": 0.4430, "Trans.(All)": 0.4413,
         "Abst.(ID)": 0.6109, "Know.(ID)": 0.5032, "Perc.(ID)": 0.5196, "Spat.(ID)": 0.4443, "Trans.(ID)": 0.5103,
         "Abst.(OOD)": 0.5770, "Know.(OOD)": 0.2772, "Perc.(OOD)": 0.4204, "Spat.(OOD)": 0.4406, "Trans.(OOD)": 0.4041,
@@ -147,7 +147,7 @@ MODELS_DATA = [
     {
         "Model": "VBVR-Wan2.2",
         "Type": "⭐ Strong Baseline",
-        "Overall": 0.6848, "ID": 0.7599, "OOD": 0.6097,
+        "Overall": 0.6848, "Overall(In-Domain)": 0.7599, "Overall(Out-of-Domain)": 0.6097,
         "Abst.(All)": 0.7394, "Know.(All)": 0.6864, "Perc.(All)": 0.6333, "Spat.(All)": 0.6960, "Trans.(All)": 0.6909,
         "Abst.(ID)": 0.7240, "Know.(ID)": 0.7500, "Perc.(ID)": 0.7817, "Spat.(ID)": 0.7446, "Trans.(ID)": 0.8327,
         "Abst.(OOD)": 0.7682, "Know.(OOD)": 0.5720, "Perc.(OOD)": 0.5474, "Spat.(OOD)": 0.6182, "Trans.(OOD)": 0.6145,
@@ -236,4 +236,7 @@ with demo:
                 show_copy_button=True,
             )
 
+    # Inject JS to dynamically color columns based on header text
+    gr.HTML(f"<script>{COLOR_COLUMNS_JS}</script>")
+
 demo.queue(default_concurrency_limit=40).launch()

src/display/css_html_js.py

@@ -38,14 +38,31 @@ custom_css = """
     padding: 0px;
 }
 
-/* Limit the width of the first AutoEvalColumn so that names don't expand too much */
+/* 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) {
-    max-width: 400px;
-    overflow: auto;
+    min-width: 170px !important;
     white-space: nowrap;
 }
 
+/* Model links: underline + hover color */
+#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;
 }
@@ -94,6 +111,37 @@ custom_css = """
 #box-filter > .form{
     border: 0
 }
+
+/* ============================================================
+   Column group color coding for leaderboard table
+   Soft, harmonious palette with dark/light pairs per group.
+   Applied dynamically via JS based on column header text.
+   ============================================================ */
+
+/* Overall (dark amber) */
+#leaderboard-table .col-overall-dark {
+    background-color: rgba(232, 180, 58, 0.30) !important;
+}
+/* Overall by Category (light amber) */
+#leaderboard-table .col-overall-light {
+    background-color: rgba(242, 200, 90, 0.15) !important;
+}
+/* In-Domain Overall (dark green) */
+#leaderboard-table .col-id-dark {
+    background-color: rgba(82, 183, 120, 0.30) !important;
+}
+/* In-Domain by Category (light green) */
+#leaderboard-table .col-id-light {
+    background-color: rgba(110, 200, 145, 0.15) !important;
+}
+/* Out-of-Domain Overall (dark blue) */
+#leaderboard-table .col-ood-dark {
+    background-color: rgba(95, 150, 215, 0.30) !important;
+}
+/* Out-of-Domain by Category (light blue) */
+#leaderboard-table .col-ood-light {
+    background-color: rgba(125, 175, 228, 0.15) !important;
+}
 """
 
 get_window_url_params = """
@@ -103,3 +151,62 @@ get_window_url_params = """
         return url_params;
     }
     """
+
+# JavaScript to dynamically color columns based on header text.
+# Runs on load and re-runs via MutationObserver whenever the table updates.
+COLOR_COLUMNS_JS = """
+function colorLeaderboardColumns() {
+    const table = document.querySelector('#leaderboard-table table');
+    if (!table) return;
+
+    const headers = table.querySelectorAll('thead th');
+    if (!headers.length) return;
+
+    // Map header text -> color class
+    const colorMap = {};
+    headers.forEach((th, idx) => {
+        const text = th.textContent.trim();
+        let cls = '';
+        if (text === 'Overall') {
+            cls = 'col-overall-dark';
+        } else if (text.includes('(All)')) {
+            cls = 'col-overall-light';
+        } else if (text === 'Overall(In-Domain)') {
+            cls = 'col-id-dark';
+        } else if (text.includes('(ID)')) {
+            cls = 'col-id-light';
+        } else if (text === 'Overall(Out-of-Domain)') {
+            cls = 'col-ood-dark';
+        } else if (text.includes('(OOD)')) {
+            cls = 'col-ood-light';
+        }
+        colorMap[idx] = cls;
+
+        // Apply to header cell
+        th.classList.remove('col-overall-dark','col-overall-light','col-id-dark','col-id-light','col-ood-dark','col-ood-light');
+        if (cls) th.classList.add(cls);
+    });
+
+    // Apply to body cells
+    const rows = table.querySelectorAll('tbody tr');
+    rows.forEach(row => {
+        const cells = row.querySelectorAll('td');
+        cells.forEach((td, idx) => {
+            td.classList.remove('col-overall-dark','col-overall-light','col-id-dark','col-id-light','col-ood-dark','col-ood-light');
+            if (colorMap[idx]) td.classList.add(colorMap[idx]);
+        });
+    });
+}
+
+// Run on initial load
+setTimeout(colorLeaderboardColumns, 500);
+
+// Re-run when table changes (column toggle, etc.)
+const observer = new MutationObserver(() => {
+    setTimeout(colorLeaderboardColumns, 100);
+});
+const target = document.querySelector('#leaderboard-table');
+if (target) {
+    observer.observe(target, { childList: true, subtree: true });
+}
+"""