What
is Streamlit?
Web app maker for Engineers
Introduction
After getting into Python for a while, I have done a few projects, including web bots, machine learning, deep learning, etc. Often times my project requires some kind of interface to control the project program or send data to the program (etc: picture). This could be done by PyGame, the terminal, or making a web application. But getting familiar with those skills takes a lot of time, and will be time-consuming to build these interfaces for one project -- that is until I found Streamlit. I want to share this incredible Python web-building tool and show you how I used it to create my first deployed web application.
In fact, this web application is just a showcase of basic streamlit functionalities.
Streamlit architecture
Streamlit tries to make writing a website as similar to writing Python code. This means the website is generated by Python code from top to bottom. To do this, you don't actually run the "app.py" file in the IDE (VS code). Instead, you run the app.py in your terminal(etc. Conda). This is because the streamlit module prases your code, and uses its smart algorithm to do the heavy lifting of turning the streamlit syntax into website code(This is how I think it works).
I will say that a streamlit website is composed of these components:
Interactive elements: Streamlit provides easy ways for you to create interactive elements, such as buttons, lists selection, sliders, text input, etc. These elements form the backbone of making the web app controllable.
Information visualization: Streamlit provides powerful visualization tools that are more than enough for your Python projects. These tools support pandas dataframe, matplotlib elements, geo-location(maps), etc. Even better, using these visualization tools on your website is super convenient, as you will see later. But this also includes the static and dynamic text you can put on the interface.
Element formatting: Flexibility is not what streamlit rocks, but they still have some support. You can format your website with the "column" class, "sidebar" function, and others(I still haven't learned).
Website run time management: Stream makes life easier by automating complex website stuff at the back. First, there is an "Always re-run" option, which will automatically rebuild and reload the website once streamlit detects changes in your script. Second, streamlit allows you to specify functions or resources you want to cache. Caching means streamlit will store data/process so that the website doesn't have to repeat the same calculations that waste time.
My website rundown
You can open the code in Git Hub side by side with the website for better understanding.
Section 1: Information visualization:
The first section "magic input" is some simplified ways of displaying information such as text and variables. Basically, streamlit knows when you are trying to print something on the website. Magic input syntax includes:
"st.write()": An automatic visualization function from streamlit. It looks at your datatype and determines how to render/display it properly.
"""text""": wrap your text with """ and """. This is good for static text
"text", var: put a variable after a quoted str with a comma. The variable display will be updated when it changes
var: Just write the variable! Streamlit handles the rest!
Besides text, you can also use live graphs and plots. Here the line chart and map functions are shown. There are many more types of Visualization tools that I still haven't explored yet. Check out this check for me:
API Reference - Streamlit Docs.
Section 2: Interactive elements:
This is my favorite aspect of streamlit. Create an interactive element by defining a variable with the widget class. For example, to create a slider that chooses a number to calculate its square, just write:
x = st.slider('x')
Now, the variable x will be linked to the slider and can be used to calculate its square.
This goes the same for checkboxes and selection boxes. This clean way of making buttons and selections on a website is just too good to be true. I you were to do this the traditional way, like in Flask, first, you will have to create a button API, then you will have to write html to display the button and specify what endpoint the button goes to...
Section 3: Element formatting:
The sidebar is a panel that can be pulled and folded from the left side of the website. It can be a great control panel for your project. For example, you are making a machine-learning app that classifies healthy and sick potato leaves. You can put buttons and sliders that adjust the model parameters and training settings. You can also add an image uploader to do classification on the go.
The column class also the programmer to define where an element should be located on the page horizontally. It works by splitting the horizontal space into N number of columns, and you can put an element in any column to control its position.
Website run time management:
A quick thought on the progress bar, it is more like a visualization element, which you can use in conjunction with your function code to give the website user feedback on the running process.
Caching allows skipping repetitive function calls to improve performance. "@st.cache_data" is for caching serializable data(int, str, list, Dataframe), while "@st.cache_resource is for caching unserializable data(tf.model, server connections)"
Deploying my website
I have to say I did not expect the process to be so easy, especially since I know almost nothing about making websites and backends.
Step 1 Signing up
Go to GitHub and sign up:
GitHub
Step 2 Put web app files in a git repository
- Click "+" sign and create new repository
- Enter some name for your repo and leave everything default
- Inside the repo, upload two flies(at least for my website). First, your streamlit web app script. Second, a requirements.txt file containing the dependencies of your app. See the format in my git repo
- Go back to streamlit cloud > get started > new app. Then, streamlit cloud will request access to your GitHub. After approving, just follow the setup page to get your website running online!
Conclusion
We have introduced what is Streamlit, and how easy it is to use it to make websites. We look at some streamlit functions and capabilities, and how to deploy a web app streamlit cloud online.
There are a few more things I am intrigued to learn in order to make things with streamlit. That is connecting to a database, web scraping, and calling other APIs. These will be fundamental skills for using streamlit to make actual useful apps.
After doing this web app, I had a great project idea that I might work on in the future. I want to make an AI university student advisor, that can answer any question regarding university information, course information, requirements and conditions, events, and available resources. I study at HKUST in Hong Kong by the way. My Uni has been adopting AI technology fastly, but they still haven't done this project idea. I think this might be a great opportunity for me to get to meet people and gain experience with developing AI technology.
To be continued...
