About tab: JSON-driven panel cards

app.py

@@ -1,8 +1,10 @@
 """Real World VoiceEQ Benchmark — Gradio Space (Text-to-Speech / Speech-to-Speech /
 Voice Controllability / Speech Understanding / Speech Recognition / SLM Judge).
 
-One Space, six tabs — one per modality (plus the SLM Judge meta-leaderboard of
-judge-vs-human agreement). Each tab renders a heatmap-style ranking
+One Space: an About tab (about.json prose + one clickable card per panel that
+jumps to its tab), then one tab per modality (plus the SLM Judge
+meta-leaderboard of judge-vs-human agreement). Each leaderboard tab renders a
+heatmap-style ranking
 table from a self-describing JSON file that holds a *list* of boards (an Overall
 board + one per factor). The boards are pivoted into one wide table: each factor's
 `score` becomes a heatmapped column. Rows are ranked by the first factor column by
@@ -314,6 +316,44 @@ def merge_boards(boards: list) -> dict:
     }
 
 
+# ── About tab ───────────────────────────────────────────────────────────────
+# Content lives in about.json next to the board JSONs ({intro: [...],
+# panels: [{tab, title, paragraphs}], outro: [...]}). Each panel renders as
+# one clickable card that jumps to that leaderboard tab (wired in APP_JS);
+# "tab" must match the MODALITIES label exactly.
+ABOUT_NAME = "about.json"
+
+
+def load_about() -> dict:
+    """about.json from the dataset (or ./data), {} when absent — the About
+    tab is simply skipped without it."""
+    try:
+        return json.loads(_data_path(ABOUT_NAME).read_text())
+    except Exception:
+        return {}
+
+
+def render_about(about: dict) -> str:
+    """The About tab: intro paragraphs, one clickable card per leaderboard
+    panel (title + description, click = jump to that tab), outro."""
+    parts = ["<div class='ttslb abt'>"]
+    for p in about.get("intro", []):
+        parts.append(f"<p class='abt-p'>{html.escape(p)}</p>")
+    cards = []
+    for panel in about.get("panels", []):
+        body = "".join(f"<p>{html.escape(q)}</p>" for q in panel.get("paragraphs", []))
+        cards.append(
+            f"<div class='abt-card' role='button' tabindex='0' "
+            f"data-tab='{html.escape(panel['tab'], quote=True)}'>"
+            f"<div class='abt-card-t'>{html.escape(panel.get('title') or panel['tab'])}"
+            f"<span class='abt-go'>→</span></div>{body}</div>")
+    parts.append("<div class='abt-cards'>" + "".join(cards) + "</div>")
+    for p in about.get("outro", []):
+        parts.append(f"<p class='abt-p'>{html.escape(p)}</p>")
+    parts.append("</div>")
+    return "".join(parts)
+
+
 def _logo_data_uri(suffix: str = "") -> str:
     mimes = {".avif": "image/avif", ".svg": "image/svg+xml",
              ".png": "image/png", ".webp": "image/webp"}
@@ -523,6 +563,20 @@ TABLE_CSS = """
 .ttslb .smp-text { flex:1; min-width:220px; text-align:left; font-size:12.5px;
                    line-height:1.45; color:var(--lb-ink-2); }
 .ttslb .smp-pending { color:var(--lb-ink-3); font-size:12px; }
+/* About tab: intro/outro prose + one clickable card per leaderboard panel
+   (title + description; the whole card jumps to that tab via APP_JS). */
+.ttslb.abt { max-width:920px; }
+.ttslb .abt-p { margin:8px 2px; font-size:13px; line-height:1.55; color:var(--lb-ink-2); text-align:left; }
+.ttslb .abt-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
+                    gap:12px; margin:14px 0 12px; }
+.ttslb .abt-card { border:1px solid var(--lb-border); border-radius:10px; padding:13px 16px;
+                   cursor:pointer; text-align:left; }
+.ttslb .abt-card:hover { border-color:var(--lb-accent); box-shadow:inset 0 0 0 1px var(--lb-accent); }
+.ttslb .abt-card-t { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
+                     font-size:13.5px; font-weight:700; }
+.ttslb .abt-go { color:var(--lb-ink-4); font-weight:400; }
+.ttslb .abt-card:hover .abt-go { color:var(--lb-accent); }
+.ttslb .abt-card p { margin:7px 0 0; font-size:12.5px; line-height:1.5; color:var(--lb-ink-2); }
 /* Header logo swap: each img bakes its default visibility inline as
    display:var(--lb-logo-*, ...) — gradio strips class-based styling from
    gr.HTML imgs, but inline styles and inherited custom properties survive.
@@ -580,6 +634,15 @@ APP_JS = """
   }
   document.addEventListener('click', function (e) {
     if (!e.target.closest) return;
+    var chip = e.target.closest('.ttslb .abt-card');
+    if (chip) {   // About-tab panel card: jump to that panel's tab
+      var want = chip.getAttribute('data-tab');
+      var tabs = document.querySelectorAll("button[role='tab']");
+      for (var i = 0; i < tabs.length; i++) {
+        if (tabs[i].textContent.trim() === want) { tabs[i].click(); window.scrollTo(0, 0); break; }
+      }
+      return;
+    }
     var btn = e.target.closest('.ttslb .csv-btn');
     if (btn) {
       var card = btn.closest('.ttslb');
@@ -619,6 +682,13 @@ APP_JS = """
     if (numeric) { var f = parseFloat(v); return isNaN(f) ? { empty: true } : { n: f }; }
     return { s: v };
   }
+  document.addEventListener('keydown', function (e) {
+    // About-tab panel cards are div[role=button]: Enter/Space activates
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.closest) {
+      var card = e.target.closest('.ttslb .abt-card');
+      if (card) { e.preventDefault(); card.click(); }
+    }
+  });
   document.addEventListener('click', function (e) {
     if (!e.target.closest) return;
     if (e.target.closest('.info')) return;   // ⓘ tooltip icon: not a sort click
@@ -973,10 +1043,13 @@ def build_demo() -> gr.Blocks:
             gr.Markdown(f"# {title}")
 
         samples = load_samples()
+        about = load_about()
         with gr.Tabs():
+            if about:
+                with gr.Tab("About"):
+                    gr.HTML(render_about(about))
             for label, key, data_name in MODALITIES:
-                boards = load_boards(data_name)
-                board = merge_boards(boards)
+                board = merge_boards(load_boards(data_name))
                 factor_labels = {c["field"]: c["label"] for c in board["metricColumns"]}
                 # CSV filenames follow the visible tab label, e.g.
                 # rw-voice-eq-speech-understanding.csv