🚀 AI Draw — AI Powered Hand Gesture Drawing

🔗 Live Demo: https://ai-draw-voice.netlify.app

---

👨‍💻 Developed by Sivashankar V P

I am a passionate AI & Front-end Developer dedicated to building high-performance, intelligent web applications. This project, AirCanvas, is a testament to my expertise in integrating advanced AI models into seamless, premium user experiences.

---

📌 Overview

AirCanvas is an intelligent web application that transforms your hand gestures into digital art. Using state-of-the-art computer vision via MediaPipe, it detects your hand landmarks in real-time, allowing you to draw, erase, and navigate without ever touching your screen.

---

✨ Key Features

• 🌈 Magic Neon Mode (RGB) – Shifting gradient strokes that cycle through the full color spectrum.
• 🕯️ Dual-Layer Neon Engine – Hyper-realistic rendering with a bright white core and soft atmospheric glow.
• 🎙️ Voice Control (AI) – Command the app hands-free! Switch colors, sizes, or tools using natural speech.
• 🤌 Pinch & Move – Use a natural pinch gesture to pan the entire canvas and position your art perfectly.
• ✨ Neon Aesthetics – Interactive pulsing glow effects and a premium dark-mode interface.
• 🖐️ Intuitive Erasing – Open your palm to sweep and erase sections of your canvas.
• 📸 Masterpiece Export – High-quality PNG exports that combine your art with your webcam background.
• 🛠️ Fully Responsive – Optimized for all devices, from high-end desktops to mobile browsers.

---

🖐️ Gesture Command Guide

Gesture	Action	Description
☝️ One Finger	DRAW	Point your index finger to paint with glowing neon ink.
🖐️ Open Palm	ERASE	Sweep your palm across the screen to erase drawings.
🤌 Pinch	MOVE	Pinch thumb and index to drag the canvas (Pan mode).
✌️ Two Fingers	PAUSE	Lifts the pen so you can move your hand without drawing.
✊ Closed Fist	IDLE	The application rests while you move your hand freely.

---

🎙️ Voice Assistant Guide

Control your workspace by speaking these commands:

• Colors: "Red", "Blue/Cyan", "Green", "Sea", "Pink", "Yellow", "Purple", "White"
• Special Modes: "Rainbow", "Magic"
• Tools: "Undo/Back", "Clear/Reset", "Save/Download"
• Brush: "Larger/Bigger", "Smaller/Decrease"

---

🛠️ Tech Stack

Layer	Technology
Frontend	HTML5 (Semantic), CSS3 (Modern Animations), JavaScript (ES6+)
AI Intelligence	Google MediaPipe (Hand Landmarks Detection)
HCI Interface	Web Speech API (Real-time Speech Recognition)
Design System	Neon Pulse UX, Google Fonts (Outfit, JetBrains Mono)
Canvas	Dual-Layer 2D Canvas Engine (Core + Glow)

---

📂 Project Structure

ai-draw/
│── index.html        # Smart UI Structure & SEO Metadata
│── style.css         # Neon Design System & Animations
│── script.js         # AI Logic, Voice Engine & Rendering Logic
│── README.md         # Project Documentation & Guide

---

⚙️ Installation & Setup

1. Clone the Repository

   git clone https://github.com/SivashankarVP/ai-draw.git
   cd ai-draw

2. Run the Application

   • Simply open index.html in any modern web browser (Chrome/Edge recommended for Voice AI).
   • Note: Requires Camera and Microphone Permissions to function.

---

📧 Contact

📩 sivashankarvp7@gmail.com
🔗 GitHub Profile

---

Developed with ❤️ by Sivashankar V P