Update flow.

app.py

@@ -1,3 +1,5 @@
+# app.py
+
 import gradio as gr
 import pandas as pd
 from apscheduler.schedulers.background import BackgroundScheduler
@@ -5,7 +7,8 @@ from gradio.themes import Base, colors, sizes
 from gradio_leaderboard import Leaderboard, SelectColumns
 from huggingface_hub import whoami
 
-from src.about import CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT, EVALUATION_QUEUE_TEXT, INTRODUCTION_TEXT, TITLE
+# Updated import to get the new HTML variable
+from src.about import CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT, EVALUATION_QUEUE_TEXT, WHAT_IS_F1_HTML
 from src.datamodel.data import F1Data
 from src.display.css_html_js import custom_css
 from src.display.formatting import styled_error
@@ -18,8 +21,8 @@ from src.validation.validate import MAX_INPUT_LENGTH, MIN_INPUT_LENGTH, is_submi
 
 logger = get_logger(__name__)
 
-ENSURE_ALL_PRESENT = False  # TODO: Switch to True.
-SPLIT = "warmup"  # TODO temp
+ENSURE_ALL_PRESENT = False
+SPLIT = "warmup"
 
 lbdb = F1Data(
     cp_ds_name=CODE_PROBLEMS_REPO,
@@ -29,39 +32,32 @@ lbdb = F1Data(
 )
 
 leaderboard_df = None
-
 logger.info("Initialized LBDB")
 
 
 def restart_space():
-    logger.info("Restarting space ")
+    logger.info("Restarting space")
     API.restart_space(repo_id=REPO_ID)
 
 
 def refresh_leaderboard_data():
-    """Refresh the leaderboard data from the latest results"""
     global leaderboard_df
     try:
         logger.info("Loading leaderboard data...")
         new_leaderboard_df = get_leaderboard_df(RESULTS_REPO)
-
         if new_leaderboard_df is not None:
             logger.info("Leaderboard data refreshed successfully")
             leaderboard_df = new_leaderboard_df
         else:
             logger.warning("No new leaderboard data found")
-            return None
     except Exception as e:
         logger.error(f"Error refreshing leaderboard data: {e}")
-        return None
 
 
 def init_leaderboard(dataframe: pd.DataFrame):
-
     if dataframe is None:
         raise ValueError("Leaderboard DataFrame is None.")
-
-    lb = Leaderboard(
+    return Leaderboard(
         value=dataframe,
         datatype=[c.type for c in fields(AutoEvalColumn)],
         select_columns=SelectColumns(
@@ -69,84 +65,51 @@ def init_leaderboard(dataframe: pd.DataFrame):
             cant_deselect=[c.name for c in fields(AutoEvalColumn) if c.never_hidden],
             label="Select Columns to Display:",
         ),
-        search_columns=[AutoEvalColumn.system.name, AutoEvalColumn.organization.name],
+        search_columns=[AutoEvalColumn.system.name, AutoEvalColumn.system_type.name],
         hide_columns=[c.name for c in fields(AutoEvalColumn) if c.hidden],
         bool_checkboxgroup_label="Hide models",
         interactive=False,
     )
-    lb.col_count = (1, "fixed")
-    return lb
 
 
 def add_solution_cbk(
     system_name: str,
     org: str,
+    sys_type: str,
     submission_path: str,
     profile: gr.OAuthProfile | None,
     oauth_token: gr.OAuthToken | None,
 ):
-    logger.info("Fetching user details for submission")
-    logger.info("PROFILE %s", profile)
-    logger.info("TOKEN %s", oauth_token)
-
     if profile is None or oauth_token is None:
         return styled_error("Please sign in with Hugging Face before submitting.")
-
-    # Display handle and display name (may change over time)
-    logger.info(f"User handle: {profile.username}")
-    display_name = profile.name or profile.username
-    logger.info(f"Display name: {display_name}")
-
-    # Stable account id
     user_info = fetch_user_info(oauth_token)
-    logger.info("Logged in user info: %s", user_info)
     stable_id = user_info.get("id") if user_info else None
-    logger.info(f"User stable ID: {stable_id}")
-
     if not stable_id:
         return styled_error("Could not retrieve your stable user ID. Please try signing in again.")
-    user_id = stable_id
-
     if not profile.username:
         return styled_error("Could not retrieve username. Please try signing in again.")
-    # We rely on underscores as separators in submission ID, replace it with "-".
-    # user_id = profile.username.replace("_", "-")
-
     try:
-        # Validating the submission file.
         if not submission_path:
             return styled_error("Please upload JSONL submission file.")
-
-        if not is_submission_file_valid(
-            submission_path,
-            is_warmup_dataset=(SPLIT == "warmup"),
-        ):
+        if not is_submission_file_valid(submission_path, is_warmup_dataset=(SPLIT == "warmup")):
             return styled_error("Failed to read JSONL submission file. Please try again later.")
-
-        # Validating all user-supplied arguments.
-        for val, val_name in [
-            (system_name, "System name"),
-            (org, "Organisation name"),
-        ]:
+        for val, val_name in [(system_name, "System name"), (org, "Organisation name"), (sys_type, "System type")]:
             if len(val) == 0:
                 return styled_error(f"Please fill in the '{val_name}' field.")
-
             if not is_valid(val):
                 return styled_error(
-                    f"{val_name} is invalid! Must only contain characters [a-zA-Z0-9], spaces, "
-                    + "or the special characters '-' and '.', and be of length between "
-                    + f"{MIN_INPUT_LENGTH} and {MAX_INPUT_LENGTH}."
+                    f"{val_name} is invalid! Must only contain characters [a-zA-Z0-9], spaces, or the special characters '-' and '.', and be of length between {MIN_INPUT_LENGTH} and {MAX_INPUT_LENGTH}."
                 )
     except Exception:
         logger.warning("Failed to process user submission", exc_info=True)
-        return styled_error("An error occurred. Please try again later.")  # Intentionally vague.
-
+        return styled_error("An error occurred. Please try again later.")
     return add_new_solutions(
         lbdb,
         profile.username,
-        user_id,
+        stable_id,
         system_name,
         org,
+        sys_type,
         submission_path,
         is_warmup_dataset=(SPLIT == "warmup"),
         ensure_all_present=ENSURE_ALL_PRESENT,
@@ -154,46 +117,32 @@ def add_solution_cbk(
 
 
 def gate_submission(oauth_token: gr.OAuthToken | None):
-    """
-    @brief Toggles the visibility of the login box and submission panel based on the user's login status.
-    """
-    logger.info("GATE TOKEN %s", oauth_token)
     if oauth_token is None:
-        logger.info("GATE: NO TOKEN")
         return gr.update(visible=True), gr.update(visible=False)
     try:
         whoami(oauth_token.token)
-        logger.info("GATE: TOKEN IS VALID")
         return gr.update(visible=False), gr.update(visible=True)
     except Exception:
-        logger.info("GATE: TOKEN HAS EXPIRED")
         return gr.update(visible=True), gr.update(visible=False)
 
 
 def get_theme():
-    cyber_theme = Base(
-        # neon-ish accents driven by hues (affects tabs, primary buttons, sliders, etc.)
-        primary_hue=colors.cyan,  # selected tab / primary controls
-        secondary_hue=colors.pink,  # secondary accents
-        neutral_hue=colors.gray,  # keep neutrals subtle
-        # # techno font
-        # font=gr.themes.GoogleFont("Orbitron"),
-        # font_mono=gr.themes.GoogleFont("JetBrains Mono"),
-        text_size=sizes.text_md,  # keep defaults
+    return Base(
+        primary_hue=colors.cyan,
+        secondary_hue=colors.pink,
+        neutral_hue=colors.gray,
+        text_size=sizes.text_md,
         spacing_size=sizes.spacing_md,
         radius_size=sizes.radius_md,
     ).set(
-        # keep overrides minimal—dark canvas; let hues do the rest
-        body_background_fill="#0b0f14",  # deep blue-black
-        background_fill_primary="#0b0f14",  # panels
-        background_fill_secondary="#0e141a",  # subtle contrast
+        body_background_fill="#0b0f14",
+        background_fill_primary="#0b0f14",
+        background_fill_secondary="#0e141a",
     )
-    return cyber_theme
 
 
 blocks = gr.Blocks(css=custom_css, theme=get_theme())
 with blocks:
-
     gr.Image(
         "assets/banner.png",
         interactive=False,
@@ -203,104 +152,56 @@ with blocks:
         elem_classes=["banner_image"],
     )
 
-    gr.HTML(
-        """
-        <style>
-            body {
-                background-color: #121212;
-                color: white;
-                margin: 0;  /* Reset browser default */
-            }
-
-            /* Outer container margin & spacing */
-            .gradio-container {
-                max-width: 1100px;
-                margin: 2rem auto;        /* top/bottom spacing + horizontal centering */
-                padding: 2rem;            /* inner spacing */
-                background-color: rgba(0, 0, 0, 0.6);  /* optional: semi-transparent panel */
-                border-radius: 12px;      /* rounded corners */
-            }
-        </style>
-        """
-    )
-
-    gr.HTML(TITLE)
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
-
+    # The main layout is now controlled by these three tabs
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
-        with gr.TabItem("🏅 Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=0):
-            refresh_leaderboard_data()  # updates  leaderboard_df
-            assert leaderboard_df is not None
+        with gr.TabItem("What is FormulaOne", id=0):
+            gr.HTML(WHAT_IS_F1_HTML)
+
+        with gr.TabItem("🏅 FormulaOne Leaderboard", id=1):
+            refresh_leaderboard_data()
+            assert leaderboard_df is not None, "Leaderboard data failed to load."
             leaderboard_component = init_leaderboard(leaderboard_df)
 
-        with gr.TabItem("🚀 Submit Solutions", elem_id="llm-benchmark-tab-table", id=2):
-            logger.info("Tab submission")
+        with gr.TabItem("🚀 Submit Solutions", id=2):
             with gr.Column():
-                with gr.Row():
-                    gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
-
-            with gr.Row():
+                gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
                 gr.Markdown("# ✉️✨ Submit your solutions", elem_classes="markdown-text")
-
-            # Shown when logged OUT
             login_box = gr.Group(visible=True)
             with login_box:
                 gr.Markdown("Please sign in with Hugging Face to submit")
                 gr.LoginButton()
-
-            # Shown when logged IN
             submit_panel = gr.Group(visible=False)
             with submit_panel:
                 with gr.Row():
                     with gr.Column():
                         system_name_textbox = gr.Textbox(label=AutoEvalColumn.system.name)
                         org_textbox = gr.Textbox(label=AutoEvalColumn.organization.name)
-                        # sys_type_dropdown = gr.Dropdown(
-                        #     choices=[t.to_str() for t in ModelType],
-                        #     label=AutoEvalColumn.system_type.name,
-                        #     multiselect=False,
-                        #     value=ModelType.LLM.to_str(),
-                        #     interactive=True,
-                        # )
-
+                        sys_type_dropdown = gr.Dropdown(
+                            choices=[t.to_str() for t in ModelType],
+                            label=AutoEvalColumn.system_type.name,
+                            multiselect=False,
+                            value=ModelType.LLM.to_str(),
+                            interactive=True,
+                        )
                         submission_file = gr.File(label="JSONL solutions file", file_types=[".jsonl"])
-
-                logger.info("Submit button")
-                submit_button = gr.Button("Submit")
-                # gr.LoginButton()
+                submit_button = gr.Button("Submit", variant="primary")
                 submission_result = gr.Markdown()
-
                 submit_button.click(
                     add_solution_cbk,
-                    [
-                        system_name_textbox,
-                        org_textbox,
-                        submission_file,
-                    ],
+                    [system_name_textbox, org_textbox, sys_type_dropdown, submission_file],
                     submission_result,
                 )
 
     with gr.Row():
-        logger.info("Citation")
         with gr.Accordion(CITATION_BUTTON_LABEL, open=False):
-            gr.Code(
-                value=CITATION_BUTTON_TEXT.strip(),
-                elem_id="citation-block",
-            )
+            gr.Code(value=CITATION_BUTTON_TEXT.strip(), elem_id="citation-block")
 
-    # UI refresh triggers latest data swap.
-    # The work already happened in the background - refresh_leaderboard_data().
     blocks.load(lambda: leaderboard_df, inputs=[], outputs=[leaderboard_component])
-
-    # On initial load (and after OAuth redirect), toggle the UI based on login status.
     blocks.load(gate_submission, inputs=None, outputs=[login_box, submit_panel])
 
-
-logger.info("Scheduler")
 scheduler = BackgroundScheduler()
 scheduler.add_job(restart_space, "interval", seconds=1800)
 scheduler.add_job(refresh_leaderboard_data, "interval", seconds=120)
 scheduler.start()
-logger.info("Launch")
+
 blocks.queue(default_concurrency_limit=40).launch()
-logger.info("Done")

src/about.py

@@ -1,28 +1,126 @@
-from dataclasses import dataclass
-from enum import Enum
-
-TITLE = """
-<h1 id="space-title" style="
-    text-align: center;
-    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
-    font-weight: 300;
-    letter-spacing: 0.05em;
-    color: white;
-    text-transform: none;
-    font-size: 2.6rem;
-">
-    FormulaOne Leaderboard
-</h1>
-"""
-
-INTRODUCTION_TEXT = """
-Welcome to the official leaderboard for the paper:
-
-**FormulaOne: Measuring the Depth of Algorithmic Reasoning Beyond Competitive Programming** <br>
-*Gal Beniamini, Yuval Dor, Alon Vinnikov, Shir Granot Peled, Or Weinstein, Or Sharir, Noam Wies, Tomer Nussbaum, Nadav Schweiger, Ido Ben Shaul, Tomer Zekharya, Yoav Levine, Shai Shalev-Shwartz, Amnon Shashua* <br>
-**AAI, July 2025**
-
-FormulaOne is a new benchmark designed to challenge frontier AI models. The benchmark is constructed from a vast and conceptually diverse family of dynamic programming problems derived from Monadic Second-Order (MSO) logic on graphs, a framework with profound connections to theoretical computer science.
+WHAT_IS_F1_HTML = """
+<!DOCTYPE html>
+<html lang="en">
+<body>
+    <main class="max-w-4xl mx-auto">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-white f1-h1">FormulaOne</h1>
+        </header>
+        <section>
+            <p class="text-lg mb-4 f1-p">Frontier AI models have recently demonstrated strong performance on mathematical and algorithmic benchmarks, including earning gold medals in olympiads, and attaining top percentile ratings in competitive programming contests. How well do such benchmarks capture the true depth of algorithmic reasoning, as it arises in real-world research problems?</p>
+            <p class="text-lg mb-4 f1-p">We believe that existing benchmarks fail to capture the deep reasoning skills required for complex, research-level algorithmic problems. To address this gap, we introduce <strong>FormulaOne</strong>.</p>
+            <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>
+            <div class="overflow-x-auto">
+                <table class="f1-table">
+                    <thead>
+                        <tr>
+                            <th class="f1-th">Category</th>
+                            <th class="f1-th">Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="f1-td"><strong>FormulaOne Warmup</strong></td>
+                            <td class="f1-td">A set of 100 “easier” problems.</td>
+                        </tr>
+                        <tr>
+                            <td class="f1-td"><strong>FormulaOne Tier 1</strong></td>
+                            <td class="f1-td">A set of 100 challenging problems.</td>
+                        </tr>
+                        <tr>
+                            <td class="f1-td"><strong>FormulaOne Tier 2</strong></td>
+                            <td class="f1-td">A set of 20 highly challenging problems.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="mt-8">
+                <div class="border-b border-gray-700">
+                    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+                         <p class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-blue-400 text-blue-400">Example Problems</p>
+                    </nav>
+                </div>
+                <div class="mt-4">
+                    <div class="f1-problem-box">
+                        <p class="font-bold text-lg mb-2">Warmup: Union-of-Paths-and-Cycles</p>
+                        <p class="mb-2"><strong>Objective:</strong> Compute the sum of all weights of sets S⊆V such that the graph G[S], induced over S, is a collection of disjoint paths and cycles.</p>
+                    </div>
+                    <div class="f1-problem-box">
+                        <p class="font-bold text-lg mb-2">Tier 1: Maximal-Union-of-Paths-and-Cycles</p>
+                        <p class="mb-2"><strong>Objective:</strong> Compute the sum of all weights of sets S⊆V such that the graph G[S], induced over S, is a collection of disjoint paths and cycles, and S is maximal with respect to this property.</p>
+                    </div>
+                    <div class="f1-problem-box">
+                        <p class="font-bold text-lg mb-2">Tier 2: Maximal-Union-of-Cycles</p>
+                        <p class="mb-2"><strong>Objective:</strong> Compute the sum of all weights of sets S⊆V such that the graph G[S], induced over S, is a collection of disjoint cycles, and S is maximal with respect to this property.</p>
+                    </div>
+                </div>
+            </div>
+            <p class="mt-6 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>
+            <p class="f1-p">Despite Frontier models’ impressive performance on existing benchmarks, presently <strong>no model solves even a single FormulaOne Tier 2 problem</strong>.<sup><a href="#evaluation" class="f1-a">1</a></sup></p>
+        </section>
+        <section>
+            <h2 class="text-3xl font-bold text-white f1-h2">An “Infinite Well” of Problems</h2>
+            <p class="mb-4 f1-p">The novelty and vastness of FormulaOne stems from its theoretical foundation. The questions are not arbitrary puzzles, but are instead drawn from the highly expressive framework of <strong>Monadic Second-Order</strong> (MSO) logic on graphs. This provides a principled, semi-automatic way to generate a virtually infinite supply of mathematically deep algorithmic challenges. Despite their theoretical underpinnings, the problems in FormulaOne are natural and succinct:</p>
+            <div class="f1-problem-box">
+                <p class="font-bold text-lg mb-2">Problem #44</p>
+                <p class="mb-2"><strong>Input:</strong> A tree-like graph G=(V,E), a tree decomposition T of G, and a weight function w:V→N.</p>
+                <p class="mb-2"><strong>Objective:</strong> Compute the sum of all weights of sets S⊆V such that the graph G[S], induced over S, does not contain any cycle of length four.</p>
+                <p class="text-sm text-gray-400"><strong>Notation:</strong> The weight of a set of vertices S is defined as w(S) ≜ ∑<sub>v∈S</sub>w(v). The final result should be returned modulo 10<sup>9</sup>+7.</p>
+            </div>
+            <p class="mb-4 f1-p">While the problems are often natural to state, their solutions are far from obvious. The solvability of this vast class of problems is guaranteed by an algorithmic <strong>meta-theorem</strong> due to Courcelle, which broadly states:</p>
+            <blockquote class="my-6 f1-blockquote">
+                “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="/file=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>
+            <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/dp_animation.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>
+            <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 – <strong>Maximal-Cluster-Graph</strong> – see the appendix of our paper.</p>
+        </section>
+        <section>
+            <h2 class="text-3xl font-bold text-white f1-h2">Guiding Principles</h2>
+            <ul class="list-disc list-inside space-y-4">
+                <li class="f1-li"><strong>An In-Distribution Benchmark for Reasoning.</strong> Unlike benchmarks that test for out-of-distribution generalisation, FormulaOne presents problems that are squarely <strong>in-distribution</strong> for models trained on code. Essentially, dynamic programming on graphs is the “bread and butter” of algorithmic programming. Thus, models’ current failure on FormulaOne highlights a fundamental deficit in deep, multi-step reasoning, rather than a lack of domain exposure.</li>
+                <li class="f1-li"><strong>An Unbounded Environment for Reinforcement Learning.</strong> The MSO framework allows for the generation of a nearly infinite stream of algorithmic problems with verifiable solutions, making it an ideal environment for training and evaluating agents with Reinforcement Learning with Verifiable Rewards (RLVR).</li>
+                <li class="f1-li"><strong>Probing the Frontiers of Complexity Theory.</strong> Many problems in our dataset are related to central conjectures in fine-grained complexity, such as the Strong Exponential Time Hypothesis. If a model were to discover a significantly faster algorithm for one of these problems, that would constitute a significant contribution to theoretical computer science.</li>
+            </ul>
+        </section>
+        <section id="evaluation">
+            <h2 class="text-3xl font-bold text-white f1-h2">Evaluation</h2>
+            <p class="mb-4 f1-p">To give models the best possible chance of success, we provide a generous few-shot prompt that covers a broad array of the ideas and techniques involved in solving these problems. All models were evaluated using their highest available reasoning settings and with the maximum context length permitted.</p>
+            <p class="mb-4 f1-p">Each submitted solution is subjected to a rigorous and automated test suite that measures three key aspects of its validity:</p>
+            <ul class="list-disc list-inside space-y-2 mb-6">
+                <li class="f1-li"><strong>Correctness:</strong> The output of the submitted algorithm must be correct on all graphs.</li>
+                <li class="f1-li"><strong>Consistency:</strong> The solution must produce the same output for a given graph, regardless of the specific structure of its tree decomposition.</li>
+                <li class="f1-li"><strong>Efficiency:</strong> The solution must be truly fixed-parameter linear.</li>
+            </ul>
+            <p class="mb-4 f1-p">To support research and encourage community contributions, the <code>FormulaOne-Warmup</code> dataset is released as a public resource for training and fine-tuning models. The complete test suite for all 100 Warmup problems is available, alongside a standalone evaluation environment, in our public GitHub repository: <a href="https://github.com/double-ai/formulaone-dataset/tree/main" target="_blank" rel="noopener noreferrer" class="f1-a">https://github.com/double-ai/formulaone-dataset/tree/main</a>.</p>
+            <p class="f1-p">In contrast, to maintain the integrity of the core benchmark, only a minimal subset of tests is released for the <code>FormulaOne Tier 1</code> and <code>Tier 2</code> problems.</p>
+            <h3 class="text-2xl font-bold text-white mt-8 mb-4">Model Accuracy</h3>
+            <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>
+            <p class="mb-4 f1-p">However, as the reasoning depth increases in <strong>FormulaOne 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 FormulaOne Tier 1" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
+                <figcaption class="f1-figcaption">Figure 1: Performance of frontier reasoning models on the FormulaOne dataset.</figcaption>
+            </figure>
+            <p class="f1-p">This trend culminates in <strong>FormulaOne 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>
+    </main>
+</body>
+</html>
 """
 
 LLM_BENCHMARKS_TEXT = """

src/display/css_html_js.py

@@ -1,117 +1,53 @@
 custom_css = """
-
 .markdown-text {
     font-size: 16px !important;
 }
-
 .banner_image { width: 75% !important; align-self: center !important; }
-
 @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600&display=swap');
-
-button[role="tab"][aria-controls="formulaone-leaderboard-tab-table"],
-button[role="tab"][aria-controls="llm-benchmark-tab-table"] {
+button[role="tab"] {
   font-family: 'Exo 2', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
   letter-spacing: 0.25px;
   font-weight: 600;
-}
-
-
-#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;
-}
-
-/* Limit the width of the first AutoEvalColumn so that names don't expand too much */
+  font-size: 18px !important; /* Increased font size for tabs */
+}
+#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;
-}
-
-/* Change leaderboard to 'single column' */
-#formulaone-leaderboard-tab-table .column .row .column {
-    min-width: 100% !important;
-}
-
-
-.tab-buttons button {
-    font-size: 20px;
-}
-
-#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
-}
+#leaderboard-table th:nth-child(2) { max-width: 400px; overflow: auto; white-space: nowrap; }
+.tab-buttons button { font-size: 20px; }
+#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 }
+.banner_image img { height: 200px !important; object-fit: cover !important; }
+
+/* Styles for the "What is FormulaOne" HTML content */
+.f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: white; text-align: center; margin-bottom: 2rem;}
+.f1-h2 { font-weight: 700; border-bottom: 1px solid #374151; padding-bottom: 0.5rem; margin-top: 2.5rem; margin-bottom: 1.5rem; color: white; font-size: 1.875rem; line-height: 2.25rem; }
+.f1-p, .f1-li { line-height: 1.75; color: #d1d5db; }
+.f1-a { color: #60a5fa; text-decoration: none; font-weight: 500; }
+.f1-a:hover { text-decoration: underline; }
+.f1-blockquote { border-left: 4px solid #4b5563; padding-left: 1rem; margin-left: 0; font-style: italic; color: #9ca3af; }
+.f1-problem-box { background-color: #1f2937; border: 1px solid #374151; border-radius: 0.5rem; padding: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
+.f1-problem-box strong { color: #f9fafb; }
+.f1-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; }
+.f1-th, .f1-td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid #374151; }
+.f1-th { background-color: #374151; font-weight: 600; color: #f9fafb; }
+.f1-figure { margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
+.f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #9ca3af; font-style: italic; }
 """
 
 get_window_url_params = """