Single-page commercial web app that converts portraits to ICAO-compliant 630×810px passport photos (per your Guidelines for ICAO.pdf).
- Exact 630 × 810 pixel output
- White background whitening
- Face auto-detection with manual framing (80–85% face scale)
- Adjustments: position, brightness, contrast, saturation, sharpen
- Compliance checklist (automated + manual ICAO items)
- Stripe Checkout for paid downloads (watermarked preview until paid)
- Browser-only processing — images never leave the client
- Formats: JPG, PNG, WebP, HEIC/HEIF, GIF, BMP, AVIF, TIFF (HEIF/TIFF converted locally)
- Local watermark — preview overlay + test download (see below)
npm install
npm run models # face-api weights (also runs on postinstall)
cp .env.example .env.local
npm run devOpen http://localhost:3000.
- Upload and process any photo.
- In the sidebar, open Watermark (local).
- Toggle Show watermark on preview to compare with/without overlay.
- Click Download watermarked JPEG (test) — saves the exact preview customers see before payment.
Or open: http://localhost:3000/?testWatermark=1
In local dev (npm run dev), payment is skipped automatically so every flow is testable without Razorpay. To unlock lifetime access in production (e.g. for your own use), open the browser console on your deployed site and run:
localStorage.setItem('icao_lifetime_paid', '1')- Create a Razorpay account.
- Add to
.env.local:
RAZORPAY_KEY_ID=rzp_live_...
RAZORPAY_KEY_SECRET=...
NEXT_PUBLIC_APP_URL=https://your-domain.com
- Deploy (Vercel recommended). Set the same env vars in the dashboard.
npm run build
npm startRequirements are implemented from Guidelines for ICAO.pdf in this repo (630×810, white background, face 80–85%, front view, etc.). Final acceptance remains with the passport office.