Introduction
This article is the second part of a series. Here I focus on building the web application for using the birds classifier developed in the first article. As I mentioned in the first part, being a machine learning engineer means not only training the model in Jupyter notebooks, but also being able to create an application that can be deployed and used directly by an end user. Also, it is very helpful for your portfolio as you now have an application which you can present to a recruiter. This helps immensely as they often don’t have a technical background and thus don’t want to look through the Jupyter notebooks to understand what you have developed in this project.
In the first part of this article, I want to guide you through the creation of the front-end part using html. In the second part, I show you how to develop the back-end using the Python library Flask.
You can find all the code related to this project in my Github repository. Figure 1 shows you the end application in action.

Creating the Front-End
Every application needs a front-end. The front-end part is very important, because this is the part the user is going to interact with. The front-end for this project is developed using html. The html code is created in Code Pen. Code Pen is a webpage, where users can create and visualize their html code online in an interactive environment. This is perfect for quickly prototyping a webpage!
The important part here is from line 37 to line 62. Here, a base64 image is created and visualized in case the user clicks on the "Choose File" button. Then the base64 string is formatted, such that it can be sent to the back-end application later on. When the user presses the "Predict" button, the predict endpoint of the hosted web page is called with a POST command. The predict endpoint is then pre-processing the input image and feeds it to the birds classifier model. This is further explained in the next section.
The predict.html file is stored in a folder called "templates". This is required for the Flask application later.
If you aren’t familiar with developing html code, I can really recommend you this Youtube Crash Course on html coding.
Creating the Back-End
The back-end application is responsible for the "magic" happening in the background. The back-end application for the birds classifier is developed using the Python library Flask, which is an easy to use web framework. Code 2 shows the full Python code of the back-end application. In line 19, the app itself is created.
Line 21 is a Python decorator and defines the default route. This function is executed when the application is started. In the "my_form" function, the front-end html file is linked to this application.
The "get_model" function loads the trained Keras model and stores it in the global model variable. In addition, a pre-processing function is provided. This function pre-processes the input image such that it has the of the network expected input format. The "load_classes" function is only for linking the predicted label to the according class name later.
In line 49, the predict route is defined. This route is called when the predict button in the front-end application is called. Here, the image is fetched, pre-processed and fed to the network. The network is then making the prediction. The predicted class label and the output score is then sent back to the front-end application, such that it can be displayed at the website.
The main function loads the model, the classes and starts the application at port 5000.
You can open the website in your browser under the link http://127.0.0.1:5000, after you started the Python application.
Conclusion
So now a full-fledged machine learning application has been developed. In the first article of this series, the optimal training strategy was found and the final model was trained. In this article, the corresponding web application was developed. This application could now be deployed to a cloud provider like AWS. When you want to read how I created a continuous Deployment pipeline to AWS Elastic Beanstalk, such that everyone can access the created web application, then I can recommend you reading my Medium article.
Thank you for reading my article to the end! I hope you enjoyed this article and the project I worked on. If you want to read more articles like this in the future, follow me to stay updated.