A browser-based AI-powered personal trainer that uses your webcam to track movements, count repetitions, and provide real-time feedback on exercise form.
- Real-time Pose Detection: Advanced AI-powered movement tracking using TensorFlow.js and MoveNet
- Automatic Rep Counting: Intelligent repetition counting with high accuracy
- Form Feedback: Instant guidance and corrections for proper exercise technique
- Exercise Variety: Support for Squats and Bicep Curls with more exercises coming
- Pose Visualization: Live skeleton overlay on video feed for better form awareness
- Workout Timer: Track your workout duration and session progress
- Responsive Design: Seamless experience across desktop and mobile devices
- Camera Integration: Optimized webcam processing with smooth permission handling
- Workout Summary: Comprehensive performance analytics after each session
- Exercise Instructions: Built-in guidance and tips for proper form execution
- Frontend: React 19 with React Router v7
- Styling: Tailwind CSS v4
- Build Tool: Vite
- AI/ML: TensorFlow.js (ready for integration)
- Pose Detection: MoveNet (ready for integration)
- TypeScript: Full type safety
app/
├── components/ # Reusable UI components
│ ├── ExerciseCard.tsx
│ ├── Button.tsx
│ ├── LoadingSpinner.tsx
│ └── index.ts
├── constants/ # Application constants
│ └── exercises.ts
├── hooks/ # Custom React hooks
│ ├── useWebcam.ts
│ └── useTimer.ts
├── routes/ # Page components
│ ├── home.tsx # Exercise selection page
│ ├── workout.tsx # Workout session page
│ └── summary.tsx # Workout summary page
├── types/ # TypeScript type definitions
│ └── exercise.ts
├── utils/ # Utility functions
│ ├── poseAnalysis.ts # Rep counting algorithms
│ └── canvasUtils.ts # Canvas drawing utilities
└── app.css # Global styles
-
Install dependencies:
npm install
-
Start development server:
npm run dev
-
Open your browser: Navigate to
http://localhost:5173 -
Grant camera permission when prompted
-
Select an exercise and start your workout!
- Target Muscles: Quadriceps, Glutes, Hamstrings, Core
- Difficulty: Beginner
- Detection Method: Hip and knee position tracking
- Target Muscles: Biceps, Forearms
- Difficulty: Beginner
- Detection Method: Elbow angle calculation
The application features fully integrated AI capabilities:
- TensorFlow.js Integration: MoveNet model for real-time pose detection
- Pose Analysis Utilities: Advanced algorithms for exercise tracking
- Rep Counting Logic: Accurate state machine-based counting system
- Canvas Drawing: Real-time skeleton visualization
- Webcam Integration: Optimized video processing pipeline
- Form Analysis: Real-time exercise form feedback
- Web Worker Processing: Optimized ML processing for better performance
- Clean Architecture: Separation of concerns with clear folder structure
- Type Safety: Full TypeScript implementation
- Responsive Design: Mobile-first approach
- Accessibility: Semantic HTML and ARIA labels
- Performance: Optimized for real-time video processing
- Chrome: Full support
- Firefox: Full support
- Safari: Full support
- Edge: Full support
Requirements:
- Modern browser with WebRTC support
- Camera access permission
- JavaScript enabled
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run typecheck- Run TypeScript checks
- Add exercise definition to
app/constants/exercises.ts - Implement rep counting logic in
app/utils/poseAnalysis.ts - Update TypeScript types if needed
- Advanced Form Analysis: More detailed exercise form feedback
- Exercise Library Expansion: Add support for more complex exercises
- Progress Tracking: User profiles and workout history
- Mobile App: Native mobile application development
- Social Features: Workout sharing and community challenges
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.