How to make an interactive web app using Streamlit.


What is Streamlit?

Streamlit is a python package that allows you to make deployable interactive web apps for your data science projects all without knowing a single line of HTML code, with minimal lines of python code. Streamlit allows you to do a multitude of things without having to worry about any Javascript or CSS code etc.

It automatically refreshes the web app when there is an input given interactively or if there is a change to the source code, which increases the usability exponentially.

Why use Streamlit?

Data Scientists, ML/AI engineers, etc. don’t have the time or patience to learn the complete web development stack so that they can deploy their projects online. It would take a considerable amount of time to learn how to make a website and how to integrate your project with the website. Time is essential.

That is where Streamlit delivers, it requires basic python knowledge to set up and run, and it provides a fast and seamless interactive interface as a web app.

Installing Streamlit

$ pip install streamlit

Yes, it’s that easy to install a package.

To check whether it is working, run this

$ streamlit hello



You will be met with the streamlit hello web app on your browser. Choose a demo from the dropdown to see how it works:

If you want to check out the source code of the demos, check here https://github.com/streamlit.

Type the streamlit code just as you would in a normal Python j, and when you want to run the app, do the following

streamlit run filename.py

Basic features of Streamlit

Let’s go over the core features that Streamlit has to offer.

Writing/Drawing on the webpage

import streamlit as st
x = 399.99
st.write('The price of this Chair is: $', x)

The above code results in the following being displayed on the screen.


Streamlit also has magic commands to skip using st.write( ). It can be used as follows

import streamlit as st
x = 399.99
'The price of this Chair is: $', x

Widgets

There are three options we can use for widgets:

  • st.slider( )
  • st.selectbox( )
  • st.button( )

We can use these widgets to act as interactive elements to get input 

We can use these widgets to act as interactive elements to get input from the user. We can just treat these as python variables.


import streamlit as st
x = st.slider('x')
st.write('The Price of this chair is: $', x)
y = st.selectbox('Select one',('Cat', 'Dog', 'Zebra'))
st.write("The world's best ", y)
if st.button('Touch Me Not!'):
st.write('You shall not pass!')

Sidebar

Streamlit allows us to neatly organize our widgets onto a sidebar that can be accessed in the left panel with st.sidebar, each widget is passed to this if we want it on the sidebar.

import streamlit as st
add_slider = st.sidebar.slider(
'Select a price',
0.0, 500.0, 399.99)
add_selectbox = st.sidebar.selectbox(
'Who is the smartest',
('Baby Yoda', 'Elon', 'SpongeBob')
)


Caching

Streamlit uses a local cache to speed up the processing of functions. To tell streamlit to use the cache, we add the @st.cache decorator to our function.

import streamlit as st@st.cache
def really_slow_processing_func(args):
# Do something slow like training a model
return #something

According to streamlit documentation, st.cache checks the following things:

  1. The input parameters that you called the function with
  2. The value of any external variable used in the function
  3. The body of the function
  4. The body of any function used inside the cached function

Conclusion

These are the key features streamlit provides, and there are so many more that I have not listed here. Use streamlit to turn your piece of code into something interactive to appease the audience!

Refer the Streamlit docs here: Streamlit Docs

Check out the Streamlit website: Streamlit

Check out my Medium Profile if you want to read more articles from me: My Profile

Thank you for reading! Go and make your first Streamlit App.


Comments

Popular Posts