DEV Community

Magic.rb
Magic.rb

Posted on

AI-Powered Virtual Try-On App

#webdev #opensource #programming #beginners

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

Tech Description
Next.js 13+ App Router + React
TypeScript Safer, typed JavaScript
Tailwind CSS Utility-first CSS styling
Google Gemini API Flash experimental model
@google/gemini SDK For interacting with the API
Lucide React Clean, minimal icons
npm Package manager

🚀 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
Enter fullscreen mode Exit fullscreen mode

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

2. Install Dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

3. Add Your Gemini API Key

Create a .env.local file in the root:

# .env.local
GEMINI_API_KEY=YOUR_GOOGLE_GEMINI_API_KEY
Enter fullscreen mode Exit fullscreen mode

Replace YOUR_GOOGLE_GEMINI_API_KEY with a real key from Google AI Studio.

4. Start the Dev Server 

npm run dev
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

Error Response:

{
  "error": "Error message",
  "details": "Optional additional details"
}
Enter fullscreen mode Exit fullscreen mode

💭 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! 👨🏽‍💻✨

Top comments (0)