| Details | |
|---|---|
| Project | Project Spec |
| Host | Website |
| GIF | Project Running |
| Course | BSc (Hons) in Software Development |
| Module | Emerging Technologies |
| Author | Faris Nassif |
| Lecturer | Dr Ian McLoughlin |
-
Create a Flask web application that allows users to draw digits on a Canvas.
-
The application should pre-process the drawn image before running it through a trained Model which should return a prediction for the drawn number back to the frontend user.
-
The development of the Model should be documented in a Jupyter Notebook, including clear explanations, documentation and training of the Model.
In order to run the program on your machine, you must have the following installed
- Python 3.5 (Or Above)
- Tensorflow 2.0.0
- OpenCV 2.4.5 (Or Above)
- Keras 2.3.0
A handful of imports is also required, you can find those here.
- In your command line terminal:
git clone https://github.com/farisNassif/FourthYear_EmergingTechnologies - Navigate to the \app\ directory:
cd app - Run the program from runner.py:
python runner.py
Upon running you should be able to access the Web Application on http://127.0.0.1:5000/.
If you just want to try out the program without going through the chore of installing and running it you can here.
The Neural Network Model is the crux of this project. The creation is made possible thanks to Keras, a High-Level Neural Network API. The model itself isn't complicated thanks to Keras which encapsulates from the user a lot of the specificities and awkward parts of developing a Model.
The Model for this project has an accuracy of 99.16% making it highly accurate when tested against similar MNIST hand-written digits, however not too accurate when tested against unprocessed Canvas drawn digits, something I'll discuss when I break down the Backend.
The web application is essentially a Single Page Application that communicates with the backend via Flask.
The Frontend consists of a combination of HTML/Javascript/Bootstrap and Jquery.
The user may draw a number (or anything really) on the canvas and 'Publish' their drawing. The drawing is sent to the backend via an Ajax request. The drawing is transported as an Encoded Base64 String which must be decoded, processed, compared against the trained Model which will return a prediction to the Frontend.
Upon receiving the Base64 String it gets decoded into a .PNG image via the Base64 Python module. The image is then stored in memory and processed with help from the Pillow module. The image needs to be pre-processed as an MNIST Dataset image would be processed otherwise the predictions will be largely inaccurate. I accomplished this with help from OpenCV. Images were converted into arrays and had to be reshaped into 20x20 images and then centered onto a 28x28 background, ensuring the digit's center of mass was centered appropriately.
Once processed the image is then compared against the previously trained Model, which returns a result. The result is then returned from Flask to the Frontend and displayed via the DOM to the user.
The project turned out to be one I genuinely enjoyed working on and hope it's evident from the amount of work put into it. I implemented as much additional functionality as I could while keeping the project itself simple to use and user friendly and true to the specification.
All references are documented within relevant classes and notebook and major issues (both closed and open) were documented.