Dog Breed Classification: Part 4 (App Deployment)

Shrinand Kadekodi
7 min readAug 6, 2022

In the last post we created a simple web app where user can upload a dog image as input and the model will give him the breed to which the dog belongs. You can find the post here -
https://shrinandkadekodi.medium.com/dog-breed-classification-part-3-simple-app-development-818966ba81ed
In this post we will host the app on cloud. For this there are two options that I have used — one using the Streamlit cloud and second is Azure services. Let’s start!

Streamlit Cloud

The process of using Streamlit cloud is very simple. The first part is to upload the code with the required assets to GitHub. Using GitHub link we can pull the web app onto Streamlit cloud which will host it.
In addition to the model file and code, we need requirements.txt which has the information of all the modules to be installed or needed for running the code. Streamlit cloud uses this txt file to install the dependencies.
One thing to note is that when using the requirement file, I got an error for opencv. On searching on the internet, the issue seems that Streamlit uses opencv in headless format. Hence the modification for opencv in the text file. Once this was done I was able to get the app running. You can check the app at this link.

Also check the below images on how to deploy the Streamlit app on cloud

Microsoft Azure

The next cloud service that I wanted to try hosting this app was using Microsoft Azure. Azure is not free but it does give some credit for one month using which the different Azure services can be explored.
At the time of creating this post, I had only 5 days left after which my free account would have expired. I had been looking into a Udemy basic course of Azure and honestly Cloud is not easy for beginners (at least for me 😥). There are a lot of services and within each of those services there are lot of settings to be taken care of.
Anyway, my first try was directly hosting the app using GIT through Azure Apps which was unsuccessful. I was not able to deploy the app and was only seeing the homepage open up. I tried searching for a solution and was not that successful (not that it cannot be done but I just was not able to get the right settings and process 😥).

Azure Container Registry

Searching the net, I came across a very good post showing how to deploy a Streamlit app using containers. It had all the steps needed for deploying the app using Azure Container Registry Service. The link to the post is here
The only change that I did was instead of using Azure cli (command line interface) for all the process, I used a mix of cli and the Azure cloud UI. So using a mix of both I was able to deploy the app on Azure Cloud!
The process described in the above shared post should work perfectly. But still just for everyone’s benefit I will describe the process 😜.

Implementation

The first step is to create your app container locally. For this you will have to have Docker installed on your workstation. You can install Docker from here. Docker for windows is a bit tricky, so please do read carefully the installation instructions. You need to have virtualization enabled and need to have WSL2 (Windows Subsytem for Linux) installed.
After Docker Desktop is installed successfully, create a folder and place all the needed files inside the folder as shown below:

As you can see, there are some extra files and folders in the directory. The Images folder contains the images needed for the homepage of the app.
Also in the last post you may have noticed that by default Streamlit runs the app on port 8051. But in this case I have changed to port 80. To make this change we need to do some change in the configuration file. The config.toml and credentials.toml files are added with the changed port setting (done in config.toml). I have done some minor changes in the config.toml file. In case if the file shared in the above post does not work, you can use the one I have created. Its here.
Next we have the requirements.txt which has the list of all required libraries to be installed.
To have all this in the container I need to write the Dockerfile. It is as below:

FROM python:3.8
COPY . /dogbreeddetection
WORKDIR /dogbreeddetection
RUN pip install -r requirements.txt
EXPOSE 80
RUN mkdir ~/.streamlit
RUN cp config.toml ~/.streamlit/config.toml
RUN cp credentials.toml ~/.streamlit/credentials.toml
WORKDIR /dogbreeddetection
ENTRYPOINT ["streamlit", "run"]
CMD ["dogDetectionApp.py"]

The next step is to login into Azure and create a Container Registry Resource. The below image shows the home page of Azure and in here you can create a resource for Container Registry.

The next image shows the creation of Container Registry. Please note the details as it would be handy when creating our Docker image in next steps when uploading the container.

After setting your required name and storage, I just skipped all the next process with default values and created the Container Registry Resource

Also please make sure that the admin access is enabled for this Resource as below

Alright so now the Container Registry is created. The next step is to push the Docker container to this registry. This can be done using Azure cli. Depending on what name is given to the registry and data group the following code can be changed as per the need —
az acr build -registry dogbreeddetection -resource-group data_grp -image dogbreeddetection . (the dot is important!) Be sure to be inside the folder where you have all the files and Dockerfile kept!
This will upload the container to your Azure Container Registry. After this we proceed to the next step.

Azure Web App

The next step is to create a Azure Web App. Again click on create a resource and select Web App as below

For this Web App resource, its name and location and different setting needs to be specified as below

In the next step select Image Source as Azure Container Registry as below:

Rest of the options i.e. Monitoring, Tags etc. can be kept default and then click on Deploy. Wait for some time and the Deployment will be done.
After Web App has been deployed, in all resource list you can see 3 resources as below:

Now to launch the application go to the Web App resource and there you will be able to see the link in the Overview section. On clicking the link you will be able to see the app as below

Finaallly the app has been deployed !!! The reliability of the app I created is not that good. I tried giving some images and the result you can see as below. It was able to detect the Malamute image correctly. Also it was able to correctly identify the movie poster as something else. But when I gave a cat image (I did capture it 😅) it showed something different which should not have happened!

Conclusion

With this we come to end of the post. I hope it was helpful! Honestly a lot of things could be improved in the series of exercises. The number of training images could be increased. There is a need for the images to be curated by a human as I had just taken the images from scraping as it is. I could see a lot of instance where Boston Terrier and French Bulldog images were same but just their names interchanged!
Also the model training could have been more better. And finally an easy way to create a web app and deploy on cloud could be there, like using Git instead of Container Registry.

Still I hope these posts were of some help to all! Let me know in the comments!

References:
https://towardsdatascience.com/deploying-a-streamlit-web-app-with-azure-app-service-1f09a2159743
A lot of googling, stackoverflow and udemy

Originally published at http://evrythngunder3d.wordpress.com on August 6, 2022.

--

--