-
-
Weekly check-in: Hair Density Detection tracks fullness (demo persona Elena 2.53 to 1.00); changes under 0.5 are treated as noise.
-
Your hair card: Skin Tone, Hair Length and Hair Density APIs become wig shade, length and cap density, plus a brow pencil shade.
-
My plan: one printable page for the wig fitter or hairdresser, with the hair card and favourite looks.
-
Skin check-in: Skin Analysis SD raw scores; only changes above the measured noise are called noticeable (demo photos AI-generated).
-
Ahead: measure your hair while it is still there, then try wigs on your own photo that keep your own colour.
-
Home: before, decide, during. Demo persona Elena has AI-generated photos and real YouCam API results.
-
Before/after slider: AI Hairstyle Generator v2.1 with hair_color 'src' keeps your own hair colour.
-
Try your options: wigs and a short cut (Hairstyle Generator), new colour (Hair Color), your own hat photo (Hat VTO), brows (Makeup VTO).
Inspiration
Hair loss usually starts two to three weeks after the first chemotherapy cycle (American Cancer Society). Those weeks are when people choose a wig, decide whether to cut their hair short and look for head coverings. Most do it from memory, from an old phone photo, or in a shop on a bad day.
A wig looks like you when it matches your colour, your length and how full your hair is. Those are exactly the things you can still measure before treatment starts, and exactly what Ahead measures.
What it does
- Your hair today: three photos become a hair card for the wig fitter:
- your exact shade (you tap your hair in the photo);
- your length, translated into wig length;
- your fullness, translated into wig cap density;
- the brow pencil shade that matches you.
- Try your options, on your own photo:
- wigs that keep your own colour;
- the short cut many people choose before shedding starts;
- a new colour;
- a hat or scarf you photograph in a shop;
- fuller brows in your pencil shade;
- optionally, and only if you ask, a private preview of yourself without hair.
- Weekly check-in: one hairline photo and one close-up track:
- hair density, which tells you when to cut or switch to the wig;
- skin hydration, redness, smoothness and radiance.
You get gentle, sourced care tips, plus the American Cancer Society's own list of when to call your care team.
- My plan: one printable page for the wig fitter, the hairdresser or whoever is helping you.
Try it with Elena, a demo persona. Her photos were generated with YouCam's AI Image Generator to show three weeks of treatment. Every number and preview you see is a real YouCam API result on those photos.
Why it matters for eCommerce
- Wig shopping by numbers: the hair card turns measurements into the attributes a wig is sold by (an exact shade you tap on your own hair, length, cap density), so a retailer can match products instead of asking a stressed customer to guess.
- Try before you buy, on your own face: wig styles, colours, brows and any hat or scarf you photograph in a shop are previewed on your photo before you pay.
- A plan to take to the shop: one printable page with shade, length, density and favourite looks for the wig fitter.
Try it in one minute (for judges)
- Open the live app and choose "See it with a demo persona": no photos and no API units needed. Every number and preview is a stored real YouCam API result.
- To run it live, choose Start and add three photos. Live calls are capped per visitor and per day to protect the free units; if a cap is reached the app says so and the demo still works.
How we built it
- Eight YouCam APIs run in the app (a ninth, AI Image Generator, was used offline to create the demo persona):
- Skin Tone Analysis
- Hair Length Detection
- Hair Density Detection
- Skin Analysis (SD: moisture, redness, texture, radiance)
- AI Hairstyle Generator v2.1 (
hair_color: "src"keeps your colour) - Hair Color
- Hat VTO (the reference is the visitor's own product photo; it returns a new full-length photo of you wearing it)
- Makeup VTO (eyebrows)
- Server: a Cloudflare Worker serves the app and proxies the API.
- The key is a Worker secret.
- Only whitelisted features and parameters are accepted.
- The server builds every upstream request body itself, validates every request against the whitelist and rejects browser calls from other origins.
- Daily unit budgets per visitor and for the whole site live in Workers KV.
- Photos: they go straight from the browser to YouCam's presigned upload URL. Polling backs off, with at most two tasks in flight, to respect the 250-requests-per-5-minutes limit.
- Privacy: as soon as a result is back, Ahead calls
task/delete, removing the photo and the output from YouCam. Everything else lives in the browser (IndexedDB). Check-in photos are not kept at all, only the numbers.
Measuring honestly
We tested the API before trusting it:
- Skin scores:
- We took six versions of the same face (brighter, darker, warmer, cropped, heavier JPEG). The scores moved by at most 2.6 points (SD ≤ 0.97).
- The 95 % threshold for a difference between two check-ins is about 2.7 points. Real photos also vary in pose, so Ahead only calls a change "noticeable" above 5.
- We track
raw_score, because the docs sayui_scoreis adjusted upwards to make users feel better.
- Hair density:
- Identical files give identical results, but re-saving, cropping or brightening a photo moves the score by about 0.12 (2.44–2.72).
- That flips the label between "Medium" and "High", so Ahead tracks the number, treats changes under 0.5 as noise, and says "between medium and heavy" when a wig recommendation sits on a boundary.
- Hair colour: the analysis returns one of a handful of families. It called Elena's chestnut curls "Blonde". So the user taps their own hair for the exact shade, and we name it from CIE L*a*b*.
Challenges
- Each feature needs a different photo: head and shoulders for hair and hats, a close-up for skin, and a head tilted 45° down for density. Pose errors needed the opposite advice depending on the photo, so error messages are feature-specific.
- Deleting a finished task also deletes its input file, so every task gets its own upload.
- The hairstyle catalogue mixes everyday cuts with party looks; we curate it for someone matching a wig.
What we learned
The most useful thing an AI can do here is measure what a person is about to lose, while it is still there, and turn it into words a wig fitter understands.
What's next
- A Spanish version and testing with an oncology nurse.
- A shareable plan link for family.
- Partnering with wig suppliers so the hair card maps to real product shades.
Built With
- cloudflare-workers
- indexeddb
- preact
- typescript
- vite
- youcam-api