galb-dai commited on
Commit
4f53150
·
1 Parent(s): 3a9d27d
Files changed (1) hide show
  1. app.py +29 -9
app.py CHANGED
@@ -320,13 +320,34 @@ def build_accuracy_figure(tier: str):
320
  return fig
321
 
322
 
323
- _initial_accuracy_fig = build_accuracy_figure("Warmup")
324
 
325
  # Force light theme even if HF user prefers dark
326
  blocks = gr.Blocks(
327
  css=custom_css,
328
  theme=get_theme(),
329
- js="() => { document.body.classList.remove('dark'); document.documentElement.setAttribute('data-theme','light'); document.documentElement.setAttribute('data-color-mode','light'); }",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
  )
331
  with blocks:
332
 
@@ -369,14 +390,13 @@ with blocks:
369
  elem_classes="markdown-text",
370
  )
371
 
372
- learn_more_btn = gr.Button("Learn more about FormulaOne →", elem_id="learn-more-btn", variant="secondary")
373
-
374
- # Switch to the "What is FormulaOne" tab (id="what-is")
375
- learn_more_btn.click(
376
- lambda: gr.Tabs(selected="what-is"), # or gr.Tabs.update(selected="what-is") on older Gradio
377
- inputs=None,
378
- outputs=tabs,
379
  )
 
380
  # Existing "What is FormulaOne" tab
381
  with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
382
  gr.Image(
 
320
  return fig
321
 
322
 
323
+ _initial_accuracy_fig = build_accuracy_figure("Tier 1")
324
 
325
  # Force light theme even if HF user prefers dark
326
  blocks = gr.Blocks(
327
  css=custom_css,
328
  theme=get_theme(),
329
+ js="""
330
+ () => {
331
+ // Force light theme (your original)
332
+ document.body.classList.remove('dark');
333
+ document.documentElement.setAttribute('data-theme','light');
334
+ document.documentElement.setAttribute('data-color-mode','light');
335
+
336
+ // Handle <a data-tab-target="..."> to switch Gradio tabs by panel id
337
+ document.addEventListener('click', (e) => {
338
+ const a = e.target.closest('a[data-tab-target]');
339
+ if (!a) return;
340
+ e.preventDefault();
341
+ const id = a.getAttribute('data-tab-target'); // e.g., "what-is"
342
+ const panel = document.getElementById(id);
343
+ if (!panel) return;
344
+
345
+ // Find the tab header button that controls this panel and click it
346
+ const btn = document.querySelector(`[role="tab"][aria-controls="${panel.id}"]`);
347
+ if (btn) btn.click();
348
+ }, true);
349
+ }
350
+ """,
351
  )
352
  with blocks:
353
 
 
390
  elem_classes="markdown-text",
391
  )
392
 
393
+ gr.HTML(
394
+ '<div class="f1-container">'
395
+ '<p style="font-size:1.05rem;font-weight:700;margin-top:8px;">'
396
+ '<a class="f1-a" href="#" data-tab-target="what-is">Learn more about FormulaOne.</a>'
397
+ "</p></div>"
 
 
398
  )
399
+
400
  # Existing "What is FormulaOne" tab
401
  with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
402
  gr.Image(