1. Streamlit入门

1.1 Streamlit介绍

Streamlit是基于Python的Web应用程序框架，它可以使用Python代码轻松构建机器学习/数据科学相关的仪表板，其特点包括：

跨平台：支持Windows、macOS、Linux
只需要掌握Python：不需要前端的任何基础
开源：社区资源丰富，包括社区和开源地址

1.2 Streamlit快速开始

安装：pip install streamlit

运行demo：streamlit hello

运行结果如下：

在这里插入图片描述

通过demo可以看出Streamlit构建的整体风格，其将页面从左至右分为两部分，分别是：

导航栏：上图中的左边导航栏，用于显示多页面
内容栏：展示当前页面的内容，包含下拉框

且在右上角包括设置按钮。

1.3 Streamlit相关概念

Streamlit的整个运行流程可以参考链接中的Data flow，这里给出简单说明。

Streamlit的架构每当修改了源代码或用户与Streamlit的任意组件进行交互，都会产生一个on_change或on_click的回调(callback)，它会尝试执行剩下的代码（通常是整个代码文件）。

总的来说，这里将Streamlit粗略地分为：

输入：用户可以点击、选择、输入的部分；
输出：页面展示给用户的部分，如表格、序列、图表、文字、代码等；
其它：如布局、缓存、多页面等。

为了方便描述，后文使用st来替代streamlit

1.3.1 Streamlit输出

st.write()：所有变量都可以通过该方法输出；
st的magic特性：在代码中编写一个包含值的变量，会默认使用streamlit.write()方法输出；
st.dataframe()：用于输出dataframe，且可以传入额外的参数来自定义行为；
st.table()：将参数以表格形式输出；
st.line_chart()：将参数以折线图输出；
st.map()：将参数以地图的形式输出。

上述方法的第一个参数即为需要输出到页面中的具体参数，可以是list、dataframe、字符串等多种类型。

除了以上的输出，还有其他输出，如：

st.progress()：展示进度条，该方法通常只需要一个参数，表示当前进度
st.empty()：通过其text方法可以输出placeholder，即st.empty().text('xxx')

1.3.2 Streamlit输入

Streamlit的输入通常对应着Streamlit中的组件(widgets)，这里给出部分例子，详见官方的API文档：

st.slider()：显示在页面的滑动条
st.text_input()：输入文本框
st.checkbox()：复选框，返回True/False
st.selectbox()：下拉跨

上述方法的第一个参数通常是组件的描述，可以传入一个命名参数key，给其设置一个唯一值，然后通过st.session_state.{key}访问该值，其中的{key}是创建组件时设置的参数值。

1.3.3 其它

布局

页面的布局可以通过多种方式设置，一种常用的方式是将组件(用户输入)都放到导航栏处，这个时候只需要将前文的st改为st.sidebar即可，如st.sidebar.slider()表示在导航栏中创建一个滑动条。

还可以使用st.columns()将页面分为多列，再使用st.expander合并列的方式完成页面的布局。

主题：可以通过设置来修改；
缓存：通过@st.cache装饰器来为方法增加cache；
多页面：只需要在当前文件夹创建多个py文件，然后使用streamlit run命令运行主文件即可。

2. VCED本项目的前端页面设计

首先需要明确整个页面的原型设计，这里直接给出最终版本的页面如下：

在这里插入图片描述

可以发现页面内部一共由五个部分组成，除此之外，可以发现页面的title和icon也有修改，因此一共六个部分。

这里首先设计页面，然后再设计整个页面的逻辑。

2.1 前端页面设计

页面title和icon：st.set_page_config(page_title="VCED", page_icon="🔍")
页面标题：st.title('Welcome to VCED!')
页面上传文件处：uploaded_file = st.file_uploader("Choose a video")
描述输入文本框：可以发现这里包括标签、placeholder和帮助信息，因此都需要输入，即text_prompt = st.text_input("Description", placeholder="please input the description", help='The description of clips from the video')
TopN输入文本框：与描述输入文本框同理
搜索按钮：st.button("Search")

最终整个页面设计的代码如下（文件名为app.py）：

# 导入需要的包
import streamlit as st

# 设置标签栏
st.set_page_config(page_title="VCED", page_icon="🔍")
# 设置标题
st.title('Welcome to VCED!')

# 视频上传组件
uploaded_file = st.file_uploader("Choose a video")

# 文本输入框
text_prompt = st.text_input(
    "Description", placeholder="please input the description", help='The description of clips from the video')

# top k 输入框
topn_value = st.text_input(
    "Top N", placeholder="please input an integer", help='The number of results. By default, n equals 1')

# 搜索按钮
st.button("Search")