ALPHA.ai - EMNIST Character Recognition

Assignment 9 : Idtech Academy

ALPHA.ai is a full-stack web application for handwritten character recognition using a Convolutional Neural Network (LeNet-5) trained on the EMNIST Balanced dataset.

Users can draw digits or letters directly in the browser, and the system returns the top-3 most probable predictions in real time.

Website Link: https://alpha-ai-57ha.onrender.com

Prerequisites

• Python 3.11 environment (TensorFlow doesn't support Python 3.14)

Step 1. Clone the repo

git clone https://github.com/NullClassifier/ALPHA.ai.git
cd ALPHA.ai

Step 2. Create and activate a virtual environment

Windows

cd backend
py -3.11 -m venv .venv
.\.venv\Scripts\activate

Linux/MacOS

cd backend
python3.11 -m venv .venv
source .venv/bin/activate

Step 3. Install dependencies

Make sure you are inside backend/ folder

pip install --upgrade pip
pip install -r requirements.txt

Step 4. Start the server

From inside backend/ :

uvicorn main:app --reload

You will see the IP address of the started server.

Key Points

• Canvas resizing - The LeNet-5 architecture takes 28x28 grayscale images as input. But we must have bigger canvas for users to draw better. So I implemented a resizing algorithm that works as follows:

1. Extracts images data via getImageData() and finds the Bounding Box - the actual borders of the image being drawn (cut as much as blank parts of picture possible) of the drawn picture.
2. Make it square nxn by checking width and height to take max value out of them and make a square according to it.
3. Center the cropped image.
4. Scale Down to 28 x 28 with imageSmoothingEnabled = true; and drawImage(temp,0,0,28,28)

• Importing/Exporting - App supports both importing and exporting of pictures drawn. Model scales down the imported pictures in the same manner. But the exported photo quality is being kept in original size.

• Styling - Backend/Model implementation belongs solely to me, however Claude Haiku 4.5 was used for some ReactJS elements.

• wsgi.py - I am not sure if I will deploy via alwaysdata for now, since alwaysdata is not the best for FastAPI backend apps as I know. But it requires explicit asgimiddleware, asgi/wsgi adapter handling. It has no impact on project whatsoever so It can be safely ignored.

• ⚠️model.ipynb - It contains the exact steps I took for producing alpha_model.keras. If you are interested in checking it, please refer to the Source [1] to get the relevant datasets. The link will include multiple versions of the datasets. The model is explicitly developed on emnist-balanced-test.csv and emnist-balanced-train.csv. Those datasets take around 240 MBs, therefore they were not included in the repo itself.

Sources

[1] Christ Crawford EMNIST (Extended MNIST) https://www.kaggle.com/datasets/crawford/emnist/code

[2] “Transform Your Visuals: How To Resize An Image in JavaScript.” Cloudinary, https://cloudinary.com/guides/bulk-image-resize/transform-your-visuals-how-to-resize-an-image-in-javascript.