Buckets:
| #!/usr/bin/env python3 | |
| """Create a self-contained Trackio poster embed with validated page hotspots.""" | |
| import argparse | |
| import base64 | |
| import json | |
| from pathlib import Path | |
| from playwright.sync_api import sync_playwright | |
| def collect_slugs(node: dict) -> set[str]: | |
| slugs = {node["slug"]} | |
| for child in node.get("children", []): | |
| slugs |= collect_slugs(child) | |
| return slugs | |
| def main() -> None: | |
| ap = argparse.ArgumentParser() | |
| ap.add_argument("--poster", type=Path, required=True) | |
| ap.add_argument("--png", type=Path, required=True) | |
| ap.add_argument("--logbook", type=Path, required=True) | |
| ap.add_argument("--output", type=Path, required=True) | |
| args = ap.parse_args() | |
| logbook = json.loads(args.logbook.read_text(encoding="utf-8")) | |
| valid = collect_slugs(logbook["root"]) | |
| with sync_playwright() as p: | |
| browser = p.chromium.launch() | |
| page = browser.new_page(viewport={"width": 5760, "height": 3456}) | |
| page.goto(args.poster.resolve().as_uri(), wait_until="networkidle") | |
| page.wait_for_function("document.fonts.status === 'loaded'") | |
| poster_box = page.locator('[data-measure-role="poster"]').bounding_box() | |
| targets = page.locator("[data-logbook-target]") | |
| hotspots = [] | |
| for idx in range(targets.count()): | |
| target = targets.nth(idx) | |
| slug = target.get_attribute("data-logbook-target") | |
| if slug not in valid: | |
| raise SystemExit(f"Unknown logbook slug in poster: {slug}") | |
| box = target.bounding_box() | |
| hotspots.append({ | |
| "slug": slug, | |
| "left": 100 * (box["x"] - poster_box["x"]) / poster_box["width"], | |
| "top": 100 * (box["y"] - poster_box["y"]) / poster_box["height"], | |
| "width": 100 * box["width"] / poster_box["width"], | |
| "height": 100 * box["height"] / poster_box["height"], | |
| }) | |
| browser.close() | |
| encoded = base64.b64encode(args.png.read_bytes()).decode("ascii") | |
| links = [] | |
| for hotspot in hotspots: | |
| links.append( | |
| f'<a class="hotspot" href="#/{hotspot["slug"]}" target="_top" ' | |
| f'aria-label="Open claim details" style="left:{hotspot["left"]:.5f}%;' | |
| f'top:{hotspot["top"]:.5f}%;width:{hotspot["width"]:.5f}%;' | |
| f'height:{hotspot["height"]:.5f}%"><span>Open details ↗</span></a>' | |
| ) | |
| html = f"""<!doctype html> | |
| <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <style> | |
| *{{box-sizing:border-box}} html,body{{margin:0;background:#f4f1ed}} .wrap{{position:relative;width:100%;line-height:0}} | |
| .poster{{display:block;width:100%;height:auto}} .hotspot{{position:absolute;border:2px solid transparent;border-radius:8px;line-height:1.2;text-decoration:none;transition:.15s ease;background:transparent}} | |
| .hotspot span{{position:absolute;right:8px;top:8px;padding:6px 9px;border-radius:999px;background:rgba(29,63,96,.92);color:white;font:700 12px/1.1 system-ui,sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.25)}} | |
| .hotspot:hover,.hotspot:focus-visible{{border-color:#b45f22;background:rgba(180,95,34,.10);outline:none}} | |
| .hotspot:hover span,.hotspot:focus-visible span{{background:#b45f22}} | |
| @media(max-width:900px){{.hotspot span{{font-size:9px;padding:4px 6px;right:4px;top:4px}}}} | |
| </style></head><body><div class="wrap"><img class="poster" src="data:image/png;base64,{encoded}" alt="Reproduction poster for What Makes a Strong Model?">{''.join(links)}</div></body></html>""" | |
| args.output.write_text(html, encoding="utf-8") | |
| print(f"wrote {args.output} with {len(hotspots)} validated hotspot(s)") | |
| if __name__ == "__main__": | |
| main() | |
Xet Storage Details
- Size:
- 3.73 kB
- Xet hash:
- b8926d6e3bbdd5ed9d2c2ce489dc2a5f1e48f2f64d47261c17402ce2abef9fa6
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.