您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > Python

详解一个Python库,用于构建精美数据可视化web app

时间:2021-12-09 15:23:30  来源:  作者:夏天的雨.00

今天详解一个 Python/ target=_blank class=infotextkey>Python 库 Streamlit,它可以为机器学习和数据分析构建 web App。它的优势是入门容易、纯 Python 编码、开发效率高、UI精美。

详解一个Python库,用于构建精美数据可视化web app

 

上图是用 Streamlit 构建自动驾驶模型效果的 demo,左侧是模型的参数,右侧是模型的效果。通过调整左侧参数,右边的模型会实时地响应。

由此可以看出,对于交互式的数据可视化需求,完全可以考虑用 Streamlit 实现。特别是在学习、工作汇报的时候,用它的效果远好于 PPT。

因为 Streamlit 提供了很多前端交互的组件,所以也可以用它来做一些简单的web 应用。今天我们也会用它来做个垃圾分类的 web app。

 

,时长00:16

之前我们用 Streamlit 做过两个app,《植物识别app》和《动物识别app》。但只是用了 Streamlit 一小部分功能。今天我们就按照 Streamlit 官网文档,对其做个详解。

1

文本组件

 

我使用的是 Python 3.8 环境,执行 pip install streamlit 安装。安装后执行 streamlit hello 检查是否安装成功。

先来了解下 Streamlit 最基础的文本组件。

文本组件是用来在网页上展示各种类型的文本内容。Streamlit 可以展示纯文本、Markdown、标题、代码和LaTeX公式。

import streamlit as st
# markdown
st.markdown('Streamlit is **_really_ cool**.')
# 设置网页标题
st.title('This is a title')
# 展示一级标题
st.header('This is a header')
# 展示二级标题
st.subheader('This is a subheader')
# 展示代码,有高亮效果
code = '''def hello():
print("Hello, Streamlit!")'''
st.code(code, language='python')
# 纯文本
st.text('This is some text.')
# LaTeX 公式
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)
''')

 

上述是 Streamlit 支持的文本展示组件,代码存放 my_code.py 文件中。编码完成后,执行 streamlit run my_code.py ,streamlit 会启动 web 服务,加载指定的源文件。

启动后,可以看到命令行打印出以下信息

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

 

在浏览器访问 http://localhost:8501/ 即可。

当源代码被修改,无需重启服务,在页面上点击刷新按钮就可加载最新的代码,运行和调试都非常方便。

2

数据组件

 

dataframe 和 table 组件可以展示表格。

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)))
# 交互式表格
st.dataframe(df)
# 静态表格
st.table(df)

详解一个Python库,用于构建精美数据可视化web app

 

dateframe 和 table 的区别是,前者可以在表格上做交互(如:排序),后者只是静态的展示。它们所展示的数据类型包括 pandas.DataFrame、pandas.Styler、pyarrow.Table、numpy.ndarray、Iterable、dict。

metric 组件用来展示指标的变化,数据分析中经常会用到。

st.metric(label="Temperature", value="70 °F", delta="1.2 °F")

详解一个Python库,用于构建精美数据可视化web app

 

value 参数表示当前指标值,delta 参数表示与前值的差值,向上的绿色箭头代表相比于前值,是涨的,反之向下的红箭头代表相比于前值是跌的。当然涨跌颜色可以通过 delta_color 参数来控制。

json 组件用来展示 json 类型数据

st.json({
'foo': 'bar',
'stuff': [
'stuff 1',
'stuff 2',
],
})

详解一个Python库,用于构建精美数据可视化web app

 

Streamlit 会将 json 数据格式化,展示地更美观,并且提供交互,可以展开、收起 json 的子节点。

3

图表组件

 

Streamlit 的图表组件包含两部分,一部分是原生组件,另一部分是渲染第三方库。

原生组件只包含 4 个图表,line_chart、area_chart 、bar_chart 和 map,分别展示折线图、面积图、柱状图和地图。

chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=['a', 'b', 'c'])
st.line_chart(chart_data)

详解一个Python库,用于构建精美数据可视化web app

 

上述是 line_chart 的示例,其他图表的使用方法与之类似。

Streamlit 图表可设置的参数很少,除了数据源外,剩下只能设置图表的宽度和高度。

虽然 Streamlit 原生图表少,但它可以将其他 Python 可视化库的图表展示在 Streamlit 页面上。支持的可视化库包括:matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz。

以 matplotlib.pyplot 为例,使用方式如下:

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)

详解一个Python库,用于构建精美数据可视化web app

 

跟直接写 matplotlib.pyplot 一样,只不过最终展示的时候调用 st.pyplot 可以将图表展示出来 Streamlit 页面上。其他 Python 库的使用方法与之类似。

4

输入组件

 

前面我们介绍的三类组件都是输出类、展示类的。对于交互式的页面来说,接受用户的输入是必不可少的。

Streamlit 提供的输入组件都是基本的,都是我们在网站、移动APP上经常看到的。包括:

  • button:按钮
  • download_button:文件下载
  • file_uploader:文件上传
  • checkbox:复选框
  • radio:单选框
  • selectbox:下拉单选框
  • multiselect:下拉多选框
  • slider:滑动条
  • select_slider:选择条
  • text_input:文本输入框
  • text_area:文本展示框
  • number_input:数字输入框,支持加减按钮
  • date_input:日期选择框
  • time_input:时间选择框
  • color_picker:颜色选择器

它们包含一些公共的参数:

  • label:组件上展示的内容(如:按钮名称)
  • key:当前页面唯一标识一个组件
  • help:鼠标放在组件上展示说明信息
  • on_click / on_change:组件发生交互(如:输入、点击)后的回调函数
  • args:回调函数的参数
  • kwargs:回调函数的参数

下面以 selectbox 来演示输入组件的用法

option = st.selectbox(
'下拉框',
('选项一', '选项二', '选项三'))
st.write('选择了:', option)

详解一个Python库,用于构建精美数据可视化web app

 

selectbox 展示三个选项,并输出当前选中的项(默认选中第一个)。当我们在页面下拉选择其他选项后,整个页面代码会重新执行,但组件的选择状态 会保留在 option 中,因此,调用 st.write 后会输出选择后的选项。

st.write 也是一个输出组件,可以输出字符串、DataFrame、普通对象等各种类型数据。

其他组件的使用与之类似,组件效果图如下:

详解一个Python库,用于构建精美数据可视化web app

 

5

多媒体组件

 

Streamlit 定义了 image、audio 和 video 用于展示图片、音频和视频。

可以展示本地多媒体,也通过 url 展示网络多媒体。

详解一个Python库,用于构建精美数据可视化web app

 

用法跟前面的组件是一样的,后面的垃圾分类 APP 我们会用到 image 组件。

6

状态组件

 

状态组件用来向用户展示当前程序的运行状态,包括:

  • progress:进度条,如游戏加载进度
  • spinner:等待提示
  • balloons:页面底部飘气球,表示祝贺
  • error:显示错误信息
  • warning:显示报警信息
  • info:显示常规信息
  • success:显示成功信息
  • exception:显示异常信息(代码错误栈)

效果如下:

详解一个Python库,用于构建精美数据可视化web app

 

7

其他内容

 

到这里,Streamlit 的组件基本上就全介绍完了,组件也是 Streamlit 的主要内容。

这小节介绍一下其他比较重要的内容,包括页面布局、控制流和缓存。

页面布局。之前我们写的 Streamlit 都是按照代码执行顺序从上至下展示组件,Streamlit 提供了 5 种布局:

  • sidebar:侧边栏,如:文章开头那张图,页面左侧模型参数选择
  • columns:列容器,处在同一个 columns 内组件,按照从左至右顺序展示
  • expander:隐藏信息,点击后可展开展示详细内容,如:展示更多
  • container:包含多组件的容器
  • empty:包含单组件的容器

控制流。控制 Streamlit 应用的执行,包括

  • stop:可以让 Streamlit 应用停止而不向下执行,如:验证码通过后,再向下运行展示后续内容。
  • form:表单,Streamlit 在某个组件有交互后就会重新执行页面程序,而有时候需要等一组组件都完成交互后再刷新(如:登录填用户名和密码),这时候就需要将这些组件添加到 form 中
  • form_submit_button:在 form 中使用,提交表单。

缓存。这个比较关键,尤其是做机器学习的同学。刚刚说了, Streamlit 组件交互后页面代码会重新执行,如果程序中包含一些复杂的数据处理逻辑(如:读取外部数据、训练模型),就会导致每次交互都要重复执行相同数据处理逻辑,进而导致页面加载时间过长,影响体验。

加入缓存便可以将第一次处理的结果存到内存,当程序重新执行会从内存读,而不需要重新处理。

使用方法也简单,在需要缓存的函数加上 @st.cache 装饰器即可。前两天我们讲过 Python 装饰器。

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

 

8

垃圾分类

 

最后讲解垃圾分类APP的代码,前面介绍几大类组件在该 APP 都有涉及。

垃圾分类模型我用的是天行 API ,大家可以去 https://www.tianapi.com/ 注册账号,获取 appkey,开通“图像垃圾分类” 接口即可。

接口的输入如下:

详解一个Python库,用于构建精美数据可视化web app

 

除了key外,其他 3 个参数需要用 Streamlit 组件实现,代码如下:

import base64
import requests
import streamlit as st
import pandas as pd
import numpy as np
add_selectbox = st.sidebar.selectbox(
"图片来源",
("本地上传", "URL")
)
uploaded_file = None
img_url = None
if add_selectbox == '本地上传':
uploaded_file = st.sidebar.file_uploader(label='上传图片')
else:
img_url = st.sidebar.text_input('图片url')
cls_mode = {'严格模式': 0, '模糊模式': 1}
mode_name = st.sidebar.radio('分类模式', cls_mode)
mode = cls_mode[mode_name]

 

使用了 3 个输入组件,因为 img 和 imgurl 是二选一,所以我们用下拉单选框控制仅展示一个组件。

当输入图片后,我们希望在页面上将图片展示出来

# 请求结果
img_base64 = None
if uploaded_file:
st.image(uploaded_file, caption='本地图片')
base64_data = base64.b64encode(uploaded_file.getvalue())
img_base64 = base64_data.decode()
if img_url:
st.image(img_url, caption='网络图片')

 

使用 image 多媒体组件即可。如果是本地图片,需要将其转成 base64 编码的字符串。

最后,请求接口,获取分类结果即可

if img_base64 or img_url:
cls_res = get_img_cls_res(img_base64, img_url, mode)
lajitype_to_name = {0: '可回收物', 1: '有害垃圾', 2: '厨余垃圾', 3: '其他垃圾', 4: '无法识别'}
if cls_res.status_code == 200:
cls_df = pd.DataFrame(cls_res.json()['newslist'])
cls_df['分类'] = cls_df.index.astype(str) + '-' + cls_df['name'] + '-' + cls_df['lajitype'].apply(lambda x: lajitype_to_name[x])
cls_df['置信度'] = cls_df['trust']
cls_df.set_index(["分类"], inplace=True)
print(cls_df)
st.bar_chart(cls_df[['置信度']])
else:
st.write(cls_res)

 

get_img_cls_res 函数是请求接口的函数

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

 

根据返回的数据格式,将数据按照置信度(trust)展示成一个柱状图

详解一个Python库,用于构建精美数据可视化web app

 


详解一个Python库,用于构建精美数据可视化web app

 



Tags:Python库   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一个集成了很多图像/视频特效处理的python库,目前支持的有:信号故障特效、图像卡通化、视频转字符画、铅笔素描画等。开源:https://github.com/CharlesPikachu/pydrawing文档:ht...【详细内容】
2022-04-14  Tags: Python库  点击:(78)  评论:(0)  加入收藏
CDA数据分析师 出品作者:Terence Shin编译:Mika学习数据分析绝非易事,有无数种工具和资源可供使用。因此,有时会让我们很难弄清楚该学习什么技能,该使用哪种工具。在本文中,我们...【详细内容】
2022-01-19  Tags: Python库  点击:(119)  评论:(0)  加入收藏
今天详解一个 Python 库 Streamlit,它可以为机器学习和数据分析构建 web app。它的优势是入门容易、纯 Python 编码、开发效率高、UI精美。 上图是用 Streamlit 构建自动驾驶...【详细内容】
2021-12-09  Tags: Python库  点击:(129)  评论:(0)  加入收藏
自然语言是指人类相互交流的语言,而自然语言处理是将数据以可理解的形式进行预处理,使计算机能够理解的一种方法。简单地说,自然语言处理(NLP)是帮助计算机用自己的语言与人类...【详细内容】
2021-05-12  Tags: Python库  点击:(284)  评论:(0)  加入收藏
对使用哪个可视化工具感到困惑? 我为您分解了每个库的优缺点> Photo by oxana v on Unsplash 动机如果您刚开始使用Python可视化,可能会不知所措的库和示例数量众多:· M...【详细内容】
2020-08-10  Tags: Python库  点击:(97)  评论:(0)  加入收藏
Python是最流行和最广为人知的编程语言之一,它已取代了业界的许多编程语言。它是数据科学专业人士最喜欢使用的编程语言之一,因为它拥有庞大的库。Python因其简单易用而被称...【详细内容】
2020-08-03  Tags: Python库  点击:(105)  评论:(0)  加入收藏
1 说明:=====1.1 Bokeh是专门针对Web浏览器的交互式、可视化Python绘图库。1.2 Bokeh,可以做出像D3.js简洁漂亮的交互可视化效果,但是使用难度低于D3.js。1.3 不需要使用Javasc...【详细内容】
2020-06-26  Tags: Python库  点击:(102)  评论:(0)  加入收藏
简单的框架可创建精美的报告并与团队共享您的分析结果> Photo by Clay Banks on Unsplash 动机对于许多Python数据分析,有时您想与他人共享您的发现。 显示您的工作将帮助您...【详细内容】
2020-06-26  Tags: Python库  点击:(750)  评论:(0)  加入收藏
> Photo by JOSHUA COLEMAN on Unsplash 您是否曾经想到过数据可视化可以在命令行中进行?作为最流行的编程语言之一,Python拥有大量促进开发的优秀库,例如Pandas,Numpy,Matplotli...【详细内容】
2020-05-14  Tags: Python库  点击:(102)  评论:(0)  加入收藏
/1 前言/今天我们来说说python的pip换源吧,这个换源,相对来说,还是比较重要的,能让自己少生好几次气的,哈哈哈!/2 为什么要换源/我们搞python的,肯定离不开各种各样的第三方包,比如...【详细内容】
2020-03-24  Tags: Python库  点击:(54)  评论:(0)  加入收藏
▌简易百科推荐
近几年 Web3 被炒得火热,但是大部分人可能还不清楚什么是 Web3,今天就让w3cschool编程狮小师妹带你了解下 Web3 是什么?与我们熟知的 Web1 和 Web2 又有什么区别呢?web3.0什么是...【详细内容】
2022-07-15  编程狮W3Cschool    Tags:Web3.0   点击:(2)  评论:(0)  加入收藏
1、让我们一起来看下吧,直接上图。 第一眼看到是不是觉得很高逼格,暗黑画风,这很大佬。其实它就是------AidLearning。一个运行在安卓平台的linux系统,而且还包含了许多非常强大...【详细内容】
2022-07-15  IT智能化专栏    Tags:AidLearning   点击:(2)  评论:(0)  加入收藏
真正的大师,永远都怀着一颗学徒的心! 一、项目简介 今天说的这个软件是一款基于Python+vue的自动化运维、完全开源的云管理平台。二、实现功能 基于RBAC权限系统 录像回放 ...【详细内容】
2022-07-14  菜鸟程序猿    Tags:Python   点击:(3)  评论:(0)  加入收藏
前言今天笔者想和大家来聊聊python接口自动化的MySQL数据连接,废话不多说咱们直接进入主题吧。 一、什么是 PyMySQL?PyMySQL是在Python3.x版本中用于连接MySQL服务器的一个库,P...【详细内容】
2022-07-11  测试架构师百里    Tags:python   点击:(19)  评论:(0)  加入收藏
aiohttp什么是 aiohttp?一个异步的 HTTP 客户端\服务端框架,基于 asyncio 的异步模块。可用于实现异步爬虫,更快于 requests 的同步爬虫。安装pip install aiohttpaiohttp 和 r...【详细内容】
2022-07-11  VT漫步    Tags:aiohttp   点击:(15)  评论:(0)  加入收藏
今天我们学习下 Queue 的进阶用法。生产者消费者模型在并发编程中,比如爬虫,有的线程负责爬取数据,有的线程负责对爬取到的数据做处理(清洗、分类和入库)。假如他们是直接交互的,...【详细内容】
2022-07-06  VT漫步    Tags:Python Queue   点击:(34)  评论:(0)  加入收藏
继承:是面向对象编程最重要的特性之一,例如,我们每个人都从祖辈和父母那里继承了一些体貌特征,但每个人却又不同于父母,有自己独有的一些特性。在面向对象中被继承的类是父类或基...【详细内容】
2022-07-06  至尊小狸子    Tags:python   点击:(25)  评论:(0)  加入收藏
点击上方头像关注我,每周上午 09:00准时推送,每月不定期赠送技术书籍。本文1553字,阅读约需4分钟 Hi,大家好,我是CoCo。在上一篇Python自动化测试系列文章:Python自动化测试之P...【详细内容】
2022-07-05  CoCo的软件测试小栈    Tags:Python   点击:(27)  评论:(0)  加入收藏
第一种方式:res = requests.get(url, params=data, headers = headers)第二种方式:res = requests.get(url, data=data, headers = headers)注意:1.url格式入参只支持第一种方...【详细内容】
2022-07-05  独钓寒江雪之IT    Tags:Python request   点击:(19)  评论:(0)  加入收藏
什么是python类的多态python的多态,可以为不同的类实例,或者说不同的数据处理方式,提供统一的接口。用比喻的方式理解python类的多态比如,同一个苹果(统一的接口)在孩子的眼里(类实...【详细内容】
2022-07-04  写小说的程序员    Tags:python类   点击:(28)  评论:(0)  加入收藏
站内最新
站内热门
站内头条