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. 😊