Case Study
Almarai Football AI — Generative Footballer Photo Experience
A generative-AI web experience that turns a selfie into a photorealistic portrait of the person as a footballer in the Almarai kit — with culturally appropriate styling, print-ready output and instant download or sharing.
- Status
- Delivered (2026)
- Role
- Full-Stack & AI Engineer
- Platforms
- Mobile Web
Problem Statement
Almarai's football campaign needed an engaging, personalised activation. Generative image models tend to distort brand assets and faces, and the Gulf audience required culturally appropriate styling.
- Models redraw the kit, pose and scene
- Faces get "beautified" into someone else
- Gender, age and hijab/niqab styling must be respected
- Image models are slow and sometimes overloaded
- Every generation is a paid model call
The Solution
We built a mobile web app that sends two images to a multimodal image model: the user's selfie and a fixed, pre-designed branded reference plate. Firestore-managed prompts treat the plate as locked — only identity regions change — while preserving the person's features, gender and age. The result is cropped to a 10 × 15 cm print size, branded and ready to download or share.
- Two-Image Identity Transfer
- Locked Brand Plates
- Firestore-Managed Prompts
- Culturally Aware Styling
- Print-Ready Output
Key Features
Selfie-to-Footballer Generation
- Selfie captured in the browser
- Combined with a branded reference plate chosen by profile
- Kit, pose and stadium preserved exactly
Culturally Aware Profiles
- Male or female, adult or child
- Hijab, no-hijab or niqab styling with a dedicated niqab prompt
- Bilingual English/Arabic interface
Live Prompt Tuning
- Prompts stored in Firestore — tuned without a redeploy
- Rules for identity, kit fidelity, body type and stadium lighting
- Refined over several documented iterations
Print-Ready Output
- Cropped and resized to 1181 × 1772 px (10 × 15 cm at 300 DPI)
- Almarai branding applied on a canvas
- Download, copy link or share to social platforms
Performance & Reliability
- Reference plates cached in the Gemini Files API
- High-traffic state with retry on overload or quota errors
- Three attempts per device to bound cost
Built for Unattended Devices
- Passcode gate for attended use
- Automatic reload when a new version is deployed
- Client error logging to a write-only collection
Tech Stack
Frontend
- React
- TypeScript
- Vite
- Tailwind CSS
- shadcn/ui
- i18next
- HTML Canvas
Backend
- Cloud Firestore
- Firebase Storage
- Firebase Hosting
Services
- Google Gemini Image Generation
- Gemini Files API
- OpenAI Images
Architecture
Multi-Tenancy
Serverless static app — the browser orchestrates Firestore prompts, Storage and the image model directly
Realtime
Not required — a screen state machine: passcode → profile → camera → generating → result
Data Model
Profile → Selfie → Reference Plate → Prompt → Generated Image → Branded JPEG
My Responsibilities
- Image-to-image generation pipeline
- Prompt engineering for identity and brand fidelity
- Profile-based reference plates and prompt branches
- Print-ready canvas post-processing
- Error handling, retries and attempt limits
- Parallel Gemini and OpenAI builds for provider evaluation
Challenges Overcome
- Constraining a generative model to change only identity
- Cultural and demographic handling
- Latency, overload and cost
- Keeping event devices on the latest version
Outcome
Delivered
Roadmap
- Server-side generation queue for high-traffic events
- Activate the timeout-based fallback-model pipeline
- Automated retention policy for uploaded selfies
Impact
- A personalised, shareable Almarai-branded keepsake in one short on-device flow
- Culturally specific styling for hijab and niqab, and child and adult variants
- Output sized for standard photo prints
- Two AI providers evaluated in parallel builds