Face Landmark and Symmetry Explorer
Upload a face image or use your webcam to visualise 478 MediaPipe facial landmarks, a symmetry line, facial thirds, and ratio guides in a browser-based computer vision lab.
What this page teaches
Students can connect face detection to facial landmarks, symmetry, portrait geometry, and AR attachment points instead of treating face analysis as a black box.
How the overlay works
MediaPipe predicts 478 landmarks, then this page draws a symmetry line, facial thirds, and ratio guides on top of the detected face to visualise geometric structure.
Why it stays privacy-friendly
The landmarks and measurements are computed locally in the browser. Images stay on-device, so the page can teach facial geometry without uploading personal photos.
Mode: Uploaded portrait analysis
Status: Upload a portrait image to inspect facial landmarks and geometry guides.
Click to upload a face photo
PNG, JPG, WebP, AVIF supported
Session Summary
Face detected
Waiting
Landmarks
--
Mode
Upload
Overlay set
4
Auto-align
--
How It Works
MediaPipe Face Landmarker
MediaPipe's Face Landmarker detects 478 3D landmarks per face in real time. The neural network runs entirely in your browser via WebAssembly, with optional GPU acceleration through WebGL. The 478 points cover the full face mesh (468 vertices) plus iris landmarks (5 per eye) for precise gaze tracking.
- - 468 face-mesh vertices
- - 10 iris landmarks (5 per eye)
- - Normalised [0, 1] x/y/z coordinates per frame
- - 30+ FPS on modern devices
Geometry Reference
The Golden Ratio (phi ~= 1.618)
The golden ratio phi is a classical geometry reference that appears in mathematics, architecture, and design. This tool compares a few facial ratios against 1.618 as a historical reference point only. It is not a beauty formula, and the scientific link between these ratios and attractiveness is weak and contested.
Metric
Symmetry Measurement
The vertical midline is estimated from the horizontal midpoint of the face-edge landmarks. Seven symmetric landmark pairs (eye corners, brow anchors, mouth corners, face edges, nose base) are each measured for distance to the midline. A perfect result means both sides are equidistant. Human faces are naturally asymmetric, so a value below 100 is normal and universal.
Metric
Facial Thirds
Classical portraiture divides the face into three equal horizontal zones: forehead hairline-to-brow, brow-to-nose-base, and nose-base-to-chin. The tool measures the coefficient of variation across the three zone heights - lower variation yields a higher proportion measurement. Camera angle and head tilt significantly influence this measurement.
AR Filters
Why landmarks matter in real apps
AR filters work by attaching graphics to tracked facial regions such as the eyes, nose bridge, lips, brows, and jawline. The same landmarks shown here help place sunglasses, crowns, masks, makeup guides, and expression-aware effects in tools like the Face Filters Studio.
Ethics
Education, privacy, and limits
This page is for learning about face detection, facial geometry, and landmark-based tracking. It processes images locally in your browser and should not be used to judge beauty, worth, identity, health, gender, ethnicity, or personality.
What It Does Not Do
No beauty ranking
MuhammadLab keeps this page focused on measurable landmark geometry. It does not turn facial proportions into a beauty score or attractiveness ranking.
Frequently Asked Questions
Related Tools
Face Filters Studio
Apply real-time Snapchat-style face filters using your webcam and browser-based 68-point facial landmark detection — dog ears, crown, sunglasses, devil horns, and more.
Face Landmark and Expression Studio
Inspect a MediaPipe face mesh from webcam or uploaded images, highlight eyes, mouth, and nose landmarks, and study how AR filters attach to tracked facial points.
Pose Estimation Studio
Detect human body keypoints from webcam input or uploaded images, then study skeleton tracking, posture cues, and movement analysis.
Object Classification Studio
Classify uploaded images or webcam frames using a browser-based MobileNet model, then inspect top predictions and confidence scores.