FormFit

FormFit is your AI-powered personal trainer that analyzes your workout form in real-time, detecting subtle form mistakes that could lead to injury and providing instant corrective feedback.

Comment

FormFit: The AI-Powered Form Coach

Inspiration 💡

I've experienced the frustration of improper form leading to injuries and stalled progress. Having struggled with proper technique during workouts, I thought: *what if there could be something that supports you through your workout progress?

Without professional guidance (much of which is pretty expensive, or worse, not introvert-friendly!) many people develop bad habits that lead to injuries. I was inspired to create an accessible solution that brings expert form analysis to everyone, regardless of budget or experience level.

What I Learned 📚

This project pushed our boundaries in multiple ways:

  1. Computer Vision Mastery: I dived deep into MediaPipe's pose detection capabilities, learning how to process and interpret 33 skeletal landmarks in real-time
  2. Workout Fundamentals: I found out about the importance of specific forms during workout (e.g., 90° knee bend for squats, 45° back angle for deadlifts)

How I Built It ⚙️

Tech Stack

  • Frontend: React + TypeScript + Vite
  • Computer Vision: MediaPipe Pose Landmarker
  • UI: CSS Modules with responsive design
  • Deployment: Netlifly

Key Components

  1. Real-Time Pose Detection

    • MediaPipe processing at 30fps
    • GPU-accelerated landmark detection
    • Skeletal mapping with biomechanical constraints

  2. Form Analysis Engine

    function analyzeSquat(landmarks) {
 const kneeAngle = calculateJointAngle(hip, knee, ankle);
 const backAngle = calculateJointAngle(shoulder, hip, knee);
 ...
 const avgDepth =
  depthHistory.reduce((a, b) => a + b, 0) / depthHistory.length;
const depthVariation =
  Math.max(...depthHistory) - Math.min(...depthHistory);
....
const messages = [];
if (depthVariation > 50) {
  messages.push("Maintain consistent depth between reps");
}
if (currentDepth < avgDepth - 10) {
  messages.push("You're not going as deep as previous reps");
}
 if (avgKneeAngle > 100 && state.exercisePhase === "bottom") {
  messages.push("Go deeper! Aim for 90° knee bend");
}
...
}

  3. Feedback System

    • Real-time visual overlays highlighting problem areas
    • Audio cues for critical form corrections
    • Rep counting with performance metrics

Challenges Faced 🧗

  1. Alignment Issues: Getting the skeletal overlay to perfectly match video frames required complex coordinate transformation math:

    const scaleX = canvas.width / video.videoWidth;
const scaleY = canvas.height / video.videoHeight;

  2. Biomechanical Accuracy: Translating fitness expertise into algorithms

  3. Cross-Device Compatibility: Ensuring consistent experience across:

    • Mobile browsers (Chrome, Safari)
    • Desktop environments

What I'm Proud Of 🏆

  1. User-Centric Design: Intuitive interface that makes complex feedback actionable

What's Next 🚀

  1. Exercise Expansion: Adding support for 20+ exercises
  2. Personalized Coaching: AI-generated workout plans based on form data
  3. 3D Motion Capture: Implementing three.js for volumetric analysis
  4. Social Features: Form challenges with friends
  5. Injury Prevention System: Predictive alerts for dangerous movement patterns

Acknowledgments

  • MediaPipe development team (Google) for their groundbreaking pose detection technology
  • MUI community for amazing component ecosystem
  • LLM tools (Copilot and Deepseek) for generating code that contributed to parts of the code (such as some intricate styling)

FormFit represents our vision for the future of fitness tech - where AI democratizes expert guidance, helping people train smarter and safer. As we continue developing, we're excited about the potential to prevent injuries and make proper form accessible to everyone, everywhere.

Built With

Share this project:

Updates