写在之前

新开个系列，有段时间没在社区更新文章了， 经历都花在了知识星球里，大概从 2 个月前在星球里搞起了直播， 直播内容就是在线写代码， 写这个 AI 评测平台，目前已经把多模态（mllm）相关的内容都直播写完了， 下一次就是文档解析了。 下一次想把直播搞成公开的，应该会在 2 周后，到时候欢迎感兴趣的同学来听听。
过往的公开直播视频链接可以翻阅：
https://docs.qq.com/sheet/DS2tDQ1pEUFFmbFVK?tab=BB08J2

现在呢， 我把一些关键内容用文字记录下来， 也方便不喜欢看视频的同学翻阅。

streamlit 的入门 DEMO

streamlit 是一个纯的 python 库，专注于快速构建 web 可视化领域。 我对于它的评价就是 快 使用 streamlit 可以非常快速的在页面上开发可视化图标和相关的交互，并且它可以与 python 的 pandas 库紧密的集成在一起，比如我们可以用一行代码就把一个 dataframe 渲染成 web 上的表格。

import streamlit as st
import pandas as pd


def main():
    # 创建一个示例数据框
    data = {
        '列1': ['数据1', '数据2', '数据3'],
        '列2': ['数据A', '数据B', '数据3']
    }
    df = pd.DataFrame(data)


    # 显示数据框

    st.dataframe(df) # 这行代码就是把dataframe渲染出来

if __name__ == "__main__":
    main()

然后只需要运行：

streamlit run test.py

效果如下：

PS: 只需要使用 pip install streamlit 就可以使用 streamlit 命令了。

Streamlit 的优缺点

在数据领域 pandas 的大名还是很响亮的， 所以在做数据相关的测试人员当中，pandas 是必学技术之一。 而数据是 AI 领域的基石，所以在这个领域里的测试人员很多时候也是需要使用 pandas 的。 比如我在工作中就是高度依赖 pandas 来完善数据的管理和指标的计算。 所以 streamlit 非常适合在这样场景中完成快速的 web 可视化能力的工作。

streamlit 也是提供了不少与 pandas 集成的能力， 比如使用 streamli 提供的数据库连接方法， 那么它查询出来的数据会自动的被转换成 dataframe 格式以方便用户一键渲染到页面中。 比如：

import streamlit as st
from sqlalchemy import text


def get_db_connection():
    conn = st.connection(
        "mysql",
        type="sql",
        url="mysql://root:1qaz9ol.@9.134.12.32:3306/ai_tester?charset=utf8mb4",
        ttl=360,
        autocommit=True
    )
    return conn

class MLLMTask:
    def __init__(self, conn):
        self.conn = conn

    def get_tasks(self):
        sql = 'SELECT * FROM mllm ORDER BY id DESC'
        result = self.conn.query(sql, ttl=0)
        return result

上述的代码返回的结果直接就是一个 dataframe，也是一行代码就可以渲染到 web 页面中。 在 streamlit 中也有很多控件，比如 button， input，checkbox 等，比如下面定义一个 form：

def on_click():
    task_name = st.session_state['task_name']
    output_path = f'static/mllm/{task_name}.xlsx'
    task_id = db_mllm_task.add_task(task_name, status='running', output_path=output_path)
    process_mllm = Process(target=call_mllm_task, args=(task_id, output_path))
    process_mllm.start()

with st.popover("创建多模态测试任务"):
    with st.form(key='mllm_test_task'):
        st.text_input('任务名称', key='task_name')
        st.form_submit_button("提交", on_click=on_click)

通过上面的一段简单的代码就可以完成表单的提交工作了。 streamlit 还专门设计了一种数据交互方式，也就是通过缓存进行交互。 在 streamlit 中所有的控件都有一个 key 属性，就比如上面的 form，text_input, button 都有 key 属性，用户可以手动指定 key，如果不指定，控件显示的文字就是它的 key。 streamlit 会维护一个 dict 叫 session_state。 每个控件的值都会被保存在这个 dict 中， 用户可以根据 key 在需要的时候找到控件的值， 比如上述代码中就是用了

task_name = st.session_state['task_name']

上面这段代码取出了用户在输入框中输出的值。 这样我们就可以很简单的在代码中与控件和业务逻辑建立联系。 PS：session_state 是一个 dict， 所以我们自己也可以向里面塞入自己需要的数据，这样可以做到跨页面或者更复杂的逻辑控制和数据交换。

以上的一切都是 streamlit 便利的地方， 更多的内容我们后续在从 0 到 1 写 AI 平台的文章里展现出来。 接下来我们说说它的缺点吧， 它提供了很便利的数据可视化能力，但它与用户交互的能力就会相对弱一些。 比如 streamlit 里没有路由，所有页面展示和逻辑控制需要通过 session_state 来决定应该执行什么代码， 展示什么内容。 但这不利于过于复杂的业务逻辑，所以需要我们通过 streamlit 提供的较为原始的接口来实现路由的功能。 又比如 streamlit 的表格不支持在里面添加 button，或者跟表格的交互会有点繁琐。 当然这些都是可以用其他方法解决的， 但我想说的是如果我们要做的事情跟用户有很复杂的交互，那确实不太适合 streamlit。 还是交给专业的前端框架更好， 也就是经典的 3 大框架：react，vue 和 angular。 但使用这三种框架所需要的学习成本和开发成本都要高的多。

结尾

该回家了， 今天就先写这么多吧。 下一次更新 streamlit 更多的内容，也开始写一些 AI 评测平台的东西。 另外再宣传一下我的星球。