Develop an Interactive UI for a Microservice using Streamlit | by Sue Lynn | Towards Data Science

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.
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”.
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.
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.
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.
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.
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-coregoogle-cloud-bigquerypandaspandas-gbqgcsfsstreamlit
(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.
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 Imagegcloud builds submit --tag gcr.io/sue-gcp-learning-env/books_ui#Deploy the Imagegcloud 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).
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 :