7.4 KiB
7.4 KiB
Streamlit v3 - Agent 对话流可视化版本
🎯 核心特性
这个全新版本专门突出显示:
- ✅ 每个 Agent 当前在做什么 (任务标签实时显示)
- ✅ Agent 之间的对话流 (类似微信/QQ 聊天界面)
- ✅ 当前发言的 Agent (绿色高亮 + 脉冲动画)
- ✅ 对话传递关系 (箭头指示下一个 Agent)
🚀 启动方法
streamlit run frontend/streamlit_app_v3.py
🎨 界面说明
1. Agent 状态行 (顶部)
┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐
│ 📋 产品经理 │ ✅ 测试工程 │ 💻 开发工程 │ 🎯 协调器 │ 👤 用户代理 │
│ ⚪ 待命 │ ⚪ 待命 │ ⚪ 待命 │ ⚪ 待命 │ ⚪ 待命 │
│ 📝 需求分析 │ 📝 测试设计 │ 📝 代码实现 │ 📝 流程协调 │ 📝 提出需求 │
│ 💬 0 条消息 │ 💬 0 条消息 │ 💬 0 条消息 │ 💬 0 条消息 │ 💬 0 条消息 │
└─────────────┴─────────────┴─────────────┴─────────────┴─────────────┘
特点:
- 🔵 绿色边框 + 脉冲动画 = 当前正在发言的 Agent
- ⚪ 灰色 = 等待中的 Agent
- 📝 任务标签 = 实时显示该 Agent 在做什么
2. 当前发言横幅
🟢 当前发言:产品经理 - 需求分析
绿色横幅,明确告诉您现在哪个 Agent 在说话!
3. Agent 对话流 (核心区域)
┌─────────────────────────────────────────────────┐
│ 📋 产品经理 [需求分析] 11:09:30 │
│ │
│ 收到!开始分析需求... │
│ 功能性需求: │
│ 1. 接收电压/电流/温度数据 │
│ 2. 计算 SOH 百分比 │
│ 3. 异常检测 │
└─────────────────────────────────────────────────┘
⬇️
传递给 测试工程师
⬇️
┌─────────────────────────────────────────────────┐
│ ✅ 测试工程师 [测试设计] 11:09:45 │
│ │
│ 基于 SRS 设计测试用例... │
│ test_normal_operation() │
│ test_zero_voltage() │
└─────────────────────────────────────────────────┘
特点:
- 💬 彩色气泡 = 不同 Agent 有不同颜色
- 📝 任务徽章 = 每个消息都显示当前任务
- ⬇️ 传递箭头 = 显示工作流转向下一个 Agent
- 🕐 时间戳 = 精确到秒的发言时间
🎭 Agent 颜色方案
| Agent | 颜色 | 气泡样式 |
|---|---|---|
| 📋 PM Agent | 🔵 蓝色 | 蓝色渐变 |
| ✅ QA Agent | 🟢 绿色 | 绿色渐变 |
| 💻 Dev Agent | 🟠 橙色 | 橙色渐变 |
| 🎯 Orchestrator | 🟣 紫色 | 紫色渐变 |
| 👤 User Proxy | 🟤 棕色 | 棕色渐变 |
📊 实时任务标签
每个 Agent 的任务会动态更新:
PM Agent 任务流
待命→ 初始状态启动流程→ 收到 Orchestrator 指令需求分析→ 分析用户需求生成 SRS→ 编写需求文档待命→ 完成任务
QA Agent 任务流
待命→ 初始状态测试设计→ 阅读 SRS编写测试→ 创建 test_*.pyTDD 实践→ 确保测试先行待命→ 完成任务
Dev Agent 任务流
待命→ 初始状态代码实现→ 阅读 SRS 和测试编写代码→ 创建 src_*.py修复 bug→ 测试失败时待命→ 完成任务
🔍 对话流示例
完整的 SDLC 对话流会是这样:
👤 用户代理 [提出需求]
"我需要一个电池健康状态预测 API"
⬇️ 传递给 协调器
🎯 协调器 [启动流程]
"🚀 启动 SDLC 工作流!开始协作..."
⬇️ 传递给 产品经理
📋 产品经理 [需求分析]
"收到!分析需求中...
功能性需求:
1. 接收电压/电流/温度数据
2. 计算 SOH 百分比
3. 异常检测..."
⬇️ 传递给 测试工程师
✅ 测试工程师 [测试设计]
"基于 SRS 设计测试用例...
test_normal_operation()
test_zero_voltage()..."
⬇️ 传递给 开发工程师
💻 开发工程师 [代码实现]
"开始编写代码...
实现 calculate_soh() 函数...
符合 PEP8 规范..."
⬇️ 传递给 用户代理
👤 用户代理 [测试执行]
"执行测试...
✅ test_normal_operation PASSED
✅ test_zero_voltage PASSED..."
⬇️ 传递给 协调器
🎯 协调器 [总结完成]
"✅ SDLC 流程完成!
生成文件:SRS.md, test_battery_health.py..."
💡 使用技巧
1. 实时追踪特定 Agent
- 看顶部状态行 → 哪个 Agent 绿色高亮就是在发言
- 看任务标签 → 了解该 Agent 具体在做什么
- 看消息数量 → 知道哪个 Agent 最活跃
2. 理解对话流
- 看气泡颜色 → 快速识别是哪个 Agent
- 看传递箭头 → 理解工作流方向
- 看时间戳 → 了解执行顺序
3. 调试问题
- 如果某个 Agent 一直不说话 → 可能是模型配置问题
- 如果对话卡住 → 检查 API Key 和网络
- 如果任务标签不更新 → 刷新页面重试
🆚 与 v2 的区别
| 特性 | v2 | v3 (新版) |
|---|---|---|
| Agent 状态 | 静态卡片 | 动态高亮 + 任务标签 |
| 对话展示 | 普通列表 | 聊天气泡流 |
| 任务追踪 | ❌ 无 | ✅ 实时显示 |
| 传递关系 | ❌ 无 | ✅ 箭头指示 |
| 当前发言 | ⚪ 小圆点 | 🟢 绿色高亮 + 横幅 |
🎬 演示场景
场景 1: 电池健康预测 API
- 输入需求:"我需要一个电池健康状态预测 API"
- 点击"启动对话流"
- 观察 5 个 Agent 的协作过程
- 查看每个 Agent 的任务变化
- 最终生成 3 个文件
场景 2: 车牌识别系统
- 输入需求:"开发一个车牌识别系统"
- 启动对话流
- 看 PM 如何分析需求
- 看 QA 如何设计测试
- 看 Dev 如何实现代码
📥 导出功能
点击侧边栏的"📥 导出对话",可以保存完整的对话历史为 JSON 格式,包含:
- 每个 Agent 的发言内容
- 发言时间戳
- 当时的任务状态
- 对话顺序
🐛 注意事项
- 确保安装依赖:
pip install streamlit pyautogen dashscope - 设置 API Key:
$env:DASHSCOPE_API_KEY="your_key" - 网络稳定: 需要稳定的网络连接访问阿里云 API
- 耐心等待: 大模型生成需要时间,每轮约 10-30 秒
🎉 享受全新的 Agent 对话流可视化体验!