Update app.py

app.py

@@ -7,7 +7,7 @@ os.environ["GRADIO_LANGUAGE"] = "en"
 
 RESULT_DIR = os.environ.get("MOECAP_RESULT_DIR")
 if not RESULT_DIR:
-    # For testing purposes, you can uncomment the line below to set a dummy dir or keep the raise
+    # For testing purposes, you can uncomment the line below:
     # RESULT_DIR = "generic_result_dir" 
     raise RuntimeError(
         "MOECAP_RESULT_DIR is not set. Please set MOECAP_RESULT_DIR (HF Repo ID) before running app.py"
@@ -33,13 +33,6 @@ def normalize(val, vmin, vmax, baseline=20):
     return baseline + (val - vmin) / (vmax - vmin) * (100 - baseline)
 
 
-def normalize_reversed(val, vmin, vmax, baseline=20):
-    """Normalize value (reversed - lower is better) to baseline-100 range."""
-    if vmax == vmin:
-        return baseline + 40
-    return baseline + (vmax - val) / (vmax - vmin) * (100 - baseline)
-
-
 def normalize_cost(val, max_tick, baseline=20):
     """Normalize cost (lower is better)."""
     if max_tick == 0:
@@ -50,48 +43,34 @@ def normalize_cost(val, max_tick, baseline=20):
 def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
     """Generate a CAP radar plot from selected rows."""
     
-    # Standard layout settings for consistent sizing
     layout_settings = dict(
-        height=750,      # Taller height
-        autosize=True,   # Auto width
-        margin=dict(t=80, b=100, l=80, r=80), # Balanced margins
+        height=750,
+        autosize=True,
+        margin=dict(t=80, b=100, l=80, r=80),
         paper_bgcolor='white',
         plot_bgcolor='white',
     )
 
-    # Validation: max 3 rows
     if not selected_rows_data or len(selected_rows_data) == 0:
         fig = go.Figure()
         fig.add_annotation(
             text="Please select 1-3 rows from the table to generate radar plot",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=16),
-            xanchor='center',
-            yanchor='middle'
-        )
-        fig.update_layout(
-            xaxis=dict(visible=False),
-            yaxis=dict(visible=False),
-            **layout_settings
+            xref="paper", yref="paper", x=0.5, y=0.5, showarrow=False,
+            font=dict(size=16, color="black"), # Ensure text is black
+            xanchor='center', yanchor='middle'
         )
+        fig.update_layout(xaxis=dict(visible=False), yaxis=dict(visible=False), **layout_settings)
         return fig
         
     if len(selected_rows_data) > 3:
         fig = go.Figure()
         fig.add_annotation(
             text="Error: Please select no more than 3 rows!",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
+            xref="paper", yref="paper", x=0.5, y=0.5, showarrow=False,
             font=dict(size=18, color="red"),
-            xanchor='center',
-            yanchor='middle'
-        )
-        fig.update_layout(
-            xaxis=dict(visible=False),
-            yaxis=dict(visible=False),
-            **layout_settings
+            xanchor='center', yanchor='middle'
         )
+        fig.update_layout(xaxis=dict(visible=False), yaxis=dict(visible=False), **layout_settings)
         return fig
         
     datasets = [row.get('Dataset', '') for row in selected_rows_data]
@@ -100,25 +79,17 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
         fig = go.Figure()
         fig.add_annotation(
             text="Error: Please select rows from the same dataset!",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
+            xref="paper", yref="paper", x=0.5, y=0.5, showarrow=False,
             font=dict(size=18, color="red"),
-            xanchor='center',
-            yanchor='middle'
-        )
-        fig.update_layout(
-            xaxis=dict(visible=False),
-            yaxis=dict(visible=False),
-            **layout_settings
+            xanchor='center', yanchor='middle'
         )
+        fig.update_layout(xaxis=dict(visible=False), yaxis=dict(visible=False), **layout_settings)
         return fig
         
     dataset_name = datasets[0] if datasets else "Unknown"
     
-    # Extract metrics from selected rows
     data = {}
     for row in selected_rows_data:
-        # Extract model name from HTML or use as-is
         model_name = row.get('Model', 'Unknown')
         if isinstance(model_name, str) and 'href' in model_name:
             try:
@@ -126,23 +97,19 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             except:
                 pass
         
-        # Format legend name: extract name after "/" and add method
         method = row.get('Method', '')
         if isinstance(model_name, str) and '/' in model_name:
-            legend_name = model_name.split('/')[-1]  # Get part after last /
+            legend_name = model_name.split('/')[-1]
         else:
             legend_name = str(model_name)
         
-        # Add method suffix
         if method and method not in ['Unknown', '-', '']:
             legend_name = f"{legend_name}-{method}"
         
-        # Get metrics
         acc = row.get('Accuracy(%)', 0)
         cost = row.get('Cost($)', 0)
         throughput = row.get('Decoding T/s', 0)
         
-        # Convert to float if needed
         try:
             acc = float(acc) if acc not in [None, '-', ''] else 0
             cost = float(cost) if cost not in [None, '-', ''] else 0
@@ -151,12 +118,11 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             acc, cost, throughput = 0, 0, 0
         
         data[legend_name] = {
-            'accuracy': acc / 100.0 if acc > 1 else acc,  # Normalize to 0-1
+            'accuracy': acc / 100.0 if acc > 1 else acc,
             'cost': cost,
             'throughput': throughput
         }
     
-    # Get min/max for normalization
     throughputs = [v['throughput'] for v in data.values()]
     costs = [v['cost'] for v in data.values()]
     accs = [v['accuracy'] for v in data.values()]
@@ -177,7 +143,7 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             normalize_cost(values['cost'], cost_max, baseline),
             normalize(values['accuracy'], acc_min, acc_max, baseline)
         ]
-        norm_vals += [norm_vals[0]]  # Close the loop
+        norm_vals += [norm_vals[0]]
         
         hovertext = [
             f"Throughput: {raw_vals[0]:.2f} T/s",
@@ -197,32 +163,13 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
         ))
     
     fig.update_layout(
-        title=dict(
-            text=f"CAP Radar Plot: {dataset_name}",
-            x=0.5,
-            xanchor='center',
-            font=dict(size=20)
-        ),
+        title=dict(text=f"CAP Radar Plot: {dataset_name}", x=0.5, xanchor='center', font=dict(size=20, color="black")),
         polar=dict(
-            radialaxis=dict(
-                visible=True, 
-                range=[0, 100], 
-                tickfont=dict(size=12)
-            ),
-            angularaxis=dict(
-                tickfont=dict(size=14),
-                rotation=90, # Rotate so top is 12 o'clock
-                direction='clockwise'
-            ),
-        ),
-        legend=dict(
-            orientation='h', 
-            yanchor='bottom', 
-            y=-0.15, 
-            xanchor='center', 
-            x=0.5,
-            font=dict(size=13)
+            radialaxis=dict(visible=True, range=[0, 100], tickfont=dict(size=12, color="black")),
+            angularaxis=dict(tickfont=dict(size=14, color="black"), rotation=90, direction='clockwise'),
+            bgcolor="white"
         ),
+        legend=dict(orientation='h', yanchor='bottom', y=-0.15, xanchor='center', x=0.5, font=dict(size=13, color="black")),
         **layout_settings
     )
     
@@ -235,11 +182,9 @@ def json_to_row(path: str, metrics: dict) -> dict:
         model_name = "unknown-model"
 
     dataset = metrics.get("dataset", "Unknown")
-
     method = metrics.get("method", "Unknown")
     precision = metrics.get("precision", "Unknown")
     model_type = metrics.get("model_type", "Unknown")
-
     e2e_s = metrics.get("e2e_s", None) 
     batch_size = metrics.get("batch_size", None)
     gpu_type = metrics.get("gpu_type", "")
@@ -258,7 +203,7 @@ def json_to_row(path: str, metrics: dict) -> dict:
 
     if isinstance(model_name, str) and "/" in model_name:
         hf_url = f"https://huggingface.co/{model_name}"
-        model_cell = f"<a href='{hf_url}' target='_blank'>{model_name}</a>"
+        model_cell = f"<a href='{hf_url}' target='_blank' style='color: #0366d6; text-decoration: none;'>{model_name}</a>"
     else:
         model_cell = model_name
 
@@ -285,421 +230,230 @@ def json_to_row(path: str, metrics: dict) -> dict:
     return row
 
 
-def load_from_dir(
-    dir_path: str,
-    selected_tasks: List[str] | None = None,
-    selected_frameworks: List[str] | None = None,
-    selected_model_types: List[str] | None = None,
-    selected_precisions: List[str] | None = None,
-    search_keyword: str = "",
-    force_refresh: bool = False,
-):
+def load_from_dir(dir_path: str, selected_tasks=None, selected_frameworks=None, selected_model_types=None, selected_precisions=None, search_keyword="", force_refresh=False):
     try:
         pattern = f"hf://datasets/{dir_path}/**/*.json"
         dl_mode = "force_redownload" if force_refresh else None
-
         print(f"Fetching from {pattern} (mode={dl_mode})...")
-        ds = load_dataset(
-            "json",
-            data_files={"train": pattern},
-            split="train",
-            download_mode=dl_mode,
-        )
-    except Exception as e:
-        empty_html = "<p>No files loaded or Dataset not found.</p>"
-        return empty_html, []
+        ds = load_dataset("json", data_files={"train": pattern}, split="train", download_mode=dl_mode)
+    except Exception:
+        return "<p style='color:black'>No files loaded or Dataset not found.</p>", []
 
     rows = []
     for i, example in enumerate(ds):
-        if isinstance(example, dict):
-            metrics = example.get("metrics") or example.get("json") or example
-        else:
-            metrics = example
+        metrics = example.get("metrics") or example.get("json") or example
         rows.append(json_to_row(f"{dir_path}#{i}", metrics))
 
     if not rows:
-        empty_html = "<p>No records found.</p>"
-        return empty_html, []
+        return "<p style='color:black'>No records found.</p>", []
 
     df = pd.DataFrame(rows)
 
-    # Filters
-    if selected_tasks is not None:
-        lower_selected = [x.lower() for x in selected_tasks]
-        df = df[df["Dataset"].astype(str).str.lower().isin(lower_selected)]
-
-    if selected_frameworks is not None:
-        lower_selected = [str(x).lower() for x in selected_frameworks]
-        df = df[df["Method"].astype(str).str.lower().isin(lower_selected)]
-
-    if selected_model_types is not None: 
-        lower_selected = [str(x).lower() for x in selected_model_types]
-        df = df[df["Model type"].astype(str).str.lower().isin(lower_selected)]
-
-    if selected_precisions is not None:
-        lower_selected = [str(x).lower() for x in selected_precisions]
-        df = df[df["Precision"].astype(str).str.lower().isin(lower_selected)]
-
+    if selected_tasks:
+        df = df[df["Dataset"].astype(str).str.lower().isin([x.lower() for x in selected_tasks])]
+    if selected_frameworks:
+        df = df[df["Method"].astype(str).str.lower().isin([str(x).lower() for x in selected_frameworks])]
+    if selected_model_types: 
+        df = df[df["Model type"].astype(str).str.lower().isin([str(x).lower() for x in selected_model_types])]
+    if selected_precisions:
+        df = df[df["Precision"].astype(str).str.lower().isin([str(x).lower() for x in selected_precisions])]
     if search_keyword and search_keyword.strip():
-        keyword_lower = search_keyword.strip().lower()
-        mask = df.astype(str).apply(lambda row: row.str.lower().str.contains(keyword_lower).any(), axis=1)
-        df = df[mask]
+        df = df[df.astype(str).apply(lambda row: row.str.lower().str.contains(search_keyword.strip().lower()).any(), axis=1)]
 
     if df.empty:
-        empty_html = "<p>No records found.</p>"
-        return empty_html, []
+        return "<p style='color:black'>No records found.</p>", []
     
     df = df.fillna("-")
-    
-    # Insert row number column at the beginning
     df.insert(0, 'Row #', range(len(df)))
     
-    # Create HTML table
     table_html = f'<div class="table-container">{df.to_html(escape=False, index=False, classes="metrics-table")}</div>'
     df_without_rownum = df.drop('Row #', axis=1)
-    df_dict = df_without_rownum.to_dict('records')
-    return table_html, df_dict
-
-
-def auto_refresh_from_dir(
-    dir_path: str,
-    selected_tasks: List[str] | None = None,
-    selected_frameworks: List[str] | None = None,
-    selected_model_types: List[str] | None = None,
-    selected_precisions: List[str] | None = None,
-    search_keyword: str = "",
-):
-    return load_from_dir(
-        dir_path,
-        selected_tasks=selected_tasks,
-        selected_frameworks=selected_frameworks,
-        selected_model_types=selected_model_types,
-        selected_precisions=selected_precisions,
-        search_keyword=search_keyword,
-        force_refresh=True,
-    )
+    return table_html, df_without_rownum.to_dict('records')
+
 
+def auto_refresh_from_dir(dir_path, tasks, frameworks, types, precisions, search):
+    return load_from_dir(dir_path, tasks, frameworks, types, precisions, search, force_refresh=True)
 
-def parse_and_generate_plot(df_data: list, indices_str: str):
-    """Parse comma-separated indices and generate radar plot."""
+def parse_and_generate_plot(df_data, indices_str):
     if not indices_str or not indices_str.strip():
         return generate_radar_plot([])
-    
     try:
-        # Parse comma-separated indices
-        indices = [int(idx.strip()) for idx in indices_str.split(',') if idx.strip()]
-        # Limit to 3 rows
-        indices = indices[:3]
-        # Get selected rows
+        indices = [int(idx.strip()) for idx in indices_str.split(',') if idx.strip()][:3]
         selected_rows = [df_data[i] for i in indices if 0 <= i < len(df_data)]
         return generate_radar_plot(selected_rows)
-    except (ValueError, IndexError):
+    except:
         return generate_radar_plot([])
 
 
-# Gradio UI
-
 def build_app() -> gr.Blocks:
+    # NUCLEAR CSS FIX: Overwrite all generic Gradio variables to force light mode
     row_css = """
-    /* ============================================================ */
-    /* GLOBAL RESET: Force Light Mode Colors Everywhere */
-    /* ============================================================ */
-    
-    /* 1. Main Backgrounds */
-    body, .gradio-container { 
-        background-color: #f5f7fa !important; 
-    }
-
-    /* 2. Force ALL Text to be Dark */
-    .gradio-container, 
-    .gradio-container p, 
-    .gradio-container h1, .gradio-container h2, .gradio-container h3, 
-    .gradio-container span, 
-    .gradio-container label, 
-    .gradio-container div,
-    .gradio-container .prose,
-    .gradio-container .prose * {
-        color: #24292e !important;
+    /* 1. FORCE LIGHT VARIABLES GLOBALLY */
+    :root, .gradio-container, body {
+        --body-background-fill: #f5f7fa !important;
+        --body-text-color: #374151 !important;
+        --background-fill-primary: #ffffff !important;
+        --background-fill-secondary: #f3f4f6 !important;
+        --border-color-primary: #e5e7eb !important;
+        --block-background-fill: #ffffff !important;
+        --block-label-text-color: #374151 !important;
+        --block-title-text-color: #1f2937 !important;
+        --input-background-fill: #ffffff !important;
+        --color-accent: #0366d6 !important;
+        
+        /* Reset dark mode specific variables to light values */
+        --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb;
+        --neutral-300: #d1d5da; --neutral-400: #9ca3af; --neutral-500: #6b7280;
+        --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937;
     }
 
-    /* 3. Force Internal Blocks & Forms to be White (Fixes black anchors/backgrounds) */
+    /* 2. RESET STANDARD CONTAINERS */
     .gradio-container .block, 
-    .gradio-container .form, 
-    .gradio-container .wrap, 
-    .gradio-container .row, 
-    .gradio-container .column {
-        background-color: transparent !important;
-    }
-
-    /* 4. Fix specific Markdown Containers */
-    .filter-section .prose, 
-    .gradio-container .prose {
-        background-color: transparent !important;
-    }
-
-    /* 5. Inputs (Search box) */
-    .gradio-container input, 
-    .gradio-container textarea, 
-    .gradio-container select {
-        background-color: #ffffff !important;
-        color: #24292e !important;
+    .gradio-container .panel, 
+    .gradio-container .form {
+        background-color: white !important;
         border-color: #e1e4e8 !important;
     }
 
-    /* 6. Fix Checkbox Groups */
-    .gradio-container .wrap.default,
-    .gradio-container .block {
-        background-color: transparent !important;
-    }
-    
-    /* The individual checkboxes */
-    .gradio-container label.svelte-1b8605, 
-    .gradio-container label {
-        background-color: white !important;
-        border-color: #e1e4e8 !important;
+    /* 3. SPECIFIC FIX FOR THE DARK "FILTERS" and "RADAR" SECTIONS */
+    /* This targets the class you added in python: elem_classes="filter-section" */
+    .filter-section {
+        background-color: #ffffff !important;
+        border: 2px solid #e1e4e8 !important;
+        border-radius: 8px !important;
+        padding: 16px !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
     }
     
-    /* Force checkbox text to be visible */
-    .gradio-container label span {
+    /* Ensure NO child elements inside filter-section have dark backgrounds */
+    .filter-section * {
+        background-color: transparent !important;
         color: #24292e !important;
     }
 
-    /* ============================================================ */
-    /* COMPONENT SPECIFIC STYLING */
-    /* ============================================================ */
-
-    /* Search Box Container */
-    .search-box {
-        background: white !important; padding: 16px !important;
-        border-radius: 6px; border: 2px solid #e1e4e8 !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); margin-bottom: 16px;
+    /* Re-apply white background to inputs specifically */
+    .filter-section input, 
+    .filter-section textarea, 
+    .filter-section select {
+        background-color: #ffffff !important;
+        border: 1px solid #d1d5da !important;
+        color: #24292e !important;
     }
 
-    /* Filter Section & Accordion Container */
-    .filter-section, .gradio-container .accordion {
-        background: white !important; 
-        border: 2px solid #e1e4e8 !important; 
-        border-radius: 6px !important; 
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    /* Fix Checkboxes: Ensure the box itself is visible */
+    .filter-section input[type="checkbox"] {
+        background-color: #ffffff !important;
+        border: 1px solid #d1d5da !important;
+        accent-color: #0366d6 !important;
     }
 
-    /* Fix the "Anchor" backgrounds (Markdown Headers inside Groups) */
-    .filter-section h3, .gradio-container h3 {
-        background-color: white !important;
-        margin-top: 0 !important;
-        padding-top: 5px;
-    }
-    
-    /* Accordion Header - Fix for Day/Night button colors */
-    .gradio-container .accordion button,
-    .gradio-container .accordion span {
-        background-color: white !important;
+    /* Fix "How to use" Text (Markdown/Prose) */
+    .filter-section .prose, 
+    .filter-section .prose p, 
+    .filter-section .prose strong {
         color: #24292e !important;
-    }
-    .gradio-container .accordion svg {
-        fill: #24292e !important; /* Arrows */
+        opacity: 1 !important;
     }
 
-    /* Info Section (The invisible text area) */
-    .info-section { padding: 16px; background: white !important; }
-    
-    /* Links should remain Blue */
-    .gradio-container a, .gradio-container .prose a { 
-        color: #0366d6 !important; 
-        text-decoration: none;
+    /* 4. SEARCH BOX */
+    .search-box {
+        background: white !important;
+        padding: 16px !important;
+        border-radius: 6px;
+        border: 2px solid #e1e4e8 !important;
+        margin-bottom: 16px;
     }
-    .gradio-container a:hover { text-decoration: underline; }
-
-    /* Checkbox Accent Color */
-    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
 
-    /* ============================================================ */
-    /* TABLE STYLING */
-    /* ============================================================ */
-    
+    /* 5. TABLE STYLING */
     .table-container {
-        overflow-x: auto; overflow-y: auto; max-height: 75vh;
-        border: 2px solid #e1e4e8; border-radius: 6px;
-        background: white !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        overflow-x: auto; 
+        max-height: 75vh;
+        border: 2px solid #e1e4e8; 
+        border-radius: 6px;
+        background: white !important;
     }
-
-    .gradio-container table.metrics-table { 
-        border-collapse: collapse; width: 100%; background: white !important; 
+    table.metrics-table { 
+        width: 100%; border-collapse: collapse; background: white !important; 
     }
-    
-    .gradio-container table.metrics-table th, 
-    .gradio-container table.metrics-table td {
-        padding: 10px 14px; 
-        border: 1.5px solid #e1e4e8; 
-        white-space: nowrap;
-        font-size: 13px; 
-        text-align: left; 
-        background-color: white !important;
-        color: #24292e !important;
+    table.metrics-table th, table.metrics-table td {
+        padding: 10px 14px; border: 1px solid #e1e4e8; 
+        white-space: nowrap; font-size: 13px; color: #24292e !important;
     }
-    
-    .gradio-container table.metrics-table th {
-        background: #f6f8fa !important; /* Light grey header */
-        font-weight: 600; position: sticky; top: 0; z-index: 10;
-        border-bottom: 2px solid #d1d5da;
+    table.metrics-table th {
+        background: #f6f8fa !important; font-weight: 600; position: sticky; top: 0;
     }
-    
-    /* Row Number Column */
     .metrics-table th:first-child, .metrics-table td:first-child {
-        width: 60px !important; text-align: center !important;
-        background-color: #f0f0f0 !important;
+        background-color: #f0f0f0 !important; text-align: center;
     }
 
-    /* Plot Container */
-    .gradio-container .plot-container { width: 100% !important; background: white !important; }
+    /* 6. PLOT CONTAINER */
+    .plot-container { width: 100% !important; background: white !important; }
+    
+    /* 7. LINKS */
+    a { color: #0366d6 !important; text-decoration: none; }
+    a:hover { text-decoration: underline; }
     """
 
     with gr.Blocks(title="MoE-CAP Dashboard", css=row_css, theme=gr.themes.Default()) as demo:
         gr.Markdown("# MoE-CAP Dashboard")
 
         with gr.Row():
-            # Left side - Filters (narrower)
+            # Left Sidebar
             with gr.Column(scale=2):
                 with gr.Group(elem_classes="search-box"):
-                    search_input = gr.Textbox(
-                        label="🔍 Search",
-                        placeholder="Search across all columns...",
-                        lines=1
-                    )
+                    search_input = gr.Textbox(label="🔍 Search", placeholder="Search...", lines=1)
                 
                 with gr.Group(elem_classes="filter-section"):
                     gr.Markdown("### 🎛️ Filters")
-                    
                     dir_path = gr.State(RESULT_DIR)
                     
                     task_filter = gr.CheckboxGroup(
                         label="📊 Tasks",
-                        choices=[
-                            ("GSM8K", "gsm8k"),
-                            ("LongBench", "longbench"),
-                            ("MMLU", "mmlu"),
-                            ("NuminaMath", "numinamath"),
-                            ("RULER", "ruler")
-                        ],
+                        choices=[("GSM8K", "gsm8k"), ("LongBench", "longbench"), ("MMLU", "mmlu"), ("NuminaMath", "numinamath"), ("RULER", "ruler")],
                         value=["gsm8k", "longbench", "mmlu", "numinamath", "ruler"]
                     )
-
-                    framework_filter = gr.CheckboxGroup(
-                        label="⚙️ Inference Frameworks",
-                        choices=["sglang", "vllm"],
-                        value=["sglang", "vllm"],
-                    )
-                    
-                    model_type_filter = gr.CheckboxGroup(
-                        label="🤖 Model Types",
-                        choices=["instruct", "thinking"],
-                        value=["instruct", "thinking"], 
-                    )
-                    
-                    precision_filter = gr.CheckboxGroup(
-                        label="🎯 Precision",
-                        choices=["bfloat16", "fp8"],
-                        value=["bfloat16", "fp8"],
-                    )
+                    framework_filter = gr.CheckboxGroup(label="⚙️ Frameworks", choices=["sglang", "vllm"], value=["sglang", "vllm"])
+                    model_type_filter = gr.CheckboxGroup(label="🤖 Model Types", choices=["instruct", "thinking"], value=["instruct", "thinking"])
+                    precision_filter = gr.CheckboxGroup(label="🎯 Precision", choices=["bfloat16", "fp8"], value=["bfloat16", "fp8"])
 
                 with gr.Accordion("📖 About Tasks & Metrics", open=True):
                     gr.Markdown(
-                        "### Tasks\n"
-                        "- **GSM8K** — Mathematics Problem-Solving ([paper](https://arxiv.org/abs/2110-14168))\n"
-                        "- **LongBench** — Long-Context Understanding ([paper](https://arxiv.org/abs/2412.15204))\n"
-                        "- **MMLU** — Multitask Language Understanding ([paper](https://arxiv.org/abs/2009.03300))\n"
-                        "- **NuminaMath** — Mathematical Reasoning ([paper](http://faculty.bicmr.pku.edu.cn/~dongbin/Publications/numina_dataset.pdf))\n"
-                        "- **RULER** — Extreme Long-Context Eval ([paper](https://arxiv.org/abs/2404.06654))\n\n"
-
-                        "### Metrics\n"
-                        "- **E2E(s)** — End-to-End Latency\n"
-                        "- **Accuracy(%)** — Task Accuracy\n"
-                        "- **Cost($)** — Inference Cost\n"
-                        "- **Decoding/Prefill T/s** — Throughput\n"
-                        "- **S-MBU/MFU(%)** — Hardware Utilization\n"
-                        "- **TTFT(s)** — Time To First Token\n"
-                        "- **TPOT(s)** — Time Per Output Token",
+                        "### Tasks\n- **GSM8K**, **LongBench**, **MMLU**, **NuminaMath**, **RULER**\n\n"
+                        "### Metrics\n- **E2E(s)**: Latency | **Cost($)** | **T/s**: Throughput | **S-MBU/MFU**: Utilization",
                         elem_classes="info-section"
                     )
 
-            # Right side - Table with selection and Radar Plot below
+            # Right Main Content
             with gr.Column(scale=5):
                 leaderboard_output = gr.HTML(label="📈 Results")
                 
                 with gr.Group(elem_classes="filter-section"):
                     gr.Markdown("### 📊 CAP Radar Plot")
-                    gr.Markdown(
-                        "**How to use:** Look at the 'Row #' column in the table above. "
-                        "Enter up to 3 row numbers below (separated by commas) and click Generate."
-                    )
+                    gr.Markdown("**How to use:** Look at the 'Row #' column in the table. Enter row numbers (e.g., 0,1,2) and click Generate.")
                     
                     with gr.Row():
-                        row_indices_input = gr.Textbox(
-                            label="Row Numbers to Compare",
-                            placeholder="Example: 0,1,2",
-                            elem_id="row_indices_input",
-                            scale=3
-                        )
-                        generate_btn = gr.Button("🎯 Generate", variant="primary", scale=1, size="lg")
+                        row_indices_input = gr.Textbox(label="Row Numbers", placeholder="0,1,2", scale=3)
+                        generate_btn = gr.Button("🎯 Generate", variant="primary", scale=1)
                     
-                    # Modified Layout: Removed surrounding columns to allow plot to fill full width
-                    radar_plot = gr.Plot(
-                        label="", 
-                        value=generate_radar_plot([]),
-                        elem_classes="plot-container"
-                    )
+                    radar_plot = gr.Plot(value=generate_radar_plot([]), elem_classes="plot-container")
 
+        # State & Events
         df_data_state = gr.State([])
+        inputs = [dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input]
         
-        demo.load(
-            fn=auto_refresh_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-
-        search_input.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
+        demo.load(fn=auto_refresh_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
+        search_input.change(fn=load_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
+        task_filter.change(fn=load_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
+        framework_filter.change(fn=load_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
+        model_type_filter.change(fn=load_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
+        precision_filter.change(fn=load_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
         
-        task_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-        framework_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-        model_type_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-        precision_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-
-        # Generate plot on button click
-        generate_btn.click(
-            fn=parse_and_generate_plot,
-            inputs=[df_data_state, row_indices_input],
-            outputs=[radar_plot]
-        )
+        generate_btn.click(fn=parse_and_generate_plot, inputs=[df_data_state, row_indices_input], outputs=[radar_plot])
         
-        timer = gr.Timer(60.0)
-        timer.tick(
-            fn=auto_refresh_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
+        gr.Timer(60.0).tick(fn=auto_refresh_from_dir, inputs=inputs, outputs=[leaderboard_output, df_data_state])
 
     return demo
-    
+
 if __name__ == "__main__":
     app = build_app()
     app.launch()