MNIST Digit Classifier This project is a web-based application built with Flask and TensorFlow that allows users to recognize handwritten digits. It features a user-friendly interface where you can either draw a digit on a canvas or upload an image of a digit, and a trained Convolutional Neural Network (CNN) will predict the digit.
What is MNIST? The MNIST (Modified National Institute of Standards and Technology) database is a large, widely-used dataset of 70,000 handwritten digits (0-9). It consists of 60,000 training images and 10,000 testing images, each being a 28x28 pixel grayscale image. It is a classic dataset in the field of machine learning and computer vision, often used as a "hello world" for image classification models.
How It Works The application is structured with a Flask backend that handles the logic and a simple frontend for user interaction.
app.py: This is the core of the web application. It's a Flask server that defines the routes for the web pages, handles image uploads, processes data from the drawing canvas, and uses the trained model to make predictions. It also manages the training process when initiated from the web interface. model_trainer.py: This script contains the CNNModelTrainer class, which is responsible for the entire model training pipeline. It loads and preprocesses the MNIST dataset, builds the CNN architecture using Keras (TensorFlow's high-level API), trains the model with data augmentation to improve robustness, and saves the trained model to a file (mnist_cnn_model.keras). predictor.py: This file contains the DigitPredictor class, which is responsible for loading the pre-trained CNN model and making predictions on new image data. It includes methods to preprocess the input image to match the format the model expects (a 28x28 grayscale image) before feeding it to the network for classification. templates/index.html: This is the main HTML file that structures the web interface. It includes a canvas for drawing, a file upload zone, and an area to display the prediction results. static/: This directory contains the frontend assets. css/style.css: Provides the custom styling for the web application to create a clean and modern look. js/app.js: This JavaScript file handles all the client-side interactivity, including drawing on the canvas, handling file uploads via drag-and-drop, and communicating with the Flask backend via AJAX to get predictions without reloading the page.
How to Run This Repo To get this project running on your local machine, follow these steps.
Prerequisites Make sure you have Python 3 and pip installed on your system.
- Clone the Repository First, clone this repository to your local machine using Git:
Bash git clone https://github.com/Xero-Ghost/MNIST-Digit-Classifier.git cd MNIST-Digit-Classifier
- Install Dependencies This project requires a few Python libraries. You can install them all at once by using the provided requirements.txt file:
Bash pip install -r requirements.txt
Alternatively, you can install the required packages individually:
Bash pip install flask tensorflow numpy pillow
- Run the Application Once the dependencies are installed, you can run the Flask application with a single command:
Bash python app.py
- View in Browser After running the script, you will see output in your terminal indicating that the server is running. Open your web browser and navigate to: http://127.0.0.1:5000/
You should now see the MNIST Digit Classifier application running! You can either Train the Model from scratch or use the pre-trained model to start classifying digits immediately by drawing on the canvas or uploading an image.