跨模态神经搜索实践VCED 基于Streamlit实现前端页面设计和逻辑

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")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用streamlit run app.py可以发现页面效果与设计一致。

2.2 前端页面交互逻辑

整个页面的处理逻辑非常简单，这里可以直接查看代码即可，这里给出整体的逻辑如下：

• 判断是否点击搜索按钮
• 判断是否上传文件
• 判断是否输入描述文本
• 判断是否输入topn，没有输入，则默认topn为1
• 使用CLIP进行搜索，以列表返回结果，对应search_clip()方法
• 对结果中的开始位置和结束位置使用ffmpeg裁剪视频，对应cutVideo()方法

以上就是整个逻辑，可以发现非常简单，查询结果之后，最后通过st.video()将结果展示出来，其输入是视频文件的路径。

References

1. VCED 前端介绍
2. Streamlit官方文档