Photo by Matt Duncan on Unsplash

Streamlit101: Deploying an AutoML Model Using Streamlit

A step-by-step guide on displaying the predicted safety ratings of roads to prevent road crashes and save lives.

Muhammad Ali
Feb 22 · 8 min read

uperb that you gave yourself a chance to learn to build and deploy fast and beautiful web apps using Streamlit, a low-code web app development framework made by data scientists specifically for data scientists.

Photo by Michael Jin on Unsplash

So, let’s dive right into building our road safety star rating web app. We’re going to use Streamlit to build a functional, interactive, and beautiful dashboard app. Plus, the good thing is that there’s no need of having any prior experience with front-end technologies such as HTML and CSS to get started.

Table of Contents

  1. Deployed App Link.
  2. Project Overview.
  3. Development.
  4. Deployment.
  5. App’s Github Repository.
  6. References.

Final Deployed Application

Streamlit Sharing Link

Note: For Omdena’s data privacy reasons, can’t share Star Rating Regressor Web App but for your guidance have built another application that can give you an idea on how the app will look like.

Now, before diving into the work, let’s first understand the project and the purpose of this app briefly.

Project Overview

So, the app was built as part of Omdena’s IRAP project to prevent road crashes and saving lives by effectively and efficiently predicting the star ratings of the roads for car users.

The Star Ratings are based on road inspection data and provide a simple and objective measure of the level of safety which is ‘built-in’ to the road for vehicle occupants, motorcyclists, bicyclists, and pedestrians.

We focused primarily on car vehicle occupants for this app. The app takes 66 different input features in order to provide a star rating prediction. The 66 features are different attributes that contribute towards the determination of a star rating. On the other hand, the output is going to be an integer value falling within the range of 1 to 5, with 1-star being the least safe and 5-star being the safest.

Development:

Now if you are starting out with Streamlit from very scratch then you have two options to use it:

  1. Install Streamlit locally using the following command:
Installing Streamlit

2. Request for having access to Streamlit Sharing, a free web service to deploy public Github repositories. Link is given below:

www.streamlit.io

Provided, that either you have installed Streamlit locally or have been granted access by the Streamlit Sharing guys, let’s move towards creating a fresh python file with the name streamlit_app.py. Note: you can name whatever you like but it’s a good practice to name files in such a manner that you can remember their function later on, just by looking at its name. Very well, now let’s start with importing all of the relevant libraries to our use case. Note that we’re going to use PyCaret’s Random forest Regression model but you can use any model you want. Since PyCaret provides us two great functions to load the model and to make a prediction using the saved .pkl using load_model and predict_model functions respectively.

Importing Libraries

Then our next task will be to create a rating prediction function that can return us predictions based on our model as well as input data provided by the user.

Defining Prediction Function

If you are worried about where this df came from, then keep reading :)

next task, create a variable named model that stores the model using the load_model function:

Loading Model

So, after creating the prediction function and loading our model, our next job is going to create the title of our web app as well as some description to elaborate our app’s purpose using st.title and st.write functions respectively:

Writing App Title and Description

Keep it in mind, that the text is going to appear on the face of your application, so be careful of what you are going to share.

Next, we need a way to allow our users to provide their feature inputs on our app. Since almost all of our features are categorical, I suppose it will be best to represent them with a slider widget. This gives us two benefits:

  1. We don’t need to worry about what value the user is going to provide us as an input because the slider will make our user to choose only a value that will fall within the range of the slider bar.
  2. Secondly, the range will make sure that our model will have the input in the right data type i.e. float for floating-point numbers and int for integers.

But it is totally dependent on case to case and if you want to learn more about Streamlit widgets do check out this reference link. So, to create a slider widget, we can use slider() function from Streamlit.

Making Sliders and Feature Variables

Phew! That was one truly laborious job but trust me, the juice is worth the squeeze. So, in the code above, we have simply passed some parameters to ourslider() functions such as:

  • label — The name of the feature that will appear on the face of the slider to make people understand what a particular slider is about.
  • min_value — Slider’s Minimum value. Beware of the fact, that the minimum value should represent the category’s minimum value. for example, if a category is 1–5, then the min_value should be 1.
  • max_value — Slider’s Maximum value. Considering the above min_value example, the max_value should be 5.
  • value — Default value of the slider. This will be the pre-set value of our slider which will appear by default when a user will open our web app
  • step — The amount of increment and decrement when you move the slider. Again, we should be careful in selecting the step as it should reflect the minimum difference among the values of our feature. for example, in 1–5, the minimum difference that can exist between any two values is 1 i.e. 2–1 is 1.

Afterward, we will have to make a dictionary of all the features in which we will map each feature’s slider label with its corresponding variable that we created above (in which the user inputs will be stored).

Mapping Feature Labels with Slider Values

Next task, convert all of those user input values into a DataFrame and then pass that data frame into the Streamlit’s table function which displays a static table i.e. its entire contents are laid out directly on the web page. But why we converted the features dictionary into a DataFrame? Remember the df parameter we mentioned above! Yup, so that we can use the resultant data frame as the input of our prediction function which we created earlier. I believe now it will be much easier for you to connect the dots.

Converting Features into DataFrame

Last but not least, we have reached the most fun part, making predictions. For that, first, we created a button using Streamlit’s button function and labeled it Predict to make everyone know its purpose. Afterward, we simply called our ratings prediction function i.e. predict_rating which we created earlier in our streamlit_app.py file. Finally, we again used Streamlit’s write function to show a message with the resultant prediction on the web page.

Predicting Star Rating

Hurrah! Now our web app is complete and it’s time for drum roll!!!! Deployment.

Deployment:

For deployment, again we have two options which are the following:

  1. To run our web app locally.
  2. To run our web app on streamlit sharing.

Option №1: Running Locally:

For running locally, we will need to open our prompt/terminal, then switch to the working directory of our streamlit_app.py Python file.

Finally, after reaching out to our working directory in the terminal, let’s enter:

Running Streamlit locally

And you will see the magic happening right in front of you. Streamlit will start making the app recipe for you and you will watch random commands keep running on your screen and then suddenly your default browser window will pop-up from nowhere and will render the user interface of your web app like the following:

Opening the Dashboard

OR

Option №2: Running on Streamlit Sharing

Before, discussing Streamlit Sharing, it is important to know that:

  1. you need to request access
  2. Streamlit sharing only supports public repositories not private.
Requesting the Streamlit Sharing Invite.

Now, For that, we will have to first create a requirements.txt file. Now in our particular use case that’s a piece of cake but for a complex application that can be a bit challenging. There are many free and open-source lightweight python packages available such pipreqs or pigar etc. I am mentioning this stack overflow link here and in the references as well so that you can further explore the options on your own.

Making Requirements.txt

Finally, after having our model, streamlit_app.py, and the requirements.txt file ready, we will push them on a public Github repository on our Github account. Afterward, we will visit the Streamlit Sharing website.

Opening Streamlit.io Webpage

Sign in with a Github account that Streamlit sharing has granted access to use it.

Signing in via Github

After getting signed in, we will click on the New app button.

Clicking on New App

and then will pass values of the required fields. When you will click on the first field, it will give you auto-suggestion of all the public repositories hosted on your Github account. You need to select one and then pass the name of your branch you want to deploy. One important thing to remember is that your streamlit_app.py should be in the same branch that you are willing to deploy on Streamlit Sharing along with model’s .pkl and requirements.txt files.

Clicking on Deploy

Finally, an interactive and functional Web User Interface will render like this on your browser:

Viewing the Dashboard

The best of the things is that you can share the link of your app with the world by just copying the URL of your app from the browser’s address bar.

And here it’s not an end but a beginning of a great journey! I hope, this article may help you in your projects to deploy awesome web apps. If you want to connect with me, do send me an invite on Linkedin and I am pretty sure, we might learn something new from each other. Well then, I‘ll see you soon, with some new topic and new discussion. Peace!

App’s Github Repo:

Note: For Omdena’s data privacy reasons, can’t share Star Rating Regressor Web App repository but for your guidance have built another application that can give you an idea on how the code will look like.

Github Repo Link

References:

Display interactive widgets using Streamlit

Automatically create requirements.txt

Create PyCaret and Streamlit App

Official PyCaret Regression Documentation

Official PyCaret AutoML Documentation

Written By:

Muhammad Ali

Learn more about this and other projects at Omdena:

www.omdena.com

Omdena

Building Real-World AI Solutions Collaboratively

Omdena

Omdena is a collaborative platform for building AI solutions to real-world problems through participating in AI/DS projects.

Muhammad Ali

Written by

Muhammad Ali is an Artificial Intelligence Engineer at Digital Product School. He loves to learn, teach and write about real-world data science applications.

Omdena

Omdena is a collaborative platform for building AI solutions to real-world problems through participating in AI/DS projects.