#58 - keep images for the next generation cycle

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
TNG · Feb 10, 2025 · 4d84f37 · 4d84f37
1 parent 8ed8211
commit 4d84f37
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/WebUI/package-lock.json b/WebUI/package-lock.json
diff --git 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
@@ -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
@@ -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,26 +745,33 @@ 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
       stableDiffusion.reset()
       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
@@ -45,38 +45,43 @@
             </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"
             >
               <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"
             >
               <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"
             >
               <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"
             >
               <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"
@@ -92,7 +97,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"
             >
@@ -169,7 +174,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)
@@ -215,9 +220,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>