SillyTavern_replica/COMFYUI_WORKFLOW_IMPLEMENTATION.md

🎨 ComfyUI 工作流管理功能 - 实现完成

✅ 已完成的功能

1. 后端实现

文件结构

backend/
├── data/
│   └── comfyui_workflows/
│       └── default_txt2img.json          # 默认文生图工作流
├── services/
│   └── comfyui_workflow_manager.py       # 工作流管理服务
└── api/routes/
    └── apiConfigRoute.py                  # 添加了4个新端点

API 端点

1. GET /api/api-config/comfyui/workflows

   • 获取所有可用的工作流列表
   • 返回: [{filename, name, nodes_count, size}, ...]

2. POST /api/api-config/comfyui/workflows/upload

   • 上传工作流 JSON 文件
   • 验证: JSON格式、包含KSampler节点
   • 自动备份已存在的文件

3. DELETE /api/api-config/comfyui/workflows/{filename}

   • 删除工作流文件
   • 保护: 不允许删除 default_txt2img.json

4. GET /api/api-config/comfyui/workflows/{filename}

   • 获取指定工作流的详细内容

核心功能

• ✅ 工作流文件管理（增删查）
• ✅ JSON 格式验证
• ✅ ComfyUI 工作流有效性检查
• ✅ 自动备份机制
• ✅ 路径安全保护（防止遍历攻击）
• ✅ 提示词替换功能（replace_prompt_in_workflow）

---

2. 前端实现

新增组件

frontend/src/components/SideBarLeft/tabs/ApiConfig/
├── ComfyUIWorkflowManager.jsx    # 工作流管理器组件
└── ApiConfig.css                  # 添加了工作流管理器样式

组件功能

ComfyUIWorkflowManager.jsx:

• ✅ 显示工作流列表（文件名、节点数、大小）
• ✅ 上传按钮（导入 JSON 文件）
• ✅ 删除按钮（每个工作流项）
• ✅ 刷新按钮
• ✅ 默认工作流标记
• ✅ 空状态提示
• ✅ 使用说明

UI 特性:

• 紧凑的卡片式布局
• 悬停效果
• 加载状态
• 错误提示
• 响应式设计

---

3. 数据结构更新

前端 formData.imageModel 新结构

imageModel: {
  mode: 'local',  // 'local' | 'cloud'
  
  local: {
    apiUrl: 'http://comfyui:8188',
    websocketEnabled: true,
    queueTimeout: 300,
    defaultWorkflow: 'default_txt2img.json'
  },
  
  cloud: {
    provider: 'dall-e',
    apiUrl: 'https://api.openai.com/v1/images/generations',
    apiKey: '',
    model: 'dall-e-3'
  }
}

---

📋 待完成的工作

1. 前端 UI 完善 ⚠️

当前 ApiConfig.jsx 中：

• ✅ 已导入 ComfyUIWorkflowManager 组件
• ✅ 已在适当位置插入组件
• ❌ 需要添加模式切换 UI（本地/云端 Radio 卡片）
• ❌ 需要添加本地配置表单（apiUrl、websocket、timeout）
• ❌ 需要添加云端配置表单（provider、apiKey、model）
• ❌ 需要修改 handleChange 支持嵌套结构

2. Store 更新 ⚠️

ApiConfigSlice.jsx 需要：

• ❌ 更新 saveProfile 以支持新的 imageModel 结构
• ❌ 添加 testComfyUIConnection 方法
• ❌ 添加 testCloudConnection 方法

3. 后端生图服务 ⚠️

需要创建：

• ❌ backend/services/image_generator.py - 统一的生图服务
  • generate_image(prompt, config) - 主函数
  • call_comfyui(prompt, local_config) - 调用 ComfyUI
  • call_cloud_api(prompt, cloud_config) - 调用云端 API
  • 工作流加载和提示词替换逻辑

4. 聊天集成 ⚠️

需要在聊天接口中：

• ❌ 检测用户想要生图的意图
• ❌ 提取提示词
• ❌ 读取 imageModel 配置
• ❌ 调用生图服务
• ❌ 返回图片 URL 或 base64

---

🎯 下一步建议

优先级 1: 完善前端 UI

1. 在 ApiConfig.jsx 中添加模式切换 Radio 卡片
2. 根据模式动态显示不同的配置表单
3. 修改 handleChange 支持嵌套路径
4. 测试上传/删除工作流功能

优先级 2: 创建生图服务

1. 创建 image_generator.py
2. 实现 ComfyUI 调用逻辑
3. 实现云端 API 调用逻辑
4. 添加错误处理和重试

优先级 3: 集成到聊天

1. 在聊天路由中添加生图端点
2. 实现意图识别（可选，或使用命令如 /imagine）
3. 测试完整流程

---

🔧 测试清单

后端测试

# 1. 测试列出工作流
curl http://localhost:8000/api/api-config/comfyui/workflows

# 2. 测试上传工作流
curl -X POST http://localhost:8000/api/api-config/comfyui/workflows/upload \
  -F "file=@my_workflow.json"

# 3. 测试删除工作流
curl -X DELETE http://localhost:8000/api/api-config/comfyui/workflows/my_workflow.json

# 4. 测试获取工作流详情
curl http://localhost:8000/api/api-config/comfyui/workflows/default_txt2img.json

前端测试

• 打开 API 配置页面
• 切换到"🎨 生图"标签
• 看到工作流管理器
• 点击"导入工作流"上传 JSON
• 看到上传的工作流出现在列表中
• 点击删除按钮删除工作流
• 确认默认工作流不可删除

---

📝 使用说明

用户上传工作流

1. 在 ComfyUI Web UI 中设计工作流
2. 点击菜单 → "Save (API Format)"
3. 保存为 .json 文件
4. 在本项目中点击"+ 导入工作流"
5. 选择导出的 JSON 文件
6. 上传成功后可在列表中看到

默认工作流

• 文件: backend/data/comfyui_workflows/default_txt2img.json
• 类型: 标准文生图
• 参数: 512x512, 20 steps, CFG 7, Euler sampler
• 不可删除

运行时提示词替换

后端会自动：

1. 加载选定的工作流 JSON
2. 找到第一个 CLIPTextEncode 节点
3. 将其 text 字段替换为用户输入的提示词
4. 发送到 ComfyUI

---

🎊 总结

已完成

• ✅ 后端工作流管理服务和 API
• ✅ 默认文生图工作流
• ✅ 前端工作流管理器组件
• ✅ 完整的 CRUD 功能
• ✅ 数据结构设计

待完成

• ⚠️ 前端模式切换 UI
• ⚠️ 生图服务实现
• ⚠️ 聊天集成

架构优势

• ✅ 前后端分离清晰
• ✅ 工作流由后端统一管理
• ✅ 前端只需配置连接信息
• ✅ 易于扩展新的工作流
• ✅ 安全性好（验证、备份、路径保护）

---

当前状态: 🟡 基础框架完成，等待 UI 完善和服务集成