poster/build_embed.py

#!/usr/bin/env python3
"""Build poster_embed.html: a self-contained (data-URI) poster image with
clickable hotspot overlays targeting real logbook page slugs."""
import base64
import json
import sys
from pathlib import Path

OUT_DIR = Path(sys.argv[1] if len(sys.argv) > 1 else ".")
png_bytes = (OUT_DIR / "poster.png").read_bytes()
b64 = base64.b64encode(png_bytes).decode("ascii")
hotspots = json.loads((OUT_DIR / "hotspots.json").read_text())["hotspots"]

TITLES = {
    "executive-summary": "Executive summary",
    "claim-1-sqlbench-scale-469-syntax-516-semantic-debugging-tasks-from-1-000-seed-scripts-across-26-business-scenarios": "Claim 1: Benchmark scale",
    "claim-2-claude-4-sonnet-best-model-36-46-graph-match-on-squirrel-syntax-32-17-on-squirrel-semantic": "Claim 2: Best model",
    "claim-3-deepseek-v3-and-qwen-2-5-coder-32b-scores-most-llms-below-20-success-rate": "Claim 3: Model rankings",
    "claim-4-sqlbench-script-complexity-420-tokens-and-17-34-21-62-functions-per-script-on-average": "Claim 4: Script complexity",
    "conclusion": "Conclusion",
}

overlays = []
for h in hotspots:
    slug = h["slug"]
    title = TITLES.get(slug, slug)
    overlays.append(f"""
    <a class="hotspot" href="#/{slug}" title="Open: {title}"
       style="left:{h['left_pct']:.4f}%; top:{h['top_pct']:.4f}%; width:{h['width_pct']:.4f}%; height:{h['height_pct']:.4f}%;">
      <span class="pill">Open details &#8599;</span>
    </a>""")

html = f"""<!-- poster_embed.html: self-contained reproduction poster (data-URI) with clickable logbook hotspots -->
<style>
  .poster-embed-wrap {{ position: relative; display: inline-block; max-width: 100%; line-height: 0; }}
  .poster-embed-wrap img {{ max-width: 100%; height: auto; display: block; border-radius: 4px; }}
  .poster-embed-wrap .hotspot {{
    position: absolute; display: block; box-sizing: border-box;
    border: 2px solid transparent; border-radius: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
  }}
  .poster-embed-wrap .hotspot:hover, .poster-embed-wrap .hotspot:focus {{
    border-color: #C9A24A; background-color: rgba(201, 162, 74, 0.10);
    outline: none;
  }}
  .poster-embed-wrap .pill {{
    position: absolute; top: 6px; right: 6px;
    background: #2D5F8B; color: #fff; font: 600 11px/1.6 system-ui, sans-serif;
    padding: 2px 8px; border-radius: 999px; opacity: 0.85;
    white-space: nowrap;
  }}
  .poster-embed-wrap .hotspot:hover .pill {{ opacity: 1; background: #C9A24A; color: #14314A; }}
</style>
<div class="poster-embed-wrap">
  <img src="data:image/png;base64,{b64}" alt="Reproduction poster: Beyond Text-to-SQL — Reproducing Squirrel Benchmark">
  {"".join(overlays)}
</div>
"""

out_path = Path(__file__).resolve().parent / "poster_embed.html"
out_path.write_text(html)
print(f"Wrote {out_path} ({len(html)/1e6:.2f} MB, {len(overlays)} hotspots)")