Perception AI 🤖

Perception AI is an interactive web application that uses AI to process handwritten mathematical expressions. ✍️ Users can draw on a canvas, and the backend analyzes the image, solves the expression, and displays the result in real-time. Powered by FastAPI, React, Gemini AI, and other cutting-edge technologies, this app bridges human input and machine learning to enhance learning and problem-solving. 📚

VIDEO-2024-12-02-15-24-04.mp4

Technologies 🚀

• Frontend: React, TypeScript, Vite, Mantine, Axios, Draggable
• Backend: FastAPI, Python, Uvicorn, Pydantic, PIL
• AI: Gemini AI, Google AI Studio 🧠
• State Management: React Hooks, useState, useEffect, MathJax for LaTeX rendering
• Version Control: Git, GitHub

Features ✨

• Real-time Drawing: ✏️ Draw mathematical expressions on an interactive canvas.
• AI-Powered Calculation: 🤖 AI processes the drawing and solves the expression.
• Math Display: 📐 Solution rendered dynamically using MathJax for LaTeX-style display.
• Customizable UI: 🎨 Color swatches and drawing tools for a personalized experience.
• Draggable UI: 🖱️ Drag and reposition LaTeX output for ease of use.

Installation 🔧

Backend

1. Clone the repo:

   git clone https://github.com/yourusername/PerceptionAI.git
   cd AI-Backend
   pip install -r requirements.txt
   python main.py

Frontend

1. Navigate to the frontend directory:

   cd frontend

2. Install the dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Build the project for production:

   npm run build

New UI Features 🎨

• Enhanced Color Swatches: More color options for drawing.
• Improved Button Styles: Visually appealing buttons with better hover effects.
• Responsive Design: Improved layout and design for a better user experience.

Links 🔗

• Google AI Studio for AI model integration
• Vercel APP