Handwritten Digits Recognition Web App, as you might have already guessed, is a web app where one can play around(once it's is deployed) and let a Machine Learning model(instead of using a pretrained model from the internet, I coded one from scratch with test accuracy of 98%) recognize the digit that's written.

For the frontend, I used React.js with the Axios library to take care of the http request/response in the frontend and for the backend, I used Django Rest Framework. I built the classifier with PyTorch.

For the time being, the app works like a charm only in my local instance. I have planned to incorporate some more things(see todo section) before I deploy it to the cloud. I'll link all the resources that helped me, down below.

1. Clone the repository and go to the directory
2. Install the node modules

cd draw-app
npm install

3. Install pip dependencies

pip install -r requirements.txt

• Frontend - React.js
• Backend - Django Rest Framework
• Classifier - PyTorch

1. Start the servers
   • To start the frontend server

   cd draw-app
   npm start
   

   • To start the backend server

   cd backend
   python manage.py runserver
   

2. Playing around with the MNIST classifier
   • To train the model

   cd classifier
   python train.py
   

   • To run the prediction

   cd classifier
   python predict.py
   

Pull requests are welcome. If you have any inkling of how to accomplish the missions in the todo section, you have my attention.

1. Project idea and reference - This amazing playlist by Pyplane
2. MNIST dataset - The MNIST Database
3. Loading the images and labels from idx.ubyte.gz file - This stack overflow answer
4. PyTorch Implementation - PyTorch Deep Learning Hands-On: Build CNNs, RNNs, GANs, reinforcement learning, and more, quickly and easily by Sherin Thomas and Sudhanshu Passi
5. PyTorch DataLoader, setting up training and prediction - PyTorch's comprehensive, well-written documentation
6. Django design principles - Django Philosophy
7. Sketching board react component - react-sketch
8. React Hooks - react.js documentation
9. Generate LeNet style model architecture image online - This web app

MIT