From 0d43453290c444c03098ffe3f5667f4eba2360a3 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 4 Feb 2025 11:43:49 +0100
Subject: [PATCH 01/23] #58 - created generateImages type and implemented an
 array for stableDiffusion

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/imageGeneration.ts | 30 ++++++++++++++++++--
 WebUI/src/assets/js/store/stableDiffusion.ts | 25 ++++++++++------
 WebUI/src/env.d.ts                           |  2 +-
 WebUI/src/views/Create.vue                   |  4 +--
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index d6ae35e8..33a5a04c 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -26,6 +26,12 @@ export type StableDiffusionSettings = {
   safetyCheck: boolean
 }
 
+export type generatedImage = {
+  id: number
+  imageUrl: string
+  infoParams: KVObject | undefined
+}
+
 const SettingsSchema = z.object({
   imageModel: z.string(),
   inpaintModel: z.string(),
@@ -407,7 +413,7 @@ export const useImageGeneration = defineStore(
     const seed = ref<number>(generalDefaultSettings.seed)
     const imagePreview = ref<boolean>(generalDefaultSettings.imagePreview)
     const safeCheck = ref<boolean>(generalDefaultSettings.safeCheck)
-    const batchSize = ref<number>(globalDefaultSettings.batchSize) // TODO this should be imageCount instead, as we only support batchSize 1 due to memory constraints
+    const batchSize = ref<number>(globalDefaultSettings.batchSize)
 
     const resetActiveWorkflowSettings = () => {
       prompt.value = generalDefaultSettings.prompt
@@ -575,6 +581,7 @@ export const useImageGeneration = defineStore(
       saveToSettingsPerWorkflow('inpaintModel')
     })
 
+    const generatedImages = ref<generatedImage[]>([])
     const imageUrls = ref<string[]>([])
     const currentState = ref<SDGenerateState>('no_start')
     const stepText = ref('')
@@ -618,6 +625,20 @@ export const useImageGeneration = defineStore(
       }
     }
 
+    async function updateImage(
+      index: number,
+      image: string,
+      infoParams: KVObject | undefined = undefined,
+    ) {
+      const newImage: generatedImage = { id: index, imageUrl: image, infoParams: infoParams }
+      const existingImageIndex = generatedImages.value.findIndex((img) => img.id === newImage.id)
+      if (existingImageIndex !== -1) {
+        generatedImages.value.splice(existingImageIndex, 1, newImage)
+      } else {
+        generatedImages.value.push(newImage)
+      }
+    }
+
     async function loadWorkflowsFromIntel() {
       const syncResponse = await window.electronAPI.updateWorkflowsFromIntelRepo()
       await loadWorkflowsFromJson()
@@ -732,9 +753,10 @@ export const useImageGeneration = defineStore(
       previewIdx.value = 0
       stepText.value = i18nState.COM_GENERATING
       if (activeWorkflow.value.backend === 'default') {
-        stableDiffusion.generate()
+        await stableDiffusion.generate()
+        console.log(generatedImages.value)
       } else {
-        comfyUi.generate()
+        await comfyUi.generate()
       }
     }
 
@@ -761,6 +783,7 @@ export const useImageGeneration = defineStore(
       activeWorkflow,
       processing,
       prompt,
+      generatedImages,
       imageUrls,
       currentState,
       stepText,
@@ -789,6 +812,7 @@ export const useImageGeneration = defineStore(
       loadWorkflowsFromIntel,
       getMissingModels,
       updateDestImage,
+      updateImage,
       generate,
       stopGeneration,
       reset,
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 29e96937..c5e82baf 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -34,7 +34,7 @@ export const useStableDiffusion = defineStore(
     const i18nState = useI18N().state
     const models = useModels()
 
-    let abortContooler: AbortController | null
+    let abortController: AbortController | null
     const generateParams = ref(new Array<KVObject>())
 
     async function generate() {
@@ -123,17 +123,24 @@ export const useStableDiffusion = defineStore(
           if (!data.safe_check_pass) {
             data.image = '/src/assets/image/nsfw_result_detected.png'
           }
+          //old
           await imageGeneration.updateDestImage(data.index, data.image)
           generateParams.value.push(data.params)
-          imageGeneration.generateIdx++
+          imageGeneration.generateIdx++ //necessary?
+          //new
+          await imageGeneration.updateImage(data.index, data.image, data.params)
           break
         case 'step_end':
           imageGeneration.currentState = 'generating'
           imageGeneration.stepText = `${i18nState.COM_GENERATING} ${data.step}/${data.total_step}`
           if (data.image) {
+            //old
             await imageGeneration.updateDestImage(data.index, data.image)
+            //new
+            await imageGeneration.updateImage(data.index, data.image)
           }
           if (data.step == 0) {
+            //necessary?
             imageGeneration.previewIdx = data.index
           }
           break
@@ -162,7 +169,7 @@ export const useStableDiffusion = defineStore(
             case 'runtime_error':
               toast.error(i18nState.ERROR_RUNTIME_ERROR)
               break
-            case 'unknow_exception':
+            case 'unknown_exception':
               toast.error(i18nState.ERROR_GENERATE_UNKONW_EXCEPTION)
               break
           }
@@ -173,13 +180,13 @@ export const useStableDiffusion = defineStore(
     async function sendGenerate(defaultBackendParams: BackendParams) {
       try {
         imageGeneration.processing = true
-        if (!abortContooler) {
-          abortContooler = new AbortController()
+        if (!abortController) {
+          abortController = new AbortController()
         }
         const response = await fetch(`${useGlobalSetup().apiHost}/api/sd/generate`, {
           method: 'POST',
           body: util.convertToFormData(defaultBackendParams),
-          signal: abortContooler.signal,
+          signal: abortController.signal,
         })
         const reader = response.body!.getReader()
         await new SSEProcessor(reader, dataProcess, finishGenerate).start()
@@ -192,9 +199,9 @@ export const useStableDiffusion = defineStore(
       if (imageGeneration.processing && !imageGeneration.stopping) {
         imageGeneration.stopping = true
         await fetch(`${globalSetup.apiHost}/api/sd/stopGenerate`)
-        if (abortContooler) {
-          abortContooler.abort()
-          abortContooler = null
+        if (abortController) {
+          abortController.abort()
+          abortController = null
         }
         imageGeneration.processing = false
         imageGeneration.stopping = false
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 67dd78f8..7744d953 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -259,7 +259,7 @@ type NotEnoughDiskSpaceExceptionCallback = {
 
 type ErrorOutCallback = {
   type: 'error'
-  err_type: 'runtime_error' | 'download_exception' | 'unknow_exception'
+  err_type: 'runtime_error' | 'download_exception' | 'unknown_exception'
 }
 
 type DownloadModelProgressCallback = {
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 73649f5e..ce8c1960 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -88,7 +88,7 @@
               <span class="svg-icon text-white i-copy w-4 h-4"></span>
             </button>
             <button
-              @click="selecteImage"
+              @click="selectedImage"
               :title="languages.COM_OPEN_LOCATION"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
             >
@@ -207,7 +207,7 @@ function openImage() {
   window.electronAPI.openImageWithSystem(path)
 }
 
-function selecteImage() {
+function selectedImage() {
   window.electronAPI.selecteImage(imageGeneration.imageUrls[imageGeneration.previewIdx])
 }
 

From 6cedc45185ced41b2c6348147226f57338ffd061 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 4 Feb 2025 19:28:14 +0100
Subject: [PATCH 02/23] #58 - refactored code with both backends where images
 are stored as objects rather than just urls

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/comfyUi.ts         | 12 +++--
 WebUI/src/assets/js/store/imageGeneration.ts | 28 +++++------
 WebUI/src/assets/js/store/stableDiffusion.ts | 17 +------
 WebUI/src/views/Create.vue                   | 53 +++++++++-----------
 4 files changed, 46 insertions(+), 64 deletions(-)

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index dc496eca..25d6f243 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<WebSocket | null>(null)
     const clientId = '12345'
     const loaderNodes = ref<string[]>([])
+    const generateIdx = ref<number>(0)
 
     const backendServices = useBackendServices()
     const comfyUiState = computed(() => {
@@ -163,8 +164,7 @@ export const useComfyUi = defineStore(
                 const imageUrl = URL.createObjectURL(imageBlob)
                 console.log('image url', imageUrl)
                 if (imageBlob) {
-                  imageGeneration.previewIdx = imageGeneration.generateIdx
-                  imageGeneration.updateDestImage(imageGeneration.generateIdx, imageUrl)
+                  imageGeneration.updateImage(generateIdx.value, imageUrl, true)
                 }
                 break
               default:
@@ -194,11 +194,12 @@ export const useComfyUi = defineStore(
                 const images: { filename: string; type: string; subfolder: string }[] =
                   msg.data?.output?.images?.filter((i: { type: string }) => i.type === 'output')
                 images.forEach((image) => {
-                  imageGeneration.updateDestImage(
-                    imageGeneration.generateIdx,
+                  imageGeneration.updateImage(
+                    generateIdx.value,
                     `${comfyBaseUrl.value}/view?filename=${image.filename}&type=${image.type}&subfolder=${image.subfolder ?? ''}`,
+                    false,
                   )
-                  imageGeneration.generateIdx++
+                  generateIdx.value++
                 })
                 console.log('executed', { detail: msg.data })
                 break
@@ -328,6 +329,7 @@ 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)}`)
 
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 33a5a04c..50e32d04 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -29,6 +29,7 @@ export type StableDiffusionSettings = {
 export type generatedImage = {
   id: number
   imageUrl: string
+  isLoading: boolean
   infoParams: KVObject | undefined
 }
 
@@ -586,7 +587,6 @@ export const useImageGeneration = defineStore(
     const currentState = ref<SDGenerateState>('no_start')
     const stepText = ref('')
     const previewIdx = ref(0)
-    const generateIdx = ref(-999)
 
     function loadSettingsForActiveWorkflow() {
       console.log('loading settings for', activeWorkflowName.value)
@@ -617,25 +617,27 @@ export const useImageGeneration = defineStore(
       getSavedOrDefault('inpaintModel')
     }
 
-    async function updateDestImage(index: number, image: string) {
-      if (index + 1 > imageUrls.value.length) {
-        imageUrls.value.push(image)
-      } else {
-        imageUrls.value.splice(index, 1, image)
-      }
-    }
-
     async function updateImage(
       index: number,
       image: string,
+      loading: boolean,
       infoParams: KVObject | undefined = undefined,
     ) {
-      const newImage: generatedImage = { id: index, imageUrl: image, infoParams: infoParams }
+      const newImage: generatedImage = {
+        id: index,
+        imageUrl: image,
+        isLoading: loading,
+        infoParams: infoParams,
+      }
       const existingImageIndex = generatedImages.value.findIndex((img) => img.id === newImage.id)
       if (existingImageIndex !== -1) {
         generatedImages.value.splice(existingImageIndex, 1, newImage)
       } else {
         generatedImages.value.push(newImage)
+        previewIdx.value = newImage.id
+        console.log('#################')
+        console.log(previewIdx)
+        console.log('#################')
       }
     }
 
@@ -749,12 +751,10 @@ export const useImageGeneration = defineStore(
     }
 
     async function generate() {
-      generateIdx.value = 0
       previewIdx.value = 0
       stepText.value = i18nState.COM_GENERATING
       if (activeWorkflow.value.backend === 'default') {
         await stableDiffusion.generate()
-        console.log(generatedImages.value)
       } else {
         await comfyUi.generate()
       }
@@ -769,7 +769,7 @@ export const useImageGeneration = defineStore(
       currentState.value = 'no_start'
       stableDiffusion.generateParams.length = 0
       imageUrls.value.length = 0
-      generateIdx.value = -999
+      generatedImages.value.length = 0 //new
       previewIdx.value = -1
     }
 
@@ -789,7 +789,6 @@ export const useImageGeneration = defineStore(
       stepText,
       stopping,
       previewIdx,
-      generateIdx,
       imageModel,
       inpaintModel,
       lora,
@@ -811,7 +810,6 @@ export const useImageGeneration = defineStore(
       loadWorkflowsFromJson,
       loadWorkflowsFromIntel,
       getMissingModels,
-      updateDestImage,
       updateImage,
       generate,
       stopGeneration,
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index c5e82baf..90ecd99a 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -61,7 +61,6 @@ export const useStableDiffusion = defineStore(
           image_preview: imageGeneration.imagePreview,
           safe_check: imageGeneration.safeCheck,
         }
-
         await sendGenerate(defaultBackendParams)
       } catch (_error: unknown) {
       } finally {
@@ -123,25 +122,13 @@ export const useStableDiffusion = defineStore(
           if (!data.safe_check_pass) {
             data.image = '/src/assets/image/nsfw_result_detected.png'
           }
-          //old
-          await imageGeneration.updateDestImage(data.index, data.image)
-          generateParams.value.push(data.params)
-          imageGeneration.generateIdx++ //necessary?
-          //new
-          await imageGeneration.updateImage(data.index, data.image, data.params)
+          await imageGeneration.updateImage(data.index, data.image, false)
           break
         case 'step_end':
           imageGeneration.currentState = 'generating'
           imageGeneration.stepText = `${i18nState.COM_GENERATING} ${data.step}/${data.total_step}`
           if (data.image) {
-            //old
-            await imageGeneration.updateDestImage(data.index, data.image)
-            //new
-            await imageGeneration.updateImage(data.index, data.image)
-          }
-          if (data.step == 0) {
-            //necessary?
-            imageGeneration.previewIdx = data.index
+            await imageGeneration.updateImage(data.index, data.image, true)
           }
           break
         case 'load_model':
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index ce8c1960..ed037e9d 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -1,17 +1,17 @@
 <template>
   <div id="createPanel" class="h-full flex flex-col p-4">
     <div class="image-panel flex-auto flex p-4">
-      <div v-if="imageGeneration.imageUrls.length > 0" class="image-preview-panel flex-none">
+      <div v-if="imageGeneration.generatedImages.length > 0" class="image-preview-panel flex-none">
         <!-- eslint-disable vue/require-v-for-key -->
         <div
-          v-for="(image, i) in imageGeneration.imageUrls"
+          v-for="image in imageGeneration.generatedImages"
           class="image-preview-item flex items-center justify-center"
-          :class="{ active: imageGeneration.previewIdx == i }"
-          @click="swithPreview(i)"
+          :class="{ active: imageGeneration.previewIdx === image.id }"
+          @click="switchPreview(image.id)"
         >
           <!-- eslint-enable -->
           <div class="image-preview-item-bg">
-            <img :src="image" class="image-thumb" />
+            <img :src="image.imageUrl" class="image-thumb" />
           </div>
         </div>
       </div>
@@ -21,17 +21,14 @@
         >
           <!-- eslint-disable vue/require-v-for-key -->
           <img
-            v-for="(image, i) in imageGeneration.imageUrls"
-            :src="image"
+            v-for="image in imageGeneration.generatedImages"
+            :src="image.imageUrl"
             class="p-1 max-w-768px max-h-512px"
-            v-show="imageGeneration.previewIdx == i"
+            v-show="imageGeneration.previewIdx === image.id"
           />
           <!-- eslint-enable -->
           <div
-            v-show="
-              imageGeneration.generateIdx == imageGeneration.previewIdx &&
-              imageGeneration.processing
-            "
+            v-show="imageGeneration.processing && (!currentImage || currentImage?.isLoading)"
             class="absolute left-0 top-0 w-full h-full bg-black/50 flex justify-center items-center"
           >
             <loading-bar
@@ -52,10 +49,7 @@
             </div>
           </div>
           <div
-            v-show="
-              imageGeneration.previewIdx != -1 &&
-              imageGeneration.generateIdx > imageGeneration.previewIdx
-            "
+            v-show="currentImage && !currentImage.isLoading"
             class="absolute bottom-0 -right-8 box-content flex flex-col items-center justify-center gap-2"
           >
             <button
@@ -66,7 +60,9 @@
               <span class="svg-icon text-white i-transfer w-4 h-4"></span>
             </button>
             <button
-              v-if="imageGeneration.activeWorkflow.backend === 'default'"
+              v-if="
+                imageGeneration.activeWorkflow.backend === 'default' //change after comfyui integration
+              "
               @click="showParamsDialog"
               :title="languages.COM_OPEN_PARAMS"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -94,10 +90,8 @@
             >
               <span class="svg-icon text-white i-folder w-4 h-4"></span>
             </button>
-            <!-- <button @click="regenerate" :title="languages.COM_REGENERATE"
-                            class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center">
-                            <span class="svg-icon text-white i-refresh w-4 h-4"></span>
-                        </button> -->
+
+            <!--            change reset button in delete image-->
             <button
               v-show="!imageGeneration.processing"
               @click="reset"
@@ -150,7 +144,7 @@ import * as toast from '@/assets/js/toast'
 import * as util from '@/assets/js/util'
 import LoadingBar from '../components/LoadingBar.vue'
 import PaintInfo from '@/components/PaintInfo.vue'
-import { useImageGeneration } from '@/assets/js/store/imageGeneration'
+import { generatedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
 import { useStableDiffusion } from '@/assets/js/store/stableDiffusion'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 
@@ -165,7 +159,9 @@ const downloadModel = reactive({
 })
 const showParams = ref(false)
 const infoParams = ref<KVObject>({})
-
+const currentImage: ComputedRef<generatedImage | undefined> = computed(() => {
+  return imageGeneration.generatedImages.find((image) => image.id === imageGeneration.previewIdx)
+})
 const emits = defineEmits<{
   (
     e: 'showDownloadModelConfirm',
@@ -199,20 +195,19 @@ async function ensureModelsAreAvailable() {
 }
 
 function postImageToEnhance() {
-  emits('postImageToEnhance', imageGeneration.imageUrls[imageGeneration.previewIdx])
+  emits('postImageToEnhance', currentImage.value?.imageUrl ?? '')
 }
 
 function openImage() {
-  const path = imageGeneration.imageUrls[imageGeneration.previewIdx]
-  window.electronAPI.openImageWithSystem(path)
+  window.electronAPI.openImageWithSystem(currentImage.value?.imageUrl ?? '')
 }
 
 function selectedImage() {
-  window.electronAPI.selecteImage(imageGeneration.imageUrls[imageGeneration.previewIdx])
+  window.electronAPI.selecteImage(currentImage.value?.imageUrl ?? '')
 }
 
 function copyImage() {
-  util.copyImage(imageGeneration.imageUrls[imageGeneration.previewIdx])
+  util.copyImage(currentImage.value?.imageUrl ?? '')
   toast.success(i18nState.COM_COPY_SUCCESS_TIP)
 }
 
@@ -221,7 +216,7 @@ function reset() {
   imageGeneration.reset()
 }
 
-function swithPreview(i: number) {
+function switchPreview(i: number) {
   imageGeneration.previewIdx = i
   if (i > -1) {
     infoParams.value = stableDiffusion.generateParams[i]

From 005e7e55bc62428281e14a633a5ac7c053705cfd Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Wed, 5 Feb 2025 09:38:39 +0100
Subject: [PATCH 03/23] #58 - small fix to previous commit

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/comfyUi.ts         | 1 +
 WebUI/src/assets/js/store/imageGeneration.ts | 3 ---
 WebUI/src/assets/js/store/stableDiffusion.ts | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index 25d6f243..95e46af9 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -201,6 +201,7 @@ export const useComfyUi = defineStore(
                   )
                   generateIdx.value++
                 })
+                console.log('!!!!!!!!!!!!!!!', { detail: msg })
                 console.log('executed', { detail: msg.data })
                 break
               case 'execution_start':
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 50e32d04..99c5ca0d 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -635,9 +635,6 @@ export const useImageGeneration = defineStore(
       } else {
         generatedImages.value.push(newImage)
         previewIdx.value = newImage.id
-        console.log('#################')
-        console.log(previewIdx)
-        console.log('#################')
       }
     }
 
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 90ecd99a..9f9be25a 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -122,7 +122,7 @@ 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)
+          await imageGeneration.updateImage(data.index, data.image, false, data.params)
           break
         case 'step_end':
           imageGeneration.currentState = 'generating'

From 35b4e7dd5e4edf404f7ccac0021eb08b649d44bf Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Wed, 5 Feb 2025 13:34:26 +0100
Subject: [PATCH 04/23] #58 - restore picture functionalities and add a
 deleteImage option

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/i18n/en-US.json             |  4 +-
 WebUI/src/assets/js/store/comfyUi.ts         |  1 -
 WebUI/src/assets/js/store/imageGeneration.ts | 23 ++++++--
 WebUI/src/assets/js/store/stableDiffusion.ts |  2 -
 WebUI/src/components/PaintInfo.vue           |  4 +-
 WebUI/src/env.d.ts                           |  2 +-
 WebUI/src/views/Create.vue                   | 58 ++++++++++----------
 WebUI/src/views/Enhance.vue                  |  4 +-
 8 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index 4feb0432..e6d5f2b4 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -242,5 +242,7 @@
   "WORKFLOW_HIGH_VRAM_INFO": "This model requires a lot of VRAM. Reduce the resolution and/or restart the ComfyUI backend when in case you experience a poor performance.",
   "WORKFLOW_HIGH_VRAM_WARNING": "high VRAM required",
   "LOADING_VERIFYING_BACKENDS": "Verifying backends",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Loading"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Loading",
+
+  "COM_RESET": "Reset"
 }
diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index 95e46af9..25d6f243 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -201,7 +201,6 @@ export const useComfyUi = defineStore(
                   )
                   generateIdx.value++
                 })
-                console.log('!!!!!!!!!!!!!!!', { detail: msg })
                 console.log('executed', { detail: msg.data })
                 break
               case 'execution_start':
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 99c5ca0d..af274939 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -6,6 +6,7 @@ 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
@@ -117,6 +118,7 @@ const ComfyNumberInputSchema = z.object({
   step: z.number(),
 })
 export type ComfyNumberInput = z.infer<typeof ComfyNumberInputSchema>
+
 const ComfyImageInputSchema = z.object({
   nodeTitle: z.string(),
   nodeInput: z.string(),
@@ -583,7 +585,6 @@ export const useImageGeneration = defineStore(
     })
 
     const generatedImages = ref<generatedImage[]>([])
-    const imageUrls = ref<string[]>([])
     const currentState = ref<SDGenerateState>('no_start')
     const stepText = ref('')
     const previewIdx = ref(0)
@@ -762,12 +763,22 @@ export const useImageGeneration = defineStore(
       comfyUi.stop()
     }
 
+    function deleteImage(id: number | undefined) {
+      if (id !== undefined) {
+        let index = generatedImages.value.findIndex((item) => item.id === id)
+        generatedImages.value.splice(index, 1)
+        if (index === generatedImages.value.length && index !== 0) {
+          index--
+        }
+        previewIdx.value = generatedImages.value[index].id
+      }
+    }
+
     function reset() {
+      generatedImages.value.length = 0
       currentState.value = 'no_start'
-      stableDiffusion.generateParams.length = 0
-      imageUrls.value.length = 0
-      generatedImages.value.length = 0 //new
-      previewIdx.value = -1
+      stepText.value = ''
+      previewIdx.value = 0
     }
 
     loadWorkflowsFromJson()
@@ -781,7 +792,6 @@ export const useImageGeneration = defineStore(
       processing,
       prompt,
       generatedImages,
-      imageUrls,
       currentState,
       stepText,
       stopping,
@@ -810,6 +820,7 @@ export const useImageGeneration = defineStore(
       updateImage,
       generate,
       stopGeneration,
+      deleteImage,
       reset,
     }
   },
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 9f9be25a..8e2d6205 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -35,7 +35,6 @@ export const useStableDiffusion = defineStore(
     const models = useModels()
 
     let abortController: AbortController | null
-    const generateParams = ref(new Array<KVObject>())
 
     async function generate() {
       if (imageGeneration.processing) {
@@ -196,7 +195,6 @@ export const useStableDiffusion = defineStore(
     }
 
     return {
-      generateParams,
       generate,
       stop,
     }
diff --git a/WebUI/src/components/PaintInfo.vue b/WebUI/src/components/PaintInfo.vue
index 96f41a0a..026390a3 100644
--- a/WebUI/src/components/PaintInfo.vue
+++ b/WebUI/src/components/PaintInfo.vue
@@ -23,7 +23,7 @@
 import { useI18N } from '@/assets/js/store/i18n'
 
 const props = defineProps<{
-  params: KVObject
+  params: KVObject | undefined
 }>()
 
 const i18n = useI18N().state
@@ -48,7 +48,7 @@ function getModeText(key: string, value: number | string) {
     case 4:
       return i18n.ENHANCE_OUTPAINT
     default:
-      return 'unkonw'
+      return 'unknown'
   }
 }
 </script>
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 7744d953..20fb5d7c 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -57,7 +57,7 @@ type electronAPI = {
   getDownloadedGGUFLLMs(): Promise<string[]>
   getDownloadedEmbeddingModels(): Promise<string[]>
   openImageWithSystem(url: string): void
-  selecteImage(url: string): void
+  selectedImage(url: string): void
   setFullScreen(enable: boolean): void
   onDebugLog(
     callback: (data: {
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index ed037e9d..3d442dc4 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -7,7 +7,7 @@
           v-for="image in imageGeneration.generatedImages"
           class="image-preview-item flex items-center justify-center"
           :class="{ active: imageGeneration.previewIdx === image.id }"
-          @click="switchPreview(image.id)"
+          @click="imageGeneration.previewIdx = image.id"
         >
           <!-- eslint-enable -->
           <div class="image-preview-item-bg">
@@ -84,28 +84,33 @@
               <span class="svg-icon text-white i-copy w-4 h-4"></span>
             </button>
             <button
-              @click="selectedImage"
+              @click="openImageInFolder"
               :title="languages.COM_OPEN_LOCATION"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
             >
               <span class="svg-icon text-white i-folder w-4 h-4"></span>
             </button>
-
-            <!--            change reset button in delete image-->
             <button
-              v-show="!imageGeneration.processing"
-              @click="reset"
+              @click="deleteImage"
               :title="languages.COM_DELETE"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
             >
               <span class="svg-icon text-white i-delete w-4 h-4"></span>
             </button>
+            <button
+              v-show="!imageGeneration.processing"
+              @click="reset"
+              :title="languages.COM_RESET"
+              class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
+            >
+              <span class="svg-icon text-white i-reset w-4 h-4"></span>
+            </button>
           </div>
         </div>
         <paint-info
-          :params="infoParams"
-          v-show="showParams"
-          @close="showParams = false"
+          v-show="showInfoParams"
+          :params="currentImage?.infoParams"
+          @close="showInfoParams = false"
         ></paint-info>
       </div>
     </div>
@@ -145,11 +150,9 @@ import * as util from '@/assets/js/util'
 import LoadingBar from '../components/LoadingBar.vue'
 import PaintInfo from '@/components/PaintInfo.vue'
 import { generatedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
-import { useStableDiffusion } from '@/assets/js/store/stableDiffusion'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 
 const imageGeneration = useImageGeneration()
-const stableDiffusion = useStableDiffusion()
 const globalSetup = useGlobalSetup()
 const i18nState = useI18N().state
 const downloadModel = reactive({
@@ -157,8 +160,7 @@ const downloadModel = reactive({
   text: '',
   percent: 0,
 })
-const showParams = ref(false)
-const infoParams = ref<KVObject>({})
+const showInfoParams = ref(false)
 const currentImage: ComputedRef<generatedImage | undefined> = computed(() => {
   return imageGeneration.generatedImages.find((image) => image.id === imageGeneration.previewIdx)
 })
@@ -198,12 +200,13 @@ function postImageToEnhance() {
   emits('postImageToEnhance', currentImage.value?.imageUrl ?? '')
 }
 
-function openImage() {
-  window.electronAPI.openImageWithSystem(currentImage.value?.imageUrl ?? '')
+function showParamsDialog() {
+  showInfoParams.value = true
+  console.log(currentImage.value?.infoParams)
 }
 
-function selectedImage() {
-  window.electronAPI.selecteImage(currentImage.value?.imageUrl ?? '')
+function openImage() {
+  window.electronAPI.openImageWithSystem(currentImage.value?.imageUrl ?? '')
 }
 
 function copyImage() {
@@ -211,22 +214,17 @@ function copyImage() {
   toast.success(i18nState.COM_COPY_SUCCESS_TIP)
 }
 
-function reset() {
-  downloadModel.downloading = false
-  imageGeneration.reset()
+function openImageInFolder() {
+  window.electronAPI.selectedImage(currentImage.value?.imageUrl ?? '')
 }
 
-function switchPreview(i: number) {
-  imageGeneration.previewIdx = i
-  if (i > -1) {
-    infoParams.value = stableDiffusion.generateParams[i]
-  } else {
-    showParams.value = false
-  }
+function deleteImage() {
+  imageGeneration.deleteImage(currentImage.value?.id)
 }
 
-function showParamsDialog() {
-  showParams.value = true
-  infoParams.value = stableDiffusion.generateParams[imageGeneration.previewIdx]
+function reset() {
+  downloadModel.downloading = false
+  showInfoParams.value = false
+  imageGeneration.reset()
 }
 </script>
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index ad2a2c48..e7c116b4 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -210,7 +210,7 @@
         <paint-info
           :params="infoParams"
           v-show="showParams"
-          @close="showParams = false"
+          @close="showInfoParams = false"
         ></paint-info>
       </div>
     </div>
@@ -697,7 +697,7 @@ function copyImage() {
 
 async function selecteImage() {
   const url = destImg.value[previewIdx.value]
-  window.electronAPI.selecteImage(url)
+  window.electronAPI.selectedImage(url)
 }
 
 function removeImage() {

From 795d68ea74c7630724dc0e8151d4f1c51492ba99 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Wed, 5 Feb 2025 17:15:38 +0100
Subject: [PATCH 05/23] #58 - change infoParam output in StableDiffusion to a
 mapping table, allow for infoParam in ComfyUi

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 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/lib/utils.ts                       | 18 +++++++
 WebUI/src/views/Create.vue                   |  9 ++--
 WebUI/src/views/Enhance.vue                  |  6 +--
 9 files changed, 120 insertions(+), 44 deletions(-)
 create mode 100644 WebUI/src/components/InfoTable.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<WebSocket | null>(null)
     const clientId = '12345'
     const loaderNodes = ref<string[]>([])
+    const pendingPrompts = ref<ComfyUiPrompt[]>([])
     const generateIdx = ref<number>(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<Record<Setting, string[]>>
+
 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<generatedImage[]>([])
     const currentState = ref<SDGenerateState>('no_start')
     const stepText = ref('')
-    const previewIdx = ref(0)
+    const previewIdx = ref<string | number>(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 @@
+<template>
+  <div v-if="props.params" class="info-params absolute px-5 pt-8 pb-5 text-white">
+    <button
+      class="w-5 h-5 svg-icon i-close absolute right-2 top-2"
+      @click="emits('close')"
+    ></button>
+    <div class="params-list">
+      <ul class="border border-color-spilter">
+        <li
+          v-for="(value, key) in props.params"
+          class="last:border-none border-b border-color-spilter flex items-start"
+        >
+          <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{ key }}</span>
+          <span class="px-4 flex-auto break-word">{{ value }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  params: KVObject | undefined
+}>()
+
+const emits = defineEmits<{
+  (e: 'close'): void
+}>()
+</script>
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 3d442dc4..e4528a16 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -60,9 +60,6 @@
               <span class="svg-icon text-white i-transfer w-4 h-4"></span>
             </button>
             <button
-              v-if="
-                imageGeneration.activeWorkflow.backend === 'default' //change after comfyui integration
-              "
               @click="showParamsDialog"
               :title="languages.COM_OPEN_PARAMS"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -107,11 +104,11 @@
             </button>
           </div>
         </div>
-        <paint-info
+        <info-table
           v-show="showInfoParams"
           :params="currentImage?.infoParams"
           @close="showInfoParams = false"
-        ></paint-info>
+        ></info-table>
       </div>
     </div>
     <div class="h-32 gap-3 flex-none flex items-center">
@@ -148,7 +145,7 @@ import { useI18N } from '@/assets/js/store/i18n'
 import * as toast from '@/assets/js/toast'
 import * as util from '@/assets/js/util'
 import LoadingBar from '../components/LoadingBar.vue'
-import PaintInfo from '@/components/PaintInfo.vue'
+import InfoTable from '@/components/InfoTable.vue'
 import { generatedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index e7c116b4..197a38c5 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -164,7 +164,7 @@
             </button>
             <button
               v-show="previewIdx != -1 && previewIdx <= generateFinishIdx"
-              @click="selecteImage"
+              @click="selectedImage"
               :title="languages.COM_OPEN_LOCATION"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
             >
@@ -325,7 +325,7 @@ import * as toast from '@/assets/js/toast'
 import { SSEProcessor } from '@/assets/js/sseProcessor'
 import LoadingBar from '../components/LoadingBar.vue'
 import VerticalSlideBar from '@/components/VerticalSlideBar.vue'
-import PaintInfo from '@/components/PaintInfo.vue'
+import PaintInfo from '@/components/InfoTable.vue'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup'
 import InpaintMask from '../components/InpaintMask.vue'
 import * as Const from '@/assets/js/const'
@@ -695,7 +695,7 @@ function copyImage() {
   util.copyImage(destImg.value[previewIdx.value])
 }
 
-async function selecteImage() {
+async function selectedImage() {
   const url = destImg.value[previewIdx.value]
   window.electronAPI.selectedImage(url)
 }

From 426b59c6c9eb1c4488c2aa12625eba5c13a0f8ab Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Thu, 6 Feb 2025 11:54:27 +0100
Subject: [PATCH 06/23] #58 - fix info table for stable Diffusion

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/stableDiffusion.ts | 36 +++++++++++++-------
 WebUI/src/env.d.ts                           | 14 +++++---
 WebUI/src/lib/utils.ts                       |  2 +-
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 483a1e60..82302374 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -27,6 +27,11 @@ type BackendParams = {
   safe_check: boolean
 }
 
+type ImageInfoParams = {
+  size: string
+  model_name: string
+} & Partial<BackendParams>
+
 export const useStableDiffusion = defineStore(
   'stableDiffusion',
   () => {
@@ -36,6 +41,7 @@ export const useStableDiffusion = defineStore(
     const models = useModels()
 
     let abortController: AbortController | null
+    const defaultBackendParams = ref<BackendParams>()
 
     async function generate() {
       if (imageGeneration.processing) {
@@ -44,7 +50,7 @@ export const useStableDiffusion = defineStore(
       try {
         imageGeneration.processing = true
         await checkModel()
-        const defaultBackendParams = {
+        defaultBackendParams.value = {
           mode: 0,
           device: globalSetup.modelSettings.graphics,
           prompt: imageGeneration.prompt,
@@ -53,7 +59,7 @@ export const useStableDiffusion = defineStore(
           generate_number: imageGeneration.batchSize,
           inference_steps: imageGeneration.inferenceSteps,
           guidance_scale: imageGeneration.guidanceScale,
-          seed: imageGeneration.seed,
+          seed: imageGeneration.seed === -1 ? Math.random() * 1000000 : imageGeneration.seed,
           height: imageGeneration.height,
           width: imageGeneration.width,
           lora: imageGeneration.lora,
@@ -61,7 +67,7 @@ export const useStableDiffusion = defineStore(
           image_preview: imageGeneration.imagePreview,
           safe_check: imageGeneration.safeCheck,
         }
-        await sendGenerate(defaultBackendParams)
+        await sendGenerate()
       } catch (_error: unknown) {
       } finally {
         imageGeneration.processing = false
@@ -122,13 +128,16 @@ 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,
-            createInfoParamTable(data.params),
-          )
+          const infoParams: KVObject | undefined =
+            defaultBackendParams.value &&
+            createInfoParamTable({
+              ...defaultBackendParams.value,
+              size: String(data.params.size),
+              model_name: String(data.params.model_name),
+            })
+          await imageGeneration.updateImage(data.index, data.image, false, infoParams)
           break
+
         case 'step_end':
           imageGeneration.currentState = 'generating'
           imageGeneration.stepText = `${i18nState.COM_GENERATING} ${data.step}/${data.total_step}`
@@ -169,15 +178,16 @@ export const useStableDiffusion = defineStore(
       }
     }
 
-    async function sendGenerate(defaultBackendParams: BackendParams) {
+    async function sendGenerate() {
       try {
         imageGeneration.processing = true
         if (!abortController) {
           abortController = new AbortController()
         }
+
         const response = await fetch(`${useGlobalSetup().apiHost}/api/sd/generate`, {
           method: 'POST',
-          body: util.convertToFormData(defaultBackendParams),
+          body: util.convertToFormData(defaultBackendParams.value),
           signal: abortController.signal,
         })
         const reader = response.body!.getReader()
@@ -200,7 +210,7 @@ export const useStableDiffusion = defineStore(
       }
     }
 
-    function createInfoParamTable(infoParams: KVObject) {
+    function createInfoParamTable(infoParams: ImageInfoParams) {
       const infoParamsTable: KVObject = {
         resolution: infoParams.width + 'x' + infoParams.height,
         size: infoParams.size,
@@ -214,7 +224,7 @@ export const useStableDiffusion = defineStore(
         seed: infoParams.seed,
         scheduler: infoParams.scheduler,
         lora: infoParams.lora,
-        safe_check: infoParams.safe_check.toBoolean(),
+        safe_check: infoParams.safe_check,
       }
       return infoParamsTable
     }
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 20fb5d7c..8ea80d53 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -128,6 +128,10 @@ type StringKV = {
   [key: string]: string
 }
 
+type StringOrNumberKV = {
+  [key: string]: string | number
+}
+
 type WebSettings = {
   graphics: { name: string; index: number }[]
   schedulers: string[]
@@ -205,8 +209,8 @@ type LLMOutTextCallback = {
 
 type SDOutCallback =
   | LoadModelCallback
-  | LoadModelcomponentsCallback
-  | SDOutImagelCallback
+  | LoadModelComponentsCallback
+  | SDOutImageCallback
   | SDStepEndCallback
   | ErrorOutCallback
   | NotEnoughDiskSpaceExceptionCallback
@@ -229,17 +233,17 @@ type LoadModelCallback = {
   event: 'start' | 'finish'
 }
 
-type LoadModelcomponentsCallback = {
+type LoadModelComponentsCallback = {
   type: 'load_model_components'
   event: 'start' | 'finish'
 }
 
-type SDOutImagelCallback = {
+type SDOutImageCallback = {
   type: 'image_out'
   index: number
   image: string
   safe_check_pass: boolean
-  params: KVObject
+  params: StringOrNumberKV
 }
 
 type SDStepEndCallback = {
diff --git a/WebUI/src/lib/utils.ts b/WebUI/src/lib/utils.ts
index d1e33f80..4a1b2cba 100644
--- a/WebUI/src/lib/utils.ts
+++ b/WebUI/src/lib/utils.ts
@@ -64,7 +64,7 @@ export function mapServiceNameToDisplayName(serviceName: string) {
   }
 }
 
-export function mapModeToText(value: number) {
+export function mapModeToText(value: number | undefined) {
   const i18nState = useI18N().state
   switch (value) {
     case 0:

From 15ac31cd6248ecfa05a5adf860573d1c5126d2bc Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Thu, 6 Feb 2025 12:08:45 +0100
Subject: [PATCH 07/23] #58 - minor corrections to last commit

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/stableDiffusion.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 82302374..4562fe5d 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -29,8 +29,7 @@ type BackendParams = {
 
 type ImageInfoParams = {
   size: string
-  model_name: string
-} & Partial<BackendParams>
+} & BackendParams
 
 export const useStableDiffusion = defineStore(
   'stableDiffusion',
@@ -59,7 +58,10 @@ export const useStableDiffusion = defineStore(
           generate_number: imageGeneration.batchSize,
           inference_steps: imageGeneration.inferenceSteps,
           guidance_scale: imageGeneration.guidanceScale,
-          seed: imageGeneration.seed === -1 ? Math.random() * 1000000 : imageGeneration.seed,
+          seed:
+            imageGeneration.seed === -1
+              ? Math.floor(Math.random() * 1000000)
+              : imageGeneration.seed,
           height: imageGeneration.height,
           width: imageGeneration.width,
           lora: imageGeneration.lora,
@@ -133,7 +135,6 @@ export const useStableDiffusion = defineStore(
             createInfoParamTable({
               ...defaultBackendParams.value,
               size: String(data.params.size),
-              model_name: String(data.params.model_name),
             })
           await imageGeneration.updateImage(data.index, data.image, false, infoParams)
           break
@@ -216,7 +217,7 @@ export const useStableDiffusion = defineStore(
         size: infoParams.size,
         Device: infoParams.device,
         prompt: infoParams.prompt,
-        model_name: infoParams.model_name,
+        model_name: infoParams.model_repo_id,
         mode: mapModeToText(infoParams.mode),
         negative_prompt: infoParams.negative_prompt,
         inference_steps: infoParams.inference_steps,

From 9555dcfd42189b8081b3b3bcc00c2c09db0efa91 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Thu, 6 Feb 2025 18:12:23 +0100
Subject: [PATCH 08/23] #58 - add default info parameters for comfyui images

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/comfyUi.ts         | 253 +++++++++++--------
 WebUI/src/assets/js/store/imageGeneration.ts |   4 +-
 WebUI/src/assets/js/store/stableDiffusion.ts |  23 +-
 WebUI/src/env.d.ts                           |   4 +-
 4 files changed, 169 insertions(+), 115 deletions(-)

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index a7db54aa..2f5a311a 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -6,8 +6,85 @@ import * as toast from '../toast'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 import { useBackendServices } from '@/assets/js/store/backendServices.ts'
 
+type ImageInfoParams = {
+  default_inputs: KVObject
+  modifiable_settings: string[]
+  comfy_inputs: KVObject
+}
+
 const WEBSOCKET_OPEN = 1
 
+const settingToComfyInputsName = {
+  seed: ['seed', 'noise_seed'],
+  inferenceSteps: ['steps'],
+  height: ['height'],
+  width: ['width'],
+  prompt: ['text'],
+  negativePrompt: ['text'],
+  guidanceScale: ['cfg'],
+  scheduler: ['scheduler'],
+  batchSize: ['batch_size'],
+} satisfies Partial<Record<Setting, string[]>>
+
+type ComfySetting = keyof typeof settingToComfyInputsName
+
+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
+    const keys = Object.entries(workflow)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .filter(([_key, value]) => (value as any)?.['inputs']?.[inputName ?? ''] !== undefined)
+      .map(([key, _value]) => key)
+    if (keys.length > 0) return keys
+  }
+  return []
+}
+
+const getInputNameBySettingAndKey = (
+  workflow: ComfyUIApiWorkflow,
+  key: string,
+  setting: ComfySetting,
+) => {
+  for (const inputName of settingToComfyInputsName[setting]) {
+    if (workflow[key]?.inputs?.[inputName ?? '']) return inputName
+  }
+  return ''
+}
+
+function modifySettingInWorkflow(
+  workflow: ComfyUIApiWorkflow,
+  setting: ComfySetting,
+  value: unknown,
+) {
+  const keys =
+    findKeysByTitle(workflow, setting).length > 0
+      ? findKeysByTitle(workflow, setting)
+      : findKeysByInputsName(workflow, setting)
+  if (keys.length === 0) {
+    console.error(`No key found for setting ${setting}. Stopping generation`)
+    return
+  }
+  if (keys.length > 1) {
+    console.warn(`Multiple keys found for setting ${setting}. Using first one`)
+  }
+  const key = keys[0]
+  if (workflow[key]?.inputs?.[getInputNameBySettingAndKey(workflow, key, setting)] !== undefined) {
+    workflow[key].inputs[getInputNameBySettingAndKey(workflow, key, setting)] = value
+  }
+}
+
 export const useComfyUi = defineStore(
   'comfyUi',
   () => {
@@ -20,22 +97,25 @@ export const useComfyUi = defineStore(
     const websocket = ref<WebSocket | null>(null)
     const clientId = '12345'
     const loaderNodes = ref<string[]>([])
-    const pendingPrompts = ref<ComfyUiPrompt[]>([])
+    const imageInfoParams = ref<ImageInfoParams>({
+      default_inputs: {},
+      modifiable_settings: [],
+      comfy_inputs: {},
+    })
     const generateIdx = ref<number>(0)
 
     const backendServices = useBackendServices()
     const comfyUiState = computed(() => {
-      const comfyUiState = backendServices.info.find(
-        (item) => item.serviceName === 'comfyui-backend',
-      ) ?? {
-        serviceName: 'comfyui-backend',
-        status: 'uninitializedStatus',
-        baseUrl: '???',
-        port: -1,
-        isSetUp: false,
-        isRequired: false,
-      }
-      return comfyUiState
+      return (
+        backendServices.info.find((item) => item.serviceName === 'comfyui-backend') ?? {
+          serviceName: 'comfyui-backend',
+          status: 'uninitializedStatus',
+          baseUrl: '???',
+          port: -1,
+          isSetUp: false,
+          isRequired: false,
+        }
+      )
     })
 
     async function installCustomNodesForActiveWorkflowFully() {
@@ -194,16 +274,19 @@ export const useComfyUi = defineStore(
               case 'executed':
                 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,
-                )
+                const infoParams: StringOrNumberOrBooleanKV = createInfoParamTable({
+                  ...imageInfoParams.value,
+                  default_inputs: {
+                    ...imageInfoParams.value.default_inputs,
+                    seed: Number(imageInfoParams.value.default_inputs.seed) + generateIdx.value,
+                  },
+                })
                 imageGeneration.updateImage(
                   generateIdx.value,
                   `${comfyBaseUrl.value}/view?filename=${newImage.filename}&type=${newImage.type}&subfolder=${newImage.subfolder ?? ''}`,
                   false,
-                  pendingPrompts.value[promptIndex].prompt,
+                  infoParams,
                 )
-                pendingPrompts.value.splice(promptIndex, 1)
                 generateIdx.value++
                 console.log('executed', { detail: msg.data })
                 break
@@ -317,7 +400,8 @@ export const useComfyUi = defineStore(
         const mutableWorkflow: ComfyUIApiWorkflow = JSON.parse(
           JSON.stringify(imageGeneration.activeWorkflow.comfyUiApiWorkflow),
         )
-        const seed = imageGeneration.seed === -1 ? Math.random() * 1000000 : imageGeneration.seed
+        const seed =
+          imageGeneration.seed === -1 ? Math.floor(Math.random() * 1000000) : imageGeneration.seed
 
         modifySettingInWorkflow(mutableWorkflow, 'inferenceSteps', imageGeneration.inferenceSteps)
         modifySettingInWorkflow(mutableWorkflow, 'height', imageGeneration.height)
@@ -333,9 +417,22 @@ export const useComfyUi = defineStore(
           ...findKeysByClassType(mutableWorkflow, 'DualCLIPLoader (GGUF)'),
         ]
 
+        imageInfoParams.value = {
+          default_inputs: {
+            workflow_name: imageGeneration.activeWorkflow.name,
+            height: imageGeneration.height,
+            width: imageGeneration.width,
+            seed: seed,
+            prompt: imageGeneration.prompt,
+            negative_prompt: imageGeneration.negativePrompt,
+            inference_steps: imageGeneration.inferenceSteps,
+          },
+          modifiable_settings: imageGeneration.activeWorkflow.modifiableSettings,
+          comfy_inputs: imageGeneration.comfyInputs,
+        }
+
         for (let i = 0; i < imageGeneration.batchSize; i++) {
           modifySettingInWorkflow(mutableWorkflow, 'seed', `${(seed + i).toFixed(0)}`)
-
           const result = await fetch(`${comfyBaseUrl.value}/prompt`, {
             method: 'POST',
             headers: {
@@ -351,15 +448,7 @@ 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.')
@@ -385,9 +474,42 @@ export const useComfyUi = defineStore(
       })
     }
 
+    function createInfoParamTable(infoParams: ImageInfoParams) {
+      const infoParamsTable: StringOrNumberOrBooleanKV = {
+        ...extractDefaultParams(infoParams.default_inputs, infoParams.modifiable_settings),
+        ...extractComfyUiParams(infoParams.comfy_inputs),
+      }
+      return infoParamsTable
+    }
+
+    function extractDefaultParams(input: StringOrNumberOrBooleanKV, modSettings: string[]) {
+      const infoDefaultParamsTable: StringOrNumberOrBooleanKV = {
+        workflow_name: input.workflow_name,
+        prompt: input.prompt,
+      }
+      const mappings: StringOrNumberOrBooleanKV = {
+        resolution: input.width + 'x' + input.height,
+        seed: input.seed,
+        negativePrompt: input.negative_prompt,
+        inferenceSteps: input.inference_steps,
+      }
+      Object.keys(mappings).forEach((key) => {
+        if (modSettings.includes(key)) {
+          infoDefaultParamsTable[key] = mappings[key]
+        }
+      })
+      return infoDefaultParamsTable
+    }
+
+    function extractComfyUiParams(inputs: StringOrNumberOrBooleanKV) {
+      const infoComfyParamsTable: StringOrNumberOrBooleanKV = {}
+      //ToDo: Continue here
+      return infoComfyParamsTable
+    }
+
     function reset() {
       loaderNodes.value.length = 0
-      pendingPrompts.value.length = 0
+      imageInfoParams.value = { default_inputs: {}, modifiable_settings: [], comfy_inputs: {} }
       generateIdx.value = 0
     }
 
@@ -404,81 +526,6 @@ export const useComfyUi = defineStore(
   },
 )
 
-const settingToComfyInputsName = {
-  seed: ['seed', 'noise_seed'],
-  inferenceSteps: ['steps'],
-  height: ['height'],
-  width: ['width'],
-  prompt: ['text'],
-  negativePrompt: ['text'],
-  guidanceScale: ['cfg'],
-  scheduler: ['scheduler'],
-  batchSize: ['batch_size'],
-} satisfies Partial<Record<Setting, string[]>>
-
-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
-    const keys = Object.entries(workflow)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .filter(([_key, value]) => (value as any)?.['inputs']?.[inputName ?? ''] !== undefined)
-      .map(([key, _value]) => key)
-    if (keys.length > 0) return keys
-  }
-  return []
-}
-
-const getInputNameBySettingAndKey = (
-  workflow: ComfyUIApiWorkflow,
-  key: string,
-  setting: ComfySetting,
-) => {
-  for (const inputName of settingToComfyInputsName[setting]) {
-    if (workflow[key]?.inputs?.[inputName ?? '']) return inputName
-  }
-  return ''
-}
-
-function modifySettingInWorkflow(
-  workflow: ComfyUIApiWorkflow,
-  setting: ComfySetting,
-  value: unknown,
-) {
-  const keys =
-    findKeysByTitle(workflow, setting).length > 0
-      ? findKeysByTitle(workflow, setting)
-      : findKeysByInputsName(workflow, setting)
-  if (keys.length === 0) {
-    console.error(`No key found for setting ${setting}. Stopping generation`)
-    return
-  }
-  if (keys.length > 1) {
-    console.warn(`Multiple keys found for setting ${setting}. Using first one`)
-  }
-  const key = keys[0]
-  if (workflow[key]?.inputs?.[getInputNameBySettingAndKey(workflow, key, setting)] !== undefined) {
-    workflow[key].inputs[getInputNameBySettingAndKey(workflow, key, setting)] = value
-  }
-}
-
 if (import.meta.hot) {
   import.meta.hot.accept(acceptHMRUpdate(useComfyUi, import.meta.hot))
 }
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 5f76d15d..2c901d95 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -443,6 +443,7 @@ export const useImageGeneration = defineStore(
       inpaintModel,
     }
     type ModifiableSettings = keyof typeof settings
+
     const backend = computed({
       get() {
         return activeWorkflow.value.backend
@@ -602,7 +603,7 @@ export const useImageGeneration = defineStore(
       index: number,
       image: string,
       loading: boolean,
-      infoParams: KVObject | undefined = undefined,
+      infoParams: StringOrNumberOrBooleanKV | undefined = undefined,
     ) {
       const newImage: generatedImage = {
         id: index,
@@ -759,6 +760,7 @@ export const useImageGeneration = defineStore(
       currentState.value = 'no_start'
       stepText.value = ''
       previewIdx.value = 0
+      stableDiffusion.reset()
       comfyUi.reset()
     }
 
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 4562fe5d..4172e817 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -9,7 +9,7 @@ import { useI18N } from './i18n'
 import * as toast from '../toast'
 import { mapModeToText } from '@/lib/utils.ts'
 
-type BackendParams = {
+type DefaultBackendParams = {
   mode: number
   device: string
   prompt: string
@@ -29,7 +29,8 @@ type BackendParams = {
 
 type ImageInfoParams = {
   size: string
-} & BackendParams
+  output_seed: number
+} & DefaultBackendParams
 
 export const useStableDiffusion = defineStore(
   'stableDiffusion',
@@ -40,7 +41,7 @@ export const useStableDiffusion = defineStore(
     const models = useModels()
 
     let abortController: AbortController | null
-    const defaultBackendParams = ref<BackendParams>()
+    const defaultBackendParams = ref<DefaultBackendParams>()
 
     async function generate() {
       if (imageGeneration.processing) {
@@ -58,10 +59,7 @@ export const useStableDiffusion = defineStore(
           generate_number: imageGeneration.batchSize,
           inference_steps: imageGeneration.inferenceSteps,
           guidance_scale: imageGeneration.guidanceScale,
-          seed:
-            imageGeneration.seed === -1
-              ? Math.floor(Math.random() * 1000000)
-              : imageGeneration.seed,
+          seed: imageGeneration.seed,
           height: imageGeneration.height,
           width: imageGeneration.width,
           lora: imageGeneration.lora,
@@ -135,6 +133,7 @@ export const useStableDiffusion = defineStore(
             createInfoParamTable({
               ...defaultBackendParams.value,
               size: String(data.params.size),
+              output_seed: Number(data.params.seed),
             })
           await imageGeneration.updateImage(data.index, data.image, false, infoParams)
           break
@@ -212,7 +211,7 @@ export const useStableDiffusion = defineStore(
     }
 
     function createInfoParamTable(infoParams: ImageInfoParams) {
-      const infoParamsTable: KVObject = {
+      const infoParamsTable: StringOrNumberOrBooleanKV = {
         resolution: infoParams.width + 'x' + infoParams.height,
         size: infoParams.size,
         Device: infoParams.device,
@@ -222,17 +221,23 @@ export const useStableDiffusion = defineStore(
         negative_prompt: infoParams.negative_prompt,
         inference_steps: infoParams.inference_steps,
         guidance_scale: infoParams.guidance_scale,
-        seed: infoParams.seed,
+        seed: infoParams.output_seed,
         scheduler: infoParams.scheduler,
         lora: infoParams.lora,
         safe_check: infoParams.safe_check,
+        backend: 'Default',
       }
       return infoParamsTable
     }
 
+    function reset() {
+      defaultBackendParams.value = undefined
+    }
+
     return {
       generate,
       stop,
+      reset,
     }
   },
   {
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 8ea80d53..0c17a27a 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -128,8 +128,8 @@ type StringKV = {
   [key: string]: string
 }
 
-type StringOrNumberKV = {
-  [key: string]: string | number
+type StringOrNumberOrBooleanKV = {
+  [key: string]: string | number | boolean
 }
 
 type WebSettings = {

From 977cfb45dc8d7d1760a4e5a72da9e54f1c92d45d Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Fri, 7 Feb 2025 17:47:49 +0100
Subject: [PATCH 09/23] #58 - fix info table for ComfyUi

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/css/main.css                 |  7 +++
 WebUI/src/assets/i18n/en-US.json              |  5 +-
 WebUI/src/assets/js/store/comfyUi.ts          | 46 ++++++++++++-------
 WebUI/src/assets/js/store/imageGeneration.ts  |  2 +-
 WebUI/src/assets/js/store/stableDiffusion.ts  | 38 +++++++++++----
 WebUI/src/components/InfoTable.vue            | 11 +++--
 .../components/SettingsImageComfyDynamic.vue  | 12 ++---
 WebUI/src/lib/utils.ts                        |  4 ++
 8 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/WebUI/src/assets/css/main.css b/WebUI/src/assets/css/main.css
index 30e151c5..aca5d978 100644
--- a/WebUI/src/assets/css/main.css
+++ b/WebUI/src/assets/css/main.css
@@ -101,6 +101,13 @@ textarea {
     overflow-y: auto;
   }
 }
+
+.info-params-image {
+  max-width: 250px;
+  margin: 10px;
+  border: 1px solid white;
+}
+
 .enhance-content {
   display: flex;
   align-items: center;
diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index e6d5f2b4..ca307d36 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -244,5 +244,8 @@
   "LOADING_VERIFYING_BACKENDS": "Verifying backends",
   "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Loading",
 
-  "COM_RESET": "Reset"
+  "COM_RESET": "Reset",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Device"
 }
diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index 2f5a311a..e79a1172 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -5,11 +5,12 @@ import { useI18N } from './i18n'
 import * as toast from '../toast'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 import { useBackendServices } from '@/assets/js/store/backendServices.ts'
+import { getTranslationLabel } from '@/lib/utils.ts'
 
 type ImageInfoParams = {
   default_inputs: KVObject
   modifiable_settings: string[]
-  comfy_inputs: KVObject
+  comfy_inputs: KVObject[]
 }
 
 const WEBSOCKET_OPEN = 1
@@ -100,7 +101,7 @@ export const useComfyUi = defineStore(
     const imageInfoParams = ref<ImageInfoParams>({
       default_inputs: {},
       modifiable_settings: [],
-      comfy_inputs: {},
+      comfy_inputs: [],
     })
     const generateIdx = ref<number>(0)
 
@@ -274,7 +275,7 @@ export const useComfyUi = defineStore(
               case 'executed':
                 const newImage: { filename: string; type: string; subfolder: string } =
                   msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output')
-                const infoParams: StringOrNumberOrBooleanKV = createInfoParamTable({
+                const infoParams: KVObject = createInfoParamTable({
                   ...imageInfoParams.value,
                   default_inputs: {
                     ...imageInfoParams.value.default_inputs,
@@ -475,7 +476,7 @@ export const useComfyUi = defineStore(
     }
 
     function createInfoParamTable(infoParams: ImageInfoParams) {
-      const infoParamsTable: StringOrNumberOrBooleanKV = {
+      const infoParamsTable: KVObject = {
         ...extractDefaultParams(infoParams.default_inputs, infoParams.modifiable_settings),
         ...extractComfyUiParams(infoParams.comfy_inputs),
       }
@@ -483,33 +484,44 @@ export const useComfyUi = defineStore(
     }
 
     function extractDefaultParams(input: StringOrNumberOrBooleanKV, modSettings: string[]) {
-      const infoDefaultParamsTable: StringOrNumberOrBooleanKV = {
+      const defaultSettings: string[] = ['backend', 'workflow_name', 'prompt']
+      const mappingKeyToTranslatable: StringKV = {
+        backend: 'BACKEND',
+        workflow_name: 'SETTINGS_IMAGE_WORKFLOW',
+        prompt: 'INPUT_PROMPT',
+        resolution: 'SETTINGS_MODEL_IMAGE_RESOLUTION',
+        seed: 'SETTINGS_MODEL_SEED',
+        negativePrompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
+        inferenceSteps: 'SETTINGS_MODEL_IMAGE_STEPS',
+      }
+      const mappingKeyToInfoParams: StringOrNumberOrBooleanKV = {
+        backend: 'ComfyUI',
         workflow_name: input.workflow_name,
         prompt: input.prompt,
-      }
-      const mappings: StringOrNumberOrBooleanKV = {
         resolution: input.width + 'x' + input.height,
         seed: input.seed,
         negativePrompt: input.negative_prompt,
         inferenceSteps: input.inference_steps,
       }
-      Object.keys(mappings).forEach((key) => {
-        if (modSettings.includes(key)) {
-          infoDefaultParamsTable[key] = mappings[key]
-        }
-      })
-      return infoDefaultParamsTable
+      return Object.fromEntries(
+        Object.keys(mappingKeyToInfoParams)
+          .filter((key) => defaultSettings.includes(key) || modSettings.includes(key))
+          .map((key) => [mappingKeyToTranslatable[key], mappingKeyToInfoParams[key]]),
+      )
     }
 
-    function extractComfyUiParams(inputs: StringOrNumberOrBooleanKV) {
-      const infoComfyParamsTable: StringOrNumberOrBooleanKV = {}
-      //ToDo: Continue here
+    function extractComfyUiParams(inputs: KVObject[]) {
+      const infoComfyParamsTable: KVObject = {}
+      for (const input of inputs) {
+        infoComfyParamsTable[getTranslationLabel('SETTINGS_IMAGE_COMFY_', input.label)] =
+          input.type === 'image' ? input : input.current
+      }
       return infoComfyParamsTable
     }
 
     function reset() {
       loaderNodes.value.length = 0
-      imageInfoParams.value = { default_inputs: {}, modifiable_settings: [], comfy_inputs: {} }
+      imageInfoParams.value = { default_inputs: {}, modifiable_settings: [], comfy_inputs: [] }
       generateIdx.value = 0
     }
 
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 2c901d95..980410b4 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -603,7 +603,7 @@ export const useImageGeneration = defineStore(
       index: number,
       image: string,
       loading: boolean,
-      infoParams: StringOrNumberOrBooleanKV | undefined = undefined,
+      infoParams: KVObject | undefined = undefined,
     ) {
       const newImage: generatedImage = {
         id: index,
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 4172e817..2540336b 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -29,6 +29,7 @@ type DefaultBackendParams = {
 
 type ImageInfoParams = {
   size: string
+  model_name: string
   output_seed: number
 } & DefaultBackendParams
 
@@ -132,7 +133,8 @@ export const useStableDiffusion = defineStore(
             defaultBackendParams.value &&
             createInfoParamTable({
               ...defaultBackendParams.value,
-              size: String(data.params.size),
+              size: data.params.size,
+              model_name: data.params.model_name,
               output_seed: Number(data.params.seed),
             })
           await imageGeneration.updateImage(data.index, data.image, false, infoParams)
@@ -211,23 +213,43 @@ export const useStableDiffusion = defineStore(
     }
 
     function createInfoParamTable(infoParams: ImageInfoParams) {
-      const infoParamsTable: StringOrNumberOrBooleanKV = {
+      const mappingKeyToTranslatable: StringKV = {
+        backend: 'BACKEND',
+        model_name: 'DOWNLOADER_MODEL',
+        prompt: 'INPUT_PROMPT',
+        resolution: 'SETTINGS_MODEL_IMAGE_RESOLUTION',
+        Device: 'DEVICE',
+        size: 'SETTINGS_MODEL_IMAGE_SIZE',
+        seed: 'SETTINGS_MODEL_SEED',
+        negative_prompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
+        inference_steps: 'SETTINGS_MODEL_IMAGE_STEPS',
+        guidance_scale: 'SETTINGS_MODEL_IMAGE_CFG',
+        scheduler: 'SETTINGS_MODEL_SCHEDULER',
+        lora: 'SETTINGS_MODEL_LORA',
+        safe_check: 'SETTINGS_MODEL_SAFE_CHECK',
+      }
+      const mappingKeyToInfoParams: StringOrNumberOrBooleanKV = {
+        backend: 'Default',
+        model_name: infoParams.model_name,
+        prompt: infoParams.prompt,
         resolution: infoParams.width + 'x' + infoParams.height,
-        size: infoParams.size,
         Device: infoParams.device,
-        prompt: infoParams.prompt,
-        model_name: infoParams.model_repo_id,
         mode: mapModeToText(infoParams.mode),
+        size: infoParams.size,
+        seed: infoParams.output_seed,
         negative_prompt: infoParams.negative_prompt,
         inference_steps: infoParams.inference_steps,
         guidance_scale: infoParams.guidance_scale,
-        seed: infoParams.output_seed,
         scheduler: infoParams.scheduler,
         lora: infoParams.lora,
         safe_check: infoParams.safe_check,
-        backend: 'Default',
       }
-      return infoParamsTable
+      return Object.fromEntries(
+        Object.keys(mappingKeyToInfoParams).map((key) => [
+          mappingKeyToTranslatable[key],
+          mappingKeyToInfoParams[key],
+        ]),
+      )
     }
 
     function reset() {
diff --git a/WebUI/src/components/InfoTable.vue b/WebUI/src/components/InfoTable.vue
index 7cf8df7e..70aa78dc 100644
--- a/WebUI/src/components/InfoTable.vue
+++ b/WebUI/src/components/InfoTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="props.params" class="info-params absolute px-5 pt-8 pb-5 text-white">
+  <div v-if="props.params" class="info-params absolute px-5 pt-8 pb-5 text-white w-1000">
     <button
       class="w-5 h-5 svg-icon i-close absolute right-2 top-2"
       @click="emits('close')"
@@ -8,10 +8,13 @@
       <ul class="border border-color-spilter">
         <li
           v-for="(value, key) in props.params"
-          class="last:border-none border-b border-color-spilter flex items-start"
+          class="last:border-none border-b border-color-spilter flex items-center"
         >
-          <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{ key }}</span>
-          <span class="px-4 flex-auto break-word">{{ value }}</span>
+          <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{
+            languages[key]
+          }}</span>
+          <img v-if="value.type === 'image'" :src="value.current" class="info-params-image" />
+          <span v-else class="px-4 flex-auto break-word">{{ value }}</span>
         </li>
       </ul>
     </div>
diff --git a/WebUI/src/components/SettingsImageComfyDynamic.vue b/WebUI/src/components/SettingsImageComfyDynamic.vue
index 318537f3..fed2a3ed 100644
--- a/WebUI/src/components/SettingsImageComfyDynamic.vue
+++ b/WebUI/src/components/SettingsImageComfyDynamic.vue
@@ -4,7 +4,9 @@
     :key="`${input.nodeTitle}${input.nodeInput}`"
     class="flex flex-col gap-2 py-2"
   >
-    <p>{{ languages[getTranslationLabel(input.label)] ??= input.label }}</p>
+    <p>
+      {{ languages[getTranslationLabel('SETTINGS_IMAGE_COMFY_', input.label)] ??= input.label }}
+    </p>
 
     <!--    Number    -->
     <slide-bar
@@ -44,13 +46,7 @@ import { useImageGeneration } from '@/assets/js/store/imageGeneration'
 import { Input } from '../components/ui/input'
 import { LoadImage } from '../components/ui/loadImage'
 import SlideBar from '../components/SlideBar.vue'
+import { getTranslationLabel } from '@/lib/utils.ts'
 
 const imageGeneration = useImageGeneration()
-
-function getTranslationLabel(label: string) {
-  return (
-    'SETTINGS_IMAGE_COMFY_' +
-    label.replace(/ - /g, '_').replace(/-/g, '_').replace(/ /g, '_').toUpperCase()
-  )
-}
 </script>
diff --git a/WebUI/src/lib/utils.ts b/WebUI/src/lib/utils.ts
index 4a1b2cba..4f127057 100644
--- a/WebUI/src/lib/utils.ts
+++ b/WebUI/src/lib/utils.ts
@@ -81,3 +81,7 @@ export function mapModeToText(value: number | undefined) {
       return 'unknown'
   }
 }
+
+export function getTranslationLabel(prefix: string, label: string) {
+  return prefix + label.replace(/ - /g, '_').replace(/-/g, '_').replace(/ /g, '_').toUpperCase()
+}

From ae426d9799f132de9aff7a241ddccd278bd33bb1 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 10 Feb 2025 12:58:55 +0100
Subject: [PATCH 10/23] #58 - keep images for the next generation cycle

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/package-lock.json                      | 14 +++++++++++
 WebUI/package.json                           |  1 +
 WebUI/src/assets/css/main.css                |  2 ++
 WebUI/src/assets/js/store/imageGeneration.ts | 26 +++++++++++++-------
 WebUI/src/views/Create.vue                   | 15 +++++++----
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/WebUI/package-lock.json b/WebUI/package-lock.json
index de2bff74..3b40df77 100644
--- a/WebUI/package-lock.json
+++ b/WebUI/package-lock.json
@@ -29,6 +29,7 @@
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
         "unplugin-auto-import": "^0.18.6",
+        "uuid": "^11.0.5",
         "vue": "^3.5.12",
         "zod": "^3.24.1"
       },
@@ -10578,6 +10579,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
+      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/WebUI/package.json b/WebUI/package.json
index 33167753..c7e55158 100644
--- a/WebUI/package.json
+++ b/WebUI/package.json
@@ -39,6 +39,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "unplugin-auto-import": "^0.18.6",
+    "uuid": "^11.0.5",
     "vue": "^3.5.12",
     "zod": "^3.24.1"
   },
diff --git a/WebUI/src/assets/css/main.css b/WebUI/src/assets/css/main.css
index aca5d978..525b690e 100644
--- a/WebUI/src/assets/css/main.css
+++ b/WebUI/src/assets/css/main.css
@@ -155,8 +155,10 @@ textarea {
 .image-preview-panel {
   width: 129px;
   height: 100%;
+  max-height: 550px;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
   padding: 8px;
   gap: 14px;
   background-color: var(--color-image-bg);
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 980410b4..ee7160e1 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -6,9 +6,10 @@ import { useI18N } from './i18n'
 import * as Const from '../const'
 import { useGlobalSetup } from './globalSetup'
 import * as toast from '@/assets/js/toast.ts'
+import { v4 as uuidv4 } from 'uuid'
 
 export type generatedImage = {
-  id: number
+  id: number | string
   imageUrl: string
   isLoading: boolean
   infoParams: KVObject | undefined
@@ -744,19 +745,16 @@ export const useImageGeneration = defineStore(
       comfyUi.stop()
     }
 
-    function deleteImage(id: number | undefined) {
+    function deleteImage(id: number | string | undefined) {
       if (id !== undefined) {
-        let index = generatedImages.value.findIndex((item) => item.id === id)
+        const index = generatedImages.value.findIndex((item) => item.id === id)
         generatedImages.value.splice(index, 1)
-        if (index === generatedImages.value.length && index !== 0) {
-          index--
-        }
-        previewIdx.value = generatedImages.value[index].id
+        previewIdx.value = generatedImages.value[Math.max(0, index - 1)].id
       }
     }
 
-    function reset() {
-      generatedImages.value.length = 0
+    function reset(deleteAllImages: boolean) {
+      storeGeneratedImages(deleteAllImages)
       currentState.value = 'no_start'
       stepText.value = ''
       previewIdx.value = 0
@@ -764,6 +762,16 @@ export const useImageGeneration = defineStore(
       comfyUi.reset()
     }
 
+    function storeGeneratedImages(deleteAllImages: boolean): void {
+      if (deleteAllImages) {
+        generatedImages.value.length = 0
+      }
+      generatedImages.value = generatedImages.value.filter((item) => item.isLoading === false)
+      generatedImages.value.forEach((item) => {
+        item.id = uuidv4()
+      })
+    }
+
     loadWorkflowsFromJson()
 
     return {
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index e4528a16..856cbab0 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -49,10 +49,11 @@
             </div>
           </div>
           <div
-            v-show="currentImage && !currentImage.isLoading"
+            v-show="currentImage && (!currentImage.isLoading || !imageGeneration.processing)"
             class="absolute bottom-0 -right-8 box-content flex flex-col items-center justify-center gap-2"
           >
             <button
+              v-show="currentImage && !currentImage.isLoading"
               @click="postImageToEnhance"
               :title="languages.COM_POST_TO_ENHANCE_PROCESS"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -60,6 +61,7 @@
               <span class="svg-icon text-white i-transfer w-4 h-4"></span>
             </button>
             <button
+              v-show="currentImage && !currentImage.isLoading"
               @click="showParamsDialog"
               :title="languages.COM_OPEN_PARAMS"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -67,6 +69,7 @@
               <span class="svg-icon text-white i-info w-4 h-4"></span>
             </button>
             <button
+              v-show="currentImage && !currentImage.isLoading"
               @click="openImage"
               :title="languages.COM_ZOOM_IN"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -74,6 +77,7 @@
               <span class="svg-icon text-white i-zoom-in w-4 h-4"></span>
             </button>
             <button
+              v-show="currentImage && !currentImage.isLoading"
               @click="copyImage"
               :title="languages.COM_COPY"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -81,6 +85,7 @@
               <span class="svg-icon text-white i-copy w-4 h-4"></span>
             </button>
             <button
+              v-show="currentImage && !currentImage.isLoading"
               @click="openImageInFolder"
               :title="languages.COM_OPEN_LOCATION"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -96,7 +101,7 @@
             </button>
             <button
               v-show="!imageGeneration.processing"
-              @click="reset"
+              @click="reset(true)"
               :title="languages.COM_RESET"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
             >
@@ -173,7 +178,7 @@ const emits = defineEmits<{
 
 async function generateImage() {
   await ensureModelsAreAvailable()
-  reset()
+  reset(false)
   const inferenceBackendService: BackendServiceName =
     imageGeneration.backend === 'comfyui' ? 'comfyui-backend' : 'ai-backend'
   await globalSetup.resetLastUsedInferenceBackend(inferenceBackendService)
@@ -219,9 +224,9 @@ function deleteImage() {
   imageGeneration.deleteImage(currentImage.value?.id)
 }
 
-function reset() {
+function reset(deleteAllImages: boolean) {
   downloadModel.downloading = false
   showInfoParams.value = false
-  imageGeneration.reset()
+  imageGeneration.reset(deleteAllImages)
 }
 </script>

From 0af881327c7158071e1f69537f355994054cfb02 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 10 Feb 2025 13:29:48 +0100
Subject: [PATCH 11/23] #58 - minor correction

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/stableDiffusion.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 2540336b..f736859f 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -234,7 +234,6 @@ export const useStableDiffusion = defineStore(
         prompt: infoParams.prompt,
         resolution: infoParams.width + 'x' + infoParams.height,
         Device: infoParams.device,
-        mode: mapModeToText(infoParams.mode),
         size: infoParams.size,
         seed: infoParams.output_seed,
         negative_prompt: infoParams.negative_prompt,

From e1cf857d867acf62ff1cf9be998e0455538e15d9 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 10 Feb 2025 16:36:49 +0100
Subject: [PATCH 12/23] #58 - move reset button to side panel

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/css/main.css |  5 ++--
 WebUI/src/views/Create.vue    | 47 ++++++++++++++++++++---------------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/WebUI/src/assets/css/main.css b/WebUI/src/assets/css/main.css
index 525b690e..8dbc0cd6 100644
--- a/WebUI/src/assets/css/main.css
+++ b/WebUI/src/assets/css/main.css
@@ -153,9 +153,8 @@ textarea {
 }
 
 .image-preview-panel {
-  width: 129px;
-  height: 100%;
-  max-height: 550px;
+  width: 140px;
+  height: 560px;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 856cbab0..8c7c2971 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -1,19 +1,34 @@
 <template>
   <div id="createPanel" class="h-full flex flex-col p-4">
-    <div class="image-panel flex-auto flex p-4">
-      <div v-if="imageGeneration.generatedImages.length > 0" class="image-preview-panel flex-none">
-        <!-- eslint-disable vue/require-v-for-key -->
-        <div
-          v-for="image in imageGeneration.generatedImages"
-          class="image-preview-item flex items-center justify-center"
-          :class="{ active: imageGeneration.previewIdx === image.id }"
-          @click="imageGeneration.previewIdx = image.id"
-        >
-          <!-- eslint-enable -->
-          <div class="image-preview-item-bg">
-            <img :src="image.imageUrl" class="image-thumb" />
+    <div class="image-panel justify-center items-center flex-auto flex h-full">
+      <div
+        v-show="imageGeneration.generatedImages.length > 0"
+        class="flex flex-row justify-center items-end"
+      >
+        <div class="image-preview-panel">
+          <!-- eslint-disable vue/require-v-for-key -->
+          <div
+            v-for="image in imageGeneration.generatedImages"
+            class="image-preview-item flex items-center justify-center"
+            :class="{ active: imageGeneration.previewIdx === image.id }"
+            @click="imageGeneration.previewIdx = image.id"
+          >
+            <!-- eslint-enable -->
+            <div class="image-preview-item-bg">
+              <img :src="image.imageUrl" class="image-thumb" />
+            </div>
           </div>
         </div>
+        <div class="items-end justify-end">
+          <button
+            @click="reset(true)"
+            :title="languages.COM_RESET"
+            :disabled="imageGeneration.processing"
+            class="bg-color-image-tool-button rounded-sm w-6 h-6 ml-2 flex items-center justify-center"
+          >
+            <span class="svg-icon text-white i-reset w-4 h-4"></span>
+          </button>
+        </div>
       </div>
       <div class="flex-auto relative flex items-center justify-center">
         <div
@@ -99,14 +114,6 @@
             >
               <span class="svg-icon text-white i-delete w-4 h-4"></span>
             </button>
-            <button
-              v-show="!imageGeneration.processing"
-              @click="reset(true)"
-              :title="languages.COM_RESET"
-              class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
-            >
-              <span class="svg-icon text-white i-reset w-4 h-4"></span>
-            </button>
           </div>
         </div>
         <info-table

From ed48782db868d6cf2e7a554abfc9aab336b30448 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 11 Feb 2025 10:05:04 +0100
Subject: [PATCH 13/23] #58 - minor changes

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/css/main.css | 2 +-
 WebUI/src/views/Create.vue    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/WebUI/src/assets/css/main.css b/WebUI/src/assets/css/main.css
index 8dbc0cd6..e6d1ed3d 100644
--- a/WebUI/src/assets/css/main.css
+++ b/WebUI/src/assets/css/main.css
@@ -154,7 +154,7 @@ textarea {
 
 .image-preview-panel {
   width: 140px;
-  height: 560px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 8c7c2971..6c77e30f 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -1,9 +1,10 @@
 <template>
   <div id="createPanel" class="h-full flex flex-col p-4">
-    <div class="image-panel justify-center items-center flex-auto flex h-full">
+    <div class="image-panel justify-center items-center flex-auto flex">
       <div
         v-show="imageGeneration.generatedImages.length > 0"
-        class="flex flex-row justify-center items-end"
+        class="flex flex-row justify-center items-end h-full"
+        style="height: 550px !important"
       >
         <div class="image-preview-panel">
           <!-- eslint-disable vue/require-v-for-key -->

From 4c5dbff885968a413ee2b2e0e43733710bc40729 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 11 Feb 2025 14:49:04 +0100
Subject: [PATCH 14/23] #58 - exchanged reset token

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/i18n/en-US.json | 2 +-
 WebUI/src/views/Create.vue       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index ca307d36..40ed1546 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -244,7 +244,7 @@
   "LOADING_VERIFYING_BACKENDS": "Verifying backends",
   "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Loading",
 
-  "COM_RESET": "Reset",
+  "COM_CLEAR_HISTORY": "Clear History",
   "INPUT_PROMPT": "Prompt",
   "BACKEND": "Backend",
   "DEVICE": "Device"
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 6c77e30f..ec4b90eb 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -23,11 +23,11 @@
         <div class="items-end justify-end">
           <button
             @click="reset(true)"
-            :title="languages.COM_RESET"
+            :title="languages.COM_CLEAR_HISTORY"
             :disabled="imageGeneration.processing"
             class="bg-color-image-tool-button rounded-sm w-6 h-6 ml-2 flex items-center justify-center"
           >
-            <span class="svg-icon text-white i-reset w-4 h-4"></span>
+            <span class="svg-icon text-white i-clear w-4 h-4"></span>
           </button>
         </div>
       </div>

From 3887ad3b21e23fb90cdf0c251bc1c811aaff2565 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Wed, 12 Feb 2025 13:00:55 +0100
Subject: [PATCH 15/23] #58 - linter changes

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/stableDiffusion.ts | 1 -
 WebUI/src/components/InfoTable.vue           | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index f736859f..93bd5e4b 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -7,7 +7,6 @@ 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 DefaultBackendParams = {
   mode: number
diff --git a/WebUI/src/components/InfoTable.vue b/WebUI/src/components/InfoTable.vue
index 70aa78dc..2fa4ea2e 100644
--- a/WebUI/src/components/InfoTable.vue
+++ b/WebUI/src/components/InfoTable.vue
@@ -9,6 +9,7 @@
         <li
           v-for="(value, key) in props.params"
           class="last:border-none border-b border-color-spilter flex items-center"
+          :key="key"
         >
           <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{
             languages[key]

From 52d7a2581e8b75d0bf8aa6c76251057ad66b7927 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 17 Feb 2025 12:30:28 +0200
Subject: [PATCH 16/23] #58 - refactoring after Dev Review - part I

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/electron/main.ts                       |  2 +-
 WebUI/electron/preload.ts                    |  2 +-
 WebUI/src/assets/js/store/comfyUi.ts         | 25 ++++++++-----
 WebUI/src/assets/js/store/imageGeneration.ts | 33 ++++-------------
 WebUI/src/assets/js/store/stableDiffusion.ts | 18 ++++++++--
 WebUI/src/env.d.ts                           |  2 +-
 WebUI/src/views/Create.vue                   | 37 ++++++++++++--------
 WebUI/src/views/Enhance.vue                  |  6 ++--
 8 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/WebUI/electron/main.ts b/WebUI/electron/main.ts
index 09fed00c..2ed2e8d2 100644
--- a/WebUI/electron/main.ts
+++ b/WebUI/electron/main.ts
@@ -523,7 +523,7 @@ function initEventHandle() {
     shell.openPath(imagePath)
   })
 
-  ipcMain.on('selectedImage', (_event, url: string) => {
+  ipcMain.on('openImageInFolder', (_event, url: string) => {
     const imagePath = getImagePathFromUrl(url)
     if (!imagePath) return
 
diff --git a/WebUI/electron/preload.ts b/WebUI/electron/preload.ts
index fdc9353b..a8b34f01 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),
-  selectedImage: (url: string) => ipcRenderer.send('selectedImage', url),
+  openImageInFolder: (url: string) => ipcRenderer.send('openImageInFolder', 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 e79a1172..7f36e9f6 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -1,6 +1,6 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { WebSocket } from 'partysocket'
-import { ComfyUIApiWorkflow, Setting, useImageGeneration } from './imageGeneration'
+import { ComfyUIApiWorkflow, GeneratedImage, Setting, useImageGeneration } from './imageGeneration'
 import { useI18N } from './i18n'
 import * as toast from '../toast'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
@@ -246,7 +246,13 @@ export const useComfyUi = defineStore(
                 const imageUrl = URL.createObjectURL(imageBlob)
                 console.log('image url', imageUrl)
                 if (imageBlob) {
-                  imageGeneration.updateImage(generateIdx.value, imageUrl, true)
+                  const updatedImage: GeneratedImage = {
+                    id: generateIdx.value,
+                    imageUrl: imageUrl,
+                    isLoading: true,
+                    infoParams: undefined,
+                  }
+                  imageGeneration.updateImage(updatedImage)
                 }
                 break
               default:
@@ -273,7 +279,7 @@ export const useComfyUi = defineStore(
                 }
                 break
               case 'executed':
-                const newImage: { filename: string; type: string; subfolder: string } =
+                const imageFromOutput: { filename: string; type: string; subfolder: string } =
                   msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output')
                 const infoParams: KVObject = createInfoParamTable({
                   ...imageInfoParams.value,
@@ -282,12 +288,13 @@ export const useComfyUi = defineStore(
                     seed: Number(imageInfoParams.value.default_inputs.seed) + generateIdx.value,
                   },
                 })
-                imageGeneration.updateImage(
-                  generateIdx.value,
-                  `${comfyBaseUrl.value}/view?filename=${newImage.filename}&type=${newImage.type}&subfolder=${newImage.subfolder ?? ''}`,
-                  false,
-                  infoParams,
-                )
+                const newImage: GeneratedImage = {
+                  id: generateIdx.value,
+                  imageUrl: `${comfyBaseUrl.value}/view?filename=${imageFromOutput.filename}&type=${imageFromOutput.type}&subfolder=${imageFromOutput.subfolder ?? ''}`,
+                  isLoading: false,
+                  infoParams: infoParams,
+                }
+                imageGeneration.updateImage(newImage)
                 generateIdx.value++
                 console.log('executed', { detail: msg.data })
                 break
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index ee7160e1..246d317d 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -8,7 +8,7 @@ import { useGlobalSetup } from './globalSetup'
 import * as toast from '@/assets/js/toast.ts'
 import { v4 as uuidv4 } from 'uuid'
 
-export type generatedImage = {
+export type GeneratedImage = {
   id: number | string
   imageUrl: string
   isLoading: boolean
@@ -397,7 +397,7 @@ export const useImageGeneration = defineStore(
     const seed = ref<number>(generalDefaultSettings.seed)
     const imagePreview = ref<boolean>(generalDefaultSettings.imagePreview)
     const safeCheck = ref<boolean>(generalDefaultSettings.safeCheck)
-    const batchSize = ref<number>(globalDefaultSettings.batchSize)
+    const batchSize = ref<number>(globalDefaultSettings.batchSize) // TODO this should be imageCount instead, as we only support batchSize 1 due to memory constraints
 
     const resetActiveWorkflowSettings = () => {
       prompt.value = generalDefaultSettings.prompt
@@ -566,10 +566,9 @@ export const useImageGeneration = defineStore(
       saveToSettingsPerWorkflow('inpaintModel')
     })
 
-    const generatedImages = ref<generatedImage[]>([])
+    const generatedImages = ref<GeneratedImage[]>([])
     const currentState = ref<SDGenerateState>('no_start')
     const stepText = ref('')
-    const previewIdx = ref<string | number>(0)
 
     function loadSettingsForActiveWorkflow() {
       console.log('loading settings for', activeWorkflowName.value)
@@ -600,24 +599,12 @@ export const useImageGeneration = defineStore(
       getSavedOrDefault('inpaintModel')
     }
 
-    async function updateImage(
-      index: number,
-      image: string,
-      loading: boolean,
-      infoParams: KVObject | undefined = undefined,
-    ) {
-      const newImage: generatedImage = {
-        id: index,
-        imageUrl: image,
-        isLoading: loading,
-        infoParams: infoParams,
-      }
+    async function updateImage(newImage: GeneratedImage) {
       const existingImageIndex = generatedImages.value.findIndex((img) => img.id === newImage.id)
       if (existingImageIndex !== -1) {
         generatedImages.value.splice(existingImageIndex, 1, newImage)
       } else {
         generatedImages.value.push(newImage)
-        previewIdx.value = newImage.id
       }
     }
 
@@ -731,7 +718,6 @@ export const useImageGeneration = defineStore(
     }
 
     async function generate() {
-      previewIdx.value = 0
       stepText.value = i18nState.COM_GENERATING
       if (activeWorkflow.value.backend === 'default') {
         await stableDiffusion.generate()
@@ -745,19 +731,15 @@ export const useImageGeneration = defineStore(
       comfyUi.stop()
     }
 
-    function deleteImage(id: number | string | undefined) {
-      if (id !== undefined) {
-        const index = generatedImages.value.findIndex((item) => item.id === id)
-        generatedImages.value.splice(index, 1)
-        previewIdx.value = generatedImages.value[Math.max(0, index - 1)].id
-      }
+    function deleteImage(id: number | string) {
+      generatedImages.value = generatedImages.value.filter((image) => image.id !== id)
     }
 
+    // ToDo: Refactor
     function reset(deleteAllImages: boolean) {
       storeGeneratedImages(deleteAllImages)
       currentState.value = 'no_start'
       stepText.value = ''
-      previewIdx.value = 0
       stableDiffusion.reset()
       comfyUi.reset()
     }
@@ -786,7 +768,6 @@ export const useImageGeneration = defineStore(
       currentState,
       stepText,
       stopping,
-      previewIdx,
       imageModel,
       inpaintModel,
       lora,
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 93bd5e4b..b5ac6190 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { useImageGeneration } from './imageGeneration'
+import { GeneratedImage, useImageGeneration } from './imageGeneration'
 import { useGlobalSetup } from './globalSetup'
 import * as Const from '../const'
 import { useModels } from './models'
@@ -136,14 +136,26 @@ export const useStableDiffusion = defineStore(
               model_name: data.params.model_name,
               output_seed: Number(data.params.seed),
             })
-          await imageGeneration.updateImage(data.index, data.image, false, infoParams)
+          const newImage: GeneratedImage = {
+            id: data.index,
+            imageUrl: data.image,
+            isLoading: false,
+            infoParams: infoParams,
+          }
+          await imageGeneration.updateImage(newImage)
           break
 
         case 'step_end':
           imageGeneration.currentState = 'generating'
           imageGeneration.stepText = `${i18nState.COM_GENERATING} ${data.step}/${data.total_step}`
+          const updatedImage: GeneratedImage = {
+            id: data.index,
+            imageUrl: data.image ?? '',
+            isLoading: true,
+            infoParams: undefined,
+          }
           if (data.image) {
-            await imageGeneration.updateImage(data.index, data.image, true)
+            await imageGeneration.updateImage(updatedImage)
           }
           break
         case 'load_model':
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 0c17a27a..eaa7931b 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -57,7 +57,7 @@ type electronAPI = {
   getDownloadedGGUFLLMs(): Promise<string[]>
   getDownloadedEmbeddingModels(): Promise<string[]>
   openImageWithSystem(url: string): void
-  selectedImage(url: string): void
+  openImageInFolder(url: string): void
   setFullScreen(enable: boolean): void
   onDebugLog(
     callback: (data: {
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index ec4b90eb..a923075e 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -11,8 +11,8 @@
           <div
             v-for="image in imageGeneration.generatedImages"
             class="image-preview-item flex items-center justify-center"
-            :class="{ active: imageGeneration.previewIdx === image.id }"
-            @click="imageGeneration.previewIdx = image.id"
+            :class="{ active: selectedImageId === image.id }"
+            @click="selectedImageId = image.id"
           >
             <!-- eslint-enable -->
             <div class="image-preview-item-bg">
@@ -40,7 +40,7 @@
             v-for="image in imageGeneration.generatedImages"
             :src="image.imageUrl"
             class="p-1 max-w-768px max-h-512px"
-            v-show="imageGeneration.previewIdx === image.id"
+            v-show="selectedImageId === image.id"
           />
           <!-- eslint-enable -->
           <div
@@ -159,21 +159,31 @@ import * as toast from '@/assets/js/toast'
 import * as util from '@/assets/js/util'
 import LoadingBar from '../components/LoadingBar.vue'
 import InfoTable from '@/components/InfoTable.vue'
-import { generatedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
+import { GeneratedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 
 const imageGeneration = useImageGeneration()
 const globalSetup = useGlobalSetup()
 const i18nState = useI18N().state
-const downloadModel = reactive({
-  downloading: false,
-  text: '',
-  percent: 0,
-})
 const showInfoParams = ref(false)
-const currentImage: ComputedRef<generatedImage | undefined> = computed(() => {
-  return imageGeneration.generatedImages.find((image) => image.id === imageGeneration.previewIdx)
+const selectedImageId = ref<string | number | null>(null) //ToDo: Change when only allowing strings as ID
+const currentImage: ComputedRef<GeneratedImage | null> = computed(() => {
+  return imageGeneration.generatedImages.find((image) => image.id === selectedImageId.value) ?? null
 })
+watch(
+  () => imageGeneration.generatedImages.length,
+  () => {
+    const numberOfImages = imageGeneration.generatedImages.length
+    if (numberOfImages > 0) {
+      //ToDo: Make sure it does not jump somewhere else if a picture gets deleted
+      selectedImageId.value = imageGeneration.generatedImages[numberOfImages - 1].id
+    } else {
+      selectedImageId.value = null
+    }
+    showInfoParams.value = false
+  },
+)
+
 const emits = defineEmits<{
   (
     e: 'showDownloadModelConfirm',
@@ -225,15 +235,14 @@ function copyImage() {
 }
 
 function openImageInFolder() {
-  window.electronAPI.selectedImage(currentImage.value?.imageUrl ?? '')
+  window.electronAPI.openImageInFolder(currentImage.value?.imageUrl ?? '')
 }
 
 function deleteImage() {
-  imageGeneration.deleteImage(currentImage.value?.id)
+  currentImage.value && imageGeneration.deleteImage(currentImage.value.id)
 }
 
 function reset(deleteAllImages: boolean) {
-  downloadModel.downloading = false
   showInfoParams.value = false
   imageGeneration.reset(deleteAllImages)
 }
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index 197a38c5..fb58263f 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -164,7 +164,7 @@
             </button>
             <button
               v-show="previewIdx != -1 && previewIdx <= generateFinishIdx"
-              @click="selectedImage"
+              @click="openImageInFolder"
               :title="languages.COM_OPEN_LOCATION"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
             >
@@ -695,9 +695,9 @@ function copyImage() {
   util.copyImage(destImg.value[previewIdx.value])
 }
 
-async function selectedImage() {
+async function openImageInFolder() {
   const url = destImg.value[previewIdx.value]
-  window.electronAPI.selectedImage(url)
+  window.electronAPI.openImageInFolder(url)
 }
 
 function removeImage() {

From f3d611919f58514794bb10576c3ea8dbbb885ec4 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 17 Feb 2025 18:51:36 +0200
Subject: [PATCH 17/23] #58 - refactoring after Dev Review - part II

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/comfyUi.ts         | 100 +++++++++----------
 WebUI/src/assets/js/store/imageGeneration.ts |  37 +++++--
 WebUI/src/assets/js/store/stableDiffusion.ts |  44 ++------
 WebUI/src/components/InfoTable.vue           |  11 +-
 WebUI/src/components/PaintInfo.vue           |  54 ----------
 WebUI/src/env.d.ts                           |   4 -
 WebUI/src/views/Create.vue                   |   2 +-
 WebUI/src/views/Enhance.vue                  |  11 +-
 8 files changed, 105 insertions(+), 158 deletions(-)
 delete mode 100644 WebUI/src/components/PaintInfo.vue

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index 7f36e9f6..2fafb188 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -1,16 +1,27 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { WebSocket } from 'partysocket'
-import { ComfyUIApiWorkflow, GeneratedImage, Setting, useImageGeneration } from './imageGeneration'
+import {
+  ComfyDynamicInput,
+  ComfyUIApiWorkflow,
+  GeneratedImage,
+  ImageInfoParameter,
+  Setting,
+  useImageGeneration,
+} from './imageGeneration'
 import { useI18N } from './i18n'
 import * as toast from '../toast'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 import { useBackendServices } from '@/assets/js/store/backendServices.ts'
 import { getTranslationLabel } from '@/lib/utils.ts'
+import { DefaultBackendParams } from '@/assets/js/store/imageGeneration.ts'
 
-type ImageInfoParams = {
-  default_inputs: KVObject
-  modifiable_settings: string[]
-  comfy_inputs: KVObject[]
+type DefaultBackendParamsWithName = Partial<DefaultBackendParams & { workflow_name: string }>
+type ComfyDynamicInputWithCurrent = ComfyDynamicInput & { current: string | number | boolean }
+
+type ImageInfoParamsComfy = {
+  defaultInputs: DefaultBackendParamsWithName
+  modifiableSettings: string[]
+  comfyInputs: ComfyDynamicInputWithCurrent[]
 }
 
 const WEBSOCKET_OPEN = 1
@@ -92,31 +103,22 @@ export const useComfyUi = defineStore(
     const imageGeneration = useImageGeneration()
     const globalSetup = useGlobalSetup()
     const i18nState = useI18N().state
-    const comfyPort = computed(() => comfyUiState.value.port)
-    const comfyBaseUrl = computed(() => comfyUiState.value.baseUrl)
+    const comfyPort = computed(() => comfyUiState.value?.port ?? -1)
+    const comfyBaseUrl = computed(() => comfyUiState.value?.baseUrl ?? '')
 
     const websocket = ref<WebSocket | null>(null)
     const clientId = '12345'
     const loaderNodes = ref<string[]>([])
-    const imageInfoParams = ref<ImageInfoParams>({
-      default_inputs: {},
-      modifiable_settings: [],
-      comfy_inputs: [],
-    })
+    let imageInfoParams: ImageInfoParamsComfy = {
+      defaultInputs: {},
+      modifiableSettings: [],
+      comfyInputs: [],
+    }
     const generateIdx = ref<number>(0)
 
     const backendServices = useBackendServices()
     const comfyUiState = computed(() => {
-      return (
-        backendServices.info.find((item) => item.serviceName === 'comfyui-backend') ?? {
-          serviceName: 'comfyui-backend',
-          status: 'uninitializedStatus',
-          baseUrl: '???',
-          port: -1,
-          isSetUp: false,
-          isRequired: false,
-        }
-      )
+      return backendServices.info.find((item) => item.serviceName === 'comfyui-backend') ?? null
     })
 
     async function installCustomNodesForActiveWorkflowFully() {
@@ -212,7 +214,7 @@ export const useComfyUi = defineStore(
     }
 
     function connectToComfyUi() {
-      if (comfyUiState.value.status !== 'running') {
+      if (comfyUiState.value?.status !== 'running') {
         console.warn('ComfyUI backend not running, cannot start websocket')
         return
       }
@@ -281,11 +283,11 @@ export const useComfyUi = defineStore(
               case 'executed':
                 const imageFromOutput: { filename: string; type: string; subfolder: string } =
                   msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output')
-                const infoParams: KVObject = createInfoParamTable({
-                  ...imageInfoParams.value,
-                  default_inputs: {
-                    ...imageInfoParams.value.default_inputs,
-                    seed: Number(imageInfoParams.value.default_inputs.seed) + generateIdx.value,
+                const infoParams: ImageInfoParameter = createInfoParamTable({
+                  ...imageInfoParams,
+                  defaultInputs: {
+                    ...imageInfoParams.defaultInputs,
+                    seed: Number(imageInfoParams.defaultInputs.seed) + generateIdx.value,
                   },
                 })
                 const newImage: GeneratedImage = {
@@ -323,7 +325,7 @@ export const useComfyUi = defineStore(
     }
 
     watchEffect(() => {
-      if (comfyPort && comfyUiState.value.status === 'running') {
+      if (comfyPort && comfyUiState.value?.status === 'running') {
         connectToComfyUi()
       }
     })
@@ -425,8 +427,8 @@ export const useComfyUi = defineStore(
           ...findKeysByClassType(mutableWorkflow, 'DualCLIPLoader (GGUF)'),
         ]
 
-        imageInfoParams.value = {
-          default_inputs: {
+        imageInfoParams = {
+          defaultInputs: {
             workflow_name: imageGeneration.activeWorkflow.name,
             height: imageGeneration.height,
             width: imageGeneration.width,
@@ -435,10 +437,13 @@ export const useComfyUi = defineStore(
             negative_prompt: imageGeneration.negativePrompt,
             inference_steps: imageGeneration.inferenceSteps,
           },
-          modifiable_settings: imageGeneration.activeWorkflow.modifiableSettings,
-          comfy_inputs: imageGeneration.comfyInputs,
+          modifiableSettings: imageGeneration.activeWorkflow.modifiableSettings,
+          comfyInputs: imageGeneration.comfyInputs.map((i) => ({
+            ...i,
+            current: i.current.value,
+          })),
         }
-
+        generateIdx.value = 0
         for (let i = 0; i < imageGeneration.batchSize; i++) {
           modifySettingInWorkflow(mutableWorkflow, 'seed', `${(seed + i).toFixed(0)}`)
           const result = await fetch(`${comfyBaseUrl.value}/prompt`, {
@@ -482,15 +487,15 @@ export const useComfyUi = defineStore(
       })
     }
 
-    function createInfoParamTable(infoParams: ImageInfoParams) {
-      const infoParamsTable: KVObject = {
-        ...extractDefaultParams(infoParams.default_inputs, infoParams.modifiable_settings),
-        ...extractComfyUiParams(infoParams.comfy_inputs),
+    function createInfoParamTable(infoParams: ImageInfoParamsComfy) {
+      const infoParamsTable: ImageInfoParameter = {
+        ...extractDefaultParams(infoParams.defaultInputs, infoParams.modifiableSettings),
+        ...extractComfyUiParams(infoParams.comfyInputs),
       }
       return infoParamsTable
     }
 
-    function extractDefaultParams(input: StringOrNumberOrBooleanKV, modSettings: string[]) {
+    function extractDefaultParams(input: ImageInfoParameter, modSettings: string[]) {
       const defaultSettings: string[] = ['backend', 'workflow_name', 'prompt']
       const mappingKeyToTranslatable: StringKV = {
         backend: 'BACKEND',
@@ -501,7 +506,7 @@ export const useComfyUi = defineStore(
         negativePrompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
         inferenceSteps: 'SETTINGS_MODEL_IMAGE_STEPS',
       }
-      const mappingKeyToInfoParams: StringOrNumberOrBooleanKV = {
+      const mappingKeyToInfoParams: ImageInfoParameter = {
         backend: 'ComfyUI',
         workflow_name: input.workflow_name,
         prompt: input.prompt,
@@ -517,25 +522,20 @@ export const useComfyUi = defineStore(
       )
     }
 
-    function extractComfyUiParams(inputs: KVObject[]) {
-      const infoComfyParamsTable: KVObject = {}
+    function extractComfyUiParams(inputs: ComfyDynamicInputWithCurrent[]) {
+      const infoComfyParamsTable: ImageInfoParameter = {}
       for (const input of inputs) {
         infoComfyParamsTable[getTranslationLabel('SETTINGS_IMAGE_COMFY_', input.label)] =
-          input.type === 'image' ? input : input.current
+          input.type === 'image'
+            ? { type: input.type, image: String(input.current) }
+            : input.current
       }
       return infoComfyParamsTable
     }
 
-    function reset() {
-      loaderNodes.value.length = 0
-      imageInfoParams.value = { default_inputs: {}, modifiable_settings: [], comfy_inputs: [] }
-      generateIdx.value = 0
-    }
-
     return {
       generate,
       stop,
-      reset,
     }
   },
   {
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 246d317d..9d9883d1 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -6,13 +6,39 @@ import { useI18N } from './i18n'
 import * as Const from '../const'
 import { useGlobalSetup } from './globalSetup'
 import * as toast from '@/assets/js/toast.ts'
-import { v4 as uuidv4 } from 'uuid'
+
+export type DefaultBackendParams = {
+  mode: number
+  device: string
+  prompt: string
+  model_repo_id: string
+  negative_prompt: string
+  generate_number: number
+  inference_steps: number
+  guidance_scale: number
+  seed: number
+  height: number
+  width: number
+  lora: string
+  scheduler: string
+  image_preview: boolean
+  safe_check: boolean
+}
+
+export type RefImage = {
+  type: string
+  image: string
+}
+
+export type ImageInfoParameter = {
+  [key: string]: string | number | boolean | RefImage
+}
 
 export type GeneratedImage = {
   id: number | string
   imageUrl: string
   isLoading: boolean
-  infoParams: KVObject | undefined
+  infoParams: ImageInfoParameter | undefined
 }
 
 const SettingsSchema = z.object({
@@ -133,7 +159,8 @@ const ComfyDynamicInputSchema = z.discriminatedUnion('type', [
   ComfyStringInputSchema,
   ComfyBooleanInputSchema,
 ])
-type ComfyDynamicInput = z.infer<typeof ComfyDynamicInputSchema>
+export type ComfyDynamicInput = z.infer<typeof ComfyDynamicInputSchema>
+
 const ComfyUiWorkflowSchema = z.object({
   name: z.string(),
   displayPriority: z.number().default(0),
@@ -740,8 +767,6 @@ export const useImageGeneration = defineStore(
       storeGeneratedImages(deleteAllImages)
       currentState.value = 'no_start'
       stepText.value = ''
-      stableDiffusion.reset()
-      comfyUi.reset()
     }
 
     function storeGeneratedImages(deleteAllImages: boolean): void {
@@ -750,7 +775,7 @@ export const useImageGeneration = defineStore(
       }
       generatedImages.value = generatedImages.value.filter((item) => item.isLoading === false)
       generatedImages.value.forEach((item) => {
-        item.id = uuidv4()
+        item.id = window.crypto.randomUUID()
       })
     }
 
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index b5ac6190..ce23ad91 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { GeneratedImage, useImageGeneration } from './imageGeneration'
+import { GeneratedImage, ImageInfoParameter, useImageGeneration } from './imageGeneration'
 import { useGlobalSetup } from './globalSetup'
 import * as Const from '../const'
 import { useModels } from './models'
@@ -7,26 +7,9 @@ import * as util from '../util'
 import { SSEProcessor } from '../sseProcessor'
 import { useI18N } from './i18n'
 import * as toast from '../toast'
+import { DefaultBackendParams } from '@/assets/js/store/imageGeneration.ts'
 
-type DefaultBackendParams = {
-  mode: number
-  device: string
-  prompt: string
-  model_repo_id: string
-  negative_prompt: string
-  generate_number: number
-  inference_steps: number
-  guidance_scale: number
-  seed: number
-  height: number
-  width: number
-  lora: string
-  scheduler: string
-  image_preview: boolean
-  safe_check: boolean
-}
-
-type ImageInfoParams = {
+type ImageInfoParamsSD = {
   size: string
   model_name: string
   output_seed: number
@@ -41,7 +24,7 @@ export const useStableDiffusion = defineStore(
     const models = useModels()
 
     let abortController: AbortController | null
-    const defaultBackendParams = ref<DefaultBackendParams>()
+    const generationParameters = ref<DefaultBackendParams>()
 
     async function generate() {
       if (imageGeneration.processing) {
@@ -50,7 +33,7 @@ export const useStableDiffusion = defineStore(
       try {
         imageGeneration.processing = true
         await checkModel()
-        defaultBackendParams.value = {
+        generationParameters.value = {
           mode: 0,
           device: globalSetup.modelSettings.graphics,
           prompt: imageGeneration.prompt,
@@ -128,10 +111,10 @@ export const useStableDiffusion = defineStore(
           if (!data.safe_check_pass) {
             data.image = '/src/assets/image/nsfw_result_detected.png'
           }
-          const infoParams: KVObject | undefined =
-            defaultBackendParams.value &&
+          const infoParams: ImageInfoParameter | undefined =
+            generationParameters.value &&
             createInfoParamTable({
-              ...defaultBackendParams.value,
+              ...generationParameters.value,
               size: data.params.size,
               model_name: data.params.model_name,
               output_seed: Number(data.params.seed),
@@ -200,7 +183,7 @@ export const useStableDiffusion = defineStore(
 
         const response = await fetch(`${useGlobalSetup().apiHost}/api/sd/generate`, {
           method: 'POST',
-          body: util.convertToFormData(defaultBackendParams.value),
+          body: util.convertToFormData(generationParameters.value),
           signal: abortController.signal,
         })
         const reader = response.body!.getReader()
@@ -223,7 +206,7 @@ export const useStableDiffusion = defineStore(
       }
     }
 
-    function createInfoParamTable(infoParams: ImageInfoParams) {
+    function createInfoParamTable(infoParams: ImageInfoParamsSD) {
       const mappingKeyToTranslatable: StringKV = {
         backend: 'BACKEND',
         model_name: 'DOWNLOADER_MODEL',
@@ -239,7 +222,7 @@ export const useStableDiffusion = defineStore(
         lora: 'SETTINGS_MODEL_LORA',
         safe_check: 'SETTINGS_MODEL_SAFE_CHECK',
       }
-      const mappingKeyToInfoParams: StringOrNumberOrBooleanKV = {
+      const mappingKeyToInfoParams: ImageInfoParameter = {
         backend: 'Default',
         model_name: infoParams.model_name,
         prompt: infoParams.prompt,
@@ -262,14 +245,9 @@ export const useStableDiffusion = defineStore(
       )
     }
 
-    function reset() {
-      defaultBackendParams.value = undefined
-    }
-
     return {
       generate,
       stop,
-      reset,
     }
   },
   {
diff --git a/WebUI/src/components/InfoTable.vue b/WebUI/src/components/InfoTable.vue
index 2fa4ea2e..9d093677 100644
--- a/WebUI/src/components/InfoTable.vue
+++ b/WebUI/src/components/InfoTable.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="props.params" class="info-params absolute px-5 pt-8 pb-5 text-white w-1000">
+  <div
+    v-if="props.generationParameters"
+    class="info-params absolute px-5 pt-8 pb-5 text-white w-1000"
+  >
     <button
       class="w-5 h-5 svg-icon i-close absolute right-2 top-2"
       @click="emits('close')"
@@ -7,14 +10,14 @@
     <div class="params-list">
       <ul class="border border-color-spilter">
         <li
-          v-for="(value, key) in props.params"
+          v-for="(value, key) in props.generationParameters"
           class="last:border-none border-b border-color-spilter flex items-center"
           :key="key"
         >
           <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{
             languages[key]
           }}</span>
-          <img v-if="value.type === 'image'" :src="value.current" class="info-params-image" />
+          <img v-if="value.type === 'image'" :src="value.image" class="info-params-image" />
           <span v-else class="px-4 flex-auto break-word">{{ value }}</span>
         </li>
       </ul>
@@ -23,7 +26,7 @@
 </template>
 <script setup lang="ts">
 const props = defineProps<{
-  params: KVObject | undefined
+  generationParameters: KVObject
 }>()
 
 const emits = defineEmits<{
diff --git a/WebUI/src/components/PaintInfo.vue b/WebUI/src/components/PaintInfo.vue
deleted file mode 100644
index 026390a3..00000000
--- a/WebUI/src/components/PaintInfo.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div class="info-params absolute px-5 pt-8 pb-5 text-white">
-    <button
-      class="w-5 h-5 svg-icon i-close absolute right-2 top-2"
-      @click="emits('close')"
-    ></button>
-    <div class="params-list">
-      <ul class="border border-color-spilter">
-        <!-- eslint-disable vue/require-v-for-key -->
-        <li
-          v-for="(v, k) in props.params"
-          class="last:border-none border-b border-color-spilter flex items-start"
-        >
-          <!-- eslint-enable -->
-          <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{ k }}</span>
-          <span class="px-4 flex-auto break-word">{{ getModeText(k as string, v) }}</span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { useI18N } from '@/assets/js/store/i18n'
-
-const props = defineProps<{
-  params: KVObject | undefined
-}>()
-
-const i18n = useI18N().state
-
-const emits = defineEmits<{
-  (e: 'close'): void
-}>()
-
-function getModeText(key: string, value: number | string) {
-  if (key != 'mode') {
-    return value.toString()
-  }
-  switch (value) {
-    case 0:
-      return i18n.TAB_CREATE
-    case 1:
-      return i18n.ENHANCE_UPSCALE
-    case 2:
-      return i18n.ENHANCE_IMAGE_PROMPT
-    case 3:
-      return i18n.ENHANCE_INPAINT
-    case 4:
-      return i18n.ENHANCE_OUTPAINT
-    default:
-      return 'unknown'
-  }
-}
-</script>
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index eaa7931b..74e11c31 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -128,10 +128,6 @@ type StringKV = {
   [key: string]: string
 }
 
-type StringOrNumberOrBooleanKV = {
-  [key: string]: string | number | boolean
-}
-
 type WebSettings = {
   graphics: { name: string; index: number }[]
   schedulers: string[]
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index a923075e..8dd222fb 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -119,7 +119,7 @@
         </div>
         <info-table
           v-show="showInfoParams"
-          :params="currentImage?.infoParams"
+          :params="currentImage?.infoParams ?? {}"
           @close="showInfoParams = false"
         ></info-table>
       </div>
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index fb58263f..5ca3e62c 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -207,11 +207,11 @@
             </div>
           </div>
         </div>
-        <paint-info
+        <info-table
           :params="infoParams"
           v-show="showParams"
-          @close="showInfoParams = false"
-        ></paint-info>
+          @close="showParams = false"
+        ></info-table>
       </div>
     </div>
     <div class="flex flex-col gap-2 flex-none">
@@ -325,12 +325,11 @@ import * as toast from '@/assets/js/toast'
 import { SSEProcessor } from '@/assets/js/sseProcessor'
 import LoadingBar from '../components/LoadingBar.vue'
 import VerticalSlideBar from '@/components/VerticalSlideBar.vue'
-import PaintInfo from '@/components/InfoTable.vue'
+import InfoTable from '@/components/InfoTable.vue'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup'
 import InpaintMask from '../components/InpaintMask.vue'
 import * as Const from '@/assets/js/const'
 import { useImageGeneration } from '@/assets/js/store/imageGeneration'
-
 const i18nState = useI18N().state
 const globalSetup = useGlobalSetup()
 const imageGeneration = useImageGeneration()
@@ -503,7 +502,7 @@ function dataProcess(line: string) {
         case 'runtime_error':
           toast.error(i18nState.ERROR_RUNTIME_ERROR)
           break
-        case 'unknow_exception':
+        case 'unknown_exception':
           toast.error(i18nState.ERROR_GENERATE_UNKONW_EXCEPTION)
           break
       }

From d76e4fd64cf861ec211a5d0422669e3e3407ee3d Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 17 Feb 2025 18:55:19 +0200
Subject: [PATCH 18/23] #58 - refactoring after Dev Review - part III

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/views/Create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 8dd222fb..b86d5179 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -119,7 +119,7 @@
         </div>
         <info-table
           v-show="showInfoParams"
-          :params="currentImage?.infoParams ?? {}"
+          :generationParameters="currentImage?.infoParams ?? {}"
           @close="showInfoParams = false"
         ></info-table>
       </div>

From 6c5a77a7b1b6c95ff6cf7b69c1409ab5d5214931 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Mon, 17 Feb 2025 22:06:24 +0200
Subject: [PATCH 19/23] #58 - refactoring after Dev Review - part IV

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/comfyUi.ts         | 16 +++++++----
 WebUI/src/assets/js/store/imageGeneration.ts | 29 ++++++++------------
 WebUI/src/assets/js/store/stableDiffusion.ts |  8 ++++--
 WebUI/src/views/Create.vue                   | 18 +++---------
 WebUI/src/views/Enhance.vue                  |  2 +-
 5 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index 2fafb188..3f96bd02 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -114,7 +114,8 @@ export const useComfyUi = defineStore(
       modifiableSettings: [],
       comfyInputs: [],
     }
-    const generateIdx = ref<number>(0)
+    let hashIds: string[] = []
+    let generateIdx: number = 0
 
     const backendServices = useBackendServices()
     const comfyUiState = computed(() => {
@@ -249,7 +250,7 @@ export const useComfyUi = defineStore(
                 console.log('image url', imageUrl)
                 if (imageBlob) {
                   const updatedImage: GeneratedImage = {
-                    id: generateIdx.value,
+                    id: hashIds[generateIdx],
                     imageUrl: imageUrl,
                     isLoading: true,
                     infoParams: undefined,
@@ -287,17 +288,17 @@ export const useComfyUi = defineStore(
                   ...imageInfoParams,
                   defaultInputs: {
                     ...imageInfoParams.defaultInputs,
-                    seed: Number(imageInfoParams.defaultInputs.seed) + generateIdx.value,
+                    seed: Number(imageInfoParams.defaultInputs.seed) + generateIdx,
                   },
                 })
                 const newImage: GeneratedImage = {
-                  id: generateIdx.value,
+                  id: hashIds[generateIdx],
                   imageUrl: `${comfyBaseUrl.value}/view?filename=${imageFromOutput.filename}&type=${imageFromOutput.type}&subfolder=${imageFromOutput.subfolder ?? ''}`,
                   isLoading: false,
                   infoParams: infoParams,
                 }
                 imageGeneration.updateImage(newImage)
-                generateIdx.value++
+                generateIdx++
                 console.log('executed', { detail: msg.data })
                 break
               case 'execution_start':
@@ -443,7 +444,10 @@ export const useComfyUi = defineStore(
             current: i.current.value,
           })),
         }
-        generateIdx.value = 0
+        hashIds = Array.from({ length: imageGeneration.batchSize }, () =>
+          window.crypto.randomUUID(),
+        )
+        generateIdx = 0
         for (let i = 0; i < imageGeneration.batchSize; i++) {
           modifySettingInWorkflow(mutableWorkflow, 'seed', `${(seed + i).toFixed(0)}`)
           const result = await fetch(`${comfyBaseUrl.value}/prompt`, {
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 9d9883d1..17fdcf72 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -35,7 +35,7 @@ export type ImageInfoParameter = {
 }
 
 export type GeneratedImage = {
-  id: number | string
+  id: string
   imageUrl: string
   isLoading: boolean
   infoParams: ImageInfoParameter | undefined
@@ -745,7 +745,13 @@ export const useImageGeneration = defineStore(
     }
 
     async function generate() {
+      generatedImages.value = generatedImages.value.filter((item) => item.isLoading === false)
+      currentState.value = 'no_start'
       stepText.value = i18nState.COM_GENERATING
+      const inferenceBackendService: BackendServiceName =
+        backend.value === 'comfyui' ? 'comfyui-backend' : 'ai-backend'
+      await globalSetup.resetLastUsedInferenceBackend(inferenceBackendService)
+      globalSetup.updateLastUsedBackend(inferenceBackendService)
       if (activeWorkflow.value.backend === 'default') {
         await stableDiffusion.generate()
       } else {
@@ -758,25 +764,12 @@ export const useImageGeneration = defineStore(
       comfyUi.stop()
     }
 
-    function deleteImage(id: number | string) {
+    function deleteImage(id: string) {
       generatedImages.value = generatedImages.value.filter((image) => image.id !== id)
     }
 
-    // ToDo: Refactor
-    function reset(deleteAllImages: boolean) {
-      storeGeneratedImages(deleteAllImages)
-      currentState.value = 'no_start'
-      stepText.value = ''
-    }
-
-    function storeGeneratedImages(deleteAllImages: boolean): void {
-      if (deleteAllImages) {
-        generatedImages.value.length = 0
-      }
-      generatedImages.value = generatedImages.value.filter((item) => item.isLoading === false)
-      generatedImages.value.forEach((item) => {
-        item.id = window.crypto.randomUUID()
-      })
+    function deleteAllImages() {
+      generatedImages.value.length = 0
     }
 
     loadWorkflowsFromJson()
@@ -818,7 +811,7 @@ export const useImageGeneration = defineStore(
       generate,
       stopGeneration,
       deleteImage,
-      reset,
+      deleteAllImages,
     }
   },
   {
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index ce23ad91..9d2c0843 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -25,6 +25,7 @@ export const useStableDiffusion = defineStore(
 
     let abortController: AbortController | null
     const generationParameters = ref<DefaultBackendParams>()
+    let hashIds: string[] = []
 
     async function generate() {
       if (imageGeneration.processing) {
@@ -50,6 +51,9 @@ export const useStableDiffusion = defineStore(
           image_preview: imageGeneration.imagePreview,
           safe_check: imageGeneration.safeCheck,
         }
+        hashIds = Array.from({ length: imageGeneration.batchSize }, () =>
+          window.crypto.randomUUID(),
+        )
         await sendGenerate()
       } catch (_error: unknown) {
       } finally {
@@ -120,7 +124,7 @@ export const useStableDiffusion = defineStore(
               output_seed: Number(data.params.seed),
             })
           const newImage: GeneratedImage = {
-            id: data.index,
+            id: hashIds[data.index],
             imageUrl: data.image,
             isLoading: false,
             infoParams: infoParams,
@@ -132,7 +136,7 @@ export const useStableDiffusion = defineStore(
           imageGeneration.currentState = 'generating'
           imageGeneration.stepText = `${i18nState.COM_GENERATING} ${data.step}/${data.total_step}`
           const updatedImage: GeneratedImage = {
-            id: data.index,
+            id: hashIds[data.index],
             imageUrl: data.image ?? '',
             isLoading: true,
             infoParams: undefined,
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index b86d5179..80ae3ac6 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -22,7 +22,7 @@
         </div>
         <div class="items-end justify-end">
           <button
-            @click="reset(true)"
+            @click="deleteAllImages"
             :title="languages.COM_CLEAR_HISTORY"
             :disabled="imageGeneration.processing"
             class="bg-color-image-tool-button rounded-sm w-6 h-6 ml-2 flex items-center justify-center"
@@ -160,13 +160,11 @@ import * as util from '@/assets/js/util'
 import LoadingBar from '../components/LoadingBar.vue'
 import InfoTable from '@/components/InfoTable.vue'
 import { GeneratedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
-import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 
 const imageGeneration = useImageGeneration()
-const globalSetup = useGlobalSetup()
 const i18nState = useI18N().state
 const showInfoParams = ref(false)
-const selectedImageId = ref<string | number | null>(null) //ToDo: Change when only allowing strings as ID
+const selectedImageId = ref<string | null>(null)
 const currentImage: ComputedRef<GeneratedImage | null> = computed(() => {
   return imageGeneration.generatedImages.find((image) => image.id === selectedImageId.value) ?? null
 })
@@ -175,7 +173,6 @@ watch(
   () => {
     const numberOfImages = imageGeneration.generatedImages.length
     if (numberOfImages > 0) {
-      //ToDo: Make sure it does not jump somewhere else if a picture gets deleted
       selectedImageId.value = imageGeneration.generatedImages[numberOfImages - 1].id
     } else {
       selectedImageId.value = null
@@ -196,12 +193,6 @@ const emits = defineEmits<{
 
 async function generateImage() {
   await ensureModelsAreAvailable()
-  reset(false)
-  const inferenceBackendService: BackendServiceName =
-    imageGeneration.backend === 'comfyui' ? 'comfyui-backend' : 'ai-backend'
-  await globalSetup.resetLastUsedInferenceBackend(inferenceBackendService)
-  globalSetup.updateLastUsedBackend(inferenceBackendService)
-
   await imageGeneration.generate()
 }
 
@@ -242,8 +233,7 @@ function deleteImage() {
   currentImage.value && imageGeneration.deleteImage(currentImage.value.id)
 }
 
-function reset(deleteAllImages: boolean) {
-  showInfoParams.value = false
-  imageGeneration.reset(deleteAllImages)
+function deleteAllImages() {
+  imageGeneration.deleteAllImages()
 }
 </script>
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index 5ca3e62c..ea711fb6 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -208,8 +208,8 @@
           </div>
         </div>
         <info-table
-          :params="infoParams"
           v-show="showParams"
+          :generationParameters="infoParams"
           @close="showParams = false"
         ></info-table>
       </div>

From 7215639ce3234af8f90ad99f015fd94e43833644 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 18 Feb 2025 13:49:22 +0200
Subject: [PATCH 20/23] #58 - refactoring after Dev Review - part V

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/stableDiffusion.ts       | 4 ++--
 WebUI/src/components/SettingsImageComfyDynamic.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 9d2c0843..de1f6679 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -216,7 +216,7 @@ export const useStableDiffusion = defineStore(
         model_name: 'DOWNLOADER_MODEL',
         prompt: 'INPUT_PROMPT',
         resolution: 'SETTINGS_MODEL_IMAGE_RESOLUTION',
-        Device: 'DEVICE',
+        device: 'DEVICE',
         size: 'SETTINGS_MODEL_IMAGE_SIZE',
         seed: 'SETTINGS_MODEL_SEED',
         negative_prompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
@@ -231,7 +231,7 @@ export const useStableDiffusion = defineStore(
         model_name: infoParams.model_name,
         prompt: infoParams.prompt,
         resolution: infoParams.width + 'x' + infoParams.height,
-        Device: infoParams.device,
+        device: infoParams.device,
         size: infoParams.size,
         seed: infoParams.output_seed,
         negative_prompt: infoParams.negative_prompt,
diff --git a/WebUI/src/components/SettingsImageComfyDynamic.vue b/WebUI/src/components/SettingsImageComfyDynamic.vue
index fed2a3ed..67d8ac6f 100644
--- a/WebUI/src/components/SettingsImageComfyDynamic.vue
+++ b/WebUI/src/components/SettingsImageComfyDynamic.vue
@@ -5,7 +5,7 @@
     class="flex flex-col gap-2 py-2"
   >
     <p>
-      {{ languages[getTranslationLabel('SETTINGS_IMAGE_COMFY_', input.label)] ??= input.label }}
+      {{ languages[getTranslationLabel('SETTINGS_IMAGE_COMFY_', input.label)] ?? input.label }}
     </p>
 
     <!--    Number    -->

From ece5c2f7d3dc717bad515a4c0ce26af6c21fe5f7 Mon Sep 17 00:00:00 2001
From: Markus Schuettler <markus.schuettler@tngtech.com>
Date: Sat, 22 Feb 2025 15:38:19 +0100
Subject: [PATCH 21/23] refactor: move display logic to InfoTable

Refs: #58

Signed-off-by: Markus Schuettler <markus.schuettler@tngtech.com>
---
 WebUI/package.json                            |   2 +-
 WebUI/src/assets/js/store/comfyUi.ts          | 151 +++---------
 WebUI/src/assets/js/store/imageGeneration.ts  |  86 ++++---
 WebUI/src/assets/js/store/stableDiffusion.ts  | 217 ++++++++++--------
 WebUI/src/components/InfoTable.vue            |  44 +++-
 .../components/SettingsImageComfyDynamic.vue  |   2 +-
 .../components/SettingsImageGeneration.vue    |   4 +-
 WebUI/src/env.d.ts                            |  24 --
 WebUI/src/views/Create.vue                    |  31 ++-
 WebUI/src/views/Enhance.vue                   |   2 +-
 10 files changed, 280 insertions(+), 283 deletions(-)

diff --git a/WebUI/package.json b/WebUI/package.json
index c7e55158..18c845ea 100644
--- a/WebUI/package.json
+++ b/WebUI/package.json
@@ -12,7 +12,7 @@
     "prepare-build": "cross-env npm run prepare-python-env && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/online/prototype-python-env",
     "build": "node ./build/scripts/patch-nsis-template.js && cross-env-shell VITE_PLATFORM_TITLE=\"for Intel® Arc™\" \"vue-tsc && vite build && electron-builder --config build/build-config.json --win --x64\"",
     "lint:eslint": "eslint . --fix",
-    "lint": "run-s lint:*",
+    "lint": "eslint . --fix",
     "format": "prettier --write .",
     "lint:ci": "eslint .",
     "format:ci": "prettier --check ."
diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index 3f96bd02..b1625169 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -1,28 +1,10 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { WebSocket } from 'partysocket'
-import {
-  ComfyDynamicInput,
-  ComfyUIApiWorkflow,
-  GeneratedImage,
-  ImageInfoParameter,
-  Setting,
-  useImageGeneration,
-} from './imageGeneration'
+import { ComfyUIApiWorkflow, Image, Setting, useImageGeneration } from './imageGeneration'
 import { useI18N } from './i18n'
 import * as toast from '../toast'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup.ts'
 import { useBackendServices } from '@/assets/js/store/backendServices.ts'
-import { getTranslationLabel } from '@/lib/utils.ts'
-import { DefaultBackendParams } from '@/assets/js/store/imageGeneration.ts'
-
-type DefaultBackendParamsWithName = Partial<DefaultBackendParams & { workflow_name: string }>
-type ComfyDynamicInputWithCurrent = ComfyDynamicInput & { current: string | number | boolean }
-
-type ImageInfoParamsComfy = {
-  defaultInputs: DefaultBackendParamsWithName
-  modifiableSettings: string[]
-  comfyInputs: ComfyDynamicInputWithCurrent[]
-}
 
 const WEBSOCKET_OPEN = 1
 
@@ -103,23 +85,18 @@ export const useComfyUi = defineStore(
     const imageGeneration = useImageGeneration()
     const globalSetup = useGlobalSetup()
     const i18nState = useI18N().state
-    const comfyPort = computed(() => comfyUiState.value?.port ?? -1)
-    const comfyBaseUrl = computed(() => comfyUiState.value?.baseUrl ?? '')
+    const comfyPort = computed(() => comfyUiState.value?.port)
+    const comfyBaseUrl = computed(() => comfyUiState.value?.baseUrl)
 
     const websocket = ref<WebSocket | null>(null)
     const clientId = '12345'
     const loaderNodes = ref<string[]>([])
-    let imageInfoParams: ImageInfoParamsComfy = {
-      defaultInputs: {},
-      modifiableSettings: [],
-      comfyInputs: [],
-    }
-    let hashIds: string[] = []
     let generateIdx: number = 0
+    let queuedImages: Image[] = []
 
     const backendServices = useBackendServices()
     const comfyUiState = computed(() => {
-      return backendServices.info.find((item) => item.serviceName === 'comfyui-backend') ?? null
+      return backendServices.info.find((item) => item.serviceName === 'comfyui-backend')
     })
 
     async function installCustomNodesForActiveWorkflowFully() {
@@ -249,13 +226,13 @@ export const useComfyUi = defineStore(
                 const imageUrl = URL.createObjectURL(imageBlob)
                 console.log('image url', imageUrl)
                 if (imageBlob) {
-                  const updatedImage: GeneratedImage = {
-                    id: hashIds[generateIdx],
-                    imageUrl: imageUrl,
-                    isLoading: true,
-                    infoParams: undefined,
+                  const currentImage = queuedImages[generateIdx]
+                  const newImage: Image = {
+                    ...currentImage,
+                    state: 'generating',
+                    imageUrl,
                   }
-                  imageGeneration.updateImage(updatedImage)
+                  imageGeneration.updateImage(newImage)
                 }
                 break
               default:
@@ -284,18 +261,12 @@ export const useComfyUi = defineStore(
               case 'executed':
                 const imageFromOutput: { filename: string; type: string; subfolder: string } =
                   msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output')
-                const infoParams: ImageInfoParameter = createInfoParamTable({
-                  ...imageInfoParams,
-                  defaultInputs: {
-                    ...imageInfoParams.defaultInputs,
-                    seed: Number(imageInfoParams.defaultInputs.seed) + generateIdx,
-                  },
-                })
-                const newImage: GeneratedImage = {
-                  id: hashIds[generateIdx],
+
+                const currentImage = queuedImages[generateIdx]
+                const newImage: Image = {
+                  ...currentImage,
+                  state: 'done',
                   imageUrl: `${comfyBaseUrl.value}/view?filename=${imageFromOutput.filename}&type=${imageFromOutput.type}&subfolder=${imageFromOutput.subfolder ?? ''}`,
-                  isLoading: false,
-                  infoParams: infoParams,
                 }
                 imageGeneration.updateImage(newImage)
                 generateIdx++
@@ -411,7 +382,8 @@ export const useComfyUi = defineStore(
         const mutableWorkflow: ComfyUIApiWorkflow = JSON.parse(
           JSON.stringify(imageGeneration.activeWorkflow.comfyUiApiWorkflow),
         )
-        const seed =
+        generateIdx = 0
+        const baseSeed =
           imageGeneration.seed === -1 ? Math.floor(Math.random() * 1000000) : imageGeneration.seed
 
         modifySettingInWorkflow(mutableWorkflow, 'inferenceSteps', imageGeneration.inferenceSteps)
@@ -428,28 +400,25 @@ export const useComfyUi = defineStore(
           ...findKeysByClassType(mutableWorkflow, 'DualCLIPLoader (GGUF)'),
         ]
 
-        imageInfoParams = {
-          defaultInputs: {
-            workflow_name: imageGeneration.activeWorkflow.name,
-            height: imageGeneration.height,
-            width: imageGeneration.width,
-            seed: seed,
-            prompt: imageGeneration.prompt,
-            negative_prompt: imageGeneration.negativePrompt,
-            inference_steps: imageGeneration.inferenceSteps,
-          },
-          modifiableSettings: imageGeneration.activeWorkflow.modifiableSettings,
-          comfyInputs: imageGeneration.comfyInputs.map((i) => ({
-            ...i,
-            current: i.current.value,
-          })),
-        }
-        hashIds = Array.from({ length: imageGeneration.batchSize }, () =>
-          window.crypto.randomUUID(),
-        )
-        generateIdx = 0
-        for (let i = 0; i < imageGeneration.batchSize; i++) {
-          modifySettingInWorkflow(mutableWorkflow, 'seed', `${(seed + i).toFixed(0)}`)
+        queuedImages = Array.from({ length: imageGeneration.batchSize }, (_, i) => {
+          const seed = baseSeed + i
+          const settings = imageGeneration.getGenerationParameters()
+          settings.seed = seed
+
+          return {
+            id: window.crypto.randomUUID(),
+            imageUrl:
+              'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20color%3D%22%23000000%22%3E%3Cpath%20d%3D%22M12%2012C15.866%2012%2019%208.86599%2019%205H5C5%208.86599%208.13401%2012%2012%2012ZM12%2012C15.866%2012%2019%2015.134%2019%2019H5C5%2015.134%208.13401%2012%2012%2012Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%202L12%202L19%202%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%2022H12L19%2022%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E',
+            state: 'queued',
+            settings,
+            dynamicSettings: imageGeneration.comfyInputs.map((input) => ({
+              ...input,
+              current: input.current.value as never,
+            })),
+          }
+        })
+        for (const image of queuedImages) {
+          modifySettingInWorkflow(mutableWorkflow, 'seed', `${image.settings.seed!.toFixed(0)}`)
           const result = await fetch(`${comfyBaseUrl.value}/prompt`, {
             method: 'POST',
             headers: {
@@ -491,52 +460,6 @@ export const useComfyUi = defineStore(
       })
     }
 
-    function createInfoParamTable(infoParams: ImageInfoParamsComfy) {
-      const infoParamsTable: ImageInfoParameter = {
-        ...extractDefaultParams(infoParams.defaultInputs, infoParams.modifiableSettings),
-        ...extractComfyUiParams(infoParams.comfyInputs),
-      }
-      return infoParamsTable
-    }
-
-    function extractDefaultParams(input: ImageInfoParameter, modSettings: string[]) {
-      const defaultSettings: string[] = ['backend', 'workflow_name', 'prompt']
-      const mappingKeyToTranslatable: StringKV = {
-        backend: 'BACKEND',
-        workflow_name: 'SETTINGS_IMAGE_WORKFLOW',
-        prompt: 'INPUT_PROMPT',
-        resolution: 'SETTINGS_MODEL_IMAGE_RESOLUTION',
-        seed: 'SETTINGS_MODEL_SEED',
-        negativePrompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
-        inferenceSteps: 'SETTINGS_MODEL_IMAGE_STEPS',
-      }
-      const mappingKeyToInfoParams: ImageInfoParameter = {
-        backend: 'ComfyUI',
-        workflow_name: input.workflow_name,
-        prompt: input.prompt,
-        resolution: input.width + 'x' + input.height,
-        seed: input.seed,
-        negativePrompt: input.negative_prompt,
-        inferenceSteps: input.inference_steps,
-      }
-      return Object.fromEntries(
-        Object.keys(mappingKeyToInfoParams)
-          .filter((key) => defaultSettings.includes(key) || modSettings.includes(key))
-          .map((key) => [mappingKeyToTranslatable[key], mappingKeyToInfoParams[key]]),
-      )
-    }
-
-    function extractComfyUiParams(inputs: ComfyDynamicInputWithCurrent[]) {
-      const infoComfyParamsTable: ImageInfoParameter = {}
-      for (const input of inputs) {
-        infoComfyParamsTable[getTranslationLabel('SETTINGS_IMAGE_COMFY_', input.label)] =
-          input.type === 'image'
-            ? { type: input.type, image: String(input.current) }
-            : input.current
-      }
-      return infoComfyParamsTable
-    }
-
     return {
       generate,
       stop,
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 17fdcf72..4c1d6032 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -7,24 +7,6 @@ import * as Const from '../const'
 import { useGlobalSetup } from './globalSetup'
 import * as toast from '@/assets/js/toast.ts'
 
-export type DefaultBackendParams = {
-  mode: number
-  device: string
-  prompt: string
-  model_repo_id: string
-  negative_prompt: string
-  generate_number: number
-  inference_steps: number
-  guidance_scale: number
-  seed: number
-  height: number
-  width: number
-  lora: string
-  scheduler: string
-  image_preview: boolean
-  safe_check: boolean
-}
-
 export type RefImage = {
   type: string
   image: string
@@ -34,11 +16,26 @@ export type ImageInfoParameter = {
   [key: string]: string | number | boolean | RefImage
 }
 
-export type GeneratedImage = {
+export type GenerationSettings = Partial<
+  Settings & {
+    workflow: string
+  } & {
+    device: number
+  }
+>
+
+export type ComfyDynamicInputWithCurrent =
+  | (ComfyImageInput & { current: string })
+  | (ComfyNumberInput & { current: number })
+  | (ComfyStringInput & { current: string })
+  | (ComfyBooleanInput & { current: boolean })
+
+export type Image = {
   id: string
+  state: 'queued' | 'generating' | 'done' | 'stopped'
+  settings: GenerationSettings
+  dynamicSettings?: ComfyDynamicInputWithCurrent[]
   imageUrl: string
-  isLoading: boolean
-  infoParams: ImageInfoParameter | undefined
 }
 
 const SettingsSchema = z.object({
@@ -58,6 +55,7 @@ const SettingsSchema = z.object({
   imagePreview: z.boolean(),
   safetyCheck: z.boolean(),
 })
+type Settings = z.infer<typeof SettingsSchema>
 
 const SettingSchema = SettingsSchema.keyof()
 
@@ -212,7 +210,7 @@ const generalDefaultSettings = {
   prompt: '',
   seed: -1,
   imagePreview: true,
-  safeCheck: true,
+  safetyCheck: true,
 }
 
 export const useImageGeneration = defineStore(
@@ -423,14 +421,14 @@ export const useImageGeneration = defineStore(
     const prompt = ref<string>(generalDefaultSettings.prompt)
     const seed = ref<number>(generalDefaultSettings.seed)
     const imagePreview = ref<boolean>(generalDefaultSettings.imagePreview)
-    const safeCheck = ref<boolean>(generalDefaultSettings.safeCheck)
+    const safetyCheck = ref<boolean>(generalDefaultSettings.safetyCheck)
     const batchSize = ref<number>(globalDefaultSettings.batchSize) // TODO this should be imageCount instead, as we only support batchSize 1 due to memory constraints
 
     const resetActiveWorkflowSettings = () => {
       prompt.value = generalDefaultSettings.prompt
       seed.value = generalDefaultSettings.seed
       imagePreview.value = generalDefaultSettings.imagePreview
-      safeCheck.value = generalDefaultSettings.safeCheck
+      safetyCheck.value = generalDefaultSettings.safetyCheck
       settingsPerWorkflow.value[activeWorkflowName.value ?? ''] = undefined
       comfyInputsPerWorkflow.value[activeWorkflowName.value ?? ''] = undefined
       loadSettingsForActiveWorkflow()
@@ -456,6 +454,36 @@ export const useImageGeneration = defineStore(
       },
     })
 
+    // TODO: Model Settings better (probably all settings should be an array of Settings, similar to comfyInputs) to better align ComfyUI and Default backends
+    const settingIsRelevant = (setting: Setting) =>
+      activeWorkflow.value.backend === 'default' ||
+      activeWorkflow.value.displayedSettings.includes(setting) ||
+      activeWorkflow.value.modifiableSettings.includes(setting)
+
+    const getGenerationParameters = (): GenerationSettings => {
+      const allSettings = {
+        workflow: activeWorkflowName.value ?? 'unknown',
+        device: globalSetup.modelSettings.graphics,
+        prompt: prompt.value,
+        negativePrompt: negativePrompt.value,
+        imageModel: imageModel.value,
+        batchSize: batchSize.value,
+        inferenceSteps: inferenceSteps.value,
+        guidanceScale: guidanceScale.value,
+        seed: seed.value,
+        height: height.value,
+        width: width.value,
+        resolution: resolution.value,
+        lora: lora.value,
+        scheduler: scheduler.value,
+        imagePreview: imagePreview.value,
+        safetyCheck: safetyCheck.value,
+      }
+      return Object.fromEntries(
+        Object.entries(allSettings).filter(([key]) => settingIsRelevant(key as Setting)),
+      )
+    }
+
     const settings = {
       seed,
       inferenceSteps,
@@ -593,7 +621,7 @@ export const useImageGeneration = defineStore(
       saveToSettingsPerWorkflow('inpaintModel')
     })
 
-    const generatedImages = ref<GeneratedImage[]>([])
+    const generatedImages = ref<Image[]>([])
     const currentState = ref<SDGenerateState>('no_start')
     const stepText = ref('')
 
@@ -626,7 +654,8 @@ export const useImageGeneration = defineStore(
       getSavedOrDefault('inpaintModel')
     }
 
-    async function updateImage(newImage: GeneratedImage) {
+    async function updateImage(newImage: Image) {
+      console.log('updating image', newImage)
       const existingImageIndex = generatedImages.value.findIndex((img) => img.id === newImage.id)
       if (existingImageIndex !== -1) {
         generatedImages.value.splice(existingImageIndex, 1, newImage)
@@ -745,7 +774,7 @@ export const useImageGeneration = defineStore(
     }
 
     async function generate() {
-      generatedImages.value = generatedImages.value.filter((item) => item.isLoading === false)
+      generatedImages.value = generatedImages.value.filter((item) => item.state === 'done')
       currentState.value = 'no_start'
       stepText.value = i18nState.COM_GENERATING
       const inferenceBackendService: BackendServiceName =
@@ -792,7 +821,7 @@ export const useImageGeneration = defineStore(
       scheduler,
       guidanceScale,
       imagePreview,
-      safeCheck,
+      safetyCheck,
       inferenceSteps,
       seed,
       width,
@@ -812,6 +841,7 @@ export const useImageGeneration = defineStore(
       stopGeneration,
       deleteImage,
       deleteAllImages,
+      getGenerationParameters,
     }
   },
   {
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index de1f6679..73253e4b 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -1,5 +1,5 @@
-import { defineStore } from 'pinia'
-import { GeneratedImage, ImageInfoParameter, useImageGeneration } from './imageGeneration'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { GenerationSettings, Image, useImageGeneration } from './imageGeneration'
 import { useGlobalSetup } from './globalSetup'
 import * as Const from '../const'
 import { useModels } from './models'
@@ -7,13 +7,75 @@ import * as util from '../util'
 import { SSEProcessor } from '../sseProcessor'
 import { useI18N } from './i18n'
 import * as toast from '../toast'
-import { DefaultBackendParams } from '@/assets/js/store/imageGeneration.ts'
+import { z } from 'zod'
 
-type ImageInfoParamsSD = {
-  size: string
-  model_name: string
-  output_seed: number
-} & DefaultBackendParams
+const LoadModelCallbackSchema = z.object({
+  type: z.literal('load_model'),
+  event: z.union([z.literal('start'), z.literal('finish')]),
+})
+
+const LoadModelComponentsCallbackSchema = z.object({
+  type: z.literal('load_model_components'),
+  event: z.union([z.literal('start'), z.literal('finish')]),
+})
+
+const SDOutImageCallbackSchema = z.object({
+  type: z.literal('image_out'),
+  index: z.number(),
+  image: z.string(),
+  safe_check_pass: z.boolean(),
+  params: z.object({
+    seed: z.number(),
+  }),
+})
+
+const SDStepEndCallbackSchema = z.object({
+  type: z.literal('step_end'),
+  index: z.number(),
+  step: z.number(),
+  total_step: z.number(),
+  image: z.string().nullable().optional(),
+})
+
+const ErrorOutCallbackSchema = z.object({
+  type: z.literal('error'),
+  err_type: z.enum([
+    'not_enough_disk_space',
+    'runtime_error',
+    'download_exception',
+    'unknown_exception',
+  ]),
+  requires_space: z.string(),
+  free_space: z.string(),
+})
+
+const SDOutCallbackSchema = z.discriminatedUnion('type', [
+  LoadModelCallbackSchema,
+  LoadModelComponentsCallbackSchema,
+  SDOutImageCallbackSchema,
+  SDStepEndCallbackSchema,
+  ErrorOutCallbackSchema,
+])
+
+// zod schema for DefaultBackendParams
+const DefaultBackendParamsSchema = z.object({
+  mode: z.number(),
+  device: z.number(),
+  prompt: z.string(),
+  negative_prompt: z.string(),
+  model_repo_id: z.string(),
+  generate_number: z.number(),
+  inference_steps: z.number(),
+  guidance_scale: z.number(),
+  seed: z.number(),
+  height: z.number(),
+  width: z.number(),
+  lora: z.string(),
+  scheduler: z.string(),
+  image_preview: z.boolean(),
+  safe_check: z.boolean(),
+})
+type DefaultBackendParams = z.infer<typeof DefaultBackendParamsSchema>
 
 export const useStableDiffusion = defineStore(
   'stableDiffusion',
@@ -24,8 +86,27 @@ export const useStableDiffusion = defineStore(
     const models = useModels()
 
     let abortController: AbortController | null
-    const generationParameters = ref<DefaultBackendParams>()
-    let hashIds: string[] = []
+    let queuedImages: Image[] = []
+
+    const toBackendParams = (params: GenerationSettings): DefaultBackendParams => {
+      return DefaultBackendParamsSchema.parse({
+        mode: 0,
+        device: params.device,
+        prompt: params.prompt,
+        negative_prompt: params.negativePrompt,
+        model_repo_id: `stableDiffusion:${params.imageModel}`,
+        generate_number: params.batchSize,
+        inference_steps: params.inferenceSteps,
+        guidance_scale: params.guidanceScale,
+        seed: params.seed,
+        height: params.height,
+        width: params.width,
+        lora: params.lora,
+        scheduler: params.scheduler,
+        image_preview: params.imagePreview,
+        safe_check: params.safetyCheck,
+      })
+    }
 
     async function generate() {
       if (imageGeneration.processing) {
@@ -34,28 +115,17 @@ export const useStableDiffusion = defineStore(
       try {
         imageGeneration.processing = true
         await checkModel()
-        generationParameters.value = {
-          mode: 0,
-          device: globalSetup.modelSettings.graphics,
-          prompt: imageGeneration.prompt,
-          model_repo_id: `stableDiffusion:${imageGeneration.imageModel}`,
-          negative_prompt: imageGeneration.negativePrompt,
-          generate_number: imageGeneration.batchSize,
-          inference_steps: imageGeneration.inferenceSteps,
-          guidance_scale: imageGeneration.guidanceScale,
-          seed: imageGeneration.seed,
-          height: imageGeneration.height,
-          width: imageGeneration.width,
-          lora: imageGeneration.lora,
-          scheduler: imageGeneration.scheduler,
-          image_preview: imageGeneration.imagePreview,
-          safe_check: imageGeneration.safeCheck,
-        }
-        hashIds = Array.from({ length: imageGeneration.batchSize }, () =>
-          window.crypto.randomUUID(),
-        )
-        await sendGenerate()
-      } catch (_error: unknown) {
+        queuedImages = Array.from({ length: imageGeneration.batchSize }, () => ({
+          id: window.crypto.randomUUID(),
+          imageUrl:
+            'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20color%3D%22%23000000%22%3E%3Cpath%20d%3D%22M12%2012C15.866%2012%2019%208.86599%2019%205H5C5%208.86599%208.13401%2012%2012%2012ZM12%2012C15.866%2012%2019%2015.134%2019%2019H5C5%2015.134%208.13401%2012%2012%2012Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%202L12%202L19%202%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%2022H12L19%2022%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E',
+          state: 'queued',
+          settings: imageGeneration.getGenerationParameters(),
+        }))
+        await sendGenerate(imageGeneration.getGenerationParameters())
+      } catch (error: unknown) {
+        toast.error(i18nState.ERROR_GENERATE_UNKONW_EXCEPTION)
+        console.error(error)
       } finally {
         imageGeneration.processing = false
       }
@@ -108,42 +178,31 @@ export const useStableDiffusion = defineStore(
     async function dataProcess(line: string) {
       util.log(`SD data: ${line}`)
       const dataJson = line.slice(5)
-      const data = JSON.parse(dataJson) as SDOutCallback
+      const data = SDOutCallbackSchema.parse(JSON.parse(dataJson))
+      let currentImage: Image
       switch (data.type) {
         case 'image_out':
           imageGeneration.currentState = 'image_out'
           if (!data.safe_check_pass) {
             data.image = '/src/assets/image/nsfw_result_detected.png'
           }
-          const infoParams: ImageInfoParameter | undefined =
-            generationParameters.value &&
-            createInfoParamTable({
-              ...generationParameters.value,
-              size: data.params.size,
-              model_name: data.params.model_name,
-              output_seed: Number(data.params.seed),
-            })
-          const newImage: GeneratedImage = {
-            id: hashIds[data.index],
-            imageUrl: data.image,
-            isLoading: false,
-            infoParams: infoParams,
-          }
-          await imageGeneration.updateImage(newImage)
+          currentImage = queuedImages[data.index]
+          currentImage.state = 'done'
+          currentImage.settings.seed = data.params.seed
+          currentImage.imageUrl = data.image
+
+          await imageGeneration.updateImage(currentImage)
           break
 
         case 'step_end':
           imageGeneration.currentState = 'generating'
           imageGeneration.stepText = `${i18nState.COM_GENERATING} ${data.step}/${data.total_step}`
-          const updatedImage: GeneratedImage = {
-            id: hashIds[data.index],
-            imageUrl: data.image ?? '',
-            isLoading: true,
-            infoParams: undefined,
-          }
+          currentImage = queuedImages[data.index]
+          currentImage.state = 'generating'
           if (data.image) {
-            await imageGeneration.updateImage(updatedImage)
+            currentImage.imageUrl = data.image
           }
+          await imageGeneration.updateImage(currentImage)
           break
         case 'load_model':
           imageGeneration.currentState = 'load_model'
@@ -155,6 +214,7 @@ export const useStableDiffusion = defineStore(
         case 'error':
           imageGeneration.processing = false
           imageGeneration.currentState = 'error'
+
           switch (data.err_type) {
             case 'not_enough_disk_space':
               toast.error(
@@ -178,7 +238,7 @@ export const useStableDiffusion = defineStore(
       }
     }
 
-    async function sendGenerate() {
+    async function sendGenerate(generationParams: GenerationSettings) {
       try {
         imageGeneration.processing = true
         if (!abortController) {
@@ -187,7 +247,7 @@ export const useStableDiffusion = defineStore(
 
         const response = await fetch(`${useGlobalSetup().apiHost}/api/sd/generate`, {
           method: 'POST',
-          body: util.convertToFormData(generationParameters.value),
+          body: util.convertToFormData(toBackendParams(generationParams)),
           signal: abortController.signal,
         })
         const reader = response.body!.getReader()
@@ -210,45 +270,6 @@ export const useStableDiffusion = defineStore(
       }
     }
 
-    function createInfoParamTable(infoParams: ImageInfoParamsSD) {
-      const mappingKeyToTranslatable: StringKV = {
-        backend: 'BACKEND',
-        model_name: 'DOWNLOADER_MODEL',
-        prompt: 'INPUT_PROMPT',
-        resolution: 'SETTINGS_MODEL_IMAGE_RESOLUTION',
-        device: 'DEVICE',
-        size: 'SETTINGS_MODEL_IMAGE_SIZE',
-        seed: 'SETTINGS_MODEL_SEED',
-        negative_prompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
-        inference_steps: 'SETTINGS_MODEL_IMAGE_STEPS',
-        guidance_scale: 'SETTINGS_MODEL_IMAGE_CFG',
-        scheduler: 'SETTINGS_MODEL_SCHEDULER',
-        lora: 'SETTINGS_MODEL_LORA',
-        safe_check: 'SETTINGS_MODEL_SAFE_CHECK',
-      }
-      const mappingKeyToInfoParams: ImageInfoParameter = {
-        backend: 'Default',
-        model_name: infoParams.model_name,
-        prompt: infoParams.prompt,
-        resolution: infoParams.width + 'x' + infoParams.height,
-        device: infoParams.device,
-        size: infoParams.size,
-        seed: infoParams.output_seed,
-        negative_prompt: infoParams.negative_prompt,
-        inference_steps: infoParams.inference_steps,
-        guidance_scale: infoParams.guidance_scale,
-        scheduler: infoParams.scheduler,
-        lora: infoParams.lora,
-        safe_check: infoParams.safe_check,
-      }
-      return Object.fromEntries(
-        Object.keys(mappingKeyToInfoParams).map((key) => [
-          mappingKeyToTranslatable[key],
-          mappingKeyToInfoParams[key],
-        ]),
-      )
-    }
-
     return {
       generate,
       stop,
@@ -260,3 +281,7 @@ export const useStableDiffusion = defineStore(
     },
   },
 )
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useStableDiffusion, import.meta.hot))
+}
diff --git a/WebUI/src/components/InfoTable.vue b/WebUI/src/components/InfoTable.vue
index 9d093677..498617f8 100644
--- a/WebUI/src/components/InfoTable.vue
+++ b/WebUI/src/components/InfoTable.vue
@@ -15,20 +15,56 @@
           :key="key"
         >
           <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{
-            languages[key]
+            languages[settingToTranslationKey[key]] ?? key
           }}</span>
-          <img v-if="value.type === 'image'" :src="value.image" class="info-params-image" />
-          <span v-else class="px-4 flex-auto break-word">{{ value }}</span>
+          <span class="px-4 flex-auto break-word">{{ value }}</span>
+        </li>
+      </ul>
+      <ul class="border border-color-spilter">
+        <li
+          v-for="value in props.dynamicInputs"
+          class="last:border-none border-b border-color-spilter flex items-center"
+          :key="value.label"
+        >
+          <span class="text-base font-bold px-4 items-stretch w-36 flex-none">{{
+            languages[getTranslationLabel('SETTINGS_IMAGE_COMFY_', value.label)] ?? value.label
+          }}</span>
+          <img v-if="value.type === 'image'" :src="value.current" class="info-params-image" />
+          <span v-else class="px-4 flex-auto break-word">{{ value.current }}</span>
         </li>
       </ul>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { ComfyDynamicInputWithCurrent, GenerationSettings } from '@/assets/js/store/imageGeneration'
+import { getTranslationLabel } from '@/lib/utils'
+
 const props = defineProps<{
-  generationParameters: KVObject
+  generationParameters: GenerationSettings
+  dynamicInputs?: ComfyDynamicInputWithCurrent[]
 }>()
 
+const settingToTranslationKey: Record<keyof GenerationSettings, string> = {
+  workflow: 'SETTINGS_IMAGE_WORKFLOW',
+  device: 'DEVICE',
+  imageModel: 'DOWNLOADER_MODEL',
+  inpaintModel: 'DOWNLOADER_FOR_INAPINT_GENERATE',
+  negativePrompt: 'SETTINGS_MODEL_NEGATIVE_PROMPT',
+  resolution: 'SETTINGS_MODEL_IMAGE_RESOLUTION',
+  prompt: 'INPUT_PROMPT',
+  guidanceScale: 'SETTINGS_MODEL_IMAGE_CFG',
+  inferenceSteps: 'SETTINGS_MODEL_IMAGE_STEPS',
+  seed: 'SETTINGS_MODEL_SEED',
+  lora: 'SETTINGS_MODEL_LORA',
+  scheduler: 'SETTINGS_MODEL_SCHEDULER',
+  imagePreview: 'SETTINGS_MODEL_IMAGE_PREVIEW',
+  safetyCheck: 'SETTINGS_MODEL_SAFE_CHECK',
+  batchSize: 'SETTINGS_MODEL_GENERATE_NUMBER',
+  width: 'SETTINGS_MODEL_IMAGE_WIDTH',
+  height: 'SETTINGS_MODEL_IMAGE_HEIGHT',
+}
+
 const emits = defineEmits<{
   (e: 'close'): void
 }>()
diff --git a/WebUI/src/components/SettingsImageComfyDynamic.vue b/WebUI/src/components/SettingsImageComfyDynamic.vue
index 67d8ac6f..201d3722 100644
--- a/WebUI/src/components/SettingsImageComfyDynamic.vue
+++ b/WebUI/src/components/SettingsImageComfyDynamic.vue
@@ -46,7 +46,7 @@ import { useImageGeneration } from '@/assets/js/store/imageGeneration'
 import { Input } from '../components/ui/input'
 import { LoadImage } from '../components/ui/loadImage'
 import SlideBar from '../components/SlideBar.vue'
-import { getTranslationLabel } from '@/lib/utils.ts'
+import { getTranslationLabel } from '@/lib/utils'
 
 const imageGeneration = useImageGeneration()
 </script>
diff --git a/WebUI/src/components/SettingsImageGeneration.vue b/WebUI/src/components/SettingsImageGeneration.vue
index b1a22abf..c5198348 100644
--- a/WebUI/src/components/SettingsImageGeneration.vue
+++ b/WebUI/src/components/SettingsImageGeneration.vue
@@ -66,8 +66,8 @@
         <p>{{ languages.SETTINGS_MODEL_SAFE_CHECK }}</p>
         <button
           class="v-checkbox-control flex-none w-5 h-5"
-          :class="{ 'v-checkbox-checked': imageGeneration.safeCheck }"
-          @click="() => (imageGeneration.safeCheck = !imageGeneration.safeCheck)"
+          :class="{ 'v-checkbox-checked': imageGeneration.safetyCheck }"
+          @click="() => (imageGeneration.safetyCheck = !imageGeneration.safetyCheck)"
         ></button>
       </div>
       <h2
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 74e11c31..4540c7a2 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -203,14 +203,6 @@ type LLMOutTextCallback = {
   2
 }
 
-type SDOutCallback =
-  | LoadModelCallback
-  | LoadModelComponentsCallback
-  | SDOutImageCallback
-  | SDStepEndCallback
-  | ErrorOutCallback
-  | NotEnoughDiskSpaceExceptionCallback
-
 type LoadModelAllComplete = {
   type: 'allComplete'
 }
@@ -234,22 +226,6 @@ type LoadModelComponentsCallback = {
   event: 'start' | 'finish'
 }
 
-type SDOutImageCallback = {
-  type: 'image_out'
-  index: number
-  image: string
-  safe_check_pass: boolean
-  params: StringOrNumberKV
-}
-
-type SDStepEndCallback = {
-  type: 'step_end'
-  index: number
-  step: number
-  total_step: number
-  image?: string
-}
-
 type NotEnoughDiskSpaceExceptionCallback = {
   type: 'error'
   err_type: 'not_enough_disk_space'
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 80ae3ac6..18220a48 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -44,7 +44,9 @@
           />
           <!-- eslint-enable -->
           <div
-            v-show="imageGeneration.processing && (!currentImage || currentImage?.isLoading)"
+            v-show="
+              imageGeneration.processing && (!currentImage || currentImage?.state === 'generating')
+            "
             class="absolute left-0 top-0 w-full h-full bg-black/50 flex justify-center items-center"
           >
             <loading-bar
@@ -65,11 +67,14 @@
             </div>
           </div>
           <div
-            v-show="currentImage && (!currentImage.isLoading || !imageGeneration.processing)"
+            v-show="
+              currentImage &&
+              (!(currentImage?.state === 'generating') || !imageGeneration.processing)
+            "
             class="absolute bottom-0 -right-8 box-content flex flex-col items-center justify-center gap-2"
           >
             <button
-              v-show="currentImage && !currentImage.isLoading"
+              v-show="currentImage && !(currentImage?.state === 'generating')"
               @click="postImageToEnhance"
               :title="languages.COM_POST_TO_ENHANCE_PROCESS"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -77,7 +82,7 @@
               <span class="svg-icon text-white i-transfer w-4 h-4"></span>
             </button>
             <button
-              v-show="currentImage && !currentImage.isLoading"
+              v-show="currentImage && !(currentImage?.state === 'generating')"
               @click="showParamsDialog"
               :title="languages.COM_OPEN_PARAMS"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -85,7 +90,7 @@
               <span class="svg-icon text-white i-info w-4 h-4"></span>
             </button>
             <button
-              v-show="currentImage && !currentImage.isLoading"
+              v-show="currentImage && !(currentImage?.state === 'generating')"
               @click="openImage"
               :title="languages.COM_ZOOM_IN"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -93,7 +98,7 @@
               <span class="svg-icon text-white i-zoom-in w-4 h-4"></span>
             </button>
             <button
-              v-show="currentImage && !currentImage.isLoading"
+              v-show="currentImage && !(currentImage?.state === 'generating')"
               @click="copyImage"
               :title="languages.COM_COPY"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -101,7 +106,7 @@
               <span class="svg-icon text-white i-copy w-4 h-4"></span>
             </button>
             <button
-              v-show="currentImage && !currentImage.isLoading"
+              v-show="currentImage && !(currentImage?.state === 'generating')"
               @click="openImageInFolder"
               :title="languages.COM_OPEN_LOCATION"
               class="bg-color-image-tool-button rounded-sm w-6 h-6 flex items-center justify-center"
@@ -119,7 +124,8 @@
         </div>
         <info-table
           v-show="showInfoParams"
-          :generationParameters="currentImage?.infoParams ?? {}"
+          :generationParameters="currentImage?.settings ?? {}"
+          :dynamicInputs="currentImage?.dynamicSettings"
           @close="showInfoParams = false"
         ></info-table>
       </div>
@@ -159,13 +165,13 @@ import * as toast from '@/assets/js/toast'
 import * as util from '@/assets/js/util'
 import LoadingBar from '../components/LoadingBar.vue'
 import InfoTable from '@/components/InfoTable.vue'
-import { GeneratedImage, useImageGeneration } from '@/assets/js/store/imageGeneration'
+import { Image, useImageGeneration } from '@/assets/js/store/imageGeneration'
 
 const imageGeneration = useImageGeneration()
 const i18nState = useI18N().state
 const showInfoParams = ref(false)
 const selectedImageId = ref<string | null>(null)
-const currentImage: ComputedRef<GeneratedImage | null> = computed(() => {
+const currentImage: ComputedRef<Image | null> = computed(() => {
   return imageGeneration.generatedImages.find((image) => image.id === selectedImageId.value) ?? null
 })
 watch(
@@ -213,7 +219,7 @@ function postImageToEnhance() {
 
 function showParamsDialog() {
   showInfoParams.value = true
-  console.log(currentImage.value?.infoParams)
+  console.log(currentImage.value?.settings)
 }
 
 function openImage() {
@@ -230,7 +236,8 @@ function openImageInFolder() {
 }
 
 function deleteImage() {
-  currentImage.value && imageGeneration.deleteImage(currentImage.value.id)
+  if (!currentImage.value) return
+  imageGeneration.deleteImage(currentImage.value.id)
 }
 
 function deleteAllImages() {
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index ea711fb6..d7500dc4 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -576,7 +576,7 @@ async function generate() {
         lora: imageGeneration.lora,
         scheduler: imageGeneration.scheduler,
         image_preview: imageGeneration.imagePreview,
-        safe_check: imageGeneration.safeCheck,
+        safe_check: imageGeneration.safetyCheck,
       },
       extParams,
     )

From ad0c04b647e654aa63cb7885b5bf0ef61770e4cb Mon Sep 17 00:00:00 2001
From: Markus Schuettler <markus.schuettler@tngtech.com>
Date: Sat, 22 Feb 2025 16:12:26 +0100
Subject: [PATCH 22/23] fix: improve user feedback during workflow setup

Signed-off-by: Markus Schuettler <markus.schuettler@tngtech.com>
---
 WebUI/src/assets/i18n/de.json                |  2 ++
 WebUI/src/assets/i18n/en-US.json             |  2 ++
 WebUI/src/assets/i18n/es.json                |  2 ++
 WebUI/src/assets/i18n/id.json                |  2 ++
 WebUI/src/assets/i18n/it.json                |  2 ++
 WebUI/src/assets/i18n/ja.json                |  2 ++
 WebUI/src/assets/i18n/ko.json                |  2 ++
 WebUI/src/assets/i18n/pl.json                |  2 ++
 WebUI/src/assets/i18n/th.json                |  2 ++
 WebUI/src/assets/i18n/tr.json                |  2 ++
 WebUI/src/assets/i18n/vi.json                |  2 ++
 WebUI/src/assets/i18n/zh-CN.json             |  2 ++
 WebUI/src/assets/i18n/zh-TW.json             |  2 ++
 WebUI/src/assets/js/store/comfyUi.ts         |  3 +++
 WebUI/src/assets/js/store/imageGeneration.ts | 13 +++++++++-
 WebUI/src/assets/js/store/stableDiffusion.ts |  2 ++
 WebUI/src/env.d.ts                           |  8 ------
 WebUI/src/views/Create.vue                   | 27 +++++++++++++-------
 WebUI/src/views/Enhance.vue                  |  6 +++--
 19 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/WebUI/src/assets/i18n/de.json b/WebUI/src/assets/i18n/de.json
index bab494af..5bb65b87 100644
--- a/WebUI/src/assets/i18n/de.json
+++ b/WebUI/src/assets/i18n/de.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Downloadgeschwindigkeit",
   "COM_LOADING_MODEL": "KI-Modell laden",
   "COM_LOADING_MODEL_COMPONENTS": "Komponenten des KI-Modells laden",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Workflow-Komponenten werden installiert",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Workflow-Komponenten werden geladen",
   "COM_NO_SELECTED": "Keine Auswahl",
   "COM_CONFIRM": "Bestätigen",
   "COM_CANCEL": "Abbrechen",
diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index 40ed1546..5a84de36 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Download speed",
   "COM_LOADING_MODEL": "Loading AI Model",
   "COM_LOADING_MODEL_COMPONENTS": "Loading AI Model Components",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Installing Workflow Components",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Loading Workflow Components",
   "COM_NO_SELECTED": "No Seleted",
   "COM_CONFIRM": "Confirm",
   "COM_CANCEL": "Cancel",
diff --git a/WebUI/src/assets/i18n/es.json b/WebUI/src/assets/i18n/es.json
index 38606f52..2702c051 100644
--- a/WebUI/src/assets/i18n/es.json
+++ b/WebUI/src/assets/i18n/es.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Velocidad de descarga",
   "COM_LOADING_MODEL": "Cargando modelo de inteligencia artificial",
   "COM_LOADING_MODEL_COMPONENTS": "Cargando componentes del modelo de inteligencia artificial",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Instalando componentes del flujo de trabajo",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Cargando componentes del flujo de trabajo",
   "COM_NO_SELECTED": "No seleccionado",
   "COM_CONFIRM": "Confirmar",
   "COM_CANCEL": "Cancelar",
diff --git a/WebUI/src/assets/i18n/id.json b/WebUI/src/assets/i18n/id.json
index 26e205ad..00b5ddbe 100644
--- a/WebUI/src/assets/i18n/id.json
+++ b/WebUI/src/assets/i18n/id.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Kecepatan pengunduhan",
   "COM_LOADING_MODEL": "Memuat Model AI",
   "COM_LOADING_MODEL_COMPONENTS": "Memuat Komponen Model AI",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Menginstal Komponen Alur Kerja",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Memuat Komponen Alur Kerja",
   "COM_NO_SELECTED": "Tidak Dipilih",
   "COM_CONFIRM": "Konfirmasi",
   "COM_CANCEL": "Batal",
diff --git a/WebUI/src/assets/i18n/it.json b/WebUI/src/assets/i18n/it.json
index 1d895ca5..569d9783 100644
--- a/WebUI/src/assets/i18n/it.json
+++ b/WebUI/src/assets/i18n/it.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Velocità di download",
   "COM_LOADING_MODEL": "Caricamento modello AI",
   "COM_LOADING_MODEL_COMPONENTS": "Caricamento componenti modello AI",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Installazione dei componenti del workflow",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Caricamento dei componenti del workflow",
   "COM_NO_SELECTED": "Nessuna selezione",
   "COM_CONFIRM": "Conferma",
   "COM_CANCEL": "Annulla",
diff --git a/WebUI/src/assets/i18n/ja.json b/WebUI/src/assets/i18n/ja.json
index d11f9bc2..bae2e92f 100644
--- a/WebUI/src/assets/i18n/ja.json
+++ b/WebUI/src/assets/i18n/ja.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "ダウンロード速度",
   "COM_LOADING_MODEL": "AI モデルをロードしています",
   "COM_LOADING_MODEL_COMPONENTS": "AI モデル コンポーネントをロードしています",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "ワークフローコンポーネントをインストール中",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "ワークフローコンポーネントを読み込み中",
   "COM_NO_SELECTED": "選択されていません",
   "COM_CONFIRM": "確認",
   "COM_CANCEL": "キャンセル",
diff --git a/WebUI/src/assets/i18n/ko.json b/WebUI/src/assets/i18n/ko.json
index fbc31dc7..d70d23f8 100644
--- a/WebUI/src/assets/i18n/ko.json
+++ b/WebUI/src/assets/i18n/ko.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "다운로드 속도",
   "COM_LOADING_MODEL": "AI 모델 로딩 중",
   "COM_LOADING_MODEL_COMPONENTS": "AI 모델 구성 요소 로딩 중",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "워크플로우 구성 요소 설치 중",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "워크플로우 구성 요소 로딩 중",
   "COM_NO_SELECTED": "선택된 항목 없음",
   "COM_CONFIRM": "확인",
   "COM_CANCEL": "취소",
diff --git a/WebUI/src/assets/i18n/pl.json b/WebUI/src/assets/i18n/pl.json
index 6d2954fd..e3415d3c 100644
--- a/WebUI/src/assets/i18n/pl.json
+++ b/WebUI/src/assets/i18n/pl.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Prędkość pobierania",
   "COM_LOADING_MODEL": "Ładowanie modelu AI",
   "COM_LOADING_MODEL_COMPONENTS": "Ładowanie komponentów modelu AI",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Instalowanie komponentów przepływu pracy",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Ładowanie komponentów przepływu pracy",
   "COM_NO_SELECTED": "Nie wybrano",
   "COM_CONFIRM": "Potwierdź",
   "COM_CANCEL": "Anuluj",
diff --git a/WebUI/src/assets/i18n/th.json b/WebUI/src/assets/i18n/th.json
index 52f86427..82fac536 100644
--- a/WebUI/src/assets/i18n/th.json
+++ b/WebUI/src/assets/i18n/th.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "ความเร็วในการดาวน์โหลด",
   "COM_LOADING_MODEL": "กำลังโหลดโมเดล AI",
   "COM_LOADING_MODEL_COMPONENTS": "กำลังโหลดส่วนประกอบโมเดล AI",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "กำลังติดตั้งคอมโพเนนต์เวิร์กโฟลว์",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "กำลังโหลดคอมโพเนนต์เวิร์กโฟลว์",
   "COM_NO_SELECTED": "ไม่มีการเลือก",
   "COM_CONFIRM": "ยืนยัน",
   "COM_CANCEL": "ยกเลิก",
diff --git a/WebUI/src/assets/i18n/tr.json b/WebUI/src/assets/i18n/tr.json
index cbbd431c..4d1593d9 100644
--- a/WebUI/src/assets/i18n/tr.json
+++ b/WebUI/src/assets/i18n/tr.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "İndirme Hızı",
   "COM_LOADING_MODEL": "AI Model Yükleniyor",
   "COM_LOADING_MODEL_COMPONENTS": "AI Model Bileşenleri Yükleniyor",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "İş Akışı Bileşenleri Yükleniyor",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "İş Akışı Bileşenleri Yükleniyor",
   "COM_NO_SELECTED": "Seçim Yapılmadı",
   "COM_CONFIRM": "Onayla",
   "COM_CANCEL": "İptal",
diff --git a/WebUI/src/assets/i18n/vi.json b/WebUI/src/assets/i18n/vi.json
index 18025d1e..6da2de9f 100644
--- a/WebUI/src/assets/i18n/vi.json
+++ b/WebUI/src/assets/i18n/vi.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "Tốc độ tải về",
   "COM_LOADING_MODEL": "Đang tải mô hình AI",
   "COM_LOADING_MODEL_COMPONENTS": "Đang tải thành phần mô hình AI",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "Đang cài đặt thành phần quy trình",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "Đang tải thành phần quy trình",
   "COM_NO_SELECTED": "Chưa chọn",
   "COM_CONFIRM": "Xác nhận",
   "COM_CANCEL": "Hủy bỏ",
diff --git a/WebUI/src/assets/i18n/zh-CN.json b/WebUI/src/assets/i18n/zh-CN.json
index 1ab27403..01f1bc7f 100644
--- a/WebUI/src/assets/i18n/zh-CN.json
+++ b/WebUI/src/assets/i18n/zh-CN.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "下载速度",
   "COM_LOADING_MODEL": "正在加载AI模型",
   "COM_LOADING_MODEL_COMPONENTS": "正在加载AI模型组件",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "正在安装工作流组件",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "正在加载工作流组件",
   "COM_NO_SELECTED": "未选中",
   "COM_CONFIRM": "确认",
   "COM_CANCEL": "取消",
diff --git a/WebUI/src/assets/i18n/zh-TW.json b/WebUI/src/assets/i18n/zh-TW.json
index 97fdcafe..e459936a 100644
--- a/WebUI/src/assets/i18n/zh-TW.json
+++ b/WebUI/src/assets/i18n/zh-TW.json
@@ -28,6 +28,8 @@
   "COM_DOWNLOAD_SPEED": "下載速度",
   "COM_LOADING_MODEL": "模型載入中",
   "COM_LOADING_MODEL_COMPONENTS": "模型套件載入中",
+  "COM_INSTALL_WORKFLOW_COMPONENTS": "工作流程套件安裝中",
+  "COM_LOADING_WORKFLOW_COMPONENTS": "工作流程套件載入中",
   "COM_NO_SELECTED": "無選取項目",
   "COM_CONFIRM": "確認",
   "COM_CANCEL": "取消",
diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
index b1625169..c4131cef 100644
--- a/WebUI/src/assets/js/store/comfyUi.ts
+++ b/WebUI/src/assets/js/store/comfyUi.ts
@@ -377,6 +377,8 @@ export const useComfyUi = defineStore(
       }
 
       try {
+        imageGeneration.processing = true
+        imageGeneration.currentState = 'install_workflow_components'
         await installCustomNodesForActiveWorkflowFully()
 
         const mutableWorkflow: ComfyUIApiWorkflow = JSON.parse(
@@ -435,6 +437,7 @@ export const useComfyUi = defineStore(
             )
           }
         }
+        imageGeneration.currentState = 'load_workflow_components'
       } catch (ex) {
         console.error('Error generating image', ex)
         toast.error('Backend could not generate image.')
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
index 4c1d6032..4c7f5811 100644
--- a/WebUI/src/assets/js/store/imageGeneration.ts
+++ b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -12,6 +12,17 @@ export type RefImage = {
   image: string
 }
 
+export type GenerateState =
+  | 'no_start'
+  | 'input_image'
+  | 'install_workflow_components'
+  | 'load_workflow_components'
+  | 'load_model'
+  | 'load_model_components'
+  | 'generating'
+  | 'image_out'
+  | 'error'
+
 export type ImageInfoParameter = {
   [key: string]: string | number | boolean | RefImage
 }
@@ -622,7 +633,7 @@ export const useImageGeneration = defineStore(
     })
 
     const generatedImages = ref<Image[]>([])
-    const currentState = ref<SDGenerateState>('no_start')
+    const currentState = ref<GenerateState>('no_start')
     const stepText = ref('')
 
     function loadSettingsForActiveWorkflow() {
diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
index 73253e4b..4bbc8ff5 100644
--- a/WebUI/src/assets/js/store/stableDiffusion.ts
+++ b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -57,6 +57,8 @@ const SDOutCallbackSchema = z.discriminatedUnion('type', [
   ErrorOutCallbackSchema,
 ])
 
+export type SDOutCallback = z.infer<typeof SDOutCallbackSchema>
+
 // zod schema for DefaultBackendParams
 const DefaultBackendParamsSchema = z.object({
   mode: z.number(),
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 4540c7a2..759ca3a2 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -336,14 +336,6 @@ type CheckModelAlreadyLoadedResult = {
   already_loaded: boolean
 } & CheckModelAlreadyLoadedParameters
 
-type SDGenerateState =
-  | 'no_start'
-  | 'input_image'
-  | 'load_model'
-  | 'load_model_components'
-  | 'generating'
-  | 'image_out'
-  | 'error'
 
 type BackendServiceName = 'ai-backend' | 'comfyui-backend' | 'llamacpp-backend'
 
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 18220a48..5860b753 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -44,18 +44,12 @@
           />
           <!-- eslint-enable -->
           <div
-            v-show="
-              imageGeneration.processing && (!currentImage || currentImage?.state === 'generating')
-            "
+            v-show="imageGeneration.processing"
             class="absolute left-0 top-0 w-full h-full bg-black/50 flex justify-center items-center"
           >
             <loading-bar
-              v-if="['load_model', 'load_model_components'].includes(imageGeneration.currentState)"
-              :text="
-                imageGeneration.currentState == 'load_model'
-                  ? languages.COM_LOADING_MODEL
-                  : languages.COM_LOADING_MODEL_COMPONENTS
-              "
+              v-if="['load_model', 'load_model_components', 'install_workflow_components', 'load_workflow_components'].includes(imageGeneration.currentState)"
+              :text="loadingStateToText(imageGeneration.currentState)"
               class="w-3/4"
             ></loading-bar>
             <div
@@ -243,4 +237,19 @@ function deleteImage() {
 function deleteAllImages() {
   imageGeneration.deleteAllImages()
 }
+
+function loadingStateToText(state: string) {
+  switch (state) {
+    case 'load_model':
+      return i18nState.COM_LOADING_MODEL
+    case 'load_model_components':
+      return i18nState.COM_LOADING_MODEL_COMPONENTS
+    case 'install_workflow_components':
+      return i18nState.COM_INSTALL_WORKFLOW_COMPONENTS
+    case 'load_workflow_components':
+      return i18nState.COM_LOADING_WORKFLOW_COMPONENTS
+    default:
+      return state
+  }
+}
 </script>
diff --git a/WebUI/src/views/Enhance.vue b/WebUI/src/views/Enhance.vue
index d7500dc4..27335e4f 100644
--- a/WebUI/src/views/Enhance.vue
+++ b/WebUI/src/views/Enhance.vue
@@ -329,7 +329,9 @@ import InfoTable from '@/components/InfoTable.vue'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup'
 import InpaintMask from '../components/InpaintMask.vue'
 import * as Const from '@/assets/js/const'
-import { useImageGeneration } from '@/assets/js/store/imageGeneration'
+import { useImageGeneration, type GenerateState } from '@/assets/js/store/imageGeneration'
+import { type SDOutCallback } from '@/assets/js/store/stableDiffusion'
+
 const i18nState = useI18N().state
 const globalSetup = useGlobalSetup()
 const imageGeneration = useImageGeneration()
@@ -341,7 +343,7 @@ const destImg = ref<string[]>([])
 const previewIdx = ref(-1)
 const generateIdx = ref(-999)
 const generateFinishIdx = ref(-999)
-const generateState = ref<SDGenerateState>('no_start')
+const generateState = ref<GenerateState>('no_start')
 const processing = ref(false)
 const upscaleCompt = ref<InstanceType<typeof UpscaleOptions>>()
 const imagePromptCompt = ref<InstanceType<typeof ImagePromptOptions>>()

From 0b976a4850cd58c6c750612bc053311001b2739f Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Sun, 23 Feb 2025 10:32:57 +0200
Subject: [PATCH 23/23] fix: Add translations for new variables; apply linter
 and format changes

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/i18n/de.json    | 6 +++++-
 WebUI/src/assets/i18n/en-US.json | 1 -
 WebUI/src/assets/i18n/es.json    | 6 +++++-
 WebUI/src/assets/i18n/id.json    | 6 +++++-
 WebUI/src/assets/i18n/it.json    | 6 +++++-
 WebUI/src/assets/i18n/ja.json    | 6 +++++-
 WebUI/src/assets/i18n/ko.json    | 6 +++++-
 WebUI/src/assets/i18n/pl.json    | 6 +++++-
 WebUI/src/assets/i18n/th.json    | 6 +++++-
 WebUI/src/assets/i18n/tr.json    | 6 +++++-
 WebUI/src/assets/i18n/vi.json    | 6 +++++-
 WebUI/src/assets/i18n/zh-CN.json | 6 +++++-
 WebUI/src/assets/i18n/zh-TW.json | 6 +++++-
 WebUI/src/env.d.ts               | 1 -
 WebUI/src/views/Create.vue       | 9 ++++++++-
 15 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/WebUI/src/assets/i18n/de.json b/WebUI/src/assets/i18n/de.json
index 5bb65b87..826259a5 100644
--- a/WebUI/src/assets/i18n/de.json
+++ b/WebUI/src/assets/i18n/de.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Dieses Modell erfordert viel VRAM. Reduzieren Sie bei Leistungsproblemen die Auflösung und/oder starten Sie das ComfyUI-Backend neu.",
   "WORKFLOW_HIGH_VRAM_WARNING": "Viel VRAM nötig",
   "LOADING_VERIFYING_BACKENDS": "Backends überprüfen",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI-Playground lädt"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI-Playground lädt",
+  "COM_CLEAR_HISTORY": "Verlauf löschen",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Gerät"
 }
diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index 5a84de36..01f93fa8 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -245,7 +245,6 @@
   "WORKFLOW_HIGH_VRAM_WARNING": "high VRAM required",
   "LOADING_VERIFYING_BACKENDS": "Verifying backends",
   "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Loading",
-
   "COM_CLEAR_HISTORY": "Clear History",
   "INPUT_PROMPT": "Prompt",
   "BACKEND": "Backend",
diff --git a/WebUI/src/assets/i18n/es.json b/WebUI/src/assets/i18n/es.json
index 2702c051..3d35449c 100644
--- a/WebUI/src/assets/i18n/es.json
+++ b/WebUI/src/assets/i18n/es.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Este modelo requiere mucha VRAM. Reduce la resolución y/o reinicia el backend de ComfyUI si experimentas bajo rendimiento",
   "WORKFLOW_HIGH_VRAM_WARNING": "alta VRAM requerida",
   "LOADING_VERIFYING_BACKENDS": "Verificando backends",
-  "LOADING_AI_PLAYGROUND_LOADING": "Cargando AI Playground"
+  "LOADING_AI_PLAYGROUND_LOADING": "Cargando AI Playground",
+  "COM_CLEAR_HISTORY": "Borrar historial",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Dispositivo"
 }
diff --git a/WebUI/src/assets/i18n/id.json b/WebUI/src/assets/i18n/id.json
index 00b5ddbe..11688341 100644
--- a/WebUI/src/assets/i18n/id.json
+++ b/WebUI/src/assets/i18n/id.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Model ini memerlukan banyak VRAM. Kurangi resolusi dan/atau mulai ulang backend ComfyUI jika Anda mengalami masalah kinerja.",
   "WORKFLOW_HIGH_VRAM_WARNING": "VRAM tinggi diperlukan",
   "LOADING_VERIFYING_BACKENDS": "Memverifikasi backend",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Sedang Memuat"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Sedang Memuat",
+  "COM_CLEAR_HISTORY": "Hapus Riwayat",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Perangkat"
 }
diff --git a/WebUI/src/assets/i18n/it.json b/WebUI/src/assets/i18n/it.json
index 569d9783..eeb74656 100644
--- a/WebUI/src/assets/i18n/it.json
+++ b/WebUI/src/assets/i18n/it.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Questo modello richiede molta VRAM. Riduci la risoluzione e/o riavvia il backend ComfyUI in caso di prestazioni ridotte",
   "WORKFLOW_HIGH_VRAM_WARNING": "alta VRAM richiesta",
   "LOADING_VERIFYING_BACKENDS": "Verifica backend",
-  "LOADING_AI_PLAYGROUND_LOADING": "Caricamento AI Playground"
+  "LOADING_AI_PLAYGROUND_LOADING": "Caricamento AI Playground",
+  "COM_CLEAR_HISTORY": "Cancella cronologia",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Dispositivo"
 }
diff --git a/WebUI/src/assets/i18n/ja.json b/WebUI/src/assets/i18n/ja.json
index bae2e92f..7190c527 100644
--- a/WebUI/src/assets/i18n/ja.json
+++ b/WebUI/src/assets/i18n/ja.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "このモデルは大量のビデオメモリ（VRAM）を必要とします。パフォーマンスが低下する場合は、解像度を下げるか、ComfyUIバックエンドを再起動してください。",
   "WORKFLOW_HIGH_VRAM_WARNING": "大量のビデオメモリが必要",
   "LOADING_VERIFYING_BACKENDS": "バックエンドを確認中",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 読み込み中"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 読み込み中",
+  "COM_CLEAR_HISTORY": "履歴を消去",
+  "INPUT_PROMPT": "プロンプト",
+  "BACKEND": "バックエンド",
+  "DEVICE": "デバイス"
 }
diff --git a/WebUI/src/assets/i18n/ko.json b/WebUI/src/assets/i18n/ko.json
index d70d23f8..bff66966 100644
--- a/WebUI/src/assets/i18n/ko.json
+++ b/WebUI/src/assets/i18n/ko.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "이 모델은 많은 VRAM이 필요합니다. 성능이 저하되면 해상도를 낮추거나 ComfyUI Backend를 다시 시작하세요.",
   "WORKFLOW_HIGH_VRAM_WARNING": "많은 VRAM 필요",
   "LOADING_VERIFYING_BACKENDS": "Backend 확인 중",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 로딩 중"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 로딩 중",
+  "COM_CLEAR_HISTORY": "기록 지우기",
+  "INPUT_PROMPT": "프롬프트",
+  "BACKEND": "백엔드",
+  "DEVICE": "디바이스"
 }
diff --git a/WebUI/src/assets/i18n/pl.json b/WebUI/src/assets/i18n/pl.json
index e3415d3c..cf3951c2 100644
--- a/WebUI/src/assets/i18n/pl.json
+++ b/WebUI/src/assets/i18n/pl.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Ten model wymaga dużo pamięci VRAM. Zmniejsz rozdzielczość i/lub uruchom ponownie backend ComfyUI w przypadku problemów z wydajnością.",
   "WORKFLOW_HIGH_VRAM_WARNING": "wymagana duża ilość VRAM",
   "LOADING_VERIFYING_BACKENDS": "Weryfikacja backendów",
-  "LOADING_AI_PLAYGROUND_LOADING": "Ładowanie AI Playground"
+  "LOADING_AI_PLAYGROUND_LOADING": "Ładowanie AI Playground",
+  "COM_CLEAR_HISTORY": "Wyczyść historię",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Urządzenie"
 }
diff --git a/WebUI/src/assets/i18n/th.json b/WebUI/src/assets/i18n/th.json
index 82fac536..37633083 100644
--- a/WebUI/src/assets/i18n/th.json
+++ b/WebUI/src/assets/i18n/th.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "โมเดลนี้ต้องการ VRAM จำนวนมาก ลดความละเอียดและ/หรือรีสตาร์ทแบ็กเอนด์ ComfyUI เมื่อประสบปัญหาประสิทธิภาพการทำงานที่ไม่ดี",
   "WORKFLOW_HIGH_VRAM_WARNING": "ต้องการ VRAM สูง",
   "LOADING_VERIFYING_BACKENDS": "กำลังตรวจสอบแบ็กเอนด์",
-  "LOADING_AI_PLAYGROUND_LOADING": "กำลังโหลด AI Playground"
+  "LOADING_AI_PLAYGROUND_LOADING": "กำลังโหลด AI Playground",
+  "COM_CLEAR_HISTORY": "ล้างประวัติ",
+  "INPUT_PROMPT": "พรอมต์",
+  "BACKEND": "แบ็กเอนด์",
+  "DEVICE": "อุปกรณ์"
 }
diff --git a/WebUI/src/assets/i18n/tr.json b/WebUI/src/assets/i18n/tr.json
index 4d1593d9..78728732 100644
--- a/WebUI/src/assets/i18n/tr.json
+++ b/WebUI/src/assets/i18n/tr.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Bu model çok fazla VRAM gerektiriyor. Düşük performans yaşarsanız çözünürlüğü düşürün ve/veya ComfyUI backend'ini yeniden başlatın",
   "WORKFLOW_HIGH_VRAM_WARNING": "yüksek VRAM gerekli",
   "LOADING_VERIFYING_BACKENDS": "Backend'ler doğrulanıyor",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Yükleniyor"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground Yükleniyor",
+  "COM_CLEAR_HISTORY": "Geçmişi Temizle",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Cihaz"
 }
diff --git a/WebUI/src/assets/i18n/vi.json b/WebUI/src/assets/i18n/vi.json
index 6da2de9f..70dcd79e 100644
--- a/WebUI/src/assets/i18n/vi.json
+++ b/WebUI/src/assets/i18n/vi.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "Mô hình này yêu cầu nhiều VRAM. Giảm độ phân giải và/hoặc khởi động lại backend ComfyUI khi gặp hiệu suất kém.",
   "WORKFLOW_HIGH_VRAM_WARNING": "yêu cầu VRAM cao",
   "LOADING_VERIFYING_BACKENDS": "Đang xác minh backends",
-  "LOADING_AI_PLAYGROUND_LOADING": "Đang tải AI Playground"
+  "LOADING_AI_PLAYGROUND_LOADING": "Đang tải AI Playground",
+  "COM_CLEAR_HISTORY": "Xóa lịch sử",
+  "INPUT_PROMPT": "Prompt",
+  "BACKEND": "Backend",
+  "DEVICE": "Thiết bị"
 }
diff --git a/WebUI/src/assets/i18n/zh-CN.json b/WebUI/src/assets/i18n/zh-CN.json
index 01f1bc7f..7c54aa90 100644
--- a/WebUI/src/assets/i18n/zh-CN.json
+++ b/WebUI/src/assets/i18n/zh-CN.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "此模型需要大量显存。如果遇到性能问题，请降低分辨率或重启ComfyUI后端",
   "WORKFLOW_HIGH_VRAM_WARNING": "需要大量显存",
   "LOADING_VERIFYING_BACKENDS": "验证后端",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 加载中"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 加载中",
+  "COM_CLEAR_HISTORY": "清除历史",
+  "INPUT_PROMPT": "提示",
+  "BACKEND": "后端",
+  "DEVICE": "设备"
 }
diff --git a/WebUI/src/assets/i18n/zh-TW.json b/WebUI/src/assets/i18n/zh-TW.json
index e459936a..6d6f8988 100644
--- a/WebUI/src/assets/i18n/zh-TW.json
+++ b/WebUI/src/assets/i18n/zh-TW.json
@@ -244,5 +244,9 @@
   "WORKFLOW_HIGH_VRAM_INFO": "此模型需要大量顯示記憶體。如果遇到效能問題，請降低解析度或重啟ComfyUI後端",
   "WORKFLOW_HIGH_VRAM_WARNING": "需要大量顯示記憶體",
   "LOADING_VERIFYING_BACKENDS": "驗證後端",
-  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 載入中"
+  "LOADING_AI_PLAYGROUND_LOADING": "AI Playground 載入中",
+  "COM_CLEAR_HISTORY": "清除歷史",
+  "INPUT_PROMPT": "提示",
+  "BACKEND": "後端",
+  "DEVICE": "設備"
 }
diff --git a/WebUI/src/env.d.ts b/WebUI/src/env.d.ts
index 759ca3a2..d3815f26 100644
--- a/WebUI/src/env.d.ts
+++ b/WebUI/src/env.d.ts
@@ -336,7 +336,6 @@ type CheckModelAlreadyLoadedResult = {
   already_loaded: boolean
 } & CheckModelAlreadyLoadedParameters
 
-
 type BackendServiceName = 'ai-backend' | 'comfyui-backend' | 'llamacpp-backend'
 
 type ApiServiceInformation = {
diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
index 5860b753..89a6f4f8 100644
--- a/WebUI/src/views/Create.vue
+++ b/WebUI/src/views/Create.vue
@@ -48,7 +48,14 @@
             class="absolute left-0 top-0 w-full h-full bg-black/50 flex justify-center items-center"
           >
             <loading-bar
-              v-if="['load_model', 'load_model_components', 'install_workflow_components', 'load_workflow_components'].includes(imageGeneration.currentState)"
+              v-if="
+                [
+                  'load_model',
+                  'load_model_components',
+                  'install_workflow_components',
+                  'load_workflow_components',
+                ].includes(imageGeneration.currentState)
+              "
               :text="loadingStateToText(imageGeneration.currentState)"
               class="w-3/4"
             ></loading-bar>