Files
autogen/STREAMLIT_V3_GUIDE.md
2026-03-12 13:27:03 +08:00

7.4 KiB
Raw Permalink Blame History

Streamlit v3 - Agent 对话流可视化版本

🎯 核心特性

这个全新版本专门突出显示:

  1. 每个 Agent 当前在做什么 (任务标签实时显示)
  2. Agent 之间的对话流 (类似微信/QQ 聊天界面)
  3. 当前发言的 Agent (绿色高亮 + 脉冲动画)
  4. 对话传递关系 (箭头指示下一个 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 任务流

  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 对话流可视化体验!