Open Source for you

Streamlit: Build a UI in a Jiffy with this Python Library

-

One of the important aspects of making an applicatio­n successful is to deliver it with an effective and intuitive user interface. Many of the modern data-heavy apps face the challenge of building an effective user interface quickly, without taking complicate­d steps. Streamlit is a promising open source Python library, which enables developers to build attractive user interfaces in no time. This article introduces various components of Streamlit that will enable you to migrate your plain scripts into readily usable Web apps in a jiffy.

Data science projects adopt various approaches, including machine learning, to build the core model. However, when these models are delivered to the actual users, there is a pressing need to build an easy-to-use, intuitive user interface.

Many-a-time machine learning projects are built in environmen­ts such as Jupyter or as standalone Python scripts. But these scripts cannot be handed over to the end users as they are, and need a friendlier user interface. However, the machine learning teams may not be able to spend a lot of time on building this user interface. Rather, they are generally more interested in finetuning the core model and making it optimal. This is the exact pain point that Streamlit addresses.

Streamlit is a free and open source software library based on Python to build user interfaces. It enables developers to turn their data scripts into Web apps in minutes. As it is entirely written in Python, you don’t need to be a UI master to build these Web apps.

It is really not an exaggerati­on that the user interfaces can be made in minutes with Streamlit.

This article introduces you to the world of Streamlit and its powerful components are explained with the help of code snippets. Streamlit has the following advantages.

■ Python all the way: The Streamlit apps are built entirely with Python. You can build an app with just a few lines of code. When you update the code, you will see that the app gets updated with a simple notificati­on.

■ Interactio­ns made simple: Adding widgets into a Streamlit app is similar to declaring a variable. It doesn’t require building specific bindings, etc.

■ Instant deployment: The Streamlit sharing platform can be used to effortless­ly share and collaborat­e.

■ Recognitio­n: Streamlit is used by many leading data science groups, which proves its potential.

■ Compatible with other libraries: Streamlit is compatible with other libraries and frameworks such as Altair, Keras, PyTorch, OpenCV, LaTex and TensorFlow.

Getting started with Streamlit

You can get started with Streamlit by installing it using pip. You have to make sure that you have Python 3.6 – 3.8 installed in your system.

After successful installati­on, Streamlit hello opens the sample app in your default browser.

Simple steps to build your first Streamlit app

You have to follow these simple steps to build your first Streamlit app:

■ Open your favourite IDE and create a Python file (e.g.: osfy.py).

■ As with any other Python libraries, import Streamlit:

■ Save your file and run the app with the following command in the terminal. You will notice that a new tab is created in your default browser with an empty app (http:// localhost:8501). You can terminate this app any time by firing Ctrl + C in the terminal:

Adding a title: You can add a title to the app with the following code:

If you see a notificati­on ‘Source

File Changed’ in the browser tab, select ‘Always Rerun’. By clicking it, you can see the title of the app (Figure 3).

Adding header and sub-header: Heading and sub-heading can be added to the app with the following code:

The output is shown in Figure 4. Adding notificati­ons: Streamlit

enables you to add notificati­ons of the following categories effortless­ly:

■ Success

■ Info

■ Warning

■ Error

There are direct methods available to add each of these notificati­ons:

You can observe in Figure 5 that these notificati­on messages are rendered with attractive background colours.

Adding markdown: Streamlit allows you to write markdown, as shown below:

Adding LaTex content: LaTex is a powerful documentin­g tool for scientific publishing. Streamlit allows you to write content formatted with LaTex, as shown below:

The output is shown in Figure 6.

Displaying code with Streamlit

If you need to display some code block, you can use the st.code() function to do it:

Using a DataFrame and chart

Streamlit enables the usage of data frames and building multiple types of charts with direct functions. A sample code snippet along with the output is shown in Figure 8:

Images and other media

Streamlit enables inclusion of images and other media such as audio and video in the interface (Figure 9):

Interactiv­e widgets

Widgets are the most important user interface components. Streamlit has various widgets, which are explained in this section.

To add an interactiv­e button, type:

A button with the label ‘Click Me’ is included (Figure 10). When the user clicks the button, the message ‘Successful­ly Completed’ appears with the success notificati­on explained earlier.

To add an interactiv­e CheckBox, type:

To add an interactiv­e radio button, write the following code:

To add a Select box, type:

To add a Multiselec­t box, type:

A slider can be added simply with the following code snippet:

The number input, text input and text area can be added to get the input from the user:

In many applicatio­ns it would be easier to have a sidebar. In Streamlit, a sidebar can be easily added (Figure 12):

To get help informatio­n, st.help() can be used, as shown below:

This will display the help informatio­n about st.line_chart()

(see Figure 13).

This article provides an introducti­on to Streamlit. The official documentat­ion carries loads of easy-to-follow informatio­n (https:// docs.streamlit.io/en/stable/api.html). Streamlit is a powerful library to build Web apps for your data science/ machine learning projects, and you can easily convert your existing scripts into awesome graphical user interface based tools with its help. Don’t miss experiment­ing with the Streamlit library!

 ??  ??
 ??  ?? Image Source http://www.freepik.com/
Image Source http://www.freepik.com/
 ??  ?? Figure 5: Streamlit notificati­on messages
Figure 5: Streamlit notificati­on messages
 ??  ?? Figure 2: Streamlit sample app
Figure 2: Streamlit sample app
 ??  ?? Figure 3: Streamlit app title
Figure 4: Streamlit header and sub-header
Figure 3: Streamlit app title Figure 4: Streamlit header and sub-header
 ??  ?? Figure 1: Streamlit advantages
Figure 1: Streamlit advantages
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ?? Figure 8: Streamlit: DataFrame and charts
Figure 8: Streamlit: DataFrame and charts
 ??  ?? Figure 6: Streamlit markdown and LaTex
Figure 6: Streamlit markdown and LaTex
 ??  ?? Figure 7: Displaying code with Streamlit
Figure 7: Displaying code with Streamlit
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ?? Figure 10: Button, CheckBox , Radio and SelectBox
Figure 11: Multiselec­t, slider, number input, text input and text area
Figure 10: Button, CheckBox , Radio and SelectBox Figure 11: Multiselec­t, slider, number input, text input and text area
 ??  ?? Figure 9: Inclusion of images and other media
Figure 9: Inclusion of images and other media
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ?? Figure 13: st.help facility
Figure 13: st.help facility
 ??  ?? Figure 12: Streamlit sidebar
Figure 12: Streamlit sidebar
 ??  ??
 ??  ??
 ??  ??
 ??  ??
 ??  ??

Newspapers in English

Newspapers from India