How do I write a Web application in simple Python?

The paper contains 6260 words and is expected to last 13 minutes

Don’t know anything about web frameworks? That’s okay. This article will show you how to make a seamless transition from a data science project to a great application.

Take a break and start coding.

Machine learning projects are complete only when they are fully exposed to the public.

In the past, appropriate visualizations or simple powerpoint presentations were sufficient for data science projects, but with the advent of dashboard tools like RShiny and Dash, a knowledge of Web frameworks is also required for a qualified data scientist.

But Web frameworks are a tough nut to crack. I still get confused by HTML, CSS, Javascript, etc. when I try to do something that seems simple, and I have failed many times in practice.

Web development is a secondary skill to fellow data scientists, so trying multiple ways to do it can be overwhelming.

So are we doomed to learn about Web frameworks? Or calling developers in the middle of the night to ask stupid questions?

So StreamLit came along with a mission of its own to create Web applications with Python alone.

Python’s motto: simple is better than complex, and Streamlit application creation is a perfect example of ease of use.

This article will show you how to use Streamlit to create applications that support data science projects.

The installation

Installation steps are as simple as running instructions:

pip install streamlit

To see if the installation is successful, simply run:

streamlit hello

What the screen should show is:

You can view the Streamlit application in action by accessing the local URL: localhost:8501 in your browser. Developers also have a lot of great samples to try.

Streamlit “Hello World”

Streamlit is designed for simple program development through simple Python code.

Then design a simple app and see if it really does what it says it does.

Start with Streamlit’s program called “Hello, World.” It’s not complicated. Just copy and paste the following code into the folder “helloworld.py”.

import streamlit as st

x = st.slider(‘x’)

st.write(x, ‘squared is’, x * x)

Then to the final run phase:

streamlit run helloworld.py

Lo and behold, the browser connects to Localhost :8501, and you can see the program in action with a mouse swipe.

The operation is very simple. In building the above application, two Streamlit features were used:

• St. Slider plugin — Slide to change the output of your Web application.

• And the generic St. write directive. I was amazed that it could write anything from ICONS, data boxes, and simple text. More on that later.

Knock on the board: Remember that every time you change the plug-in value, the entire application will run from top to bottom.

Streamlit plug-in

Plug-ins provide a way to control your application. The best place to read about them is the API reference, but I’ll cover some of the most important plug-ins that users will use later in the process.

1. The slider

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

We have seen the implementation of St. Slider above. It can be used in combination with min_value and max_value to further obtain input within a certain range.

2. Enter text

The easiest way to get user input is to enter a URL or some text content for sentiment analysis. All you need is 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 program you see would look like this:

Tip: You can just change the helloWorld.py file and refresh the page. What I did was open the file and change it in a text editor, looking at the changes bit by bit.

3. Check box

One function of checkboxes is to hide or show/hide specific areas of a program. Another function is to set Boolean values for functions. St. checkbox() takes one argument, the plug-in label. In this application, check boxes are used to toggle conditional statements.

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)

4. Drop-down box plug-in

The St. SelectBox allows you to select from a series of options or lists. A common use is to use it as a drop-down item and then pick the value from the 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())

‘You selected: ‘, option

5. Multiple plug-ins

You can also use multiple values in the drop-down box. This is about using St. MultiSelect to get multiple values as lists in a variable selection.

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)

Create the application step by step

Now that you know about the important plug-ins, you’re about to create your application with multiple plug-ins.

Starting with simple steps, try visualizing soccer data using Streamlit. With the plug-ins above, this step is much easier to perform.

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)) & (df[‘Nationality’].isin(nationalities))]

# write dataframe to screen

st.write(new_df)

A simple application would look like this:

It’s not hard at all, but right now it seems too basic. Could you consider adding some charts?

Streamlit currently supports a number of libraries for plotting, including Plotly, Bokeh, Matplotlib, Altair, and Vega charts. Plotly Express also works, though it’s not detailed. There are also embedded charts that are equivalent to Streamlit “built-in” charts, such as St. line_chart and St. Area_chart.

Plotly_express is used, and here is the code that will be used to design the program. This procedure calls Streamlit only four times. The rest is simple Python code manipulation.

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)) & (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)

To improve the

As mentioned at the beginning of this article, every time a plug-in changes, the entire application runs from top to bottom. It doesn’t really work, because you create applications that retain deep learning models or complex machine learning models. This will be explained later when we talk about Streamlit caching.

1. The cache

In this simple program, the data scientists scan the data box repeatedly whenever the value changes. It works well with small amounts of data in the hands of users, but ignores large amounts of data or data requiring many steps. Next, experience caching in Streamlit via the St. cache decorator function.

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”)

If you need to run a complex or time-consuming function only once, you can use:

@st.cache

def complex_func(a,b):

DO SOMETHING COMPLEX

# Won’t run again and again.

complex_func(a,b)

When a function is marked with Streamlit’s cache decorator, the input parameter values (handled by the function) are checked whether or not the function is executed.

If Streamlit hasn’t processed the data before, it calls the function and stores the result in a local cache.

The next time a function is called with these same parameters, Streamlit skips the function entirely and uses the result data directly from the cache.

2. The sidebar

Users may want to move plug-ins into a sidebar, such as the Rshiny dashboard, to make the interface more concise depending on their preferences. This is as simple as adding St. sidebar to your plug-in 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)) & (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)

3. Is Markdown markup language ok?

I particularly enjoyed editing text in Markdown because I found it less cumbersome than HTML and more suited to data science tasks. So can readers also apply Markdown in Streamlit applications?

The answer is yes. And there’s a trace to it. In my opinion, the most appropriate is to call the Magic instruction. With this directive, users can write markup language as easily as they can write comments. The user can also use the directive St. Markdown.

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)) & (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)

conclusion

Streamlit has covered the entire application creation process, so I really don’t have much to add.

This article describes the creation of a simple web application, but there are too many unknowns. For example, when encountering a GAN on a Streamlit site, the only guidelines chosen are plugins and caching.

I liked the default colors and styles and found them more comfortable than Dash, which I used until I created my new program. Readers can also add audio and video items to their Streamlit programs.

Most importantly, Streamlit is free, open source software, not a private web application out of the box.

In the past, when I met any changes or problems, I had to consult my friends. Now, it’s not that much trouble at all.

The author’s goal is to start using this program in workflows from now on. Even if it’s not a difficult task, I think you can use it.

I haven’t thought about how well it will perform in a production environment, but it’s a boon for small validations of concept projects and demos. The author’s goal is to start using this program in workflows from now on. Even if it’s not a difficult task, I think you can use it.

The complete code: https://github.com/MLWhiz/streamlit_football_demo

Leave a comment like follow

We share the dry goods of AI learning and development. Welcome to pay attention to the “core reading technology” of AI vertical we-media on the whole platform.

(Add wechat: DXSXBB, join readers’ circle and discuss the freshest artificial intelligence technology.)