| """The example gallery: one card per ability of the decider, click to fill the ask bar and run. |
| |
| Data lives in examples/examples.json (+ images); the look in static/examples.css; the click |
| handling in static/examples.js. `app.py` renders `gallery_html()` above the status line and |
| listens on a hidden textbox for the clicked id. Nothing here touches answer(). |
| |
| Public API |
| load_examples() -> dict (the parsed examples.json, measured blocks included) |
| gallery_html() -> str (server-rendered gallery; static/examples.js makes it clickable) |
| example_by_id(id) -> dict | None |
| fill_values(ex, registry) -> dict with everything the ask bar needs to be filled from one example: |
| state, questions[{type, instructions, options}], image (str path|None -- a path, not PIL: see fill_values), |
| models (list[str] -- ONLY the vision models for vision_only examples) |
| CSS / JS -> file contents for app.py to append to its launch(css=, js=) |
| |
| Standalone preview: python examples.py --demo [--dark|--light] > demo.html |
| """ |
| from __future__ import annotations |
|
|
| import base64 |
| import html |
| import json |
| import re |
| import sys |
| from pathlib import Path |
| from typing import Any |
|
|
| HERE = Path(__file__).resolve().parent |
| EX_DIR = HERE / "examples" |
| EX_JSON = EX_DIR / "examples.json" |
| STATIC = HERE / "static" |
|
|
| _CACHE: dict | None = None |
|
|
|
|
| def load_examples() -> dict: |
| """Parsed examples.json (cached).""" |
| global _CACHE |
| if _CACHE is None: |
| _CACHE = json.loads(EX_JSON.read_text()) |
| return _CACHE |
|
|
|
|
| def example_by_id(ex_id: str) -> dict | None: |
| """The example record with this id, or None.""" |
| return next((e for e in load_examples()["examples"] if e["id"] == ex_id), None) |
|
|
|
|
| def image_path(ex: dict) -> Path | None: |
| """Absolute path of the example's image, if it has one.""" |
| return (EX_DIR / ex["image"]) if ex.get("image") else None |
|
|
|
|
| def fill_values(ex: dict, registry: list[Any] | None = None) -> dict: |
| """Everything the ask bar needs. `registry` = app.REGISTRY (ModelInfo with .name/.vision).""" |
| |
| |
| |
| |
| img: str | None = None |
| p = image_path(ex) |
| if p is not None: |
| img = str(p) |
| models: list[str] | None = None |
| if registry is not None: |
| if ex.get("vision_only"): |
| models = [m.name for m in registry if getattr(m, "vision", False)] |
| else: |
| models = [m.name for m in registry] |
| return { |
| "id": ex["id"], |
| "state": ex.get("state", ""), |
| "questions": [dict(q) for q in ex["questions"]], |
| "image": img, |
| "models": models, |
| "vision_only": bool(ex.get("vision_only")), |
| } |
|
|
|
|
| |
| |
| |
|
|
| E = html.escape |
| _TYPE_LABEL = {"noul": "yes/no", "choice": "choice", "score": "score"} |
|
|
|
|
| def _thumb(ex: dict) -> str: |
| """Inline 96 px thumbnail of the example image (data URI), or an empty string.""" |
| p = image_path(ex) |
| if p is None or not p.exists(): |
| return "" |
| b64 = base64.b64encode(p.read_bytes()).decode("ascii") |
| return (f'<img class="sdx-thumb" src="data:image/png;base64,{b64}" alt="{E(ex["title"])} example image" ' |
| f'loading="lazy" width="96" height="96">') |
|
|
|
|
| def _fmt(v: Any, nd: int = 3) -> str: |
| """Fixed-point text; non-numbers are escaped as-is.""" |
| try: |
| return f"{float(v):.{nd}f}" |
| except (TypeError, ValueError): |
| return E(str(v)) |
|
|
|
|
| def _answer_html(qid: str, a: dict, q: dict | None) -> str: |
| """One measured answer -> value line + mini distribution. Numbers are read, never computed.""" |
| t = a.get("type") or (q or {}).get("type") or "" |
| conf = a.get("confidence") |
| probs = a.get("probs") or {} |
| display = a.get("display", a.get("value")) |
| if t == "noul": |
| p = probs.get("true", probs.get("yes")) |
| if p is None: |
| try: |
| p = float(display) |
| except (TypeError, ValueError): |
| p = None |
| pct = f"{p * 100:.1f}" if isinstance(p, float) else "0" |
| head = f'<span class="k">P(true)</span><span class="v">{_fmt(p, 4) if p is not None else E(str(display))}</span>' |
| bar = (f'<div class="sdx-noul" role="img" aria-label="P(true) {_fmt(p, 3)}"><span style="--p:{pct}%"></span></div>' |
| if p is not None else "") |
| return f'<div class="sdx-ans"><div class="line">{head}</div>{bar}</div>' |
| if t == "choice": |
| head = (f'<span class="k">→</span><span class="v">{E(str(display))}</span>' |
| + (f'<span class="c">confidence {_fmt(conf)}</span>' if conf is not None else "")) |
| rows = "".join( |
| f'<div class="row{" top" if k == display else ""}"><span class="l">{E(str(k))}</span>' |
| f'<span class="b"><i style="--p:{float(v) * 100:.1f}%"></i></span><span class="n">{_fmt(v)}</span></div>' |
| for k, v in probs.items() |
| ) |
| return f'<div class="sdx-ans"><div class="line">{head}</div><div class="sdx-bars">{rows}</div></div>' |
| if t == "score": |
| head = (f'<span class="k">score</span><span class="v">{E(str(display))}</span>' |
| + (f'<span class="c">confidence {_fmt(conf)}</span>' if conf is not None else "")) |
| rows = "".join( |
| f'<div class="row"><span class="l"><em>{i}</em> {E(str(k))}</span>' |
| f'<span class="b"><i style="--p:{float(v) * 100:.1f}%"></i></span><span class="n">{_fmt(v)}</span></div>' |
| for i, (k, v) in enumerate(probs.items()) |
| ) |
| return f'<div class="sdx-ans"><div class="line">{head}</div><div class="sdx-bars">{rows}</div></div>' |
| return f'<div class="sdx-ans"><div class="line"><span class="v">{E(json.dumps(a))}</span></div></div>' |
|
|
|
|
| def _card(ex: dict) -> str: |
| """One gallery card: title, type chips, request, the measured answer (if any), what it teaches.""" |
| qs = ex["questions"] |
| chips = "".join(f'<span class="sdx-chip t-{E(q["type"])}">{E(_TYPE_LABEL.get(q["type"], q["type"]))}</span>' for q in qs) |
| if ex.get("golden"): |
| chips += '<span class="sdx-chip golden" title="the README regression check -- its answer is published">golden</span>' |
| if ex.get("vision_only"): |
| chips += '<span class="sdx-chip vision" title="image input exists only on the Qwen3.5 deciders; Gemma 4 checkpoints drop the vision encoder">Qwen3.5 models only</span>' |
| if len(qs) > 1: |
| chips += f'<span class="sdx-chip">{len(qs)} questions</span>' |
|
|
| req = [] |
| if ex.get("state"): |
| req.append(f'<div class="sdx-state"><span class="lbl">state</span><pre>{E(ex["state"])}</pre></div>') |
| elif ex.get("image"): |
| req.append('<div class="sdx-state"><span class="lbl">state</span><pre class="empty">(empty — the image is the state)</pre></div>') |
| for q in qs: |
| opts = q.get("options") or [] |
| req.append( |
| f'<div class="sdx-q"><span class="lbl">{E(_TYPE_LABEL.get(q["type"], q["type"]))}</span>' |
| f'<span class="ins">{E(q["instructions"])}</span>' |
| + (f'<span class="opts">{" · ".join(E(str(o)) for o in opts)}</span>' if opts else "") |
| + "</div>" |
| ) |
|
|
| m = ex.get("measured") or {} |
| if m.get("answers"): |
| qmap = {} |
| for i, q in enumerate(qs): |
| qmap[f'{q["type"]}_{sum(1 for p in qs[:i] if p["type"] == q["type"])}'] = q |
| ans = "".join(_answer_html(qid, a, qmap.get(qid)) for qid, a in m["answers"].items()) |
| |
| |
| parts = ["measured", str(m.get("model") or "").replace("strands-decider-", "") or "decider"] |
| day = re.search(r"\d{4}-\d{2}-\d{2}", str(m.get("label", ""))) |
| if day: |
| parts.append(day.group(0)) |
| if m.get("input_tokens") is not None: |
| parts.append(f'{m["input_tokens"]} input tokens') |
| title = f'recorded through app.answer() on {m.get("model", "")}' |
| measured = (f'<div class="sdx-measured"><div class="cap" title="{E(title)}">{E(" · ".join(parts))}' |
| f'</div>{ans}</div>') |
| elif m.get("error"): |
| measured = f'<div class="sdx-measured err"><div class="cap">not measured</div><div class="line">{E(m["error"])}</div></div>' |
| else: |
| measured = '<div class="sdx-measured none"><div class="cap">not yet measured</div></div>' |
|
|
| thumb = _thumb(ex) |
| headline = _headline_html(m, qs) |
| return ( |
| f'<article class="sdx-card{" has-img" if thumb else ""}" data-example="{E(ex["id"])}" tabindex="0" ' |
| f'aria-label="Load example: {E(ex["title"])}">' |
| f'<div class="sdx-head">{thumb}<div class="sdx-title-wrap"><h3 class="sdx-title">{E(ex["title"])}</h3>' |
| f'<div class="sdx-chips">{chips}</div></div></div>' |
| f'<p class="sdx-shows">{E(ex["shows"])}</p>' |
| f'{headline}' |
| f'<details class="sdx-more"><summary>details</summary>' |
| f'<div class="sdx-more-body">' |
| f'<div class="sdx-req">{"".join(req)}</div>' |
| f'{measured}' |
| f'<p class="sdx-teaches"><span class="lbl">teaches</span>{E(ex["teaches"])}</p>' |
| f'</div></details>' |
| f'<div class="sdx-cta"><span class="sdx-run">run <span aria-hidden="true">→</span></span></div>' |
| f'</article>' |
| ) |
|
|
|
|
| def _headline_html(m: dict, qs: list[dict]) -> str: |
| """The one number a skimming visitor needs: the first measured answer as a single line. |
| |
| noul -> P(true) 0.8581 · choice -> → billing · confidence 0.659 · score -> score 1.03 · confidence 0.509. |
| Unmeasured examples get the dim 'not yet measured' line instead. Numbers are read, never computed. |
| """ |
| answers = (m or {}).get("answers") or {} |
| if not answers: |
| return '<div class="sdx-headline none">not yet measured — click to run it</div>' |
| qid, a = next(iter(answers.items())) |
| t = a.get("type") or (qs[0].get("type") if qs else "") |
| conf = a.get("confidence") |
| probs = a.get("probs") or {} |
| display = a.get("display", a.get("value")) |
| more = f' <span class="c">+{len(answers) - 1} more</span>' if len(answers) > 1 else "" |
| if t == "noul": |
| p = probs.get("true", probs.get("yes")) |
| if p is None: |
| try: |
| p = float(display) |
| except (TypeError, ValueError): |
| p = None |
| pct = f"{p * 100:.1f}" if isinstance(p, float) else "0" |
| bar = f'<span class="sdx-noul mini" role="img" aria-label="P(true) {_fmt(p, 3)}"><span style="--p:{pct}%"></span></span>' if p is not None else "" |
| return (f'<div class="sdx-headline"><span class="k">P(true)</span><span class="v">{_fmt(p, 4) if p is not None else E(str(display))}</span>' |
| f'{bar}{more}</div>') |
| k = "→" if t == "choice" else "score" |
| c = f'<span class="c">confidence {_fmt(conf)}</span>' if conf is not None else "" |
| return f'<div class="sdx-headline"><span class="k">{k}</span><span class="v">{E(str(display))}</span>{c}{more}</div>' |
|
|
|
|
| def gallery_html() -> str: |
| """The whole gallery grouped by family, as server-rendered HTML.""" |
| data = load_examples() |
| by_fam: dict[str, list[dict]] = {} |
| for ex in data["examples"]: |
| by_fam.setdefault(ex["family"], []).append(ex) |
| n = len(data["examples"]) |
| out = [f'<a id="sdx-gallery-host" class="sdx-anchor" aria-hidden="true"></a><section class="sdx" id="sdx-gallery" aria-label="Examples">' |
| f'<div class="sdx-section"><h2>Examples</h2><span class="sub">{n} abilities · click one to run it</span></div>'] |
| for fam in data["families"]: |
| items = by_fam.get(fam["id"], []) |
| if not items: |
| continue |
| out.append(f'<div class="sdx-family" data-family="{E(fam["id"])}"><div class="sdx-fam-head">' |
| f'<h3>{E(fam["label"])}</h3><span class="blurb">{E(fam["blurb"])}</span></div>' |
| f'<div class="sdx-grid">{"".join(_card(e) for e in items)}</div></div>') |
| out.append("</section>") |
| return "".join(out) |
|
|
|
|
| def _read(name: str) -> str: |
| """Text of a file under static/, empty if missing.""" |
| p = STATIC / name |
| return p.read_text() if p.exists() else "" |
|
|
|
|
| def css() -> str: |
| """static/examples.css for app.py's launch(css=...).""" |
| return _read("examples.css") |
|
|
|
|
| def js() -> str: |
| """static/examples.js for app.py's launch(js=...).""" |
| return _read("examples.js") |
|
|
|
|
| |
| |
| |
|
|
|
|
| def demo_html(scheme: str = "auto") -> str: |
| """Standalone HTML of the gallery (scheme = auto | dark | light).""" |
| tokens = _read("tokens.css") |
| cls = {"dark": ' class="dark"', "light": "", "auto": ""}[scheme] |
| return ( |
| "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"><title>examples — strands decider playground</title>" |
| '<meta name="viewport" content="width=device-width, initial-scale=1">' |
| f'<style>{tokens}\n{css()}\nbody{{margin:0;background:var(--bg);color:var(--text);font-family:var(--sr-text);}}' |
| ".wrap{max-width:66rem;margin:0 auto;padding:24px 16px;}</style></head>" |
| f'<body{cls}><div class="wrap">{gallery_html()}</div>' |
| f'<script>{js()}</script></body></html>' |
| ) |
|
|
|
|
| if __name__ == "__main__": |
| if "--demo" in sys.argv: |
| scheme = "dark" if "--dark" in sys.argv else ("light" if "--light" in sys.argv else "auto") |
| sys.stdout.write(demo_html(scheme)) |
| else: |
| d = load_examples() |
| for e in d["examples"]: |
| m = e.get("measured") or {} |
| flag = "measured" if m.get("answers") else ("ERROR" if m.get("error") else "unmeasured") |
| print(f'{e["id"]:22s} {e["family"]:8s} {len(e["questions"])}q {"img " if e.get("image") else " "}{flag}') |
|
|
