An Introduction to Streamlit

Data Science, Data Analytics, and Machine Learning are some of the emerging fields in the past few years. There has been a massive increase in the development of applications that employ the above techniques and Python is the go-to language for developing such applications.

But, just writing the code for a machine learning model is not enough, because a common man won’t be able to use it. Here, it is important to deploy our model in such a way that anyone can easily use it. There are different options like the Django and Flask framework in Python to deploy our models. While using these frameworks, we also need to have knowledge of building the front end using HTML, CSS, and JS. 

What if I tell you there is a simpler way of doing this?

Streamlit is an open-source framework that lets you deploy not just a machine-learning model but any Python app in minutes. It also lets us manage and share our app with others.

Sounds exciting, right? So, let’s explore Streamlit!

Installation

To begin with, let us first install streamlit. It is really easy to do so.
You will need to have Python 3.7-Python 3.10, Anaconda, PIP and your favourite Python IDE installed on your computer. Then, in the anaconda terminal, just run the following command to install streamlit:

pip install streamlit

This command will work for Windows only. To install Streamlit on Mac and Linux, please refer here.

Creating a Hello World App in Streamlit

Now that we have installed streamlit, let’s create a simple ‘Hello World’ app to begin with.

The name of this file is ‘hello.py‘.

import streamlit as st

st.title("hello world")

To run the app, simply type

streamlit run hello.py

The app will run at http://localhost:8501/ in your default web browser.

Output:

Text Elements in Streamlit

Let us now see some of the text elements offered by Streamlit.

import streamlit as st

# set the app's title
st.title("Text Elements")

# header
st.header("Header in Streamlit")

# subheader
st.subheader("Subheader in Streamlit")

# markdown
# display text in bold formatting
st.markdown("**AskPython** is an awesome website!")
# display text in italic formatting
st.markdown("Visit _askpython.com_ to learn from various Python tutorials.")

# code block
code = '''
def add(a, b):
    print("a+b = ", a+b)
'''
st.code(code, language='python')

# latex
st.latex('''
(a+b)^2 = a^2 + b^2 + 2*a*b
''')

Output:

In the above code, we first imported streamlit and added each of the text elements discussed in the above table. The syntax is also quite simple to understand here.

In the markdown section, we have used ** ** to make the text bold and _ _ to make it italic, just like we always do.

Also, in the code block, we have specified the language as ‘Python‘ so that the code gets highlighted as desired. We can specify any language here as per our requirements.

Now, let us have a look at some of the widgets in Streamlit.

Widgets in Streamlit

With widgets, we can make our apps interactive by using buttons, sliders, etc.

Button in Streamlit

import streamlit as st

#button
if st.button('Click here', help="Click to see the text change"):
    st.write('Hi there!')
else:
    st.write('Goodbye')

Output:

The above code consists of a button that says ‘Click here’. We have also added a tooltip using the ‘help’ argument while creating the button. If the button is clicked, ‘Hi there!’ will be printed on the screen, else ‘Goodbye’ will be printed.

Checkbox in Streamlit

import streamlit as st

# check box
checked = st.checkbox('Click here')
if checked:
    st.write('Good job!')

Output:

The text ‘Good job!’ is displayed only when the checkbox is checked.

Radio button in Streamlit

import streamlit as st

# radio button
lang = st.radio(
    "What's your favorite programming language?",
    ('C++', 'Python'))

if lang == 'C++':
    st.write('You selected C++.')
else:
    st.write('You selected Python.')

Output:

In this example, we have a radio button in which we have asked a question and given two options to the user. The first option is selected by default, if the user chooses the second option, the text will be displayed accordingly.

Slider in Streamlit

import streamlit as st

# slider
score = st.slider('Please specify your test score', 
                   min_value=0, max_value=100, value=10)
st.write("My test score is ", score)

Output:

This is a simple slider with min_value=0, which is the minimum value in the slider and also the default minimum value, max_value=100 which is the maximum value in the slider and value=10, which specifies the value that is initially displayed. All of these values can be changed as per our requirements.

Conclusion

That’s all for this tutorial! This was the first one in the Streamlit tutorial series. Do check out our other tutorials in this series as well.

References

• Streamlit Official Documentation