This is a submission for the Gemma 4 Challenge: Build with Gemma 4
What I Built
A clothing pairing app — upload a photo of one piece you own, get a complementary match from a curated catalogue, then see both styled together in an AI-generated editorial image.
The product catalogue is the Myntra fashion dataset (~44k products), available at kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset.
Demo
Code
Pair.
A clothing pairing app — upload a photo of one piece you own, get a complementary match from a curated catalogue (which is downloaded at https://www.kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset), then see both styled together in an AI-generated editorial image.
How it works
- Upload a photo of a top, bottom, shoes, or accessory
- Analyze — Gemma 4 identifies the piece: category, gender, style, palette
- Match — a complementary item is selected from ~44k Myntra products via MongoDB + Gemma 4
- Lookbook — Gemini generates a fashion editorial photo of both pieces styled on a model
Stack
| Layer | Tech |
|---|---|
| Frontend | Vite + React + TypeScript + Tailwind CSS v4 |
| Backend | Hono on Node.js |
| AI | Google GenAI SDK (Gemma 4 + Gemini) |
| Database | MongoDB (Myntra product dataset) |
| Bot protection | Google reCAPTCHA v3 |
Prerequisites
- Node 24 (use
nvm use—.nvmrcis included) - MongoDB running locally
- Google AI Studio API key — aistudio.google.com
- Google reCAPTCHA…
How I Used Gemma 4
Gemma 4 (gemma-4-31b-it) is used for two tasks where we need text output from a structured prompt, not image generation:
Clothing analysis — given an image, return a JSON object with category, gender, style, colors, etc.
Match selection — given 30 product candidates from MongoDB, pick the best one and return a JSON object with the index, match score, and stylist note.