Changed.

app.py

@@ -173,18 +173,21 @@ def gate_submission(oauth_token: gr.OAuthToken | None):
 
 
 def get_theme():
+    # return gr.themes.Soft(
+    #     primary_hue=gr.themes.colors.blue,
+    #     secondary_hue=gr.themes.colors.sky,
+    #     neutral_hue=gr.themes.colors.gray,
+    # ).set(
+    #     body_background_fill="#FFFFFF",
+    #     panel_background_fill="#f3f4f6",
+    # )
     return "light"
 
 
 blocks = gr.Blocks(
     css=custom_css,
     theme=get_theme(),
-    js="""() => {
-        // Force light everywhere
-        document.documentElement.setAttribute('data-theme', 'light');
-        document.documentElement.setAttribute('data-color-mode', 'light');
-        document.body.classList.remove('dark');
-    }""",
+    js="() => { document.body.classList.remove('dark'); document.documentElement.setAttribute('data-theme','light'); document.documentElement.setAttribute('data-color-mode','light'); }",
 )
 with blocks:
 
@@ -192,7 +195,8 @@ 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):
+        # (5) Rename tab to "Leaderboard"
+        with gr.TabItem("Leaderboard", elem_id="formulaone-leaderboard-tab-table", id=1):
             gr.Markdown(
                 """
                 Welcome to the FormulaOne leaderboard. This table tracks the performance of various systems on the FormulaOne benchmark.
@@ -216,7 +220,6 @@ with blocks:
             login_box = gr.Group(visible=True)
             with login_box:
                 gr.Markdown("Please sign in with Hugging Face to submit")
-                # Give the login button a stable id so CSS can target it
                 gr.LoginButton(elem_id="hf-login-btn")
 
             submit_panel = gr.Group(visible=False)

src/about.py

@@ -17,7 +17,7 @@ WHAT_IS_F1_HTML = 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>
 
-            <!-- (3) Minimal table for categories -->
+            <!-- Clean, centered table -->
             <div class="f1-table-wrap">
                 <table class="f1-table" aria-label="FormulaOne categories">
                     <thead>
@@ -47,29 +47,29 @@ WHAT_IS_F1_HTML = f"""
                 </table>
             </div>
 
-            <!-- (4) Bottom-tabbed problem viewer -->
+            <!-- Compact bottom tabs -->
             <div class="mt-6 f1-tabs" id="f1-examples">
                 <div class="f1-tabs-body">
                     <h3 class="text-xl font-semibold mb-2" style="color:#111827;">Examples of FormulaOne problems</h3>
 
                     <div class="problem-panel" id="panel-warmup">
                         <div class="f1-problem-box">
-                            <p class="mb-2 f1-p"><strong>Union-of-Paths-and-Cycles.</strong></p>
-                            <p class="mb-2 f1-p"><strong>Objective:</strong> Compute the sum of all weights of sets $S\\subseteq V$ such that the induced subgraph $G[S]$ is a disjoint union of paths and cycles.</p>
+                            <p class="f1-problem-name">Union-of-Paths-and-Cycles</p>
+                            <p class="mb-2 f1-p">Given a tree-like graph $G=(V,E)$, compute the sum of all weights of sets $S\\subseteq V$ such that the induced subgraph $G[S]$ is a disjoint union of paths and cycles.</p>
                         </div>
                     </div>
 
                     <div class="problem-panel" id="panel-tier1" style="display:none;">
                         <div class="f1-problem-box">
-                            <p class="mb-2 f1-p"><strong>Maximal-Union-of-Paths-and-Cycles.</strong></p>
-                            <p class="mb-2 f1-p"><strong>Objective:</strong> Compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of paths and cycles and $S$ is maximal with respect to this property.</p>
+                            <p class="f1-problem-name">Maximal-Union-of-Paths-and-Cycles</p>
+                            <p class="mb-2 f1-p">Given a tree-like graph $G=(V,E)$, compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of paths and cycles and $S$ is maximal with respect to this property.</p>
                         </div>
                     </div>
 
                     <div class="problem-panel" id="panel-tier2" style="display:none;">
                         <div class="f1-problem-box">
-                            <p class="mb-2 f1-p"><strong>Maximal-Union-of-Cycles.</strong></p>
-                            <p class="mb-2 f1-p"><strong>Objective:</strong> Compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of cycles and $S$ is maximal with respect to this property.</p>
+                            <p class="f1-problem-name">Maximal-Union-of-Cycles</p>
+                            <p class="mb-2 f1-p">Given a tree-like graph $G=(V,E)$, compute the sum of all weights of sets $S\\subseteq V$ such that $G[S]$ is a disjoint union of cycles and $S$ is maximal with respect to this property.</p>
                         </div>
                     </div>
                 </div>
@@ -81,7 +81,7 @@ WHAT_IS_F1_HTML = f"""
                 </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="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>
@@ -89,10 +89,9 @@ WHAT_IS_F1_HTML = f"""
         <section>
             <h2 class="text-3xl font-bold text-gray-900 f1-h2">An “Infinite Well” of Problems</h2>
 
-            <!-- (5) Problem 44: LaTeX, with heading removed -->
             <div class="f1-problem-box">
                 <p class="mb-2 f1-p"><strong>Input:</strong> A tree-like graph $G=(V,E)$, a tree decomposition $\\mathcal{{T}}$ of $G$, and a weight function $w: V \\to \\mathbb{{N}}$.</p>
-                <p class="mb-2 f1-p"><strong>Objective:</strong> Compute the sum of all weights of sets $S \\subseteq V$ such that the induced subgraph $G[S]$ contains no cycle of length four.</p>
+                <p class="mb-2 f1-p"><strong>Goal:</strong> Compute the sum of all weights of sets $S \\subseteq V$ such that the induced subgraph $G[S]$ contains no cycle of length four.</p>
                 <p class="text-sm f1-p" style="color:#6b7280;"><strong>Notation:</strong> The weight of a set $S$ is defined as $w(S) \\triangleq \\sum_{{v\\in S}} w(v)$. Return the final result modulo $10^9+7$.</p>
             </div>
 
@@ -158,24 +157,24 @@ WHAT_IS_F1_HTML = f"""
         </section>
     </main>
 
-    <!-- MathJax for LaTeX (loaded once) -->
+    <!-- MathJax config FIRST (escaped {{ }}) -->
     <script>
-      if (!window.MathJax) {{
-        const mj = document.createElement('script');
-        mj.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
-        mj.async = true;
-        document.head.appendChild(mj);
-      }}
+      window.MathJax = {{
+        tex: {{ inlineMath: [['$', '$'], ['\\\\(', '\\\\)']] }},
+        options: {{ skipHtmlTags: ['script','noscript','style','textarea','pre','code'] }}
+      }};
     </script>
+    <!-- Then load MathJax -->
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 
+    <!-- Tabs JS: works + re-typesets -->
     <script>
-        // Because gr.HTML mounts asynchronously, wait a tick then wire up tabs.
         setTimeout(() => {{
             const tabs = [
-                {{button: document.getElementById('tab-warmup'), panel: document.getElementById('panel-warmup') }},
-                {{button: document.getElementById('tab-tier1'),  panel: document.getElementById('panel-tier1')  }},
-                {{button: document.getElementById('tab-tier2'),  panel: document.getElementById('panel-tier2')  }},
-            ]];
+                {{ button: document.getElementById('tab-warmup'), panel: document.getElementById('panel-warmup') }},
+                {{ button: document.getElementById('tab-tier1'),  panel: document.getElementById('panel-tier1')  }},
+                {{ button: document.getElementById('tab-tier2'),  panel: document.getElementById('panel-tier2')  }}
+            ];
 
             function selectTab(idx) {{
                 tabs.forEach((t, i) => {{
@@ -190,12 +189,9 @@ WHAT_IS_F1_HTML = f"""
             }}
 
             tabs.forEach((t, i) => {{
-                if (t.button) {{
-                    t.button.addEventListener('click', () => selectTab(i));
-                }}
+                if (t.button) t.button.addEventListener('click', () => selectTab(i));
             }});
 
-            // Initial state
             selectTab(0);
         }}, 120);
     </script>
@@ -203,7 +199,6 @@ WHAT_IS_F1_HTML = f"""
 </html>
 """
 
-
 EVALUATION_QUEUE_TEXT = """
 ## Submitting to the FormulaOne Leaderboard
 

src/display/css_html_js.py

@@ -1,5 +1,4 @@
 custom_css = """
-/* Typography & readable width */
 :root, [data-theme="light"] {
   --f1-text: #111827;
   --f1-subtle: #6b7280;
@@ -8,61 +7,32 @@ custom_css = """
   --f1-bg-muted: #f9fafb;
 }
 
-/* Narrow the content for nicer paragraphs */
-.f1-container {
-  max-width: 800px;            /* (2) max width = 800 */
-  margin: 0 auto;
-  padding: 0 16px;
-}
+/* Readable width */
+.f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; } /* (2) */
+.markdown-text { font-size: 16px !important; max-width: 800px; margin: 0 auto; }
 
-/* Paragraphs and list items: pleasant wrapping without weird spacings */
+/* Paragraphs: nice wrapping */
 .f1-p, .f1-li {
   line-height: 1.75;
   color: #374151;
-  text-align: left;            /* (5) ensure no justified gaps */
-  text-wrap: pretty;           /* modern browsers: better line breaks */
-  overflow-wrap: break-word;   /* break long tokens if needed */
-  hyphens: auto;               /* allow soft hyphenation where possible */
+  text-align: left;         /* no huge gaps */
+  text-wrap: pretty;
+  overflow-wrap: break-word;
+  hyphens: auto;
   word-break: normal;
 }
 
-.markdown-text {
-  font-size: 16px !important;
-  max-width: 800px;            /* match content width for markdown blocks too */
-  margin: 0 auto;
-}
-
-/* Banner image */
-.banner_image { width: 75% !important; align-self: center !important; }
-
-/* Tabs (Gradio) */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
-button[role="tab"] {
-  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-  letter-spacing: 0.2px;
-  font-weight: 600;
-  font-size: 18px !important;
-}
-.tab-buttons button { font-size: 18px; }
-
 /* 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; /* (1) reduce gap under main title */
-}
-.f1-h2 {
+.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 { /* (4) smaller section headings */
   font-weight: 700;
   border-bottom: 1px solid var(--f1-border);
-  padding-bottom: 0.5rem;
-  margin-top: 2.25rem;
-  margin-bottom: 1.25rem;
+  padding-bottom: 0.45rem;
+  margin-top: 1.75rem;
+  margin-bottom: 0.9rem;
   color: var(--f1-text);
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+  font-size: 1.5rem;        /* was 1.875rem */
+  line-height: 2rem;
 }
 
 /* Links */
@@ -70,71 +40,33 @@ button[role="tab"] {
 .f1-a:hover { text-decoration: underline; }
 
 /* Blockquote & problem box */
-.f1-blockquote {
-  border-left: 4px solid #d1d5db;
-  padding-left: 1rem;
-  margin-left: 0;
-  font-style: italic;
-  color: #4b5563;
-}
-.f1-problem-box {
-  background-color: var(--f1-bg-muted);
-  border: 1px solid var(--f1-border);
-  border-radius: 8px;
-  padding: 16px;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
-}
-.f1-problem-box strong { color: var(--f1-text); }
+.f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; }
+.f1-problem-box { background-color: var(--f1-bg-muted); border: 1px solid var(--f1-border); border-radius: 8px; padding: 16px; margin-top: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04); }
+.f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; } /* (7) */
 
-/* Figures */
-.f1-figure { margin-top: 1.25rem; margin-bottom: 1.25rem; text-align: center; }
-.f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--f1-subtle); font-style: italic; }
-
-/* (3) Minimal table styling */
-.f1-table-wrap {
-  margin: 12px 0 8px 0;
-}
+/* (1) Clean table: centered, auto width, only top & left bars */
+.f1-table-wrap { margin: 10px auto 8px auto; text-align: center; }
 .f1-table {
-  width: 100%;
   border-collapse: collapse;
-  border: 1px solid var(--f1-border);
-  border-radius: 8px;
-  overflow: hidden; /* keep rounded corners */
+  width: auto;              /* not full width */
+  margin: 0 auto;           /* centered */
+  border-top: 1px solid var(--f1-border);
+  border-left: 1px solid var(--f1-border);
   background: var(--f1-bg);
 }
 .f1-table th, .f1-table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--f1-border);
+  padding: 8px 12px;
   text-align: left;
   vertical-align: top;
 }
-.f1-table th {
-  font-weight: 600;
-  color: var(--f1-text);
-  background: #fff; /* ultra-minimal */
-}
-.f1-table tr:last-child td { border-bottom: none; }
+.f1-table th { font-weight: 600; color: var(--f1-text); }
 
-/* (4) Bottom tabs: quiet, compact */
-.f1-tabs {
-  border: 1px solid var(--f1-border);
-  border-radius: 8px;
-  background: var(--f1-bg);
-}
-.f1-tabs-body {
-  padding: 12px 14px 6px 14px;
-}
-.f1-tabs-buttons {
-  display: flex;
-  gap: 6px;
-  border-top: 1px solid var(--f1-border);
-  padding: 6px;
-  justify-content: flex-start;
-}
+/* Tabs: quiet, compact, with small gap after (3) */
+.f1-tabs { border: 1px solid var(--f1-border); border-radius: 8px; background: var(--f1-bg); margin-bottom: 12px; } /* small spacing below */
+.f1-tabs-body { padding: 12px 14px 6px 14px; }
+.f1-tabs-buttons { display: flex; gap: 6px; border-top: 1px solid var(--f1-border); padding: 6px; justify-content: flex-start; }
 .f1-tab-btn {
-  font: 500 13px/1 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   padding: 6px 10px;
   border-radius: 6px;
   border: 1px solid transparent;
@@ -142,47 +74,21 @@ button[role="tab"] {
   color: #374151;
   cursor: pointer;
 }
-.f1-tab-btn[aria-selected="true"] {
-  background: var(--f1-bg-muted);
-  border-color: var(--f1-border);
-}
-
-/* Category cards (kept for other use, not used in the table now) */
-.f1-category-card {
-  display: block;
-  border-radius: 0.5rem;
-  border: 1px solid var(--f1-border);
-  padding: 1rem;
-  background-color: var(--f1-bg);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
+.f1-tab-btn[aria-selected="true"] { background: var(--f1-bg-muted); border-color: var(--f1-border); }
 
-/* Leaderboard width helpers (7) */
-#formulaone-leaderboard-tab-table .gr-row,
-#formulaone-leaderboard-tab-table .gr-column {
-  width: 100% !important;
-}
-#formulaone-leaderboard-tab-table [data-testid="dropdown"] { width: 100% !important; }
-#formulaone-leaderboard-tab-table input[type="text"] { width: 100% !important; }
+/* Leaderboard width helpers (6) */
+#formulaone-leaderboard-tab-table .gr-column .gr-row .gr-column { width: 100% !important; } /* column -> row -> column chain */
+#formulaone-leaderboard-tab-table .gr-row, #formulaone-leaderboard-tab-table .gr-column { 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 (6)(7) */
-#hf-login-btn,
-#hf-login-btn button,
-button[data-testid="login-button"],
-[data-testid="login-button"] button,
-div[data-testid="login-button"] > button {
+/* Login button: force light */
+#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;
 }
-#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;
-}
+#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 existing */
 #models-to-add-text { font-size: 18px !important; }
@@ -193,8 +99,7 @@ div[data-testid="login-button"] > button:hover {
 #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; }
+#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; }