Mock → Live, selectable HTML
Eight AI-generated website mocks — flat PNG images — rebuilt as faithful HTML you can actually select, copy and ship. One generic pipeline reads each mock, finds every line of text, erases the baked pixels, and lays real HTML type back over the artwork. No per-site hand-coding.
Where the code lives
Pipeline runs/html-builder-v7/
Mock generator runs/mock-engine/
in the redwood-itterate project
How to run it (per site)
# 1 · author a twin & render the mock (mock-engine) python3 build_mock.py <fixture> <world> python3 render.py <fixture> <world> 1K # 2 · localize, overlay & gate (html-builder-v7) python3 localize_vision.py <site> # → rects.json python3 build.py <site> # → selective.html + PASS/FAIL
Methodology
The overlay is twin-driven: it never invents text. It only relocates strings it already knows are on the page, corroborates each with independent OCR, and refuses to go live on anything it can't erase cleanly.
Twin + mock
A twin.yaml fixes every string; an image model renders the baked-text mock (mock-engine).
Vision locate
Gemini vision proposes a box for each known string → rects.json.
Hybrid snap
EasyOCR geometry corroborates & tightens every box → rects_snapped.json.
Gate confidence
CONFIDENT boxes go live; WEAK / SUSPECT (or glitch-bg) stay as mock art.
Erase + overlay
Confident glyphs are erased from a clean plate; real HTML text is laid over them → selective.html.
Audit
Coverage + ghost gates fail the build on any clipped, overlapping, or ghosted box.
Skills — 13 pipeline capabilities + 2 automated gates
Each skill is generic: it keys off geometry, ink and confidence, never off a specific site. The two gates run on every build and hard-fail on a broken box.
Every visible string is ground-truthed in a twin.yaml before a pixel is drawn — the overlay never guesses text.
Gemini vision proposes one box per known string (rects.json).
EasyOCR geometry ∩ vision box ∩ twin string → a tight, independently-corroborated box.
Each box is scored CONFIDENT / WEAK / SUSPECT by how well OCR re-reads it — only confident boxes go live.
Contrast, polarity, CLAHE, 4× upscale and a character allow-list rescue low-confidence boxes.
A box grows to cover a wrapped, multi-line paragraph instead of just its first line.
Recovers a leading/trailing letter dropped across a wide tracking or space gap.
No two live boxes may overlap; conflicts are split at the min-ink whitespace so descenders aren't clipped.
Clears the actual glyph pixels, not just a rectangle, so no ghost of the baked text survives.
Flat panels are erased & overlaid; glitch / gradient art is deliberately kept as original mock imagery.
Picks display vs body font per box to match the mock's actual letterforms (script vs upright).
Samples the stroke core, not the anti-aliased edge, so overlaid text isn't a washed-out grey.
Headings, prices and logos lean bold (with a faux-bold stroke on faces that lack a 700); body & captions stay regular.
Fails the build if any box clips its own text (CUT) or overlaps another box (OVERLAP).
Flags erase residue left behind on the clean plate before it can reach a screenshot.
Redwood Pizzeria
- Cleanest case: all 48 text boxes go live & selectable — flat gouache panels the eraser repaints perfectly.
- The script headline (Pacifico) stays script: the font-swap skill matches the mock's joined letterforms.
Confidence / boxes map — collapsed
Redwood Pizzeria
- All 48 boxes live on a dense gold-on-navy engraving.
- The bold + faux-stroke skill makes the menu and footer read heavy, matching the mock's weight.
Confidence / boxes map — collapsed
Redwood Pizzeria
- 35 live / 17 art — by design. Text sitting on the glitch/gradient panels is deliberately KEPT as mock art so the vaporwave background survives (see the amber boxes below).
- Flat areas still go live; the pipeline only refuses to repaint a background it can't reproduce.
Confidence / boxes map — collapsed
Northwind CRM
- All 48 boxes live — clean Art-Deco flat panels, every line selectable.
- A non-restaurant B2B layout, to show the pipeline isn't restaurant-specific.
Confidence / boxes map — collapsed
Redwood Pizzeria
- 45 live / 12 art on a long 780×3249 page — proves the pipeline handles full multi-screen scrolls, not just one hero.
- A handful of facts on textured panels stay as art (amber below).
Confidence / boxes map — collapsed
Redwood Pizzeria
- 31 live / 32 art — the carved-woodcut medium has heavy grain the eraser won't touch cleanly, so ~half the text is kept as original mock art (amber below).
- Faithful to the mock, but the least selectable of the eight — a clear trade the confidence gate makes on purpose.
Confidence / boxes map — collapsed
Pizzeria Portofino
- Fixed at the source: the first mock put hero text on a full-bleed photo and the menu inline on one line, which the overlay couldn't do cleanly (patchy hero, ghosted menu).
- Rather than patch the pipeline per-site, we taught the mock GENERATOR two rules — hero text on a flat solid field (image beside it), and menus as an even grid of stacked cells — then regenerated.
- Result: 53 live / 3 art, coverage & ghost clean. The hero headline and every menu item are now live, selectable text on flat fills — the generation fix turned red into green.
Confidence / boxes map — collapsed
Pasha Mediterranean
- Built from scratch this session (new 'mediterranean' world + fixture) and came out one-shot faithful: 46 live.
- It reuses the patterns the pipeline already knows — a grid menu and flat panels — which is why it worked first try where Portofino (photo hero + inline menu) did not.
Confidence / boxes map — collapsed
build_showcase.py · twin-driven selective-overlay pipeline ·
runs/html-builder-v7/