mirror of
https://github.com/OpenBMB/ChatDev.git
synced 2026-04-25 11:18:06 +00:00
100 lines
2.9 KiB
Markdown
Executable File
100 lines
2.9 KiB
Markdown
Executable File
# Frontend Web UI Quick Start Guide
|
|
|
|
This guide helps users quickly get started with the DevAll Web UI, covering main functional pages and operation workflows.
|
|
|
|
## 1. System Entry
|
|
|
|
After starting frontend and backend services, visit `http://localhost:5173` to access the Web UI.
|
|
|
|
## 2. Main Pages
|
|
|
|
### 2.1 Home
|
|
|
|
System homepage providing quick navigation links.
|
|
|
|
### 2.2 Workflow List
|
|
|
|
View and manage all available workflow YAML files.
|
|
|
|
**Features**:
|
|
- Browse workflows in `yaml_instance/` directory
|
|
- Preview YAML configuration content
|
|
- Select workflow to execute or edit
|
|
|
|
### 2.3 Launch View
|
|
|
|
The main interface for workflow execution, the most commonly used page.
|
|
|
|
**Operation Flow**:
|
|
1. **Select workflow**: Choose YAML file from the left panel
|
|
2. **Upload attachments** (optional): Click upload button to add files (CSV data, images, etc.)
|
|
3. **Enter task prompt**: Input instructions in the text box to guide workflow execution
|
|
4. **Click Launch**: Start workflow execution
|
|
|
|
**During Execution**:
|
|
- **Nodes View**: Observe node status changes (pending → running → success/failed)
|
|
- **Output Panel**: View real-time execution logs, node output context, and generated artifacts (all share the same panel)
|
|
|
|
**Human Input**:
|
|
- When execution reaches a `human` node, the interface displays an input prompt
|
|
- Fill in text content or upload attachments, then submit to continue execution
|
|
|
|
### 2.4 Workflow Workbench
|
|
|
|
Visual workflow editor.
|
|
|
|
**Features**:
|
|
- Drag-and-drop node editing
|
|
- Node configuration panel
|
|
- Edge connections and condition settings
|
|
- Export to YAML file
|
|
|
|
### 2.5 Tutorial
|
|
|
|
Built-in tutorial to help new users understand system features.
|
|
|
|
## 3. Common Operations
|
|
|
|
### 3.1 Running a Workflow
|
|
|
|
1. Go to **Launch View**
|
|
2. Select workflow from the left panel
|
|
3. Enter Task Prompt
|
|
4. Click **Launch** button
|
|
5. Monitor execution progress and wait for completion
|
|
|
|
### 3.2 Downloading Results
|
|
|
|
After execution completes:
|
|
1. Click the **Download** button on the right panel
|
|
2. Download the complete Session archive (includes context.json, attachments, logs, etc.)
|
|
|
|
### 3.3 Human Review Node Interaction
|
|
|
|
When workflow contains `human` nodes:
|
|
1. Execution pauses and displays prompt message
|
|
2. Read context content
|
|
3. Enter review comments or action instructions
|
|
4. Click submit to continue execution
|
|
|
|
## 4. Keyboard Shortcuts
|
|
|
|
| Shortcut | Function |
|
|
|----------|----------|
|
|
| `Ctrl/Cmd + Enter` | Submit input |
|
|
| `Esc` | Close popup/panel |
|
|
|
|
## 5. Troubleshooting
|
|
|
|
| Issue | Solution |
|
|
|-------|----------|
|
|
| Page won't load | Confirm frontend `npm run dev` is running |
|
|
| Cannot connect to backend | Confirm backend `uv run python server_main.py` is running |
|
|
| Empty workflow list | Check `yaml_instance/` directory for YAML files |
|
|
| Execution unresponsive | Check browser DevTools Network/Console logs |
|
|
| WebSocket disconnected | Refresh page to re-establish connection |
|
|
|
|
## 6. Related Documentation
|
|
|
|
- [Workflow Authoring](workflow_authoring.md) - YAML writing guide
|