DermaVTO

Live Studio: https://aariv.me/dermavto/
Source Code: https://github.com/draarivpatel-ui/dermavto

Inspiration

Cosmetic shade matching online is usually a guess distorted by camera auto-exposure. DermaVTO treats shade matching as an explicit colorimetric measurement in CIE L*a*b* paired with Perfect Corp's YouCam Skin AI and Makeup VTO v2.0 endpoints.

What it does

CIE L*a*b*, Individual Typology Angle (ITA), & CIEDE2000 Ranking: Reads a skin sample or uploaded photo in sRGB, converts through linear XYZ to CIE L*a*b*, places the sample on the published ITA scale, and ranks 24 reference foundation shades by perceptual CIEDE2000 distance (Delta E 00).
Interactive Split-Screen Specimen & Chromophore Map: Drag the divider to compare the raw sample against either a separated melanin/erythema chromophore proxy map or a live L*a*b* foundation and lip finish virtual try-on.
YouCam API v2.0 Request Builder, Validator, & Response Inspector: Builds and validates exact request payloads for Perfect Corp's YouCam Skin Analysis and Makeup VTO v2.0 endpoints (enforcing non-mixed HD/SD actions, HTTPS source URLs, and 0-100 intensity bounds), normalizes score_info.json responses (surfacing raw_score alongside ui_score), and supports live browser execution with a user-supplied YouCam API key.

How we built it

Built in zero-dependency vanilla JavaScript (engine.js, render.js, youcam-live.js, app.js) with HTML5 Canvas, SVG, and 180+ automated unit and DOM smoke tests (node --test) verifying color conversions, CIEDE2000 against Sharma (2005) worked pairs, YouCam payload validation, and live task polling.