🌀 DoodlyAI

DoodlyAI is a real-time drawing recognition application that analyzes your sketches as you draw.
Simply sketch on the canvas, and the system interprets your artwork.
It uses a hybrid recognition pipeline that blends pattern detection, shape analysis, and a MobileNet model to deliver accurate and reliable predictions.

🧡 Features

• Multiple Drawing Tools - Pencil, pen, brush, and eraser with customizable sizes
• Shape Tools - Create perfect circles, rectangles, triangles, and lines
• AI Recognition - Hybrid detection using QuickDraw patterns & MobileNet
• Undo/Redo - Full history management for your drawings
• Object Selection - Select, move, and delete individual drawing elements

🌐 Demo

Live Demo

👩‍💻 Tech Stack

• React - UI framework with hooks for state management
• Tailwind CSS - Utility classes for modern styling
• TensorFlow.js - Machine learning framework running in the browser
• MobileNet - Pre-trained CNN model for object recognition
• QuickDraw - Pattern detection inspired by Google's Quick draw.
• Lucide React - Beautiful icon set for UI elements

AI Recognition System

• Pattern Detection - Recognizes common shape combinations
• QuickDraw Algorithm - Analyzes stroke patterns and shape relationships
• MobileNet - Deep learning model for general object classification
• Shape Detection - Fallback analysis for basic geometric shapes

Custom Utilities

• preprocessUtils.js - Canvas preprocessing and optimization for AI models
• quickdrawUtils.js - Pattern matching and shape detection
• aiUtils.js - Hybrid AI analysis coordinator and model manager

📦 Installation

What You'll Need

• Node.js
• npm

Setup Steps

1. Clone this repo

git clone https://github.com/yusraSyed05/DoodlyAI.git

2. Go to the project folder

cd DoodlyAI

3. Install packages

npm install

4. Run the dev server

npm run dev

📁 Project Structure

doodlyai/
├── public/
├── src/
│   ├── components/
│   │   ├── ai/
│   │   │   ├── AIPanel.jsx
│   │   │   └── index.js
│   │   ├── canvas/
│   │   │   ├── MainCanvas.jsx
│   │   │   ├── PreviewCanvas.jsx
│   │   │   └── index.js
│   │   ├── layout/
│   │   │   ├── Header.jsx
│   │   │   └── index.js
│   │   └── toolbar/
│   │       ├── ShapeTools.jsx
│   │       ├── SizeSelector.jsx
│   │       ├── Toolbar.jsx
│   │       └── index.js
│   ├── utils/
│   │   ├── aiUtils.js
│   │   ├── cursorUtils.js
│   │   ├── drawingUtils.js
│   │   ├── preprocessUtils.js
│   │   ├── quickdrawUtils.js
│   │   └── shapeUtils.js
│   ├── DoodlyAI.jsx
│   ├── App.jsx
│   ├── index.css
│   ├── App.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── LICENSE
├── README.md
├── index.html
├── package.json
├── package-lock.json
├── postcss.config.js
├── tailwind.config.js
└── vite.config.js

🤝 Want to Contribute?

Contributions are welcome!

1. Fork the repo
2. Make a new branch
3. Commit your changes
4. Push it
5. Open a pull request

📄 License

MIT License - see the LICENSE file