AI Image Compositor for CRE Marketing

A NYC commercial real estate marketing agency was losing 2–3 days per project to image editing done by hand, one picture at a time.

Every office-building website needs photo work before launch: empty offices staged with furniture, scaffolding removed from exteriors, rough architect renderings polished, people added at ground level for scale. The client was doing all of it manually, 5–10 prompt iterations per image in the OpenAI playground, with no batch, no variant history, and no record of what worked. Every project started from scratch.

The output quality from gpt-image-2 was already proven. The bottleneck was the system around it: manual, slow, and incapable of compounding. Each new project inherited nothing from the last.

A node-based image compositor batches the entire edit queue in one supervised sitting instead of grinding through each image by hand.

The architecture a Nuke or Photoshop compositor would use, built as a local-first TypeScript application for exactly this domain. Three parts work together:

A headless execution engine validates and executes typed node graphs. Every node is a function, and the graph is the provenance record. The engine enforces a hard spend cap, writes an append-only run journal before every paid API call, and resumes mid-batch after a crash without re-billing completed work.

A React Flow canvas UI lets the operator wire nodes visually (Image, Generate, Mask, Merge, Export) then run the whole project at once. A Konva mask editor lets the operator paint exactly which regions the model should touch. A review surface shows source versus result side-by-side with swipe compare and star ratings.

An offline Claude layer reads the client brief and photos and authors the entire pipeline itself: analyzing each image's content, selecting the right generation preset from the learned rulebook, injecting the building's positioning clause into prompts, and writing out a ready-to-run batch job. The operator opens it on the canvas, reviews, and runs rather than building from scratch. After each session, Claude reads the operator's ratings and writes distilled lessons back to a living rulebook, so the next project's first attempt starts sharper.

The AI changes only the masked region. Every other pixel comes back byte-for-byte identical to the source.

The Merge step registers the AI edit back onto the original using computer-vision feature matching (ORB/AKAZE) and composites through the mask in one pass. A TypeScript 4-DOF solver handles the transform math. opencv-js proved incompatible with the test harness, so the CV pipeline ships as an out-of-process Python sidecar. A confidence valve degrades gracefully to manual placement rather than forcing a bad alignment.

This solves the core failure of masked AI edits: the untouched region distorting. The unmasked region is not "close to identical." It is byte-identical, because the composite-back step never re-encodes regions the model didn't touch.

A hard spend cap plus an append-only journal means a crash mid-batch resumes with zero re-billing.

Before every paid API call, the engine writes the request to disk. On restart it skips completed work via idempotency keys. Three replay tiers keep the full pipeline testable without any API spend: ReplayStrict runs the entire path byte-identical in CI with no key, ReplayResume handles crash recovery, and Record mode captures live fixtures for later use.

An opt-in full-auto tier can generate, judge, and retry on its own, bounded by a dollar cap, a time limit, and a kill switch, but human taste stays in control by default. The operator opts in to automated accept only when a prompt pattern has already earned it through rated sessions.

409 commits in one focused build week, validated end-to-end on live OpenAI for $0.235.

The full edit path (source, Generate, Mask, Merge, Export, with the unmasked region byte-identical) ran against real gpt-image-2, confirming the spend cap and retry loop in production for a fraction of a dollar. The learning harvester aggregates ratings across projects into a JSONL corpus that feeds the rulebook distillation step, so the compounding is real: each project improves the baseline for the next.

The codebase is a five-package TypeScript monorepo (contracts / engine / providers / app / ui) plus a Python computer-vision sidecar: 39k lines of TypeScript across the core engine, contracts, and providers, and 12.6k lines of TSX for the React Flow canvas, mask editors, and review surface. Contracts define every data boundary as Zod schemas with emitted JSON Schemas for cross-language use. Keyless replay paths stay green in CI without ever spending.