CanvasIQ

CanvasIQ transforms your browser into an intelligent digital canvas where creativity meets computation. Draw mathematical expressions, sketch diagrams, or create artwork—then let AI analyze, solve, and interpret your creations in real-time.

✨ Features

🎨 Smart Canvas Drawing

• Intuitive freehand drawing with customizable brush colors and sizes
• Responsive touch and mouse input for seamless drawing experience
• Clean, blackboard-style interface optimized for mathematical notation

🧮 AI-Powered Math Recognition

• Automatic recognition and solving of handwritten mathematical expressions
• Support for complex equations, calculus, algebra, and arithmetic
• Real-time LaTeX rendering for professional mathematical display

🖼️ Visual Intelligence

• AI-powered scene recognition for sketches and drawings
• Automatic identification of objects, shapes, and compositions
• Contextual analysis of visual content with detailed descriptions

🎯 Interactive Results

• Draggable calculation results for optimal canvas organization
• Live preview of mathematical expressions as you draw
• Seamless integration between drawing input and AI analysis

📱 Modern User Experience

• Fully responsive design adapting to all screen sizes
• Clean, intuitive interface built with modern design principles
• Fast, efficient performance optimized for real-time interaction

🛠️ Technology Stack

• Frontend Framework: React 18 with TypeScript
• Styling: TailwindCSS for modern, responsive design
• Canvas Rendering: HTML5 Canvas API with optimized drawing algorithms
• Math Rendering: MathJax for professional LaTeX expression display
• AI Integration: RESTful API communication via Axios
• Interactivity: Custom draggable components for result positioning

🚀 Quick Start

Prerequisites

• Node.js 16+ installed on your system
• Backend API server for AI processing (or use our demo endpoint)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/canvasiq.git
   cd canvasiq

2. Install dependencies:

   npm install

3. Configure environment: Create a .env file in the root directory:

   VITE_API_URL=http://127.0.0.1:8000
   VITE_APP_NAME=CanvasIQ

4. Start development server:

   npm run dev

5. Open your browser: Navigate to http://localhost:5173 and start creating!

🎯 How to Use

1. Start Drawing: Select your preferred brush color and begin drawing mathematical expressions or sketches
2. Get AI Analysis: Click "Analyze" to let AI interpret your drawing—whether it's solving equations or describing scenes
3. Organize Results: Drag and position AI responses anywhere on the canvas for better organization
4. Iterate and Refine: Continue drawing and analyzing to build complex mathematical solutions or detailed artwork

🤝 Contributing

We welcome contributions from the community! Here's how you can help improve CanvasIQ:

Getting Started

1. Fork the repository on GitHub
2. Create a feature branch:

   git checkout -b feature/amazing-new-feature

3. Make your changes and test thoroughly
4. Commit with descriptive messages:

   git commit -m "Add: Smart gesture recognition for geometric shapes"

5. Push to your fork:

   git push origin feature/amazing-new-feature

6. Open a Pull Request with a detailed description of your changes

Contribution Ideas

• 🎨 New drawing tools and brush effects
• 🧠 Enhanced AI recognition algorithms
• 📱 Mobile-specific optimizations
• 🌐 Internationalization support
• 🔧 Performance improvements

📄 License

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

👨‍💻 Author

Chayan Mondal - Creator & Lead Developer

---

CanvasIQ - Where imagination meets intelligence. Draw your ideas, solve your problems, and explore the intersection of creativity and computation.

Built with ❤️ using React, TypeScript, and AI