30行代码用streamlit构建你的机器学习模型应用

Streamlit是一个快速构建数据分析和机器学习Web页面的开源Python库。

英文说明：A faster way to build and share data apps

先看一个极简的效果，将一个文本情感分类的模型部署在了HuggingFace的Space托管页面了。

效果如下

大家猜猜做出这个效果需要多少个行代码？100行? 300行？No，全部代码仅需10行，如下所示。

import streamlit as st
from transformers import pipeline

st.title('Text Classification')
pipe = pipeline("text-classification")
text = st.text_area("Enter some text:")

if text:
    out = pipe(text)
    st.json(out)

这个项目部署在了huggingface的space页面中了，可以在网址中进行交互测试。

公众号后台回复关键词： streamlit ，获取本文源代码 和 HuggingFace部署的TextClassification和FasterRCNN演示项目地址。

# 安装
#!pip install streamlit -i https://pypi.tuna.tsinghua.edu.cn/simple

#备注，需要python3.7及以上版本。

# 环境测试
#streamlit hello

一，HelloWorld范例

%%writefile demo.py
import streamlit as st 
st.write("hello world")

!streamlit run demo.py --server.port=8085

二，MarkDown范例

支持常用的markdown展示

• st.markdown: 按照markdown语法呈现内容

• st.header

• st.subheader

• st.code

• st.caption: 注释说明

• st.text

• st.latex

%%writefile demo.py
import streamlit as st

# markdown

st.title('streamlit极简教程')

st.markdown('### 一. 安装')

st.text('和安装其他包一样，安装 streamlit 非常简单，一条命令即可')
code1 = '''pip install streamlit'''
st.code(code1, language='bash')
st.caption("需要python3.7以及以上环境")


st.markdown('### 二. 使用')


st.markdown('#### 1 生成 Markdown 文档')

code2 = '''import streamlit as st
st.markdown('Streamlit Demo')
st.header('标题')
st.text('普通文本')
'''
st.code(code2, language='python')


st.markdown('#### 2 生成 图表')

code3 = '''import streamlit as st
import pandas as pd 
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])
st.line_chart(chart_data)'''
st.code(code2, language='python')


st.markdown('### 三. 运行')

code4 = '''streamlit run demo.py'''
st.code(code4, language='bash')

!streamlit run demo.py --server.port=8085

三，图表范例

支持以下图表展示：

• st.table

• st.dataframe

• st.metric

• st.json

• st.line_chart

• st.bar_chart

• st.area_chart

• st.map_chart

• st.pyplot : matplotlib 的 figure

• st.plotly_chart: plotly 的 figure

and more

%%writefile demo.py
import streamlit as st
import numpy as np 
import pandas as pd 
import plotly.express as px 


st.title('streamlit图表范例')

st.header("一，Table/DataFrame示范")

df = pd.DataFrame(
    np.random.randn(10, 5),
    columns=('第%d列' % (i+1) for i in range(5))
)

#st.table(df)
st.dataframe(df.style.highlight_max(axis=0))


st.header("二，metric监控指标")
col1, col2, col3 = st.columns(3)
col1.metric("Temperature", "70 °F", "1.2 °F")
col2.metric("Wind", "9 mph", "-8%")
col3.metric("Humidity", "86%", "4%")



st.header("三，内置图表")

st.subheader("1，折线图")

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

st.line_chart(chart_data)


st.subheader("2，面积图")

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

st.area_chart(chart_data)

st.subheader("3，柱形图")

chart_data = pd.DataFrame(
    np.random.randn(50, 3),
    columns = ["a", "b", "c"])
st.bar_chart(chart_data)

st.subheader("4，地图")

chart_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon']
)
st.map(chart_data)


st.header("四，plotly图表")

fig = px.line(data_frame=px.data.stocks(),x="date",y=["GOOG","AAPL","AMZN","FB"]) 

st.plotly_chart(fig)

!streamlit run demo.py --server.port=8085

四，控件范例

streamlit支持非常丰富的交互式输入控件。

值得注意的是，当改变任何一个输入时，整个网页会重新计算和渲染。

• button：按钮

• download_button：文件下载

• file_uploader：文件上传

• checkbox：复选框

• radio：单选框

• selectbox：下拉单选框

• multiselect：下拉多选框

• slider：滑动条

• select_slider：选择条

• text_input：文本输入框

• text_area：文本输入区域

• number_input：数字输入框，支持加减按钮

• date_input：日期选择框

• time_input：时间选择框

• color_picker：颜色选择器

下面分别演示一些较高频的控件

• 1, button

• 2, selectbox

• 3, number_input

• 4, slider

• 5, text_input

• 6, text_area

• 7, download_button

• 8, file_uploader

%%writefile demo.py
import streamlit as st 
import plotly.express as px 
import time
import pandas as pd 

st.title('streamlit控件范例')

st.header("1，button")

#button常用于启动一段费时代码的执行
if st.button("Start count sheep"):
    msg = st.empty() #st.empty可以作为占位符
    for i in range(1,11):
        msg.write("{} sheep...".format(i))
        time.sleep(0.3)
else:
    pass #st.stop

st.header("2，selectbox") 

stock = st.selectbox(label = "Choose a stock",options=["GOOG","AAPL","AMZN","FB"])

st.write('You selected:', stock)

fig = px.line(data_frame=px.data.stocks(),x="date",y=[stock]) 

st.plotly_chart(fig)

st.header("3，number_input") 

st.write("input x and y to eval x+y:")
x = st.number_input("x",min_value=-10000,max_value=10000)
y = st.number_input("y",min_value=0,max_value=8)
st.write('x+y=', x+y)


st.header("4，slider") 

st.write("slide to choose your age:")
age = st.slider(label="age",min_value=0,max_value=120)

st.write('your age is ', age)


st.header("5，text_input") 

st.write("what's your name")
name = st.text_input(label="name",max_chars=100)
st.write("your name is ",name)

st.header("6，text_area") 

st.write("give an introduction of  yourself")
name = st.text_area(label="introduction",max_chars=1024)


st.header("7，download_button") 

@st.cache
def save_csv():
    # IMPORTANT: Cache the conversion to prevent computation on every rerun
    df = px.data.stocks()
    return df.to_csv().encode('utf-8')

csv = save_csv()

st.download_button(
     label="Download stock data",
     data=csv,
     file_name='stocks.csv',
     mime='text/csv',
 )

st.header("8，file_uploader")  

csv_file = st.file_uploader("Choose a csv file")

if csv_file is not None:
    try:
        dfstocks = pd.read_csv(csv_file)
        st.table(dfstocks)
    except Exception as err:
        st.write(err)
        
image_file = st.file_uploader("choose a image file(jpg/png)")
if image_file is not None:
    try:
        st.image(image_file)
    except Exception as err:
        st.write(err)

!streamlit run demo.py --server.port=8085

五，布局范例

Streamlit 是自上而下渲染的，组件在页面上的排列顺序与代码的执行顺序一致。

可以应用如下布局组件实现非自上而下的布局。

• st.sidebar：侧边栏

• st.columns：列布局

• st.expander：隐藏

• st.empty：占位符，可以后续更新其中内容。

• st.container: 容器占位符，可以后续往其中添加内容。

%%writefile demo.py
import streamlit as st 
import time
import pandas as pd 

st.title('streamlit布局范例')

st.header("1，sidebar")
st.text("see the left side")
with st.sidebar:
    st.subheader("配置参数")
    optim = st.multiselect(label = "optimizer:",options = ["SGD","Adam","AdamW"])
    lr = st.slider(label="lr:",min_value=1e-5,max_value=0.1)
    early_stopping = st.checkbox(label = "early_stopping",value=True)
    batch_size = st.number_input(label = "batch_size",min_value=1,max_value=64)


st.header("2，columns")
col1, col2, col3 = st.columns(3)
col1.metric("accuracy", "0.82", "+32%")
col2.metric("AUC", "0.89", "-8%")
col3.metric("recall", "0.92", "+4%")

st.header("3，expander")
st.line_chart(data = [1,1,2,3,5,8,13,21,33,54])
with st.expander(label="see explanation"):
    st.text("This is the Fibonacci sequence")
    st.text("You can see more about it in below link")
    st.markdown("[](https://baike.baidu.com/item/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97/99145?fr=aladdin)")

st.header("4，empty")
#st.empty可以作为占位符
if st.button("Start count sheep"):
    msg = st.empty() #st.empty可以作为占位符
    for i in range(1,11):
        msg.write("{} sheep...".format(i))
        time.sleep(0.3)
else:
    pass #st.stop
    
    
st.header("5，container")

container = st.container()
container.write("1:This should in container")
st.write("2:This should out  container")
container.write("3:This should in container too")
container.bar_chart(data = [1,1,2,3,5,8,13,21,33,54])

!streamlit run demo.py --server.port=8085

六，状态范例

Streamlit支持如下状态范例。

• st.progress：进度条，如游戏加载进度

• st.spinner：等待提示

• st.info：显示常规信息

• st.warning：显示报警信息

• st.success：显示成功信息

• st.error：显示错误信息

• st.exception：显示异常信息

• st.balloons：页面底部飘气球，表示庆祝

• st.snow: 页面飘雪，表示庆祝

%%writefile demo.py
import streamlit as st 
import time


if st.button("Start count sheep"):
    with st.spinner('Wait for it...'):
        bar = st.progress(0)
        msg = st.empty() #st.empty可以作为占位符
        max_num = 20
        for i in range(1,max_num+1):
            msg.write("{} sheep...".format(i))
            time.sleep(0.3)
            bar.progress((i*100)//max_num)
    time.sleep(1)
    st.success("You count 20 sheep! congratulations")
    st.balloons()
    time.sleep(1)
    st.snow()
else:
    pass

!streamlit run demo.py --server.port=8085

七，综合范例

下面示范一个用streamlit实现一个FasterRCNN的网页交互APP范例。

%%writefile demo.py
import numpy as np
from PIL import Image,ImageColor,ImageDraw,ImageFont 
import torch
from torch import nn

import torchvision
from torchvision import datasets, models, transforms

import streamlit as st 

# 可视化函数
def plot_detection(image,prediction,idx2names,min_score = 0.8):
    image_result = image.copy()
    boxes,labels,scores = prediction['boxes'],prediction['labels'],prediction['scores']
    draw = ImageDraw.Draw(image_result) 
    for idx in range(boxes.shape[0]):
        if scores[idx] >= min_score:
            x1, y1, x2, y2 = boxes[idx][0], boxes[idx][1], boxes[idx][2], boxes[idx][3]
            name = idx2names.get(str(labels[idx].item()))
            score = scores[idx]
            draw.rectangle((x1,y1,x2,y2), fill=None, outline ='lawngreen',width = 2)
            draw.text((x1,y1),name+":\n"+str(round(score.item(),2)),fill="red")
    return image_result 


# 加载模型
@st.cache()
def load_model():
    num_classes = 91
    model = torchvision.models.detection.fasterrcnn_resnet50_fpn(pretrained=True,num_classes = num_classes)
    if torch.cuda.is_available():
        model.to("cuda:0")
    model.eval()
    model.idx2names = {'0': 'background', '1': 'person', '2': 'bicycle', '3': 'car', 
       '4': 'motorcycle', '5': 'airplane', '6': 'bus', '7': 'train', '8': 'truck', '9': 'boat', 
       '10': 'traffic light', '11': 'fire hydrant', '13': 'stop sign', 
       '14': 'parking meter', '15': 'bench', '16': 'bird', '17': 'cat',
       '18': 'dog', '19': 'horse', '20': 'sheep', '21': 'cow', '22': 'elephant', 
       '23': 'bear', '24': 'zebra', '25': 'giraffe', '27': 'backpack', 
       '28': 'umbrella', '31': 'handbag', '32': 'tie', '33': 'suitcase',
       '34': 'frisbee', '35': 'skis', '36': 'snowboard', '37': 'sports ball',
       '38': 'kite','39': 'baseball bat', '40': 'baseball glove', '41': 'skateboard',
       '42': 'surfboard', '43': 'tennis racket', '44': 'bottle', '46': 'wine glass', 
       '47': 'cup', '48': 'fork', '49': 'knife', '50': 'spoon', '51': 'bowl',
       '52': 'banana', '53': 'apple', '54': 'sandwich', '55': 'orange', 
       '56': 'broccoli', '57': 'carrot', '58': 'hot dog', '59': 'pizza',
       '60': 'donut', '61': 'cake', '62': 'chair', '63': 'couch', 
       '64': 'potted plant', '65': 'bed', '67': 'dining table',
       '70': 'toilet', '72': 'tv', '73': 'laptop', '74': 'mouse', 
       '75': 'remote', '76': 'keyboard', '77': 'cell phone', 
       '78': 'microwave', '79': 'oven', '80': 'toaster', 
       '81': 'sink', '82': 'refrigerator', '84': 'book',
       '85': 'clock', '86': 'vase', '87': 'scissors',
       '88': 'teddybear', '89': 'hair drier', '90': 'toothbrush'}
    return model 

def predict_detection(model,image_path,min_score=0.8):
    # 准备数据
    inputs = []
    img = Image.open(image_path).convert("RGB")
    img_tensor = torch.from_numpy(np.array(img)/255.).permute(2,0,1).float()
    if torch.cuda.is_available():
        img_tensor = img_tensor.cuda()
    inputs.append(img_tensor)    

    # 预测结果
    with torch.no_grad():
        predictions = model(inputs)

    # 结果可视化
    img_result = plot_detection(img,predictions[0],
        model.idx2names,min_score = min_score)
    return img_result
    
st.title("FasterRCNN功能演示")

st.header("FasterRCNN Input:")
image_file = st.file_uploader("upload a image file(jpg/png) to predict:")
if image_file is not None:
    try:
        st.image(image_file)
    except Exception as err:
        st.write(err)
else:
    image_file = "horseman.png"
    st.image(image_file)
    
min_score = st.slider(label="choose the min_score parameter:",min_value=0.1,max_value=0.98,value=0.8)

st.header("FasterRCNN Prediction:")
with st.spinner('waitting for prediction...'):
    model = load_model()
    img_result = predict_detection(model,image_file,min_score=min_score)
    st.image(img_result)

八，部署到HuggingFace

为了便于向合作伙伴展示我们的模型App,可以将stremlit的模型部署到 HuggingFace的 Space托管空间中，完全免费的哦。

方法如下：

1，注册huggingface账号：https://huggingface.co/join

2，在space空间中创建项目：https://huggingface.co/spaces

3，创建好的项目有一个Readme文档，根据说明操作即可。

以上。

公众号后台回复关键词：streamlit，获取本文源代码 和 HuggingFace部署的TextClassification和FasterRCNN演示项目地址。