Update.

app.py

@@ -6,15 +6,14 @@ from apscheduler.schedulers.background import BackgroundScheduler
 from gradio_leaderboard import Leaderboard, SelectColumns
 from huggingface_hub import whoami
 
-# NOTE: split WHAT_IS_F1_HTML into top/bottom so we can insert a Gradio-based tabbed element & video between them.
-from src.about import (
-    CITATION_BUTTON_LABEL,
-    CITATION_BUTTON_TEXT,
-    EVALUATION_QUEUE_TEXT,
-    WHAT_IS_F1_HTML_BOTTOM_TAIL,
-    WHAT_IS_F1_HTML_BOTTOM_TOP,
-    WHAT_IS_F1_HTML_TOP,
-)
+# HTML is split so we can inject Gradio media (images/video) where needed.
+from src.about import WHAT_IS_F1_HTML_AFTER_TIER1FIG_TAIL  # tail after Tier1 fig
+from src.about import WHAT_IS_F1_HTML_AFTER_VIDEO  # text immediately after the video
+from src.about import WHAT_IS_F1_HTML_AFTER_WARMUPFIG  # text between warmup/tier1 figs
+from src.about import WHAT_IS_F1_HTML_BOTTOM_A  # up to before first figure
+from src.about import WHAT_IS_F1_HTML_BOTTOM_B  # after first figure, before video
+from src.about import WHAT_IS_F1_HTML_EVAL_BEFORE_WARMUPFIG  # evaluation section up to before Warmup fig
+from src.about import CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT, EVALUATION_QUEUE_TEXT, WHAT_IS_F1_HTML_TOP
 from src.datamodel.data import F1Data
 from src.display.css_html_js import custom_css
 from src.display.formatting import styled_error
@@ -211,10 +210,10 @@ with blocks:
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("What is FormulaOne", id=0, elem_id="what-is-tab"):
-            # Top content
+            # Top content and categories table
             gr.HTML(WHAT_IS_F1_HTML_TOP)
 
-            # Examples (kept inside a centered container; content itself 730px wide)
+            # Examples (centered; inner width 730px via CSS)
             with gr.Group(elem_id="f1-examples", elem_classes=["f1-container"]):
                 gr.HTML(
                     '<div class="f1-tabs-body"><div class="f1-examples-chip">Examples of FormulaOne problems</div></div>'
@@ -263,27 +262,50 @@ with blocks:
                 )
                 tab_radio.change(_select_example_tab, inputs=tab_radio, outputs=[md_warmup, md_tier1, md_tier2])
 
-            # Bottom content (part 1 up to where the video goes)
-            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_TOP)
+            # Bottom content pieces interleaved with real Gradio media
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_A)
+
+            # Figure 1: bag_modifications.png (use gr.Image)
+            gr.Image("assets/bag_modifications.png", show_label=False, elem_classes=["f1-image"])
+            gr.HTML(
+                '<div class="f1-figcaption">An illustration of local modifications to bags: Introduce, Forget, and Join.</div>'
+            )
+
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_B)
 
-            # Embed video via Gradio so it renders reliably
+            # Video (no autoplay/loop), smaller gap to caption via CSS
             gr.Video(
                 "assets/DominatingSetAnimation.mp4",
-                autoplay=True,
-                loop=True,
+                autoplay=False,
+                loop=False,
                 show_label=False,
                 interactive=False,
                 elem_classes=["f1-video"],
             )
-            # The caption (centered, dark; styled in CSS)
             gr.HTML(
-                '<div class="f1-figcaption">Animation showing the design of a compressed dynamic programming state-space.</div>'
+                '<div class="f1-figcaption f1-figcaption-video">Animation showing the design of a compressed dynamic programming state-space.</div>'
+            )
+
+            gr.HTML(WHAT_IS_F1_HTML_AFTER_VIDEO)
+
+            # Evaluation: Warmup figure
+            gr.HTML(WHAT_IS_F1_HTML_EVAL_BEFORE_WARMUPFIG)
+            gr.Image("assets/warmup_performance.png", show_label=False, elem_classes=["f1-image"])
+            gr.HTML('<div class="f1-figcaption">Performance of frontier models on the FormulaOne-Warmup dataset.</div>')
+
+            # Between warmup and tier1 figs
+            gr.HTML(WHAT_IS_F1_HTML_AFTER_WARMUPFIG)
+
+            # Tier 1 figure with corrected caption text
+            gr.Image("assets/tier1_performance.png", show_label=False, elem_classes=["f1-image"])
+            gr.HTML(
+                '<div class="f1-figcaption">Performance of frontier reasoning models on the Tier 1 of FormulaOne.</div>'
             )
 
-            # Remaining content
-            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_TAIL)
+            # Tail after Tier 1 fig
+            gr.HTML(WHAT_IS_F1_HTML_AFTER_TIER1FIG_TAIL)
 
-        # Rename tab to "Leaderboard" and keep it at 800px max-width
+        # Rename tab to "Leaderboard" and cap at 800px width
         with gr.TabItem("Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
             gr.Markdown(
                 """

src/about.py

@@ -14,11 +14,12 @@ WHAT_IS_F1_HTML_TOP = f"""
 
     <p class="mb-4 f1-p"><strong>FormulaOne</strong> consists of 220 novel dynamic programming problems over graphs. The problems are organised into three categories, ranging from moderate difficulty and all the way up to research-level.</p>
 
+    <!-- Clean, centered "table" using a single grid -->
     <div class="f1-grid-wrap" role="region" aria-label="FormulaOne categories">
       <div class="f1-grid-table" role="table">
         <div class="f1-grid-row f1-grid-head" role="row">
           <div class="f1-grid-cell" role="columnheader">Category</div>
-          <div class="f1-grid-cell" role="columnheader">Size</div>
+          <div class="f1-grid-cell" role="columnheader">Number of Problems</div>
           <div class="f1-grid-cell" role="columnheader">Description</div>
         </div>
         <div class="f1-grid-row" role="row">
@@ -42,7 +43,8 @@ WHAT_IS_F1_HTML_TOP = f"""
 </div>
 """
 
-WHAT_IS_F1_HTML_BOTTOM_TOP = """
+# Bottom is split so we can insert real Gradio media (images/video) from app.py.
+WHAT_IS_F1_HTML_BOTTOM_A = """
 <div class="f1-container">
   <section>
     <p class="mb-4 f1-p">The latter category is incredibly demanding, requiring resolution of many points of uncertainty, and involving an array of reasoning steps, including topological and geometric insight, knowledge of mathematical domains such as extremal graph theory and logic, combinatorial considerations, precise implementation, and more.</p>
@@ -56,15 +58,15 @@ WHAT_IS_F1_HTML_BOTTOM_TOP = """
         “For every sufficiently tree-like graph, any problem definable in an expressive formal logic — Monadic Second-Order (MSO) logic — can be solved by a dynamic programming algorithm that operates in time linear in the order of the graph.”
     </blockquote>
     <p class="f1-p">The key is to use a structure known as a tree decomposition, which organises the graph’s vertices into a series of overlapping sets, or “bags”, that are themselves arranged in a tree.</p>
-    <figure class="f1-figure">
-        <img src="assets/bag_modifications.png" alt="An illustration of local modifications to bags (dashed boxes)" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
-        <figcaption class="f1-figcaption">An illustration of local modifications to bags: Introduce, Forget, and Join.</figcaption>
-    </figure>
+    <!-- bag_modifications figure inserted via gr.Image in app.py -->
+"""
+
+WHAT_IS_F1_HTML_BOTTOM_B = """
     <p class="mb-4 f1-p">An algorithm can then traverse this tree of bags, solving the problem piece by piece using dynamic programming. This process involves designing a “state” that summarises all necessary information about the partial solution within a bag, and then defining how this state transforms as vertices are introduced, forgotten, or bags are merged.</p>
-    <!-- VIDEO INSERTED HERE VIA gr.Video IN app.py -->
+    <!-- Video inserted via gr.Video in app.py -->
 """
 
-WHAT_IS_F1_HTML_BOTTOM_TAIL = """
+WHAT_IS_F1_HTML_AFTER_VIDEO = """
     <p class="f1-p">The deceptive simplicity of the problem statements belies the <strong>extraordinary difficulty</strong> of discovering the correct dynamic programming solution. This process is riddled with subtle combinatorial and logical pitfalls, demanding a profound understanding of the problem’s underlying structure. For a detailed walkthrough of the fifteen interdependent reasoning steps required to solve a single hard problem &mdash; <code>Maximal-Cluster-Graph</code> &mdash; <a href="https://arxiv.org/pdf/2507.13337#appendix.A" target="_blank" rel="noopener noreferrer" class="f1-a">see the appendix of our paper</a>.</p>
   </section>
 
@@ -82,21 +84,20 @@ WHAT_IS_F1_HTML_BOTTOM_TAIL = """
 
     <h2 class="f1-h2">Model Accuracy</h2>
     <p class="mb-4 f1-p">On the <strong>FormulaOne-Warmup</strong> problems, frontier models perform reasonably well. This confirms they have a foundational capability for these types of algorithmic tasks.</p>
-    <figure class="f1-figure">
-        <img src="/file=assets/warmup_performance.png" alt="Plot showing model performance on FormulaOne-Warmup" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
-        <figcaption class="f1-figcaption">Performance of frontier models on the FormulaOne-Warmup dataset.</figcaption>
-    </figure>
+    <!-- warmup_performance figure inserted via gr.Image in app.py -->
+"""
+
+WHAT_IS_F1_HTML_AFTER_WARMUPFIG = """
     <p class="mb-4 f1-p">However, as the reasoning depth increases in <strong>Tier 1</strong>, and solutions require the discovery and integration of novel and more complex state representations, model performance drops off sharply.</p>
-    <figure class="f1-figure">
-        <img src="/file=assets/tier1_performance.png" alt="Plot showing model performance on Tier 1" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
-        <figcaption class="f1-figcaption">Performance of frontier reasoning models on the FormulaOne dataset.</figcaption>
-    </figure>
+    <!-- tier1_performance figure inserted via gr.Image in app.py -->
+"""
+
+WHAT_IS_F1_HTML_AFTER_TIER1FIG_TAIL = """
     <p class="f1-p">This trend culminates in <strong>Tier 2</strong>, where the difficulty is characteristic of exploratory research problems. On this set of 20 problems, no current frontier model solves even a single one. This result starkly illustrates the gap that remains between high performance on existing benchmarks and the deep algorithmic reasoning required for truly complex problems.</p>
   </section>
 </div>
 """
 
-
 EVALUATION_QUEUE_TEXT = """
 ## Submitting to the FormulaOne Leaderboard
 

src/display/css_html_js.py

@@ -6,143 +6,85 @@ custom_css = """
   --f1-bg: #ffffff;
   --f1-bg-muted: #f9fafb;
 
-  /* Disable Gradio chrome that was bleeding into the examples block */
+  /* Nuke Gradio chrome that interfered with colors */
   --block-border-color: transparent !important;
   --background-fill-primary: transparent !important;
 }
 
-/* Readable width everywhere */
+/* Width caps */
 .f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; }
 .markdown-text { font-size: 16px !important; max-width: 800px; margin: 0 auto; }
 #what-is-tab { max-width: 800px; margin-left: auto; margin-right: auto; }
+#f1-examples { max-width: 730px; margin: 0 auto; } /* requested 730px */
 
-/* Examples wrapper stays centered, content width 730px */
-#f1-examples { max-width: 730px; margin: 0 auto; }
-
-/* Body text */
-.f1-p, .f1-li {
-  line-height: 1.75;
-  color: #374151;
-  text-wrap: pretty;
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
+/* Text */
+.f1-p, .f1-li { line-height: 1.75; color: #374151; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
 
 /* Headings */
 .f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: var(--f1-text); text-align: center; margin-bottom: 1.25rem !important; }
-.f1-h2 {
-  font-weight: 700;
-  border-bottom: 1px solid var(--f1-border);
-  padding-bottom: 0.45rem;
-  margin-top: 1.75rem;
-  margin-bottom: 0.9rem;
-  color: var(--f1-text);
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
+.f1-h2 { font-weight: 700; border-bottom: 1px solid var(--f1-border); padding-bottom: 0.45rem; margin-top: 1.75rem; margin-bottom: 0.9rem; color: var(--f1-text); font-size: 1.5rem; line-height: 2rem; }
 
 /* Links */
 .f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
 .f1-a:hover { text-decoration: underline; }
 
-/* Captions, problem name */
-.f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #111827; text-align: center; }
+/* Captions (centered + dark) */
+.f1-figcaption { margin-top: 8px; font-size: 0.875rem; color: #111827; text-align: center; }
+.f1-figcaption-video { margin-top: 6px; } /* a bit tighter under the video */
 
-/* Problem name: guarantee center on first render; force bg color for <code> */
+/* Problem name — force center from first render; code bg color #f9fafb */
+.f1-problem-markdown p.f1-problem-name,
 #f1-examples .f1-problem-markdown .markdown p.f1-problem-name { text-align: center !important; margin: 0 0 8px 0; }
+.f1-problem-markdown p.f1-problem-name code,
 #f1-examples .f1-problem-markdown .markdown p.f1-problem-name code {
-  display: inline-block;
-  background: #f9fafb !important;   /* requested override; bypasses --code-background-fill */
-  padding: 2px 8px;
-  border-radius: 6px;
+  display: inline-block; background: #f9fafb !important; padding: 2px 8px; border-radius: 6px;
 }
 
-/* ===== Clean "table" (column-consistent widths; compact first two, flexible third) ===== */
+/* Problem body: padding + line-height inside Markdown + small space before tabs */
+#f1-examples .f1-problem-markdown .markdown { background: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 8px; padding: 18px; margin: 10px 14px 10px 14px; line-height: 1.75; }
+#f1-examples .f1-problem-markdown .markdown p { margin: 0.35rem 0; }
+
+/* Pills (Radio) — compact spacing at bottom */
+#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 8px 10px 4px 10px; margin: 0 8px 2px; }
+#f1-example-radio input[type="radio"] { display: none; }
+#f1-example-radio .wrap { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
+#f1-example-radio label { border: 1px solid var(--f1-border); border-radius: 999px; padding: 6px 10px; cursor: pointer; background: #f3f4f6; }
+#f1-example-radio input[type="radio"]:checked + span { background: #e5e7eb; border-color: var(--f1-border); border-radius: 999px; padding: 6px 10px; }
+
+/* Examples card chrome */
+#f1-examples { background: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin-bottom: 12px; }
+#f1-examples .form { background: transparent !important; }  /* no bg on inner form container */
+.f1-tabs-body { padding-top: 12px; text-align: center; }
+.f1-examples-chip { display: inline-block; background: #e5e7eb; color: #111827; padding: 6px 12px; border-radius: 999px; font-weight: 700; }
+
+/* Figures via Gradio components (centered, rounded, shadow) */
+.f1-image img, .f1-video video { width: 100%; max-width: 42rem; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+
+/* Categories "table" — equal width per column set; compact first two, flexible third */
 .f1-grid-wrap { text-align: center; margin: 10px auto 8px auto; }
 .f1-grid-table {
   display: inline-grid;
-  grid-template-columns: max-content max-content minmax(360px, auto);
+  grid-template-columns: max-content 12ch minmax(360px, 1fr);  /* 2nd col fixed width; 3rd grows */
   border: 1px solid var(--f1-border);
   background: var(--f1-bg);
   border-radius: 8px;
   overflow: hidden;
 }
 .f1-grid-row { display: contents; }
-.f1-grid-cell {
-  padding: 8px 12px;
-  text-align: left;
-  border-left: 1px solid var(--f1-border);
-  border-top: 1px solid var(--f1-border);
-}
+.f1-grid-cell { padding: 8px 12px; text-align: left; border-left: 1px solid var(--f1-border); border-top: 1px solid var(--f1-border); white-space: normal; }
 .f1-grid-cell:nth-child(3n+1) { border-left: none; }
 .f1-grid-head .f1-grid-cell { font-weight: 600; text-align: center; border-top: none; }
 
-/* ===== Examples block ===== */
-#f1-examples {
-  background: var(--f1-bg-muted);   /* #f9fafb */
-  border: 1px solid var(--f1-border);
-  border-radius: 10px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-  margin-bottom: 12px;
-}
-#f1-examples .form { background: transparent !important; }  /* no background on inner .form */
-
-.f1-tabs-body { padding-top: 12px; text-align: center; }
-.f1-examples-chip {
-  display: inline-block;
-  background: #e5e7eb;              /* slightly darker than #f9fafb */
-  color: #111827;
-  padding: 6px 12px;
-  border-radius: 999px;
-  font-weight: 700;
-}
-
-/* Problem content: consistent background + padding; modest space before tabs */
-#f1-examples .f1-problem-markdown .markdown {
-  background: var(--f1-bg-muted);
-  border: 1px solid var(--f1-border);
-  border-radius: 8px;
-  padding: 18px;
-  margin: 10px 14px 10px 14px;      /* slightly reduced bottom margin */
-}
-
-/* Pills (Radio) — hide bullets; light gray inactive; darker selected; minimal bottom padding */
-#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 8px 10px 4px 10px; margin: 0 8px 4px; }
-#f1-example-radio input[type="radio"] { display: none; }
-#f1-example-radio .wrap { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
-#f1-example-radio label {
-  border: 1px solid var(--f1-border);
-  border-radius: 999px;
-  padding: 6px 10px;
-  cursor: pointer;
-  background: #f3f4f6;              /* inactive pills */
-}
-#f1-example-radio input[type="radio"]:checked + span {
-  background: #e5e7eb;              /* active pill */
-  border-color: var(--f1-border);
-  border-radius: 999px;
-  padding: 6px 10px;
-}
-
-/* Gradio video styling (centered, rounded, subtle shadow) */
-.f1-video video { width: 100%; max-width: 42rem; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-
 /* Leaderboard: cap width at 800px and center; keep your chain rule */
 #formulaone-leaderboard-tab-table { max-width: 800px; margin-left: auto; margin-right: auto; }
-#formulaone-leaderboard-tab-table .column .row .column { min-width: 80% !important; }  /* exact chain rule */
+#formulaone-leaderboard-tab-table .column .row .column { min-width: 80% !important; }
 #formulaone-leaderboard-tab-table .row, #formulaone-leaderboard-tab-table .column { width: 100% !important; max-width: 100% !important; }
 #formulaone-leaderboard-tab-table [data-testid="dropdown"], #formulaone-leaderboard-tab-table input[type="text"] { width: 100% !important; }
 
-/* Login button: force light + width cap at 800 and center */
+/* Login button: force light and width cap */
 #hf-login-btn, #hf-login-btn button, button[data-testid="login-button"], [data-testid="login-button"] button, div[data-testid="login-button"] > button {
-  background: #ffffff !important;
-  color: #1f2937 !important;
-  border: 1px solid var(--f1-border) !important;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04) !important;
-  max-width: 800px !important;
-  width: 100% !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
+  background: #ffffff !important; color: #1f2937 !important; border: 1px solid var(--f1-border) !important; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04) !important;
+  max-width: 800px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important;
 }
 #hf-login-btn:hover, #hf-login-btn button:hover, button[data-testid="login-button"]:hover, [data-testid="login-button"] button:hover, div[data-testid="login-button"] > button:hover { background: #f9fafb !important; }
 """