{"slug": "stop-slouching-build-a-real-time-ai-posture-guard-with-mediapipe-and-vue-js", "title": "Stop Slouching! Build a Real-time AI Posture Guard with MediaPipe and Vue.js", "summary": "A developer has published a tutorial for building \"Posture Guardian,\" a browser-based tool that uses MediaPipe's pose estimation model and Vue.js to detect slouching, forward head posture, and uneven shoulders in real time. The tool captures webcam frames, extracts 33 skeletal landmarks, and applies trigonometry to ear-to-shoulder offsets, triggering browser notifications when posture thresholds are exceeded.", "body_md": "Let's be honest: as engineers, our \"focus mode\" usually involves leaning into the monitor until our noses almost touch the screen. We start the day sitting like a king and end it looking like a question mark. Back pain isn't just a meme; it's a productivity killer.\n\nIn this tutorial, we’re building **Posture Guardian**, a browser-based tool using **real-time computer vision** and **pose estimation** to detect slouching, forward head posture (the \"tech neck\"), and uneven shoulders. We'll leverage **MediaPipe** and **Vue.js** to create a seamless experience that alerts you the moment your ergonomics fail. If you’ve been looking for a practical application for **machine learning in the browser**, this is it.\n\nHow does a browser \"know\" you're slouching? We need to capture frames from the webcam, process them through a pre-trained model to find skeletal landmarks, and then apply some basic trigonometry to calculate angles.\n\n``` php\ngraph TD\n A[Webcam Stream] --> B[MediaPipe Pose Model]\n B --> C{Landmark Detection}\n C -->|Coordinates| D[Ergonomics Logic Engine]\n D --> E[Calculate Neck & Shoulder Angles]\n E --> F{Threshold Exceeded?}\n F -->|Yes| G[Browser Notification + Visual Alert]\n F -->|No| H[Status: Healthy]\n G --> A\n H --> A\n```\n\nTo follow along, you’ll need:\n\n`@mediapipe/pose`)\nFirst, we need to initialize the MediaPipe Pose model. This model identifies 33 landmarks on the human body. For posture, we specifically care about the ears, shoulders, and hips.\n\n``` js\n// postureService.js\nimport { Pose } from \"@mediapipe/pose\";\n\nexport const createPoseEstimator = (onResults) => {\n const pose = new Pose({\n locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`,\n });\n\n pose.setOptions({\n modelComplexity: 1,\n smoothLandmarks: true,\n minDetectionConfidence: 0.5,\n minTrackingConfidence: 0.5,\n });\n\n pose.onResults(onResults);\n return pose;\n};\n```\n\nTo detect \"Head Forward\" posture, we calculate the horizontal distance and angle between the **Ear** and the **Shoulder**. If the ear moves too far forward relative to the shoulder line, you're officially a turtle. 🐢\n\n```\n// Logic to detect Forward Head Posture\nfunction analyzePosture(landmarks) {\n const leftEar = landmarks[7];\n const rightEar = landmarks[8];\n const leftShoulder = landmarks[11];\n const rightShoulder = landmarks[12];\n\n // Calculate the average ear-to-shoulder horizontal offset\n const earMidX = (leftEar.x + rightEar.x) / 2;\n const shoulderMidX = (leftShoulder.x + rightShoulder.x) / 2;\n\n const diff = Math.abs(earMidX - shoulderMidX);\n\n // If the head is more than 15% forward relative to the body\n if (diff > 0.15) {\n return { status: 'bad', message: 'Sit up straight! Your neck is straining.' };\n }\n return { status: 'good', message: 'Perfect Posture!' };\n}\n```\n\nNow, let's wrap this in a Vue component. We'll use the **Webcam API** to feed the video stream into the Pose model.\n\n```\n\n \n
\n
\n\n
\n
{{ currentStatus }}
\n \n