Before After Diff Lab
Two images - vision change summary (what changed, risk notes). Honest 503 without AI.
Run this experiment yourself
Demos are not embedded on this site. Deploy a standalone copy on Vercel or run the experiment app locally.
Local development
cd apps/experiments/before-after-diff-lab pnpm install pnpm dev
Then open http://localhost:3010.
This is an experimental demo. Use it as a starting point for your own projects.
Before After Diff Lab is a Wave 3 Batch H composition lab. Pure helpers live in logic.ts; missing providers or stores degrade honestly (never fabricate AI output).
Features
- Two-image vision diff
- Structured change list
- Honest 503
Server Reference
POST /api/diff
multipart: before=<image>&after=<image>| Status | Cause |
|---|---|
200 | Success |
400 | Missing images |
503 | No AI provider |
Implementation Details
Validate
Inputs are length-capped in logic.ts; APIs return 400 for missing fields.
Run
Route Handlers compose AI SDK, Redis/Neon, or ImageResponse as documented. Fallbacks include honest notes.
Limitations
- Not pixel-perfect QA.
- 4MB per image.
- Model may miss subtle diffs.
Use in your project
Copy the Route Handler(s) and logic.ts from apps/experiments/before-after-diff-lab/.
Deployment
Local Development
cd apps/experiments/before-after-diff-lab
pnpm install
pnpm devConfiguration
| Variable | Required | Purpose |
|---|---|---|
AI_GATEWAY_API_KEY | Yes (or OpenAI) | Preferred AI provider |