Merge commit 'e717fbe44d50f3d613cefd3dd2c1b92cb74e6075' into alvinn/add_terms

app.py

@@ -273,21 +273,24 @@ ACCURACY_PCT = {
 
 
 def build_accuracy_figure(tier: str):
-    """Interactive scatter: x = release date, y = accuracy (%). Hover shows solved/total."""
+    """Interactive scatter: x = release date (ISO str), y = accuracy (%). Hover shows solved/total."""
     total = TIER_TOTALS[tier]
     fig = go.Figure()
 
     for model in MODELS_ORDER:
-        date_str = MODEL_RELEASES[model]
-        y = ACCURACY_PCT[tier][model]
+        date_str = MODEL_RELEASES[model]  # e.g., "2025-08-07"
+        y = ACCURACY_PCT[tier][model]  # percent
         solved = round(y * total / 100)
+
         fig.add_trace(
             go.Scatter(
                 x=[date_str],
                 y=[y],
                 mode="markers",
-                name=model,
-                marker=dict(size=12, line=dict(width=1)),
+                opacity=0.85,
+                name=model,  # distinct legend entry & color per model
+                marker=dict(size=8, opacity=0.85, line=dict(width=0.5)),
+                cliponaxis=False,  # let markers render over axes
                 hovertemplate=(
                     f"<b>{model}</b><br>"
                     "Release: %{x|%b %d, %Y}<br>"
@@ -298,25 +301,18 @@ def build_accuracy_figure(tier: str):
             )
         )
 
-    # Comfortable y-range (dynamic ceiling for readability)
-    max_y = max(ACCURACY_PCT[tier].values()) or 1
-    upper = max(1, math.ceil(max_y * 1.25))
-
     fig.update_layout(
         template="plotly_white",
         height=420,
         margin=dict(l=30, r=120, t=10, b=40),  # extra right room for legend
-        xaxis=dict(
-            title=None,
-            type="date",
-            tickformat="%b %Y",
-            showgrid=True,
-        ),
+        xaxis=dict(title=None, type="date", tickformat="%b %Y", showgrid=True),
         yaxis=dict(
             title="Accuracy (%)",
-            range=[0, upper],
-            dtick=max(1, upper // 5),
+            range=[0, 100],  # fixed 0–100
+            tick0=0,
+            dtick=10,
             showgrid=True,
+            layer="below traces",  # draw axis below points so dots aren't “cut”
         ),
         legend=dict(title="Models", orientation="v", y=1, x=1.02, yanchor="top"),
         hovermode="closest",
@@ -324,28 +320,49 @@ def build_accuracy_figure(tier: str):
     return fig
 
 
-_initial_accuracy_fig = build_accuracy_figure("Warmup")
+_initial_accuracy_fig = build_accuracy_figure("Tier 1")
 
 # Force light theme even if HF user prefers dark
 blocks = gr.Blocks(
     css=custom_css,
     theme=get_theme(),
-    js="() => { document.body.classList.remove('dark'); document.documentElement.setAttribute('data-theme','light'); document.documentElement.setAttribute('data-color-mode','light'); }",
+    js="""
+() => {
+  // Force light theme (your original)
+  document.body.classList.remove('dark');
+  document.documentElement.setAttribute('data-theme','light');
+  document.documentElement.setAttribute('data-color-mode','light');
+
+  // Handle <a data-tab-target="..."> to switch Gradio tabs by panel id
+  document.addEventListener('click', (e) => {
+    const a = e.target.closest('a[data-tab-target]');
+    if (!a) return;
+    e.preventDefault();
+    const id = a.getAttribute('data-tab-target'); // e.g., "what-is"
+    const panel = document.getElementById(id);
+    if (!panel) return;
+
+    // Find the tab header button that controls this panel and click it
+    const btn = document.querySelector(`[role="tab"][aria-controls="${panel.id}"]`);
+    if (btn) btn.click();
+  }, true);
+}
+""",
 )
 with blocks:
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("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",
+
+            gr.HTML(
+                '<header class="text-center mb-12"><h1 class="text-4xl md:text-5xl font-bold text-gray-900 f1-h1">FormulaOne</h1></header>'
             )
 
             # Pill-style selector aligned to the top-right
             with gr.Row(elem_id="f1-tier-select-row"):
                 tier_selector = gr.Radio(
                     choices=list(TIER_TOTALS.keys()),
-                    value="Warmup",
+                    value="Tier 1",
                     label=None,
                     show_label=False,
                     elem_id="f1-tier-select",
@@ -363,23 +380,18 @@ with blocks:
             gr.Markdown(
                 """
 <div class="f1-container">
-<p class="f1-p" style="font-size:0.95rem;color:var(--f1-subtle);">
-    <em>Footnote.</em> All models were sampled with their highest available reasoning settings and a generous token budget.
-    We also used a diverse few-shot prompt that is highly supportive for these problems, covering many of the subtle
-    details inherent in the tasks (state design, invariants, and bag transformations).
-</p>
+  <p class="f1-p" style="font-size:0.95rem;color:var(--f1-subtle);">
+    All models were sampled with their highest available reasoning settings and a maximum token budget.
+    We also provided the models with a diverse few-shot prompt that is highly supportive for FormulaOne problems,
+    covering many of the subtle details of state design and maintenance, from a broad array of categories.
+  </p>
 </div>
-        """,
+""",
                 elem_classes="markdown-text",
             )
 
-            # "Learn more" link to the explainer tab
-            gr.Markdown(
-                '<div class="f1-container"><p><a class="f1-a" href="#what-is-tab">Learn more about FormulaOne.</a></p></div>'
-            )
         # Existing "What is FormulaOne" tab
         with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
-
             gr.Image(
                 "assets/banner.png",
                 show_label=False,

src/display/css_html_js.py

@@ -19,14 +19,24 @@ custom_css = """
 #f1-examples { max-width: 710px; margin: 0 auto; }
 
 /* NEW: landing tab width + tier selector alignment */
+/* 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; }
-#f1-tier-select-row { justify-content: flex-end; margin-bottom: 6px; }
+
+/* Right-align the switcher row; transparent background & border */
+#f1-tier-select-row {
+  justify-content: flex-end;
+  margin-bottom: 6px;
+  background: white !important;
+  border: none !important;
+}
+
+/* Make the control look like "pills" and force RTL layout */
+#f1-tier-select { direction: rtl; }  /* RTL direction (equivalent effect to dir="rtl") */
 #f1-tier-select .wrap {
   display: inline-flex;
   gap: 6px;
   padding: 4px;
-  background: #ffffff;
+  background: #ffffff;                /* white background for the switcher itself */
   border: 1px solid var(--f1-border);
   border-radius: 999px;
 }
@@ -39,12 +49,27 @@ custom_css = """
   cursor: pointer;
 }
 #f1-tier-select input[type="radio"]:checked + span {
-  background: #eef2ff; /* subtle non-white for selected pill */
+  background: #eef2ff;                /* only selected pill is tinted */
   border-radius: 999px;
   padding: 6px 12px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.04);
 }
 
+#f1-tier-select-row div { border: none; }
+
+#f1-tier-select { background: white; }
+
+#learn-more-btn, #learn-more-btn button {
+  background: transparent !important;
+  border: none !important;
+  color: #2563eb !important;
+  font-weight: 700 !important;
+  font-size: 1.05rem !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+#learn-more-btn button:hover { text-decoration: underline !important; background: transparent !important; }
+
 /* Text */
 .f1-p, .f1-li { line-height: 1.75; color: #374151; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }