前言
在本公众号的前面文章中,有介绍到
PySimpleGui
系列的文章,用该第三方函数库创建图形用户界面是比较容易的,更难能可贵的是它可以跨平台运行。不过今天要来介绍的另一个也可用来开发图形用户界面的库却显得更容易,当然它也可以跨平台运行,只是它调用的是浏览器界面。它的名字叫
Streamlit
。
安装
安装第三方库对于同学们来说是容易的,这里用豆瓣源更便捷快速:
pip install streamlit -i https://pypi.doubanio.com/simple/
这样可自动安装该包所有的依赖,我这里安装的版本是
streamlit-0.68.1
。
安装完成后,可测试一下:
streamlit hello
运行成功后,命令窗口显示如下:
![40ab6953b092785794fe9161b76cee1c.png](https://i-blog.csdnimg.cn/blog_migrate/9be4a4bbc223716b87afcbb03eae737e.png)
上图中显示了两个
IP
地址,第一个是本机访问的地址,第二个是在同一个局域网内访问的
IP
地址,这样调试起来就显得很方便,运行结果如下图所示:
![e79adbdf160e74e6fda9808b231e67d5.png](https://i-blog.csdnimg.cn/blog_migrate/92273fc87cd39ba6de8efcb6043f83bb.png)
这是一个演示程序,其中包含四个小程序,同学可以点击左上方的下拉列表来观察四个不同程序的运行。
下面我们来介绍一下,开发一个界面程序的步骤是怎样的。
创建第一个streamlit
界面程序
首先建立一个
py
文件,比如命名为
myfirstapp.py
,然后在里面输出以下代码:
import streamlit as stimport numpy as npimport pandas as pd
上面代码的第一行是将我们需要的
streamlit
导入,其它两句都是同学们熟悉的,分别是处理数据的两个软件包,可以导入,也可以不用导入,这样就可以直接在命令行运行:
streamlit run myfirstapp.py
运行成功后,在命令窗口显示如下信息:
![f56becf29941b0fcad2533b772474df2.png](https://i-blog.csdnimg.cn/blog_migrate/a6aa22cf9ed052d6662cbfd10613ae9c.png)
但在弹出的浏览器新建页面里,显示的是一片空白,因为我们的程序里还什么都没有写呢。这就是一个界面程序的创建和运行流程,如果想结束该程序,在命令窗口里同时按
Ctrl+c
即可终结。
添加文本
我们先来给我们的小程序添加一个标题:
st.title("我的第一个小程序")
然后再在页面上写一行文字:
st.write("学习新的知识总是激动人心的!")
甚至还可以在页面上用
markdown
语法书写:
st.markdown("又接触了一个 ** 神奇的工具 **!")
更令人意外的是它还可以用
latex
书写数学公式:
st.write("\n勾股定理:")st.latex(r'a^2 + b^2 = c^2')
生成的界面如下:
![84b572e9c3a3abb492835aa524c9d17b.png](https://i-blog.csdnimg.cn/blog_migrate/446eaf2a11920aff20a25f91ca756e01.png)
注意:上图右上方有一个“三道杠”的图标,点击它可以弹出一个菜单,当我们修改了源代码后,可以直接点击该图标,在弹出的菜单里选择“重新运行(
Rerun
)”即可重新加载页面。
添加数据
在
Streamlit
中,
write
函数被称为“瑞士军刀”,即我们可以用该函数在页面上输出几乎任何东西,从文字到图形到动画都一网打尽,下面用它来输出一个带数据的表格:
st.write("用数据来创建一个表格:")st.write(pd.DataFrame({ '第一列 ': [1, 2, 3, 4], '第二列 ': [10, 20, 30, 40]}))
上述代码用到了
pandas
中的
DataFrame
,它创建了一个数据框架,显示效果如下:
![bbc2f8b1c789a3cb738507218bc37455.png](https://i-blog.csdnimg.cn/blog_migrate/13519c270f26443e238752b0093783fb.png)
创建图表
利用
pandas
的数据框架,
Streamlit
很容易绘制图表,比如绘制一张折线图:
chart_data = pd.DataFrame( np.random.randn(20, 3), columns=['a', 'b', 'c'])st.line_chart(chart_data)
显示如下:
![764d10d2770de574ebfce350979d2b6d.png](https://i-blog.csdnimg.cn/blog_migrate/b1ad2273374052f39915cbc5b743a938.png)
你甚至能从该图形的右上方很容易找到将该折线图保存为图片的菜单,对于日常的绘图来说,实在是太方便了。
再来看看散点图:
import altair as altdf = pd.DataFrame( np.random.randn(200, 3), columns=['a', 'b', 'c'])c = alt.Chart(df).mark_circle().encode( x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])st.altair_chart(c, use_container_width=True)
上述代码中,
altair
是一个数据可视化的python库,绘制的图形如下:
![450b5b520701aac296793ddd7adca0f2.png](https://i-blog.csdnimg.cn/blog_migrate/567895ffd661bb6eb15db8821e48a685.png)
交互控件
上面的代码都是纯粹显示信息用的,既然这个
Streamlit
号称可以开发界面,那么一定会有与用户进行交互的控件存在,下面我们就来看一下各种交互控件是如何添加,以及这些交互控件的响应事件如何编写:
if st.button('你好'): st.write('当上述按钮点击时,在其下方显示“你好”!')agree = st.checkbox('我同意')option = st.selectbox( '你喜欢用哪种方式和别人联系?', ('Email', '固定电话', '手机'))st.write('你的选择是:', option)age = st.slider('你的年龄是多少?', 0, 130, 25)st.write("我今年", age, '岁')
上述代码创建了一个简单的调查问卷,演示效果如下:
![129e559a32bd1bb1bd2fd9a4827e64f4.png](https://i-blog.csdnimg.cn/blog_migrate/a2735ca616ddc76e7eacdb0086262125.png)
显示图片
由于
Streamlit
是基于浏览器的,所以显示图片对于它来说再容易不过,下面显示一行三列的图片:
col1, col2, col3 = st.beta_columns(3)with col1: st.header("猫") st.image("cat.jpg", use_column_width=True)with col2: st.header("狗") st.image("dog.jpg", use_column_width=True)with col3: st.header("猫头鹰") st.image("owl.jpg", use_column_width=True)
上述代码中的
beta_columns
创建了一个按列排的窗口,要注意,由于创建的界面是基于网址的,所以图片要放在当前
py
文件的同个文件夹下。
显示效果如下:
![ce19552b359abef3b84f1e980e45e953.png](https://i-blog.csdnimg.cn/blog_migrate/a65b59e150b294d7047f152db3f8ec88.png)
小结
本文对
Streamlit
这个第三方库进行了简介,这是一个能快速开发图形界面的小工具,熟练掌握它,对于个人的工作和学习将会大有益处,当然该第三方包也有一些缺点,主要是它前端的界面固定,用户不能随意变更其位置,但由于它仍在快速迭代开发中,相信这些问题在未来会有一个较好的解决方案,但无论怎样,这个软件包绝对值得同学们一试。