Handwritten Digit Recognition System
2023/09 ~ 2023/10Built with vanilla JavaScript (no AI framework), this project loads the MNIST dataset for training. Users can write digits directly on the web interface using p5.js, and CSS is used to visualize the recognition results.

Technologies Used
Project Introduction
"Handwritten Digit Recognition System" is a midterm project I completed for the "Machine Learning" course in the second semester of 2023. Based on the concept of a Multilayer Perceptron (MLP), the neural network was implemented using vanilla JavaScript (without any AI frameworks). The frontend was built with HTML, CSS, and JavaScript for visualization, and p5.js was used to create a canvas where users can draw digits. The system captures and processes the drawn input using p5.js tools, segments the image into suitable input format, and feeds it into a custom-built neural network model that predicts the result as an array of 10 numbers, each representing the confidence score for digits 0–9.
To implement the MLP without relying on any AI frameworks, I studied multiple papers and resources on MLPs. This helped me understand key concepts such as feedforward and backpropagation, as well as essential mathematical tools like the chain rule in calculus, partial derivatives, the sigmoid function, and matrix transposition.
Project Links
Key Features
- Canvas for users to write digits; supports both desktop and mobile
- Real-time digit prediction after drawing
- Buttons on the canvas for clearing input
- Prediction results visualized on the right side