mirror of
https://github.com/OpenBMB/ChatDev.git
synced 2026-04-25 11:18:06 +00:00
100 lines
2.8 KiB
Markdown
Executable File
100 lines
2.8 KiB
Markdown
Executable File
# 前端 Web UI 快速入门指南
|
||
|
||
本指南帮助用户快速上手 DevAll Web UI，涵盖主要功能页面和操作流程。
|
||
|
||
## 1. 系统入口
|
||
|
||
启动前后端服务后，访问 `http://localhost:5173` 进入 Web UI。
|
||
|
||
## 2. 主要页面
|
||
|
||
### 2.1 首页 (Home)
|
||
|
||
系统首页，提供快速导航入口。
|
||
|
||
### 2.2 工作流列表 (Workflow List)
|
||
|
||
查看和管理所有可用的工作流 YAML 文件。
|
||
|
||
**功能**：
|
||
- 浏览 `yaml_instance/` 目录下的工作流
|
||
- 预览 YAML 配置内容
|
||
- 选择工作流进入执行或编辑
|
||
|
||
### 2.3 启动页 (Launch View)
|
||
|
||
工作流执行的主界面，是最常用的页面。
|
||
|
||
**操作流程**：
|
||
1. **选择工作流**：从左侧列表选择要执行的 YAML 文件
|
||
2. **上传附件**（可选）：点击上传按钮添加文件（如 CSV 数据、图片等）
|
||
3. **输入任务提示**：在文本框中输入指导工作流执行的提示词
|
||
4. **点击 Launch**：启动工作流执行
|
||
|
||
**执行期间**：
|
||
- **节点视图**：观察节点状态变化（pending → running → success/failed）
|
||
- **输出面板**：实时查看执行日志、节点输出上下文和生成的工件（三者共用同一面板）
|
||
|
||
**人工输入**：
|
||
- 当执行到 `human` 节点时，界面会显示输入提示
|
||
- 填写文本内容或上传附件后提交继续执行
|
||
|
||
### 2.4 工作流工作台 (Workflow Workbench)
|
||
|
||
可视化工作流编辑器。
|
||
|
||
**功能**：
|
||
- 拖拽式节点编辑
|
||
- 节点配置面板
|
||
- 边连接与条件设置
|
||
- 导出为 YAML 文件
|
||
|
||
### 2.5 教程页 (Tutorial)
|
||
|
||
内置教程，帮助新用户了解系统功能。
|
||
|
||
## 3. 常用操作
|
||
|
||
### 3.1 运行工作流
|
||
|
||
1. 进入 **Launch View**
|
||
2. 从左侧选择工作流
|
||
3. 输入 Task Prompt（任务提示）
|
||
4. 点击 **Launch** 按钮
|
||
5. 观察执行过程，等待完成
|
||
|
||
### 3.2 下载运行结果
|
||
|
||
执行完成后：
|
||
1. 点击右侧面板的 **Download** 按钮
|
||
2. 下载完整的 Session 压缩包（含 context.json、附件、日志等）
|
||
|
||
### 3.3 人工审阅节点交互
|
||
|
||
当工作流包含 `human` 节点时：
|
||
1. 执行暂停并显示提示信息
|
||
2. 阅读上下文内容
|
||
3. 输入审阅意见或操作指令
|
||
4. 点击提交继续执行
|
||
|
||
## 4. 快捷键
|
||
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| `Ctrl/Cmd + Enter` | 提交输入 |
|
||
| `Esc` | 关闭弹窗/面板 |
|
||
|
||
## 5. 故障排查
|
||
|
||
| 问题 | 解决方案 |
|
||
|------|----------|
|
||
| 页面无法加载 | 确认前端服务 `npm run dev` 正常运行 |
|
||
| 无法连接后端 | 确认后端服务 `uv run python server_main.py` 正常运行 |
|
||
| 工作流列表为空 | 检查 `yaml_instance/` 目录是否有 YAML 文件 |
|
||
| 执行无响应 | 检查浏览器开发者工具的 Network/Console 日志 |
|
||
| WebSocket 断开 | 刷新页面重新建立连接 |
|
||
|
||
## 6. 相关文档
|
||
|
||
- [工作流编排](workflow_authoring.md) - YAML 编写指南
|