auratone-skin-vto

AuraTone unites YouCam Skin AI & Apparel VTO to analyze your undertones from a selfie, map your seasonal palette, and virtually render perfectly harmonized outfits directly onto your portrait

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

🌟 Inspiration

Online shopping suffers from a massive disconnect: fashion and beauty are treated in isolation, completely separated from an individual’s personal biology.

We have all experienced the "model bias" trap: an outfit looks radiant on an editorial model, but when tried on in real life, the color washes out your complexion and makes you look tired. Color and appearance mismatches drive the vast majority of apparel dissatisfaction.

Meanwhile, the global rise of Personal Color Theory has shown that people crave scientific guidance on which palettes genuinely complement their natural skin undertones. We asked ourselves: What if an AI platform could analyze your skin undertone through computer vision, map your personal seasonal color harmony, and virtually render flattering outfits directly onto your portrait?

That vision inspired AuraTone.

💡 What It Does

AuraTone transforms virtual try-on into an intelligent, color-scientific styling engine:

  1. Biometric Skin & Undertone Diagnostics: Powered by the YouCam Skin AI API, AuraTone analyzes facial luminance, melanin depth, and warm vs. cool sub-pigment balance in under two seconds.
  2. Personal Color Mapping: Automatically categorizes users into their Seasonal Color Archetype (Bright Spring, Soft Summer, Deep Autumn, True Winter), highlighting harmonious wardrobe color frequencies and flagging clashing shades.
  3. Generative Apparel Virtual Try-On (VTO): Using the YouCam Generative Apparel VTO API, curated garments are realistically rendered onto the user's portrait. An interactive Before / After Split Slider lets users evaluate the complexion-brightening effect in real time.
  4. Harmonized Color Coordination: Coordinates apparel with matching cosmetic shades and undertone-aligned metallic jewelry accents (Silver/Platinum for Cool, Warm Gold for Warm).
  5. Agentic Stylist Copilot ("Ask the Stylist"): An AI assistant that explains the optical science of why specific fabric wavelengths elevate the user’s facial contrast.
  6. Zero-Friction Judge Personas: Pre-loaded with diverse test personas (Elena: Cool Fair, Aaliyah: Warm Deep, Maya: Neutral Olive) alongside webcam and photo upload support, ensuring instant demonstration under any lighting conditions.

📐 The Color Science & Math

To bridge dermatological computer vision with seasonal colorimetry, AuraTone uses perceptual color spaces ($L^a^*b^$):

1. Undertone Angle

Skin undertone balance ($U_{tone}$) is calculated across the chromatic opponent dimensions $a^$ (green–red) and $b^$ (blue–yellow):

$$U_{tone} = \arctan\left(\frac{b^_{skin}}{a^_{skin}}\right)$$

  • $U_{tone} > \theta_{warm} \implies$ Warm Palette (golden/peach dominance)
  • $U_{tone} < \theta_{cool} \implies$ Cool Palette (pink/blue dominance)

2. Chromatic Harmony Distance ($\Delta E^*$)

To ensure a fabric color complements skin luminance rather than clashing with it, we calculate perceptual Euclidean distance:

$$\Delta E^_{ab} = \sqrt{(\Delta L^)^2 + (\Delta a^)^2 + (\Delta b^)^2}$$

The resulting Harmony Score reflects optimal optical contrast without chromatic fatigue:

$$H_{score} = 100 \times \left(1 - \frac{|\Delta E^*{ab} - \mu{target}|}{\sigma_{target}}\right)$$

🛠️ How We Built It

  • Computer Vision & AR:
    • YouCam Skin AI API (/api/v1/skin-analysis): Ingests portrait telemetry to extract undertone, skin depth, radiance, and contrast.
    • YouCam Generative Apparel VTO API (/api/v1/apparel-vto): Generates high-fidelity garment renders fitted to the user's photo.
  • Backend Architecture:
    • Node.js & Express: Lightweight proxy handling API orchestration and multipart uploads.
    • SHA-256 Deduplication Cache: Computes cryptographic hashes of incoming portraits to deliver instant cached responses and conserve hackathon API units.
    • Resilient Simulation Engine: High-definition simulation fallback ensuring zero crashes during live judging or video recording.
  • Frontend Experience:
    • React 18 + Vite: Lightning-fast state management powered by Zustand.
    • Luxury Design System: Custom Vanilla CSS design tokens featuring Obsidian (#090A0F), Champagne Gold (#D4AF37), Electric Violet accents (#8B5CF6), and glassmorphic blurs.
    • Interactive Canvas Slider: Fluid pointer- and touch-responsive before/after split slider.

🚧 Challenges We Faced

  1. Translating Clinical Skin Data to Fashion Theory: Skin AI outputs clinical parameters (surface radiance, spots, RGB values). Translating these numbers into seasonal color theory required building a dedicated colorimetric mapping layer.
  2. API Credit Conservation & Latency: Chaining deep-learning analysis with generative rendering can cause network delays. We resolved this through SHA-256 caching and pre-computed hero personas for sub-second evaluations.
  3. Interactive Split-Screen Alignment: Engineering a seamless, jitter-free before/after slider that aligns the raw portrait and try-on output across all screen sizes.

🏆 Accomplishments That We're Proud Of

  • Unifying Both Hackathon Tracks: Successfully chaining Skin AI with eCommerce VTO so biological diagnostics directly guide generative fashion.
  • The Tactile Before/After Slider: Creating a responsive, tactile comparison tool that visibly demonstrates color harmony.
  • Zero-Friction Evaluation: Providing pre-validated diverse personas so judges can test the full experience instantly, even without camera access.

📚 What We Learned

  • Biometrics Beat Questionnaires: Computer vision provides objective ground truth that eliminates the ambiguity of static survey quizzes.
  • Multi-Modal API Synergy: Combining two specialized computer vision APIs unlocks exponential user value compared to running either in isolation.
  • Luxury Micro-Interactions: Subtle aesthetic details—telemetry scanners, split sliders, and curated typography—elevate a hackathon demo into an enterprise-grade product.

🔮 What's Next for AuraTone

  • E-Commerce Platform Integrations: Packaging AuraTone as a turnkey SDK for luxury fashion retailers.
  • Live Video AR Stream: Expanding the split-slider to real-time 30fps webcam video try-on.
  • "Digital Closet Scan": Enabling users to photograph existing clothes in their wardrobe to receive instant skin-harmonized styling suggestions.

Built With

Share this project:

Updates

Submission history