UI improvements: hide status message, reorder layout, adopt low-saturation colors from homepage

app.py

@@ -25,7 +25,8 @@ def reload_data():
         ax.text(0.5, 0.5, msg, ha="center", va="center")
         ax.axis("off")
         placeholder_html = "<div class='placeholder'>No data available</div>"
-        return msg, gr.update(choices=["All"], value="All"), \
+        # Return empty string for hidden status
+        return "", gr.update(choices=["All"], value="All"), \
                gr.update(choices=["All"], value="All"), \
                gr.update(choices=["All"], value="All"), \
                placeholder_html, dummy_fig
@@ -50,7 +51,8 @@ def reload_data():
     radar_fig = radar_plotter.create_radar_chart()
     html_table = dataframe_to_html(table_df)
 
-    return msg, \
+    # Return empty string for hidden status
+    return "", \
            gr.update(choices=open_source_choices, value="All"), \
            gr.update(choices=year_choices, value="All"), \
            gr.update(choices=category_choices, value="All"), \
@@ -83,7 +85,7 @@ def create_comparison_plot_wrapper(model_filter, open_source_filter, year_filter
                                          year_filter, category_filter,
                                          clean_metric, plot_sort_mode)
 
-# Define CSS once (outside the main block to be used in Blocks)
+# Define CSS
 academic_css = get_academic_css()
 
 with gr.Blocks(css=academic_css) as demo:
@@ -97,7 +99,8 @@ with gr.Blocks(css=academic_css) as demo:
         elem_id="title"
     )
 
-    status_box = gr.Markdown("Loading results...", elem_id="status")
+    # Hidden status box (no longer displayed)
+    status_box = gr.Markdown(visible=False)
 
     with gr.Row():
         with gr.Column(scale=2):
@@ -162,25 +165,23 @@ with gr.Blocks(css=academic_css) as demo:
         reload_button = gr.Button("🔄 Reload Data", variant="secondary", size="sm")
         update_button = gr.Button("✅ Update Leaderboard", variant="primary", size="sm")
 
-    # 将排行榜和雷达图放在同一行
+    # Row 1: Leaderboard table (full width)
+    leaderboard_html = gr.HTML(
+        label="Leaderboard Table",
+        value="<div class='placeholder'>Leaderboard will be displayed here...</div>"
+    )
+
+    # Row 2: Radar chart (left) and comparison plot controls (right)
     with gr.Row():
-        with gr.Column(scale=2):
-            leaderboard_html = gr.HTML(
-                label="Leaderboard Table",
-                value="<div class='placeholder'>Leaderboard will be displayed here...</div>"
-            )
         with gr.Column(scale=1):
             radar_plot = gr.Plot(label="Performance Radar (8 metrics)", format="png")
-
-    with gr.Row():
-        with gr.Column(scale=2):
+        with gr.Column(scale=1):
             plot_metric_radio = gr.Radio(
                 label="Select Metric for Comparison Plot",
                 choices=metric_choices,
                 value=DEFAULT_METRIC,
                 interactive=True,
             )
-        with gr.Column(scale=1):
             plot_sort_radio = gr.Radio(
                 label="Plot Sort Order",
                 choices=["Ascending (low → high)", "Descending (high → low)"],
@@ -189,8 +190,10 @@ with gr.Blocks(css=academic_css) as demo:
             )
             plot_update_button = gr.Button("📊 Generate Comparison Plot", variant="primary", size="sm")
 
+    # Row 3: Comparison plot (full width)
     comparison_plot = gr.Plot(label="Model Comparison Visualization", format="png")
 
+    # Event bindings
     reload_button.click(
         fn=reload_data,
         inputs=[],

src/styling.py

@@ -5,66 +5,64 @@ def get_academic_css() -> str:
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     
     :root {
-        --primary: #4f8ef7;
-        --primary-dark: #3a6ec4;
-        --accent: #6c9bd2;
-        --text-dark: #2c3e50;
-        --text-light: #ecf0f1;
-        --bg-light: #f8fafc;
-        --bg-dark: #1e2b38;
-        --border: #d1d9e6;
-        --success: #2ecc71;
-        --warning: #f39c12;
-        --error: #e74c3c;
+        --primary: #2563eb;
+        --primary-dark: #1d4ed8;
+        --accent: #06b6d4;
+        --text-dark: #1a1a1a;
+        --text-gray: #4a4a4a;
+        --text-light: #666666;
+        --border: #e5e5e5;
+        --bg-light: #f8f9fa;
+        --white: #ffffff;
+        --success: #10b981;
+        --danger: #ef4444;
+        
+        /* Low saturation table colors */
+        --table-header: #64748b;
+        --table-header-light: #94a3b8;
+        --table-border: #cbd5e0;
+        --table-bg-alt: #f8fafc;
+        --table-highlight: #f1f5f9;
+        --best-score-bg: #e6fffa;
+        --best-score-color: #2c7a7b;
+        --category-bg: #e2e8f0;
+        --category-color: #475569;
     }
     
     @media (prefers-color-scheme: dark) {
         :root {
-            --text-primary: var(--text-light);
-            --bg-primary: var(--bg-dark);
+            --text-dark: #ecf0f1;
+            --text-gray: #b0b0b0;
+            --bg-light: #1e2b38;
             --border: #3a4a5a;
+            --table-header: #4a5a6a;
+            --table-header-light: #5a6a7a;
+            --table-border: #3a4a5a;
+            --table-bg-alt: #2a3745;
+            --table-highlight: #354454;
+            --best-score-bg: #1a3a3a;
+            --best-score-color: #7fc9c9;
+            --category-bg: #3a4a5a;
+            --category-color: #cbd5e0;
         }
         body {
-            background-color: var(--bg-dark);
-            color: var(--text-light);
-        }
-        .gradio-container {
-            background-color: var(--bg-dark) !important;
-        }
-        .leaderboard-table td {
-            border-bottom-color: var(--border);
-        }
-        .leaderboard-table tr:nth-child(even) {
-            background-color: #2a3745;
-        }
-        .leaderboard-table tr:hover {
-            background-color: #354454;
-        }
-        .leaderboard-table th {
-            background: linear-gradient(135deg, #3a4a5a 0%, #4a5a6a 100%);
-        }
-    }
-    
-    @media (prefers-color-scheme: light) {
-        :root {
-            --text-primary: var(--text-dark);
-            --bg-primary: var(--bg-light);
-        }
-        body {
-            background-color: var(--bg-light);
+            background-color: #1a2632;
             color: var(--text-dark);
         }
         .gradio-container {
-            background-color: var(--bg-light) !important;
+            background-color: #1a2632 !important;
         }
     }
     
     body {
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        background-color: var(--bg-light);
+        color: var(--text-dark);
     }
     
     .gradio-container {
         max-width: 1400px !important;
+        background-color: var(--bg-light) !important;
     }
     
     h1 {
@@ -73,7 +71,7 @@ def get_academic_css() -> str:
     }
     
     .subtitle {
-        color: var(--text-primary);
+        color: var(--text-gray);
         font-size: 1.1rem;
         margin-top: 0.5rem;
         opacity: 0.8;
@@ -83,46 +81,93 @@ def get_academic_css() -> str:
         font-size: 1.5em;
     }
     
+    /* Tables - Low saturation, no rounded corners */
+    .table-wrapper {
+        margin: 1.5rem 0;
+        overflow-x: auto;
+    }
+    
     .leaderboard-table {
         width: 100%;
         border-collapse: collapse;
         font-size: 0.9rem;
         margin-top: 1rem;
+        border: 1px solid var(--table-border);
+        background-color: var(--white);
     }
     
     .leaderboard-table th {
-        background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
+        background: var(--table-header);
         color: white;
         padding: 12px 8px;
         text-align: center;
         font-weight: 600;
         position: sticky;
         top: 0;
+        border-right: 1px solid rgba(255,255,255,0.15);
+    }
+    
+    .leaderboard-table th:last-child {
+        border-right: none;
     }
     
     .leaderboard-table td {
         padding: 10px 8px;
         text-align: center;
-        border-bottom: 1px solid var(--border);
-        color: var(--text-primary);
+        border-bottom: 1px solid var(--table-border);
+        border-right: 1px solid var(--table-border);
+        color: var(--text-gray);
+    }
+    
+    .leaderboard-table td:last-child {
+        border-right: none;
     }
     
     .leaderboard-table tr:nth-child(even) {
-        background-color: #f8fafc;
+        background-color: var(--table-bg-alt);
     }
     
     .leaderboard-table tr:hover {
-        background-color: #f1f5f9;
+        background-color: var(--table-highlight);
     }
     
+    /* Rank styles */
     .rank-1 { background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%) !important; font-weight: bold; }
     .rank-2 { background: linear-gradient(135deg, #c0c0c0 0%, #e5e7eb 100%) !important; font-weight: bold; }
     .rank-3 { background: linear-gradient(135deg, #cd7f32 0%, #fdba74 100%) !important; font-weight: bold; }
     
+    /* Best score highlight */
     .best-score {
-        color: #2c7a7b;
         font-weight: 700;
-        background: #e6fffa;
+        color: var(--best-score-color);
+        background: var(--best-score-bg) !important;
+    }
+    
+    /* Category row (for group headers) */
+    .category-row {
+        background: var(--category-bg) !important;
+        font-weight: 600;
+        color: var(--category-color);
+        text-align: left;
+        font-size: 0.85rem;
+    }
+    
+    .category-row td {
+        padding: 10px 15px;
+        color: var(--category-color);
+        border-bottom: 2px solid var(--table-border);
+    }
+    
+    .check { 
+        color: var(--success); 
+        font-weight: bold;
+        font-size: 1.2em;
+    }
+    
+    .cross { 
+        color: var(--danger); 
+        font-weight: bold;
+        font-size: 1.2em;
     }
     
     .category-tag {
@@ -136,6 +181,7 @@ def get_academic_css() -> str:
     .cat-onehot { background: #d1fae5; color: #065f46; }
     .cat-camera { background: #fef3c7; color: #92400e; }
     
+    /* Links */
     .leaderboard-table a {
         color: var(--primary);
         text-decoration: none;
@@ -145,14 +191,16 @@ def get_academic_css() -> str:
         opacity: 0.7;
     }
     
+    /* Buttons */
     button.primary {
         background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
         color: white !important;
         border: none;
     }
     
+    /* Status indicators (hidden) */
     .status-success { color: var(--success); }
-    .status-error { color: var(--error); }
+    .status-error { color: var(--danger); }
     """
 
 def dataframe_to_html(df: pd.DataFrame) -> str: