01
The photo is decoded locally
Your browser reads the file, corrects its orientation, and scales it down for analysis. The image never leaves the device.
How it works
Local inference, visible reasoning.
The detector is a browser pipeline, not a remote AI service. This page explains what happens to the image, what the model measures, and where the styling suggestions come from.
02
A local landmark model finds facial points
The bundled MediaPipe Face Landmarker model returns 478 normalized points, blendshapes, and a transformation matrix. The model and WASM runtime are served from this site.
03
The app checks whether the photo is usable
Face count, face size, sharpness, exposure, head roll, yaw, pitch, and eye openness are combined into a capture-quality score with specific warnings.
04
Landmarks become normalized measurements
The eye line is aligned, then widths, lengths, taper, thirds, symmetry, eye spacing, tilt, and brow arch are calculated as ratios.
05
Seven shape prototypes are compared
Each shape has weighted ranges for length-to-width, forehead-to-jaw, cheek-to-jaw, jaw-to-face, and lower-jaw taper. The scores are normalized and sorted. The jaw contour angle is reported for inspection but is not scored because it overlaps between shapes and shifts with pose.
06
Colour and styling rules are applied
Visible skin pixels are sampled for a Lab/ITA reading. Deterministic rules turn the shape and palette into hair, frame, grooming, colour, and outfit directions.
References are not analysis
Illustration and inference are separate.
The editorial portraits on this site are AI-generated references. They are not analysis overlays, not training data, and not compared with your photo. The detector only runs the local landmark model on the image you choose, then applies the measurement rules described above.
Some references are study sheets or a split-face symmetry composite. They are placed at a larger size so the variation stays visible. A single portrait was never meant to define a category.
What runs where
The server sends files. It does not receive a face.
The site is static. The hosting layer serves HTML, CSS, JavaScript, fonts, icons, the model, and the WASM runtime. After those assets load, analysis happens in a Web Worker where the browser supports it, with a main-thread fallback.
| Asset | Path | Notes |
|---|---|---|
| Face model | /models/face_landmarker.task | Bundled with the site. No model API call. |
| WASM runtime | /wasm/vision_wasm_internal.js + .wasm | Served from this origin, with SIMD support checked first. |
| Fonts | Geist Variable + Geist Mono Variable | Self-hosted through Fontsource packages. |
| Icons | Lucide + inline SVG | No icon CDN. |
What the model gives us
Landmarks are not the result.
The landmark model returns points, not a face-shape label. The app is responsible for the measurement logic, the classification prototypes, the quality score, and the recommendations. That is why the report can show its reasoning instead of presenting a black-box answer. No trained face-shape image classifier is bundled; the closest geometric match and its alternatives are shown with uncertainty.
The model is the MediaPipe Face Landmarker distributed by Google under the Apache 2.0 license. It is bundled locally; the app does not call a Google API at runtime.
What can go wrong
Every pipeline has failure modes.
A turned head changes apparent width. A low camera angle lengthens the chin. A high angle shortens it. Strong glasses, a heavy fringe, or a cropped hairline can hide the landmarks the ratios depend on. Blur and underexposure make points less stable.
The quality score is a warning system, not a guarantee. If the score is low, try another photo before treating the shape reading as meaningful.
Go deeper