PIYUSH KUMAR GHOSH

Posted on Apr 4

🧠 From Notebook to Web App: Building a Handwritten Digit Recognizer with TensorFlow & Streamlit

#tensorflow #deeplearning #webdev #machinelearning

Ever wondered how machine learning models recognize handwritten digits? I recently took on a fun project where I trained a model using TensorFlow and deployed it as a live web app using Streamlit — so anyone can draw a number and get a prediction in real-time.

In this post, I’ll walk you through the entire process, from building the model in a Jupyter notebook to turning it into an interactive app available online. No backend. No frontend. Just Python 🐍

🧰 Tools & Technologies

Python
TensorFlow/Keras – for training the CNN
Streamlit – to build the web app
streamlit-drawable-canvas – for drawing digits
Streamlit Cloud – for free hosting
GitHub – version control & deployment

📊 Model Training (in a Notebook)

I used the classic MNIST dataset, which contains 70,000 grayscale images of handwritten digits (0–9), each 28x28 pixels.

✅ Model Summary


from tensorflow.keras import layers, models

model = models.Sequential([
    layers.Conv2D(32, (3,3), activation='relu', input_shape=(28,28,1)),
    layers.MaxPooling2D((2,2)),
    layers.Conv2D(64, (3,3), activation='relu'),
    layers.MaxPooling2D((2,2)),
    layers.Flatten(),
    layers.Dense(64, activation='relu'),
    layers.Dense(10, activation='softmax')
])

🏁 Results

Training Accuracy: ~99%
Test Accuracy: ~98%
Loss: Stable and low

After training, I saved the model with:


model.save("mnist_digit_model.keras")

🎨 Building the Web App with Streamlit

The app lets users draw a digit on a canvas, processes the image, and displays the predicted number instantly.

Key steps:

Capture the canvas input
Resize it to 28x28
Preprocess: grayscale, invert, normalize
Predict using the trained model

I used the streamlit-drawable-canvas library to easily integrate a drawing board into the app.

🚀 Deploying the App

I pushed all the code + model to GitHub, and used Streamlit Cloud to deploy.

✅ Live App

👉 https://digit-predictor-hqfeqrpxxs5vvkgefv7ltp.streamlit.app/

📁 GitHub Repo

👉 https://github.com/Piyush-Kumar-Ghosh/digit-predictor

🤯 What I Learned

Saving/loading models: use .keras instead of .h5 to avoid compatibility issues
Handling canvas data and preprocessing for prediction
How to use Streamlit Cloud for quick ML deployment
Creating an intuitive UI for ML models matters!

🧩 Next Steps (Stretch Goals)

Add confidence scores or probability charts
Enable uploading images instead of drawing
Try other datasets like Fashion-MNIST
Convert it to a mobile app using tools like BeeWare or Kivy
Write a follow-up tutorial or make a YouTube demo

💬 Final Thoughts

This project was a great intro to end-to-end ML workflows — from training to deployment. If you're learning machine learning, I highly recommend turning your models into something people can interact with. It’s the most satisfying part!

Try it out and let me know what you think. And feel free to fork the repo to build your own version!

📢 Let’s Connect

If you enjoyed this, drop a like or comment!

I’d love to see what others are building with Streamlit + ML. 😊

DEV Community