AI facial-harmony and skin-analysis mirror that runs entirely in your browser.
Upload a photo or use your webcam and get a detailed report on facial symmetry, proportions, golden-ratio alignment and skin metrics — with ingredient-level skincare guidance, progress tracking and a downloadable PDF.
Your photo never leaves your device. All analysis runs client-side. There is no backend, no upload endpoint and no account. Saved history stores scores only — never images.
Facial images are biometric data. Uploading them to a server pulls an app into GDPR Art. 9 (special-category data), Illinois BIPA and EU AI Act territory. AuraMirror sidesteps all of it by never transmitting the image in the first place — the camera frame goes to a <canvas>, gets analyzed, and is discarded.
Facial analysis
- 468-point face mesh via MediaPipe FaceMesh
- Symmetry, proportion and golden-ratio scoring
- Face-shape detection (Oval, Round, Square, Heart, Diamond, Oblong, Triangle)
- Live mirror mode with real-time landmark overlay
Skin analysis
- Real color science: sRGB → CIELAB conversion with ITA°-based inclusive skin-tone classification
- a*-channel redness detection, texture, evenness and hydration heuristics
- Clinical-scale estimates — IGA, Glogau, Baumann — framed as guidance, not diagnosis
- Image-quality gate: blur, exposure, pose and white-balance colour-cast warnings
Guidance
- Ingredient-level recommendations — neutral, brand-agnostic actives mapped to detected concerns
- On-device AI Beauty Assistant: intent-matched chat grounded in your report, with Web Speech voice. No LLM, no API key, no network call
- ABCDE mole / spot self-check (educational, not diagnostic)
Tracking
- Scan history with metric deltas and before/after comparison
- Capture-consistency signatures — each scan stores an image-free pose + lighting fingerprint so the app can tell you whether a new scan is genuinely comparable to an earlier one
- Scan tagging (e.g. "eczema flare", "post-peel day 3")
Output
- PDF report with radar chart (jsPDF + Chart.js)
- Shareable summary card
- Multilingual UI — English, हिन्दी, Français, Español, العربية (with RTL)
| Layer | What it actually is |
|---|---|
| Language | Vanilla JavaScript (native ES modules, no bundler) |
| Build step | None. Static files, served as-is |
| Face detection | MediaPipe FaceMesh (CDN, UMD) |
| Charts | Chart.js 4.4.1 |
| jsPDF 2.5.1 + html2canvas 1.4.1 | |
| Styling | Hand-written CSS (glassmorphism, soft gradients) |
| Storage | localStorage — scores and tags only |
| Backend | None |
22 ES modules under assets/js/.
Because the app uses native ES modules and the camera API, opening index.html via file:// will not work. Serve it over HTTP:
# Python
python -m http.server 8000
# or Node
npx serve .Then open http://localhost:8000.
Webcam capture requires a secure context —
localhostor HTTPS. Photo upload works anywhere.
The repo is a plain static site, so any static host works. It is configured for Vercel via vercel.json — no build command, no output directory, just cleanUrls plus security headers (including Permissions-Policy: camera=(self) so webcam capture is permitted).
AuraMirror/
├── index.html # Landing page
├── analyze.html # Main analysis app
├── vercel.json # Static host config + headers
├── assets/
│ ├── css/style.css
│ ├── data/ # recommendations.json, skincare.json
│ └── js/ # 22 ES modules
│ ├── app.js # Orchestrator
│ ├── faceMesh.js # MediaPipe wrapper
│ ├── metrics.js # Symmetry / proportion / golden ratio
│ ├── color.js # sRGB → CIELAB, ITA°
│ ├── skin.js # Skin metric extraction
│ ├── clinicalScales.js
│ ├── quality.js # Blur / exposure / pose / white-balance gate
│ ├── consistency.js # Capture signature & comparability
│ ├── compare.js # Before/after
│ ├── assistant.js # On-device beauty assistant
│ ├── ingredients.js # Actives → concerns mapping
│ ├── moleCheck.js # ABCDE self-check
│ ├── i18n.js # 5 languages, RTL
│ └── ...
└── docs/
└── ORIGINAL_SPEC.md # The original build brief
AuraMirror is not a medical device and does not diagnose. Clinical-scale outputs (IGA, Glogau, Baumann) and the ABCDE mole check are educational estimates intended to prompt informed conversations, not to replace them. For any skin concern — especially a changing mole — consult a qualified dermatologist.
The app measures facial geometry and skin properties. It deliberately makes no judgement about attractiveness.
No license has been chosen yet — all rights reserved by default. Add a LICENSE file if you want others to reuse the code.