DEV Community

Cover image for AI Fashion Playground
Anshdeep Singh
Anshdeep Singh

Posted on

AI Fashion Playground

#devchallenge #googleaichallenge #ai #gemini

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

AI Fashion Playground is a web platform that reimagines the personal wardrobe experience. It allows users to mix and match outfits from their own closet or e-commerce sites on a realistic, AI-generated avatar of themselves.

The applet solves several key problems for fashion consumers:

  1. The "Try Before You Buy" Gap in E-commerce: It provides a hyper-realistic virtual try-on, allowing users to see how clothes actually look on them before buying, which can drastically reduce costly and wasteful returns.
  2. The "Full Closet, Nothing to Wear" Paradox: An AI stylist feature rediscovers and curates new outfits from the user's existing wardrobe, promoting sustainable fashion choices and maximizing the value of clothes they already own.
  3. The Inaccessibility of Personal Styling: It acts as a free, on-demand personal stylist that understands a user's unique wardrobe, style preferences, and daily needs to provide expert guidance for any occasion.

Demo

Screenshots

Landing Page

Freestyle AI Playground

Get Ready With Me using AI

How I Used Google AI Studio

Google AI Studio was not just a tool for testing; it was the central workbench where the AI-driven soul of this application was forged from scratch. Every core feature was born from an iterative cycle of prototyping, prompt engineering, and code generation within the AI Studio environment.

  1. Engineering the Virtual Try-On Engine: The most complex feature is generating a realistic image of the user wearing different clothes. I used AI Studio to master the gemini-2.5-flash-image-preview model.

    • Prototyping: I started by uploading a sample avatar and a few clothing images directly into the Studio's multimodal prompt interface.
    • Prompt Engineering: My critical challenge was ensuring the model preserved the user's identity. Through dozens of iterations in AI Studio, I engineered the core instruction found in services/geminiService.ts: **Crucially, do not alter the person's face, hair, or body shape. They must remain identical to the first image.** This precise instruction was the key to achieving realistic, true-to-life results.

  2. Building the AI Stylist's Brain with Structured Output: The "Get Ready With Me" feature required the AI to think like a stylist and provide structured, usable data.

    • Schema Definition: I used AI Studio's structured output feature to design a precise JSON schema for the gemini-2.5-flash model. This is visible in the selectOutfitFromWardrobe function, where the AI is required to return a { selection: string[], reasoning: string, affirmation: string } object. Prototyping this in the Studio meant I never had to write fragile string-parsing logic in my app.
    • Persona Crafting: I fine-tuned the stylist's personality directly in the AI Studio prompt, crafting the persona of a "fun, encouraging, and stylish best friend" and testing its conversational output until it felt just right.

  3. Automating the Digital Wardrobe (Multimodal Vision): To make the wardrobe "smart," I needed to analyze and tag every clothing item.

    • Image-to-JSON: I leveraged AI Studio to build a prompt for gemini-2.5-flash that takes a clothing image as input and returns a structured JSON object with its category, color, season, and style.
    • Seamless Workflow: This entire workflow—from experimenting with the image-and-text prompt in AI Studio to using "Get Code" to implement the analyzeClothingItem function—allowed me to build a powerful, automated feature in a fraction of the time.

In essence, AI Studio provided a seamless bridge from creative ideation to production-ready code. It allowed me to visually build and validate complex multimodal prompts and then translate them directly into the application's service layer, making it the indispensable core of my development process.

Multimodal Features

AI Fashion Playground is built on a foundation of several interconnected multimodal features that create a seamless and intelligent user experience.

  1. Multimodal Virtual Try-On (Image + Text → Image)
    This is the app's centerpiece. It takes multiple images as input (a photo of the user, photos of clothing items) and a text prompt (describing the mood, scene, or style) to generate a single, new, coherent image. This powerful image-and-text-to-image capability is what allows users to visualize themselves in new outfits.

  2. Automated Wardrobe Intelligence (Image → Structured Text)
    When a user uploads a piece of clothing, the app uses gemini-2.5-flash to analyze the image and output a structured JSON object containing its category, color, style, and ideal season. This image-to-text functionality transforms a simple image library into a smart, filterable, and machine-readable wardrobe, which is the knowledge base for the AI stylist.

  3. Conversational Styling Pipeline (Text → JSON → Image)
    The "Get Ready With Me" feature is a multi-step multimodal workflow:

    • Step 1 (Text → JSON): The user provides a natural language text prompt describing an event (e.g., "a first date at a cozy cafe"). The AI processes this text, cross-references it with the user's wardrobe data, and outputs a JSON object containing the names of the selected clothing items and a text-based rationale for its choice.
    • Step 2 (Images + Text → Image): The application then programmatically gathers the images for the selected items, the user's avatar image, and the AI's styling advice as a text prompt. It feeds all of this into the image generation model to create the final styled look. This pipeline creates a magical, conversational experience that feels like collaborating with a real fashion expert.

  4. Iterative Image Refinement (Image + Text → Image)
    After an image has been generated, users aren't locked in. They can provide additional text prompts (e.g., "change the background to a park at sunset") to modify the existing image. This gives users fine-grained creative control and makes the process interactive and fun.

By integrating these multimodal features, AI Fashion Playground moves beyond a simple utility and becomes a creative partner, helping users unlock the full potential of their wardrobe and express their unique style with confidence.

💖 Built for Everyone

AI Fashion Playground believes fashion should be fun, inclusive, and accessible to everyone. Whether you're exploring your personal style, planning outfits for special occasions, or just having creative fun – this platform is designed to celebrate your unique identity and boost your confidence.

Made with ❤️ for the fashion-forward and the style-curious alike.

Top comments (0)