From d7e1ce792f2979f89f1c117930f401da26274fdb Mon Sep 17 00:00:00 2001 From: root Date: Fri, 8 Aug 2025 22:25:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BAComfyUI=20V2=E5=B7=A5?= =?UTF-8?q?=E4=BD=9C=E6=B5=81=E6=A8=A1=E6=9D=BF=E5=8F=82=E6=95=B0=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=94=AF=E6=8C=81=E4=B8=93=E4=B8=9AAI?= =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=8F=82=E6=95=B0=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 根据ComfyUI SDK规范和AI工作流需求，大幅增强参数配置功能： 🎯 新增专业参数类型： - ✅ 图片 (Image) - 支持JPG/PNG/WebP等格式，文件大小限制，尺寸推荐 - ✅ 音频 (Audio) - 支持MP3/WAV/FLAC等格式，时长限制 - ✅ 视频 (Video) - 支持MP4/AVI/MOV等格式，尺寸和时长限制 - ✅ 整数 (Integer) - 默认步长1，范围0-100，默认值10 - ✅ 浮点数 (Float) - 默认步长0.01，范围0.0-1.0，默认值0.3 🛠 智能默认配置： - 根据参数类型自动应用合适的默认值和约束 - 整数类型：步长1，最小0，最大100，默认10 - 浮点数类型：步长0.01，最小0.00，最大1.0，默认0.3 - 媒体类型：预设文件格式、大小限制和质量要求 🎨 增强用户界面： - 分组显示参数类型（基础/数值/媒体） - 根据类型动态显示相应的配置选项 - 智能输入控件（数字步长、布尔选择器、文件格式提示） - 专业的媒体参数配置（格式、大小、尺寸、时长） 🔧 技术特性： - 扩展ParameterSchema接口支持媒体属性 - 类型切换时自动应用默认配置 - 完整的参数验证和约束设置 - 符合ComfyUI SDK的参数规范 这个增强使工作流模板能够处理复杂的AI工作流场景， 特别适合图像生成、音频处理、视频编辑等专业应用。 --- .../comfyui/WorkflowTemplateCreator.tsx | 274 ++++++++++++++++-- 1 file changed, 252 insertions(+), 22 deletions(-) diff --git a/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx b/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx index 15e7661..8e65e53 100644 --- a/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx +++ b/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx @@ -28,16 +28,23 @@ interface TemplateMetadata { } interface ParameterSchema { - param_type: 'string' | 'number' | 'boolean' | 'array' | 'object'; + param_type: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'image' | 'audio' | 'video' | 'integer' | 'float'; required?: boolean; default?: any; description?: string; enum?: any[]; min?: number; max?: number; + step?: number; pattern?: string; items?: ParameterSchema; properties?: Record; + // 媒体文件相关属性 + accept?: string; // 文件类型限制 + maxSize?: number; // 最大文件大小（字节） + width?: number; // 图片/视频宽度 + height?: number; // 图片/视频高度 + duration?: number; // 音频/视频时长限制 } interface WorkflowTemplateData { @@ -183,6 +190,61 @@ export const WorkflowTemplateCreator: React.FC = ( setNewParameterName(''); }; + // 根据参数类型获取默认配置 + const getDefaultConfigForType = (type: string): Partial => { + switch (type) { + case 'integer': + return { + default: 10, + min: 0, + max: 100, + step: 1, + }; + case 'float': + return { + default: 0.3, + min: 0.0, + max: 1.0, + step: 0.01, + }; + case 'image': + return { + default: '', + accept: '.jpg,.jpeg,.png,.webp,.bmp,.tiff', + maxSize: 10 * 1024 * 1024, // 10MB + description: '支持的图片格式：JPG, PNG, WebP, BMP, TIFF', + }; + case 'audio': + return { + default: '', + accept: '.mp3,.wav,.flac,.aac,.ogg', + maxSize: 50 * 1024 * 1024, // 50MB + description: '支持的音频格式：MP3, WAV, FLAC, AAC, OGG', + }; + case 'video': + return { + default: '', + accept: '.mp4,.avi,.mov,.mkv,.webm', + maxSize: 500 * 1024 * 1024, // 500MB + description: '支持的视频格式：MP4, AVI, MOV, MKV, WebM', + }; + case 'boolean': + return { + default: false, + }; + case 'number': + return { + default: 0, + min: 0, + max: 100, + }; + default: + return { + default: '', + }; + } + }; + // 验证表单 const validateForm = (): boolean => { const newErrors: Record = {}; @@ -567,17 +629,33 @@ export const WorkflowTemplateCreator: React.FC = ( @@ -585,16 +663,60 @@ export const WorkflowTemplateCreator: React.FC = ( - updateParameter(paramName, { - ...schema, - default: schema.param_type === 'number' ? Number(e.target.value) : e.target.value - })} - className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" - placeholder="设置默认值" - /> + {schema.param_type === 'boolean' ? ( + + ) : schema.param_type === 'integer' || schema.param_type === 'float' || schema.param_type === 'number' ? ( + updateParameter(paramName, { + ...schema, + default: schema.param_type === 'integer' ? parseInt(e.target.value) || 0 : parseFloat(e.target.value) || 0 + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="设置默认值" + /> + ) : schema.param_type === 'image' || schema.param_type === 'audio' || schema.param_type === 'video' ? ( +
+ updateParameter(paramName, { + ...schema, + default: e.target.value + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="默认文件名或路径" + /> +

+ 支持格式: {schema.accept || '所有格式'} +

+
+ ) : ( + updateParameter(paramName, { + ...schema, + default: e.target.value + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="设置默认值" + /> + )}
@@ -628,14 +750,15 @@ export const WorkflowTemplateCreator: React.FC = (
- {schema.param_type === 'number' && ( -
+ {(schema.param_type === 'number' || schema.param_type === 'integer' || schema.param_type === 'float') && ( +
updateParameter(paramName, { ...schema, @@ -651,6 +774,7 @@ export const WorkflowTemplateCreator: React.FC = ( updateParameter(paramName, { ...schema, @@ -660,6 +784,112 @@ export const WorkflowTemplateCreator: React.FC = ( placeholder="最大值" />
+
+ + updateParameter(paramName, { + ...schema, + step: e.target.value ? Number(e.target.value) : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder={schema.param_type === 'float' ? '0.01' : '1'} + /> +
+
+ )} + + {(schema.param_type === 'image' || schema.param_type === 'audio' || schema.param_type === 'video') && ( +
+
+
+ + updateParameter(paramName, { + ...schema, + accept: e.target.value + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder=".jpg,.png,.webp" + /> +
+
+ + updateParameter(paramName, { + ...schema, + maxSize: e.target.value ? Number(e.target.value) * 1024 * 1024 : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="10" + /> +
+
+ + {(schema.param_type === 'image' || schema.param_type === 'video') && ( +
+
+ + updateParameter(paramName, { + ...schema, + width: e.target.value ? Number(e.target.value) : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="1920" + /> +
+
+ + updateParameter(paramName, { + ...schema, + height: e.target.value ? Number(e.target.value) : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="1080" + /> +
+
+ )} + + {(schema.param_type === 'audio' || schema.param_type === 'video') && ( +
+ + updateParameter(paramName, { + ...schema, + duration: e.target.value ? Number(e.target.value) : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="300" + /> +
+ )}
)}