#58 - restore picture functionalities and add a deleteImage option

Signed-off-by: julianbollig <[email protected]>

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"
 }

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':

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,
     }
   },

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,
     }

WebUI/src/components/PaintInfo.vue

@@ -21,7 +21,7 @@
 import { useI18N } from '@/assets/js/store/i18n'
 
 const props = defineProps<{
-  params: KVObject
+  params: KVObject | undefined
 }>()
 
 const i18n = useI18N().state
@@ -46,7 +46,7 @@ function getModeText(key: string, value: number | string) {
     case 4:
       return i18n.ENHANCE_OUTPAINT
     default:
-      return 'unkonw'
+      return 'unknown'
   }
 }
 </script>

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: {

WebUI/src/views/Create.vue

@@ -1,32 +1,28 @@
 <template>
   <div id="createPanel" class="h-full flex flex-col p-4">
     <div class="image-panel flex-auto flex p-4">
-      <!--      Sidebar for display of generated images-->
       <div v-if="imageGeneration.generatedImages.length > 0" class="image-preview-panel flex-none">
         <div
           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"
         >
           <div class="image-preview-item-bg">
             <img :src="image.imageUrl" class="image-thumb" />
           </div>
         </div>
       </div>
-      <!--      Main box in where image generation process and finished image is displayed-->
       <div class="flex-auto relative flex items-center justify-center">
         <div
           class="flex justify-center items-center w-768px h-512px relative bg-color-image-bg rounded-lg border border-white/30"
         >
-          <!--          shows the currently selected image in the main box-->
           <img
             v-for="image in imageGeneration.generatedImages"
             :src="image.imageUrl"
             class="p-1 max-w-768px max-h-512px"
             v-show="imageGeneration.previewIdx === image.id"
           />
-          <!--          shows loading stage in main box-->
           <div
             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"
@@ -48,7 +44,6 @@
               <span class="text-2xl">{{ imageGeneration.stepText }}</span>
             </div>
           </div>
-          <!--          side options on what to do with the generated image-->
           <div
             v-show="currentImage && !currentImage.isLoading"
             class="absolute bottom-0 -right-8 box-content flex flex-col items-center justify-center gap-2"
@@ -85,33 +80,36 @@
               <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>
-        <!--        extra panel displaying the image properties-->
         <paint-info
-          :params="infoParams"
-          v-show="showParams"
-          @close="showParams = false"
+          v-show="showInfoParams"
+          :params="currentImage?.infoParams"
+          @close="showInfoParams = false"
         ></paint-info>
       </div>
     </div>
-    <!--    Generating prompts -->
     <div class="h-32 gap-3 flex-none flex items-center">
       <textarea
         class="rounded-xl border border-color-spilter flex-auto h-full resize-none"
@@ -148,20 +146,17 @@ 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({
   downloading: false,
   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)
 })
@@ -177,7 +172,7 @@ const emits = defineEmits<{
 
 async function generateImage() {
   await ensureModelsAreAvailable()
-  reset() // change if one wants to save images in the queue
+  reset()
   const inferenceBackendService: BackendServiceName =
     imageGeneration.backend === 'comfyui' ? 'comfyui-backend' : 'ai-backend'
   await globalSetup.resetLastUsedInferenceBackend(inferenceBackendService)
@@ -201,36 +196,31 @@ 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() {
   util.copyImage(currentImage.value?.imageUrl ?? '')
   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]
-  console.log(infoParams.value)
+function reset() {
+  downloadModel.downloading = false
+  showInfoParams.value = false
+  imageGeneration.reset()
 }
 </script>

WebUI/src/views/Enhance.vue

@@ -206,7 +206,7 @@
         <paint-info
           :params="infoParams"
           v-show="showParams"
-          @close="showParams = false"
+          @close="showInfoParams = false"
         ></paint-info>
       </div>
     </div>
@@ -693,7 +693,7 @@ function copyImage() {
 
 async function selecteImage() {
   const url = destImg.value[previewIdx.value]
-  window.electronAPI.selecteImage(url)
+  window.electronAPI.selectedImage(url)
 }
 
 function removeImage() {