Update.

app.py

@@ -6,12 +6,13 @@ 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 between them.
+# 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,
+    WHAT_IS_F1_HTML_BOTTOM_TAIL,
+    WHAT_IS_F1_HTML_BOTTOM_TOP,
     WHAT_IS_F1_HTML_TOP,
 )
 from src.datamodel.data import F1Data
@@ -263,10 +264,27 @@ with blocks:
                 )
                 tab_radio.change(_select_example_tab, inputs=tab_radio, outputs=[md_warmup, md_tier1, md_tier2])
 
-            # Bottom content
-            gr.HTML(WHAT_IS_F1_HTML_BOTTOM)
+            # Bottom content (part 1 up to where the video goes)
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_TOP)
+
+            # Embed video via Gradio so it renders reliably
+            gr.Video(
+                value="/file=assets/DominatingSetAnimation.mp4",
+                autoplay=True,
+                loop=True,
+                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>'
+            )
+
+            # Remaining content
+            gr.HTML(WHAT_IS_F1_HTML_BOTTOM_TAIL)
 
-        # Rename tab to "Leaderboard"
+        # Rename tab to "Leaderboard" and keep it at 800px max-width
         with gr.TabItem("Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
             gr.Markdown(
                 """

src/about.py

@@ -1,7 +1,7 @@
 # The paper's URL for linking
 PAPER_URL = "https://arxiv.org/abs/2507.13337"
 
-# Top chunk — self-contained (div grid table).
+# Top chunk — same as before (div grid table), unchanged except for minor structure.
 WHAT_IS_F1_HTML_TOP = f"""
 <div class="f1-container">
   <header class="text-center mb-12">
@@ -44,8 +44,8 @@ WHAT_IS_F1_HTML_TOP = f"""
 </div>
 """
 
-# Bottom chunk — width-constrained; em-dashes; corrected video; captions centered/dark; wording tweak.
-WHAT_IS_F1_HTML_BOTTOM = """
+# Bottom content split around the video so we can embed it with gr.Video in app.py
+WHAT_IS_F1_HTML_BOTTOM_TOP = """
 <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>
@@ -64,13 +64,10 @@ WHAT_IS_F1_HTML_BOTTOM = """
         <figcaption class="f1-figcaption">An illustration of local modifications to bags: Introduce, Forget, and Join.</figcaption>
     </figure>
     <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>
-    <figure class="f1-figure">
-        <video class="w-full max-w-2xl mx-auto rounded-lg shadow-lg" autoplay loop muted playsinline>
-            <source src="/file=assets/DominatingSetAnimation.mp4" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
-        <figcaption class="f1-figcaption">Animation showing the design of a compressed dynamic programming state-space.</figcaption>
-    </figure>
+    <!-- VIDEO INSERTED HERE VIA gr.Video IN app.py -->
+"""
+
+WHAT_IS_F1_HTML_BOTTOM_TAIL = """
     <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>
 
@@ -89,12 +86,12 @@ WHAT_IS_F1_HTML_BOTTOM = """
     <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">
+        <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>
     <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">
+        <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>
     <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>

src/display/css_html_js.py

@@ -5,6 +5,10 @@ custom_css = """
   --f1-border: #e5e7eb;
   --f1-bg: #ffffff;
   --f1-bg-muted: #f9fafb;
+
+  /* Disable Gradio block chrome that was bleeding into the Examples switcher */
+  --block-border-color: transparent !important;
+  --background-fill-primary: transparent !important;
 }
 
 /* Readable width everywhere */
@@ -39,38 +43,37 @@ custom_css = """
 .f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
 .f1-a:hover { text-decoration: underline; }
 
-/* Blockquote, captions, problem name */
-.f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; font-style: italic; color: #4b5563; }
-.f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #111827; text-align: center; }  /* centered + very dark */
+/* Captions, problem name */
+.f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #111827; text-align: center; }
 .f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; }
 
-/* ===== Clean "table" using a single grid (equal column widths across rows) ===== */
+/* ===== Clean "table" (equal column widths per column; compact first two, flexible third) ===== */
 .f1-grid-wrap { text-align: center; margin: 10px auto 8px auto; }
 .f1-grid-table {
-  display: grid;                        /* one grid for all rows */
-  grid-template-columns: 1fr 1fr 1fr;   /* equal column widths */
-  border: 1px solid var(--f1-border);   /* full border */
+  display: inline-grid;                                   /* center + shrink-to-fit */
+  grid-template-columns: max-content max-content minmax(360px, auto);
+  border: 1px solid var(--f1-border);                     /* full border */
   background: var(--f1-bg);
   border-radius: 8px;
   overflow: hidden;
 }
-.f1-grid-row { display: contents; }     /* rows don’t reset column widths */
+.f1-grid-row { display: contents; }                       /* rows share the same columns */
 .f1-grid-cell {
-  padding: 10px 14px;
+  padding: 8px 12px;
   text-align: left;
   border-left: 1px solid var(--f1-border);
   border-top: 1px solid var(--f1-border);
 }
-.f1-grid-cell:nth-child(3n+1) { border-left: none; } /* first col cells: no left border */
+.f1-grid-cell:nth-child(3n+1) { border-left: none; }      /* first column cells: no left border */
 .f1-grid-head .f1-grid-cell {
   font-weight: 600;
   text-align: center;
+  border-top: none;                                       /* top edge of the grid */
 }
-.f1-grid-head .f1-grid-cell { border-top: none; }    /* top border only on body rows */
 
-/* ===== Examples card: background, centered pill heading, pretty pills ===== */
+/* ===== Examples block ===== */
 #f1-examples {
-  background: var(--f1-bg-muted);               /* #f9fafb */
+  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);
@@ -79,23 +82,23 @@ custom_css = """
 .f1-tabs-body { padding-top: 12px; text-align: center; }
 .f1-examples-chip {
   display: inline-block;
-  background: #e5e7eb;                          /* slightly darker gray pill */
+  background: #e5e7eb;                                    /* slightly darker than #f9fafb */
   color: #111827;
   padding: 6px 12px;
   border-radius: 999px;
   font-weight: 700;
 }
 
-/* Problem content: consistent background + padding */
+/* Problem content: consistent background + padding + spacing above the 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 8px 14px;
+  margin: 10px 14px 12px 14px;                            /* bottom margin creates padding before tabs */
 }
 
-/* Bottom "tabs" using Radio -> show only pills (hide inputs) */
+/* Pills (Radio) — hide bullets, light gray inactive, darker selected */
 #f1-example-radio { border-top: 1px solid var(--f1-border); padding: 8px 10px 10px 10px; margin: 0 8px 8px; }
 #f1-example-radio input[type="radio"] { display: none; }
 #f1-example-radio .wrap { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
@@ -104,17 +107,20 @@ custom_css = """
   border-radius: 999px;
   padding: 6px 12px;
   cursor: pointer;
-  background: #f3f4f6;                           /* light gray for inactive pills */
+  background: #f3f4f6;                                    /* inactive pills */
 }
 #f1-example-radio input[type="radio"]:checked + span {
-  background: #e5e7eb;                           /* selected pill slightly darker */
+  background: #e5e7eb;                                    /* active pill */
   border-color: var(--f1-border);
   border-radius: 999px;
   padding: 6px 12px;
 }
 
-/* Leaderboard: center the whole tab and apply requested nesting/min-width rule with .column/.row */
-#formulaone-leaderboard-tab-table { max-width: 1200px; margin-left: auto; margin-right: auto; }
+/* 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 .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; }
@@ -127,28 +133,6 @@ custom_css = """
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04) !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; }
-
-/* Misc retained */
-#models-to-add-text { font-size: 18px !important; }
-#citation-button span { font-size: 16px !important; }
-#citation-button textarea { font-size: 16px !important; }
-#citation-button > label > button { margin: 6px; transform: scale(1.3); }
-#leaderboard-table { margin-top: 15px }
-#leaderboard-table-lite { margin-top: 15px }
-#search-bar-table-box > div:first-child { background: none; border: none; }
-#search-bar { padding: 0px; }
-#leaderboard-table td:nth-child(2), #leaderboard-table th:nth-child(2) { max-width: 400px; overflow: auto; white-space: nowrap; }
-#scale-logo { border-style: none !important; box-shadow: none; display: block; margin-left: auto; margin-right: auto; max-width: 600px; }
-#scale-logo .download { display: none; }
-#filter_type{ border: 0; padding-left: 0; padding-top: 0; }
-#filter_type label { display: flex; }
-#filter_type label > span{ margin-top: var(--spacing-lg); margin-right: 0.5em; }
-#filter_type label > .wrap{ width: 103px; }
-#filter_type label > .wrap .wrap-inner{ padding: 2px; }
-#filter_type label > .wrap .wrap-inner input{ width: 1px }
-#filter-columns-type{ border:0; padding:0.5; }
-#filter-columns-size{ border:0; padding:0.5; }
-#box-filter > .form{ border: 0 }
 """
 
 get_window_url_params = """