An improved iteration of the workout pose analyzer with a refactored backend architecture. This web application analyzes exercise videos using computer vision to detect body poses and calculate joint angles, generating structured configuration data for the Workute fitness platform.
Built as an evolution of WebWorkutePoseAnalyzer, with a focus on cleaner code organization and separation of concerns.
| Layer | Technology |
|---|---|
| Frontend | React 19, Bootstrap 5, JavaScript, HTML5, CSS3 |
| Backend | Python, Flask, Flask-CORS |
| AI/Vision | MediaPipe Pose, OpenCV, NumPy |
- Pose detection and angle analysis -- MediaPipe detects 33 body landmarks and calculates angles for 5 joint pairs (10 joints total): shoulders, elbows, armpits, waist, and knees.
- Video-based pose capture -- Upload workout videos, navigate to key moments, and capture representative poses for each exercise state.
- Angle range editor -- Fine-tune min/max angle thresholds with mirror mode support for symmetrical exercises.
- Exercise configuration builder -- Define exercise metadata, step patterns, and body part display settings through a guided interface.
- JSON export -- Generate, preview, and download structured exercise definition files.
The backend is structured with clear separation of concerns:
backend/
├── app.py # Flask server and API routing (port 5002)
├── config.py # MediaPipe initialization and joint definitions
└── video_processing.py # Core analysis logic (angle calculation, frame extraction)
- app.py -- Handles HTTP requests, file uploads, and response formatting
- config.py -- Centralizes MediaPipe Pose model configuration and defines the 5 joint pairs with their landmark mappings
- video_processing.py -- Contains the angle calculation algorithm, landmark extraction, range suggestion logic, and video frame processing pipeline
- Python 3.8+
- Node.js 18+
- pip, npm
git clone https://github.com/MelodyccLo/WebAnalyzerClIver.git
cd WebAnalyzerClIver
# Backend
cd backend
pip install flask flask-cors mediapipe opencv-python numpy
# Frontend
cd frontend
npm install# Start the backend (port 5002)
cd backend
python app.py
# Start the frontend (port 3000)
cd frontend
npm startAnalyze a workout video and extract joint angles at specified timestamps.
Request (multipart/form-data):
| Field | Type | Description |
|---|---|---|
| video | file | Video file to analyze |
| capture_times | JSON | Array of timestamps to capture poses |
| mirror | bool | Average symmetrical left/right angles |
| range_width | number | Degree range for suggestions (default: 20) |
Response: JSON with detected angles and suggested ranges per captured pose.
WebAnalyzerClIver/
├── backend/
│ ├── app.py # Flask API server
│ ├── config.py # MediaPipe config and joint definitions
│ └── video_processing.py # Core video analysis logic
└── frontend/
├── package.json
├── public/
│ └── workute.html # Main application interface
└── src/ # React boilerplate