Reference transcript, About links, logo sizing

app.py

@@ -40,6 +40,7 @@ import base64
 import html
 import json
 import os
+import re
 from pathlib import Path
 
 import gradio as gr
@@ -82,8 +83,10 @@ HIDDEN_BOARDS: frozenset = frozenset()
 # A flat record with "verdict" (better|worse) is one half of a curated TTS
 # contrast pair: it renders as a colored chip + player row under its group
 # (the eval's display name), whose shared prompt "transcript" prints once at
-# the lead-in. "model"/"score"/"instructions"/"tag"/"eval" ride along in the
-# manifest as provenance, deliberately never displayed.
+# the lead-in. A pair's shared "reference_transcript" (the enrollment passage
+# audible at the head of voice-identity clips) prints italicized above that —
+# without it the clip seems to open with the wrong text. "model"/"score"/
+# "instructions"/"tag"/"eval" ride along as provenance, never displayed.
 # A record with "turns" is a conversation (STS samples) rendered as a card:
 # header = model (or "label" for stimulus cards) + optional "score"
 # ({value, max, label}) badge + "verdict"/"verdict_label" chip + "caption";
@@ -349,6 +352,16 @@ def load_about() -> dict:
         return {}
 
 
+def _about_p(p: str) -> str:
+    """An intro/outro paragraph: plain text, except markdown-style
+    [label](https://...) spans, which become links opening in a new tab
+    (e.g. the outro's technical-report PDF)."""
+    return "<p class='abt-p'>" + re.sub(
+        r"\[([^\]]+)\]\((https?://[^)\s]+)\)",
+        r"<a href='\2' target='_blank' rel='noopener'>\1</a>",
+        html.escape(p)) + "</p>"
+
+
 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. Panels whose
@@ -357,7 +370,7 @@ def render_about(about: dict) -> str:
     tabs = {label for label, _key, _fname in MODALITIES}
     parts = ["<div class='ttslb abt'>"]
     for p in about.get("intro", []):
-        parts.append(f"<p class='abt-p'>{html.escape(p)}</p>")
+        parts.append(_about_p(p))
     cards = []
     for panel in about.get("panels", []):
         if panel.get("tab") not in tabs:
@@ -370,7 +383,7 @@ def render_about(about: dict) -> str:
             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(_about_p(p))
     parts.append("</div>")
     return "".join(parts)
 
@@ -571,6 +584,8 @@ TABLE_CSS = """
                   font-size:12.5px; line-height:1.5; color:var(--lb-ink-2); }
 .ttslb .smp-gtx.long { max-height:76px; overflow-y:auto; margin-left:14px; padding:8px 10px;
                        border:1px solid var(--lb-row-line); border-radius:8px; }
+/* the voice-identity pairs' enrollment passage, heard before the prompt text */
+.ttslb .smp-gtx.ref { font-style:italic; margin-bottom:0; }
 /* a Scenario blurb starting the next group gets breathing room after the
    previous group's cards */
 .ttslb .smp-convo + .smp-gnote { margin-top:20px; }
@@ -630,6 +645,10 @@ TABLE_CSS = """
    (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; }
+/* gradio 6 skins every anchor like a button (2px 8px padding + press
+   transform) — flatten that back to a plain inline text link */
+.ttslb .abt-p a { color:var(--lb-accent); padding:0 !important; }
+.ttslb .abt-p a:active { transform:none !important; }
 .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;
@@ -1130,6 +1149,14 @@ def render_samples_section(samples: list, factor_labels: dict,
                     rows_html.append(f"<div class='smp-group'>{html.escape(group)}{count}</div>")
                 shared_tx = False
                 if pair:
+                    # the enrollment passage heard at the head of each clip
+                    # (voice-identity evals) — shown so the opening audio
+                    # doesn't read as a mismatch with the prompt text
+                    refs = {(r.get("reference_transcript") or "").strip() for r in grp_rows}
+                    ref = refs.pop() if len(refs) == 1 else ""
+                    if ref:
+                        rows_html.append(f"<div class='smp-gtx ref'>Reference: "
+                                         f"“{html.escape(ref)}”</div>")
                     txs = {(r.get("transcript") or "").strip() for r in grp_rows}
                     tx = txs.pop() if len(txs) == 1 else ""
                     if tx:
@@ -1185,13 +1212,15 @@ def build_demo() -> gr.Blocks:
     # NB: the CSS/JS goes to launch(head=...) — gradio 6 moved `head` off Blocks.
     with gr.Blocks(title=title) as demo:
         if _LOGO_URI:
+            # 26px: the current wordmark asset is cropped to its ink (the original
+            # had padding filling ~61% of a 48px box), sized down a touch further
             if _LOGO_DARK_URI:
                 logo = (f"<img src='{_LOGO_URI}' alt='Hume AI'"
-                        " style='height:48px;display:var(--lb-logo-light,inline)'/>"
+                        " style='height:26px;display:var(--lb-logo-light,inline)'/>"
                         f"<img src='{_LOGO_DARK_URI}' alt='Hume AI'"
-                        " style='height:48px;display:var(--lb-logo-dark,none)'/>")
+                        " style='height:26px;display:var(--lb-logo-dark,none)'/>")
             else:
-                logo = f"<img src='{_LOGO_URI}' alt='Hume AI' style='height:48px'/>"
+                logo = f"<img src='{_LOGO_URI}' alt='Hume AI' style='height:26px'/>"
             gr.HTML(
                 "<div style='display:flex;align-items:center;gap:14px'>"
                 + logo