How to Write Web Apps Using Simple Python for Data Scientists

Author: Rahul Agarwal, Data Scientist at Walmart Labs

Translator: Chen Zhiyan

Proofreader: Yan Xiaoyu

This article is approximately 4300 words, and is recommended for a reading time of 10 minutes.

This article explains how to create applications that support data science projects using StreamLit.

Data science projects can easily be transformed into excellent applications without needing to understand any web frameworks.

If we do not showcase a machine learning project properly, then it is not considered truly completed.

In the past, a well-crafted visualization or a few pages of PPT were sufficient to present a data science project. However, with the emergence of dashboard tools like RShiny and Dash, excellent data scientists need to have considerable knowledge of web frameworks.

But learning web frameworks is quite difficult. I have struggled with HTML, CSS, and Javascript, yet still find myself confused by seemingly simple operations.

Not to mention how to implement the same task in multiple ways, which can further confuse data science colleagues, as web development is merely a secondary skill for them.

So, are we destined to learn web frameworks? Or are we going to call our developer friends in the middle of the night to express our silly doubts about web frameworks?

The advent of StreamLit makes it possible to create web applications using Python.

The Zen of Python: Simple is better than complex.Streamlit is the best footnote to this, making the creation of web applications simpler than ever.

This article explains how to create applications that support data science projects using Streamlit.

Installation

Installation is done by running the following simple command:

pip install streamlit

Run the following command to check if the installation was successful:

streamlit hello

The screen will display:

You can access the running Streamlit application at the local URL: localhost:8501. The developers also provide some demonstrations. Take some time to feel the power of this tool.

Streamlit Hello World

Streamlit aims to simplify application development using simple Python.

Let’s write a simple application to see if it can achieve this goal.

Here, we start with a simple application called Hello World of Streamlit; simply paste the code below into a file named helloworld.py.

import streamlit as st
x = st.slider('x')
st.write(x, 'squared is', x * x)

Run in the terminal:

streamlit run helloworld.py

Look, this allows you to see a simple application in the browser connected to localhost:8501, enabling you to move the slider and get results.

A simple slider widget application

The operation is quite simple; the above application utilizes two features of Streamlit:

st.slider widget command, which implements the effect of sliding the slider to change the output of the web application;
st.write multifunctional command, which can write anything using charts, data, and simple text. This feature will be detailed later.

Key Point: Remember, every time the widget’s value changes, the entire application runs from top to bottom.

Streamlit Widgets

Widgets provide a way to control applications. The best way to understand widgets is to read the API reference documentation. I will describe some key widgets that may ultimately be used.

1. Slider

streamlit.slider(label, min_value=None, max_value=None, value=None, step=None, format=None)

We have already seen the effect of the slider st.slider above, which can be used with min_value, max_value, and step to get input within a certain range.

2. Text Input

The simplest way to get user input is through URL input or text input for sentiment analysis, which only requires a label to name the text box.

import streamlit as st
url = st.text_input('Enter URL')
st.write('The Entered URL is', url)

The application presents as follows:

A simple text_input widget application

Tip: Just change the file helloworld.py and refresh the browser.My approach is to open the file, make changes in the text editor, and see each step of the change in the browser.

3. Checkbox

A use case for checkboxes is to hide or show/hide specific parts in the application. Another possible use is to set a boolean value in the parameter of the function st.checkbox(). st.checkbox() requires a separate instruction, which is the label for the widget. In this application, the checkbox is used to toggle a conditional statement.

import streamlit as st
import pandas as pd
import numpy as np
df = pd.read_csv("football_data.csv")
if st.checkbox('Show dataframe'):
    st.write(df)

A simple checkbox widget application

4. Select Box

You can make selections from a list using st.selectbox, a common use is to serve as a simple dropdown list for selecting values from a list.

import streamlit as st
import pandas as pd
import numpy as np
df = pd.read_csv("football_data.csv")
option = st.selectbox(
    'Which Club do you like best?',
    df['Club'].unique())
st.write('You selected: ', option)

A simple dropdown/select box widget application

5. Multiselect

You can also select multiple values from a dropdown list; here we use st.multiselect to get multiple values from variable options.

import streamlit as st
import pandas as pd
import numpy as np
df = pd.read_csv("football_data.csv")
options = st.multiselect(
 'What are your favorite clubs?',
 df['Club'].unique())
st.write('You selected:', options)

A simple multiselect widget application

Step-by-Step Creation of a Simple Application

The important widgets that need to be understood have been introduced above. Below, we will create a simple application using multiple widgets at once.

First, let’s try to visualize football data using Streamlit. With the help of the widgets above, it will be very simple.

 import streamlit as st
import pandas as pd
import numpy as np
df = pd.read_csv("football_data.csv")
clubs = st.multiselect('Show Player for clubs?', df['Club'].unique())
nationalities = st.multiselect('Show Player from Nationalities?', df['Nationality'].unique())
# Filter dataframe
new_df = df[(df['Club'].isin(clubs)) &amp; (df['Nationality'].isin(nationalities))]
# write dataframe to screen
st.write(new_df)

The simple application presents as follows:

Comprehensive use of multiple widgets

This doesn’t seem difficult, but it seems too simple; can we add some charts?

Streamlit currently supports many libraries for plotting, including Plotly, Bokeh, Matplotlib, Altair, and Vega charts. Plotly Express also works, although they do not specify it in the documentation. Streamlit also has some built-in chart types like st.line_chart and st.area_chart that can run in Streamlit.

Here, we will create a simple application using plotly_express, with the code as follows. It only calls Streamlit four times; the rest is just some simple Python code operations.

import streamlit as st
import pandas as pd
import numpy as np
import plotly_express as px
df = pd.read_csv("football_data.csv")
clubs = st.multiselect('Show Player for clubs?', df['Club'].unique())
nationalities = st.multiselect('Show Player from Nationalities?', df['Nationality'].unique())
new_df = df[(df['Club'].isin(clubs)) &amp; (df['Nationality'].isin(nationalities))]
st.write(new_df)
# create figure using plotly express
fig = px.scatter(new_df, x ='Overall',y='Age',color='Name')
# Plot!
st.plotly_chart(fig)Adding charts

Adding charts

Improvement

The article initially mentioned that every time any widget is modified, the entire application will re-run. This is not feasible when creating applications for deep learning models or complex machine learning models. To address this issue, Streamlit introduced “caching”.

1. Caching

In a simple application, every time a value changes, it repeatedly browses the pandas dataframe. While this works for small data, it will fail for large data or when extensive processing is required. Below, we use the st.cache function in Streamlit to utilize caching.

import streamlit as st
import pandas as pd
import numpy as np
import plotly_express as px
df = st.cache(pd.read_csv)("football_data.csv")

For more complex and time-consuming functions that only need to run once, use:

@st.cache
def complex_func(a,b):
    DO SOMETHING COMPLEX
# Won't run again and again.
complex_func(a,b)

When marking a function with Streamlit’s caching decorator, every time that function is called, it checks the input parameters of the called function.

If Streamlit processes these parameters for the first time, it will run the function and store the result in local cache.

When the function is called next time, if these parameters have not changed, Streamlit knows it can skip executing the function and just use the cached result.

2. Toolbar

To have a clearer appearance, one might want to move widgets to a sidebar, similar to Rshiny dashboards. This is also very simple; just add st.sidebar in the widget code.

import streamlit as st
import pandas as pd
import numpy as np
import plotly_express as px
df = st.cache(pd.read_csv)("football_data.csv")
clubs = st.sidebar.multiselect('Show Player for clubs?', df['Club'].unique())
nationalities = st.sidebar.multiselect('Show Player from Nationalities?', df['Nationality'].unique())
new_df = df[(df['Club'].isin(clubs)) &amp; (df['Nationality'].isin(nationalities))]
st.write(new_df)
# Create distplot with custom bin_size
fig = px.scatter(new_df, x ='Overall',y='Age',color='Name')
# Plot!
st.plotly_chart(fig)Move widgets to the sidebar

Move widgets to the sidebar

3. Markdown? (A markup language for plain text)

I like writing in Markdown; it is less verbose than HTML and more suitable for data science work. So, can we use Markdown in Streamlit applications?

The answer is yes, there are various ways to achieve this. In my opinion, the best way is to use Magic commands, which allow you to write markup easily like comments, or you can use the st.markdown command.

import streamlit as st
import pandas as pd
import numpy as np
import plotly_express as px
'''# Club and Nationality App
This very simple webapp allows you to select and visualize players from certain clubs and certain nationalities.'''df = st.cache(pd.read_csv)("football_data.csv")
clubs = st.sidebar.multiselect('Show Player for clubs?', df['Club'].unique())
nationalities = st.sidebar.multiselect('Show Player from Nationalities?', df['Nationality'].unique())
new_df = df[(df['Club'].isin(clubs)) &amp; (df['Nationality'].isin(nationalities))]
st.write(new_df)
# Create distplot with custom bin_size
fig = px.scatter(new_df, x ='Overall',y='Age',color='Name')
'''### Here is a simple chart between player age and overall'''
st.plotly_chart(fig)

Final application demonstration

Conclusion

Streamlit has democratized the entire process of creating applications, which I have described in detail in this article.

Although this article only created a simple web application, the potential is limitless. For example, the faceGAN on the Streamlit official website achieved the following effect using the same widgets and caching principles as described in this article.

I love the default colors and styles used by the developers; they are much more comfortable than the Dash I have always used for presentations. Additionally, audio and video can also be added to Streamlit applications.

Most importantly, Streamlit is free open-source software, not a ready-made proprietary web application.

Previously, when I needed to modify a presentation, I had to consult my developer friends, but now, the difficulty of modifying the program has become relatively trivial.

I don’t know how Streamlit will perform in production environments, but it has already been very convenient for conceptual projects and demonstrations. I want to use it more in my workflow from now on, as it is effortless to use, and you can use it more.

Author’s Bio:

Rahul Agarwal, Data Scientist at Walmart Labs.

Original Title:

How to Write Web Apps Using Simple Python for Data Scientists

Original Link:

https://www.kdnuggets.com/2019/10/write-web-apps-using-simple-python-data-scientists.html

Editor: Wang Jing

Proofreader: Gong Li

Translator’s Bio

Chen Zhiyan, graduated from Beijing Jiaotong University with a master’s degree in Communication and Control Engineering, has worked as an engineer at Great Wall Computer Software and Systems Co., Ltd. and Datang Microelectronics Company. Currently serves as technical support at Beijing Wuyi Chaoqun Technology Co., Ltd. Currently engaged in the operation and maintenance of intelligent translation teaching systems, with certain experience in artificial intelligence deep learning and natural language processing (NLP). In my spare time, I love translation creation, and my translation works mainly include: IEC-ISO 7816, Iraq Oil Engineering Project, New Fiscal and Taxism Declaration, etc. Among them, the English translation of “New Fiscal and Taxism Declaration” was officially published in GLOBAL TIMES. I hope to join the translation volunteer group of THU Data Party platform in my spare time to communicate and share with everyone and make progress together.

Translator Recruitment Information

Job Content: Requires a meticulous heart to translate selected foreign articles into fluent Chinese. If you are a data science/statistics/computer student studying abroad, or working overseas in related fields, or if you are confident in your foreign language skills, you are welcome to join the translation team.

What you can get: Regular translation training to improve volunteers’ translation skills, enhance understanding of cutting-edge data science, and overseas friends can keep in touch with domestic technology application development. The THU Data Party’s industry-academia-research background provides good development opportunities for volunteers.

Other Benefits: Data science workers from well-known companies, students from prestigious universities such as Peking University and Tsinghua University, and overseas students will become your partners in the translation team.

Click on “Read the original text” at the end of the article to join the Data Party team~

Reprint Notice

If you need to reprint, please prominently indicate the author and source at the beginning (reprinted from: Data Party ID: datapi), and place a prominent QR code for Data Party at the end of the article. For articles with original identification, please send [Article Name – Name of the authorized public account and ID] to the contact email to apply for whitelist authorization and edit as required.

After publishing, please feedback the link to the contact email (see below). Unauthorized reprints and adaptations will be pursued legally.

How to Write Web Apps Using Simple Python for Data Scientists

Click “Read the original text” to embrace the organization

Leave a Comment Cancel reply