Open Source Gemini powered AI-Powered Virtual Try-On App

Out of sheer curiosity, I built an AI-powered virtual try-on app a lightweight open-source project that lets you upload your photo and a clothing item and see what it might look like on you. No fancy cameras or 3D scanners, just a bit of AI magic under the hood!

It's built with Next.js and uses Google's Gemini API (experimental Flash model) to generate try-on previews. If you're curious about generative AI, want to learn about handling images in React/Next.js, or just enjoy experimenting, this project is a fun place to start.

Check it out here:
🔗 GitHub Repository

✨ Features

• 👤 User Image Upload – Add your own photo.

• 👕 Clothing Image Upload – Upload a shirt, jacket, or any apparel.

• 🖼️ Image Previews – See your selected images before generating results.

• 🧠 AI-Powered Try-On – Uses Google Gemini to generate a virtual try-on.

• ✅ Result Display – Get a final AI-generated image preview.

• ⏳ Loading Indicator – Visual feedback while the AI does its work.

• 🔄 Reset Button – Quickly clear everything and start fresh.

• 🎨 Clean UI – Built with Tailwind CSS for simplicity and responsiveness.

🧰 Tech Stack

🚀 Getting Started Locally

Here's how to get this running on your machine:

1. Clone the Repo

git clone https://github.com/oyeolamilekan/gemini-ai-tryon.git
cd gemini-ai-tryon

Or if you already have the code locally, navigate to the root directory.

2. Install Dependencies

npm install

3. Add Your Gemini API Key

Create a .env.local file in the root:

# .env.local
GEMINI_API_KEY=YOUR_GOOGLE_GEMINI_API_KEY

Replace YOUR_GOOGLE_GEMINI_API_KEY with a real key from Google AI Studio.

4. Start the Dev Server

npm run dev

Visit http://localhost:3000 to view the app.

🧪 How to Use

1. Upload your photo.

2. Upload a clothing item image.

3. Click "Try It On!"

4. Wait a few seconds while the AI works.

5. View your AI-generated try-on image.

6. Click Reset to start over.

🧵 API Details

Endpoint: POST /api/tryon

Request Body: FormData containing:

• userImage: The user's photo

• clothingImage: The clothing item photo

Success Response:

{
  "image": "data:image/png;base64,...",
  "description": "Optional description"
}

Error Response:

{
  "error": "Error message",
  "details": "Optional additional details"
}

💭 Why I Built This

I've been curious about how AI could be applied to fashion and e-commerce. What started as an experimental project ended up being a fun way to learn how to combine frontend frameworks, generative models, and image processing into a single app.

It's open-source, simple, and meant to be hacked on.

🧑‍💻 Try It, Fork It, Break It!

Feel free to clone the repo, tinker with the UI, swap in a different AI model, or build your own version of a virtual fitting room. I'd love to see what you make!

GitHub: github.com/oyeolamilekan/gemini-ai-tryon

🙌 Let's Connect

If you try it out or build something cool with it, tag me or drop a comment!

Happy hacking! 👨🏽‍💻✨