HandVision Pro - AI-Powered Hand Tracking & Air Canvas

HandVision Pro is a premium, real-time computer vision application that leverages MediaPipe and JavaScript to provide advanced hand tracking, finger counting, and a futuristic Air Canvas experience.

🚀 Features

• Dual-Mode System: Switch between high-accuracy hand tracking, a creative Air Canvas environment, and real-time Object Detection.
• Advanced Finger Counting: Recognize up to 10 fingers across both hands with precise Left/Right hand differentiation.
• Air Canvas (Neon Writing): Write and draw in the air using your index finger. Features a glowing neon ink effect with adjustable brush sizes.
• Object Detection (RF-DETR): Real-time object recognition using a dedicated Python FastAPI backend and Roboflow's powerful RF-DETR model, streamed perfectly over WebSockets.
• Gesture-Based Controls:
  • Pen Down: Lift your index finger only to start drawing.
  • Quick Clear: Show all 5 fingers to automatically wipe the canvas clean.
• Mirror Mode Correction: Synchronized visual feedback that feels like looking into a mirror.
• Premium UI: Modern dark-mode interface with glassmorphism effects and responsive design.

🛠️ Tech Stack

• Frontend Core: HTML5, CSS3, JavaScript (Vanilla)
• Backend Core: Python, FastAPI, WebSockets
• AI Engines:
  • MediaPipe Hands (Client-side Hand Tracking)
  • RF-DETR (Server-side Object Detection)
• Icons: Lucide Icons
• Fonts: Outfit (Google Fonts)

⚡ Quick Start

1. Clone the repository:

   git clone https://github.com/YOUR_USERNAME/HandVision-Pro.git

2. Open the project: Simply open index.html in any modern web browser (Chrome or Edge recommended).
3. Grant Permission: Allow camera access when prompted to begin the experience.

🎨 How to Use

Tracking Mode

1. Click START TRACKING.
2. Place your hands in the camera view.
3. The system will detect your hand type (Left/Right) and count the number of fingers extended.

Air Canvas Mode

1. Click AIR CANVAS.
2. To Draw: Extend only your Index Finger.
3. To Stop Drawing: Close your hand or tuck your index finger.
4. To Clear Canvas: Show your Full Palm (5 fingers) for a half-second to reset the screen.
5. Use the sidebar to change brush colors and thickness.

Object Detection Mode (Requires Backend)

1. Ensure the Python backend is running (see below).
2. Click OBJECT DETECT.
3. Point your camera at everyday objects (like cell phones, laptops, books) and watch the AI draw bounding boxes identifying them in real-time.

🚀 Running the Backend

Because the Object Detection feature uses a powerful Python AI model (RF-DETR), you must run the backend server alongside the web page.

1. Navigate to the backend folder:

   cd backend

2. Install dependencies:

   pip install -r requirements.txt

3. Start the server:

   python -m uvicorn app:app --reload

4. Once the server says Uvicorn running on http://127.0.0.1:8000, open index.html in your browser.

🌍 Deployment

Since this project now uses a "monorepo" structure (Frontend + Backend), deployment requires two steps:

1. Deploying the Backend: You must host the backend/ folder on a server that supports Python and WebSockets (e.g., Render, Heroku, Railway).
2. Deploying the Frontend: Once your backend has a public URL (like wss://my-api.render.com/ws), update script.js to point to the new WebSocket URL instead of localhost. Finally, host the root folder (where index.html is) on a static site host like GitHub Pages or Vercel.

👨‍💻 Developed By

Created with ❤️ by Ritik Ranjan.

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.