How to use Streamlit and the implementation of its widgets
Share
What is Streamlit?
Streamlit is an open source web application framework in Python. It is helpful in creating machine learning web applications in a given mean time. It is compatible with many Python libraries, namely:
- Keras
- Scikit-learn
- PyCaret
- Matplotlib
- Pandas
- Numpy
The command used to run a Streamlit web application is as follows:
streamlit run <yourscript.py>
Streamlit also has a cloud, where we can deploy our machine learning web applications. Anyone can access our application with the provided link.
Streamlit widgets
There are many widgets available in Streamlit that we can use to develop web applications. We will discuss some of these below.
Note: Streamlit encounters some issues when it is run with the Safari browser. So, we recommend the use of Google Chrome or Firefox.
Slider
import streamlit as stream
value = stream.slider('val')
stream.write(value, 'cube is', value * value * value)
Code explanation
- Line 1: We import
streamlit. - Line 2: We use the
slider()function, and we assign the value of the slider to the variablevalue. - Line 3: We print the value and its cube, which we select from the slider.
Dataframe table
import pandas as pd
import streamlit as stream
stream.title("Welcome!")
stream.write("Our first DataFrame is")
stream.write(
pd.DataFrame({
'Ali': [99, 87, 66, 54],
'Usman': [55, 96, 77, 98]
})
)
Code explanation
-
Lines 1–2: We import
pandasandstreamlit. -
Line 4: We set the title of our Streamlit web application using the
title()method. -
Lines 8–13: We use the pandas
Dataframe()function, along with the Streamlitwrite()function, to display the dataframe in a table.
Selectbox
import streamlit as stream
stream.title("Welcome!")
select = stream.selectbox(
"Select Developer or Engineer",
["Developer", "Engineer"]
)
stream.write(f"You selected {select}")
Code explanation
-
Line 1: We import
streamlit. -
Line 3: We set the title of our Streamlit web application using the
title()method. -
Lines 5–8: We use the
selectbox()function. The first argument that we pass to the function is a string to display and the second argument is a list of options to select from. -
Line 9: We display the selected value using the
write()function.
Checkbox
import streamlit as stream
stream.title("Select your skills!")
checkbox = stream.checkbox("C++")
if checkbox:
val = "C++"
else:
val = "No value selected"
stream.write(f"You selected: {val}")Code explanation
-
Line 1: We import
streamlit. -
Line 2: We set the title of our Streamlit web application using the
title()method. -
Lines 3: We create a variable called
checkboxthat contains a boolean value. -
Lines 5–8: We write conditions for the values that we selected from the checkbox.
-
Line 10: We display the selected value using the
write()function.
Radio button
import streamlit as stream
select = stream.radio(
"What's your favorite IT job",
('Developer', 'Designer', 'Engineer'))
if select == 'Developer':
stream.write('You selected Developer.')
else:
stream.write("You didn't select Developer.")
Code explanation
-
Line 1: We import
streamlit. -
Lines 2–4: We use the
radio()function. The first argument that we pass to this function is a string to display and the second argument is a list of options to select from. -
Lines 6-9: We use conditions to display the value that is selected from the checkbox.
Sidebar
import streamlit as stream
stream.title("Welcome!")
selectbox = stream.sidebar.selectbox(
"Select Male or Female",
["Male", "Female"]
)
stream.write(f"You selected {selectbox}")
Code explanation
-
Line 1: We import
streamlit. -
Line 3: We set the title of our Streamlit web application using the
title()method. -
Lines 5–8: We use the
sidebar.selectbox()function. The first argument that we pass to the function is a string to display and the second argument is a list of options to select from. -
Line 9: We display the value that is selected from the sidebar selectbox.
Color picker
import streamlit as stream
color = stream.color_picker('Choose any Color from dialog', '#00f900')
stream.write('The current selected color is', color)
Code explanation
- Line 1: We import
streamlit. - Line 2: We use the
color_picker()function to choose the color from the colors dialogue box. - Line 3: We print the selected color value.
