写点什么

用纯 python 写 web app:Streamlit

作者:AIWeker
  • 2023-04-25
    福建
  • 本文字数:3184 字

    阅读完需:约 10 分钟

用纯python写web app:Streamlit

1. Streamlit

一句话,Streamlit 是一个可以用 python 编写 web app 的库,可以方便的动态展示你的机器学习的项目。


优点


  • 你不需要懂 html, css, js 等,纯 python 语言编写 web app

  • 包括 web 常用组件:文本框, 按钮,单选框,复选框, 下拉框,多媒体(图片,视频)和文件上传等


应用场景


  • 可以动态的探索数据

  • 可以方便动态展示你的机器学习成果(可以和 jupyter notebook 做个比较)


https://github.com/streamlit/streamlit

2. 安装

pip install streamlit
复制代码


streamlit hello
# 启动web app# streamlit run [filename]streamlit run app.py
# You can now view your Streamlit app in your browser.# Local URL: http://localhost:8501
复制代码

3. 基本组件介绍

3.1 布局

web 中通常有布局 layout css, 如 Bootstrap 中的 12 列删格系统;streamlit 最多只有左右两栏,通常是一栏。 通过st.sidebar添加侧边栏,通常可作为菜单,选择控制操作。在上下结构上,streamlit 按照代码顺序从上到下,依次布局


import streamlit as stimport numpy as npimport timeimport pandas as pdimport datetime# 侧边栏st.sidebar.title('菜单侧边栏')add_selectbox = st.sidebar.selectbox(    "这个是下拉框,请选择?",    ("1", "Home 2", "Mobile 2"))# 主栏st.title('Steamlit 机器学习web app')
复制代码


3.2 text

streamlit 提供了许多文本显示命令,还支持 markdown 语法


st.header('1. text文本显示')st.markdown('Streamlit is **_really_ cool**.')st.text('This is some text.')st.subheader('This is a subheader')st.write("st.write 可以写很多东西哦")st.warning('This is a warning')
复制代码

3.3 表单控件

streamlit 提供丰富的表单控件,如按钮,单选框,复选框,下拉框,文本框和文件上传。用法提炼如下:


  • 函数调用为定义显示控件,返回值是表示是否触发,或者触发返回结果;比如按钮,st.button('Say hello')定义了一个按钮, 如果按下按钮返回 True,否则为 False


st.markdown('- 按钮')if st.button('Say hello'):    st.write('Why hello there')
st.markdown('- 单选框')genre = st.radio( "选择你喜欢的?", ('Comedy', 'Drama', 'Documentary'))
st.write('你选择了:', genre)
st.markdown('- 复选框') agree = st.checkbox('I agree')if agree: st.write('感谢你同意了')


st.markdown('- 下拉框') option = st.selectbox( '你喜欢的联系方式?', ('Email', 'Home phone', 'Mobile phone'))
st.write('你选择了:', option)
st.markdown('- 多选下拉框') options = st.multiselect( 'What are your favorite colors', ['Green', 'Yellow', 'Red', 'Blue'], ['Yellow', 'Red'])
st.write('你选择了:', options)
st.markdown('- slider') values = st.slider( 'Select a range of values', 0.0, 100.0, (25.0, 75.0))st.write('Values:', values)

st.markdown('- 文本输入') title = st.text_input('Movie title', 'Life of Brian')st.write('The current movie title is', title)
txt = st.text_area('Text to analyze', ''' It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, (...) ''')

st.markdown('- 日期与时间')d = st.date_input( "生日", datetime.date(2019, 7, 6))st.write('Your birthday is:', d)
t = st.time_input('闹钟', datetime.time(8, 45))st.write('闹钟为:', t)
st.markdown('- 上传文件')uploaded_file = st.file_uploader("Choose a CSV file", type="csv")if uploaded_file is not None: data = pd.read_csv(uploaded_file) st.write(data)
复制代码



3.4 图像

常用的图像库都支持,通过st.image展示图片


import cv2img = cv2.imread('sunrise.jpg')st.image(img[...,::-1], caption='Sunrise by the mountains',        use_column_width=True)
复制代码

3.5 图表

  • 支持 pandas 中的 dataframe 展示图表(折线图,面积图和柱状图)


st.subheader('4.1 dataframe图表')@st.cache(persist=True)def get_data():    df = pd.DataFrame(    np.random.randn(200, 3),    columns=['a', 'b', 'c'])    return dfdf = get_data()# st.table(df)st.dataframe(df) st.line_chart(df)st.area_chart(df)st.bar_chart(df)
复制代码


  • 还支持 matplotlib 的图表展示,这个你应该很熟悉


plt.plot(df.a, df.b)st.pyplot()
复制代码


3.6 缓存

streamlit 中数据的缓存使用st.cache装饰器来修饰, 注意是作用于函数。缓存的好处顾名思义就是避免每次刷新的时候都要重新加载数据。


@st.cache(persist=True)def get_data():    df = pd.DataFrame(    np.random.randn(200, 3),    columns=['a', 'b', 'c'])    return df
复制代码

4. 动态数据 demo

import streamlit as stimport numpy as npimport matplotlib.pyplot as pltimport pandas as pd# 侧边栏st.sidebar.title('请选择过滤条件')time = st.sidebar.time_input('大于时间', datetime.time(1, 0))
values = st.sidebar.slider( '速度', 0.0, 200.0, (25.0, 75.0))# 主栏st.title('数据探索')@st.cache(persist=True)def get_data(): file = './7000.csv' return pd.read_csv(file, header=0)data = get_data()# print(values)display_data = data[data['time'] > str(time)]display_data = display_data[(display_data['速度'] > values[0]) & (display_data['速度'] < values[1])]st.line_chart(display_data[['方向', '速度']])
复制代码


5. 机器视觉项目 demo

这个例子我们用人脸检测来说明下机器视觉项目的展示。


  • 功能:上传一张图片,检测出人脸框

  • 人脸检测算法来自 facenet 项目https://github.com/davidsandberg/facenet/tree/master/src/align中的 MTCNN 算法

  • 布局为左右布局,左边为上传空间, 右边是展示


import streamlit as stimport numpy as npimport matplotlib.pyplot as pltimport timeimport pandas as pdimport datetimeimport cv2from PIL import Imageimport iofrom face_detect.mtcnn_tf import MTCNN
# 侧边栏st.sidebar.title('请上传一张照片,开始检测')uploaded_file = st.sidebar.file_uploader("", type="jpg")
# 主栏st.title('人脸检测')@st.cache()def init_model(): mtcnn = MTCNN() return mtcnn
detect = init_model()if uploaded_file is not None: # print(uploaded_file) data = np.array(Image.open(io.BytesIO(uploaded_file.read()))) _, bboxs, _, _ = detect.run(data, detect_multiple_faces=True, margin=0) # display bbox and landmarks for idx, landmark in enumerate(landmarks): bbox = bboxs[idx] cv2.rectangle(data, (bbox[1], bbox[0]), (bbox[3], bbox[2]), (0, 2255, 0), 2) st.image(data, caption='image', use_column_width=False)
复制代码


6. 总结

是不是觉得很方便,分分钟就可以构建一个 web app 来展示你的项目。希望对你有帮助, 快动起手来吧!摘要如下:


  • 数据记得要用缓存@st.cache()

  • streamlit 可以支持 matplotlib

  • streamlit 有漂亮的表单控件,函数的返回值就是触发的值

  • streamlit 支持 markdown


官方提供了其他复杂的 demo(官方推荐用函数的方式的封装业务,这里也推荐, 本文主要是为了说明功能,采用比较直观的方式来编写)


  • https://github.com/streamlit/demo-face-gan

  • https://github.com/streamlit/demo-self-driving

发布于: 刚刚阅读数: 4
用户头像

AIWeker

关注

InfoQ签约作者 / 公众号:人工智能微客 2019-11-21 加入

人工智能微客(aiweker)长期跟踪和分享人工智能前沿技术、应用、领域知识,不定期的发布相关产品和应用,欢迎关注和转发

评论

发布
暂无评论
用纯python写web app:Streamlit_Python_AIWeker_InfoQ写作社区