How to deploy your first web app

Rajat Paliwal
3 min readMay 20, 2021

--

When you first start learning something new, it's always a wonderful feeling to be able to showcase a final product (doesn’t matter if it's a simple one), made using your new skill and something which can be used by others. The same is the case with deep learning. So, today in this tutorial we are going to learn to train a simple image classifier and then deploy it as a web app.

Source:https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQDr9ULjOquuPdJ2V--OpedrVVI29pJJP80g&usqp=CAU

We will be going through an example of a simple fresh fruit classifier I built using fastai and PyTorch and deployed as a web app using Streamlit. This tutorial is based on chapter 2 of fastai course v3. So, let’s get started.

Step1: Get the data

The very first step for creating an image classifier is to gather some image data. There are a lot of wonderful resources such as UCI machine learning repository, DuckDuckGo or Bing as shown here or you can get an image dataset from Kaggle. I have used a fruit dataset from Kaggle. It contains fruits in 6 categories (fresh apple, fresh banana, fresh orange, rotten apple, rotten banana, rotten orange). Once you have acquired your dataset, let’s move to the next step.

Step2: Start loading data and training the model.

For the training, I have used a pre-trained resnet18 model and used transfer learning to train my model and then exported it out using pickle in .pkl format. You can find all the code in my Github repo. Once the model is trained and you are happy with the result, make sure to save the model in .pkl format on your Github repo for this project. Once this part is done, next comes the app deployment part.

Step3: Deploy your web app.

For this part, there are a few steps involved.

1). I tried voila with Binder and Heroku, did not work for me. So, I went ahead with Streamlit which is equally simple in terms of deployment.
2). First, create an account on Streamlit. It will take almost 24hrs to get the invite.

3). Once you have the link, link your GitHub account with your Streamlit account.
4). Next, add a requirement.txt file to the GitHub repo to install all the dependencies while creating the web app. My requirement.txt looks like as given below.


numpy
streamlit
torch==1.7.1
torchvision==0.8.2
fastai==2.2.5
jupyter

5). Next, you have to create a python file by any name of your choice, by default it is streamlit_app.py. This script creates the simple front-end GUI required to interact with the model and perform prediction. You can play around with this script to add more functionalities. Once, you are done add this script to your GitHub repo.

6). Now, we are all set to deploy to our web app. Go to Streamlit and log in to your account. Mention the repo name and streamlit_app.py script name and press deploy.

7). Within a few minutes, your first web app will be online. Make sure to share that, you will feel good.

Here is an example of my app classifying bananas in pyjamas :)

Source

The model thinks of them as rotten bananas and that’s fair enough cause of the clothes they are wearing.
Here is the link to my app: https://share.streamlit.io/rajatpaliwal/fruit_freshness_classifier/main. Do check it out with real fruit images and give feedback.

Towards the end, I hope this tutorial has helped you to make your very first web app using an ML model. It does give happiness to me, I hope you enjoy the process and outcome too.

Happy deployment!

Sources:
1).https://course.fast.ai/videos/?lesson=3
2). https://share.streamlit.io/
3).https://www.kaggle.com/datasets

--

--