update_front (#37)

- Modify UI (49ba0274bc51d342dac415d3ecb0cfc5141c9b10)

app.py

@@ -14,6 +14,7 @@ if not RESULT_DIR:
 import gradio as gr
 import pandas as pd
 from datasets import load_dataset
+import plotly.graph_objects as go
 
 
 def f2(x):
@@ -23,6 +24,166 @@ def f2(x):
     return x
 
 
+def normalize(val, vmin, vmax, baseline=20):
+    """Normalize value to baseline-100 range."""
+    if vmax == vmin:
+        return baseline + 40
+    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:
+        return baseline + 40
+    return baseline + (max_tick - min(val, max_tick)) / max_tick * (100 - baseline)
+
+
+def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
+    """Generate a CAP radar plot from selected rows."""
+    # Validation: max 3 rows, all same dataset
+    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.05, y=0.5, showarrow=False,
+            font=dict(size=16)
+        )
+        fig.update_layout(height=600, width=900)
+        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,
+            font=dict(size=18, color="red")
+        )
+        fig.update_layout(height=600, width=900)
+        return fig
+    datasets = [row.get('Dataset', '') for row in selected_rows_data]
+    unique_datasets = set(datasets)
+    if len(unique_datasets) > 1:
+        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,
+            font=dict(size=18, color="red")
+        )
+        fig.update_layout(height=600, width=900)
+        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:
+                model_name = model_name.split('>', 1)[1].split('<', 1)[0]
+            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 /
+        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
+            throughput = float(throughput) if throughput not in [None, '-', ''] else 0
+        except:
+            acc, cost, throughput = 0, 0, 0
+        
+        data[legend_name] = {
+            'accuracy': acc / 100.0 if acc > 1 else acc,  # Normalize to 0-1
+            '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()]
+    
+    tp_min, tp_max = (min(throughputs), max(throughputs)) if throughputs else (0, 1)
+    cost_max = max(costs) if costs else 1
+    acc_min, acc_max = (min(accs), 1.0) if accs else (0, 1)
+    
+    baseline = 20
+    categories = ['Throughput (T/s)', 'Cost ($)', 'Accuracy', 'Throughput (T/s)']
+    
+    fig = go.Figure()
+    
+    for system, values in data.items():
+        raw_vals = [values['throughput'], values['cost'], values['accuracy']]
+        norm_vals = [
+            normalize(values['throughput'], tp_min, tp_max, baseline),
+            normalize_cost(values['cost'], cost_max, baseline),
+            normalize(values['accuracy'], acc_min, acc_max, baseline)
+        ]
+        norm_vals += [norm_vals[0]]  # Close the loop
+        
+        hovertext = [
+            f"Throughput: {raw_vals[0]:.2f} T/s",
+            f"Cost: ${raw_vals[1]:.2f}",
+            f"Accuracy: {raw_vals[2]*100:.2f}%",
+            f"Throughput: {raw_vals[0]:.2f} T/s"
+        ]
+        
+        fig.add_trace(go.Scatterpolar(
+            r=norm_vals,
+            theta=categories,
+            fill='toself',
+            name=system,
+            text=hovertext,
+            hoverinfo='text+name',
+            line=dict(width=2)
+        ))
+    
+    fig.update_layout(
+        title=f"CAP Radar Plot: {dataset_name}",
+        polar=dict(
+            radialaxis=dict(visible=True, range=[0, 100], tickfont=dict(size=10)),
+            angularaxis=dict(
+                tickfont=dict(size=12),
+                rotation=30,
+                direction='clockwise'
+            ),
+        ),
+        legend=dict(orientation='h', yanchor='bottom', y=-0.2, xanchor='center', x=0.5),
+        margin=dict(t=100, b=120, l=100, r=1000),
+        height=700,
+        width=1500,
+        paper_bgcolor='white',
+        plot_bgcolor='white'
+    )
+    
+    return fig
+
+
 def json_to_row(path: str, metrics: dict) -> dict:
     model_name = metrics.get("model_name")
     if not model_name:
@@ -63,7 +224,6 @@ def json_to_row(path: str, metrics: dict) -> dict:
         "Model type": model_type,
         "Precision": precision,
         "E2E(s)": f2(e2e_s),                  
-        "Batch size": batch_size,            
         "GPU": gpu_type,                    
         "Accuracy(%)": pct(acc),
         "Cost($)": cost,
@@ -75,6 +235,7 @@ 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
     }
     return row
 
@@ -219,7 +380,7 @@ def load_from_dir(
 
     if df.empty:
         empty_html = "<p>No records found.</p>"
-        return empty_html
+        return empty_html, []
     
     df = df.fillna("-")
     raw_models = set()
@@ -244,8 +405,14 @@ def load_from_dir(
             links.append(str(name))
     models_str = ", ".join(links)
 
+    # Insert row number column at the beginning for easy reference
+    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>'
-    return table_html
+    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(
@@ -267,6 +434,38 @@ 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():
+        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
+        selected_rows = [df_data[i] for i in indices if 0 <= i < len(df_data)]
+        return generate_radar_plot(selected_rows)
+    except (ValueError, IndexError):
+        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:
@@ -275,6 +474,16 @@ def build_app() -> gr.Blocks:
     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;
+        background-color: #f0f0f0 !important;
+    }
 
     /* The outer Group container */
     .search-box {
@@ -571,7 +780,7 @@ def build_app() -> gr.Blocks:
                         value=["bfloat16", "fp8"],
                     )
 
-                with gr.Accordion("📖 About Tasks & Metrics", open=False):
+                with gr.Accordion("📖 About Tasks & Metrics", open=True):
                     gr.Markdown(
                         "### Tasks\n"
                         "- **GSM8K** — Mathematics Problem-Solving ([paper](https://arxiv.org/abs/2110-14168))\n"
@@ -591,48 +800,81 @@ def build_app() -> gr.Blocks:
                         elem_classes="info-section"
                     )
 
-            # Right side - Table (wider)
+            # Right side - Table with selection and Radar Plot below
             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."
+                    )
+                    
+                    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")
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            pass
+                        with gr.Column(scale=5):
+                            radar_plot = gr.Plot(label="", value=generate_radar_plot([]))
+                        with gr.Column(scale=1):
+                            pass
+
+        df_data_state = gr.State([])
+        
         demo.load(
             fn=auto_refresh_from_dir,
             inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output],
+            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],
+            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],
+            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],
+            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],
+            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],
+            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]
+        )
+        
         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],
+            outputs=[leaderboard_output, df_data_state],
         )
 
     return demo

requirements.txt

@@ -1,4 +1,6 @@
 gradio>=4.44.0
 pandas
 datasets
-huggingface_hub<0.25.0
+huggingface_hub<0.25.0
+plotly>=5.0.0
+kaleido>=0.2.1