Inspiration

Choosing clothing online, in a store, or from a style idea still involves a frustrating guess: will it suit my body, my skin tone, and my style? Smart Mirror makes that decision visual before purchase.

What it does

Smart Mirror is a mobile-first virtual try-on experience. A person creates a lightweight personal profile with familiar clothing sizes, shoe size, body characteristics, and optional face or body references. They can then:

  • choose an item from the in-app shop;
  • upload a garment from an e-commerce product page;
  • photograph a garment on a mannequin or hanger in a physical store;
  • save garments they already own in a personal wardrobe.

The app generates a personalized fashion preview, lets the user compare looks, and keeps favorite results in a style studio. It is designed for everyday mobile use and can later be embedded on partner retail sites through a "See it on me" widget.

How we use YouCam

YouCam is central to the personalized experience. Smart Mirror uses Perfect Corp YouCam Skin AI to analyze face and skin context from the user's reference image. That context helps preserve the user's natural skin tone and identity cues in the virtual try-on result.

We combine this with an Apparel Virtual Try-On workflow: the selected garment is rendered on the user's personalized visual profile. The result is a single mobile journey where skin-aware personalization and apparel visualization work together instead of being separate beauty and fashion tools.

How we built it

Smart Mirror is a mobile-first PWA built with React, Next.js, and Firebase. A Python backend coordinates profile media, avatar generation, virtual try-on generation, and result status. Google Gemini supports image-generation steps. Backblaze B2 stores original media and generated results with traceable manifests. The app includes a sample retail catalog, an upload flow, and a wardrobe/studio view.

Challenges

The challenge was to keep a powerful visual pipeline understandable on a phone while treating identity references and garment images carefully. We made face and body references optional, used familiar size choices instead of complex measurements, and kept the try-on path focused: choose a garment, preview it on yourself, then save or compare.

What we learned

A useful virtual try-on is not only about placing clothes on a generic model. Skin tone, facial context, usual sizes, and the shopper's own reference all matter. YouCam Skin AI gives Smart Mirror a stronger personalization layer for realistic fashion previews.

What's next

We will improve garment fit guidance, add more YouCam-powered face and skin-aware styling features, and release the retailer widget/API so e-commerce partners can offer "See it on me" directly on product pages. Smart Mirror helps shoppers buy with more confidence and helps retailers reduce uncertainty before checkout.

Built With

  • backblaze-b2
  • e-commerce
  • fashion
  • firebase
  • genblaze
  • google-gemini
  • pwa
  • react
  • skin-ai
  • virtual-try-on
  • youcam-api
Share this project:

Updates