This is a submission for the Gemma 4 Challenge: Build with Gemma 4
What I Built
Pair is a personal stylist in your pocket. You take a photo of something you already own — a jacket, a pair of jeans, whatever — and the app finds you a complementary piece from a catalogue of 44,000 products. Then it generates an editorial fashion photo showing both items styled together on a model, so you can actually see how the outfit looks before you buy anything.
The product catalogue is the Myntra fashion dataset (~44k products), available at kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset.
The app is a full-stack TypeScript project — Vite + React on the frontend, Hono on Node.js on the backend. The interesting part is the AI pipeline: I send the uploaded image to Gemma 4, which returns structured JSON — category, gender, style tags, dominant colour. Then I query MongoDB with a $match + $sample aggregation to pull 30 random candidates from the right complementary category, and send those to Gemma 4 again to pick the best pairing. Finally, Gemini 2.5 Flash generates the editorial look image.
Upload a photo
The app finds a match
Generate an editorial image of both items on a model
Demo
Code
Pair.
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.
How it works
- Upload a photo of a top, bottom, shoes, or accessory — optionally add a hint if the photo contains multiple pieces
- Analyze — Gemma 4 identifies the piece: category, gender, style, palette
- Confirm — review the AI's interpretation; re-analyse with a corrected hint if needed
- Match — a complementary item is randomly sampled from the catalogue, then Gemma 4 picks the best fit
- 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 |
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:
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.
Top comments (0)