Before You Buy

Inspiration

Skincare is one of the most returned-yet-unreturnable categories online: once a jar is opened, it is yours. Shoppers pick products from marketing claims and star ratings written by people whose skin differs from theirs. Before You Buy flips the script — it measures the shopper's own skin (via the YouCam AI Skin Analysis API) and checks a product's ingredient list against those measurements before the purchase. The result is a decision grounded in two facts — your skin and the formula — instead of a glossy bottle.

What we built

Before You Buy is a skin-AI shopping companion built on the YouCam AI Skin Analysis API by Perfect Corp.

1. Skin scan — YouCam AI Skin Analysis API v2.1. Upload a selfie and get severity scores for 12 skin concerns (acne, redness, oiliness, pores, texture, fine lines, dark spots, radiance, moisture, dark circles, eye bags, firmness). YouCam's mask overlays show where each concern was found.
2. Product match score. Paste any product's INCI ingredient list (or pick a sample product). A rule-based engine of 30+ actives and 5 caution groups maps each ingredient to the concerns it addresses, weights coverage by list position, and returns a 0–100 match score plus a verdict, per-concern coverage, and watch-outs (e.g. fragrance on red skin, comedogenic oils on acne-prone skin).
3. Ranked shortlist. Every product you check is re-ranked for your current skin profile, so comparing three serums on a product page takes seconds.
4. Progress tracking. Scans are saved on-device (localStorage). Compare any two scans to see which concerns improved and by how much — track whether a product is actually moving the numbers over weeks.
5. Free demo. A cached demo run on an AI-generated face lets anyone try the flow without an API key or credits.

How it works

selfie
  → POST /s2s/v2.0/file (register upload)
  → PUT bytes to pre-signed URL
  → POST /s2s/v2.1/task/skin-analysis {src_file_id,
       dst_actions: [12 SD concerns],
       format: "json",
       miniserver_args: {enable_mask_overlay: true}}
  → GET /s2s/v2.1/task/skin-analysis/{task_id} (poll until success)
  → ui_scores + mask_urls → profile, match engine, progress

• Pure static site: HTML, CSS, vanilla ES modules. No build step, no backend.
• The YouCam API returns Access-Control-Allow-Origin: *, so the browser calls it directly with the user's own key (bring-your-own-key). The key is kept only in the browser (optionally in localStorage) and is never sent anywhere except to YouCam. No key is embedded in the repo.
• Photos are re-encoded client-side (long side ≤ 2048 px) and rejected if the short side is under 480 px.

File map

Run it locally

git clone https://github.com/rajeshmullippa-collab/before-you-buy.git
cd before-you-buy
python3 -m http.server 8000

Then open http://localhost:8000.

To scan your own selfie, create a free YouCam API account at https://yce.perfectcorp.com/ai-api, generate an API key in the API console, paste it into the Your selfie card, and choose a photo. One scan of 12 SD concerns uses about 14 units.

Deploy

Push to GitHub and enable Settings → Pages → Deploy from a branch → main / (root). That's it.

Limitations and next steps

• Ingredient guidance is general cosmetic information, not medical advice. The engine does not know concentrations, only list order.
• Next: pull INCI lists straight from a product URL, YouCam skin-tone matching for foundation shades, and a store-side widget so retailers can show a "match for your skin" badge on product pages.

Credits

Open source under the MIT license. The code is at https://github.com/rajeshmullippa-collab/before-you-buy and the live demo is at https://rajeshmullippa-collab.github.io/before-you-buy/.

Built by Hark, an AI agent, under the direction of Rajesh Mullippa. Demo face images are AI-generated; narration voice is AI TTS.

Built With

• css3
• github
• html5
• javascript
• youcam