diff --git a/WebUI/electron/main.ts b/WebUI/electron/main.ts index 5f4b6e4a..969ab307 100644 --- a/WebUI/electron/main.ts +++ b/WebUI/electron/main.ts @@ -206,6 +206,8 @@ async function createWindow() { // Make all links open with the browser, not with the application win.webContents.setWindowOpenHandler(({ url }) => { if (url.startsWith('https:')) shell.openExternal(url) + if (url.startsWith('http://localhost')) shell.openExternal(url) + if (url.startsWith('http://127.0.0.1')) shell.openExternal(url) return { action: 'deny' } }) return win diff --git a/WebUI/external/workflows/AcerVisionArt_fluxQ4.json b/WebUI/external/workflows/AcerVisionArt_fluxQ4.json index 09917e9b..9dfb7ee2 100644 --- a/WebUI/external/workflows/AcerVisionArt_fluxQ4.json +++ b/WebUI/external/workflows/AcerVisionArt_fluxQ4.json @@ -3,6 +3,7 @@ "displayPriority": 500, "tags": ["Q4", "Fast"], "backend": "comfyui", + "category": "create-images", "comfyUIRequirements": { "customNodes": [ "city96/ComfyUI-GGUF@b3ec875a68d94b758914fd48d30571d953bb7a54", diff --git a/WebUI/external/workflows/Colorize.json b/WebUI/external/workflows/Colorize.json index fa85125a..091bf256 100644 --- a/WebUI/external/workflows/Colorize.json +++ b/WebUI/external/workflows/Colorize.json @@ -1,6 +1,7 @@ { "name": "Colorize", "backend": "comfyui", + "category": "edit-images", "comfyUIRequirements": { "customNodes": ["kijai/ComfyUI-DDColor@30d5b8e7666382a6a78404caee28dfa87f741037"], "requiredModels": [] diff --git a/WebUI/external/workflows/CopyFace.json b/WebUI/external/workflows/CopyFace.json index 0e9e3cb5..215fbc5a 100644 --- a/WebUI/external/workflows/CopyFace.json +++ b/WebUI/external/workflows/CopyFace.json @@ -1,6 +1,7 @@ { "name": "CopyFace", "backend": "comfyui", + "category": "edit-images", "comfyUIRequirements": { "pythonPackages": [ "https://github.com/Gourieff/Assets/raw/main/Insightface/insightface-0.7.3-cp312-cp312-win_amd64.whl", diff --git a/WebUI/external/workflows/FaceSwapHD.json b/WebUI/external/workflows/FaceSwapHD.json index f3fcb633..60ec3d82 100644 --- a/WebUI/external/workflows/FaceSwapHD.json +++ b/WebUI/external/workflows/FaceSwapHD.json @@ -1,6 +1,7 @@ { "name": "FaceSwap-HD", "backend": "comfyui", + "category": "create-images", "comfyUIRequirements": { "pythonPackages": [ "https://github.com/Gourieff/Assets/raw/main/Insightface/insightface-0.7.3-cp312-cp312-win_amd64.whl", diff --git a/WebUI/external/workflows/FluxKontextAIPGmerge-preview2.json b/WebUI/external/workflows/FluxKontextAIPGmerge-preview2.json index 9697fd18..a229b6f1 100644 --- a/WebUI/external/workflows/FluxKontextAIPGmerge-preview2.json +++ b/WebUI/external/workflows/FluxKontextAIPGmerge-preview2.json @@ -1,7 +1,8 @@ { - "name": "Flux-Kontext", + "name": "Edit By Prompt", "displayPriority": 200, "backend": "comfyui", + "category": "edit-images", "comfyUIRequirements": { "customNodes": [ "BadCafeCode/execution-inversion-demo-comfyui@d9eebfaa1a6a33067e8c9108ef093b48279c4cbb" @@ -25,7 +26,7 @@ } ] }, - "tags": ["preview"], + "tags": ["Flux.1-Kontext"], "requirements": ["high-vram"], "inputs": [ { @@ -69,7 +70,7 @@ "batchSize": 1 }, "displayedSettings": [], - "modifiableSettings": ["seed", "resolution"], + "modifiableSettings": ["seed", "inferenceSteps", "resolution"], "comfyUiApiWorkflow": { "6": { "inputs": { diff --git a/WebUI/external/workflows/LTX-Video_9.5_Start-End.json b/WebUI/external/workflows/LTX-Video_9.5_Start-End.json index 42a84ab6..e7f87c49 100644 --- a/WebUI/external/workflows/LTX-Video_9.5_Start-End.json +++ b/WebUI/external/workflows/LTX-Video_9.5_Start-End.json @@ -2,6 +2,7 @@ "name": "Video-Start2End", "tags": ["LTX Video", "high-vram"], "backend": "comfyui", + "category": "create-videos", "comfyUIRequirements": { "customNodes": [ "city96/ComfyUI-GGUF@b3ec875a68d94b758914fd48d30571d953bb7a54", diff --git a/WebUI/external/workflows/LTX-Video_9.5_T2V-v2.json b/WebUI/external/workflows/LTX-Video_9.5_T2V-v2.json index 3c7bdde2..749de02a 100644 --- a/WebUI/external/workflows/LTX-Video_9.5_T2V-v2.json +++ b/WebUI/external/workflows/LTX-Video_9.5_T2V-v2.json @@ -2,6 +2,7 @@ "name": "Video-Txt2Vid", "tags": ["LTX Video", "high-vram"], "backend": "comfyui", + "category": "create-videos", "comfyUIRequirements": { "customNodes": [ "city96/ComfyUI-GGUF@b3ec875a68d94b758914fd48d30571d953bb7a54", diff --git a/WebUI/external/workflows/LTX-Video_9.6_I2V.json b/WebUI/external/workflows/LTX-Video_9.6_I2V.json index 4f654a5f..b20cb04d 100644 --- a/WebUI/external/workflows/LTX-Video_9.6_I2V.json +++ b/WebUI/external/workflows/LTX-Video_9.6_I2V.json @@ -1,5 +1,6 @@ { "name": "Video-Img2Vid", + "category": "create-videos", "tags": ["LTX Video", "high-vram"], "backend": "comfyui", "comfyUIRequirements": { diff --git a/WebUI/external/workflows/Line2ImageHD-Fast.json b/WebUI/external/workflows/Line2ImageHD-Fast.json index 8ed95ebb..63ed3b99 100644 --- a/WebUI/external/workflows/Line2ImageHD-Fast.json +++ b/WebUI/external/workflows/Line2ImageHD-Fast.json @@ -1,7 +1,8 @@ { - "name": "Line2Image-HD-Fast", + "name": "SketchToPhoto-HD-Draft", "displayPriority": 200, "backend": "comfyui", + "category": "edit-images", "comfyUIRequirements": { "customNodes": [], "requiredModels": [ @@ -31,7 +32,7 @@ } ] }, - "tags": ["SDXL", "Fast-LCM"], + "tags": ["SDXL", "4-steps"], "requirements": ["high-vram"], "inputs": [ { diff --git a/WebUI/external/workflows/Line2ImageHD-Quality.json b/WebUI/external/workflows/Line2ImageHD-Quality.json index 5e5130fb..c10e96a2 100644 --- a/WebUI/external/workflows/Line2ImageHD-Quality.json +++ b/WebUI/external/workflows/Line2ImageHD-Quality.json @@ -1,7 +1,8 @@ { - "name": "Line2Image-HD-Quality", + "name": "SketchToPhoto-HD-Quality", "displayPriority": 150, "backend": "comfyui", + "category": "edit-images", "comfyUIRequirements": { "customNodes": [], "requiredModels": [ diff --git a/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-20steps-preview.json b/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-20steps-preview.json index dcdb92af..50cb43bc 100644 --- a/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-20steps-preview.json +++ b/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-20steps-preview.json @@ -1,5 +1,6 @@ { "name": "Wan2.1-VACE_Img2Video-20Steps", + "category": "create-videos", "displayPriority": 200, "backend": "comfyui", "comfyUIRequirements": { @@ -23,7 +24,7 @@ } ] }, - "tags": ["preview"], + "tags": ["dGPU", "high vRAM"], "requirements": ["high-vram"], "inputs": [ { diff --git a/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-4steps-preview.json b/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-4steps-preview.json index a2982b74..fc5e0420 100644 --- a/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-4steps-preview.json +++ b/WebUI/external/workflows/Wan2.1-Vace-Img2Vid-4steps-preview.json @@ -1,5 +1,6 @@ { "name": "Wan2.1-VACE_Img2Video-4Steps", + "category": "create-videos", "displayPriority": 200, "backend": "comfyui", "comfyUIRequirements": { @@ -27,7 +28,7 @@ } ] }, - "tags": ["preview"], + "tags": ["dGPU", "high vRAM"], "requirements": ["high-vram"], "inputs": [ { diff --git a/WebUI/external/workflows/Wan2.1-Vace-Vid2Vid.json b/WebUI/external/workflows/Wan2.1-Vace-Vid2Vid.json index f44917e6..b828e339 100644 --- a/WebUI/external/workflows/Wan2.1-Vace-Vid2Vid.json +++ b/WebUI/external/workflows/Wan2.1-Vace-Vid2Vid.json @@ -1,5 +1,6 @@ { "name": "Wan2.1-VACE_Video2Video", + "category": "create-videos", "displayPriority": 200, "backend": "comfyui", "comfyUIRequirements": { @@ -23,7 +24,7 @@ } ] }, - "tags": ["preview"], + "tags": ["dGPU", "high vRAM"], "requirements": ["high-vram"], "inputs": [ { diff --git a/WebUI/external/workflows/fluxQ4.json b/WebUI/external/workflows/fluxQ4.json index 7dea2c95..a09d7471 100644 --- a/WebUI/external/workflows/fluxQ4.json +++ b/WebUI/external/workflows/fluxQ4.json @@ -1,8 +1,9 @@ { "name": "Flux.1-Schnell Med Quality", "displayPriority": 500, - "tags": ["Q4", "Fast"], + "tags": ["Q4"], "backend": "comfyui", + "category": "create-images", "comfyUIRequirements": { "customNodes": ["city96/ComfyUI-GGUF@b3ec875a68d94b758914fd48d30571d953bb7a54"], "requiredModels": [ diff --git a/WebUI/external/workflows/fluxQ8.json b/WebUI/external/workflows/fluxQ8.json index fc62626a..d236adbb 100644 --- a/WebUI/external/workflows/fluxQ8.json +++ b/WebUI/external/workflows/fluxQ8.json @@ -2,6 +2,7 @@ "name": "Flux.1-Schnell High Quality", "displayPriority": 450, "backend": "comfyui", + "category": "create-images", "comfyUIRequirements": { "customNodes": ["city96/ComfyUI-GGUF@b3ec875a68d94b758914fd48d30571d953bb7a54"], "requiredModels": [ @@ -23,7 +24,7 @@ } ] }, - "tags": ["Q8", "Fast"], + "tags": ["Q8"], "requirements": ["high-vram"], "inputs": [], "outputs": [ diff --git a/WebUI/package-lock.json b/WebUI/package-lock.json index 165cd70a..fcc280e0 100644 --- a/WebUI/package-lock.json +++ b/WebUI/package-lock.json @@ -17,7 +17,7 @@ "@radix-icons/vue": "^1.0.0", "@tailwindcss/vite": "^4.1.11", "@vee-validate/zod": "^4.15.1", - "@vueuse/core": "^13.5.0", + "@vueuse/core": "^13.6.0", "ai": "^4.3.19", "autoprefixer": "^10.4.21", "class-variance-authority": "^0.7.1", @@ -39,10 +39,9 @@ "pinia": "^3.0.3", "pinia-plugin-persistedstate": "^4.4.1", "radix-vue": "^1.9.17", - "reka-ui": "^2.3.2", + "reka-ui": "^2.4.1", "sudo-prompt": "^9.2.1", "tailwind-merge": "^3.3.1", - "tailwindcss-animate": "^1.0.7", "unplugin-auto-import": "^19.3.0", "uuid": "^11.1.0", "vee-validate": "^4.15.1", @@ -68,6 +67,7 @@ "eslint-plugin-vue": "^10.3.0", "prettier": "^3.6.2", "tailwindcss": "^4.1.11", + "tw-animate-css": "^1.3.6", "typescript": "^5.8.3", "vite": "^7.0.5", "vite-plugin-electron": "^0.29.0", @@ -4466,14 +4466,14 @@ "license": "MIT" }, "node_modules/@vueuse/core": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.5.0.tgz", - "integrity": "sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==", + "version": "13.6.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz", + "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==", "license": "MIT", "dependencies": { "@types/web-bluetooth": "^0.0.21", - "@vueuse/metadata": "13.5.0", - "@vueuse/shared": "13.5.0" + "@vueuse/metadata": "13.6.0", + "@vueuse/shared": "13.6.0" }, "funding": { "url": "https://github.com/sponsors/antfu" @@ -4483,18 +4483,18 @@ } }, "node_modules/@vueuse/metadata": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.5.0.tgz", - "integrity": "sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==", + "version": "13.6.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.6.0.tgz", + "integrity": "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==", "license": "MIT", "funding": { "url": "https://github.com/sponsors/antfu" } }, "node_modules/@vueuse/shared": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.5.0.tgz", - "integrity": "sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==", + "version": "13.6.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.6.0.tgz", + "integrity": "sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==", "license": "MIT", "funding": { "url": "https://github.com/sponsors/antfu" @@ -11608,9 +11608,9 @@ } }, "node_modules/reka-ui": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.4.0.tgz", - "integrity": "sha512-5WHLEquWI5W67NnjH9F+RhpzRAcwjAEQHtHZMa5wYdhClcYDr59q0RAAcymcnfndFqv0MiBxyFfzbGSRyIZG5g==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.4.1.tgz", + "integrity": "sha512-NB7DrCsODN8MH02BWtgiExygfFcuuZ5/PTn6fMgjppmFHqePvNhmSn1LEuF35nel6PFbA4v+gdj0IoGN1yZ+vw==", "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.6.13", @@ -12752,15 +12752,6 @@ "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==", "license": "MIT" }, - "node_modules/tailwindcss-animate": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", - "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", - "license": "MIT", - "peerDependencies": { - "tailwindcss": ">=3.0.0 || insiders" - } - }, "node_modules/tapable": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz", @@ -13176,6 +13167,16 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "node_modules/tw-animate-css": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.6.tgz", + "integrity": "sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/WebUI/package.json b/WebUI/package.json index d64e22fd..7e327f8a 100644 --- a/WebUI/package.json +++ b/WebUI/package.json @@ -29,7 +29,7 @@ "@radix-icons/vue": "^1.0.0", "@tailwindcss/vite": "^4.1.11", "@vee-validate/zod": "^4.15.1", - "@vueuse/core": "^13.5.0", + "@vueuse/core": "^13.6.0", "ai": "^4.3.19", "autoprefixer": "^10.4.21", "class-variance-authority": "^0.7.1", @@ -51,10 +51,9 @@ "pinia": "^3.0.3", "pinia-plugin-persistedstate": "^4.4.1", "radix-vue": "^1.9.17", - "reka-ui": "^2.3.2", + "reka-ui": "^2.4.1", "sudo-prompt": "^9.2.1", "tailwind-merge": "^3.3.1", - "tailwindcss-animate": "^1.0.7", "unplugin-auto-import": "^19.3.0", "uuid": "^11.1.0", "vee-validate": "^4.15.1", @@ -80,6 +79,7 @@ "eslint-plugin-vue": "^10.3.0", "prettier": "^3.6.2", "tailwindcss": "^4.1.11", + "tw-animate-css": "^1.3.6", "typescript": "^5.8.3", "vite": "^7.0.5", "vite-plugin-electron": "^0.29.0", diff --git a/WebUI/src/assets/css/index.css b/WebUI/src/assets/css/index.css index 64f160dc..97e815d0 100644 --- a/WebUI/src/assets/css/index.css +++ b/WebUI/src/assets/css/index.css @@ -6,6 +6,9 @@ @import './pc.css'; @import './compontents.css'; @import './svg.css'; +@import 'tw-animate-css'; + +@custom-variant dark (&:is(.dark *)); @layer base { :root { @@ -65,3 +68,24 @@ @apply break-words whitespace-pre-wrap; } } + +@theme inline { + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--reka-accordion-content-height); + } + } + @keyframes accordion-up { + from { + height: var(--reka-accordion-content-height); + } + to { + height: 0; + } + } +} diff --git a/WebUI/src/assets/css/main.css b/WebUI/src/assets/css/main.css index 996b0a5a..0570ed28 100644 --- a/WebUI/src/assets/css/main.css +++ b/WebUI/src/assets/css/main.css @@ -88,6 +88,7 @@ textarea { margin-top: -1px; background-color: var(--color-panel-focus); overflow: hidden; + height: 0; } .main-content-area { diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts index 73ae4a5b..d49a0e0c 100644 --- a/WebUI/src/assets/js/store/imageGeneration.ts +++ b/WebUI/src/assets/js/store/imageGeneration.ts @@ -195,6 +195,7 @@ export type ComfyDynamicInput = z.infer const ComfyUiWorkflowSchema = z.object({ name: z.string(), + category: z.enum(['create-images', 'edit-images', 'create-videos']).optional(), displayPriority: z.number().default(0), backend: z.literal('comfyui'), comfyUIRequirements: z.object({ diff --git a/WebUI/src/components/DropDownWorkflow.vue b/WebUI/src/components/DropDownWorkflow.vue new file mode 100644 index 00000000..e5100e4b --- /dev/null +++ b/WebUI/src/components/DropDownWorkflow.vue @@ -0,0 +1,125 @@ + + + diff --git a/WebUI/src/components/SettingsImageWorkflowSelector.vue b/WebUI/src/components/SettingsImageWorkflowSelector.vue index 5955afaa..9d66710e 100644 --- a/WebUI/src/components/SettingsImageWorkflowSelector.vue +++ b/WebUI/src/components/SettingsImageWorkflowSelector.vue @@ -44,7 +44,20 @@ >
-

{{ languages.SETTINGS_IMAGE_MODE }}

+
+

{{ languages.SETTINGS_IMAGE_MODE }}

+ +

Open ComfyUI

+ + +
- (imageGeneration.activeWorkflowName = workflowName)" + :workflows=" imageGeneration.workflows.filter((w) => w.backend === 'comfyui').sort(highToLowPrio) " - @change="(workflow) => (imageGeneration.activeWorkflowName = workflow.name)" - > - - - + :selectedWorkflowName="imageGeneration.activeWorkflowName" + >