#58 - refactoring after Dev Review - part IV

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
TNG · Feb 17, 2025 · 6c5a77a · 6c5a77a
1 parent d76e4fd
commit 6c5a77a
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -208,8 +208,8 @@
           </div>
         </div>
         <info-table
-          :params="infoParams"
           v-show="showParams"
+          :generationParameters="infoParams"
           @close="showParams = false"
         ></info-table>
       </div>