Winds AI Image Studio

A web-based application that leverages the Google Gemini Vision model to provide a suite of powerful image editing and generation tools.

Project Background

This project was built on the launch day of Google's Gemini 2.5 Flash Image Preview model (internally nicknamed "nano banana" which is now more famous then official name)by me in 1-2 hours to explore its capabilities across different domains and discover practical use cases. The goal was to understand how the model performs in various creative and practical applications, from virtual try-on experiences to interior design generation.

From my testing i concluded that it excelled at image editing in most usecases , except in generating long white female wedding dresses that are of christian style.

Struggles sometimes in adhering to exact instructions( if complex) and chnaging camera perspectives.

Key Features

Winds AI Image Studio is organized into four distinct studios, each tailored for specific creative tasks:

👕 Apparel Studio

• Virtual Clothing Try-On: Upload a photo of a person and a garment to see them wearing the item. The tool intelligently handles different clothing types like tops, bottoms, outerwear, and full-body outfits.
• Outfit Extractor: Isolate and extract individual clothing items from a single photograph.

👓 Eyewear Studio

• Virtual Glasses Try-On: See how different glasses look on a person. The model generates both frontal and three-quarter views for a realistic preview.
• 3D View Generator: Create a multi-angle style sheet (front, side, three-quarter, top-down) from a single product image.

🏠 Interior Studio

• AI Interior Designer: Transform a 2D floor plan into a fully furnished, photorealistic top-down 3D rendering based on a descriptive prompt.
• First-Person View: Generate an eye-level, first-person photograph from a top-down interior design, allowing you to step inside the virtual space.

🎨 Creative Studio

• General Image Editor: Perform a wide range of photo edits by describing the desired changes in natural language.

Technology Stack

• Frontend: React, TypeScript, Vite
• AI: Google Gemini Vision API (@google/genai)
• Styling: Tailwind CSS (based on class names seen in App.tsx)

Getting Started

To run the project locally, follow these steps:

Prerequisites

• Node.js (v18.x recommended)
• A package manager like npm or pnpm.

Installation

1. Clone the repository:

   git clone <repository-url>
   cd winds-ai-image-studio

2. Install dependencies:

   npm install

3. Set up your API Key: You need a Google Gemini API key to use the application. You can either:

   • Create a .env.local file in the project root and add your key:

     GEMINI_API_KEY=your_api_key_here
     

   • Or, enter the API key directly in the input field within the application's UI. The key will be stored in your browser's local storage for convenience.

4. Run the development server:

   npm run dev

The application should now be running on http://localhost:5173.

LinkedIn Post

"Update on nano-banana model's/ gemini-2.5-flash-preview's potential use cases, this app can let you try on clothes, make outfit style sheets, try on specs/glasses, generate interior designs from floor plans and many more possibilities... Clone this Ai Studio app and try it yourself" - Meet Limbani

Screenshots

Here are some examples of the application's interface and features:

Apparel Studio - Virtual Clothing Try-On

Apparel Studio - Outfit Extractor

Eyewear Studio - Glasses Try-On

Eyewear Studio - 3D View Generator

Interior Studio - AI Interior Designer

Creative Studio - General Image Editor

Example Results

Here are examples of actual AI-generated outputs from the application:

Virtual Clothing Try-On Result

Outfit Extraction Results

Glasses Try-On Results

Interior Design from Floor Plan