Getting to know Python Streamlit Web Framework

2-Installation of Streamlit module

Before we start building our Streamlit Web Application, we need to install the module using the pip package installer.

To install Streamlit, run the following command:

pip install streamlit

When you type the command mentioned above in the terminal, the following page should open automatically:

st.title(): This function allows you to add the title to the app. 
st.header(): This function is used to assign the header of a section.
st.markdown(): This function is utilized to set a markdown of a section. 
st.subheader(): This function is employed to set the sub-header of a section.
st.caption(): This function is used to write captions.
st.code(): This function is utilized to set a code.  
st.latex(): This function displays mathematical expressions formatted as LaTeX. 

import streamlit as st



st.title("This is the app title")

st.header("This is the header")

st.markdown("This is the markdown")

st.subheader("This is the subheader")

st.caption("This is the caption")

st.code("x = 2021")

st.latex(r''' a+a r^1+a r^2+a r^3 ''')

6-Input widgets

Widgets are the most significant user interface components. Streamlit has various widgets that allow you to build interactivity directly into your apps with buttons, sliders, text inputs, and more.

st.checkbox(): This function returns a Boolean value. When the box is checked, it returns a True value. Otherwise, it sends back a False value.
st.button(): This function is used to display a button widget. 
st.radio(): This function exhibits a radio button widget. 
st.selectbox(): This function is utilized to demonstrate a select widget. 
st.multiselect(): This function is used to display a multi select widget. 
st.select_slider(): This function is used to display a select slider widget. 
st.slider(): This function is used to display a slider widget.

import streamlit as st



st.checkbox('Yes')

st.button('Click Me')

st.radio('Pick your gender', ['Male', 'Female'])

st.selectbox('Pick a fruit', ['Apple', 'Banana', 'Orange'])

st.multiselect('Choose a planet', ['Jupiter', 'Mars', 'Neptune'])

st.select_slider('Pick a mark', ['Bad', 'Good', 'Excellent'])

st.slider('Pick a number', 0, 50)

7-Display progress and status

At this point, we will explain how to add a progress bar and such status messages as error and success to our app.

st.balloons(): This function is used to display balloons for celebration. 
st.progress(): This function is utilized to show a progress bar. 
st.spinner(): This function demonstrates a temporary waiting message during execution.

import streamlit as st

import time



st.balloons()  # Celebration balloons

st.subheader("Progress bar")

st.progress(10)  # Progress bar

st.subheader("Wait the execution")

with st.spinner('Wait for it...'):

    time.sleep(10)  # Simulating a process delay

8-Sidebar and container

We can additionally create a sidebar or a container on your page to organize your app. The hierarchy and arrangement of pages on your app can have a huge impact on your user experience. Organizing your content allows visitors to understand your site better and navigate it easier. It also helps them find what they are looking for faster and increases the likelihood that they will return. 

Sidebar

Passing an element to st.sidebar() will pin this element to the left, allowing users to focus on the content making your app more organized and easier to deal with.

import streamlit as st



st.sidebar.title("This is writter inside sidebar")

st.sidebar.button("Click")

st.sidebar.radio("Pick your gender",["Male","Female"])

import streamlit as st

import numpy as np



with st.container():

    st.write("This is inside the container")



    st.bar_chart(np.random.randn(50, 3))



st.write("This is outside the container")

st.line_chart(): This function is utilized to show a line chart.

import streamlit as st

import pandas as pd

import numpy as np



df = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])

st.line_chart(df)

st.map(): This function displays maps in the app. However, it requires the values of latitude and longitude which cannot be null/NA.

import pandas as pd

import numpy as np

import streamlit as st



df = pd.DataFrame(

    np.random.randn(500, 2) / [50, 50] + [37.76, -122.4], columns=['lat', 'lon']

)

st.map(df)

You can also pass a Pandas Styler object to change the style of the rendered DataFrame:

import streamlit as st

import pandas as pd

import numpy as np



df = pd.DataFrame(np.random.randn(10, 20), 

                  columns=("col %d" % i for i in range(20)))



st.dataframe(df.style.highlight_max(axis=0))

Summary

In this article, after introducing the Streamlit web framework, I demonstrated how to install Streamlit and run the application. We also explored some basic commands, widgets, and data visualization functionality.

In my next article, we will create a Streamlit web application to connect to the IRIS dataset and explore advanced concepts of Streamlit together.

Thanks