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.

StatusDelivered (2026)

RoleFull-Stack & AI Engineer

PlatformsMobile 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 TransferLocked Brand PlatesFirestore-Managed PromptsCulturally Aware StylingPrint-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

ReactTypeScriptViteTailwind CSSshadcn/uii18nextHTML Canvas

Backend

Cloud FirestoreFirebase StorageFirebase Hosting

Services

Google Gemini Image GenerationGemini Files APIOpenAI 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

1Image-to-image generation pipeline
2Prompt engineering for identity and brand fidelity
3Profile-based reference plates and prompt branches
4Print-ready canvas post-processing
5Error handling, retries and attempt limits
6Parallel Gemini and OpenAI builds for provider evaluation

Challenges Overcome

Constraining a generative model to change only identityCultural and demographic handlingLatency, overload and costKeeping 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

ASRNOVA