Streamlit - The fastest way to create data apps | Guide to Streamlit Web framework

Hello and welcome to an amazing blog where we will learn to create a web application in minutes without any requirement of frontend language like HTML, CSS. If you are a backend developer or loves backend development and always work with the languages and technologies like Python, data science, blockchain, etc and you want to showcase your project with help of a simple yet attractive user interface then this simple Streamlit python web framework is for you.

In this tutorial, we will learn what streamlit is, and how to build web apps using streamlit. as well as how to deploy streamlit on Heroku with a practical example.

Table of Contents

1. Brief Overview about Streamlit
2. Setting Streamlit on your Machine
3. How to display Text on Streamlit App?
4. How to Showcase different data on Streamlit web-app?
5. Perform Caching with Streamlit
6. Display Different Data Visualisation Plots
7. Create Project Flow Chart using Streamlit
8. Display Geographical Maps with Streamlit
9. Working with Different Widgets using Streamlit
10. Add Sidebar, Navigation bar, Progress bar to streamlit web-app
11. End Notes

Introduction to Streamlit

Streamlit is an open-source web framework for machine learning and data science fields that allows a user to create a beautiful web application with a pure and straightforward python script. Using streamlit users can create interactive web applications without spending much time on the frontend part and do not require any knowledge or experience of the frontend. Hence, Streamlit is referred to as the fastest way to build and share data apps. Apart from using it for machine learning purposes, you can also use it for some basic application purposes or for fulfilling basic backend requirements, or for testing any application. 

The main aim of developing streamlit was that people who work in data science development should have such a framework where they can test and represent their model to avoid any bug in deployment without the requirement of any frontend coding part. Now we will install streamlit and practically learn how to build a web application using streamlit.

Getting started with Streamlit

Set Stremlit on your machine

To build attractive Machine learning web apps with streamlit, first, you have to install the library. use the pip command to get started with streamlit.

     pip install streamlit  

  streamlit hello        

Simply run the pip command in your command line in your python directory. As it is installed successfully run the second command to check everything works fine.

I will teach you different syntax and how to use them in different ways to showcase different things on the web So you have to copy the command and write them in your file and see the output on your screen by refreshing the web again and again because you will only learn it while practicing. Just reading will only give you knowledge that lasts for some time but doing practice along with reading will give you an actual feel of a streamlit web framework.

How to Display text on Streamlit app

Now you know about streamlit, and we are ready to give streamlit a try so, create a new file in any python IDE, and while installing you have already opened a command prompt from where we will run our application. Tight your seat belt and get ready to learn streamlit with practical implementation. 

import streamlit as st

To run the streamlit app from your command line use the following syntax in the working directory.

streamlit run filename.py

1) title:- title command is used to display the title to your app. It is recommended by a community that you should use this command only once in your app for placing the main heading.

st.title("first streamlit app") 

2) Header and sub-header:-  After adding the title you may require headers and sub-header for applying input fields or for displaying some useful information like Note or any Actions. So using the below command you can place heading and sub-heading in the streamlit app.     

st.header("Header")
st.subheader("Sub-heading")

3) Text: To add some normal text use the text command.

st.text("Crazy tech streamlit tutorial")

4) Markdown: To add HTML tags you can use the markdown command. And to use emojis also you can use markdown and using colon you can provide the name of emoji which you want to use, and it will automatically load the particular emoji. If you have ever made a README File in GitHub then you must know about markdowns

st.markdown(""" #h1 tag :moon:
""", True) 
st.markdown(""" #h2 tasg :sunglasses: **bold** --italica--""", True)

5) write: To write something with proper space, you can use the write command.

st.write("harsh", "Kumar", "Gupta")

You can also provide the module name. as we have imported streamlit. if we pass the module name, it will display the basic documentation details.

st.write(st)

you can also provide a dictionary inside the write command. It will print the whole dictionary. 

Display Data to Streamlit App

Now, we have seen how can we display some text but, if I want to display the dataFrame, list, table, etc. There are many forms of data we can have, and we want to show them on the web so streamlit has different functions to showcase different types of data.

1) DataFrame: To display the data frame of the data in excel or CSV format. you can read the data using pandas and make a streamlit dataframe.

import pandas as pd        
data = pd.read_csv("salary.csv")
st.dataframe(data)

2) table: we can also you table command to display the dataframe.

st.table(data)

The only disadvantage is it displays the complete data and provides you with a scroll bar.

3) JSON: to print the JSON script in a web application using the JSON command.

st.json(dictionary)

How to Perform Caching with Streamlit in Web Application?

Caching is one of the essential mechanisms of streamlit. When we run the streamlit app, it will run the complete code from start to end, and in between if you are performing any high computation task like you are loading a heavy dataset or performing any data manipulation task. Then it requires a lot of time to run and in that case, your site will have a high buffer. So, to overcome this problem streamlit provides a concept of caching.

What it does in caching is, when you use the same function with the same attributes again, then when it sees it the first time, it will run and save the output to cache, and again when it will see that, then it skips the execution and returns the output from the cache which will save a lot of time. Let us try implementing caching practically.

When you run the application then it executes the first time function and saves the output in cache and while running the second function displays the same output to you.

Displaying Plots and Media on Streamlit App

Streamlit has some charts which can be plotted using a single-line command. You can plot a graph on your dataframe and display it on the app.

Here in the above snippet we have created random data and visualized it using different charts. And the charts which it will draw are interactive charts. Python has a lot of visualization libraries like Matplotlib, seaborn, plotly, etc. So, let's see how can we plot data using matplotlib and display it on the streamlit app. 

Using matplotlib you can draw different plots of your data. Altair is also one of the famous libraries for data visualization using python. So let's create an alt figure.

To make the chart interactive we add a tooltip attribute so that when you hover over it, you can see the value of x and y over that data point. The chart is small as compared to all other charts and we can adjust the width of the Altair chart by assigning the use_container_width attribute to true.

Create Flow Chart Using Streamlit

We can also create flow chart diagrams or data flow diagram representations using streamlit that showcase the process of certain flow of projects. Below shown is a simple demo of how you can create a flow chart using streamlit.

This is how you can make attractive flow charts. You can also use other visualization libraries like seaborn or plotly.

Plotting Map using Streamlit

We can also plot a map using streamlit, and as well you can provide latitude and longitude to plot a mark on a map or to show a map of the particular country.

st.map()

If we simply use the above command then, it will give the output of a full world map with a central location.

we can also use a python library like folium for geospatial analysis and can display the interactive maps on a streamlit app. Or in streamlit also you can provide names of the city and its latitude and longitude to mark the city.

Display Different types of Media on the Web using Streamlit

we can also display video, images, and audio using streamlit on a web app.

You can also pass the youtube video link, to display any youtube video.

Adding Different Widgets to Streamlit app

How to make streamlit app more interactive using widgets. widgets allow us to interact with an application and in return, it gives us value whatever we provide and at the backend, it helps us to perform some operation and take action.

1) Button: we can add a button by just using the button method. as well you can also add functionality to it using the write method.

2) text input: If we want to take any input from a user as a text box like name, color, etc then we can use the streamlit text_input property.

3) TextArea: If we want any message or address of a user, then we make use of the text area. so you can simply add this using the text_area method, And also provide the placeholder inside it.

4) Date and time: we can take the date and time input like date of birth.

st.date_input("enter date")
st.time_input("enter time")

5)Integer Input: To take the input as price, salary, year where we want the button like plus and minus to increase or to decrease the selected inserted value.

st.number_input("year of purchase")

6) checkbox: checkbox is used when you want to add options to the user to select one among the given option. we can also provide the functionality to the checkbox and provide the message.

if st.checkbox("accept T&C", value=True):
    st.write("Thank You!")

7) Radio: similar to the checkbox we can also provide a radio button.

8) select box: If we want to provide many values and select one in the given option, then providing a checkbox or radio button is not good. So we use the select box at that time like a model of car, color, etc.

To provide the user a credentialing for selecting multiple options we can use the multi_select property.

9) Slider: To add a slider to take any integer value of any range we can use a slider. we can pass a minimum value and maximum value as well size of the step to move the slider forward and backward.

10) File Uploader: To provide an option for uploading a file, we can use the streamlit file_uploader method.

st.file_uploader("upload a file")

Now you must be thinking of how to use all these methods so below is a simple demo implemented for your reference to each method. 

There are various other widgets, but these are the major used widgets that fulfill our requirement in almost every case with respect to machine learning and data science web apps. you can explore official streamlit documentation for more widgets.

Adding a Sidebar and Navigation bar to the Streamlit web app

Streamlit also provides the functionality to add an interactive sidebar and navigation bar to our web application, which we can use for many use cases.

Adding a Sidebar

This is how we can create an interactive sidebar for our ML web apps and provide as much functionality as we want.

Adding a Navigation bar

Now, we will see how we can use a sidebar with widgets to create a navigation bar. Indeed we do not get an option of having multiple pages, but we can create this using sidebar and widgets.

Summary

We have learned a lot in this blog and if you have followed the article till the end then many congratulations to you that you have moved one step forward in your skillset to add a new framework. We have covered all the basics of streamlit. In the upcoming article, we will be deploying a real-world application of resale car prediction using streamlit on Heroku. If you have any doubts then post them in the comment section below or you can reach out to us using the contact us form.

Thank you!..