Samples: Better/Worse verdict chips + shared pair transcripts

app.py

@@ -68,8 +68,8 @@ MODALITIES = [
 HIDDEN_BOARDS: frozenset = frozenset()
 
 # Curated audio samples (optional): a samples.json manifest next to the board
-# JSONs, each record {modality, factor, label?, group?, model?, text?,
-# transcript?, audio} where "audio" is a repo-relative path (e.g.
+# JSONs, each record {modality, factor, label?, group?, verdict?, model?,
+# text?, transcript?, audio} where "audio" is a repo-relative path (e.g.
 # "samples/foo.mp3") resolved against the dataset (or ./data locally). A
 # record's modality routes it to that tab, which appends a samples section
 # (per-factor category tabs) below the board table. "text" (generation prompt)
@@ -79,6 +79,11 @@ HIDDEN_BOARDS: frozenset = frozenset()
 # render under one shared subheading instead of per-row labels; a group whose
 # records carry a "scenario" renders a bold "Scenario:" blurb as its lead-in
 # instead of the heading.
+# 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.
 # 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";
@@ -412,6 +417,7 @@ TABLE_CSS = """
          --lb-row-line:#f1f2f4; --lb-row-alt:#fafafa; --lb-tip-bg:#1f2328; --lb-tip-ink:#f5f6f7;
          --lb-tip-border:#1f2328; --lb-shadow:rgba(0,0,0,.18); --lb-ramp:@RAMP_LIGHT@;
          --lb-dim-bg:#eef0f2; --lb-dim-ink:#9aa1ab;
+         --lb-good-bg:#eaf3df; --lb-good-ink:#567d2e; --lb-bad-bg:#f9e9e6; --lb-bad-ink:#b04a3e;
          font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
          color:var(--lb-ink); max-width:100%; margin:0; color-scheme:light;
          background:var(--lb-surface); border:1px solid var(--lb-border); border-radius:12px; padding:16px 18px; }
@@ -420,6 +426,7 @@ TABLE_CSS = """
                --lb-row-line:#26292e; --lb-row-alt:#202327; --lb-tip-bg:#262e3a; --lb-tip-ink:#e7eaef;
                --lb-tip-border:#39424f; --lb-shadow:rgba(0,0,0,.55); --lb-ramp:@RAMP_DARK@;
                --lb-dim-bg:#22262d; --lb-dim-ink:#79818d;
+               --lb-good-bg:#2c3f1e; --lb-good-ink:#a3c585; --lb-bad-bg:#48261f; --lb-bad-ink:#d98a80;
                color-scheme:dark; }
 .ttslb .tbl-wrap { overflow-x:auto; }
 /* Natural table width + pinned widths keep the rank/provider/License columns the
@@ -551,6 +558,19 @@ TABLE_CSS = """
 .ttslb .smp-gnote { margin:2px 0 8px; max-width:760px; text-align:left;
                     font-size:12px; line-height:1.5; color:var(--lb-ink-2); }
 .ttslb .smp-gnote strong { color:var(--lb-ink); }
+/* Better/Worse contrast pairs (curated TTS samples): fixed-width verdict
+   chips keep the pair's two players aligned; inks match the STS verdict
+   dots below. The pair's shared prompt text (.smp-gtx) sits under its group
+   heading — .long (the multi-minute long-form evals) caps it into a scroll
+   box instead of a wall of prose. */
+.ttslb .smp-chip { flex:none; width:60px; text-align:center; font-size:11px; font-weight:700;
+                   letter-spacing:.2px; padding:3px 0; border-radius:999px; }
+.ttslb .smp-chip.better { background:var(--lb-good-bg); color:var(--lb-good-ink); }
+.ttslb .smp-chip.worse { background:var(--lb-bad-bg); color:var(--lb-bad-ink); }
+.ttslb .smp-gtx { margin:2px 0 4px; padding-left:14px; max-width:760px; text-align:left;
+                  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; }
 /* a Scenario blurb starting the next group gets breathing room after the
    previous group's cards */
 .ttslb .smp-convo + .smp-gnote { margin-top:20px; }
@@ -1065,7 +1085,11 @@ def render_samples_section(samples: list, factor_labels: dict,
     but not displayed; a "transcript" (the human reference for ASR golden
     samples) is rendered next to the player. Rows carrying a "group" cluster
     under one shared subheading (with a sample count) instead of repeating a
-    per-row label — the manifest is expected to keep a group's rows adjacent."""
+    per-row label — the manifest is expected to keep a group's rows adjacent.
+    Flat rows carrying a "verdict" (better|worse) are curated contrast pairs:
+    each renders as a colored chip + player, and the pair's shared prompt
+    transcript prints once under the group heading (whose count is dropped —
+    "(2)" on every pair says nothing)."""
     if not samples:
         return ""
     factors = []
@@ -1081,23 +1105,39 @@ def render_samples_section(samples: list, factor_labels: dict,
                     f"{html.escape(f_label)} <span class='smp-n'>({len(rows)})</span></button>")
         rows_html = []
         cur_group = None
+        shared_tx = False   # the group lead-in already printed the pair's prompt
         for s in rows:
             group = (s.get("group") or "").strip()
             # each run of same-group records opens with a lead-in: a bold
             # "Scenario:" blurb when the record carries one (STS conversation
-            # groups), else the group name + count subheading (ASR tag
-            # buckets, whose grouped flat rows drop the head column and
-            # indent under it)
+            # groups), else the group name subheading — with a row count for
+            # ASR's tag buckets, but without one for Better/Worse pairs, where
+            # "(2)" says nothing. A verdict pair is a same-text contrast, so
+            # its shared "transcript" prints once here; the multi-minute
+            # long-form evals' text gets a capped scroll box (.long) instead
+            # of a wall of prose.
             if group and group != cur_group:
+                grp_rows = [r for r in rows if (r.get("group") or "").strip() == group]
+                pair = all(r.get("verdict") and not r.get("turns") for r in grp_rows)
                 if s.get("scenario"):
                     rows_html.append(f"<div class='smp-gnote'><strong>Scenario:"
                                      f"</strong> {html.escape(s['scenario'])}</div>")
                 elif group != f_label:
                     # a bucket named exactly like its tab would just repeat the
                     # tab label — skip the subheading, keep the grouped rows
-                    n = sum(1 for r in rows if (r.get("group") or "").strip() == group)
-                    rows_html.append(f"<div class='smp-group'>{html.escape(group)} "
-                                     f"<span class='smp-n'>({n})</span></div>")
+                    count = ("" if pair else
+                             f" <span class='smp-n'>({len(grp_rows)})</span>")
+                    rows_html.append(f"<div class='smp-group'>{html.escape(group)}{count}</div>")
+                shared_tx = False
+                if pair:
+                    txs = {(r.get("transcript") or "").strip() for r in grp_rows}
+                    tx = txs.pop() if len(txs) == 1 else ""
+                    if tx:
+                        shared_tx = True
+                        rows_html.append(f"<div class='smp-gtx{' long' if len(tx) > 400 else ''}'>"
+                                         f"{html.escape(tx)}</div>")
+            elif not group:
+                shared_tx = False
             cur_group = group or None
             if s.get("turns"):
                 rows_html.append(_convo_html(s))
@@ -1106,6 +1146,16 @@ def render_samples_section(samples: list, factor_labels: dict,
             player = (f"<audio controls preload='none' src='{src}'></audio>"
                       if src else "<span class='smp-pending'>audio pending</span>")
             transcript = (s.get("transcript") or "").strip()
+            if s.get("verdict"):
+                # a contrast-pair half: Better/Worse chip + player; the
+                # transcript rides in the row only when the lead-in didn't
+                # already print it for the whole pair
+                v = "better" if s["verdict"] == "better" else "worse"
+                tx = "" if shared_tx else transcript
+                body = (f"<span class='smp-chip {v}'>{v.capitalize()}</span>{player}"
+                        + (f"<div class='smp-text'>{html.escape(tx)}</div>" if tx else ""))
+                rows_html.append(f"<div class='smp-row grp{' txt' if tx else ''}'>{body}</div>")
+                continue
             if group:
                 body = (f"{player}<div class='smp-text'>{html.escape(transcript)}</div>"
                         if transcript else player)