In this project, we will build a simple AI-powered handwritten digit recognizer. You will draw a digit such as 0, 1, 2 … 9 using your mouse, and the trained CNN model will analyze the drawing and predict the digit.

💡 What happens behind the scenes?
Your drawing is first cleaned and resized to the 28 × 28 pixel format expected by the CNN. The trained model then analyzes the image and predicts the most likely digit. Finally, the application displays the predicted digit along with its confidence score.

• 💻 A Windows computer
• 🐍 Python 3.12
• 🌐 An internet connection for installing the required packages
• 📁 The project files provided with this tutorial
• ⌨️ Basic familiarity with Command Prompt and running Python programs

💡 Why are we specifying Python 3.12?
During the development of this project, explicitly using Python 3.12 provided a reliable environment for installing TensorFlow and running the complete application. Therefore, we will use the same Python version in this tutorial to make the setup easier and more predictable.

📌 Tip: If multiple Python versions are installed on your computer, don’t worry—we will explicitly use Python 3.12 when setting up this project.

Download the project ZIP file using the download link provided below. Extract the ZIP file to a convenient location on your computer.

📁 The project package contains the trained CNN model, Python programs, and supporting files required to run and understand the handwritten digit recognition application.

⬇️ Download Project ZIP

📂 Project folder structure

handwritten_digit_recognition/
│
├── digit_cnn.keras
├── final_digit_recognizer.py
├── my_digit.png
├── requirements.txt
├── step1_train_cnn.py
├── step2_train_and_save.py
├── step3_drawing_canvas.py
└── my_digit.png

📄 File	🎯 Purpose
digit_cnn.keras	Pre-trained CNN model
final_digit_recognizer.py	Final handwritten digit recognition application
requirements.txt	Required Python packages
step1_train_cnn.py	CNN training program
step2_train_and_save.py	Training, evaluation and model-saving program
step3_drawing_canvas.py	Drawing canvas for creating a handwritten digit image
my_digit.png	Sample/saved handwritten digit image

✅ Good to know
The final recognizer uses the pre-trained digit_cnn.keras model. Therefore, if you only want to test the completed application, you do not need to train the model again.

💡 For learning: The training programs are also included so that you can understand how the CNN is trained, evaluated, and saved before using it for real-time digit recognition.

💡 Learning note: Later in this tutorial, you can also learn how the CNN model is trained and saved. For now, we will first run the already-trained model and see the AI application in action.

Step 1 — Open the Command Prompt

On Windows, press shortcut key:

A small Run window will appear.

Then press Enter.

💡 Tip: You will use this Command Prompt window to check Python, create the virtual environment, install the required packages, and run the HDR project.

🐍 Step 2 — Check the Installed Python Versions

First, check whether Python 3.12 is installed on your computer.

Press Enter.

You can also check whether another Python installation, such as Python 3.14, is available.

⭐ Important for this HDR Project

If Python 3.14 is also installed, you do not need to uninstall it.

For this project, use Python 3.12 explicitly in the commands that follow.

💡 Quick Reference
🐍 Python 3.12 → py -3.12
🐍 Python 3.14 → py -3.14

🚀 Next: Now that Python 3.12 has been confirmed, we can create a dedicated virtual environment for the HDR project using that specific Python version.

🧰 Step 3 — Required Python Packages

This HDR project uses the following Python packages:

💡 Note about Tkinter

Tkinter is normally included with a standard Python installation on Windows. It is used by this project to create the graphical interface and drawing canvas, so you normally do not need to install it separately with pip.

🧠 3.1 Install TensorFlow

In Command Prompt, type:

✅ Press Enter and wait for the installation to complete.

🔢 3.2 Install NumPy

Next, install NumPy:

✅ Press Enter and wait for the installation to finish.

⭐ Remember: Both commands use Python 3.12 explicitly. This is important if another Python version, such as Python 3.14, is also installed on your computer.

🖼️ 3.3 Install Pillow

Install Pillow using:

✅ Press Enter and wait for the installation to finish.

🖥️ 3.4 Check Tkinter

Tkinter is different from the other packages. On Windows, it is normally included with a standard Python installation, so you usually do not need to install it separately with pip.

🔍 To check whether Tkinter is available, type:

If everything is correct, you should see:

⭐ Package Setup Complete
🧠 TensorFlow   •   🔢 NumPy   •   🖼️ Pillow   •   🖥️ Tkinter

TensorFlow, NumPy, and Pillow are installed with Python 3.12. Tkinter is checked separately because it normally comes with the standard Windows Python installation.

🚀 Next: Verify the TensorFlow installation before running the handwritten digit recognition application.

🔎 6. Verify All Required Packages

After installing the packages, it is a good idea to verify that everything is working correctly with Python 3.12.

🎉 Package Verification Complete

If all four checks run without an error, your Python 3.12 installation has the main components required for this HDR project.

💡 If an error appears: Check the package installation again and make sure you are using the Python 3.12 commands shown in this tutorial.

🚀 Next: With the required packages verified, we can move to the project folder and run the HDR application.

📁 7. Open the Project Folder in Command Prompt

After downloading the project ZIP file, extract it to a convenient location on your computer.

For example, suppose the project has been extracted to:

Now open Command Prompt and change to the project folder using the cd command.

Press Enter.

You should now see the project folder path at the beginning of the Command Prompt, similar to:

💡 Important: Replace G:\Handwritten_Digit_Recognition with the actual location of your project folder.

🔍 Why do we use cd /d?

The cd command is used to change the current folder in Command Prompt.

The /d option also allows you to change to a different drive. For example, if Command Prompt is currently on the C: drive and your project is on the G: drive, cd /d takes you directly to the required folder.

🚀 Next: Once Command Prompt is inside the project folder, we can check the Python version and continue with the HDR project.

▶️ 8. Run the HDR Application

Before running the application, make sure that:

🐍 8.1 Check the Python Version

In Command Prompt, type:

Press Enter.

You should see something similar to:

⭐ Important: Even if Python 3.14 is installed on your computer, continue using Python 3.12 for this HDR project.

🚀 Next: We will start the trained handwritten digit recognition application using final_digit_recognizer.py.

▶️ 8.2 Run the Final Application

Now start the application using Python 3.12:

Press Enter.

✏️ Try the AI recognizer

Use your mouse to draw a handwritten digit on the drawing canvas.
Then click Predict.
The trained CNN will process your drawing and display the predicted digit together with its confidence.

🖥️ Start Application  →  ✏️ Draw Digit  →  🔮 Predict  →  🎯 Digit + Confidence

💡 Remember: You do not need to train the CNN again just to test the completed project. The trained digit_cnn.keras model is already included with the project.

🖥️ Draw a Digit (0-9)

🖱️ Use your mouse to draw a digit on the white canvas. Try to make the digit clear and reasonably centered.

🎯 Try drawing:

0 1 2 3 4 5 6 7 8 9

🔮 Predict

🧠 The AI processes your drawing and sends the image to the trained CNN model. The model calculates the probability of each digit and selects the most likely one.

📊 Example result:

Digit: 7    Confidence: 98.XX%

💡 The confidence value can vary depending on the digit and how clearly it is drawn.

🔬 How is the result selected?
The final program compares the prediction probabilities for all ten digit classes and displays the class with the highest probability, together with its corresponding confidence percentage.

🎉 That’s it! You have just used a trained CNN model to recognize a handwritten digit.

🧹 Click:
Draw another digit and click Predict again.

💡 The Clear button resets the drawing canvas so that you can test another digit.

🎉 Congratulations!

You have successfully run an AI-based Handwritten Digit Recognition system using Python, TensorFlow and a CNN model.

💡 Why this approach?
A beginner does not have to spend time training a model before experiencing the result. You can first see the AI application working and then, if interested, learn how the trained model was created.

🧠 Ready to go behind the scenes?  →  Training Phase

💡 What is the result?
The CNN learns patterns from thousands of handwritten digit images. After training and evaluation, the trained model is saved as digit_cnn.keras.

🔗 Why is this important?
The saved digit_cnn.keras file is later loaded by the final recognition program. This allows the application to make predictions without training the CNN every time it starts.

from tensorflow.keras.datasets import mnist

(x_train, y_train), (x_test, y_test) = mnist.load_data()

🗂️ The dataset is divided into two parts:

🖼️ x_train and x_test contain the handwritten digit images.
🏷️ y_train and y_test contain the corresponding correct digit labels.

🎯 Why two sets?
The training set teaches the CNN how handwritten digits look, while the testing set is used later to check how well the trained model recognizes images it has not seen during training.

💡 Remember: x = images   |   y = labels

🖼️ Original pixel values: 0 → 255

🎯 After normalization: 0 → 1

🐍 This is done using:

x_train = x_train.astype("float32") / 255.0
x_test  = x_test.astype("float32") / 255.0

🔢 Simple example:

Original pixel value: 255   →   Normalized value: 1.0
For example, a pixel value of 128 becomes approximately 0.502.

💡 Why do we normalize?
Neural networks generally work better when input values are kept within a small, consistent range. Scaling the pixel values from 0–255 to 0–1 makes the image data easier for the CNN to process during training.

🧠 Remember: 255 ÷ 255 = 1.0   |   0 ÷ 255 = 0.0
So every pixel is converted to a value between 0 and 1.

28 × 28 → 28 × 28 × 1

💡 What does the 1 mean?
The 1 represents the grayscale image channel. A grayscale image needs only one channel because each pixel contains a single brightness value. A color RGB image, in contrast, normally has three channels.

🐍 The program uses:

x_train = x_train.reshape(-1, 28, 28, 1)
x_test  = x_test.reshape(-1, 28, 28, 1)

🔍 Understanding the shape:

-1 → Let Python automatically determine the number of images.
28, 28 → Height and width of each image.
1 → One grayscale channel.

✅ Now the images are ready!
Each MNIST image has the shape 28 × 28 × 1, which provides the CNN with the height, width, and grayscale channel information it expects.

🐍 The main model structure is:

model = tf.keras.Sequential([
    tf.keras.layers.Input(shape=(28, 28, 1)),

    tf.keras.layers.Conv2D(32, (3, 3), activation="relu"),
    tf.keras.layers.MaxPooling2D(),

    tf.keras.layers.Conv2D(64, (3, 3), activation="relu"),
    tf.keras.layers.MaxPooling2D(),

    tf.keras.layers.Flatten(),

    tf.keras.layers.Dense(128, activation="relu"),
    tf.keras.layers.Dense(10, activation="softmax")
])

🔍 Conv2D → Detects useful patterns such as edges and shapes.
📉 MaxPooling2D → Reduces the spatial size while retaining important features.
🔄 Flatten → Converts the extracted feature maps into a one-dimensional vector.
🧠 Dense → Combines the learned features to make the final decision.
🎯 Softmax output → Produces probabilities for the ten digit classes, 0 through 9.

⭐ Important: The final layer contains 10 neurons because the model must choose between the ten possible digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.

💡 In simple terms:
The CNN first extracts visual features from the handwritten image, gradually combines those features, and finally produces a probability for each digit from 0 to 9.

💡 You don’t need to understand every mathematical detail to run this project. However, knowing the basic purpose of each CNN layer will help you understand how the handwritten digit is recognized.

• Edges
• Curves
• Lines
• Simple shapes

🧩 In one line:
🖼️ Input → 🔍 Conv2D → 📉 Pooling → 🔍 Conv2D → 📉 Pooling → 🔄 Flatten → 🧠 Dense → 🎯 Output

💡 Simple idea:
The early CNN layers learn visual features, the middle layers combine those features, and the final layers use them to decide which digit the image represents.

↓

🧩 Remember the sequence:
🔍 Conv2D → 📉 MaxPooling → 🔍 Conv2D → 📉 MaxPooling → 🔄 Flatten → 🧠 Dense

🚀 What comes next?
After Flatten converts the learned features into a one-dimensional vector, the Dense layers use those features to determine which digit is most likely.

🏆 The highest probability wins.
In this example, digit 3 has the highest probability: 0.91 (91%).

Predicted Digit: 3

💡 In simple terms:
The CNN doesn’t simply say “this is a 3.” It first produces probabilities for all ten digits. The final program selects the digit with the highest probability and displays it as the prediction.

model.compile(
    optimizer="adam",
    loss="sparse_categorical_crossentropy",
    metrics=["accuracy"]
)

🔍 What do these settings mean?

Setting	Purpose
adam	Optimizer that adjusts the model’s weights during training.
sparse_categorical_crossentropy	Loss function used to measure how far the predictions are from the correct digit labels.
accuracy	Measures how many digit predictions are correct.

💡 Think of compilation as setting the rules for learning.

🤖 Optimizer → How the model updates itself
📉 Loss → How the model measures its mistakes
📊 Accuracy → How well the model is performing

⭐ Important: Compiling the model does not train the CNN. It only prepares the model for training. The actual learning happens in the next step when we call model.fit().

🚀 Next: The model is now ready to learn from the MNIST training data. We will use model.fit() to train the CNN.

model.fit(
    x_train,
    y_train,
    epochs=5,
    validation_data=(x_test, y_test)
)

🔍 What do these values mean?

💡 What is an epoch?
One epoch means the model has gone through the training dataset once. In this project, 5 epochs means the CNN gets five training cycles to improve its ability to recognize handwritten digits.

📈 What does TensorFlow display?

Epoch 1/5
...
accuracy: ...
val_accuracy: ...

Epoch 2/5
...
accuracy: ...
val_accuracy: ...

📊 Understanding the training output

accuracy → Accuracy measured on the training images.
val_accuracy → Accuracy measured on the validation images.
Epoch 1/5 → The first of five training cycles.

🧠 What happens during training?
The CNN compares its predictions with the correct digit labels, calculates the error, and adjusts its internal weights. This process is repeated across the training data so that the model gradually becomes better at recognizing handwritten digits.

⭐ Important: Training may take some time depending on your computer and the TensorFlow configuration. When training finishes, the model can be evaluated and then saved as digit_cnn.keras.

🚀 Next: After training, we need to check how well the CNN performs on data it has not used for learning.
This is done in the model evaluation step.

digit_cnn.keras

🐍 The model is saved using:

model.save("digit_cnn.keras")

⭐ Why is saving the model important?

Training a CNN takes time. Once the model has learned how to recognize handwritten digits, there is no need to train it again every time we want to use the application.

💡 We can simply load the saved model and use it to make predictions.

🔗 How does the final application use it?

The training program creates digit_cnn.keras.
The final recognition program loads this file and uses the learned CNN to recognize a digit drawn by the user.

🚀 The key idea: The saved `.keras` file contains the trained model. The final application does not need to learn from MNIST again; it simply loads the trained model and uses it for handwritten digit prediction.

step2_train_and_save.py

🧠 This is another complete training program. It performs the major steps required to create and save the CNN model.

▶️ You can use either training program:

py -3.12 step1_train_cnn.py

— OR —

py -3.12 step2_train_and_save.py

⚠️ Do not run both training programs unnecessarily.

Both scripts are intended to perform the training workflow. Choose one of them when you want to experiment with model training.

💡 Which one should a beginner use?

If you simply want to understand and reproduce the complete training workflow, use step2_train_and_save.py. It trains the CNN, evaluates it, and saves the resulting digit_cnn.keras model for use by the final recognizer.

🔗 Remember the connection:
Training program → 💾 digit_cnn.keras → 🖥️ Final Digit Recognizer

Once the model has been saved, you do not need to train it again just to run the final application.

digit_cnn.keras

🖥️ The final application loads this trained model and provides a drawing canvas where you can create a new handwritten digit.

✏️ You draw a digit

7

⚙️ 16. What does the program do?

🔍 Why is preprocessing necessary?
Your drawing is not immediately ready for the CNN. The program prepares it in the same general format used during training — including resizing it to 28 × 28, converting it to the required grayscale format, and scaling the pixel values.

⭐ This is where the project becomes interactive.

The model has already learned from the MNIST dataset. Now your own drawing becomes the input, and the trained CNN uses what it learned to make a prediction.

🧠 Learn once → 💾 Save → ✏️ Draw → 🤖 Predict

step3_drawing_canvas.py

🖱️ It creates a graphical window where you can draw a handwritten digit using your mouse.

🔢 For example, you can draw:

7

💾 You can save the drawing as:

my_digit.png

⭐ Important: The drawing canvas only creates the handwritten image. The CNN model is responsible for recognizing the digit.

The complete recognition process requires the drawing to be preprocessed into the format expected by the trained CNN before prediction.

🔗 Where does this fit in the project?

🎨 Drawing Canvas → 🖼️ Image → ⚙️ Preprocessing → 🧠 Trained CNN → 🎯 Prediction

🚀 Next: We will look at how the drawing is converted into an image format that the CNN can understand.

▶️ 2. Run the Drawing Canvas

Make sure your virtual environment is activated.

From the project folder, run:

✏️ 3. Drawing the Digit

Use the mouse like a pen and draw a digit on the canvas.

For example:

🎯 Try to make the digit reasonably clear and centered on the canvas.

🔬 You can experiment with different handwriting styles. This is one of the interesting parts of the project: seeing how the trained AI model responds to your own handwritten input.

⭐ Drawing Tip: Don’t worry if your handwriting is not perfect. Try several versions of the same digit and observe how the prediction changes.

🚀 Next: Once the digit has been drawn, the image can be saved and prepared for the next stage — image preprocessing before it is given to the trained CNN.

🧹 4. Clear the Canvas

If you make a mistake or want to draw a different digit, click:

This removes the current drawing so you can start again with a fresh canvas.

💾 5. Save the Drawing

After drawing your digit, click:

The program saves the drawing as:

📁 The image is saved in the project folder.

📂 Your project folder may then contain:

Handwritten_Digit_Recognition/
│
├── digit_cnn.keras
├── final_digit_recognizer.py
├── my_digit.png
├── requirements.txt
├── step1_train_cnn.py
├── step2_train_and_save.py
└── step3_drawing_canvas.py

⭐ Remember: Clear lets you start a new drawing, while Save stores the current drawing as my_digit.png.

🚀 Next: The saved image can now be used as input for the next stage of the project, where the image is preprocessed and prepared for the CNN.

💡 Key Point

You do not have to run Step 3 first.

If your goal is simply to test the completed AI application, you can run final_digit_recognizer.py directly.

🚀 For the quickest test: Activate the virtual environment, make sure digit_cnn.keras is present, and run final_digit_recognizer.py.

🔄 Its workflow is:

💡 Why is this more convenient?

You don’t need to create a separate image with the drawing canvas first. The final application provides its own canvas, preprocesses your drawing, sends it to the trained CNN, and immediately displays the prediction.

⚡ No separate drawing step is required.
The final recognizer already contains the drawing canvas, so you can start the application directly as long as the trained digit_cnn.keras file is available.

🎨 Draw → ⚙️ Process → 🧠 Recognize → 🎯 Predict

⚙️ The program first performs image preprocessing to convert your drawing into a form that matches the input format expected by the trained CNN.

🔄 The basic process is:

⭐ Why is preprocessing necessary?

The CNN was trained using 28 × 28 MNIST images. Your drawing starts as a much larger image, so it must be converted into a compatible format before the CNN can make a prediction.

400 × 400 → 28 × 28 × 1

💡 In simple terms: The preprocessing stage acts as a translator between your drawing and the CNN.

✏️ Your drawing is converted into the same general image format the CNN learned from during training.

🤖 Only after this conversion is the image passed to the trained model for digit recognition.

0 1 2 3 4 5 6 7 8 9

🧠 How is the digit selected?

The CNN calculates a probability for every digit. The program then selects the digit with the highest probability as its prediction.

📊 Example prediction

⭐ What does confidence mean?

The confidence value represents the model’s predicted probability for the selected digit. A higher value means the model assigned a stronger probability to that particular class.

The exact value can vary depending on the digit you draw, the way you write it, and how closely the drawing resembles patterns learned from the MNIST dataset.

🔍 Remember: The CNN does not receive the text “7” as input.

It receives the preprocessed image of your handwritten digit and calculates probabilities for all ten digit classes.

✏️ Drawing → ⚙️ Preprocessing → 🧠 CNN → 📊 10 Probabilities → 🎯 Highest Probability

🚀 Next: We will see how the final application allows you to clear the canvas, draw another digit, and test the CNN repeatedly.

⭐ Recommended Way to Demonstrate the Project

python final_digit_recognizer.py

🎬 Then follow these simple steps:

💡 Demonstration Tip

Try several digits and different handwriting styles. This makes the demonstration more interesting and lets you observe how the model’s prediction and confidence can change.

⭐ Complete Interactive Demonstration

✏️ Draw → 🎯 Predict → 📊 Check Confidence → 🧹 Clear → 🔄 Try Again

🚀 No retraining is required for the demonstration. The application uses the already-trained digit_cnn.keras model to recognize your handwritten digits.

💡 In simple terms: The CNN first learns from thousands of handwritten examples in the MNIST dataset. After training, the learned model is saved as digit_cnn.keras.

The final application then allows you to draw a new digit, preprocesses the drawing, and sends it through the trained CNN to obtain a prediction.

⭐ The important achievement

We have gone from training an AI model to building an interactive application that can recognize your own handwritten digits.

📚 Learn → 🧠 Train → 💾 Save → ✏️ Draw → ⚙️ Process → 🤖 Predict → 🎯 Recognize

⚠️ Problem	💡 Solution
TensorFlow installation fails	Use Python 3.12 for this project and install the packages inside the project’s virtual environment.
Wrong Python version is being used	Create the virtual environment specifically with Python 3.12: py -3.12 -m venv .venv
No module named tensorflow	Activate .venv and install the project requirements: python -m pip install -r requirements.txt
No module named PIL	Install Pillow: python -m pip install pillow
Model file not found	Make sure digit_cnn.keras is in the same project folder as final_digit_recognizer.py.
Drawing application does not open	Make sure you are using a standard Windows Python installation with Tkinter available.

⭐ One Important Tip — Python 3.12

If you have both Python 3.12 and Python 3.14 installed on your computer, you do not need to uninstall Python 3.14.

This project should use a virtual environment created with Python 3.12.

🔍 Quick Environment Check

If something is not working, first activate the virtual environment and run: You should see something similar to:

💡 Troubleshooting order: Check the Python version → activate .venv → install requirements.txt → verify TensorFlow → check digit_cnn.keras → run the application.