139 lines
4.0 KiB
Markdown
139 lines
4.0 KiB
Markdown
# 工作流模板创建器 - 节点关联功能实现总结
|
||
|
||
## 实现概述
|
||
|
||
根据promptx\tauri-desktop-app-expert规定的开发规范，我们在ComfyUI V2工作流模板创建器中成功实现了节点关联功能，允许用户将模板参数直接关联到工作流节点的输入字段。
|
||
|
||
## 核心功能
|
||
|
||
### 1. 工作流节点解析
|
||
- **自动解析**：当用户导入或粘贴工作流JSON时，系统自动解析所有节点信息
|
||
- **节点信息提取**：提取节点ID、class_type、_meta.title和inputs字段
|
||
- **实时更新**：工作流JSON变化时，节点列表实时更新
|
||
|
||
### 2. 参数节点关联
|
||
- **可视化选择**：提供直观的节点选择器界面
|
||
- **字段映射**：支持选择具体的输入字段进行关联
|
||
- **自动替换**：关联后自动将工作流中的字段值替换为`{{参数名}}`格式
|
||
|
||
### 3. 用户界面增强
|
||
- **节点选择器模态框**：展示所有可用节点和输入字段
|
||
- **关联状态显示**：清晰显示参数的关联状态
|
||
- **操作便捷性**：支持重新选择和清除关联
|
||
|
||
## 技术实现
|
||
|
||
### 数据结构扩展
|
||
```typescript
|
||
// 扩展参数schema，添加节点映射
|
||
interface ParameterSchema {
|
||
// ... 原有字段
|
||
node_mapping?: NodeMapping;
|
||
}
|
||
|
||
// 节点映射配置
|
||
interface NodeMapping {
|
||
node_id: string;
|
||
input_field: string;
|
||
}
|
||
|
||
// 工作流节点信息
|
||
interface WorkflowNode {
|
||
id: string;
|
||
class_type: string;
|
||
title?: string;
|
||
inputs: Record<string, any>;
|
||
}
|
||
```
|
||
|
||
### 核心功能函数
|
||
1. **节点解析**：`parseWorkflowNodes()` - 解析工作流JSON提取节点信息
|
||
2. **参数关联**：`updateParameterNodeMapping()` - 更新参数的节点映射
|
||
3. **自动替换**：`updateWorkflowNodeValue()` - 自动更新工作流中的字段值
|
||
|
||
### UI组件结构
|
||
- **主组件**：WorkflowTemplateCreator - 主要的模板创建器组件
|
||
- **节点选择器**：内嵌的模态框组件，用于选择节点和字段
|
||
- **关联状态显示**：在参数配置中显示关联信息
|
||
|
||
## 使用流程
|
||
|
||
### 1. 配置工作流
|
||
```json
|
||
{
|
||
"2": {
|
||
"class_type": "CLIPTextEncode",
|
||
"inputs": {
|
||
"text": "a beautiful portrait",
|
||
"clip": ["4", 1]
|
||
},
|
||
"_meta": {
|
||
"title": "2🐕遮罩边缘滑条快速模糊"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 创建参数
|
||
- 参数名：`prompt`
|
||
- 参数类型：`string`
|
||
- 默认值：`"a beautiful portrait"`
|
||
|
||
### 3. 关联节点
|
||
- 选择节点：`2`（2🐕遮罩边缘滑条快速模糊）
|
||
- 选择字段：`text`
|
||
- 系统自动替换为：`"{{prompt}}"`
|
||
|
||
### 4. 结果验证
|
||
```json
|
||
{
|
||
"2": {
|
||
"class_type": "CLIPTextEncode",
|
||
"inputs": {
|
||
"text": "{{prompt}}",
|
||
"clip": ["4", 1]
|
||
},
|
||
"_meta": {
|
||
"title": "2🐕遮罩边缘滑条快速模糊"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
apps/desktop/src/components/comfyui/
|
||
├── WorkflowTemplateCreator.tsx # 主组件（已扩展）
|
||
├── WorkflowTemplateCreatorDemo.tsx # 演示组件
|
||
├── README-WorkflowTemplateCreator.md # 功能说明文档
|
||
└── IMPLEMENTATION_SUMMARY.md # 实现总结（本文件）
|
||
|
||
apps/desktop/src/pages/
|
||
└── WorkflowTemplateCreatorTest.tsx # 测试页面
|
||
|
||
apps/desktop/src/examples/
|
||
└── sample-workflow.json # 示例工作流
|
||
```
|
||
|
||
## 测试访问
|
||
|
||
1. **开发环境访问**：`http://localhost:1420/workflow-template-creator-test`
|
||
2. **导航菜单**：ComfyUI > 模板创建器测试
|
||
3. **功能演示**：包含完整的使用说明和示例数据
|
||
|
||
## 符合规范
|
||
|
||
✅ **ComfyUI SDK使用**：使用cargos\comfyui-sdk进行工作流处理
|
||
✅ **页面规范**：ComfyUI V2页面设计规范
|
||
✅ **功能完整性**：工作流TAB中的模板参数配置功能
|
||
✅ **节点关联**：支持节点编号+_meta.title展示
|
||
✅ **参数替换**：inputs字段值替换为{{变量名}}格式
|
||
|
||
## 扩展建议
|
||
|
||
1. **批量关联**：支持一次性关联多个参数
|
||
2. **参数验证**：添加参数类型与节点字段类型的匹配验证
|
||
3. **模板预览**：提供参数替换后的工作流预览功能
|
||
4. **导入导出**：支持参数配置的导入导出功能
|