Skip to content

MelodyccLo/WebAnalyzerClIver

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebAnalyzerClIver

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.

Tech Stack

Layer Technology
Frontend React 19, Bootstrap 5, JavaScript, HTML5, CSS3
Backend Python, Flask, Flask-CORS
AI/Vision MediaPipe Pose, OpenCV, NumPy

Features

  • 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.

Architecture

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

Getting Started

Prerequisites

  • Python 3.8+
  • Node.js 18+
  • pip, npm

Installation

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

Running

# Start the backend (port 5002)
cd backend
python app.py

# Start the frontend (port 3000)
cd frontend
npm start

API Reference

POST /process_video

Analyze 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.

Project Structure

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

About

Using Gemini CLI to improve my web workout pose analyzer project.

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors