Photo Tool — Background Remover & Cartoonify

A simple Next.js tool with two free, client-side photo features:

1. Remove Background — AI-powered, using @imgly/background-removal (WASM/ONNX, runs in the browser, no server, no API key, no cost).
2. Cartoonify — a pure canvas filter (color smoothing + posterize + edge outlines). No AI model, no network call, instant, and works completely offline.

Local setup

npm install
npm run dev

Open http://localhost:3000

How each feature works

Remove Background

• Images never leave the browser — background removal runs client-side using an ONNX model loaded from IMG.LY's CDN.
• The first run downloads the AI model (~170–180MB, full-quality version). The browser caches it, so every run after that is much faster.
• Multiple photos are processed in parallel (each gets its own Web Worker) for speed.
• Output is a transparent PNG.

Cartoonify

• Pure pixel math in lib/cartoonify.js: box blur to flatten colors, posterize to reduce color levels, Sobel edge detection to draw outlines.
• Tunable via the opts object in cartoonify() — colorLevels (fewer = flatter look), edgeThreshold (higher = fewer/bolder lines), blurRadius (higher = flatter regions), maxDim (processing resolution, kept at 1400px for speed).
• Output is a JPEG (no transparency needed since the original background stays in the image).

Deploy to Vercel

1. Push to GitHub, then import the repo in Vercel.
2. Deploy — no environment variables needed, this tool has no backend dependencies.

Notes

• Max 6 photos at once (MAX_IMAGES in app/page.js).
• next.config.js excludes onnxruntime-node from the webpack bundle — that's a Node-only asset the background-removal library optionally references but doesn't need in the browser, and including it breaks the build.
• If the cartoon effect looks too harsh or too soft, tweak colorLevels/edgeThreshold/blurRadius in the cartoonify() call inside app/page.js.