CLIENT WORKACTIVE DEVELOPMENT

AI Image Compositor for CRE Marketing

Turns 2–3 days of manual AI image editing into one supervised batch — sharper every project.

AT A GLANCE

AT A GLANCETROPHY-AI-IMAGE
STATUS
ACTIVE DEVELOPMENT
TIMELINE
2026-06 — 2026-06 · 7 DAYS
LANGUAGES
TypeScript / Python
CATEGORY
CLIENT WORK
0

COMMITS IN 7 DAYS

OUTCOME

That 2–3 days now fits in one supervised sitting, prompt know-how is captured for reuse, and a real end-to-end run cost $0.235 against OpenAI's live image model.

AI Image Compositor for CRE Marketing cover

METRICS

0

M.01COMMITS IN 7 DAYS

Full compositor built from contracts to canvas in a single week

0k

M.02TYPESCRIPT SOURCE LINES

Core engine, contracts, providers, and UI (TypeScript only, .ts files)

0k

M.03TSX UI LINES

React Flow canvas, mask editors, review surface

$0

M.04REAL SPEND TO VALIDATE THE FULL PIPELINE

One end-to-end run on live gpt-image-2 proved the pipeline, spend cap, and retry loop

THE CASE, CHAPTER BY CHAPTER

CH.01

The problem

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 renderings polished. The client did all of it manually — 5–10 prompt iterations per image in the OpenAI playground, with no batch and no record of what worked. The AI output was already good enough; the system around it was the bottleneck.

CH.02

What it does

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

The operator wires a visual pipeline — Image → Generate → Mask → Merge → Export — then runs the whole project at once. Claude reads the client brief and photos and authors the pipeline itself, so the operator reviews and runs rather than building from scratch. After each session, Claude distills what worked into a living rulebook, so the next project starts sharper.

CH.03

Pixel-identical output

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 confidence valve degrades to manual placement rather than forcing a bad blend. This solves the core failure of masked AI edits: the untouched region distorting.

CH.04

Safe to run unattended

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. 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.

CH.05

Built and proven

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

The full edit path ran against real gpt-image-2, confirming the spend cap and retry loop in production for a fraction of a dollar. The codebase is a five-package TypeScript monorepo (32k TypeScript, 7.7k TSX UI) plus a Python computer-vision sidecar. Keyless replay paths stay green in CI without ever spending.

THE BUILD, WEEK BY WEEK

358 COMMITS — PEAK WEEK01 JUN 202608 JUN 2026

409 COMMITS — IN 8 DAYS — AVG 51/DAY

TypeScript
59.1% 40.1K
Docs
17.0% 11.5K
Config
12.3% 8.4K
Python
10.4% 7.1K
JavaScript
1.2% 790

FEATURES

Node graph execution engineA headless TypeScript library that runs a whole project's edit queue in one pass, with a hard spend cap and crash-safe resume baked in.
Pixel-identical composite-backComputer-vision alignment puts the AI edit back onto the source so every region outside the mask is byte-for-byte identical to the original photo.
Claude authors the pipelineClaude reads the client brief and photos and emits a ready-to-run batch job, so the operator reviews and runs instead of building each step by hand.
Compounding prompt knowledgeAfter each session, Claude reads the operator's ratings and writes the lessons back to a living rulebook, so the next project's first attempt starts sharper.
Testable without spending a centThree replay tiers let the full pipeline run byte-identical in CI with no API key, so tests never cost a cent against OpenAI.
Optional full-auto loopAn opt-in tier lets the system generate, judge, and retry on its own, bounded by a dollar cap, a time limit, and a kill switch — off by default so human taste stays in control.

ARCHITECTURE

aie-contractsZod schemas for every data boundary: graph, run-journal-event, CAS layout, provenance sidecar, cost estimate, job API, run-error taxonomy. Emits JSON Schemas for cross-language use.
aie-enginePure headless library: graph validation, DAG executor (cell fan-out, spend cap, journal-before-paid-call, backoff/idempotency), content-addressed store, atomic writes, cv2-sidecar auto-align, Stage-2b primitives (upscale, remove-background, comment).
aie-providersOpenAI provider behind a spend gate. Three replay tiers: ReplayStrict (CI, byte-identical, no key), ReplayResume (crash recovery), Record (live + fixture capture).
aie-appFastify composition root: POST /runs job model, re-subscribable SSE, RunStore, provider factory, CLI, debug console.
aie-uiReact + React Flow node canvas (typed ports, Blender-style IDs), Konva mask/crop editors, review surface (contact sheet, swipe compare, star ratings, export).
cv2 sidecar (Python)Out-of-process computer vision: ORB/AKAZE feature matching + warp + NCC metrics. The TypeScript 4-DOF solver handles the transform math; opencv-js proved tsx/vitest-incompatible, so the CV pipeline runs as a spawned subprocess.
Offline Claude Code layerClaude Opus (offline) authors node graphs from client brief + images, curates the prompt preset library, and runs the learning pass — reading provenance records and writing distilled lessons to ai-prompting.md.

STACK

LANGTypeScriptPython
FXReactReact FlowKonvaViteFastifyZustandVitestPlaywrightZod
INFRANode.js 22+npm workspacessharp (libvips)OpenCV (cv2 sidecar)Local-first / Vercel-deployable
AIOpenAI gpt-image-2Claude Opus (offline pipeline authoring + learning pass)Claude Code (orchestration)

SKILLS DEMONSTRATED

Turning a manual workflow into a batch system · Capping and proving AI API spend in production · Crash-safe pipelines that resume without re-billing · Computer vision for pixel-exact image compositing · Letting Claude author and improve the workflow itself · Drag-and-drop visual tooling for non-technical operators · Full-stack TypeScript delivery for a paying client

THE CODE, MAPPED

SHOWING THE 350 MOST CONNECTED OF 2,796 NODES · 4,644 EDGES · 244 COMMUNITIES — EXTRACTED FROM THE CODEBASE BY TREE-SITTER

GRAPH