Initial bulletin app: Qwen3.6-35B-A3B → vintage 1080×1440 retro report

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/grain_small.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -8,6 +8,29 @@ sdk_version: 6.14.0
 python_version: '3.12'
 app_file: app.py
 pinned: false
+short_description: Roast yourself from your agent traces
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Trace Personality Bulletin
+
+A Gradio app that, given a Hugging Face *agent traces* dataset repo, fetches the
+sessions, sends per-session digests through `Qwen/Qwen3.6-35B-A3B` on the
+Hugging Face Inference API, and renders a printed **personality bulletin** of
+what the model thinks of the user. A "Save as PNG" button on the card
+screenshots it client-side for sharing.
+
+## Configuration
+
+The app calls the HF Inference API and needs `HF_TOKEN` to be available at
+runtime. Set it as a Space secret:
+
+- Space → Settings → **Variables and secrets** → add `HF_TOKEN`
+  (any token with Inference API access).
+
+## Local development
+
+```bash
+uv venv .venv --python 3.12
+uv pip install --python .venv/bin/python -r requirements.txt
+HF_TOKEN=hf_... .venv/bin/python app.py
+```

analyze.py

@@ -0,0 +1,245 @@
+"""InferenceClient calls: map (per-session digests) + reduce (bulletin)."""
+
+import datetime as dt
+import hashlib
+import json
+import os
+from concurrent.futures import ThreadPoolExecutor
+
+from huggingface_hub import InferenceClient
+
+MODEL = "Qwen/Qwen3.6-35B-A3B"
+
+_NO_THINK = {"chat_template_kwargs": {"enable_thinking": False}}
+
+
+def get_client(token: str | None = None) -> InferenceClient:
+    """Build the InferenceClient. Centralised so OAuth swap is one place."""
+    if token is None:
+        token = os.environ.get("HF_TOKEN")
+    if not token:
+        raise RuntimeError(
+            "HF_TOKEN is not set. Export it in your shell or pass token= explicitly."
+        )
+    return InferenceClient(model=MODEL, token=token)
+
+
+# ---------- map: per-session digest ----------
+
+_DIGEST_SYSTEM = """You are analysing a single coding-agent session transcript. The TRANSCRIPT shows messages between a HUMAN USER and an AGENT (the AI). Return signals about the HUMAN USER only — never about the agent.
+
+Return STRICT JSON:
+{
+  "session_id": <echo>,
+  "intent": "<one sentence: what the user was trying to do>",
+  "top_quotes": [<1-3 short verbatim quotes from USER messages only>],
+  "tells": [<3-5 short strings: signals about the user — frustration, confidence, knowledge gaps, communication style, premature optimization, doc-avoidance, etc.>],
+  "mood": "<one short phrase: the session's emotional arc>"
+}
+
+Hard rules:
+- Only include things the user actually said or did. Do not attribute agent behaviour to the user.
+- top_quotes must literally appear in user messages.
+- Be concise and specific. No invented quotes."""
+
+
+def digest_session(client: InferenceClient, transcript: str, session_id: str) -> dict:
+    user_prompt = f"session_id: {session_id}\n\nTranscript:\n{transcript}"
+    try:
+        resp = client.chat_completion(
+            messages=[
+                {"role": "system", "content": _DIGEST_SYSTEM},
+                {"role": "user", "content": user_prompt},
+            ],
+            response_format={"type": "json_object"},
+            max_tokens=800,
+            temperature=0.4,
+            extra_body=_NO_THINK,
+        )
+        raw = resp.choices[0].message.content or "{}"
+        data = json.loads(raw)
+        data.setdefault("session_id", session_id)
+        return data
+    except Exception as e:
+        return {"session_id": session_id, "error": str(e)}
+
+
+def digest_all(
+    client: InferenceClient,
+    transcripts: list[tuple[str, str]],
+    max_workers: int = 8,
+) -> list[dict]:
+    """Run digest_session over all transcripts in parallel. Drops error entries."""
+    def _one(item):
+        sid, text = item
+        return digest_session(client, text, sid)
+
+    with ThreadPoolExecutor(max_workers=max_workers) as ex:
+        results = list(ex.map(_one, transcripts))
+    return [r for r in results if "error" not in r]
+
+
+# ---------- stats from raw events ----------
+
+
+def _parse_ts(ts: str) -> dt.datetime | None:
+    try:
+        return dt.datetime.fromisoformat(ts.replace("Z", "+00:00"))
+    except Exception:
+        return None
+
+
+def compute_stats(sessions: list[tuple[str, list[dict]]]) -> dict:
+    """Count user turns, distinct tool names, and the first→last timestamp span."""
+    turns = 0
+    tools: set[str] = set()
+    timestamps: list[dt.datetime] = []
+    for _path, events in sessions:
+        for ev in events:
+            if ev.get("type") == "user":
+                turns += 1
+            ts = ev.get("timestamp")
+            if isinstance(ts, str):
+                parsed = _parse_ts(ts)
+                if parsed:
+                    timestamps.append(parsed)
+            msg = ev.get("message") or {}
+            content = msg.get("content")
+            if isinstance(content, list):
+                for block in content:
+                    if isinstance(block, dict) and block.get("type") == "tool_use":
+                        name = block.get("name")
+                        if isinstance(name, str) and name:
+                            tools.add(name)
+
+    span = ""
+    if timestamps:
+        timestamps.sort()
+        first, last = timestamps[0], timestamps[-1]
+        if first.year == last.year:
+            span = f"{first.strftime('%b %d')} → {last.strftime('%b %d, %Y')}"
+        else:
+            span = f"{first.strftime('%b %d, %Y')} → {last.strftime('%b %d, %Y')}"
+    return {"turns": turns, "tools": len(tools), "span": span}
+
+
+def serial_for(user: str) -> str:
+    """Stable per-user 4-digit serial."""
+    h = int(hashlib.sha256(user.encode("utf-8")).hexdigest(), 16)
+    return f"PR-{h % 10000:04d}"
+
+
+# ---------- reduce: bulletin generation ----------
+
+# Adapted from the design handoff's CONTENT_PROMPT.md.
+_BULLETIN_SYSTEM = """You are the Hugging Face Roastery. You read agent-trace dataset digests and write a gently savage personality bulletin about the HUMAN USER who was prompting the agent — never about the agent itself. The output is a vintage printed card; every field has a strict length budget. Be specific, be funny, never punch down.
+
+You will receive:
+- user: the Hugging Face handle of the operator.
+- dataset: the Hub dataset ID being analysed.
+- digests: a JSON list of per-session digests already extracted from the traces (intent, top_quotes, tells, mood).
+
+Return EXACTLY one JSON object, no prose, no markdown:
+{
+  "user":      "<bare handle, no @>",
+  "archetype": ["The <adjective>", "<Noun>"],
+  "tagline":   "<130-170 chars, 2-3 italic lines, sentences only, end on a punchline>",
+  "sins": [
+    {"n":"01","title":"<50-90 chars, one concrete user behaviour, smart quotes for quoted phrases>","meta":"<30-60 chars, lowercase, mono, cite with · separators (turns, tools, sessions, percents)>"},
+    {"n":"02","title":"...","meta":"..."},
+    {"n":"03","title":"...","meta":"..."}
+  ],
+  "forecast": {"headline":"The week ahead","body":"<270-340 chars, horoscope-style, end with 'Lucky <x>: <y>. Avoid: <z>.'>"}
+}
+
+Field budgets (hard limits — overflow breaks the layout):
+- archetype[0]:  8-18 chars  (line 1, usually "The <adjective>")
+- archetype[1]:  6-14 chars  (line 2, title-cased punch noun)
+- tagline:       130-170 chars
+- sins[].title:  50-90 chars
+- sins[].meta:   30-60 chars
+- forecast.body: 270-340 chars, ends with "Lucky <x>: <y>. Avoid: <z>."
+
+Voice:
+- Sharp but loving — group-chat energy, not insult-comic. Roast habits a thoughtful friend would call out.
+- Sentence case for titles. Smart quotes ( " " ), en-dashes ( – ), em-dashes ( — ). No exclamation marks. No emojis.
+- Specific, not generic. Every observation must be grounded in something the digests actually contain.
+
+Hard rules:
+1. Roast the USER, not the agent. The user cannot run code; only the agent can. Wrong: "Parsed JSON with a regex twice." (that's the agent). Right: "Asked the agent to parse JSON with a regex twice." / "Demanded a regex over a JSON parser, against advice."
+2. No invented quotes. Anything in "…" inside sins[].title or tagline must literally appear in a digest's top_quotes (case-flexible, light editing for length OK).
+3. Cite or omit. Every sins[].meta must reference something verifiable — sessions, mood, counts, tools — drawn from the digests. If you cannot cite, pick a different sin.
+4. No PII. No emails, no real names, no private repos. Public handles and public dataset names are fine.
+5. No identity punching. Roast process and habits — not who the user is. Off-limits: appearance, nationality, gender, politics, illness. Fair game: ignoring docs, refactor addiction, regex misuse, vibes-driven coding, asking the same thing six ways, premature optimisation, late-night commits.
+
+Procedure:
+1. Skim the digests for recurring patterns (repeated questions, premature optimisation, doc avoidance, tone, tool misuse, mood arc).
+2. Pick ONE crisp archetype. Examples: The Premature Optimizer · The Vibes Driver · The Doc Avoider · The Refactor Romantic · The Confidence Auditor · The Apology Engineer · The TODO Composer. Invent freely.
+3. Pick three sins the digests support. Cite each.
+4. Tagline: 2-3 short sentences piling on the archetype with concrete examples. End on a punchline.
+5. Horoscope: one absurd technical prediction grounded in a real user pattern. Close with "Lucky <something>: <x>. Avoid: <y>."
+6. Validate lengths against budgets. Trim or pad before emitting.
+7. Emit JSON only. No code fences. No commentary."""
+
+
+def bulletin(
+    client: InferenceClient,
+    digests: list[dict],
+    user: str,
+    dataset_id: str,
+) -> dict:
+    """Generate the report content (archetype, tagline, sins, forecast). One JSON call."""
+    user_prompt = (
+        f"user: {user}\n"
+        f"dataset: {dataset_id}\n\n"
+        f"digests (JSON list):\n{json.dumps(digests, ensure_ascii=False, indent=2)}"
+    )
+    resp = client.chat_completion(
+        messages=[
+            {"role": "system", "content": _BULLETIN_SYSTEM},
+            {"role": "user", "content": user_prompt},
+        ],
+        response_format={"type": "json_object"},
+        max_tokens=900,
+        temperature=0.85,
+        extra_body=_NO_THINK,
+    )
+    raw = resp.choices[0].message.content or "{}"
+    return json.loads(raw)
+
+
+def build_report(
+    client: InferenceClient,
+    digests: list[dict],
+    user: str,
+    dataset_id: str,
+    stats: dict,
+) -> dict:
+    """Combine model output + computed stats into the full report dict for render.py."""
+    data = bulletin(client, digests, user, dataset_id)
+    today = dt.date.today().strftime("%b %d, %Y")
+    archetype = data.get("archetype") or ["The", "Unreadable"]
+    if not isinstance(archetype, list) or len(archetype) < 2:
+        archetype = ["The", "Unreadable"]
+    sins = data.get("sins") or []
+    sins = sins[:3] + [{"n": f"{i+1:02d}", "title": "—", "meta": "—"} for i in range(len(sins), 3)]
+    forecast = data.get("forecast") or {"headline": "The week ahead", "body": "The cards are quiet today."}
+    return {
+        "user": str(data.get("user") or user),
+        "archetype": [str(archetype[0]), str(archetype[1])],
+        "tagline": str(data.get("tagline") or ""),
+        "sins": [
+            {"n": str(s.get("n") or f"{i+1:02d}"), "title": str(s.get("title") or "—"), "meta": str(s.get("meta") or "—")}
+            for i, s in enumerate(sins[:3])
+        ],
+        "forecast": {
+            "headline": str(forecast.get("headline") or "The week ahead"),
+            "body": str(forecast.get("body") or ""),
+        },
+        "dataset": dataset_id,
+        "turns": int(stats.get("turns") or 0),
+        "tools": int(stats.get("tools") or 0),
+        "span": str(stats.get("span") or ""),
+        "generated": today,
+        "serial": serial_for(user),
+    }

app.py

@@ -0,0 +1,136 @@
+"""Gradio Blocks app: dataset → extract → analyze → bulletin HTML."""
+
+import os
+
+import gradio as gr
+
+from analyze import (
+    MODEL,
+    build_report,
+    compute_stats,
+    digest_all,
+    get_client,
+)
+from dataset import fetch_sessions, list_sessions
+from extract import events_to_transcript, truncate_transcript
+from render import bulletin_html, empty_bulletin_html
+
+DEFAULT_REPO = "merve/ml-intern-sessions"
+
+
+def _owner_from(repo_id: str) -> str:
+    return repo_id.split("/")[0] if "/" in repo_id else repo_id
+
+
+def run(repo_id: str, max_sessions: int):
+    yield "Connecting…", empty_bulletin_html("Connecting…")
+
+    try:
+        client = get_client()
+    except Exception as e:
+        yield f"❌ {e}", empty_bulletin_html("HF_TOKEN missing")
+        return
+
+    try:
+        yield "Listing sessions…", empty_bulletin_html("Listing sessions…")
+        paths = list_sessions(repo_id)
+        if not paths:
+            yield (
+                "No sessions found in `sessions/**/*.jsonl`.",
+                empty_bulletin_html("No sessions to roast."),
+            )
+            return
+
+        n = min(int(max_sessions), len(paths))
+        yield (
+            f"Fetching {n} of {len(paths)} sessions…",
+            empty_bulletin_html(f"Fetching {n} sessions…"),
+        )
+        sessions = fetch_sessions(repo_id, n)
+        if not sessions:
+            yield (
+                "Found session files but couldn't parse any.",
+                empty_bulletin_html("Parse error."),
+            )
+            return
+
+        stats = compute_stats(sessions)
+        transcripts = [
+            (path, truncate_transcript(events_to_transcript(evs), 40_000))
+            for path, evs in sessions
+        ]
+
+        yield (
+            f"Reading {len(transcripts)} sessions in parallel…",
+            empty_bulletin_html("Consulting the traces…"),
+        )
+        digests = digest_all(client, transcripts)
+        if not digests:
+            yield (
+                "Every per-session digest failed. Try again or lower max sessions.",
+                empty_bulletin_html("Digest error."),
+            )
+            return
+
+        yield (
+            f"Drafting bulletin from {len(digests)} digests…",
+            empty_bulletin_html("Drafting bulletin…"),
+        )
+
+        owner = _owner_from(repo_id)
+        try:
+            report = build_report(
+                client=client,
+                digests=digests,
+                user=owner,
+                dataset_id=repo_id,
+                stats=stats,
+            )
+        except Exception as e:
+            yield (
+                f"❌ Bulletin generation failed: {e}",
+                empty_bulletin_html("The presses jammed."),
+            )
+            return
+
+        yield (
+            f"Bulletin issued for **@{report['user']}** — *{report['archetype'][0]} {report['archetype'][1]}*.",
+            bulletin_html(report),
+        )
+    except Exception as e:
+        yield (
+            f"❌ {type(e).__name__}: {e}",
+            empty_bulletin_html("Error."),
+        )
+
+
+def build():
+    with gr.Blocks(title="Trace Personality Bulletin") as demo:
+        gr.Markdown("# 🧾 Trace Personality Bulletin")
+        gr.Markdown(
+            "Drop a Hugging Face agent-traces dataset repo. The Roastery fetches "
+            "your sessions, sends them through `Qwen/Qwen3.6-35B-A3B`, and issues "
+            "a printed bulletin of what the model thinks of you. "
+            "Use **Save as PNG** on the card to download a 1080×1440 share-ready image."
+        )
+
+        with gr.Row():
+            repo = gr.Textbox(label="Dataset repo", value=DEFAULT_REPO, scale=4)
+            n = gr.Slider(1, 50, value=30, step=1, label="Max sessions", scale=2)
+        btn = gr.Button("🔮 Issue my bulletin", variant="primary")
+        status = gr.Markdown("")
+        html_out = gr.HTML(empty_bulletin_html("Awaiting bulletin…"))
+
+        btn.click(
+            run,
+            inputs=[repo, n],
+            outputs=[status, html_out],
+            concurrency_limit=1,
+        )
+    return demo
+
+
+if __name__ == "__main__":
+    if not os.environ.get("HF_TOKEN"):
+        print("warning: HF_TOKEN not set; the app will error on the first click.")
+    build().launch(theme=gr.themes.Soft())

dataset.py

@@ -0,0 +1,41 @@
+"""Hugging Face Hub I/O for agent-trace JSONL session files."""
+
+import json
+import re
+from pathlib import Path
+
+from huggingface_hub import HfApi, hf_hub_download
+
+_SESSION_RE = re.compile(r"^sessions/(\d{4}-\d{2}-\d{2})/[^/]+\.jsonl$")
+
+
+def list_sessions(repo_id: str) -> list[str]:
+    """Return JSONL session paths from a dataset repo, newest date first."""
+    info = HfApi().dataset_info(repo_id)
+    paths = [s.rfilename for s in info.siblings if _SESSION_RE.match(s.rfilename)]
+    paths.sort(key=lambda p: _SESSION_RE.match(p).group(1), reverse=True)
+    return paths
+
+
+def fetch_sessions(repo_id: str, n: int) -> list[tuple[str, list[dict]]]:
+    """Download up to `n` session files (newest first), parse JSONL into events.
+
+    Returns a list of (session_path, events) tuples. Sessions that fail to
+    parse are skipped.
+    """
+    paths = list_sessions(repo_id)[:n]
+    out: list[tuple[str, list[dict]]] = []
+    for path in paths:
+        local = hf_hub_download(repo_id, path, repo_type="dataset")
+        events: list[dict] = []
+        try:
+            for line in Path(local).read_text().splitlines():
+                line = line.strip()
+                if not line:
+                    continue
+                events.append(json.loads(line))
+        except json.JSONDecodeError:
+            continue
+        if events:
+            out.append((path, events))
+    return out

extract.py

@@ -0,0 +1,59 @@
+"""Pure transforms on agent-trace event lists. No I/O."""
+
+from typing import Any
+
+
+def _user_content_to_text(content: Any) -> str:
+    if isinstance(content, str):
+        return content
+    if isinstance(content, list):
+        parts: list[str] = []
+        for block in content:
+            if not isinstance(block, dict):
+                continue
+            if block.get("type") == "tool_result":
+                continue
+            if block.get("type") == "text" and isinstance(block.get("text"), str):
+                parts.append(block["text"])
+            elif "content" in block and isinstance(block["content"], str) and block.get("type") != "tool_result":
+                parts.append(block["content"])
+        return "\n".join(parts)
+    return ""
+
+
+def _assistant_content_to_text(content: Any) -> str:
+    if isinstance(content, str):
+        return content
+    if isinstance(content, list):
+        parts: list[str] = []
+        for block in content:
+            if isinstance(block, dict) and block.get("type") == "text" and isinstance(block.get("text"), str):
+                parts.append(block["text"])
+        return "".join(parts)
+    return ""
+
+
+def events_to_transcript(events: list[dict]) -> str:
+    lines: list[str] = []
+    for ev in events:
+        msg = ev.get("message") or {}
+        content = msg.get("content")
+        if ev.get("type") == "user":
+            text = _user_content_to_text(content).strip()
+            if text:
+                lines.append(f"User: {text}")
+        elif ev.get("type") == "assistant":
+            text = _assistant_content_to_text(content).strip()
+            if text:
+                lines.append(f"Assistant: {text}")
+    return "\n\n".join(lines)
+
+
+def truncate_transcript(text: str, max_chars: int = 40_000) -> str:
+    if len(text) <= max_chars:
+        return text
+    head_len = max_chars // 2
+    tail_len = max_chars // 4
+    head = text[:head_len]
+    tail = text[-tail_len:]
+    return f"{head}\n\n[... truncated ...]\n\n{tail}"

render.py

@@ -0,0 +1,603 @@
+"""Trace Personality Bulletin — HTML rendering.
+
+The bulletin is a self-contained HTML document with embedded CSS, base64 assets,
+and an html2canvas-driven 'Save as PNG' button that screenshots the card
+client-side in the browser. No server-side image rendering, so the app deploys
+to a Hugging Face Space with zero extra system dependencies.
+
+Design adapted from the Anthropic Design handoff `Personality Report.html`
+(1080×1440 portrait, retro bulletin aesthetic).
+"""
+
+import base64
+import html as html_mod
+from pathlib import Path
+
+_ASSETS = Path(__file__).parent / "assets"
+
+
+def _data_url(path: Path, mime: str = "image/png") -> str:
+    return f"data:{mime};base64,{base64.b64encode(path.read_bytes()).decode()}"
+
+
+_SEAL_URL = _data_url(_ASSETS / "seal_small.png")
+_GRAIN_URL = _data_url(_ASSETS / "grain_small.png")
+
+_ROMAN = ["I", "II", "III", "IV", "V"]
+_NBSP = " "
+
+# --- Palette (Retro · Cream from the handoff) ---
+_INK = "#353E60"            # hf-blue-deep (navy)
+_INK_SOFT = "rgba(53,62,96,0.7)"
+_SURFACE = "#FFF8DE"        # hf-cream
+_ACCENT = "#00704A"         # Starbucks-style green
+_ACCENT2 = "#FF9D00"        # hf-orange
+_SUNBURST = "rgba(255,157,0,0.35)"
+_SINS_BG = "#353E60"
+_SINS_INK = "#FFF8DE"
+_SINS_ACCENT = "#FF9D00"
+_SINS_DOTS = "rgba(255,157,0,0.18)"
+_RED = "#DB3328"            # hf-red — second offset on the title shadow
+_YELLOW = "#FFD21E"
+
+# --- Fonts (Google Fonts CDN) ---
+_FONTS_LINK = (
+    '<link href="https://fonts.googleapis.com/css2?'
+    'family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&'
+    'family=IBM+Plex+Mono:wght@400;500;600&'
+    'family=Alfa+Slab+One&display=swap" rel="stylesheet">'
+)
+
+
+def _sunburst_svg(rays: int = 32, color: str = _SUNBURST) -> str:
+    parts = []
+    for i in range(rays):
+        a = (i * 360) / rays
+        parts.append(
+            f'<rect x="99" y="0" width="2" height="100" fill="{color}" '
+            f'transform="rotate({a} 100 100)"/>'
+        )
+    return (
+        '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" '
+        'style="width:100%;height:100%;display:block;">'
+        + "".join(parts)
+        + "</svg>"
+    )
+
+
+def _inner_html(data: dict) -> str:
+    """Build the standalone HTML *document* that renders inside the srcdoc iframe.
+
+    Wrapped by `bulletin_html` in an iframe so its CSS is isolated from Gradio.
+    """
+    e = html_mod.escape
+    user = e(str(data.get("user") or ""))
+    arch1, arch2 = (data.get("archetype") or ["", ""])[:2]
+    arch1 = e(str(arch1))
+    arch2 = e(str(arch2))
+    tagline = e(str(data.get("tagline") or ""))
+    sins = data.get("sins") or []
+    forecast = data.get("forecast") or {}
+    headline = e(str(forecast.get("headline") or "The week ahead"))
+    body = str(forecast.get("body") or "")
+    drop_cap = e(body[:1])
+    body_rest = e(body[1:])
+    dataset = e(str(data.get("dataset") or ""))
+    turns = int(data.get("turns") or 0)
+    span = e(str(data.get("span") or ""))
+    generated = e(str(data.get("generated") or ""))
+    serial = e(str(data.get("serial") or ""))
+
+    # Build the sins list with ornamental dividers between each pair
+    sin_blocks = []
+    for i, sin in enumerate(sins[:3]):
+        if i > 0:
+            sin_blocks.append(
+                '<div class="tpb-sin-divider">'
+                '<span class="tpb-rule"></span>'
+                '<span class="tpb-rule-glyph">✺ ✺ ✺</span>'
+                '<span class="tpb-rule"></span>'
+                "</div>"
+            )
+        sin_blocks.append(
+            '<div class="tpb-sin-row">'
+            f'<div class="tpb-sin-n">{e(_ROMAN[i])}.</div>'
+            '<div class="tpb-sin-body">'
+            f'<p class="tpb-sin-title">{e(str(sin.get("title") or ""))}</p>'
+            f'<span class="tpb-sin-meta">{e(str(sin.get("meta") or ""))}</span>'
+            "</div></div>"
+        )
+    sins_html = "".join(sin_blocks)
+
+    return f"""<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Trace Personality Bulletin</title>
+{_FONTS_LINK}
+<style>
+  html, body {{ margin: 0; padding: 0; background: transparent;
+                font-family: 'Source Sans 3', -apple-system, system-ui, sans-serif;
+                color: {_INK}; }}
+  * {{ box-sizing: border-box; }}
+  .tpb-wrap {{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    padding: 18px 6px;
+    background: transparent;
+    font-family: 'Source Sans 3', -apple-system, system-ui, sans-serif;
+  }}
+  .tpb-actions {{
+    display: flex; gap: 10px; align-items: center;
+  }}
+  .tpb-save {{
+    background: {_INK};
+    color: {_SURFACE};
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    cursor: pointer;
+  }}
+  .tpb-save:hover {{ opacity: 0.85; }}
+
+  /* The card — fixed 1080×1440 logical size, scaled to fit via transform */
+  .tpb-stage {{
+    width: min(880px, 96vw);
+    aspect-ratio: 1080 / 1440;
+    position: relative;
+    overflow: visible;
+  }}
+  .tpb-card {{
+    position: absolute;
+    top: 0; left: 0;
+    width: 1080px;
+    height: 1440px;
+    background: {_SURFACE};
+    color: {_INK};
+    box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.30);
+    border-radius: 8px;
+    transform-origin: top left;
+    overflow: hidden;
+    isolation: isolate;
+  }}
+  .tpb-stage[data-scaled] .tpb-card {{
+    transform: scale(var(--tpb-scale, 1));
+  }}
+
+  /* Grain texture */
+  .tpb-grain {{
+    position: absolute; inset: 0;
+    background-image: url('{_GRAIN_URL}');
+    background-size: 700px;
+    opacity: 0.22;
+    mix-blend-mode: multiply;
+    pointer-events: none;
+    z-index: 1;
+  }}
+
+  /* Frame */
+  .tpb-frame-outer {{
+    position: absolute; inset: 22px;
+    border: 2px solid {_INK};
+    pointer-events: none;
+    z-index: 2;
+  }}
+  .tpb-frame-inner {{
+    position: absolute; inset: 30px;
+    border: 1px solid {_INK};
+    pointer-events: none;
+    z-index: 2;
+  }}
+  .tpb-corner {{
+    position: absolute;
+    width: 24px; height: 24px;
+    background: {_SURFACE};
+    color: {_INK};
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; font-weight: 700;
+    z-index: 3;
+  }}
+
+  /* Content */
+  .tpb-content {{
+    position: absolute;
+    top: 42px; bottom: 42px;
+    left: 64px; right: 64px;
+    display: flex;
+    flex-direction: column;
+    z-index: 3;
+  }}
+
+  .tpb-masthead {{ text-align: center; color: {_INK}; }}
+  .tpb-masthead-tiny {{
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.34em;
+    text-transform: uppercase;
+    color: {_INK_SOFT};
+    margin-bottom: 8px;
+  }}
+  .tpb-masthead-big {{
+    font-family: 'Alfa Slab One', serif;
+    font-weight: 400;
+    font-size: 36px;
+    line-height: 1;
+    letter-spacing: 0.04em;
+    color: {_INK};
+    text-transform: uppercase;
+    margin: 0;
+  }}
+
+  .tpb-intro {{
+    margin-top: 18px;
+    text-align: center;
+    font-style: italic;
+    font-size: 15px;
+    color: {_INK_SOFT};
+  }}
+  .tpb-user-stamp {{
+    margin-top: 8px; display: flex; justify-content: center;
+  }}
+  .tpb-user-stamp-inner {{
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 15px;
+    font-weight: 600;
+    color: {_INK};
+    padding: 6px 18px;
+    border: 1.5px solid {_INK};
+    border-radius: 4px;
+    letter-spacing: 0.06em;
+  }}
+
+  /* Archetype */
+  .tpb-archetype {{
+    margin-top: 14px;
+    position: relative;
+    text-align: center;
+    padding: 12px 0 8px;
+  }}
+  .tpb-sunburst {{
+    position: absolute;
+    inset: -24px;
+    z-index: -1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }}
+  .tpb-eyebrow {{
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 13px;
+    letter-spacing: 0.32em;
+    text-transform: uppercase;
+    color: {_ACCENT};
+    font-weight: 600;
+    margin-bottom: 14px;
+  }}
+  .tpb-arch-title {{
+    font-family: 'Alfa Slab One', serif;
+    font-weight: 400;
+    font-size: 88px;
+    line-height: 0.92;
+    letter-spacing: -0.005em;
+    color: {_ACCENT};
+    margin: 0;
+    text-shadow: 4px 4px 0 {_INK}, -2px -2px 0 {_ACCENT2};
+  }}
+
+  /* Tagline */
+  .tpb-tagline {{
+    margin: 20px auto 0;
+    text-align: center;
+    font-style: italic;
+    font-size: 21px;
+    line-height: 1.4;
+    font-weight: 500;
+    color: {_INK};
+    max-width: 820px;
+  }}
+
+  /* Sins */
+  .tpb-sins-head {{
+    margin-top: 24px;
+    text-align: center;
+    font-family: 'Alfa Slab One', serif;
+    font-weight: 400;
+    font-size: 24px;
+    letter-spacing: 0.18em;
+    color: {_INK};
+    text-transform: uppercase;
+  }}
+  .tpb-sins-block {{
+    margin-top: 12px;
+    background: {_SINS_BG};
+    color: {_SINS_INK};
+    border-radius: 4px;
+    padding: 18px 30px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 5px 5px 0 {_INK};
+  }}
+  .tpb-sins-halftone {{
+    position: absolute; inset: 0;
+    background-image: radial-gradient({_SINS_DOTS} 1.4px, transparent 1.6px);
+    background-size: 14px 14px;
+    pointer-events: none;
+    opacity: 0.7;
+  }}
+  .tpb-sin-row {{
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    gap: 18px;
+    align-items: baseline;
+    padding: 4px 0;
+    position: relative;
+  }}
+  .tpb-sin-n {{
+    font-style: italic;
+    font-weight: 500;
+    font-size: 26px;
+    line-height: 0.9;
+    color: {_SINS_ACCENT};
+    text-align: right;
+    letter-spacing: 0.02em;
+  }}
+  .tpb-sin-body {{ display: flex; flex-direction: column; gap: 4px; }}
+  .tpb-sin-title {{
+    font-size: 19px;
+    line-height: 1.25;
+    font-weight: 600;
+    color: {_SINS_INK};
+    margin: 0;
+  }}
+  .tpb-sin-meta {{
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 12px;
+    font-weight: 500;
+    color: {_SINS_INK};
+    opacity: 0.85;
+    letter-spacing: 0.04em;
+  }}
+  .tpb-sin-divider {{
+    display: flex; align-items: center; gap: 12px;
+    color: {_SINS_INK};
+    opacity: 0.5;
+    margin: 6px 28px;
+  }}
+  .tpb-rule {{ flex: 1; height: 1px; background: currentColor; }}
+  .tpb-rule-glyph {{
+    font-size: 13px; letter-spacing: 0.4em; white-space: nowrap;
+  }}
+
+  /* Horoscope */
+  .tpb-horo-head {{
+    margin-top: 44px;
+    text-align: center;
+    font-family: 'Alfa Slab One', serif;
+    font-weight: 400;
+    font-size: 22px;
+    letter-spacing: 0.18em;
+    color: {_INK};
+    text-transform: uppercase;
+  }}
+  .tpb-horo {{
+    margin-top: 14px;
+    padding: 0 8px;
+  }}
+  .tpb-dropcap {{
+    font-family: 'Alfa Slab One', serif;
+    font-weight: 400;
+    font-size: 74px;
+    line-height: 0.85;
+    color: {_ACCENT};
+    float: left;
+    margin-right: 12px;
+    margin-top: 4px;
+    text-shadow: 3px 3px 0 {_ACCENT2};
+  }}
+  .tpb-horo-body {{
+    font-size: 19px;
+    line-height: 1.45;
+    font-weight: 500;
+    color: {_INK};
+    margin: 0;
+    text-align: justify;
+  }}
+
+  /* Signoff */
+  .tpb-signoff {{
+    margin-top: auto;
+    padding-top: 14px;
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    gap: 20px;
+    align-items: center;
+  }}
+  .tpb-stamp {{
+    width: 100px; height: 100px;
+    transform: rotate(-9deg);
+    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.05));
+  }}
+  .tpb-stamp img {{ width: 100%; height: 100%; object-fit: contain; display: block; }}
+  .tpb-sign-right {{ display: flex; flex-direction: column; gap: 6px; }}
+  .tpb-sign-title {{
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    color: {_INK_SOFT};
+  }}
+  .tpb-sign-script {{
+    font-style: italic;
+    font-weight: 500;
+    font-size: 34px;
+    line-height: 1;
+    color: {_INK};
+    letter-spacing: -0.01em;
+    transform: skew(-6deg);
+    transform-origin: left center;
+    display: inline-block;
+  }}
+  .tpb-sign-line {{
+    margin-top: 6px;
+    height: 1px;
+    background: {_INK};
+    width: 70%;
+  }}
+  .tpb-sign-meta {{
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    color: {_INK_SOFT};
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }}
+</style>
+</head>
+<body>
+
+<div class="tpb-wrap">
+  <div class="tpb-actions">
+    <button type="button" class="tpb-save" onclick="window.__tpbSave && window.__tpbSave()">
+      Save as PNG
+    </button>
+  </div>
+  <div class="tpb-stage" id="tpb-stage">
+    <div class="tpb-card" id="tpb-card">
+      <div class="tpb-grain"></div>
+      <div class="tpb-frame-outer"></div>
+      <div class="tpb-frame-inner"></div>
+      <div class="tpb-corner" style="top:14px;left:14px;">✺</div>
+      <div class="tpb-corner" style="top:14px;right:14px;">✺</div>
+      <div class="tpb-corner" style="bottom:14px;left:14px;">✺</div>
+      <div class="tpb-corner" style="bottom:14px;right:14px;">✺</div>
+
+      <div class="tpb-content">
+        <div class="tpb-masthead">
+          <div class="tpb-masthead-tiny">★ Presented by Hugging Face ★ Anno MMXXVI ★</div>
+          <h2 class="tpb-masthead-big">Trace Personality Bulletin</h2>
+        </div>
+
+        <div class="tpb-intro">This bulletin hereby certifies, after careful observation, that the operator behind the handle</div>
+        <div class="tpb-user-stamp"><div class="tpb-user-stamp-inner">@{user}</div></div>
+
+        <div class="tpb-archetype">
+          <div class="tpb-sunburst">{_sunburst_svg()}</div>
+          <div class="tpb-eyebrow">is</div>
+          <h1 class="tpb-arch-title">{arch1}<br>{arch2}</h1>
+        </div>
+
+        <p class="tpb-tagline">{tagline}</p>
+
+        <div class="tpb-sins-head">✺  Three Mortal Sins  ✺</div>
+        <div class="tpb-sins-block">
+          <div class="tpb-sins-halftone"></div>
+          {sins_html}
+        </div>
+
+        <div class="tpb-horo-head">✺  {headline}  ✺</div>
+        <div class="tpb-horo">
+          <p class="tpb-horo-body">
+            <span class="tpb-dropcap">{drop_cap}</span>{body_rest}
+          </p>
+        </div>
+
+        <div class="tpb-signoff">
+          <div class="tpb-stamp"><img src="{_SEAL_URL}" alt="Hugging Face Roastery seal"/></div>
+          <div class="tpb-sign-right">
+            <div class="tpb-sign-title">Signed —</div>
+            <div class="tpb-sign-script">Hugging Face Roastery</div>
+            <div class="tpb-sign-line"></div>
+            <div class="tpb-sign-meta">
+              <span>Dated · {generated}</span><span>·</span>
+              <span>{turns:,} turns analysed</span><span>·</span>
+              <span>{dataset}</span><span>·</span>
+              <span>{serial}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script>
+  (function() {{
+    function fit() {{
+      var stage = document.getElementById('tpb-stage');
+      if (!stage) return;
+      var card = stage.querySelector('.tpb-card');
+      if (!card) return;
+      var s = stage.clientWidth / 1080;
+      card.style.transform = 'scale(' + s + ')';
+      stage.style.height = (1440 * s) + 'px';
+      stage.setAttribute('data-scaled', '1');
+    }}
+    window.addEventListener('resize', fit);
+    // Run once now and again on the next frame to catch late-loaded fonts.
+    fit();
+    requestAnimationFrame(fit);
+    setTimeout(fit, 200);
+
+    window.__tpbSave = async function() {{
+      var card = document.getElementById('tpb-card');
+      if (!card) return;
+      // Temporarily un-scale the card so we screenshot it at 1080x1440.
+      var prev = card.style.transform;
+      card.style.transform = 'scale(1)';
+      try {{
+        var canvas = await html2canvas(card, {{
+          width: 1080, height: 1440,
+          backgroundColor: '{_SURFACE}',
+          useCORS: true, scale: 1, logging: false,
+        }});
+        var link = document.createElement('a');
+        link.download = 'trace-personality-bulletin-{serial}.png';
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+      }} finally {{
+        card.style.transform = prev;
+      }}
+    }};
+  }})();
+</script>
+
+</body>
+</html>
+""".strip()
+
+
+def bulletin_html(data: dict) -> str:
+    """Wrap the standalone bulletin document in an iframe so its CSS is isolated
+    from Gradio's theme. Returns an HTML snippet suitable for `gr.HTML`.
+    """
+    doc = _inner_html(data)
+    # Escape for the srcdoc attribute value (double-quoted). Order matters:
+    # & must be encoded first, then ". Inside the iframe the parser will
+    # decode these back to literal '&' and '"' before parsing the HTML body.
+    escaped = doc.replace("&", "&amp;").replace('"', "&quot;")
+    return (
+        f'<iframe srcdoc="{escaped}" '
+        'style="width:100%;aspect-ratio:1080/1440;border:none;display:block;'
+        'background:transparent;" '
+        'sandbox="allow-scripts allow-downloads allow-same-origin"></iframe>'
+    )
+
+
+def empty_bulletin_html(message: str = "Awaiting bulletin…") -> str:
+    """Lightweight placeholder shown before a report is generated."""
+    return f"""
+<div style="display:flex;justify-content:center;align-items:center;
+            min-height:360px;background:{_SURFACE};border-radius:8px;
+            font-family:'Source Sans 3', sans-serif;color:{_INK_SOFT};
+            font-style:italic;font-size:18px;padding:40px;text-align:center;">
+  {html_mod.escape(message)}
+</div>
+""".strip()

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=6.14
+huggingface_hub>=0.28
+Pillow>=10.0