209 lines
7.4 KiB
Markdown
209 lines
7.4 KiB
Markdown
# Streamlit v3 - Agent 对话流可视化版本
|
||
|
||
## 🎯 核心特性
|
||
|
||
这个全新版本**专门突出显示**:
|
||
1. ✅ **每个 Agent 当前在做什么** (任务标签实时显示)
|
||
2. ✅ **Agent 之间的对话流** (类似微信/QQ 聊天界面)
|
||
3. ✅ **当前发言的 Agent** (绿色高亮 + 脉冲动画)
|
||
4. ✅ **对话传递关系** (箭头指示下一个 Agent)
|
||
|
||
## 🚀 启动方法
|
||
|
||
```bash
|
||
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 任务流
|
||
1. `待命` → 初始状态
|
||
2. `启动流程` → 收到 Orchestrator 指令
|
||
3. `需求分析` → 分析用户需求
|
||
4. `生成 SRS` → 编写需求文档
|
||
5. `待命` → 完成任务
|
||
|
||
### QA Agent 任务流
|
||
1. `待命` → 初始状态
|
||
2. `测试设计` → 阅读 SRS
|
||
3. `编写测试` → 创建 test_*.py
|
||
4. `TDD 实践` → 确保测试先行
|
||
5. `待命` → 完成任务
|
||
|
||
### Dev Agent 任务流
|
||
1. `待命` → 初始状态
|
||
2. `代码实现` → 阅读 SRS 和测试
|
||
3. `编写代码` → 创建 src_*.py
|
||
4. `修复 bug` → 测试失败时
|
||
5. `待命` → 完成任务
|
||
|
||
## 🔍 对话流示例
|
||
|
||
完整的 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
|
||
1. 输入需求："我需要一个电池健康状态预测 API"
|
||
2. 点击"启动对话流"
|
||
3. 观察 5 个 Agent 的协作过程
|
||
4. 查看每个 Agent 的任务变化
|
||
5. 最终生成 3 个文件
|
||
|
||
### 场景 2: 车牌识别系统
|
||
1. 输入需求："开发一个车牌识别系统"
|
||
2. 启动对话流
|
||
3. 看 PM 如何分析需求
|
||
4. 看 QA 如何设计测试
|
||
5. 看 Dev 如何实现代码
|
||
|
||
## 📥 导出功能
|
||
|
||
点击侧边栏的"📥 导出对话"，可以保存完整的对话历史为 JSON 格式，包含：
|
||
- 每个 Agent 的发言内容
|
||
- 发言时间戳
|
||
- 当时的任务状态
|
||
- 对话顺序
|
||
|
||
## 🐛 注意事项
|
||
|
||
1. **确保安装依赖**: `pip install streamlit pyautogen dashscope`
|
||
2. **设置 API Key**: `$env:DASHSCOPE_API_KEY="your_key"`
|
||
3. **网络稳定**: 需要稳定的网络连接访问阿里云 API
|
||
4. **耐心等待**: 大模型生成需要时间，每轮约 10-30 秒
|
||
|
||
---
|
||
|
||
**🎉 享受全新的 Agent 对话流可视化体验！**
|