**MirrorFit**

Analyze your skin and body measurements, discover complementary colors and fits with purchase links, and virtually try them on via YouCam VTO before you buy.

Comment

The Problem

Shopping for clothing online remains a guessing game. Consumers struggle to answer two fundamental questions before making a purchase:

  1. "Will this color and style actually complement my skin tone and body shape?"
  2. "How will this clothing item look on me once I wear it?"

Current e-commerce platforms show clothes on studio models under professional lighting. Users end up ordering clothes that clash with their visual undertones or fit awkwardly, leading to frustration and high return rates.

The Idea

MirrorFit is an AI-powered personal fashion intelligence platform that combines YouCam Skin AI and YouCam Apparel Virtual Try-On (VTO) into one continuous decision experience.

Rather than treating skin analysis and virtual try-on as disconnected features, MirrorFit connects them:

Understand how I look → calculate what complements me → let me see it on a human model → evaluate why it works → provide purchase links.

How It Works

SELFIE & PHOTO UPLOAD
          ↓
YOUCAM SKIN AI DIAGNOSTICS
(Tone Uniformity, Clarity, Texture, Undertone)
          ↓
BODY MEASUREMENT FIT CALCULATOR
(Height, Chest, Waist, Shoulder Width, Silhouette)
          ↓
PERSONALIZED COLOR PALETTE & MEASUREMENT MATCHES
(Olive, Rust, Camel, Navy, Cream with Direct Merchant Purchase Links)
          ↓
INTERACTIVE VIRTUAL STUDIO CANVAS
(Select cut-out garments: Jacket, Skirt, Sunglasses, Top, Heels, Bag)
          ↓
YOUCAM APPAREL VIRTUAL TRY-ON (VTO)
(Renders transformed full-body human model wearing the selected items)
          ↓
MIRRORFIT STYLE MATCH SCORE & RATIONALE
(Color Harmony 94/100, Contrast 89/100, Style Match 93/100)

Skin AI + Apparel VTO Integration

MirrorFit explicitly connects Perfect Corp's two primary APIs:

  1. YouCam Skin AI Integration:

    • The user uploads a front-facing selfie.
    • The server calls YouCam Skin AI (/api/youcam/skin-analysis).
    • The diagnostic engine analyzes skin characteristics across 15+ concerns (Tone Uniformity, Visual Clarity, Surface Texture, Micro-Redness, Pore Refinement).
    • An overall Skin Index score (e.g., 86 / 100) and undertone category (Warm, Rich, Balanced) are derived to guide fashion styling.

  2. YouCam Apparel VTO Integration:

    • The user enters their physical dimensions (Height, Chest, Waist, Shoulder Width) and selects clothing cut-outs in the Interactive Dressing Studio Canvas.
    • The server passes the person image and garment item image to YouCam Apparel VTO (/api/youcam/apparel-vto).
    • The API generates a transformed full-body human model wearing the selected outfit, validating the recommendation visually before purchase.

Our Recommendation Approach

MirrorFit does not claim that YouCam Skin AI directly mandates specific clothing purchases. Instead, MirrorFit acts as an intelligence bridge:

  • YouCam Skin AI provides objective visual skin analysis.
  • MirrorFit's Fit Engine processes skin undertones + user body measurements (drop ratio, shoulder taper).
  • Merchant Matcher pulls complementary clothing items with exact size recommendations (e.g., Size M / 40R) and direct store purchase links (Uniqlo, Zara, ASOS).
  • YouCam Apparel VTO renders the visual proof.

Why This Matters

  • For Consumers: Eliminates style anxiety by offering objective color harmony guidelines and instant visual proof.
  • For Retailers: Reduces return rates driven by poor color matching or fit uncertainty by allowing users to test clothing virtually prior to checkout.

How We Built It

  • Framework: Next.js 16 App Router with React 19 and TypeScript.
  • Styling System: Custom Refined Neo-Brutalist UI design system built with Tailwind CSS, solid 3px slate borders (border-3 border-[#0F172A]), tactile offset drop shadows (shadow-[5px_5px_0px_0px_#0F172A]), electric lime #D4FF00 highlights, and high-contrast typography on a warm #FFF9F0 cream background.
  • API Security: Server-side proxy API routes (app/api/youcam/skin-analysis/route.ts and app/api/youcam/apparel-vto/route.ts) protecting secret API keys via YOUCAM_API_KEY in .env.local.
  • Fallback Resilience: Includes deterministic high-fidelity diagnostic and try-on fallback engines so judges can experience the full interactive workflow even if API keys are unconfigured.

Technical Challenges

The primary challenge was managing the asynchronous nature of image transformation APIs and maintaining seamless UI responsiveness during multi-step image proxying. Converting base64 image data to multipart S3 uploads, handling polling task IDs, and ensuring clean error recovery required building robust server-side abstractions (lib/youcam/skin-analysis.ts and lib/youcam/apparel-vto.ts).

What We Learned

Working with Perfect Corp's APIs highlighted the power of quantitative visual diagnostics in e-commerce workflows. We learned that combining computer vision skin analysis with generative apparel try-on creates a far more compelling user experience than offering either technology in isolation.

What's Next

  • Live real-time camera feed integration for instant selfie capture.
  • Expanded multi-garment layering (stacking coats over sweaters and scarves simultaneously).
  • E-commerce browser extension allowing users to test clothing from any online store using MirrorFit VTO on the fly.

Show The API Integration Clearly

USER SELFIE & BODY MEASUREMENTS
               ↓
    YOUCAM SKIN AI API
(Extracts Undertone, Clarity & Tone Uniformity)
               ↓
  MIRRORFIT STYLING ENGINE
(Generates Palette, Sizes & Store Purchase Links)
               ↓
   YOUCAM APPAREL VTO API
(Transforms Full-Body Human Model Wearing Outfit)
               ↓
  MIRRORFIT STYLE MATCH (92/100)

Built With

Share this project:

Updates

Submission history