Image Classification Model & Deployment with Flask and Azure WebApp
An end to end pipeline on creating a Deep Learning model to creating a Web Application
Most often we are stuck with codes sitting in our computer. We would like a simple deployment pipeline that would enable our customers to check our codes, accuracy etc., and give us a quick go, no-go to our POC. In this light it becomes very easy if we can enable our customers to simply test our models from a website.
Creating and deploying web applications have become much easier thanks to Azure. In this article the focus will be on deploying a trained classification model on Azure services. I will not be focussing on the code for the classification model or go into its accuracy, but will focus on the end to end pipeline. I use VS Code for most of my coding thanks to its super useful modules that link to Docker, Azure, Kubernetes, GitHub etc. The entire repository is available here. The following points will be covered :
- Creating an image classification model and saving in required format
- Creating a wireframe Flask Model
- Run on Local and deploy on Azure
- Test on web
- Additional notes
Classification model example
Let’s take a binary classification model created on a set of images (dataset here).
A VGG16 model was used to train the set of images. The model is saved as a h5py model (.h5 model). Create a folder and save the .h5 and .py models in the same folder. It is advised to always create a virtual environment for any project. This has a twofold advantage: a) It helps in keeping the versions of installed packages in one place and b) It is easy to create a requirements file from a single environment. The saved model will be served in Flask to receive requests and predict on new images.
Creating the Flask App
Now we will have to create a simple flask model. The flask model contains an app.py file that calls the model and a wireframe http model for uploading an image file and throwing the result on the web.
The main structure of the app.py file are:
a) A Block allowing various image types (jpeg, png etc)
b) A “predict” block for preprocessing and calling the file and making a prediction based on the h5 file created based on the home.html file we create.
c) “GET” and “POST” methods. GET is a http method for receiving information from the web server and POST is to send information to it.
In addition to the app.py file, we create a Templates Folder that hosts our home.html file. This html file serves to work on the application to upload an image and predict.
Running the model on local server
From the command line we run :
Browse button enables the uploading of test images. Output is an image of the uploaded file and a prediction. The webpage as can be viewed on a local server looks like this. This is already the first stage of an end to end ML model deployment!
Deployment in Azure Web app
For developing a web app in Azure, there are a couple of prerequisites.
- Azure account — Create an account on Azure here. Free credits are available. There are two approaches — either code everything from VS Code (get the extension for Azure by searching for ‘Azure’ in the VS Code Extensions view (Ctrl+Shift+X)) or go to Azure portal and create the web app from the Portal
- GitHub account on the web or local. It is also possible to host static websites and uploading files on Azure via FTP but I prefer the ease of Git. Create a procfile of the form << web: gunicorn app:app >> and save the file in the same folder as above. Gunicorn is a WSGI http server that is compatible with a number of web servers and is a good deployment tool.
One can upload the files on GitHub and link it to the created app on Azure. Alternatively, once you have these extensions installed in VS Code, fire up the Azure app service and enter a unique name for the web app. The app will have the format of <webappname>.azurewebsites.net. Now select a resource group (or create new) that will host the app and upload the files from Git. I will explain the first method below.
Firstly, create a resource group on Azure portal and create a Web App from it as shown in the picture.
Once the app is reviewed and created, deploy the resource. Go to the created resource and the Deployment part-
One will be asked to provide GitHub credentials. Provide username, password and the like. Trace the Github repository where the files are located. Connect to the repository with the Branch, complete the connections by following the self-explanatory steps (connecting via Kudu or Github should work). Once the deployment is complete the website is ready!
An alternate is to add the following lines to upload the files from Local Git by first creating the app on Azure as mentioned above and linking to Local Github in the Deployment Center and copy the url and enter username and password. We will use these to connect our local git to Azure.
Initializing the repository containing the files as
git add .
git remote add azure <copied url>
git push azure master
Both methods would result in a webapp that can be encrypted with security credentials. You can see a snapshot of the same app with another test image, now running on Azure website. That’s it. An end to end web app on Azure has been developed right from a deep learning algorithm to hosting it on the cloud!!
Additional Notes and Closing Thoughts
There are multiple ways one can create webapps on Azure — Local Git, GitHub, BitBucket, Kudu, FTP, VS Code extensions etc. Here I have provided a couple of methods of doing the same without going deep into the aesthetics of the website, which is left to the individual’s interest. Do check out the GitHub repo for the codes. This was just a dive into web service on Azure and its ease of usage. Hope it was helpful. In the next article I will develop a docker image on Azure and run the app from the container.
- Özgenel, Çağlar Fırat (2019), “Concrete Crack Segmentation Dataset”, Mendeley Data, v1http://dx.doi.org/10.17632/jwsn7tfbrp.1