PostureCoach

A real-time, browser-only posture monitor. It uses your webcam and two Google MediaPipe models — Pose (33 body landmarks) and Face Detection — to tell you when you're slouching or sitting too close to the screen. Nothing is uploaded anywhere; all processing happens locally in the browser.

Files

How it works, simply

1. Camera — script.js asks the browser for webcam access and plays the video into a hidden <video> element.
2. Pose model — every animation frame, the current video frame is sent to MediaPipe Pose, which returns 33 body landmarks (nose, shoulders, hips, knees, etc.), each as an (x, y, visibility) value.
3. Angles — using the shoulder, hip and ear landmarks, the app calculates three angles measured from a perfectly vertical or horizontal line:
   • Neck tilt — how far the ears lean forward of the shoulders.
   • Torso lean — how far the shoulders lean forward of the hips.
   • Shoulder tilt — how uneven the two shoulders are. If neck tilt or torso lean go past their limit, the frame is marked "bad posture."
4. Face Detection model — every second frame is also sent to MediaPipe Face Detection, which returns a bounding box around the face. If that box covers more than ~20% of the frame area, the face is judged to be too close to the camera.
5. Skeleton overlay — a <canvas> sits on top of the video and draws the skeleton lines using MediaPipe's POSE_CONNECTIONS list, colored green (good), red (bad) or amber (face too close).
6. Dashboard — a circular gauge shows the running "good posture %", alongside session time, good/bad frame counts, live angle bars, and a scrolling alert log.

Run it locally

Because browsers block webcam access on plain file:// pages, serve the folder with any simple local server, for example:

cd posturecoach
python3 -m http.server 8080

Then open http://localhost:8080 in your browser and click Start Camera.

Deploy to Hugging Face Spaces

1. Create a new Space at huggingface.co/new-space.
2. Choose Static as the Space SDK.
3. Upload index.html, style.css, script.js, and this README.md to the Space's file list (or push them with git to the Space's repo) — all four files go in the root of the repository, no subfolders.
4. The Space will build automatically and give you a live URL. Because it's HTTPS, the browser will allow webcam access.

Testing checklist

• Click Start Camera and allow camera permission — the video and skeleton overlay should appear.
• Sit up straight, facing the camera with your shoulders and hips both visible — status should say Good posture.
• Slouch forward or drop your head — status should switch to Bad posture — slouching and an alert should appear in the list.
• Lean very close to the camera — status should switch to Face too close and a matching alert should appear.
• Watch the Good frames / Bad frames counters and the posture percentage gauge update live.
• Try Switch Camera on a phone to confirm it toggles between the front and back camera.
• Click Reset Session and confirm the timer, counters and alerts all clear.
• Open the Sensitivity settings panel and drag a slider — the corresponding angle bar/threshold should visibly change behavior.
• Resize the browser window (or open on a phone) — the layout should stack into a single column and stay usable.