This browser-based hand gesture recognition application uses MediaPipe to detect and classify hand gestures in real-time. No installation required - everything runs directly in your web browser! The application includes three specialized models for different use cases:
- General Gestures: MediaPipe's default gesture recognition model
- Rock-Paper-Scissors: Custom model trained with MediaPipe Model Maker
- Sign Language: Custom model trained with MediaPipe Model Maker for sign language detection
- Sign Language Model: Trained on the Sign Language MNIST dataset, which contains numerous labeled images of American Sign Language letters
- Rock-Paper-Scissors Model: Developed and trained following the official MediaPipe tutorial
- 🖐️ Real-time hand gesture recognition
- 📷 Webcam support for live detection
- 🖼️ Image upload for static detection
- 🔄 Multiple specialized models to choose from:
- ✌️ Rock-Paper-Scissors recognition
- 👋 Sign language recognition
- 👆 General hand gesture detection
- 🚀 WebGL (GPU) acceleration for faster processing
- 💻 Wasm (CPU) support for wider device compatibility
- 📊 Detailed detection results with confidence scores
- 📱 Responsive design for mobile and desktop devices
- ⚛️ React.js - UI framework
- 📱 MediaPipe - Google's ML solution for vision tasks
- 🔧 MediaPipe Model Maker - For custom model training
- 🎨 TailwindCSS - Styling
# Clone the repository
git clone https://github.com/nomi30701/sign-language-recognition-web-mediapie.git
# Navigate to project directory
cd sign-language-recognition-web-mediapie
# Install dependencies
npm install
# Start development server
npm run dev