如果你是一个开发人员，或者一个计算机专业的老师或学生，有时候你需要验证或者展示某个技术或者应用场景。比如，我们想要验证一些某个大模型的对话交互能力，或者基于这个大模型开发一个Agent。此时我们可以通过调用大模型的API或者通过ollama这样的工具在命令行中和它交互。
但是，有的时候我们要跟直观的展示或者验证，这是就离不开搭建一个前端UI。

你能想到什么？Vue、React、Angular等等这些前端技术，然后搭建一个UI界面吗？当然可以，但是还是有点麻烦，且不说假设你是一个后端开发人员，掌握这个前端技术需要一点时间。即便是你本来就是一个全站工程师，啥都会，但是也许你只是临时验证或者演示一下你的技术，这个前端用完就会被抛弃掉。再辛辛苦苦搭建一个前端展示页面就显得有点得不偿失了。

那如果你懂python开发，有没有一种技术可以满足下面的要求：

  • 极低的开发门槛：几行Python代码就能创建一个包含各种组件的网页前端
  • 部署打包简单：一行命令就可以本地启动，也可以快速部署到主流的云服务器上托管
  • 支持热重载：修改代码后页面自动刷新，无需重启服务器
  • 内置丰富的UI组件：主流的滑块、按钮、表格、表单等等组件都支持
  • 强大的数据可视化展示支撑：完美支持pandas、matplotlib、seaborn、Plotly、scikit-learn等这些数据分析和展示功能。

答案是streamlit。今天通过一个简单的例子展示Streamlit提供的强大的原型开发能力，几行代码搭建出一个AI ChatBot。

安装依赖

可以通过pip conda等安装streamlit，但是我建议使用uv，如果你不熟悉uv，可以参考我之前写的这篇文章：强大的Python包和项目管理工具 uv快速入门 - 知乎。

现在假设我们创建好了uv项目，接下来执行下面的命令安装依赖

1
uv add streamlit

uv会分析依赖，然后安装streamlit。

ChatBot开发

需求描述

我们的需求很简单：以网页的形式显示一个聊天对话框，页面包含三个部分：

  1. 标题：ChatBot
  2. 消息显示区域：用于显示用户的提问和Bot的回答
  3. 聊天输入窗口：用于用户输入和发送提问

整个逻辑是：

  1. 用户输入聊天内容
  2. 聊天内容被后端的大模型（这里使用智谱AI）接收，然后返回问题
  3. 前端接收到返回的文本内容后，显示在消息区域。

代码实现

为了完成上面的需求，我们需要安装两个依赖：

  1. streamlit: 用于快是实现前端窗口布局
  2. zhipuai: 用于调用智谱AI的大模型能量。
    因此，我们首先在uv项目的依赖中添加如下：
1
2
3
4
dependencies = [
    "streamlit>=1.49.0",
     "zhipuai>=2.0.0", 
]

然后执行下面的uv安装命令来安装依赖

1
uv sync

接下来编写主程序main.py实现上述需求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# main.py
import streamlit as st
import zhipuai
from zhipuai import ZhipuAI

# 初始化智谱AI客户端（请将API_KEY替换为您自己的密钥）
client = ZhipuAI(api_key="YOUR_API_KEY")

def main():
    # 设置页面标题
    st.title("ChatBot")

    # 初始化会话状态以存储聊天历史
    if "messages" not in st.session_state:
        st.session_state.messages = []

    # 显示聊天历史
    for message in st.session_state.messages:
        with st.chat_message(message["role"]):
            st.markdown(message["content"])

    # 聊天输入框
    if prompt := st.chat_input("请输入您的问题..."):
        # 添加用户消息到会话状态
        st.session_state.messages.append({
            "role": "user", 
            "content": prompt
        })

        # 显示用户消息
        with st.chat_message("user"):
            st.markdown(prompt)

        # 调用智谱AI API并流式输出结果
        with st.chat_message("assistant"):
            # 创建一个占位符用于流式更新
            response_placeholder = st.empty()
            full_response = ""

            # 调用智谱AI的聊天接口，启用流式响应
            response = client.chat.completions.create(
                model="glm-4",  # 使用智谱AI的GLM-4模型
                messages=[{
                    "role": m["role"], 
                    "content": m["content"]
                } for m in st.session_state.messages],
                stream=True
            )

            # 处理流式响应
            for chunk in response:
                if chunk.choices[0].delta.content:
                    full_response += chunk.choices[0].delta.content
                    # 更新占位符内容
                    response_placeholder.markdown(full_response + "▌")

            # 最终更新显示完整响应
            response_placeholder.markdown(full_response)

        # 添加助手响应到会话状态
        st.session_state.messages.append({
            "role": "assistant", 
            "content": full_response
        })

if __name__ == "__main__":
    main()

代码说明：

  1. client = ZhipuAI(api_key=”YOUR_API_KEY”) 这里创建了智谱AI的对象，用于链接后端的大模型，这里记得输入你的API KEY
  2. st.session_state.messages ：是一个streamlit的消息显示组件，它支持流式输出
  3. st.chat_input：是一个消息输入组件
  4. st.markdown(prompt)： 将我们的输入内容转化为markdown形式，这样更有利于LLM理解

运行测试

执行下面的命令求可以启动streamlit服务，同时它会打开浏览器并定位到 http://localhost:8501 网址。
最终的显示效果如下：
image.png

可以看到，我们只需要几行Python代码就可以快速的实现一个聊天机器人。这对于技术验证和演示甚至是产品的快速原型设计都非常的高效。

详细的streamlit 使用参考可以查看其官网的文档：Tutorials - Streamlit Docs