AI Digit Guesser

Project Description:

I built a full-stack web application that can accurately guess in real time what digit the user draws on a canvas. I used two different methods:

1. Writing a Pytorch model trained on MNIST
2. Sending the image to Gemini API

Technologies Used:

• Frontend: React, Vite
• Backend: Node.js, Express.js, FastAPI
• Machine Learning: Python, PyTorch
• AI API: Google Gemini API

How to Start

Prerequisites

• Node.js
• Python

Environment Setup (Required for Gemini API)

If you want to use the Gemini API version of this project, you must create your own API key.

1. Go to Google AI Studio and generate an API key.

2. Inside .env in backend/gemini-made-model:

GEMINI_API_KEY=your_api_key_here

Steps

1. Clone the Repository

   git clone <your-repo-url>
   cd Digit-Guesser
   

2. Install Dependencies

   npm install # in frontend folder
   pip install torch torchvision uvicorn fastapi # in backend folder

3. Start the Development Server

   To use the model I wrote:

   cd frontend/self-made-model-frontend
   npm run dev

   To use the Gemini API:

   cd frontend/gemini-made-model-frontend
   npm run dev

4. Start the Backend

   To use the model I wrote:

   cd backend/self-made-model
   uvicorn server:app --reload

   To use the Gemini API:

   cd backend/gemini-made-model
   node server.js

Screenshots

Starting Page

Guessing Page