The world’s leading publication for data science, AI, and ML professionals.

Develop an Interactive UI for a Microservice using Streamlit

Turn your python microservice to an interactive dashboard instantly

Photo by Sigmund taken from Unsplash
Photo by Sigmund taken from Unsplash

Streamlit in Summary

Streamlit is an open-source app framework and is a popular tool among data scientists as it helps them to quickly deploy their development into an interactive GUI / Dashboard. In addition, If you understand python, implementing Streamlit will not be complicated and only a small amount of time is required to be invested to pick up this tool and start using it.

Overview

In this article, we will deploy a microservice on Google Cloud Run that will have an Interactive Dashboard that is created using Python and Streamlit. If you would prefer to see the raw script, it is available on Github.

(1) Let’s start by preparing the Streamlit application code – (app.py)

We will need to import the required python packages that our application will be using. To allow Streamlit to works, we will need to add "import streamlit".

Import Modules Required
Import Modules Required

Next, we will prepare the main body of our application which consists of our python functions and Streamlit codes which determine what will be displayed on the interface. Let’s begin by adding a Header, Sub-Header, and Emoji.

Streamlit: Title, Sub-Header, Emoji
Streamlit: Title, Sub-Header, Emoji
  • st.title: suitable for defining the main title of the application.
  • st.subheader: suitable heading levels that can be used (another heading level will be st.header).
  • ":star:" This approach can be used to add emoji to the Interface⭐️.

Now that we have our Header & Subheader define, let’s add a drop-down menu on the left side of our interface so that users have an option to select. In this example, we will provide 2 options for users to choose from.

Streamlit: Side Bar
Streamlit: Side Bar
  • st.sidebar: Pinned our widget on the left.
  • st.sidebar.selectbox : A drop-down menu on the sidebar for users to pick their options.

With select options implemented, we will then need to include navigation logic whereby if the user selects the option "View all Books" a table of all the books will be printed and if the user selects the option "Seach for Books by Ratings", an interactive slider bar will be displayed where user can view books by the ratings. Here we will be using the if…elif conditions.

Streamlit: Print Table
Streamlit: Print Table
  • st.write: Can be used as a swiss-army knife to print text/variables.
  • st.table: Prints a static table whereby the entire table will be printed onto the screen. An alternative approach to print a dataframe table will be using st.dataframe.
Streamlit: Slider
Streamlit: Slider
  • st.slider: Allows selecting a range of values by passing 2 elements using the slider.

We are almost there, with our main application script completed we can now deploy our Microservice onto Google Cloud Run.

(2) Preparing the libraries required – (requirements.txt)

  • Add in ‘streamlit’ in requirements.txt file

We will need to add Streamlit Library in our requirements.txt file which the Docker Container uses to install the packages listed there.

# File: requirements.txt 
google-api-core
google-cloud-bigquery
pandas
pandas-gbq
gcsfs
streamlit

(3) Add in the command to run our Streamlit app in the Dockerfile – (Dockerfile)

As we are deploying our microservice on Google Cloud Run, we will need to containerize the application using docker. Adding the command ‘streamlit run’ in a Dockerfile is required in order to run the app. If you would like to understand more about Docker, you can refer to their documentation.

CMD streamlit run --server.port 8080 --server.enableCORS false app.py

You may also refer to the full Dockerfile on Github.

(4) Deploy the Application & Look at our Final Result!

We will deploy our application on Google Cloud Run which is a serverless environment platform. In order to successfully deploy our application to Google Cloud Run, we will need to build our docker image and push the image into Google Cloud Registry. Once the build is completed, we can deploy the newly built image on Cloud Run. Do ensure you have the files required to deploy the application before building the docker image.

Files required to Build Docker Image
Files required to Build Docker Image

Below is the command for deploying our application on Google Cloud Run (You can run the script on Cloud Shell):

# Set the Region 
gcloud config set run/region asia-southeast1
#Build a new Docker Image
gcloud builds submit --tag gcr.io/sue-gcp-learning-env/books_ui
#Deploy the Image
gcloud run deploy --image gcr.io/sue-gcp-learning-env/books_ui --platform managed

After successfully deployed, you can access the application via the URL address provided (You can also retrieve the link from your Cloud Run Instance).

Application URL after finished Deploying
Application URL after finished Deploying

Here is what our deployed microservice with Streamlit interface looks like:

Conclusion:

In this article, we learn how to create an interactive microservice with Streamlit. An interface that has the functionality of selecting options, printing results in a table, adding emojis, and using sliders to filter values. There are still a lot more you can implement with Streamlit which is not covered in this article such as progress bar, map plotting, draw charts, etc. I suggest you spend some time and play around with Streamlit cause I had fun playing with it! It is fun to view the outputs that you have developed and interacting with them. I also hope this tutorial will be useful to anyone out there learning to use Streamlit. Let me know in the comments if you have any questions or tutorials you might be interested!

References and Links :

[1] https://www.analyticsvidhya.com/blog/2020/10/create-interactive-dashboards-with-streamlit-and-python/

[2] https://raw.githubusercontent.com/omnidan/node-emoji/master/lib/emoji.json

[3] https://docs.streamlit.io/en/stable/

[4] https://docs.streamlit.io/en/stable/api.html#display-text

[5] https://docs.docker.com/


Related Articles