🎨 AirCuisine-Canvas ☝✋

A 100% native web application that lets you paint in mid-air using hand gestures captured by your webcam. By migrating from a local Python desktop script to clean, browser-native HTML5, CSS3, and Vanilla JavaScript, this app runs instantly in the browser with hardware-accelerated tracking and smart handwriting recognition.

🚀 Zero server backend or Python environments required. Fully client-side execution via CDN-hosted neural models.

---

✨ Features

• 🌐 Pure Browser Architecture: Built entirely using web standards—HTML, CSS, and Vanilla JavaScript. No pip install or native compilers required.
• 🖥️ True Fullscreen Canvas: Dynamically scales to fill your entire browser viewport (100vw by 100vh) with absolute positioning layout.
• ☝️ Strict Drawing Control: Accidental lines are prevented via finger joint calculations. Drawing only triggers when your index finger is completely upright and extended.
• 🖐️ Palm-Erase Mode: Show a full open palm to the camera to automatically switch from ink rendering to a wide-radius digital eraser.
• 📐 Fluid Brush Sizing: Dynamically scale brush thickness in real-time by expanding or narrowing the distance between your fingers in front of the lens.
• ⏸️ Standby Mode (Hover): Pinch your index finger and thumb together to move across the viewport without leaving ink trails.
• 🔮 Handwritten AI Text Reader (OCR): Draw letters or whole words, click READ TEXT (OCR), and an integrated canvas transformer reverses your mirrored video coordinates to parse your handwriting with AI.

---

🛠️ Technology Stack & Dependencies

Because this is a pure front-end web client, all neural tracking libraries are loaded via asynchronous content delivery networks (CDNs):

• HTML5 Canvas API: Handles smooth, real-time bitmap coordinate pathing and drawing strokes.
• CSS3 Flexbox/Viewport Units: Powers the responsive UI overlay menus and fullscreen camera scaling.
• Google MediaPipe (Tasks Vision Library): Loads a lightweight WebAssembly (WASM) engine inside the browser to track a 21-point 3D landmark skeleton of your hand.
• Tesseract.js Core: An OCR (Optical Character Recognition) engine compiled from C++ into pure JavaScript to read text strings directly out of image blobs.

---

🚀 Getting Started (How to Run Locally)

Modern web browsers block direct loading of WebAssembly files (.wasm extensions) from a local file path (file:///...) due to strict Cross-Origin Resource Sharing (CORS) security policies.

To run this project locally, you must host it over a quick local server:

Option A: Using VS Code (Simplest)

1. Open your project folder in Visual Studio Code.
2. Install the Live Server extension from the marketplace.
3. Click the "Go Live" status button at the bottom-right corner of the window.

Option B: Quick Terminal One-Liners

Open your terminal inside your project directory and execute one of the following commands based on your tools:

# If you have Python installed
python -m http.server 8000

# If you have Node.js / npm installed
npx serve .

🤝 Contributing

Contributions are welcome! Since this project is structured out of standard web files, it is highly customizable.

Fork the repository on GitHub.

Create a feature branch (git checkout -b feature/AmazingFeature).

Implement your upgrades. Some excellent ideas to try:

Adding a visual color picker wheel.

Implementing custom shapes (circles, squares) triggered by dual-hand gestures.

Integrating an AI canvas download/save option.

Open a Pull Request detailing your code changes!