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.

8designs, one pipeline

332text boxes made live & selectable

13 + 2pipeline skills + automated gates

83boxes kept as mock art (glitch / low-confidence)

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.

Twin content contract

Every visible string is ground-truthed in a twin.yaml before a pixel is drawn — the overlay never guesses text.

Vision box detection

Gemini vision proposes one box per known string (rects.json).

Hybrid snapping

EasyOCR geometry ∩ vision box ∩ twin string → a tight, independently-corroborated box.

Confidence gating

Each box is scored CONFIDENT / WEAK / SUSPECT by how well OCR re-reads it — only confident boxes go live.

Re-OCR escalation

Contrast, polarity, CLAHE, 4× upscale and a character allow-list rescue low-confidence boxes.

Multi-line extension

A box grows to cover a wrapped, multi-line paragraph instead of just its first line.

Horizontal glyph recovery

Recovers a leading/trailing letter dropped across a wide tracking or space gap.

Overlap resolution

No two live boxes may overlap; conflicts are split at the min-ink whitespace so descenders aren't clipped.

Connected-component erase

Clears the actual glyph pixels, not just a rectangle, so no ghost of the baked text survives.

Uniform-background detection

Flat panels are erased & overlaid; glitch / gradient art is deliberately kept as original mock imagery.

Font-family script swap

Picks display vs body font per box to match the mock's actual letterforms (script vs upright).

Core-ink colour sampling

Samples the stroke core, not the anti-aliased edge, so overlaid text isn't a washed-out grey.

Role-based weight

Headings, prices and logos lean bold (with a faux-bold stroke on faces that lack a 700); body & captions stay regular.

Coverage audit

Fails the build if any box clips its own text (CUT) or overlaps another box (OVERLAP).

Ghost check

Flags erase residue left behind on the clean plate before it can reach a screenshot.

Redwood Pizzeria

1950s hand-painted dinerPacifico / Zilla Slab 48 live · 0 art768×1376

Open HTML website ↗ Open mock ↗

Mock — the AI-generated image (768×1376)

Live HTML — real page, try selecting the text ↓

Confidence / boxes map — collapsed

Green = made live & selectable · amber/red = left as original mock art (low OCR corroboration or a non-erasable glitch/gradient background). Confidence measures independent OCR agreement on a box, not human readability.