ROLE: You are an expert AI and computer-vision web developer.
TASK: Build a complete browser-based mini project called PostureCoach.
DESCRIPTION: Create a real-time posture monitoring app using the webcam.
DETAIL: Use MediaPipe Pose to detect 33 body landmarks and calculate shoulder, neck, and torso angles.
CLASSIFICATION: Detect and display Good Posture and Bad Posture/Slouching with a visual skeleton overlay.
BAD POSE: Add Face Too Close detection using Face Detection when only the eyes, nose, mouth, or a large part of the face is visible.
DASHBOARD: Show posture status, session time, good/bad frames, angles, alerts, and posture percentage.
UI & DEPLOYMENT: Create a clean responsive HTML/CSS/JavaScript app that can run as a static Hugging Face Space.
OUTPUT: Give me complete runnable code, explain each major part simply, and include testing steps.
Waiting…
📏 Distance OK
Shoulders —
Neck —
Torso —
Dist —
📷
Start your session
Enable your camera to begin real-time posture analysis
Good Posture
0
0% of session
Bad Posture
0
0% of session
Bad Streaks
0
Longest: 0s
Session Time
0:00
Active monitoring
Session breakdown
Session startNow
Shoulder alignment angle over time
EarlierNow
Notification settings
Sound alarm on bad pose
Browser notifications
Alert every (bad seconds)
Recent alerts
No alerts yet. Start the camera.
AI RecommendationAI ✦
Start your camera session, then click "Get AI Posture Advice" to receive personalized recommendations based on your posture data.
⚠️ AI Recommendation — This is generated by an AI language model via Hugging Face Inference API and is not a substitute for professional medical advice.