add visual Gallery tab (top-10 verified, sticky GT, fixture picker)

Visual-first leaderboard as a new default tab. Self-contained HTML
(gallery.py) inlined into an iframe srcdoc with base64 thumbnails, so
it works on the private Space where HF's edge 404s in-browser
custom-route fetches (same constraint the report viewer's srcdoc path
already handles). Top-10 verified only, teal sticky ground-truth row,
3-fixture picker (drop-oldest, global re-render), dashed cell for
invalid/missing fixtures, per-row generation/editing/validity expander,
and a GT-vs-output compare modal per thumbnail. Existing Leaderboard /
Submit / About / Admin tabs unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>

app.py

@@ -24,6 +24,7 @@ rather than render).
 """
 from __future__ import annotations
 
+import base64
 import html
 import logging
 import os
@@ -41,6 +42,7 @@ from huggingface_hub import hf_hub_download
 from leaderboard import (
     ADMIN_COLUMNS,
     ADMIN_SELECT_COL,
+    HF_DATA_GT_REPO,
     HF_DATA_REPO,
     HF_SUBMISSIONS_REPO,
     LEADERBOARD_COLS,
@@ -50,10 +52,12 @@ from leaderboard import (
     VALIDATED_LEADERBOARD_DATATYPES,
     LeaderboardDataError,
     _fmt_timestamp,
+    _load_rows_from_hub,
     build_combined_csv,
     load_admin_table,
     load_leaderboard_split,
 )
+from gallery import render_gallery_page
 from admin import (
     VALID_METHODS,
     delete_rows,
@@ -513,12 +517,130 @@ def serve_report(submission_id: str) -> Response:
     return Response(content=content, media_type="text/html; charset=utf-8")
 
 
+# Single canonical view served as the gallery thumbnail. Matches the
+# view uploaded by the eval job (eval_job.py GALLERY_THUMB_VIEW) and the
+# GT render the gallery pairs it with, so columns stay comparable.
+GALLERY_THUMB_VIEW = "iso"
+
+
+@lru_cache(maxsize=512)
+def _fetch_render(submission_id: str, fixture: str) -> bytes | None:
+    """Pull a submission's gallery thumbnail (``renders/<id>/<fixture>.png``).
+
+    Cached in-process so repeated scrolls past the same thumbnail don't
+    re-hit the Hub. Returns ``None`` on any failure so the caller serves
+    a clean 404 (the gallery only requests this for fixtures it already
+    knows are valid, so a miss here is genuinely unexpected/transient).
+    """
+    try:
+        local_path = hf_hub_download(
+            repo_id=HF_SUBMISSIONS_REPO,
+            filename=f"renders/{submission_id}/{fixture}.png",
+            repo_type="dataset",
+        )
+        return Path(local_path).read_bytes()
+    except Exception as e:  # noqa: BLE001 - any Hub failure -> 404
+        logger.warning(
+            "Failed to fetch render %s/%s (%s: %s)",
+            submission_id, fixture, type(e).__name__, e,
+        )
+        return None
+
+
+@lru_cache(maxsize=256)
+def _fetch_gt_render(fixture: str) -> bytes | None:
+    """Pull a fixture's ground-truth thumbnail from the private GT dataset.
+
+    Path inside the GT repo is ``<fixture>/renders/<view>.png`` (see
+    ``cadgenbench.common.paths.data_gt_dir``). GT renders are a property
+    of the data revision, not of any submission, so they're served
+    straight from the GT repo rather than duplicated per submission.
+    Needs the Space ``HF_TOKEN``'s read scope on the private repo.
+    """
+    try:
+        local_path = hf_hub_download(
+            repo_id=HF_DATA_GT_REPO,
+            filename=f"{fixture}/renders/{GALLERY_THUMB_VIEW}.png",
+            repo_type="dataset",
+        )
+        return Path(local_path).read_bytes()
+    except Exception as e:  # noqa: BLE001 - any Hub failure -> 404
+        logger.warning(
+            "Failed to fetch GT render for %s (%s: %s)",
+            fixture, type(e).__name__, e,
+        )
+        return None
+
+
+def _data_uri(png_bytes: bytes | None) -> str | None:
+    """Base64 ``data:`` URI for PNG bytes, or ``None``.
+
+    The gallery inlines thumbnails as data URIs rather than referencing
+    a proxy route, because while the Space is **private** HF's edge
+    404s in-browser requests to custom routes (same constraint that
+    makes the report viewer use ``srcdoc`` + base64; see
+    ``space-setup/post-gt-swap.md`` item 12). Inlining means the browser
+    makes no second request. Switches to lazy proxy URLs once the Space
+    is public.
+    """
+    if png_bytes is None:
+        return None
+    return "data:image/png;base64," + base64.b64encode(png_bytes).decode("ascii")
+
+
+def _render_data_uri(submission_id: str, fixture: str) -> str | None:
+    """Resolver for a submission's per-fixture gallery thumbnail."""
+    return _data_uri(_fetch_render(submission_id, fixture))
+
+
+def _gt_data_uri(fixture: str) -> str | None:
+    """Resolver for a fixture's ground-truth gallery thumbnail."""
+    return _data_uri(_fetch_gt_render(fixture))
+
+
+def _gallery_iframe_html() -> str:
+    """Build the gallery as a self-contained ``srcdoc`` iframe.
+
+    Reads the live rows, renders the page with base64-inlined images,
+    and inlines the whole document into an iframe ``srcdoc`` so it gets
+    its own style context (no Gradio CSS collision) and makes no
+    second HTTP request (works on the private Space). A Hub read
+    failure degrades to an empty gallery rather than crashing the tab.
+    """
+    try:
+        rows = _load_rows_from_hub()
+    except LeaderboardDataError:
+        logger.exception("Gallery row load failed; rendering empty gallery")
+        rows = []
+    doc = render_gallery_page(rows, _render_data_uri, _gt_data_uri)
+    escaped = html.escape(doc, quote=True)
+    return (
+        f'<iframe srcdoc="{escaped}" '
+        'style="width:100%; height:90vh; border:0; display:block;" '
+        'title="CADGenBench gallery"></iframe>'
+    )
+
+
 with gr.Blocks(title="CADGenBench Leaderboard", theme=gr.themes.Soft()) as blocks:
     gr.Markdown(
         "# CADGenBench Leaderboard\n"
         "_Benchmarking AI-driven CAD generation._"
     )
 
+    with gr.Tab("Gallery"):
+        # Visual-first leaderboard. The bespoke surface (sticky GT row,
+        # fixture picker, thumbnail grid, compare modal) is a
+        # self-contained HTML doc inlined into an iframe `srcdoc` with
+        # base64 thumbnails, so it keeps its own style context and makes
+        # no second HTTP request (works on the private Space, where
+        # HF's edge 404s in-browser custom-route fetches). Built at boot;
+        # the Refresh button rebuilds it after a promotion/new result.
+        gallery_html = gr.HTML(value=_gallery_iframe_html())
+        gallery_refresh_btn = gr.Button("Refresh gallery", size="sm")
+        gallery_refresh_btn.click(
+            fn=_gallery_iframe_html, outputs=gallery_html,
+        )
+
     with gr.Tab("Leaderboard"):
         # Load both tiers once at boot. `_safe_load_split` keeps a Hub
         # read failure from crashing the Space: on failure the frames

gallery.py

@@ -0,0 +1,562 @@
+# Copyright 2026 Hugging Face
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Visual gallery leaderboard page.
+
+Builds a self-contained HTML document (its own CSS + JS) from the live
+submission rows. The Space serves it at ``/gallery`` and embeds it in
+the Gradio "Gallery" tab via an iframe, so the bespoke visual surface
+(sticky ground-truth row, fixture picker, thumbnail grid, report
+modal) lives in plain HTML/JS isolated from Gradio's styles rather
+than being forced into Gradio components.
+
+The page is data-driven: :func:`build_gallery_payload` shapes the
+top-10 verified rows + the fixture universe into a small JSON blob,
+which the page's JS renders. Render lookups are isolated behind the
+``renderFor`` / ``gtRenderFor`` JS hooks (mirroring the design brief),
+pointed at the Space's render-proxy routes:
+
+- ``renderFor(sub, fixtureId)``  -> ``/render/<id>/<fixture>.png``
+  (or ``null`` when the per-fixture status is invalid/missing, which
+  draws the dashed "invalid generation" cell).
+- ``gtRenderFor(fixtureId)``     -> ``/gt-render/<fixture>.png``.
+
+Thumbnail clicks open the existing per-submission report (served by
+the Space's ``/reports/<id>.html`` proxy) deep-linked to the clicked
+fixture's card via ``#fixture=<name>``.
+"""
+from __future__ import annotations
+
+import json
+
+# Gallery shows the top-N verified submissions only (the visual shop
+# window). The numeric long tail lives on the Full results / Leaderboard
+# tab, not here.
+GALLERY_TOP_N = 10
+
+# Default number of fixture columns the picker opens with, capped at the
+# size of the available fixture universe.
+DEFAULT_FIXTURE_COLUMNS = 3
+
+
+def _verified_rows(rows: list[dict]) -> list[dict]:
+    """Completed + validated rows, score-sorted desc, capped at the top N.
+
+    Mirrors the leaderboard's notion of "verified": ``validation_status
+    == 'validated'`` and a terminal ``status == 'completed'`` with a
+    real aggregate score. Pending / failed / unvalidated rows never
+    reach the visual gallery.
+    """
+    verified = [
+        r
+        for r in rows
+        if r.get("validation_status") == "validated"
+        and r.get("status") == "completed"
+        and isinstance(r.get("aggregate_score"), (int, float))
+    ]
+    verified.sort(key=lambda r: r.get("aggregate_score") or 0.0, reverse=True)
+    return verified[:GALLERY_TOP_N]
+
+
+def _fixture_universe(rows: list[dict]) -> list[dict]:
+    """Ordered fixture list discovered from the rows' ``per_fixture_scores``.
+
+    The fixture set is never hardcoded (it shifts as parts get added /
+    removed): it is the union of every ``per_fixture_scores`` key across
+    the verified rows, sorted for a stable column order. ``task_type``
+    is carried along (first non-null wins) as the small chip tag, since
+    difficulty tags are not available in the data.
+    """
+    task_by_fixture: dict[str, str] = {}
+    for r in rows:
+        pfs = r.get("per_fixture_scores") or {}
+        for fixture_id, fx in pfs.items():
+            if fixture_id not in task_by_fixture:
+                task_by_fixture[fixture_id] = (fx or {}).get("task_type") or ""
+    return [
+        {"id": fid, "name": fid, "task": task_by_fixture[fid]}
+        for fid in sorted(task_by_fixture)
+    ]
+
+
+def _sub_payload(row: dict, render_resolver) -> dict:
+    """Project one verified row into the compact shape the page JS needs.
+
+    ``render_resolver(submission_id, fixture_id)`` returns the image
+    source (a base64 data URI on the private Space, a proxy URL once
+    public) for a *valid* fixture, or ``None``. Invalid/missing
+    fixtures carry ``img: null`` so the page draws the dashed cell.
+    """
+    by_task = row.get("score_by_task_type") or {}
+    pfs = row.get("per_fixture_scores") or {}
+    sid = row.get("submission_id") or ""
+    cells: dict[str, dict] = {}
+    for fid, fx in pfs.items():
+        fx = fx or {}
+        status = fx.get("status") or "missing"
+        cells[fid] = {
+            "status": status,
+            "cad": fx.get("cad_score"),
+            "img": render_resolver(sid, fid) if status == "valid" else None,
+        }
+    return {
+        "id": sid,
+        "name": row.get("submission_name") or "(unnamed submission)",
+        "who": row.get("submitter_name") or "",
+        "score": row.get("aggregate_score"),
+        "validity": row.get("validity_rate"),
+        "gen": by_task.get("generation"),
+        "edit": by_task.get("editing"),
+        "date": row.get("submitted_at") or "",
+        "version": row.get("cadgenbench_version") or "",
+        "blobUrl": row.get("submission_blob_url") or "",
+        "cells": cells,
+    }
+
+
+def build_gallery_payload(rows: list[dict], render_resolver, gt_resolver) -> dict:
+    """Shape live rows into the JSON the gallery page renders from.
+
+    Image sources are injected via two resolvers so this module stays
+    agnostic to how renders are served (base64-inlined for the private
+    Space, proxy URLs once public):
+
+    - ``render_resolver(submission_id, fixture_id) -> str | None``
+    - ``gt_resolver(fixture_id) -> str | None``
+
+    Returns ``{"fixtures", "subs", "selected", "gtImg"}`` where
+    ``selected`` is the default set of (up to three) fixture columns and
+    ``gtImg`` maps each fixture to its ground-truth image source.
+    """
+    verified = _verified_rows(rows)
+    fixtures = _fixture_universe(verified)
+    selected = [f["id"] for f in fixtures[:DEFAULT_FIXTURE_COLUMNS]]
+    gt_img = {f["id"]: gt_resolver(f["id"]) for f in fixtures}
+    return {
+        "fixtures": fixtures,
+        "subs": [_sub_payload(r, render_resolver) for r in verified],
+        "selected": selected,
+        "gtImg": gt_img,
+    }
+
+
+def render_gallery_page(rows: list[dict], render_resolver, gt_resolver) -> str:
+    """Build the full standalone gallery HTML document from live rows.
+
+    ``render_resolver`` / ``gt_resolver`` supply image sources (see
+    :func:`build_gallery_payload`). The caller (the Space) inlines
+    base64 data URIs while private; a local harness can do the same so
+    the page is self-contained with no second requests.
+    """
+    payload = build_gallery_payload(rows, render_resolver, gt_resolver)
+    data_json = json.dumps(payload, ensure_ascii=False)
+    return (
+        "<!DOCTYPE html><html lang='en'><head>"
+        "<meta charset='UTF-8'>"
+        "<meta name='viewport' content='width=device-width, initial-scale=1.0'>"
+        "<title>CADGenBench Gallery</title>"
+        f"<style>{_CSS}</style>"
+        "</head><body>"
+        f"{_BODY}"
+        f"<script>window.GALLERY_DATA = {data_json};</script>"
+        f"<script>{_JS}</script>"
+        "</body></html>"
+    )
+
+
+# ---------------------------------------------------------------------------
+# CSS (ported from the reference prototype, trimmed to the gallery surface)
+# ---------------------------------------------------------------------------
+
+_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
+:root {
+  --bg: #f4f5f7; --panel: #ffffff; --ink: #14161c; --ink-soft: #5b6170;
+  --ink-faint: #9aa0ad; --line: #e3e5ea; --line-strong: #d2d5dd;
+  --accent: #4338ca; --accent-soft: #eef0ff; --good: #15803d;
+  --good-soft: #e9f7ee; --bad: #b42318; --bad-soft: #fdeceb;
+  --gt: #0f766e; --gt-soft: #e6f4f2; --thumb-bg: #eceef2;
+  --shadow: 0 1px 2px rgba(20,22,28,.04), 0 8px 24px rgba(20,22,28,.06);
+  --radius: 14px;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; background: var(--bg); color: var(--ink);
+  font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased;
+  padding: 18px 0 60px;
+}
+.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
+
+.controls {
+  background: var(--panel); border: 1px solid var(--line);
+  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
+}
+.controls .label {
+  font-size: 12px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 12px;
+}
+.picker-help { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-size: 12px; }
+.chips { display: flex; gap: 10px; flex-wrap: wrap; }
+.chip {
+  font-family: inherit; font-size: 13.5px; cursor: pointer;
+  border: 1px solid var(--line-strong); background: #fafbfc; color: var(--ink-soft);
+  padding: 9px 14px; border-radius: 10px; display: flex; align-items: center;
+  gap: 8px; transition: all .14s ease; font-weight: 500;
+}
+.chip:hover { border-color: var(--accent); color: var(--ink); }
+.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
+.chip .tag { font-family: 'Space Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.05); text-transform: uppercase; letter-spacing: .03em; }
+.chip.on .tag { background: rgba(67,56,202,.12); }
+
+.section-label {
+  display: flex; align-items: center; gap: 10px; margin: 28px 0 14px;
+  font-size: 14px; font-weight: 700; color: var(--accent);
+  text-transform: uppercase; letter-spacing: .05em;
+}
+.section-label .verified-pill {
+  font-family: 'Space Mono', monospace; font-size: 10px; color: var(--good);
+  background: var(--good-soft); padding: 3px 8px; border-radius: 999px;
+  letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
+}
+.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+.gallery { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
+.grid-head, .grow {
+  display: grid;
+  grid-template-columns: 52px minmax(220px, 1.4fr) 116px repeat(var(--ncol, 3), minmax(150px, 1fr));
+  align-items: stretch;
+}
+.grid-head {
+  background: #fbfbfd; border-bottom: 1px solid var(--line); font-size: 11px;
+  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
+  font-weight: 700; position: sticky; top: 0; z-index: 20;
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+.grid-head > div { padding: 13px 14px; display: flex; align-items: center; }
+.grid-head .fix-h { flex-direction: column; align-items: flex-start; gap: 2px; }
+.grid-head .fix-h .fname { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; }
+.grid-head .fix-h .ftask { font-size: 9.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
+
+.grow.gt-row {
+  background: var(--gt-soft); border-bottom: 2px solid var(--gt);
+  position: sticky; top: var(--head-h, 46px); z-index: 15;
+  box-shadow: 0 6px 14px -8px rgba(15,118,110,.45);
+}
+.grow.gt-row .rank, .grow.gt-row .ident { display: flex; align-items: center; }
+.grow.gt-row .ident { font-weight: 700; color: var(--gt); flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
+.grow.gt-row .ident .gt-sub { font-weight: 500; font-size: 11.5px; color: var(--gt); opacity: .8; }
+.grow.gt-row .score-cell { color: var(--gt); }
+
+.grow.sub-row { border-bottom: 1px solid var(--line); transition: background .12s ease; }
+.grow.sub-row:last-child { border-bottom: none; }
+.grow.sub-row:hover { background: #fafbff; }
+
+.rank {
+  padding: 16px 14px; font-family: 'Space Mono', monospace; font-weight: 700;
+  font-size: 15px; color: var(--ink-faint); display: flex; align-items: center;
+  justify-content: center;
+}
+.rank.medal-1 { color: #b8860b; } .rank.medal-2 { color: #6b7280; } .rank.medal-3 { color: #a0522d; }
+
+.ident { padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
+.ident .sub-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
+.ident .submitter { font-size: 12px; color: var(--ink-faint); font-family: 'Space Mono', monospace; }
+
+.score-cell { padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
+.score-cell .agg { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
+.score-cell .validity { font-size: 11.5px; font-family: 'Space Mono', monospace; color: var(--good); font-weight: 700; display: flex; align-items: baseline; gap: 5px; }
+.score-cell .validity .vlabel { font-weight: 400; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
+.score-cell .validity.imperfect { color: #b45309; }
+.score-cell .validity.imperfect .vlabel { color: #c98a3a; }
+
+.thumb-cell { padding: 8px; display: flex; align-items: center; justify-content: center; position: relative; }
+.thumb {
+  width: 100%; aspect-ratio: 16/10; border-radius: 8px; background: var(--thumb-bg);
+  border: 1px solid var(--line); overflow: hidden; cursor: pointer; position: relative;
+  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
+}
+.thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,22,28,.14); border-color: var(--accent); }
+.thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
+.thumb .open-hint {
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  opacity: 0; background: rgba(67,56,202,.08); transition: opacity .14s ease;
+  font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em;
+}
+.thumb:hover .open-hint { opacity: 1; }
+
+.thumb.failed { cursor: default; background: var(--bad-soft); border: 1px dashed #e9b3ae; display: flex; align-items: center; justify-content: center; }
+.thumb.failed:hover { transform: none; box-shadow: none; border-color: #e9b3ae; }
+.thumb.failed .ftag { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.4; }
+
+.sub-row.open { background: #fafbff; }
+.detail {
+  grid-column: 1 / -1; background: #f8f9fc; border-top: 1px dashed var(--line-strong);
+  padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease;
+}
+.detail.show { max-height: 260px; padding: 18px 14px 22px; }
+.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
+.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
+.metric .m-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
+.metric .m-val { font-size: 20px; font-weight: 800; margin-top: 4px; letter-spacing: -.01em; }
+.detail-foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
+.detail-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
+.detail-foot a:hover { text-decoration: underline; }
+.row-toggle {
+  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 7px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--ink-faint);
+  text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--line);
+  background: #fcfcfe; user-select: none;
+}
+.row-toggle:hover { color: var(--accent); background: var(--accent-soft); }
+.row-toggle .chev { transition: transform .2s ease; }
+.sub-row.open .row-toggle .chev { transform: rotate(180deg); }
+
+.empty-note { background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 48px 24px; text-align: center; color: var(--ink-faint); font-size: 14px; }
+
+/* compare modal (GT vs output) */
+.modal-back { position: fixed; inset: 0; background: rgba(20,22,28,.5); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
+.modal-back.show { display: flex; }
+.modal { background: var(--panel); border-radius: 16px; width: 100%; max-width: 620px; padding: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
+.modal h4 { margin: 0 0 4px; font-size: 18px; }
+.modal .msub { color: var(--ink-faint); font-size: 13px; font-family: 'Space Mono', monospace; margin-bottom: 18px; }
+.modal-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.modal-compare figure { margin: 0; }
+.modal-compare figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
+.modal-compare .mthumb { width: 100%; aspect-ratio: 16/10; border-radius: 8px; background: var(--thumb-bg); border: 1px solid var(--line); overflow: hidden; }
+.modal-compare .mthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
+.modal-compare .mthumb.failed { background: var(--bad-soft); border: 1px dashed #e9b3ae; display: flex; align-items: center; justify-content: center; }
+.modal-compare .mthumb.failed span { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
+.modal-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); background: var(--accent-soft); padding: 12px 14px; border-radius: 10px; }
+.modal-close { margin-top: 20px; width: 100%; padding: 11px; border: 1px solid var(--line-strong); background: #fafbfc; border-radius: 10px; font-family: inherit; font-weight: 600; cursor: pointer; font-size: 14px; }
+.modal-close:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
+"""
+
+
+# ---------------------------------------------------------------------------
+# Body
+# ---------------------------------------------------------------------------
+
+_BODY = """
+<div class="wrap">
+  <div class="controls">
+    <div class="label">Fixtures shown <span class="picker-help">- pick 3 to compare across all models (changes columns globally)</span></div>
+    <div class="chips" id="chips"></div>
+  </div>
+  <div class="section-label">
+    Validated leaderboard - Top 10
+    <span class="verified-pill"><span class="dot"></span>verified only</span>
+  </div>
+  <div class="gallery" id="gallery">
+    <div class="grid-head" id="gridHead"></div>
+  </div>
+</div>
+<div class="modal-back" id="modalBack">
+  <div class="modal">
+    <h4 id="modalTitle"></h4>
+    <div class="msub" id="modalSub"></div>
+    <div class="modal-compare">
+      <figure><figcaption>Ground truth</figcaption><div class="mthumb" id="modalGt"></div></figure>
+      <figure><figcaption id="modalOutCap">Output (aligned)</figcaption><div class="mthumb" id="modalOut"></div></figure>
+    </div>
+    <div class="modal-note" id="modalNote"></div>
+    <button class="modal-close" id="modalClose">Close</button>
+  </div>
+</div>
+"""
+
+
+# ---------------------------------------------------------------------------
+# JS (data-driven render of the gallery; render lookups isolated behind
+# renderFor / gtRenderFor as in the design brief)
+# ---------------------------------------------------------------------------
+
+_JS = """
+const DATA = window.GALLERY_DATA || {fixtures: [], subs: [], selected: []};
+const FIXTURES = DATA.fixtures;
+let selected = (DATA.selected || []).slice();
+
+// --- Render hooks. ---------------------------------------------------------
+// The image sources are injected by the server (base64 data URIs while the
+// Space is private; proxy URLs once public), so these just read the payload.
+// renderFor returns null for an invalid/missing fixture -> dashed cell.
+function renderFor(sub, fxId) {
+  const c = sub.cells[fxId];
+  return c ? c.img : null;
+}
+function gtRenderFor(fxId) {
+  return (DATA.gtImg || {})[fxId] || null;
+}
+function cellOf(sub, fxId) { return sub.cells[fxId] || {}; }
+
+function fmt(x, d) { return (x === null || x === undefined) ? '-' : Number(x).toFixed(d); }
+function pct(x) { return (x === null || x === undefined) ? '-' : Math.round(Number(x) * 100) + '%'; }
+function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+function fixtureMeta(id) { return FIXTURES.find(f => f.id === id); }
+
+function buildChips() {
+  const wrap = document.getElementById('chips');
+  wrap.innerHTML = FIXTURES.map(f => {
+    const on = selected.includes(f.id);
+    const tag = f.task ? '<span class="tag">' + esc(f.task) + '</span>' : '';
+    return '<button class="chip ' + (on ? 'on' : '') + '" data-id="' + esc(f.id) + '">' + tag + esc(f.name) + '</button>';
+  }).join('');
+  wrap.querySelectorAll('.chip').forEach(c => {
+    c.onclick = () => {
+      const id = c.dataset.id;
+      if (selected.includes(id)) {
+        if (selected.length <= 1) return;      // keep at least 1
+        selected = selected.filter(x => x !== id);
+      } else {
+        if (selected.length >= 3) selected.shift();  // cap at 3, drop oldest
+        selected.push(id);
+      }
+      buildChips(); buildGallery();
+    };
+  });
+}
+
+function buildHead() {
+  const head = document.getElementById('gridHead');
+  let h = '<div>#</div><div>Submission</div><div>Score</div>';
+  selected.forEach(id => {
+    const f = fixtureMeta(id);
+    const task = f && f.task ? '<span class="ftask">' + esc(f.task) + '</span>' : '';
+    h += '<div class="fix-h"><span class="fname">' + esc(f ? f.name : id) + '</span>' + task + '</div>';
+  });
+  head.innerHTML = h;
+}
+
+function thumbHTML(url, attrs, clickable) {
+  if (!url) {
+    return '<div class="thumb failed"><span class="ftag">invalid<br>generation</span></div>';
+  }
+  const hint = clickable ? '<span class="open-hint">open</span>' : '';
+  return '<div class="thumb" ' + attrs + '><img loading="lazy" src="' + url + '" alt="">' + hint + '</div>';
+}
+
+function buildGallery() {
+  const g = document.getElementById('gallery');
+  g.style.setProperty('--ncol', selected.length);
+  buildHead();
+  g.querySelectorAll('.grow').forEach(n => n.remove());
+
+  if (!DATA.subs.length) {
+    let note = g.querySelector('.empty-note');
+    if (!note) {
+      note = document.createElement('div');
+      note.className = 'empty-note';
+      note.textContent = 'No verified submissions yet. Once a submission is promoted to the validated tier it appears here.';
+      g.appendChild(note);
+    }
+    return;
+  }
+
+  // Ground-truth pinned row.
+  const gt = document.createElement('div');
+  gt.className = 'grow gt-row';
+  let gtCells = '<div class="rank">&#9733;</div>'
+    + '<div class="ident">Ground truth<span class="gt-sub">reference geometry</span></div>'
+    + '<div class="score-cell"><span class="agg">1.000</span></div>';
+  selected.forEach(id => {
+    gtCells += '<div class="thumb-cell">' + thumbHTML(gtRenderFor(id), 'data-gt="' + esc(id) + '"', false) + '</div>';
+  });
+  gt.innerHTML = gtCells;
+  g.appendChild(gt);
+
+  DATA.subs.forEach((s, i) => {
+    const row = document.createElement('div');
+    row.className = 'grow sub-row';
+    const medal = i < 3 ? 'medal-' + (i + 1) : '';
+    const imperfect = (s.validity !== null && s.validity < 1) ? 'imperfect' : '';
+    let cells = '<div class="rank ' + medal + '">' + (i + 1) + '</div>'
+      + '<div class="ident"><span class="sub-name">' + esc(s.name) + '</span><span class="submitter">' + esc(s.who) + '</span></div>'
+      + '<div class="score-cell"><span class="agg">' + fmt(s.score, 3) + '</span>'
+      + '<span class="validity ' + imperfect + '">' + pct(s.validity) + ' <span class="vlabel">valid</span></span></div>';
+    selected.forEach(id => {
+      cells += '<div class="thumb-cell">' + thumbHTML(renderFor(s, id), 'data-sub="' + esc(s.id) + '" data-fix="' + esc(id) + '"', true) + '</div>';
+    });
+    cells += '<div class="row-toggle" data-toggle="' + esc(s.id) + '">more numbers <span class="chev">&#9662;</span></div>';
+    cells += '<div class="detail" id="detail-' + esc(s.id) + '">'
+      + '<div class="metric-grid">'
+      + '<div class="metric"><div class="m-label">Generation</div><div class="m-val">' + fmt(s.gen, 3) + '</div></div>'
+      + '<div class="metric"><div class="m-label">Editing</div><div class="m-val">' + fmt(s.edit, 3) + '</div></div>'
+      + '<div class="metric"><div class="m-label">Validity</div><div class="m-val">' + pct(s.validity) + '</div></div>'
+      + '</div>'
+      + '<div class="detail-foot"><span>Submitted ' + esc(s.date) + (s.version ? ' - cadgenbench v' + esc(s.version) : '') + '</span>'
+      + (s.blobUrl ? '<a href="' + esc(s.blobUrl) + '" target="_blank" rel="noopener">Download ZIP</a>' : '')
+      + '</div></div>';
+    row.innerHTML = cells;
+    g.appendChild(row);
+  });
+
+  wireGallery();
+  syncHeadHeight();
+}
+
+function wireGallery() {
+  document.querySelectorAll('[data-toggle]').forEach(t => {
+    t.onclick = () => {
+      const id = t.dataset.toggle;
+      document.getElementById('detail-' + id).classList.toggle('show');
+      t.closest('.sub-row').classList.toggle('open');
+    };
+  });
+  document.querySelectorAll('.thumb[data-sub]').forEach(th => {
+    th.onclick = () => {
+      const sub = DATA.subs.find(x => x.id === th.dataset.sub);
+      openModal(th.dataset.fix, sub);
+    };
+  });
+}
+
+function openModal(fxId, sub) {
+  document.getElementById('modalTitle').textContent = fxId;
+  document.getElementById('modalSub').textContent = sub.name;
+  const gt = gtRenderFor(fxId);
+  const out = renderFor(sub, fxId);
+  const cell = cellOf(sub, fxId);
+  document.getElementById('modalGt').innerHTML = gt
+    ? '<img src="' + gt + '" alt="ground truth">' : '<span>no GT render</span>';
+  const outEl = document.getElementById('modalOut');
+  if (out) {
+    outEl.className = 'mthumb';
+    outEl.innerHTML = '<img src="' + out + '" alt="output">';
+  } else {
+    outEl.className = 'mthumb failed';
+    outEl.innerHTML = '<span>invalid<br>generation</span>';
+  }
+  const cad = (cell.cad === null || cell.cad === undefined) ? '-' : Number(cell.cad).toFixed(3);
+  document.getElementById('modalNote').innerHTML =
+    'CAD score for this fixture: <b>' + cad + '</b>. The full per-fixture report '
+    + '(shape similarity, interface, topology + 3D view) opens from the report viewer.';
+  document.getElementById('modalBack').classList.add('show');
+}
+function closeModal() {
+  document.getElementById('modalBack').classList.remove('show');
+}
+document.getElementById('modalClose').onclick = closeModal;
+document.getElementById('modalBack').onclick = (e) => { if (e.target.id === 'modalBack') closeModal(); };
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
+
+// Pin the GT row exactly beneath the sticky column header.
+function syncHeadHeight() {
+  const head = document.getElementById('gridHead');
+  if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
+}
+
+buildChips();
+buildGallery();
+window.addEventListener('resize', syncHeadHeight);
+if (document.fonts && document.fonts.ready) document.fonts.ready.then(syncHeadHeight);
+"""

leaderboard.py

@@ -44,6 +44,10 @@ HF_SUBMISSIONS_REPO = os.getenv(
     "HF_SUBMISSIONS_REPO", f"{HF_ORG}/cadgenbench-submissions"
 )
 HF_DATA_REPO = os.getenv("HF_DATA_REPO", f"{HF_ORG}/cadgenbench-data")
+# Private ground-truth dataset. The gallery's GT render proxy reads
+# `<fixture>/renders/iso.png` from here (needs the Space HF_TOKEN's
+# read scope, same token the eval already uses for GT).
+HF_DATA_GT_REPO = os.getenv("HF_DATA_GT_REPO", f"{HF_ORG}/cadgenbench-data-gt")
 
 RESULTS_FILENAME = "results.jsonl"
 HUB_FETCH_TIMEOUT_SECONDS = 30