Update app.py

app.py

@@ -7,6 +7,8 @@ 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
+    # 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"
     )
@@ -48,12 +50,16 @@ 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."""
     
-    # --- COMMON LAYOUT SETTINGS ---
-    # We use balanced margins here so the chart is centered.
-    # l=80, r=80 gives space for labels. b=100 gives space for the legend.
-    common_margin = dict(t=80, b=100, l=80, r=80)
-    
-    # Validation: max 3 rows, all same dataset
+    # 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
+        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(
@@ -65,12 +71,9 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             yanchor='middle'
         )
         fig.update_layout(
-            height=600, # Reduced slightly to fit screens better
             xaxis=dict(visible=False),
             yaxis=dict(visible=False),
-            paper_bgcolor='white',
-            plot_bgcolor='white',
-            margin=common_margin # Use balanced margins
+            **layout_settings
         )
         return fig
         
@@ -85,12 +88,9 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             yanchor='middle'
         )
         fig.update_layout(
-            height=600, 
             xaxis=dict(visible=False),
             yaxis=dict(visible=False),
-            paper_bgcolor='white',
-            plot_bgcolor='white',
-            margin=common_margin # Use balanced margins
+            **layout_settings
         )
         return fig
         
@@ -107,12 +107,9 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             yanchor='middle'
         )
         fig.update_layout(
-            height=600, 
             xaxis=dict(visible=False),
             yaxis=dict(visible=False),
-            paper_bgcolor='white',
-            plot_bgcolor='white',
-            margin=common_margin # Use balanced margins
+            **layout_settings
         )
         return fig
         
@@ -203,7 +200,7 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
         title=dict(
             text=f"CAP Radar Plot: {dataset_name}",
             x=0.5,
-            xanchor='center', # Center the title
+            xanchor='center',
             font=dict(size=20)
         ),
         polar=dict(
@@ -214,25 +211,19 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             ),
             angularaxis=dict(
                 tickfont=dict(size=14),
-                rotation=90, # Rotated to put Throughput at top
+                rotation=90, # Rotate so top is 12 o'clock
                 direction='clockwise'
             ),
         ),
         legend=dict(
             orientation='h', 
             yanchor='bottom', 
-            y=-0.15, # Lowered slightly to fit bottom margin
+            y=-0.15, 
             xanchor='center', 
             x=0.5,
             font=dict(size=13)
         ),
-        # UPDATED MARGINS HERE
-        margin=common_margin, 
-        height=700,
-        # Removed fixed 'width' to allow Gradio to resize it responsively
-        autosize=True, 
-        paper_bgcolor='white',
-        plot_bgcolor='white'
+        **layout_settings
     )
     
     return fig
@@ -289,83 +280,11 @@ def json_to_row(path: str, metrics: dict) -> dict:
         "Decoding<br>S-MFU(%)": pct(metrics.get("decoding_smfu")),
         "TTFT(s)": f2(metrics.get("ttft")),
         "TPOT(s)": f2(metrics.get("tpot")),
-        "Batch size": batch_size,  # moved to tail
+        "Batch size": batch_size,  
     }
     return row
 
 
-def build_leaderboard_from_files(files: List[gr.File], prev_rows: list | None = None):
-    if prev_rows is None:
-        prev_rows = []
-
-    if not files and prev_rows:
-        df = pd.DataFrame(prev_rows)
-        raw_models = set()
-        for cell in df["Model"].tolist():
-            if isinstance(cell, str) and "href" in cell:
-                try:
-                    name = cell.split(">", 1)[1].split("<", 1)[0]
-                except Exception:
-                    name = cell
-            else:
-                name = cell
-            raw_models.add(name)
-        links = []
-        for name in sorted(raw_models):
-            if isinstance(name, str) and "/" in name:
-                hf_url = f"https://huggingface.co/{name}"
-                links.append(f"[{name}]({hf_url})")
-            else:
-                links.append(str(name))
-        models_str = ", ".join(links)
-        summary_md = f"**Loaded {len(prev_rows)} result files.** \n**Models:** {models_str}"
-        table_html = f'<div class="table-container">{df.to_html(escape=False, index=False, classes="metrics-table")}</div>'
-        return summary_md, table_html, prev_rows
-
-    new_rows = []
-    if files:
-        for f in files:
-            path = f.name
-            try:
-                with open(path, "r", encoding="utf-8") as fp:
-                    metrics = json.load(fp)
-                new_rows.append(json_to_row(path, metrics))
-            except Exception:
-                continue
-
-    all_rows = prev_rows + new_rows
-
-    if not all_rows:
-        empty_html = "<p>No files loaded.</p>"
-        return "No files uploaded.", empty_html, []
-
-    df = pd.DataFrame(all_rows)
-
-    raw_models = set()
-    for cell in df["Model"].tolist():
-        if isinstance(cell, str) and "href" in cell:
-            try:
-                name = cell.split(">", 1)[1].split("<", 1)[0]
-            except Exception:
-                name = cell
-        else:
-            name = cell
-        raw_models.add(name)
-    links = []
-    for name in sorted(raw_models):
-        if isinstance(name, str) and "/" in name:
-            hf_url = f"https://huggingface.co/{name}"
-            links.append(f"[{name}]({hf_url})")
-        else:
-            links.append(str(name))
-    models_str = ", ".join(links)
-    summary_md = f"**Loaded {len(all_rows)} result files.** \n**Models:** {models_str}"
-
-    table_html = f'<div class="table-container">{df.to_html(escape=False, index=False, classes="metrics-table")}</div>'
-
-    return summary_md, table_html, all_rows
-
-
 def load_from_dir(
     dir_path: str,
     selected_tasks: List[str] | None = None,
@@ -388,7 +307,7 @@ def load_from_dir(
         )
     except Exception as e:
         empty_html = "<p>No files loaded or Dataset not found.</p>"
-        return empty_html
+        return empty_html, []
 
     rows = []
     for i, example in enumerate(ds):
@@ -400,35 +319,29 @@ def load_from_dir(
 
     if not rows:
         empty_html = "<p>No records found.</p>"
-        return empty_html
+        return empty_html, []
 
     df = pd.DataFrame(rows)
 
-    # Dataset filter
+    # 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)]
 
-
-    # Inference framework filter (Method)
     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)]
 
-    # Model type filter
     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)]
 
-    # Precision filter
     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)]
 
-    # Search keyword filter - search across all columns
     if search_keyword and search_keyword.strip():
         keyword_lower = search_keyword.strip().lower()
-        # Create a mask that checks if the keyword appears in any column
         mask = df.astype(str).apply(lambda row: row.str.lower().str.contains(keyword_lower).any(), axis=1)
         df = df[mask]
 
@@ -437,29 +350,8 @@ def load_from_dir(
         return empty_html, []
     
     df = df.fillna("-")
-    raw_models = set()
-
-
-    for cell in df["Model"].tolist():
-        if isinstance(cell, str) and "href" in cell:
-            try:
-                name = cell.split(">", 1)[1].split("<", 1)[0]
-            except Exception:
-                name = cell
-        else:
-            name = cell
-        raw_models.add(name)
-
-    links = []
-    for name in sorted(raw_models):
-        if isinstance(name, str) and "/" in name:
-            hf_url = f"https://huggingface.co/{name}"
-            links.append(f"[{name}]({hf_url})")
-        else:
-            links.append(str(name))
-    models_str = ", ".join(links)
-
-    # Insert row number column at the beginning for easy reference
+    
+    # Insert row number column at the beginning
     df.insert(0, 'Row #', range(len(df)))
     
     # Create HTML table
@@ -488,16 +380,6 @@ def auto_refresh_from_dir(
     )
 
 
-def update_radar_plot(df_data: list, selected_indices: list):
-    """Update radar plot based on selected row indices."""
-    if not selected_indices or not df_data:
-        return generate_radar_plot([])
-    
-    # Get selected rows (limit to 3)
-    selected_rows = [df_data[i] for i in selected_indices[:3] if i < len(df_data)]
-    return generate_radar_plot(selected_rows)
-
-
 def parse_and_generate_plot(df_data: list, indices_str: str):
     """Parse comma-separated indices and generate radar plot."""
     if not indices_str or not indices_str.strip():
@@ -515,273 +397,79 @@ def parse_and_generate_plot(df_data: list, indices_str: str):
         return generate_radar_plot([])
 
 
-def on_table_select(df, evt: gr.SelectData):
-    """Handle table row selection."""
-    return evt.index
-
-
 # Gradio UI
 
 def build_app() -> gr.Blocks:
     row_css = """
-    /* Force light theme everywhere */
-    body {
-        background-color: #f5f7fa !important;
-    }
+    body { background-color: #f5f7fa !important; }
     
     /* Row number column styling */
-    .metrics-table th:first-child,
-    .metrics-table td:first-child {
-        width: 60px !important;
-        text-align: center !important;
-        padding: 8px !important;
-        font-weight: 600 !important;
+    .metrics-table th:first-child, .metrics-table td:first-child {
+        width: 60px !important; text-align: center !important;
+        padding: 8px !important; font-weight: 600 !important;
         background-color: #f0f0f0 !important;
     }
-    /* The outer Group 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;
+        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;
     }
-    /* Reset the internal Gradio Block styles so they fit in the white box */
-    .search-box .block {
-        background: transparent !important;
-        border: none !important;
-        padding: 0 !important;
-    }
-    /* Style the Label Text (🔍 Search) */
-    .search-box label span {
-        color: #24292e !important;
-        font-weight: 600;
-        font-size: 14px;
-        margin-bottom: 8px;
-        background: transparent !important;
-    }
-    /* Style the actual Input Field */
+    .search-box .block { background: transparent !important; border: none !important; padding: 0 !important; }
+    .search-box label span { color: #24292e !important; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
     .search-box input.scroll-hide {
-        background-color: white !important;
-        color: #24292e !important;
-        border: 1.5px solid #e1e4e8 !important;
-        border-radius: 4px !important;
-        padding: 10px !important;
-        box-shadow: none !important;
-    }
-    /* Fix focus state */
-    .search-box input.scroll-hide:focus {
-        border-color: #0366d6 !important;
-        ring: 0 !important;
-        outline: none !important;
-    }
-    
-    .gradio-container {
-        max-width: 100% !important;
-        padding: 20px !important;
-        background-color: #f5f7fa !important;
-    }
-    
-    /* Override all dark backgrounds */
-    .gradio-container .block,
-    .gradio-container .form,
-    .gradio-container fieldset,
-    .gradio-container .input-block,
-    .gradio-container .wrap,
-    .gradio-container .gr-box,
-    .gradio-container .gr-form,
-    .gradio-container .gr-input {
-        background-color: white !important;
-        border-color: #e1e4e8 !important;
-    }
-    
-    .gradio-container label {
-        background-color: transparent !important;
-        color: #24292e !important;
-    }
-    
-    /* Remove any potential dark wrappers */
-    .gradio-container > div,
-    .gradio-container .container {
-        background-color: transparent !important;
+        background-color: white !important; color: #24292e !important;
+        border: 1.5px solid #e1e4e8 !important; border-radius: 4px !important;
+        padding: 10px !important; box-shadow: none !important;
     }
+    .search-box input.scroll-hide:focus { border-color: #0366d6 !important; outline: none !important; }
     
-    /* Force all text to be dark */
-    .gradio-container,
-    .gradio-container label,
-    .gradio-container p,
-    .gradio-container span,
-    .gradio-container div {
-        color: #24292e !important;
+    .gradio-container { max-width: 100% !important; padding: 20px !important; background-color: #f5f7fa !important; }
+    .gradio-container .block, .gradio-container .form, .gradio-container .gr-box, .gradio-container .gr-input {
+        background-color: white !important; border-color: #e1e4e8 !important;
     }
+    .gradio-container label, .gradio-container p, .gradio-container span, .gradio-container div { color: #24292e !important; }
     
     /* Table styling */
-    .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;
-        color: #24292e !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; color: #24292e !important;
     }
-    
     .gradio-container table.metrics-table th {
         background: linear-gradient(to bottom, #fafbfc, #f6f8fa);
-        font-weight: 600;
-        color: #24292e !important;
-        position: sticky;
-        top: 0;
-        z-index: 10;
+        font-weight: 600; position: sticky; top: 0; z-index: 10;
         border-bottom: 2px solid #d1d5da;
     }
+    .gradio-container table.metrics-table tbody tr:nth-child(even) { background-color: #f6f8fa; }
+    .gradio-container table.metrics-table tbody tr:hover { background-color: #e1e4e8; }
+    .gradio-container table.metrics-table { border-collapse: collapse; width: 100%; background: white; }
+    .gradio-container table.metrics-table a { color: #0366d6 !important; text-decoration: none; }
+    .gradio-container table.metrics-table a:hover { text-decoration: underline; }
     
-    .gradio-container table.metrics-table tbody tr:nth-child(even) {
-        background-color: #f6f8fa;
-    }
-    
-    .gradio-container table.metrics-table tbody tr:hover {
-        background-color: #e1e4e8;
-    }
-    
-    .gradio-container table.metrics-table {
-        border-collapse: collapse;
-        width: 100%;
-        background: white;
-    }
-    
-    .gradio-container table.metrics-table a {
-        color: #0366d6 !important;
-        text-decoration: none;
-    }
-    
-    .gradio-container table.metrics-table a:hover {
-        color: #0366d6 !important;
-        text-decoration: underline;
-    }
-    
-    .gradio-container .plot-container {
-        width: 100% !important;
-        max-width: 1200px !important;
-    }
+    /* Allow plot container to expand */
+    .gradio-container .plot-container { width: 100% !important; }
     
-    /* Scrollable table container */
     .table-container {
-        overflow-x: auto;
-        overflow-y: auto;
-        max-height: 75vh;
-        border: 2px solid #e1e4e8;
-        border-radius: 6px;
-        background: white;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        overflow-x: auto; overflow-y: auto; max-height: 75vh;
+        border: 2px solid #e1e4e8; border-radius: 6px;
+        background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
-    
-    /* Filter section styling */
     .filter-section {
-        background: white !important;
-        padding: 0 !important;
-        border-radius: 6px;
-        border: 2px solid #e1e4e8 !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    }
-    
-    .filter-section * {
-        color: #24292e !important;
-    }
-    
-    .filter-section .wrap,
-    .filter-section .block,
-    .filter-section .container,
-    .filter-section .group,
-    .filter-section > div,
-    .filter-section > div > div {
-        background: transparent !important;
-    }
-    
-    .filter-section .wrap {
-        padding: 20px !important;
-    }
-    
-    .filter-section label {
-        background: transparent !important;
-        color: #24292e !important;
+        background: white !important; padding: 0 !important; border-radius: 6px;
+        border: 2px solid #e1e4e8 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
-    
-    .filter-section fieldset {
-        background: transparent !important;
-        border-color: #e1e4e8 !important;
-    }
-    
-    /* Accordion styling */
+    .filter-section .wrap, .filter-section .block, .filter-section .container, .filter-section .group { background: transparent !important; }
+    .filter-section .wrap { padding: 20px !important; }
     .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);
-    }
-    
-    .gradio-container .accordion * {
-        color: #24292e !important;
-    }
-    
-    .gradio-container .accordion label {
-        background: transparent !important;
-        color: #24292e !important;
-    }
-    
-    .gradio-container .accordion button {
-        background: transparent !important;
-        color: #24292e !important;
-    }
-    
-    /* Info section */
-    .info-section {
-        padding: 16px;
-        background: white !important;
-    }
-    
-    /* Make text in info section dark */
-    .info-section p,
-    .info-section li,
-    .info-section ul,
-    .info-section h3,
-    .info-section strong,
-    .info-section * {
-        color: #24292e !important;
-    }
-    
-    .info-section a {
-        color: #0366d6 !important;
-    }
-    
-    /* Override any dark backgrounds in groups and accordions */
-    .gradio-container .group, 
-    .gradio-container .accordion,
-    .gradio-container .panel {
-        background-color: white !important;
-    }
-    
-    /* Heading styling */
-    .gradio-container h1 {
-        color: #24292e !important;
-        font-weight: 700;
-        margin-bottom: 24px;
-    }
-    
-    .gradio-container h3 {
-        color: #24292e !important;
-        font-weight: 600;
-        margin-bottom: 16px;
-    }
-    
-    /* Checkbox styling */
-    .gradio-container input[type="checkbox"] {
-        accent-color: #0366d6 !important;
-    }
+        background: white !important; border: 2px solid #e1e4e8 !important;
+        border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    }
+    .info-section { padding: 16px; background: white !important; }
+    .info-section a { color: #0366d6 !important; }
+    .gradio-container h1 { color: #24292e !important; font-weight: 700; margin-bottom: 24px; }
+    .gradio-container h3 { color: #24292e !important; font-weight: 600; margin-bottom: 16px; }
+    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
     """
 
-    # Use Gradio's default (light) theme explicitly
     with gr.Blocks(title="MoE-CAP Dashboard", css=row_css, theme=gr.themes.Default()) as demo:
         gr.Markdown("# MoE-CAP Dashboard")
 
@@ -800,7 +488,6 @@ def build_app() -> gr.Blocks:
                     
                     dir_path = gr.State(RESULT_DIR)
                     
-                    # 1) Tasks filter
                     task_filter = gr.CheckboxGroup(
                         label="📊 Tasks",
                         choices=[
@@ -813,21 +500,18 @@ def build_app() -> gr.Blocks:
                         value=["gsm8k", "longbench", "mmlu", "numinamath", "ruler"]
                     )
 
-                    # 2) Inference frameworks filter
                     framework_filter = gr.CheckboxGroup(
                         label="⚙️ Inference Frameworks",
                         choices=["sglang", "vllm"],
                         value=["sglang", "vllm"],
                     )
                     
-                    # 3) Model types filter
                     model_type_filter = gr.CheckboxGroup(
                         label="🤖 Model Types",
                         choices=["instruct", "thinking"],
                         value=["instruct", "thinking"], 
                     )
                     
-                    # 4) Precision filter
                     precision_filter = gr.CheckboxGroup(
                         label="🎯 Precision",
                         choices=["bfloat16", "fp8"],
@@ -874,13 +558,12 @@ def build_app() -> gr.Blocks:
                         )
                         generate_btn = gr.Button("🎯 Generate", variant="primary", scale=1, size="lg")
                     
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            pass
-                        with gr.Column(scale=3):
-                            radar_plot = gr.Plot(label="", value=generate_radar_plot([]))
-                        with gr.Column(scale=1):
-                            pass
+                    # 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"
+                    )
 
         df_data_state = gr.State([])