Spaces:

double-ai
/

FormulaOne-Leaderboard

Running on CPU Upgrade

App Files Files Community

galb-dai commited on about 1 month ago

Commit

3210445

1 Parent(s): dd8b186

Add links, improve formatting.

Browse files

Files changed (3) hide show

app.py +2 -2
src/about.py +74 -31
src/display/css_html_js.py +2 -1

app.py CHANGED Viewed

@@ -191,12 +191,12 @@ with blocks:
         with gr.TabItem("What is FormulaOne", id=0):
             gr.HTML(WHAT_IS_F1_HTML)
-        with gr.TabItem("🏅 FormulaOne Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
             refresh_leaderboard_data()
             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):
             logger.info("Tab submission")
             with gr.Column():
                 with gr.Row():

         with gr.TabItem("What is FormulaOne", id=0):
             gr.HTML(WHAT_IS_F1_HTML)
+        with gr.TabItem("FormulaOne Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
             refresh_leaderboard_data()
             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):
             logger.info("Tab submission")
             with gr.Column():
                 with gr.Row():

src/about.py CHANGED Viewed

@@ -5,72 +5,79 @@ WHAT_IS_F1_HTML = f"""
 <!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-gray-900 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-200">
-                    <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-600 text-blue-600">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-gray-900 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-600"><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>
@@ -87,24 +94,24 @@ WHAT_IS_F1_HTML = f"""
                 </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 <a href="{PAPER_URL}" target="_blank" rel="noopener noreferrer" class="f1-a">appendix of our paper</a>.</p>
         </section>
         <section>
             <h2 class="text-3xl font-bold text-gray-900 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-gray-900 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>
@@ -122,6 +129,42 @@ WHAT_IS_F1_HTML = f"""
             <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>
 """

 <!DOCTYPE html>
 <html lang="en">
 <body>
+    <main class="max-w-3xl mx-auto">
         <header class="text-center mb-12">
             <h1 class="text-4xl md:text-5xl font-bold text-gray-900 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 <a href="https://deepmind.google/discover/blog/advanced-version-of-gemini-with-deep-think-officially-achieves-gold-medal-standard-at-the-international-mathematical-olympiad/" target="_blank" rel="noopener noreferrer" class="f1-a">gold medals in olympiads</a>, and attaining <a href="https://arxiv.org/html/2502.06807v1" target="_blank" rel="noopener noreferrer" class="f1-a">top percentile ratings</a> 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, <a href="{PAPER_URL}" target="_blank" rel="noopener noreferrer" class="f1-a">we introduce <strong>FormulaOne</strong></a>.</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>
+            <!-- Nicely Styled Table -->
+            <div class="overflow-hidden overflow-x-auto rounded-lg border border-gray-200 my-8">
+                <table class="min-w-full divide-y divide-gray-200 text-sm">
+                    <thead class="bg-gray-100">
                         <tr>
+                            <th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">Category</th>
+                            <th class="whitespace-nowrap px-4 py-2 text-left font-medium text-gray-900">Description</th>
                         </tr>
                     </thead>
+                    <tbody class="divide-y divide-gray-200">
                         <tr>
+                            <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900"><strong>FormulaOne Warmup</strong></td>
+                            <td class="whitespace-nowrap px-4 py-2 text-gray-700">A set of 100 “easier” problems.</td>
                         </tr>
                         <tr>
+                            <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900"><strong>FormulaOne Tier 1</strong></td>
+                            <td class="whitespace-nowrap px-4 py-2 text-gray-700">A set of 100 challenging problems.</td>
                         </tr>
                         <tr>
+                            <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900"><strong>FormulaOne Tier 2</strong></td>
+                            <td class="whitespace-nowrap px-4 py-2 text-gray-700">A set of 20 highly challenging problems.</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
+            <!-- Tabbed Problem Viewer -->
             <div class="mt-8">
                 <div class="border-b border-gray-200">
+                    <nav class="-mb-px flex space-x-6" aria-label="Tabs">
+                        <button id="problem-tab-btn-warmup" class="problem-tab-button shrink-0 border-b-2 px-1 pb-4 text-sm font-medium">Warmup Example</button>
+                        <button id="problem-tab-btn-tier1" class="problem-tab-button shrink-0 border-b-2 px-1 pb-4 text-sm font-medium">Tier 1 Example</button>
+                        <button id="problem-tab-btn-tier2" class="problem-tab-button shrink-0 border-b-2 px-1 pb-4 text-sm font-medium">Tier 2 Example</button>
                     </nav>
                 </div>
                 <div class="mt-4">
+                    <div id="problem-tab-content-warmup" class="problem-tab-content f1-problem-box">
+                        <p class="font-bold text-lg mb-2">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 id="problem-tab-content-tier1" class="problem-tab-content f1-problem-box hidden">
+                        <p class="font-bold text-lg mb-2">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 id="problem-tab-content-tier2" class="problem-tab-content f1-problem-box hidden">
+                        <p class="font-bold text-lg mb-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 <a href="https://epoch.ai/frontiermath" target="_blank" rel="noopener noreferrer" class="f1-a">impressive</a> <a href="https://artificialanalysis.ai/evaluations/gpqa-diamond" target="_blank" rel="noopener noreferrer" class="f1-a">performance</a> 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-gray-900 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 <a href="https://en.wikipedia.org/wiki/Monadic_second-order_logic" target="_blank" rel="noopener noreferrer" class="f1-a"><strong>Monadic Second-Order</strong> (MSO) logic on graphs</a>. 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-600"><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 <a href="https://en.wikipedia.org/wiki/Courcelle%27s_theorem" target="_blank" rel="noopener noreferrer" class="f1-a">Courcelle</a>, 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>
                 </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> – <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>
         <section>
             <h2 class="text-3xl font-bold text-gray-900 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 <a href="https://arcprize.org/arc-agi" target="_blank" rel="noopener noreferrer" class="f1-a">benchmarks</a> 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 <a href="https://en.wikipedia.org/wiki/Exponential_time_hypothesis" target="_blank" rel="noopener noreferrer" class="f1-a">Strong Exponential Time Hypothesis</a> (SETH). 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-gray-900 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 <a href="https://arxiv.org/pdf/2507.13337#section.4" target="_blank" rel="noopener noreferrer" class="f1-a">test suite</a> 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 <a href="https://en.wikipedia.org/wiki/Parameterized_complexity" target="_blank" rel="noopener noreferrer" class="f1-a">fixed-parameter linear</a>.</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>
             <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>
+    <script>
+        // This script needs to be run after the DOM is loaded.
+        // Gradio's gr.HTML component loads content dynamically, so we use a small delay.
+        setTimeout(() => {
+            const problemTabs = [
+                { btn: document.getElementById('problem-tab-btn-warmup'), content: document.getElementById('problem-tab-content-warmup') },
+                { btn: document.getElementById('problem-tab-btn-tier1'), content: document.getElementById('problem-tab-content-tier1') },
+                { btn: document.getElementById('problem-tab-btn-tier2'), content: document.getElementById('problem-tab-content-tier2') }
+            ];
+            const activeClasses = 'border-blue-600 text-blue-600';
+            const inactiveClasses = 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300';
+            problemTabs.forEach(tab => {
+                if(tab.btn) {
+                    tab.btn.addEventListener('click', () => {
+                        problemTabs.forEach(t => {
+                            if(t.btn) {
+                                t.btn.classList.remove(...activeClasses.split(' '));
+                                t.btn.classList.add(...inactiveClasses.split(' '));
+                                t.content.classList.add('hidden');
+                            }
+                        });
+                        tab.btn.classList.add(...activeClasses.split(' '));
+                        tab.btn.classList.remove(...inactiveClasses.split(' '));
+                        tab.content.classList.remove('hidden');
+                    });
+                }
+            });
+            // Set initial active tab
+            if (problemTabs.length > 0 && problemTabs[0].btn) {
+                problemTabs[0].btn.click();
+            }
+        }, 100); // 100ms delay to ensure elements are in the DOM
+    </script>
 </body>
 </html>
 """

src/display/css_html_js.py CHANGED Viewed

@@ -36,7 +36,7 @@ button[role="tab"] {
 #box-filter > .form{ border: 0 }
 /* Light Theme Styles for the "What is FormulaOne" HTML content */
-.f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: #111827; text-align: center; margin-bottom: 2rem;}
 .f1-h2 { font-weight: 700; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-top: 2.5rem; margin-bottom: 1.5rem; color: #111827; font-size: 1.875rem; line-height: 2.25rem; }
 .f1-p, .f1-li { line-height: 1.75; color: #374151; }
 .f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
@@ -49,6 +49,7 @@ button[role="tab"] {
 .f1-th { background-color: #f9fafb; font-weight: 600; color: #374151; }
 .f1-figure { margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
 .f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; font-style: italic; }
 """
 get_window_url_params = """

 #box-filter > .form{ border: 0 }
 /* Light Theme Styles for the "What is FormulaOne" HTML content */
+.f1-h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; color: #111827; text-align: center; margin-bottom: 3rem;}
 .f1-h2 { font-weight: 700; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-top: 2.5rem; margin-bottom: 1.5rem; color: #111827; font-size: 1.875rem; line-height: 2.25rem; }
 .f1-p, .f1-li { line-height: 1.75; color: #374151; }
 .f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
 .f1-th { background-color: #f9fafb; font-weight: 600; color: #374151; }
 .f1-figure { margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
 .f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; font-style: italic; }
+.problem-tab-button { cursor: pointer; }
 """
 get_window_url_params = """