🧠 A deep learning application that recognizes handwritten digits in real time. Draw a digit on canvas or upload an image — the CNN model predicts it instantly with a confidence score and full probability breakdown for all 10 digits.

---

📑 Table of Contents

• 📌 About
• ✨ Features
• 🖥️ GUI Preview
• 📸 Screenshots
• 🏗️ Model Architecture
• 📊 Training Results
• 🗂️ Project Structure
• 🖼️ Sample Test Images
• 🚀 How to Run
  • ⭐ Option A — Kaggle (Recommended)
  • 🖥️ Option B — Own Machine (Local)
• 📦 Dependencies & Libraries
• 🧪 Topics Covered
• 👤 Author
• 📄 License

---

📌 About

This project uses a Convolutional Neural Network (CNN) trained on the famous MNIST dataset (70,000 handwritten digit images) to recognize digits 0–9 with 99.43% accuracy.

It features a fully interactive dark-theme web GUI where you can:

• 📂 Upload any handwritten digit image
• ✏️ Draw a digit directly on the canvas with your mouse or finger
• 🔍 Predict the digit instantly with confidence scores
• 📋 Track prediction history with timestamps

---

✨ Features

#	Feature	Description
🤖	3-Layer CNN	Deep convolutional network with 896K parameters
⚡	Smart Loader	Trains once, saves permanently — loads in 3 seconds after
📂	Image Upload	Supports PNG, JPG, BMP — drag & drop or click to browse
✏️	Draw Canvas	Freehand digit drawing with mouse or touch input
⚡	Auto Predict	Predicts automatically as soon as you lift your pen
📊	Confidence Bar	Visual gradient bar showing prediction certainty
🔢	All 10 Probabilities	Individual probability bar for every digit 0–9
📋	Prediction History	Last 8 predictions with source icon and timestamp
💾	Save Drawing	Export canvas sketch as PNG file
🎨	Dark Theme UI	Professional dark interface with custom CSS
🌐	Public Link	Gradio auto-generates a shareable public URL

---

🖥️ GUI Preview

🏠 Main Interface — Upload & Draw

📂 Upload Mode & ✏️ Draw Mode

📊 Results & 📋 Prediction History

---

📸 Screenshots

🏠 Overview

🖥️ Home Page

📊 Results & History

---

⚡ Predictions in Action

✏️ Predict 5 (Upload)

✏️ Predict 2 (Draw)

📋 History Panel

---

🏗️ Model Architecture

Input (28×28×1)
      │
      ▼
┌─────────────────────────────────────┐
│  Conv2D(32, 3×3, ReLU, padding=same)│  ← Block 1: Edge detection
│  MaxPooling2D(2×2)                  │
└─────────────────────────────────────┘
      │
      ▼
┌─────────────────────────────────────┐
│  Conv2D(64, 3×3, ReLU, padding=same)│  ← Block 2: Shape detection
│  MaxPooling2D(2×2)                  │
└─────────────────────────────────────┘
      │
      ▼
┌─────────────────────────────────────┐
│  Conv2D(128, 3×3, ReLU,padding=same)│  ← Block 3: Pattern recognition
└─────────────────────────────────────┘
      │
      ▼
Flatten → Dense(128, ReLU) → Dropout(0.5)
      │
      ▼
Dense(10, Softmax)
      │
      ▼
Output: Predicted Digit (0–9) + Confidence %

Layer	Output Shape	Parameters
Conv2D (32 filters)	28×28×32	320
MaxPooling2D	14×14×32	0
Conv2D (64 filters)	14×14×64	18,496
MaxPooling2D	7×7×64	0
Conv2D (128 filters)	7×7×128	73,856
Flatten	6,272	0
Dense (128)	128	802,944
Dropout (0.5)	128	0
Dense (10, Softmax)	10	1,290
Total		896,906

---

📊 Training Results

Metric	Value
🎯 Test Accuracy	99.43%
📉 Test Loss	0.0287
🔄 Epochs	20
📦 Batch Size	128
⚙️ Optimizer	Adam (lr=0.001)
📐 Loss Function	Sparse Categorical Crossentropy
🧪 Train Samples	60,000
🧪 Test Samples	10,000
⏱️ Training Time	~17 min (Kaggle GPU T4)

---

🗂️ Project Structure

📁 Handwritten-Digit-Recognition/
│
├── 📁 src/                          ← All source code lives here
│   └── 📓 training.ipynb            ← ONE notebook: Train model + Launch GUI
│   └── 📓 gui.ipynb                 • Cells 1–11  : Train & save model (once!)
│                                    • Cell 12: Launch interactive GUI
│
├── 📁 images/                       ← Sample test images for the GUI
│   ├── 🖼️ 0.jpeg
│   ├── 🖼️ 1.jpeg  1(1).jpeg
│   ├── 🖼️ 2.jpeg
│   ├── 🖼️ 3.jpeg
│   ├── 🖼️ 4.jpeg  4(1).jpeg  4(2).jpeg
│   ├── 🖼️ 5.jpeg  5(1).jpeg  5(2).jpeg
│   ├── 🖼️ 6.jpeg
│   ├── 🖼️ 7.jpeg
│   ├── 🖼️ 8.jpeg
│   └── 🖼️ 9.jpeg  9(1).jpeg
│
├── 📁 screenshots/                  ← GUI screenshots
│   ├── 🖼️ gui_main.png              ← Main interface (upload + draw)
│   └── 🖼️ gui_results.png           ← Results + prediction history
│
├── 🧠 digit_recognition_model.h5   ← Saved trained model (auto-generated)
│                                      ⚠️ Not in repo — lives on Kaggle
│                                      📍 /kaggle/working/digit_recognition_model.h5
│                                      💾 Save as Dataset: "mnist-digit-model"
│                                      📥 Loaded from: /kaggle/input/mnist-digit-model/
│
├── 📄 requirements.txt              ← Python dependencies
├── 📄 .gitignore                    ← Git ignore rules
├── 📄 LICENSE                       ← MIT License
└── 📄 README.md                     ← You are here

---

🖼️ Sample Test Images

The images/ folder contains 16 real handwritten digit samples to test the model!

Step	Action
1️⃣	Open the GUI → Upload Image section
2️⃣	Click 🔍 Predict Uploaded Image button
3️⃣	Select any .jpeg from the images/ folder
4️⃣	See the predicted digit + full confidence breakdown!

💡 Multiple versions of digits (e.g. 4.jpeg, 4(1).jpeg, 4(2).jpeg) let you test different handwriting styles!

---

🚀 How to Run

⭐ Option A — Kaggle (Recommended)

✅ Best option — Free GPU, no installation, works in browser, generates public shareable link!

✅ Everything is in ONE notebook — src/training.ipynb Train the model in the top half, launch the GUI in the bottom half!

🔹 First Time — Train + Launch GUI

1. Go to kaggle.com → Create → New Notebook
2. Settings → Internet: ON ✅ | Accelerator: GPU T4 ✅
3. Click File → Import Notebook → upload src/training.ipynb
4. Run All Cells (Cells 1–18)
5. Training takes ~17 min → then GUI launches automatically!
6. Output panel → find digit_recognition_model.h5
7. Click ⋮ → "Save as Kaggle Dataset" → name: mnist-digit-model → Save ✅

⏳ Cells 1–11  : Training... (~17 minutes on GPU T4)
✅ Test Accuracy : 99.43%
✅ Model saved  → digit_recognition_model.h5
📢 Save as Dataset: mnist-digit-model  (do once!)

⚡ Cell 12 : GUI launching...
🚀 Public URL  : https://xxxxx.gradio.live  ← click this!

🔹 Every Time After — Skip Training, Just Launch GUI

1. Open the same notebook
2. Run only Cells 12 (skip training cells!)
3. Click the public URL → GUI opens in 3 seconds! 🎉

⚡ Model loaded in 3 seconds — no retraining!
🚀 Running on public URL: https://xxxxx.gradio.live

---

🖥️ Option B — Own Machine (Local)

ℹ️ Requires Python installed on your laptop/PC.

🔹 Step 1 — Clone the repo

git clone https://github.com/Khansa972/Handwritten-Digit-Recognition.git
cd Handwritten-Digit-Recognition

🔹 Step 2 — Install all libraries

pip install -r requirements.txt

Or install manually:

pip install tensorflow>=2.10.0
pip install numpy>=1.21.0
pip install opencv-python>=4.5.0
pip install Pillow>=9.0.0
pip install gradio>=4.0.0
pip install matplotlib>=3.5.0
pip install seaborn>=0.11.0
pip install scikit-learn>=1.0.0

🔹 Step 3 — Open notebook in Jupyter

pip install jupyter
jupyter notebook

Open src/training.ipynb → Run Cells 1–11 to train (once) Then run Cell 12 to launch GUI → visit http://127.0.0.1:7860

⚠️ Training on CPU is slower (~30–60 min). Use Option A (Kaggle GPU) for fast training!

---

📦 Dependencies & Libraries

pip install -r requirements.txt

📦 Library	Version	🎯 Purpose
	≥ 2.10	CNN model building, training & inference
	≥ 1.21	Array & matrix operations
	≥ 4.5	Image preprocessing & resizing
	≥ 9.0	Image loading & format conversion
	≥ 4.0	Interactive web GUI with public URL
	≥ 3.5	Training accuracy & loss plots
	≥ 1.0	Confusion matrix & classification report
	≥ 0.11	Beautiful heatmap visualization

---

🧪 Topics Covered

deep-learning convolutional-neural-network image-classification mnist tensorflow keras gradio computer-vision handwriting-recognition ocr python machine-learning ai digit-recognition neural-network kaggle python3

---

👤 Author

Khansa Bint-e-Zia

• 🔗 GitHub: @Khansa972
• 📧 Email: khansazia627@gmail.com

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

⭐ If you found this project helpful, please star the repository! ⭐