From 3dcfc0ac9c58ce9ac8bf74247a11f7c5afef35ee Mon Sep 17 00:00:00 2001 From: julianbollig Date: Wed, 5 Feb 2025 17:15:38 +0100 Subject: [PATCH] #58 - change infoParam output in StableDiffusion to a mapping table, allow for infoParam in ComfyUi Signed-off-by: julianbollig --- WebUI/electron/main.ts | 2 +- WebUI/electron/preload.ts | 2 +- WebUI/src/assets/js/store/comfyUi.ts | 49 +++++++++++++----- WebUI/src/assets/js/store/imageGeneration.ts | 23 +-------- WebUI/src/assets/js/store/stableDiffusion.ts | 27 +++++++++- WebUI/src/components/InfoTable.vue | 28 +++++++++++ WebUI/src/components/PaintInfo.vue | 52 -------------------- WebUI/src/lib/utils.ts | 18 +++++++ WebUI/src/views/Create.vue | 9 ++-- WebUI/src/views/Enhance.vue | 6 +-- 10 files changed, 120 insertions(+), 96 deletions(-) create mode 100644 WebUI/src/components/InfoTable.vue delete mode 100644 WebUI/src/components/PaintInfo.vue diff --git a/WebUI/electron/main.ts b/WebUI/electron/main.ts index 91262d62..09fed00c 100644 --- a/WebUI/electron/main.ts +++ b/WebUI/electron/main.ts @@ -523,7 +523,7 @@ function initEventHandle() { shell.openPath(imagePath) }) - ipcMain.on('selecteImage', (_event, url: string) => { + ipcMain.on('selectedImage', (_event, url: string) => { const imagePath = getImagePathFromUrl(url) if (!imagePath) return diff --git a/WebUI/electron/preload.ts b/WebUI/electron/preload.ts index ebf8e721..fdc9353b 100644 --- a/WebUI/electron/preload.ts +++ b/WebUI/electron/preload.ts @@ -61,7 +61,7 @@ contextBridge.exposeInMainWorld('electronAPI', { getDownloadedGGUFLLMs: () => ipcRenderer.invoke('getDownloadedGGUFLLMs'), getDownloadedEmbeddingModels: () => ipcRenderer.invoke('getDownloadedEmbeddingModels'), openImageWithSystem: (url: string) => ipcRenderer.send('openImageWithSystem', url), - selecteImage: (url: string) => ipcRenderer.send('selecteImage', url), + selectedImage: (url: string) => ipcRenderer.send('selectedImage', url), setFullScreen: (enable: boolean) => ipcRenderer.send('setFullScreen', enable), onDebugLog: (callback: (data: { level: string; source: string; message: string }) => void) => ipcRenderer.on('debugLog', (_event, value) => callback(value)), diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts index 25d6f243..a7db54aa 100644 --- a/WebUI/src/assets/js/store/comfyUi.ts +++ b/WebUI/src/assets/js/store/comfyUi.ts @@ -20,6 +20,7 @@ export const useComfyUi = defineStore( const websocket = ref(null) const clientId = '12345' const loaderNodes = ref([]) + const pendingPrompts = ref([]) const generateIdx = ref(0) const backendServices = useBackendServices() @@ -191,16 +192,19 @@ export const useComfyUi = defineStore( } break case 'executed': - const images: { filename: string; type: string; subfolder: string }[] = - msg.data?.output?.images?.filter((i: { type: string }) => i.type === 'output') - images.forEach((image) => { - imageGeneration.updateImage( - generateIdx.value, - `${comfyBaseUrl.value}/view?filename=${image.filename}&type=${image.type}&subfolder=${image.subfolder ?? ''}`, - false, - ) - generateIdx.value++ - }) + const newImage: { filename: string; type: string; subfolder: string } = + msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output') + const promptIndex: number = pendingPrompts.value.findIndex( + (item: ComfyUiPrompt) => item.promptId === msg.data?.prompt_id, + ) + imageGeneration.updateImage( + generateIdx.value, + `${comfyBaseUrl.value}/view?filename=${newImage.filename}&type=${newImage.type}&subfolder=${newImage.subfolder ?? ''}`, + false, + pendingPrompts.value[promptIndex].prompt, + ) + pendingPrompts.value.splice(promptIndex, 1) + generateIdx.value++ console.log('executed', { detail: msg.data }) break case 'execution_start': @@ -329,7 +333,6 @@ export const useComfyUi = defineStore( ...findKeysByClassType(mutableWorkflow, 'DualCLIPLoader (GGUF)'), ] - generateIdx.value = 0 for (let i = 0; i < imageGeneration.batchSize; i++) { modifySettingInWorkflow(mutableWorkflow, 'seed', `${(seed + i).toFixed(0)}`) @@ -348,7 +351,15 @@ export const useComfyUi = defineStore( `ComfyUI Backend responded with ${result.status}: ${await result.text()}`, ) } + const response = await result.json() + pendingPrompts.value.push({ + promptId: response.prompt_id, + prompt: mutableWorkflow, + }) } + console.log('################') + console.log(pendingPrompts.value) + console.log('################') } catch (ex) { console.error('Error generating image', ex) toast.error('Backend could not generate image.') @@ -374,9 +385,16 @@ export const useComfyUi = defineStore( }) } + function reset() { + loaderNodes.value.length = 0 + pendingPrompts.value.length = 0 + generateIdx.value = 0 + } + return { generate, stop, + reset, } }, { @@ -397,17 +415,25 @@ const settingToComfyInputsName = { scheduler: ['scheduler'], batchSize: ['batch_size'], } satisfies Partial> + type ComfySetting = keyof typeof settingToComfyInputsName +type ComfyUiPrompt = { + promptId: string + prompt: ComfyUIApiWorkflow +} + const findKeysByTitle = (workflow: ComfyUIApiWorkflow, title: ComfySetting | 'loader' | string) => Object.entries(workflow) // eslint-disable-next-line @typescript-eslint/no-explicit-any .filter(([_key, value]) => (value as any)?.['_meta']?.title === title) .map(([key, _value]) => key) + const findKeysByClassType = (workflow: ComfyUIApiWorkflow, classType: string) => Object.entries(workflow) // eslint-disable-next-line @typescript-eslint/no-explicit-any .filter(([_key, value]) => (value as any)?.['class_type'] === classType) .map(([key, _value]) => key) + const findKeysByInputsName = (workflow: ComfyUIApiWorkflow, setting: ComfySetting) => { for (const inputName of settingToComfyInputsName[setting]) { if (inputName === 'text') continue @@ -419,6 +445,7 @@ const findKeysByInputsName = (workflow: ComfyUIApiWorkflow, setting: ComfySettin } return [] } + const getInputNameBySettingAndKey = ( workflow: ComfyUIApiWorkflow, key: string, diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts index af274939..5f76d15d 100644 --- a/WebUI/src/assets/js/store/imageGeneration.ts +++ b/WebUI/src/assets/js/store/imageGeneration.ts @@ -6,26 +6,6 @@ import { useI18N } from './i18n' import * as Const from '../const' import { useGlobalSetup } from './globalSetup' import * as toast from '@/assets/js/toast.ts' -import { preview } from 'vite' - -export type StableDiffusionSettings = { - resolution: 'standard' | 'hd' | 'manual' // ~ modelSettings.resolution 0, 1, 3 - quality: 'standard' | 'high' | 'fast' // ~ modelSettings.quality 0, 1, 2 - imageModel: string - inpaintModel: string - negativePrompt: string - batchSize: number // ~ modelSettings.generateNumber - pickerResolution?: string - width: number - height: number - guidanceScale: number - inferenceSteps: number - seed: number - lora: string | null - scheduler: string | null - imagePreview: boolean - safetyCheck: boolean -} export type generatedImage = { id: number @@ -587,7 +567,7 @@ export const useImageGeneration = defineStore( const generatedImages = ref([]) const currentState = ref('no_start') const stepText = ref('') - const previewIdx = ref(0) + const previewIdx = ref(0) function loadSettingsForActiveWorkflow() { console.log('loading settings for', activeWorkflowName.value) @@ -779,6 +759,7 @@ export const useImageGeneration = defineStore( currentState.value = 'no_start' stepText.value = '' previewIdx.value = 0 + comfyUi.reset() } loadWorkflowsFromJson() diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts index 8e2d6205..483a1e60 100644 --- a/WebUI/src/assets/js/store/stableDiffusion.ts +++ b/WebUI/src/assets/js/store/stableDiffusion.ts @@ -7,6 +7,7 @@ import * as util from '../util' import { SSEProcessor } from '../sseProcessor' import { useI18N } from './i18n' import * as toast from '../toast' +import { mapModeToText } from '@/lib/utils.ts' type BackendParams = { mode: number @@ -121,7 +122,12 @@ export const useStableDiffusion = defineStore( if (!data.safe_check_pass) { data.image = '/src/assets/image/nsfw_result_detected.png' } - await imageGeneration.updateImage(data.index, data.image, false, data.params) + await imageGeneration.updateImage( + data.index, + data.image, + false, + createInfoParamTable(data.params), + ) break case 'step_end': imageGeneration.currentState = 'generating' @@ -194,6 +200,25 @@ export const useStableDiffusion = defineStore( } } + function createInfoParamTable(infoParams: KVObject) { + const infoParamsTable: KVObject = { + resolution: infoParams.width + 'x' + infoParams.height, + size: infoParams.size, + Device: infoParams.device, + prompt: infoParams.prompt, + model_name: infoParams.model_name, + mode: mapModeToText(infoParams.mode), + negative_prompt: infoParams.negative_prompt, + inference_steps: infoParams.inference_steps, + guidance_scale: infoParams.guidance_scale, + seed: infoParams.seed, + scheduler: infoParams.scheduler, + lora: infoParams.lora, + safe_check: infoParams.safe_check.toBoolean(), + } + return infoParamsTable + } + return { generate, stop, diff --git a/WebUI/src/components/InfoTable.vue b/WebUI/src/components/InfoTable.vue new file mode 100644 index 00000000..7cf8df7e --- /dev/null +++ b/WebUI/src/components/InfoTable.vue @@ -0,0 +1,28 @@ + + diff --git a/WebUI/src/components/PaintInfo.vue b/WebUI/src/components/PaintInfo.vue deleted file mode 100644 index e07b2230..00000000 --- a/WebUI/src/components/PaintInfo.vue +++ /dev/null @@ -1,52 +0,0 @@ - - diff --git a/WebUI/src/lib/utils.ts b/WebUI/src/lib/utils.ts index 8777ce60..d1e33f80 100644 --- a/WebUI/src/lib/utils.ts +++ b/WebUI/src/lib/utils.ts @@ -63,3 +63,21 @@ export function mapServiceNameToDisplayName(serviceName: string) { return serviceName } } + +export function mapModeToText(value: number) { + const i18nState = useI18N().state + switch (value) { + case 0: + return i18nState.TAB_CREATE + case 1: + return i18nState.ENHANCE_UPSCALE + case 2: + return i18nState.ENHANCE_IMAGE_PROMPT + case 3: + return i18nState.ENHANCE_INPAINT + case 4: + return i18nState.ENHANCE_OUTPAINT + default: + return 'unknown' + } +} diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue index 15c55f95..c965f5ea 100644 --- a/WebUI/src/views/Create.vue +++ b/WebUI/src/views/Create.vue @@ -56,9 +56,6 @@