Web Application in 10 minutes with Streamlit

In this article, I will introduce Streamlit, my favorite web application library for Python. It allows you to create beautiful Data Science or Machine Learning (or maybe some other) applications in a blink of an eye.

Photo by Domenico Loia on Unsplash

Showing data applications to your colleagues or friends who are not aware of coding can be a tricky thing. Most of the people outside of the industry do not know how to input their values into the machine learning pipeline or generate the graph using the provided code. It is the case in which you need to develop the app and UI to make your findings available to everyone. However, most data scientists and machine learning engineers don’t know how to create a web app themselves.

This article will teach you how to create a web app for any purpose by using pure Python code with Streamlit library. Of course, to understand the potential of Streamlit, we need to look at the examples developed with it. You can access some of them here. One of the examples is Plant Disease Classification App.

GIF by Amin Yamlahi on Streamlit Website

As you can see, Amin’s app is quite advanced and can be used by a person who knows nothing about how the classification works. He can just upload the image and see the result!

In this tutorial, I will present some essential features of Streamlit by building a simple application. If you wish to go deeper into Streamlit, use the documentation, which contains all the library features. Let’s do it!

Streamlit Installation

Firstly, you need to install Streamlit. You can do this with PIP by running the following command in the terminal:

pip install streamlit

There may be problems with your Python version, so be sure to install Streamlit into Python 3.6+.

To create the app, you need to import Streamlit into your Python file and use a specific command in the terminal.

For our app, we will create a folder streamlit_app and a file app.py. In this .py file, we need to put the command:

import streamlit

Then, we put the following commands into terminal:

cd streamlit_app
streamlit run app.py

When you run these commands, the app appears in your browser, and you can continue building it in real-time because the changes in your Python file will automatically appear on your app page (just use rerun in the app settings to see these changes).

App Description

I will build a very artificial app with no specific purpose to show you different features in Streamlit. Essentialy, will create a form to ask the user some inputs.

Let’s look at the app that we have right now from the previous step.

Empty App

Now, it is a fully empty app; however, in this article we will fill it with elements.

Adding Title and Description

Let’s add the title and description to our form. To do so, we will write the following code:

Now, our app looks like this. With st.write() method, you can write text anywhere in the application (also, it can be used for different graphs (plotly, altair, etc.) and other content).

Now, App has a Title and a Description

Adding Inputs

Text

Let’s add some beautiful inputs into our app. We will start with text input. One-line text input can be added using the method st.text_input(). You can also use a label for this input field as well as the number of maximum characters. For example, you can use it if you want a person to fill in his ID, consisting of a maximum of 5 characters. Moreover, we can add a placeholder (value, which will be shown by default).

One more detail: we need to save inputs in the variables to use later!

Also, we can create a multi-line text input using st.text_area() method. You can also add the argument help. It will provide the user elaborated details about writing their input with the question icon to the left.

App with Text Inputs

Numbers

To add number inputs into your app, we can use st.number_input() method. We can add minimum and maximum number to choose as well as a step for the number widget.

App with Numeric Input

Dates

Sometimes, you need to ask a person for a date. It can be pretty hard to make the date format universal after collecting the free form format dates. Therefore, it is better to use a specific widget for that. You can also set minimum and maximum dates.

App with Date Input

Checkboxes and Radio Buttons

Let’s add other popular input types: checkboxes and radio buttons.

The check box can be added using st.checkbox() method. The return from this input is either True (if a person checked the box) or False.

The radio buttons can be added with the method st.radio(). You need to provide options for this type of input.

App with Checkbox and Radio Buttons

Sliders

The next element we add is a slider. It is a quite helpful technique for a limited input range to understand the choice of specific value visually. The slider can be created with st.slider() method. The interesting thing, that the slider can be used not only for integers or float but for dates and times!

App with Slider

Select Boxes

Sometimes, we need to give the user many options to choose from (so radio buttons are not suitable). In these cases, the select box is an excellent choice. We can create a select box with the ability to choose only one option (with st.selectbox()method) or multiple of them (with st.multiselect() method).

App with Select Boxes

Files

Files are a relatively advanced type of input; however, how can you ask for a person’s photo without asking for an image file? Streamlit allows us to ask for any file from the user with method st.file_uploader(). However, it is essential to give a proper file format (which your code supports) to the method.

App with File Uploader

Submitting inputs

To submit inputs, you can use the button. To add a button, we will use st.button() method. As the button is not that smart by itself to submit the form after being pushed, we need to submit it using the if-else statement. For example, now, we will write to the user that the form is submitted if they pushed the button.

App with Button

Adding a sidebar

As you could see from the app, which I have shown initially, there is an opportunity to add a sidebar with some settings or anything you want. To do it, just use st.sidebar.[element_name], where element_name is the name of the element you want to add, such as button, select box, etc. Let’s add it!

App with sidebar

Adding Columns

You can also add columns to your app, to make layout look prettier. We can add columns using st.beta_columns() method. You need to specify number of columns in the method declaration.

App with Columns

Conclusion

This is the end of my Streamlit tutorial. I hope you enjoyed it and now can create beautiful apps yourself! The full code for this article is below:

As you can see, our app took only 38 lines of code. Isn’t it magic? ☺️

Thank you for reading this article! There is actually a lot more to learn about Streamlit, so if you want more tutorials about it, say it in the comments! I hope you can give me some claps and ask a lot of questions!