跨模态神经搜索实践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 Streaml