This web application provides real-time fitness exercise evaluation using MediaPipe Pose Landmarker and Three.js visualization. The app analyzes user posture through webcam input and provides immediate feedback on proper form for squats and push-ups.
- Real-time pose detection using MediaPipe
- Support for two exercises: Squats and Push-Ups
- Rule-based posture evaluation for different exercise phases
- Visual feedback with color-coded keypoints (red for incorrect, green for correct)
- Three.js annotations highlighting posture issues and explaining corrections
- Mobile-responsive design for use on various devices
- HTML5, CSS3, JavaScript
- MediaPipe Pose Landmarker for real-time pose tracking
- Three.js for 3D visualizations and annotations
- Responsive design principles for cross-device compatibility
- Allow camera access when prompted
- Select an exercise (Squats or Push-Ups) using the buttons
- Position yourself in the camera view with your full body visible
- Follow the on-screen instructions and feedback
- Correct your form based on the visual indicators provided
- Clone this repository
- Open index.html in your browser
- Alternatively, visit the live demo at [your-demo-link]
index.html: Main HTML structure and layoutcss/style.css: Styling for the applicationjs/script.js: Core application logic including:- MediaPipe integration
- Exercise detection algorithms
- Posture evaluation rules
- Three.js visualization setup
This application implements rule-based posture evaluation logic that:
- Breaks exercises into phases (e.g., descent and ascent for squats)
- Monitors key joint angles and positions
- Provides specific feedback for common form issues
- Uses visual indicators to guide proper technique
- Additional exercise types (lunges, planks)
- User profiles to track progress
- More detailed analytics on form improvement over time
- Custom exercise programming options
Rabi Kumar Mishra - Submitted as part of the Realfy Oasis Full Stack Intern technical assignment