StyleLens AI Fashion Assistant

• 

  01-landing-page

• 

  02-selfie-upload

• 

  03-wardrobe-upload

• 

  04-select plan

• 

  05-style priority

• 

  06-data pre processing

• 

  07-processing

• 

  08-comparison-view

• 

  09-winner-analysis

• 

  10-styling-variations

💡 Inspiration

I've always been frustrated by online fashion shopping - spending hours browsing, adding to cart, waiting for delivery, trying on at home, and then dealing with the hassle of returns. When I discovered that 70% of online fashion purchases are returned and this costs the industry $550 billion annually, I knew I had found a problem worth solving.

The YouCam API Hackathon was the perfect opportunity to build something that could genuinely help both shoppers and retailers. I wanted to create more than just a "virtual try-on tool" - I wanted to build an AI fashion assistant that truly understands you.

🎯 What It Does

StyleLens combines YouCam's Apparel Virtual Try-On API with demographic AI styling to deliver:

• Realistic Virtual Try-On - See exactly how clothes look on YOUR body
• Style Match Scores (85-98%) - Transparent breakdown of why it works
• Personalized Recommendations - Gender and age-appropriate styling advice
• Smart Wardrobe Advisor - Compare multiple outfits side-by-side with AI ranking
• Occasion-Based Styling - Get advice for Work, Date, Party, Casual, Travel, or Interview

The key innovation: Most virtual try-on tools stop at the visual. StyleLens answers "Does it look good?" AND "Should I wear this for my specific situation and style?"

🛠️ How I Built It

Architecture

• Frontend: Next.js 16 (App Router) + React 19 + TypeScript
• Styling: Tailwind CSS v4 + Framer Motion for animations
• API Integration: YouCam Apparel VTO API with 2-stage upload + async polling
• State Management: React Context API for onboarding flow

YouCam API Integration Journey

The integration had three key challenges:

1. Two-Stage File Upload

// Stage 1: Request upload slot
POST /s2s/v2.0/file/cloth-v3
Response: { file_id, upload_url }

// Stage 2: Upload binary to pre-signed URL
PUT <upload_url>
Body: File binary data

// Create try-on task
POST /s2s/v3.0/task/cloth
Body: { src_file_id, ref_file_id, garment_category: "auto" }
Response: { task_id }

// Poll until complete (smart backoff strategy)
GET /s2s/v3.0/task/cloth/{task_id}

Smart Wardrobe Advisor
I implemented a multi-outfit comparison system that:

Processes 2-3 wardrobe items in parallel
Ranks outfits with differentiated AI scores (98.5%, 96.2%, 94.1%)
Generates unique styling reasons for each outfit
Displays side-by-side comparison with gold "AI PICK" badge

Built With

• ai
• api-integration
• axios
• computer-vision
• demographic-ai
• e-commerce
• fashion-tech
• framer-motion
• generative-ai
• hackathon
• machine-learning
• next.js
• node.js
• perfect-corp
• personalization
• react
• responsive-design
• retail-tech
• style-recommendation
• tailwind-css
• typescript
• ux-design
• virtual-try-on
• web-app
• youcom-api