Project Info
This project did not submit a demo video on Devpost.
Inspiration
AI Posture Guardian was inspired by the way laptop work slowly pulls people into bad posture without them noticing. We wanted to build a productivity tool that does more than remind you politely in the background. It actively protects your focus and your body by stepping in when your posture slips. What It Does AI Posture Guardian uses the laptop camera to detect posture in real time. When it sees sustained slouching or uneven shoulders, it shows a fullscreen reminder that blocks the screen until the user sits up straight again. The blocker can also be dismissed by pressing the spacebar twice as a manual override. How We Built It We built the project as an Electron desktop app with a React frontend. MediaPipe Pose tracks body landmarks from the laptop camera, including shoulders and ears. A posture engine evaluates head position, shoulder alignment, and shoulder tilt to decide whether the user is sitting upright. Electron powers the fullscreen always-on-top overlay, while React handles the live dashboard, sensitivity controls, warning timer, and camera preview. We also disabled Electron background throttling so posture detection keeps running even when the user is working in another app. Challenges We Faced The hardest part was tuning the posture detection so it felt helpful instead of annoying. If the thresholds were too strict, the app blocked the screen constantly. If they were too loose, it missed real slouching. We iterated on shoulder-angle detection, recovery timing, and manual unblock behavior to make the experience feel more natural. Another challenge was making the blocker work while the app was in the background. The app needed to keep detecting posture even when the user was focused on another browser or tool, so we had to adjust Electron behavior to keep the camera loop active. What We Learned We learned how to combine real-time computer vision with desktop app behavior in a way that feels immediate and practical. We also learned that UX matters a lot for wellness tools: a posture app should be firm enough to change behavior, but forgiving enough that people actually want to keep using it. What's Next Next, we would add daily posture analytics, calibration for different body types and camera angles, voice coaching, and privacy-first local session history. We could also add integrations for productivity workflows, like pausing distracting sites when posture drops or generating weekly posture improvement summaries.
AI Posture Guardian
AI Posture Guardian is an Electron desktop app that uses the laptop camera to detect posture in real time. If the user slouches for too long, it shows a fullscreen reminder and blocks the screen until posture improves.
Features
- Real-time posture detection with MediaPipe Pose
- Electron fullscreen always-on-top reminder overlay
- React dashboard with camera preview and posture status
- Shoulder tilt and forward-head posture checks
- Adjustable sensitivity and warning delay
- Double-space manual unblock shortcut
- Background monitoring while working in other apps
Tech Stack
- JavaScript
- React
- Electron
- Vite
- MediaPipe Pose
- MediaPipe Camera Utils
- MediaPipe Drawing Utils
- Web Speech API
Run Locally
Install dependencies:
npm install
Start the desktop app:
npm run dev
When prompted, allow camera access.
Build
npm run build
Notes
Camera frames are processed locally in the app. The current MVP loads MediaPipe model assets from jsDelivr at runtime, so an internet connection is recommended for demos.
Analysis
View
Metric
- 1
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- HTMLIn code
- JavaScriptIn code
- ReactIn code
- Node.jsClaimed
4 of 5 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
19 KB
Source files
8
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
Sofiia-Bilyk/AI-Posture-Guardian
13 files · 132 KB · @ b19ee42
Structure
Interface
2 files · 15%Screens, components and styles rendered to the user.
Application logic
7 files · 54%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- JavaScript62%
- CSS19%
- HTML13%
- Markdown6%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 11- @mediapipe/camera_utils
- @mediapipe/drawing_utils
- @mediapipe/pose
- @vitejs/plugin-react
- concurrently
- electron
- lucide-react
- react
- react-dom
- vite
- wait-on
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
Feature verification
Adjustable sensitivity and warning delayVerified
React handles sensitivity controls and warning timer; adjustable sensitivity and warning delay
Claimed on readmehigh confidencesrc/App.jsx:150— Range inputs update settings.sensitivity and settings.warningDelayMs, which feed evaluatePosture and the slouch-timer logic
Camera frames processed locally, MediaPipe assets loaded from jsDelivr at runtimeVerified
Camera frames are processed locally in the app; MediaPipe model assets load from jsDelivr, so internet is recommended for demos
Claimed on readmehigh confidencesrc/PoseDetector.jsx:32— locateFile points to https://cdn.jsdelivr.net/npm/@mediapipe/pose/, and pose inference runs in-browser on the local video element with no network upload of frames
Double-space manual unblock shortcutVerified
The blocker can be dismissed by pressing the spacebar twice as a manual override
Claimed on Devposthigh confidenceelectron/overlay.html:78— keydown listener detects two spacebar presses within 900ms and calls requestManualUnblock via the preload bridgeelectron/main.cjs:90— posture:manual-unblock IPC handler hides the overlay and notifies the main window
Fullscreen always-on-top blocking overlayVerified
Electron fullscreen always-on-top reminder overlay blocks the screen until posture improves
Claimed on readmehigh confidenceelectron/main.cjs:36— createOverlayWindow builds a frameless, alwaysOnTop BrowserWindow that setFullScreen(true) is toggled via setOverlayVisiblesrc/App.jsx:36— App sets overlayActive based on sustained slouch duration and calls setOverlayVisible
React dashboard with camera preview and posture statusVerified
React handles the live dashboard, sensitivity controls, warning timer, and camera preview
Claimed on Devposthigh confidencesrc/App.jsx:97— Renders monitor, status cards (live posture, grace timer, session score), controls, and embeds PoseDetector camera preview
Real-time posture detection with MediaPipe PoseVerified
Uses MediaPipe Pose to track body landmarks (shoulders, ears) from the laptop camera in real time
Claimed on readmehigh confidencesrc/PoseDetector.jsx:5— Imports and initializes MediaPipe Pose, runs it against a live camera feed via MediaPipeCamera.onFramesrc/PostureEngine.js:19— evaluatePosture consumes pose landmarks (shoulders, ears) to compute posture quality
Session score / posture stats trackingVerified
Dashboard tracks good-posture frames and session score since launch
Claimed on readmehigh confidencesrc/App.jsx:27— stats state tracks goodFrames/badFrames per pose callback and renders goodRatio as Session score
Shoulder tilt and forward-head posture checksVerified
Posture engine evaluates head position, shoulder alignment, and shoulder tilt
Claimed on readmehigh confidencesrc/PostureEngine.js:47— Computes headForward, headDrop, and tiltPenalty from ear/shoulder landmarks and classifies quality as forward/tilted/slouching
Voice coachingVerified
Built With list includes speech; toggleable voice coaching in the dashboard
Claimed on Devposthigh confidencesrc/App.jsx:51— When voiceEnabled and overlay is active, a SpeechSynthesisUtterance is spoken via the Web Speech API
Background monitoring while working in other apps (disabled throttling)Code-supported
Disabled Electron background throttling so posture detection keeps running even when the user is in another app
Claimed on Devpostmedium confidenceelectron/main.cjs:21— backgroundThrottling: false set on both main and overlay windows, which supports continued rendering/timers while backgrounded, but no code confirms the camera capture loop itself keeps running when the main window loses focus (webcam access lives in the renderer's video element)
Claude/API usage (Built With: api, claude)Claimed only
Built With tags list 'api' and 'claude' as technologies used
Claimed on Devpostmedium confidence
An AI agent derived these features from the project’s Devpost page and readme, then searched the code for each one. Verified features are backed by cited code; claimed-only features had no supporting code, which is not by itself proof a feature is missing.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.