深度学习用streamlit做网页demo

CSDN话题挑战赛第2期
参赛话题：学习笔记

深度学习-图像生成领域许多工作都会做网页demo，技术与应用接轨，让用户体验模型能力。

之前试过用轻量级Web应用框架Flask将深度学习模型部署到微信小程序端：pytorch模型部署小程序_三思为上策的博客-CSDN博客_pytorch 小程序

如果要用Flask写网页demo也是可以的，但还要会写html，太麻烦啦，我就选择了streamlit——只需要懂python即可，各种网页功能性部件都被封装好了，可以查询API Reference - Streamlit Docs 搜索你想要用的API。

• streamlit安装：在命令行进入你运行模型需要的环境，安装streamlit及附属包即可。

conda activate xxx
pip install streamlit

测试安装是否成功：

streamlit hello

如果成功，则浏览器会自动弹出http://localhost:8501/，出现streamlit提供的示例。 

如果失败，优先考虑是附属安装的包出错了，根据报错的信息，把对应的包卸载重装即可。

我遇到了这个报错信息：TypeError:__init__() got an unexpected keyword argument 'show_envvar'，报错位置在 ' 安装路径.../anaconda3/envs/xxx/lib/python3.6/site-packages/click/core.py '，于是我重装了click包。

（不懂为啥，我把pip uninstall click命令敲了2遍才把click相关文件卸干净了）

pip uninstall click
pip install click

• streamlit使用

可以参考我的代码模板：新建一个demo.py文件写入以下内容

一些streamlit API解释可以参考我的前一篇笔记：（Paint2Pix用streamlit实现了交互性很强很好玩的绘画生成真实人脸，以及根据涂鸦编辑真实人脸的功能）Paint2Pix代码笔记_三思为上策的博客-CSDN博客

import streamlit as st

def main():
    prompt_container = st.empty()  #定义一个空容器
    if 'load_models' not in st.session_state:
        prompt_container.caption('Loading...')  
        #空容器装入caption部件，在它的位置上显示'Loading...'
        st.session_state.load_models = []

        # 在这里load模型，然后把模型传入寄存器
        st.session_state.load_models.append(模型1)
        st.session_state.load_models.append(模型2)

        prompt_container.empty()  #重新置为空容器，caption消失

    # 我用这个状态寄存器来防止模型调用过程中反复调用
    if 'editing' not in st.session_state:
        st.session_state.editing = False


    #  main app body
    #  介绍一下网页
    st.markdown(
        """
        YourAPP: Intro...
        """
    )

    # 上传图片
    image_container = st.empty()
    in_image = image_container.file_uploader("1.Input image:", type=["png", "jpg"])
    get_value = lambda x: x if x is None or isinstance(x, str) else x.getvalue()

    if 'input_img' not in st.session_state or get_value(st.session_state.input_img) != get_value(in_image):
        if 'input_img' in st.session_state and get_value(st.session_state.input_img) != get_value(in_image):
            print("update img...")
            for key in st.session_state.keys():
                # 只有加载好的模型存下来不被删除，其他寄存器内容被删
                if key != 'load_models':
                    del st.session_state[key]
            time.sleep(1)
        st.session_state.input_img = in_image

        if in_image is not None:
            # 保存用户上传的图片
            image = Image.open(in_image).convert('RGB')
            image.save("static/111111.jpg")

    st.markdown('2.click the button to start:')
    img_edit_button = st.button('Start')

    # 这里写按下按键后的操作
    if img_edit_button:
        if not st.session_state.editing:
            st.session_state.editing = True
            print("user choosing done!editing...")
            
            # 此处调用模型

            # 两列展示原图和编辑后的图
            col1, col2 = st.columns(2)
            with col1:
                st.subheader('your input:')
                ori_img = np.array(Image.open('static/111111.jpg'))
                st.image(ori_img)
            with col2:
                st.subheader('edited result:')
                return_img = np.array(Image.open('static/edit/222.jpg'))
                st.image(return_img)

            st.session_state.editing = False


if __name__ == "__main__":
    st.set_page_config(
        page_title="Your Demo", page_icon=":pencil2:"
    )
    st.title("--Your Demo--")
    main()

然后用命令行来跑代码：

conda activate xxx
CUDA_VISIBLE_DEVICES=1 streamlit run demo.py

即可在本机自动弹出窗口使用网页demo，也可以在同一局域网下别的电脑上访问http://你的主机IP:8501。

IP查询：windows用ipconfig命令，ubuntu用ifconfig。

• streamlit代码逻辑

用户每一次交互，网页都会更新，demo.py会被重新run，代码运行过程中定义、更新的变量都会被刷新，只有存入st.session_state的数据可以长期留存。

调用API定义的streamlit小部件，会按代码前后顺序来排列在网页上。

比如：

st.markdown('2.click the button to start:')
img_edit_button = st.button('Start')

网页上，文字信息2.click the button to start:会出现在Start按键上方一行。