A real-time digit recognition web application that uses machine learning to classify handwritten digits drawn by users. Built with TensorFlow.js and D3.js for visualization.
- Real-time Drawing: Interactive 28x28 pixel canvas for drawing digits
- Live Predictions: Instant AI predictions as you draw
- Confidence Visualization: Bar chart showing prediction confidence for all digits (0-9)
- Responsive Design: Works on desktop and mobile devices
- Modern UI: Clean, intuitive interface with smooth animations
Draw digits on the canvas and watch the AI model predict them in real-time with confidence scores.
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Machine Learning: TensorFlow.js
- Data Visualization: D3.js
- Styling: Custom CSS with Inter font
- Model: Pre-trained MNIST neural network
mnist-draw/
├── index.html # Main HTML file
├── css/
│ └── styles.css # Styling and responsive design
├── js/
│ └── script.js # Main application logic
├── model/
│ ├── model.json # TensorFlow.js model architecture
│ └── group1-shard1of1.bin # Model weights
└── README.md # This file
- Drawing: Click and drag on the canvas to draw digits
- Clear: Use the "Clear Canvas" button to start over
- Predictions: The AI will show predictions in real-time as you draw
- Confidence: The bar chart displays confidence scores for all digits (0-9)
- 28x28 pixel grid matching MNIST dataset format
- Smooth brush with multiple pixel weights for natural drawing
- Real-time pixel data processing
- Pre-trained convolutional neural network
- Trained on the MNIST dataset
- Optimized for web deployment with TensorFlow.js
- D3.js bar chart showing prediction confidence
- Smooth transitions and hover effects
- Responsive design for different screen sizes
Made with 💕 by hksamm
Note: The AI model requires an internet connection to load initially, but predictions work offline once loaded.