Rolac World Cup Photobooth — AI Football Jersey Generator
React 18 · TypeScript · Vite · Tailwind · Radix UI / MUI · Framer Motion · Python · Flask · waitress · nginx · Google Gemini API · InsightFace · ONNX Runtime · MediaPipe · OpenCV · GFPGAN
TypeScript
Python
Tailwind CSS
React
Vite
Framer Motion
Radix UI
MUI
Flask
nginx
Google Gemini
ONNX
OpenCV
MediaPipeProblem
A live football event with up to 30,000 attendees needed an AI photobooth where a visitor takes a selfie, picks a national team, and instantly gets a realistic photo of themselves wearing that jersey — and it had to survive a sudden crowd all uploading at once without crashing.
Solution
Engineered a complete end-to-end system, not just a model demo. A React 18 + Vite SPA handles camera capture, team selection (10 countries) and result download; a Flask API served by waitress (64 threads) behind nginx generates the composite. Google Gemini fuses the selfie and a jersey reference in one pass, backed by a self-hosted CV pipeline (InsightFace buffalo_l + inswapper, ONNX Runtime, MediaPipe segmentation, GFPGAN/OpenCV) with affine alignment, LAB colour matching and seamless blending for direct face/head-swap modes. An admin panel reviews every generated record.
Impact
Designed to scale to 30,000 users on a single VPS: an async job queue returns a job_id in HTTP 202 so uploads never block on the slow AI step, a bounded ThreadPoolExecutor caps concurrent Gemini calls, load shedding returns a friendly 503 past MAX_QUEUE instead of crashing, and multi-key round-robin rotation multiplies throughput (≈ keys × per-key rate). Verified concurrency: 12 simultaneous uploads accepted in 0.69s and all completed. Production-hardened with systemd auto-restart, 180s proxy timeouts and capacity planning (~15 GB storage for 30k results).
