current position:Home>Explain the python streamlit framework in detail, which is used to build a beautiful data visualization web app, and practice making a garbage classification app
Explain the python streamlit framework in detail, which is used to build a beautiful data visualization web app, and practice making a garbage classification app
2022-02-01 11:32:30 【Crossover code】
Today, I'll explain a Python library Streamlit, It can be built for machine learning and data analysis web app. Its advantage is that it's easy to get started 、 pure Python code 、 High development efficiency 、UI Exquisite .
The picture above is used Streamlit The effect of building an automatic driving model demo, On the left is the parameters of the model , On the right is the effect of the model . By adjusting the parameters on the left , The model on the right will respond in real time .
From this we can see that , For interactive data visualization requirements , You can consider using Streamlit Realization . Especially in learning 、 During the work report , The effect of using it is much better than PPT.
because Streamlit Provides many front-end interactive components , So you can also use it to do some simple web application . Today we will also use it for garbage classification web app.
We used Streamlit I've done two app,《 Plant recognition app》 and 《 Animal identification app》. But it just used Streamlit A small part of the function . Today we will follow Streamlit Official document , Explain it in detail .
1. Text component
I'm using Python 3.8 Environmental Science , perform pip install streamlit install . Perform... After installation streamlit hello Check if the installation is successful .
So let's see Streamlit The most basic text component .
Text component is used to display various types of text content on Web pages .Streamlit Can display plain text 、Markdown、 title 、 Code and LaTeX The formula .
import streamlit as st
# markdown
st.markdown('Streamlit is **_really_ cool**.')
# Set page title
st.title('This is a title')
# Show the first level title
st.header('This is a header')
# Show secondary title
st.subheader('This is a subheader')
# Show me the code , It has a highlight effect
code = '''def hello(): print("Hello, Streamlit!")'''
st.code(code, language='python')
# Pure text
st.text('This is some text.')
# LaTeX The formula
st.latex(r''' a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} = \sum_{k=0}^{n-1} ar^k = a \left(\frac{1-r^{n}}{1-r}\right) ''')
Copy code
The above is Streamlit Supported text presentation components , Code storage my_code.py In file . After coding , perform streamlit run my_code.py ,streamlit It will start web service , Load the specified source file .
After starting , You can see that the command line prints the following information
streamlit run garbage_classifier.py
You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501
Network URL: http://192.168.10.141:8501
Copy code
Access in browser http://localhost:8501/ that will do .
When the source code is modified , No need to restart the service , Click the refresh button on the page to load the latest code , Operation and debugging are very convenient .
2. Data components
dataframe and table Components can display tables .
import streamlit as st
import pandas as pd
import numpy as np
df = pd.DataFrame(
np.random.randn(50, 5),
columns=('col %d' % i for i in range(5)))
# Interactive table
st.dataframe(df)
# Static tables
st.table(df)
Copy code
dateframe and table Is the difference between the , The former can interact on the form ( Such as : Sort ), The latter is just a static display . The data types they support to display include pandas.DataFrame、pandas.Styler、pyarrow.Table、numpy.ndarray、Iterable、dict.
metric Component is used to show the change of indicators , Data analysis is often used .
st.metric(label="Temperature", value="70 °F", delta="1.2 °F")
Copy code
value The parameter represents the current indicator value ,delta The parameter represents the difference from the previous value , The upward green arrow represents the value compared to the previous value , It's rising , On the contrary, the downward red arrow indicates that it is down compared with the previous value . Of course, the rise and fall color can be through delta_color Parameters to control .
json Components are used to show json Type data
st.json({
'foo': 'bar',
'stuff': [
'stuff 1',
'stuff 2',
],
})
Copy code
Streamlit Will json Formatting Data , The display is more beautiful , And provide interaction , It can be expanded 、 Retract json Child nodes of .
3. Chart components
Streamlit The chart component of consists of two parts , Some are native components , The other part is rendering third-party libraries .
Native components contain only 4 A chart ,line_chart、area_chart 、bar_chart and map, Show the line chart separately 、 Area map 、 Histograms and maps .
chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=['a', 'b', 'c'])
st.line_chart(chart_data)
Copy code
The above is line_chart An example of , Other charts are used in a similar way .
Streamlit The chart has few parameters that can be set , In addition to data sources , The rest can only set the width and height of the chart .
although Streamlit Fewer native charts , But it can put other Python The diagram of the visualization library is shown in Streamlit On the page . Supported visualization libraries include :matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz.
With matplotlib.pyplot For example , Use as follows :
import matplotlib.pyplot as plt
arr = np.random.normal(1, 1, size=100)
fig, ax = plt.subplots()
ax.hist(arr, bins=20)
st.pyplot(fig)
Copy code
Write directly with matplotlib.pyplot equally , Just call at the end of the presentation st.pyplot You can show the chart Streamlit On the page . other Python The library is used in a similar way .
Input components
The three types of components we introduced earlier are output classes 、 Show class . For interactive pages , It is essential to accept user input .
Streamlit The input components provided are basic , We are all on the website 、 Move APP I often see . Include :
- button: Button
- download_button: File download
- file_uploader: Upload files
- checkbox: Check box
- radio: Radio buttons
- selectbox: Drop down radio box
- multiselect: Drop down the multiple selection box
- slider: Slider bar
- select_slider: Selection bar
- text_input: Text input box
- text_area: Text display box
- number_input: Digital input box , Support addition and subtraction buttons
- date_input: Date selection box
- time_input: Time selection box
- color_picker: Color selector
They contain some common parameters :
- label: What is displayed on the component ( Such as : The name of the button )
- key: The current page uniquely identifies a component
- help: Place the mouse on the component to display the description information
- on_click / on_change: Components interact ( Such as : Input 、 Click on ) Callback function after
- args: The parameters of the callback function
- kwargs: The parameters of the callback function
Let's say selectbox To demonstrate the use of input components
option = st.selectbox(
' A drop-down box ',
(' Option one ', ' Option 2 ', ' Option 3 '))
st.write(' I chose :', option)
Copy code
selectbox Show three options , And output the currently selected item ( The first... Is selected by default ). When we select other options in the page drop-down , The entire page code will be re executed , But the selection status of the component Will remain in option in , therefore , call st.write The selected options will be output .
st.write It is also an output component , You can output strings 、DataFrame、 Various types of data such as ordinary objects .
The use of other components is similar , The component effect diagram is as follows :
5. Multimedia components
Streamlit Defined image、audio and video Used to show pictures 、 Audio and video .
Can display local multimedia , Also through url Show network multimedia .
The usage is the same as the previous components , Garbage sorting in the back APP We will use image Components .
6. State component
The status component is used to show the user the running status of the current program , Include :
- progress: Progress bar , Such as game loading progress
- spinner: Wait for the prompt
- balloons: A balloon floats at the bottom of the page , Congratulations
- error: Display error message
- warning: Display alarm information
- info: Display general information
- success: Display success information
- exception: Display exception information ( Code error stack )
The effect is as follows :
7. Other content
Come here ,Streamlit I've basically finished introducing all the components of , The components are Streamlit Main content .
This section introduces other important contents , Including page layout 、 Control flow and cache .
The page layout . We wrote before Streamlit The components are displayed from top to bottom in the order of code execution ,Streamlit Provides 5 Species layout :
- sidebar: Sidebar , Such as : The picture at the beginning of the article , Model parameter selection on the left side of the page
- columns: A column of containers , In the same place columns Internal components , Display from left to right
- expander: Hidden information , Click to expand and display the details , Such as : Show more
- container: Container containing multiple components
- empty: A container containing a single component
** control flow .** control Streamlit Application execution , Include
- stop: It can make Streamlit The application stops without executing down , Such as : After the verification code passes , Then run down to show the follow-up content .
- form: Forms ,Streamlit After a component interacts, the page program will be re executed , Sometimes, you need to wait for a group of components to complete the interaction before refreshing ( Such as : Log in and fill in the user name and password ), At this point, you need to add these components to form in
- form_submit_button: stay form Use in , Submit Form .
** cache .** This is more critical , Especially students who do machine learning . Has just said , Streamlit After component interaction, the page code will be re executed , If the program contains some complex data processing logic ( Such as : Read external data 、 Training models ), It will cause the same data processing logic to be executed repeatedly for each interaction , This causes the page to take too long to load , Influence the experience .
By adding the cache, the results of the first processing can be stored in memory , When the program is re executed, it will read from memory , Without having to reprocess .
It's easy to use , Add... To the functions that need to be cached @st.cache A decorator is fine . We talked about... Two days ago Python Decorator .
DATE_COLUMN = 'date/time'
DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
'streamlit-demo-data/uber-raw-data-sep14.csv.gz')
@st.cache
def load_data(nrows):
data = pd.read_csv(DATA_URL, nrows=nrows)
lowercase = lambda x: str(x).lower()
data.rename(lowercase, axis='columns', inplace=True)
data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
return data
Copy code
8. refuse classification
Finally, explain the garbage classification APP Code for , Several types of components are introduced earlier in this paper APP There are involved .
The garbage classification model I use is Tianxing API , You can go www.tianapi.com/ Registered account , obtain appkey, Opening “ Image garbage classification ” Interface can .
The input of the interface is as follows :
except key Outside , other 3 Two parameters need to use Streamlit Component implementation , The code is as follows :
import base64
import requests
import streamlit as st
import pandas as pd
import numpy as np
add_selectbox = st.sidebar.selectbox(
" picture source ",
(" Upload locally ", "URL")
)
uploaded_file = None
img_url = None
if add_selectbox == ' Upload locally ':
uploaded_file = st.sidebar.file_uploader(label=' To upload pictures ')
else:
img_url = st.sidebar.text_input(' picture url')
cls_mode = {' Strict mode ': 0, ' Fuzzy mode ': 1}
mode_name = st.sidebar.radio(' Classification patterns ', cls_mode)
mode = cls_mode[mode_name]
Copy code
Used 3 Input components , because img and imgurl It's one of two , So we use the drop-down radio control to display only one component .
When you enter a picture , We want to show the pictures on the page
# Request the results
img_base64 = None
if uploaded_file:
st.image(uploaded_file, caption=' Local pictures ')
base64_data = base64.b64encode(uploaded_file.getvalue())
img_base64 = base64_data.decode()
if img_url:
st.image(img_url, caption=' Network picture ')
Copy code
Use image Multimedia component installation process . If it's a local picture , You need to turn it into base64 Encoded string .
Last , Request interface , Get the classification results
if img_base64 or img_url:
cls_res = get_img_cls_res(img_base64, img_url, mode)
lajitype_to_name = {0: ' Recyclable ', 1: ' Harmful Waste ', 2: ' Kitchen Waste ', 3: ' Other Waste ', 4: ' Can't recognize '}
if cls_res.status_code == 200:
cls_df = pd.DataFrame(cls_res.json()['newslist'])
cls_df[' classification '] = cls_df.index.astype(str) + '-' + cls_df['name'] + '-' + cls_df['lajitype'].apply(lambda x: lajitype_to_name[x])
cls_df[' Degree of confidence '] = cls_df['trust']
cls_df.set_index([" classification "], inplace=True)
print(cls_df)
st.bar_chart(cls_df[[' Degree of confidence ']])
else:
st.write(cls_res)
Copy code
get_img_cls_res A function is a function that requests an interface
def get_img_cls_res(img_base64, img_url, mode):
url = 'https://api.tianapi.com/txapi/imglajifenlei/index'
headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
body = {
'key': 'APPKEY',
'mode': mode
}
if img_base64:
body["img"] = img_base64
if img_url:
body['imgurl'] = img_url
response = requests.post(url, headers=headers, data=body)
return response
Copy code
According to the returned data format , Put the data according to confidence (trust) Show it as a histogram
Official account Transcode reply “ refuse classification v2” Get all the code . Today's content basically puts Streamlit Finished. , You can refer to the official documents for details , I believe that after reading this tutorial , It's easy to look at the official documents .
copyright notice
author[Crossover code],Please bring the original link to reprint, thank you.
https://en.pythonmana.com/2022/02/202202011132288574.html
The sidebar is recommended
- Python from 0 to 1 (day 14) - Python conditional judgment 1
- Several very interesting modules in Python
- How IOS developers learn Python Programming 15 - object oriented programming 1
- Daily python, Chapter 20, exception handling
- Understand the basis of Python collaboration in a few minutes
- [centos7] how to install and use Python under Linux
- leetcode 1130. Minimum Cost Tree From Leaf Values(python)
- leetcode 1433. Check If a String Can Break Another String(python)
- Python Matplotlib drawing 3D graphics
- Talk about deep and shallow copying in Python
guess what you like
-
Python crawler series - network requests
-
Python thread 01 understanding thread
-
Analysis of earthquake distribution in the past 10 years with Python~
-
You need to master these before learning Python crawlers
-
After the old friend (R & D post) was laid off, I wanted to join the snack bar. I collected some data in Python. It's more or less a intention
-
Python uses redis
-
Python crawler - ETF fund acquisition
-
Detailed tutorial on Python operation Tencent object storage (COS)
-
[Python] comparison of list, tuple, array and bidirectional queue methods
-
Go Python 3 usage and pit Prevention Guide
Random recommended
- Python logging log error and exception exception callback method
- Learn Python quickly and take a shortcut~
- Python from 0 to 1 (day 15) - Python conditional judgment 2
- Python crawler actual combat, requests module, python to capture headlines and take beautiful pictures
- The whole activity collected 8 proxy IP sites to pave the way for the python proxy pool, and the 15th of 120 crawlers
- Why can't list be used as dictionary key value in Python
- Python from 0 to 1 (day 16) - Python conditional judgment 3
- What is the python programming language?
- Python crawler reverse webpack, a real estate management platform login password parameter encryption logic
- Python crawler reverse, a college entrance examination volunteer filling platform encrypts the parameter signsafe and decrypts the returned results
- Python simulated Login, selenium module, python identification graphic verification code to realize automatic login
- Python -- datetime (timedelta class)
- Python's five strange skills will bring you a sense of enrichment in mastering efficient programming skills
- [Python] comparison of dictionary dict, defaultdict and orderdict
- Test driven development using Django
- Face recognition practice: face recognition using Python opencv and deep learning
- leetcode 1610. Maximum Number of Visible Points(python)
- Python thread 03 thread synchronization
- Introduction and internal principles of Python's widely used concurrent processing Library Futures
- Python - progress bar artifact tqdm usage
- Python learning notes - the fifth bullet * class & object oriented
- Python learning notes - the fourth bullet IO operation
- Python crawler actual combat: crawl all the pictures in the answer
- Quick reference manual of common regular expressions, necessary for Python text processing
- [Python] the characteristics of dictionaries and collections and the hash table behind them
- Python crawler - fund information storage
- Python crawler actual combat, pyteseract module, python realizes the visualization of boos direct employment & hook post data
- Pit filling summary: Python memory leak troubleshooting tips
- Python code reading (Chapter 61): delaying function calls
- Through the for loop, compare the differences between Python and Ruby Programming ideas
- leetcode 1606. Find Servers That Handled Most Number of Requests(python)
- leetcode 1611. Minimum One Bit Operations to Make Integers Zero(python)
- 06python learning notes - reading external text data
- [Python] functions, higher-order functions, anonymous functions and function attributes
- Python Networkx practice social network visualization
- Data analysis starts from scratch, and pandas reads and writes CSV data
- Python review (format string)
- [pandas learning notes 01] powerful tool set for analyzing structured data
- leetcode 147. Insertion Sort List(python)
- apache2. 4 + windows deployment Django (multi site)