Man typing on a computer
Photo by Glenn Carstens-Peters on Unsplash

How to deploy your Machine Learning model using Streamlit

Learn how to deploy your machine learning model to the web using Streamlit.

Burhanuddin Rangwala
6 min readJan 30, 2022

--

So you have been learning machine learning for a while now and have created your first ML model; an Image classification model which is trained on the CIFAR-10 dataset. Pretty good, that’s one of the first steps to becoming a good ML engineer, but now what?

Do you just leave it like that, as a Jupyter notebook or as a file in your Github repository? No. You host it, on the web so that everybody can come and see how good your work is, because if you don’t no one will know how amazing you are. And as they say “If you create a ML model and don’t host it, did you even create one”. But you are a ML engineer and you don’t have much idea about web development and can’t make your frontend look good. So what do you do?

Streamlit comes to the rescue.

Logo of Streamlit
Source: https://cdn.analyticsvidhya.com/wp-content/uploads/2021/06/39595st.jpeg

Streamlit is an open source app framework for deploying your Machine Learning or Data Science project to the web in minutes. You can literally do this in less than 50 lines of code. It takes care of a lot of web development related stuff in the background for you. You can display real time graphs, create dynamic forms to get user input for your ML model, and a lot more.

In this blog I am not going to teach you how to create your own image classification model. There are a 100’s of tutorials and blog posts that do the same. Instead I am going to teach you the next step, “How to host your ML model using Streamlit”.

So here’s how you do it.

This is how your webapp should look once done.

Photo of finished website
Source: Author

You can see it here https://share.streamlit.io/bamblebam/cifar-10-image-classification/app.py

Prerequisites

It is essential that you already have a pretrained model saved somewhere as a hdf5 file or something else that you can use. You can check the TensorFlow docs about how to do so.

You also need to install Streamlit and any other libraries you require to do the preprocessing and run the model. For Streamlit, you can just use pip.

It’s recommended you do this in a separate virtual environment to avoid unexpected bugs.

If you don’t want to use your own model or are having difficulty with it you can get mine from the link below. It also has all the code in it.

Creating your WebApp

Setup

Create a file called app.py or server.py and import everything that you need. You can run the server by using the command.

Now whenever you make a change it will be visible in your webpage.

In Streamlit you can use inbuilt functions to set things like the title of the page, or render a h1, h2, p, or any other tag. You can also render form fields and display images. There is a lot more you can do with Streamlit, check out their docs for more.

Load your Model

Now what you have to do is load your model. You can do this by

This model is loaded whenever a client accesses your website. This can take time depending on your model size and complexity. So to prevent repeated reloading you can save the model in the cache using Streamlit. The allow_output_mutation=True part just allows you to modify the cache objects without Streamlit throwing an error, since by default all cache objects are immutable.

Note that if Keras can’t find your model try giving it the absolute path instead of relative path to your model.

You can also add a spinner animation to show your users that the model is loading using

Anything that is in the with block, while it’s loading will show a spinner. In this case you are loading your model using the function shown above.

Preprocess Image

Now you have to preprocess the image that will be fed to the model for prediction. For that you need to have a function to normalize and resize the images.

In this code block the load_image function takes an image, converts it into a 3 channel (RGB) image and converts the pixel values to float. After that we just divide the pixels by 255 to normalize the image and also resize it to 28x28 px. We then add an extra dimension to the image using expand_dims. We need to do this because during training our model takes a batch of images so the same needs to be done during inference time as well. This is synonymous to say that we are converting the image to a batch of images with size 1.

Depending on your model type you might need to do some additional preprocessing as well.

Get the Image

For the final part we need to take the image from the user. Here I am taking the URL for the image and getting it using the requests package. But you can directly ask the user to upload the image as well.

First we let the user input a URL for the image using the text_input function from Streamlit. We can also provide an optional default argument for the user.

Then in the if block we check if the image path is valid and we can fetch the image. If we can, we preprocess the image and predict its class using our model and display both the image and predicted class.

If it is invalid our try except block catches the error and displays an error message.

Here’s the full code.

That’s it. And in less than 50 lines of code we have our model ready to be hosted. Now the only thing left to do is actually deploy it.

Deployment

There are a lot of ways to deploy your Streamlit app. Like using an ngrock server. But the easiest way is to use the inbuilt deployment functionality of Streamlit known as Streamlit Cloud.

For this you need to have a Streamlit account (This is completely free and no ones going to ask you for a credit card. So don’t worry)

It is very easy to deploy your app using Streamlit Cloud. All you have to do is link your Github repository with it, and it will do it.

Once you have linked your Github account, just click on the button to create a new app and follow the steps. You can learn more about this using the official docs.

You also need to add a requirements.txt file so that the server knows what dependencies to install. You can do this using

That’s it. And in less than 50 lines of code and 30 mins your model is now live and up for all to see and use.

There is a lot of cool stuff that you can do using Streamlit. You can host a plethora of models or just host your data science dashboard. The possibilities are endless.

Hope you continue building in the future.

--

--

Burhanuddin Rangwala

Software dev helping startups scale to new heights. Follow me if you want to know more about software development, startups, and me.