#58 - fix info table for ComfyUi

Signed-off-by: julianbollig <julian.bollig@tngtech.com>

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;

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

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,41 +476,52 @@ 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),
       }
       return infoParamsTable
     }
 
     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
     }
 

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,

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() {

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>

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>

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()
+}