Plotly. Landing page.

app.py

@@ -2,6 +2,7 @@
 
 import gradio as gr
 import pandas as pd
+import plotly.graph_objects as go  # NEW: for interactive chart
 from apscheduler.schedulers.background import BackgroundScheduler
 from gradio_leaderboard import Leaderboard, SelectColumns
 from huggingface_hub import whoami
@@ -205,6 +206,69 @@ def _select_example_tab(choice: str):
     )
 
 
+# === Static, made-up results for the landing chart (not tied to leaderboard) ===
+TIER_TOTALS = {"Warmup": 100, "Tier 1": 100, "Tier 2": 20}  # dataset sizes
+MODELS_ORDER = ["GPT-5", "Gemini 2.5 Pro", "Grok 4", "Claude Opus 4", "o3 Pro"]
+STATIC_RESULTS = {
+    "Warmup": {
+        "GPT-5": 95,
+        "Gemini 2.5 Pro": 90,
+        "Grok 4": 84,
+        "Claude Opus 4": 92,
+        "o3 Pro": 88,
+    },
+    "Tier 1": {
+        "GPT-5": 38,
+        "Gemini 2.5 Pro": 30,
+        "Grok 4": 24,
+        "Claude Opus 4": 35,
+        "o3 Pro": 28,
+    },
+    "Tier 2": {
+        "GPT-5": 1,
+        "Gemini 2.5 Pro": 0,
+        "Grok 4": 0,
+        "Claude Opus 4": 0,
+        "o3 Pro": 0,
+    },
+}
+
+
+def build_accuracy_figure(tier: str):
+    """Create interactive bar chart with hover showing 'solved / total'."""
+    results = STATIC_RESULTS.get(tier, {})
+    total = TIER_TOTALS[tier]
+    x = MODELS_ORDER
+    y = [results[m] for m in x]
+    hover = [f"{m}<br><b>{v}/{total}</b> problems solved" for m, v in zip(x, y)]
+
+    fig = go.Figure(
+        data=[
+            go.Bar(
+                x=x,
+                y=y,
+                text=[f"{v}/{total}" for v in y],
+                textposition="auto",
+                hovertext=hover,
+                hoverinfo="text",
+                marker_line_width=0.5,
+            )
+        ]
+    )
+    fig.update_layout(
+        template="plotly_white",
+        margin=dict(l=30, r=20, t=10, b=40),
+        yaxis=dict(title="# Problems Solved", range=[0, total], dtick=max(5, total // 10)),
+        xaxis=dict(title=None),
+        height=420,
+    )
+    return fig
+
+
+# Precompute initial figure (Warmup)
+_initial_accuracy_fig = build_accuracy_figure("Warmup")
+
+
 # Force light theme even if HF user prefers dark
 blocks = gr.Blocks(
     css=custom_css,
@@ -214,7 +278,34 @@ blocks = gr.Blocks(
 with blocks:
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
-        with gr.TabItem("What is FormulaOne", id=0, elem_id="what-is-tab"):
+        # === NEW LANDING TAB (first) ===
+        with gr.TabItem("Model Accuracy on FormulaOne", id=0, elem_id="landing-accuracy-tab"):
+            gr.Markdown(
+                "The chart below summarizes static (non-live) results for model performance on FormulaOne.",
+                elem_classes="markdown-text",
+            )
+
+            # Selector aligned to the top-right (see CSS)
+            with gr.Row(elem_id="f1-tier-select-row"):
+                tier_selector = gr.Radio(
+                    choices=list(TIER_TOTALS.keys()),
+                    value="Warmup",
+                    label=None,
+                    show_label=False,
+                    elem_id="f1-tier-select",
+                )
+
+            accuracy_plot = gr.Plot(value=_initial_accuracy_fig)
+
+            # Wire selector → plot
+            tier_selector.change(
+                lambda t: build_accuracy_figure(t),
+                inputs=tier_selector,
+                outputs=accuracy_plot,
+            )
+
+        # Existing "What is FormulaOne" tab
+        with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
 
             gr.Image(
                 "assets/banner.png",
@@ -336,7 +427,7 @@ with blocks:
             gr.HTML(WHAT_IS_F1_HTML_AFTER_TIER1FIG_TAIL)
 
         # Rename tab to "Leaderboard" and cap at 800px width
-        with gr.TabItem("Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
+        with gr.TabItem("Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=2):
             gr.Markdown(
                 """
                 Welcome to the FormulaOne leaderboard. This table tracks the performance of various systems on the FormulaOne benchmark.
@@ -348,7 +439,7 @@ with blocks:
             assert leaderboard_df is not None
             leaderboard_component = init_leaderboard(leaderboard_df)
 
-        with gr.TabItem("Submit Solutions", elem_id="formulaone-submit-tab-table", id=2):
+        with gr.TabItem("Submit Solutions", elem_id="formulaone-submit-tab-table", id=3):
             logger.info("Tab submission")
             with gr.Column():
                 with gr.Row():

requirements.txt

@@ -14,4 +14,5 @@ python-dateutil
 tqdm
 transformers
 tokenizers>=0.15.0
-sentencepiece
+sentencepiece
+plotly>=5

src/display/css_html_js.py

@@ -18,6 +18,10 @@ custom_css = """
 /* requested 710px */
 #f1-examples { max-width: 710px; margin: 0 auto; }
 
+/* NEW: landing tab width + tier selector alignment */
+#landing-accuracy-tab { max-width: 800px; margin-left: auto; margin-right: auto; }
+#f1-tier-select-row { justify-content: flex-end; margin-bottom: 6px; }
+
 /* Text */
 .f1-p, .f1-li { line-height: 1.75; color: #374151; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }