TrendFit

TrendFit is your digital dressing room. Upload your photo, get an instant AI model, and try on outfits in seconds. See real fits from every angle, shop confidently, and skip the hassle of returns.

Comment

Virtual Try-On AI --- README

Inspiration

The inspiration for this project came from the frustration of online shopping, where outfits look perfect on professional models but rarely translate clearly to real people. Generative AI bridges that gap by helping users visualize clothing on themselves, making the experience more confident, personal, and engaging.

What I Learned

Advanced Prompt Engineering\ Crafting prompts that accurately replace clothing without altering identity, lighting, or background required precision and experimentation.

Managing Asynchronous Operations\ AI image generation takes time, so the UI uses animations, responsive states, and dynamic loading messages to maintain user engagement.

Frontend Technologies\ The app is powered by React, TypeScript, and Tailwind CSS, with Framer Motion for smooth, modern animations.

Real Web Issues (CORS)\ External clothing images caused CORS errors, solved by fetching them as blobs:

puts "Fetch image → convert to blob → send to AI"

How I Built It

This application uses Google's gemini-2.5-flash-image model for all image generation tasks.\ The frontend is a single-page React app styled with Tailwind CSS and animated using Framer Motion.

Core Workflow

  1. Model Generation -- Creates a realistic digital twin of the user.\
  2. Virtual Try-On -- Replaces existing clothing with selected garments.\
  3. Pose Variation -- Generates new angles such as side or profile views.

Challenges I Faced

Prompt Nuance\ Minor prompt changes could alter facial features or backgrounds, requiring careful fine-tuning.

Keeping the UI Responsive\ Animated loaders and optimized state updates ensure a smooth experience despite the heavy AI processing.

Image Handling\ CORS issues were solved with blob-based image fetching.

Safety & Responsibility\ A user agreement discourages harmful or inappropriate use.

Math Example

Inline math: ( x = 3.14 )

Displayed math: $$ f(x) = \frac{1}{1 + e^{-x}} $$

Built With

Share this project:

Updates