MNIST-Draw

Try the Live Demo deployed on Streamlit Community

This repository contains a single webpage that allow users to draw digits (0-9) by hand and have it classified in real-time by a simple Convolutional Neural Network model trained on MNIST dataset.

CNN model

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━┓
┃ Layer (type)                         ┃ Output Shape                ┃         Param # ┃
┡━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━┩
│ conv2d_15 (Conv2D)                   │ (None, 26, 26, 32)          │             320 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ max_pooling2d_10 (MaxPooling2D)      │ (None, 13, 13, 32)          │               0 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ conv2d_16 (Conv2D)                   │ (None, 11, 11, 64)          │          18,496 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ conv2d_17 (Conv2D)                   │ (None, 9, 9, 64)            │          36,928 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ max_pooling2d_11 (MaxPooling2D)      │ (None, 4, 4, 64)            │               0 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ flatten_5 (Flatten)                  │ (None, 1024)                │               0 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ dense_10 (Dense)                     │ (None, 100)                 │         102,500 │
├──────────────────────────────────────┼─────────────────────────────┼─────────────────┤
│ dense_11 (Dense)                     │ (None, 10)                  │           1,010 │
└──────────────────────────────────────┴─────────────────────────────┴─────────────────┘

Centralizing images

Above CNN's simplicity does not allow to achieve the shift-invariance to images, thus a simple way to mitigate this problem has been implemented from image side by centralizing and croping to the region containing digit.

Setup

Python 3.10:

• Tensorflow.keras is used for model training and inference.
• Streamlit is used for web application generation and deployment.
• streamlit-drawable-canvas extension is used to achieve the drawing on page feature.

# Clone this repository
git clone https://github.com/yiz-wu/SingleDigitRecognizer-MNIST-st.git

# Change to the repo root directory
cd SingleDigitRecognizer-MNIST-st

# Install required modules
pip install -r requirements.txt

Usage

To launch the website locally, execute

streamlit run webapp.py