Kulit Tropika

Skin advice that knows it is 32 °C and 85% humid outside. One selfie gives a routine and shopping list built for tropical skin, in English, Bahasa Melayu and 中文.

Comment

Inspiration

Most skincare advice, and most skin-analysis apps, are written for cool, dry climates. In Malaysia you sweat through your sunscreen by lunch. Then you spend the afternoon in office air-con that dries your skin out. On top of that, shopping apps still push rich night creams. A lot of us end up with skin that is oily and dehydrated at the same time, and we buy the wrong products for it. We wanted a skin scan that knows where you live and what today's weather is doing, and that speaks the languages Malaysians actually shop in.

What it does

  1. Scan. You upload or take a selfie. YouCam AI Skin Analysis scores 10 concerns (acne, oiliness, pores, redness, hydration, radiance, texture, dark spots, dark circles and fine lines), plus an overall score and estimated skin age. YouCam AI Facial Color Tones Analyzer returns your skin, lip, eye and hair colours.
  2. Reads your day. It pulls live humidity, temperature and UV for your city (8 SEA cities) from Open-Meteo, and asks how long you'll be outdoors.
  3. Plans. It builds a morning, midday top-up and night routine.
    • Each step is a product type with key ingredients, a "why" that cites your own score, how often to use it, and a typical price in RM.
    • It detects "oily but dehydrated" air-con skin.
    • It never gives heavy creams when humidity is above 70%.
    • It adds a midday sunscreen reapply when UV is high.
  4. Shops.
    • A budget-tier shopping list (student, mid or treat) with an estimated total, plus a "skip these" list.
    • Halal, fragrance-free and pregnancy-safe filters.
  5. Checks before checkout. You paste any product's ingredient list and it rates the product for your skin:
    • It flags pore-cloggers such as coconut oil, irritants, and retinoids during pregnancy.
    • It points out possibly animal-derived ingredients to check for halal certification.
  6. Colours. It works out your undertone and depth from the YouCam skin colour, then suggests lip shades and outfit colours.
  7. Tracks progress. Scores (never photos) are saved on your device, so a rescan in 2–4 weeks shows what improved.

You can switch the whole result between EN, BM and 中文 instantly, without another API call.

How we built it

  • YouCam API v2.0 (Perfect Corp). The server makes one POST /s2s/v2.0/file upload, then a PUT to the pre-signed URL. It then runs two tasks in parallel and polls both:
    • POST /s2s/v2.0/task/skin-analysis (SD, 10 actions, format: "json", 14 units)
    • POST /s2s/v2.0/task/skin-tone-analysis (20 units)
  • YouCam photo-quality errors (error_no_face, error_lighting_dark, error_src_face_too_small and others) become friendly retake tips in all three languages. Any other failure, such as units running out, falls back to clearly labelled simulated scores, so the demo never dead-ends.
  • Rules engine in plain JavaScript:
    • It turns raw_scores into a skin type and its top concerns.
    • It combines those with climate and preferences to choose routine steps, ingredient filters and RM price ranges.
    • The ingredient checker uses about 40 curated ingredient rules (INCI patterns), including the halal checks.
    • Colour advice converts the YouCam sRGB skin colour to CIE Lab to estimate undertone.
  • Zero dependencies. The server is Node's built-in http. The front end is vanilla HTML, CSS and JS. Tests use node:test: 18 tests, including a shape-parity test of the mock against a real captured YouCam response.
  • Safety on a public demo. It rate-limits by IP, caps live scans per day to protect API units, and never writes selfies to disk.
  • Deployment. GitHub Pages hosts a static build that runs the same engine in the browser with the mock adapter (node static/build.js). Live mode needs a server so the key stays secret: node server.js locally, the Dockerfile, or the included Cloudflare Worker entry (node worker/build.js).

Challenges we ran into

  • The live response has more in it than the per-concern scores.
    • Besides the 10 concern entries, it includes all (overall score), skin_age and resize_image entries.
    • We captured a real response as a test fixture and made the mock match it exactly, so demo mode and live mode share one code path.
  • "Oily" is the wrong answer for most people here. High oiliness with low hydration means "dehydrated", not "dry it out". Getting the rules to reflect that took several iterations.
  • Keeping three languages in sync.
    • Every routine reason has parameters (such as your score or the humidity). A test fails if any key is missing in EN, BM or 中文.

Accomplishments that we're proud of

  • Advice that depends on the climate. The same face gets different advice in humid KL than on a dry day, and different again with 6 hours outdoors than with an office day.
  • The ingredient checker. It gives a "careful maybe" for a product that has niacinamide but also coconut oil and fragrance. That's exactly the kind of judgment people usually get wrong at checkout.
  • Trilingual from day one. Everything is in English, Bahasa Melayu and 中文, with halal and pregnancy-safe filters.

What we learned

  • The YouCam v2 task API (upload, then task, then poll) is straightforward. Running Skin Analysis and Color Tones from one upload keeps a scan to about 8 seconds.
  • raw_score is better than ui_score for ranking concerns, because ui_score is compressed toward the top of the range.
  • Good photo-error messages matter as much as the analysis itself.

What's next

  • YouCam AI Makeup VTO. Let people try on the suggested lip shades.
  • Real products. Connect the product types to real local retailer listings, such as Watsons, Guardian, Shopee and Lazada, with halal certification data.
  • Progress over time. Region masks and before/after comparison across rescans.
  • More languages. Tamil, then Bahasa Indonesia and Thai.

Built With

Share this project:

Updates

Submission history