如何在 Streamlit 中实现重写内容按钮功能？
利用三个按钮模拟用户提问，提升交互体验
关键亮点
- 即时交互： 按钮点击即模拟用户输入，快速记录聊天记录。
- 简单易用： 通过 st.columns 和 st.button 轻松实现多按钮排列。
- 状态管理： 利用 st.session_state 保存聊天历史与按钮操作。
详细实现说明
在 Streamlit 中实现将重写内容（rewrite）作为三个独立按钮，附加在聊天记录的最后面，并且在点击时模拟用户提问的效果时，我们可以采取如下方法。本文综合多个实现方案，包括使用 st.columns、st.button 以及 st.session_state 的方式来完成这个功能。下面将详细介绍主要思路、代码示例及关键注意事项。
1. 主要思路
1.1 构建聊天记录区域
首先，在 Streamlit 应用中建立一个用于显示聊天记录的区域。这个区域可以通过 st.text_area（或 st.markdown）来实现，同时结合会话状态 (st.session_state) 来记录用户提问与 AI 回应。通过管理状态确保每次添加新问答都能即时更新页面。
1.2 定义重写内容
准备一个数组或列表，其中包含需要作为按钮显示的重写内容。例如：
- 重写内容1
- 重写内容2
- 重写内容3
每个重写内容将对应一个按钮。
1.3 布局按钮
使用 Streamlit 的 st.columns 方法可以将三个按钮并排显示在同一行。通过 with 语法，我们可以将每个按钮放置在对应的列中，如下所示：
col1, col2, col3 = st.columns(3)
with col1:
if st.button("重写内容1"):
# 响应逻辑
with col2:
if st.button("重写内容2"):
# 响应逻辑
with col3:
if st.button("重写内容3"):
# 响应逻辑当用户点击任一按钮时，就可以将按钮的文本视为用户输入的问题，并将其添加到聊天记录中以触发后续处理。
1.4 模拟用户提问
在按钮的点击事件中，将按钮的显示内容作为用户问题提交，并调用相关逻辑来获取 AI 的回应。这里推荐在按钮点击时，直接操作 st.session_state 来更新聊天记录。例如，当用户点击“重写内容1”按钮时，将该字符串附加到聊天记录列表中，并触发下一个阶段的处理函数（例如调用 AI 接口获得答案）。
示例代码实现
下面提供了一个完整、详细的代码示例，展示如何通过 Streamlit 实现上述功能：
import streamlit as st
# 初始化会话状态，确保聊天记录不会丢失
if 'messages' not in st.session_state:
st.session_state['messages'] = []
# 定义一个函数来展示聊天记录
def display_chat():
st.markdown("### 聊天记录")
for message in st.session_state['messages']:
# message 中的 role 为 "user" 或 "ai"
role = "<b>用户</b>" if message['role'] == "user" else "<b>AI</b>"
st.markdown(f"{role}: {message['content']}")
# 显示现有聊天记录
display_chat()
# 用户常规输入区域: 可选的聊天输入框
user_input = st.chat_input("请输入您的问题:")
if user_input:
st.session_state['messages'].append({"role": "user", "content": user_input})
# 在这里调用 AI 模型，假设返回结果为 response_text
response_text = "这里是 AI 回应：" + user_input
st.session_state['messages'].append({"role": "ai", "content": response_text})
display_chat()
# 定义重写内容列表
rewrite_options = ["重写内容1", "重写内容2", "重写内容3"]
# 在聊天记录最后添加重写内容按钮
st.markdown("---")
st.markdown("### 快速提问选项:")
# 使用 st.columns 布局三个按钮
col1, col2, col3 = st.columns(3)
with col1:
if st.button(rewrite_options[0]):
# 将按钮文本作为问句加入聊天记录
st.session_state['messages'].append({"role": "user", "content": rewrite_options[0]})
# 模拟调用 AI 接口获取回复
response_text = "这里是 AI 回应：" + rewrite_options[0]
st.session_state['messages'].append({"role": "ai", "content": response_text})
display_chat()
with col2:
if st.button(rewrite_options[1]):
st.session_state['messages'].append({"role": "user", "content": rewrite_options[1]})
response_text = "这里是 AI 回应：" + rewrite_options[1]
st.session_state['messages'].append({"role": "ai", "content": response_text})
display_chat()
with col3:
if st.button(rewrite_options[2]):
st.session_state['messages'].append({"role": "user", "content": rewrite_options[2]})
response_text = "这里是 AI 回应：" + rewrite_options[2]
st.session_state['messages'].append({"role": "ai", "content": response_text})
display_chat()以上代码展示了如何利用 st.columns 布局三个按钮，并在按钮点击时即时更新聊天记录，实现模拟用户提问的交互效果。请根据实际的 AI 响应逻辑替换 “这里是 AI 回应：...” 的部分。
数据可视化：交互效果雷达图
下方提供的雷达图展示了该交互系统各个方面的用户体验得分（这里的得分为基于个人综合看法的主观评定，便于理解各组件的表现）。
综合功能说明表
下面的表格对本功能模块的主要组件和作用进行了详细说明：
| 组成部分 | 功能描述 | 实现方法 |
|---|---|---|
| 聊天记录区域 | 显示用户提问和 AI 回应，保存会话历史 | 利用 st.session_state 与 st.chat_input 或 st.text_area |
| 重写按钮 | 作为预设问题的快速提问入口 | 使用 st.columns 与 st.button 布局 |
| 按钮点击事件 | 模拟用户输入行为并触发 AI 回应 | 更新 st.session_state 中的聊天记录 |
| 状态管理 | 确保每次用户操作后会话记录保存正确 | 利用 st.session_state 保存和更新聊天记录 |
嵌入视频讲解
以下视频展示了如何迅速构建一个酷炫的 Streamlit 聊天机器人界面，其中包含了重写内容按钮的实现。视频结尾部分展示了实际效果：
常见问题解答 (FAQ)
如何初始化聊天记录状态？
重写按钮如何触发提问？
如何实现多列按钮布局？
如何更新聊天记录展示？
参考资料
- st.columns – Streamlit Documentation
- Streamlit 的 with 语法详解 – Discuss Streamlit
- Streamlit 入门教程 – DataCamp
- 构建交互数据应用 – Dev.to
- Streamlit 初学者指南 – GeeksforGeeks
相关建议
Last updated April 2, 2025
Ask Ithy AI
Download Article
Delete Article