fix merge issues and tweak translations

WebUI/src/assets/i18n/de.json

@@ -5,8 +5,8 @@
   "COM_CLOSE": "Schließen",
   "COM_ADD": "Hinzufügen",
   "COM_RESTORE": "Defaults wiederherstellen",
-  "COM_SD_PROMPT": "Eingabeaufforderung für Bildgenerierung",
-  "COM_LLM_PROMPT": "Eingabeaufforderung für Antwortgenerierung",
+  "COM_SD_PROMPT": "Prompt für Bildgenerierung",
+  "COM_LLM_PROMPT": "Prompt für Antwortgenerierung",
   "COM_LLM_HF_PROMPT": "<Namespace>/<Repo-Name>",
   "COM_LLM_HF_PROMPT_GGUF": "<Namespace>/<Repo-Name>/<Dateipfad>",
   "COM_CLICK_UPLOAD": "- Klicken Sie zum Hochladen eines Bildes -",
@@ -44,7 +44,7 @@
   "COM_FULLSCREEN_EXIT": "Vollbild beenden",
   "COM_DO_NOT_SHOW_AGAIN": "Nicht wieder anzeigen",
   "COM_INSTALL": "Installieren",
-  "COM_INSTALL_ALL": "Installieren/Reparieren aller ausgewählten",
+  "COM_INSTALL_ALL": "Installieren/Reparieren der ausgewählten Backends",
   "COM_REPAIR": "Reparieren",
   "COM_CONTINUE": "Fortsetzen",
   "COM_GO_TO_SETUP": "Zum Backend-Manager gehen",
@@ -73,7 +73,7 @@
   "SETTINGS_MODEL_MANUAL_OPTIONS": "Manuelle Optionen",
   "SETTINGS_MODEL_NEGATIVE_PROMPT": "Negativer Prompt",
   "SETTINGS_MODEL_SEED": "Seed",
-  "SETTINGS_MODEL_GENERATE_NUMBER": "Bildanzahl generieren",
+  "SETTINGS_MODEL_GENERATE_NUMBER": "Bildanzahl",
   "SETTINGS_MODEL_LLM_MODEL": "Großes Sprachmodell",
   "SETTINGS_MODEL_IMAGE_PREVIEW": "Bildvorschau",
   "SETTINGS_MODEL_SAFE_CHECK": "Sicherheitsprüfung",
@@ -112,8 +112,8 @@
   "SETTINGS_MODEL_DOWNLOAD_DESC": "Unten finden Sie eine Liste von Modellen, die verschiedene KI-Aufgaben in AI-Playground ausführen können. Überprüfen Sie die Bedingungen jedes Modells, bevor Sie es herunterladen und verwenden. Alternativ können Sie andere Modellquellen auswählen, indem Sie die Modellpfade und -defaults oben ändern.",
   "TAB_CREATE": "Erstellen",
   "TAB_ENHANCE": "Verbessern",
-  "TAB_ANSWER": "Antwort",
-  "TAB_LEARN_MORE": "Mehr erfahren",
+  "TAB_ANSWER": "Antworten",
+  "TAB_LEARN_MORE": "Mehr Erfahren",
   "ENHANCE_INPUT_IMAGE_REQUIRED": "Bitte setzen Sie das Input-Bild vor der Generierung",
   "ENHANCE_UPSCALE": "Auflösung erhöhen",
   "ENHANCE_IMAGE_PROMPT": "Bild-Prompt",
@@ -127,11 +127,11 @@
   "ENHANCE_UPSCALE_VARIATION_DISABLE": "Subtil",
   "ENHANCE_UPSCALE_VARIATION_STRONG": "Stark",
   "ENHANCE_INPAINT_TYPE": "Typ",
-  "ENHANCE_INPAINT_FILL": "Mit etwas Neuem füllen",
-  "ENHANCE_INPAINT_FIX": "Reparieren und Korrigieren des maskierten Bereichs",
+  "ENHANCE_INPAINT_FILL": "Bereich mit neuem Inhalt füllen",
+  "ENHANCE_INPAINT_FIX": "Reparieren des maskierten Bereichs",
   "ENHANCE_INPAINT_MASK_REQUIRED": "Bitte zeichnen Sie die Inpaint-Maske vor der Generierung",
   "ENHANCE_INPAINT_USE_IMAGE_MODEL": "Aktuelles Bildmodell verwenden",
-  "ENHANCE_COM_DENOISE": "Rauschreduktionsfaktor",
+  "ENHANCE_COM_DENOISE": "Stärke",
   "ENHANCE_OUTPAINT_DIRECTION": "Richtung",
   "ENHANCE_PREVIEW_BEFORE_PROCESS": "Vor dem Prozess",
   "ENHANCE_PREVIEW_AFTER_PROCESS": "Nach dem Prozess",
@@ -142,10 +142,11 @@
   "ERROR_UNSUPPORTED_IMAGE_TYPE": "Nur PNG-, JPG-, GIF- und BMP-Bildformate werden unterstützt",
   "ANSWER_USER_NAME": "Sie",
   "ANSWER_AI_NAME": "Playground",
+  "ANSWER_NEW_CONVERSATION": "Neuer Chat",
   "ANSWER_ERROR_NOT_PROMPT": "Bitte geben Sie einen Prompt ein",
   "ANSWER_ERROR_CLEAR_SESSION": "Chat-Verlauf löschen",
-  "INCREASE_FONT_SIZE": "Schriftgröße vergrößern",
-  "DECREASE_FONT_SIZE": "Schriftgröße verringern",
+  "INCREASE_FONT_SIZE": "Schrift vergrößern",
+  "DECREASE_FONT_SIZE": "Schrift verkleinern",
   "ANSWER_RAG_ENABLE": "Datei-Abfrage aktivieren",
   "ANSWER_RAG_OPEN_DIALOG": "Datei-Uploader öffnen",
   "REQUEST_LLM_MODEL_NAME": "Fügen Sie ein Modell Ihrer Wahl von huggingface.co hinzu",
@@ -215,9 +216,9 @@
   "BACKEND_ACTION": "Aktion",
   "BACKEND_REQUIRED": "Erforderlich",
   "BACKEND_OPTIONAL": "Optional",
-  "BACKEND_REQUIRED_COMPONENTS_MESSAGE": "Bevor Sie die Intel AI-Playground verwenden können, müssen einige zusätzliche Komponenten herunterladen werden. Bitte stellen Sie sicher, dass Sie eine stabile und unlimitierte Internetverbindung haben.",
-  "BACKEND_OPTIONAL_COMPONENTS_MESSAGE": "Optionale Komponenten sind nicht erforderlich, um die AI-Playground zu verwenden, bieten aber erweiterte Funktionen. Wenn Sie sie verwenden möchten, klicken Sie bitte auf die Info-Schaltflächen, um sich mit den Nutzungsbedingungen vertraut zu machen, bevor Sie sie aktivieren.",
-  "BACKEND_TERMS_AND_CONDITIONS": "* Ich habe die optionale Komponente überprüft. Ich stimme allen Nutzungsbedingungen zu und möchte die Drittanbieter-Software herunterladen und aktivieren, falls sie anwendbar ist.",
+  "BACKEND_REQUIRED_COMPONENTS_MESSAGE": "Bevor Sie den Intel AI-Playground verwenden können, müssen einige zusätzliche Komponenten herunterladen werden. Bitte stellen Sie sicher, dass Sie eine stabile Internetverbindung mit unbegrenztem Datenvolumen haben.",
+  "BACKEND_OPTIONAL_COMPONENTS_MESSAGE": "Optionale Komponenten sind nicht erforderlich, um den AI-Playground zu verwenden, bieten aber erweiterte Funktionen. Wenn Sie sie verwenden möchten, klicken Sie bitte auf die Info-Schaltflächen, um sich mit den Nutzungsbedingungen vertraut zu machen, bevor Sie sie aktivieren.",
+  "BACKEND_TERMS_AND_CONDITIONS": "* Ich habe die optionale Komponente überprüft. Ich stimme allen Nutzungsbedingungen zu und möchte die Drittanbieter-Software herunterladen und aktivieren, falls zutreffend.",
   "BACKEND_STATUS_RUNNING": "Läuft",
   "BACKEND_STATUS_STOPPING": "Beendet",
   "BACKEND_STATUS_STARTING": "Startet",
@@ -239,7 +240,7 @@
   "WORKFLOW_RELOAD_INFO": "Workflows von der Festplatte laden.",
   "WORKFLOW_DOWNLOAD_INFO": "Neueste Workflows herunterladen und vorhandene Workflows sichern.",
   "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": "hohes VRAM erforderlich",
+  "WORKFLOW_HIGH_VRAM_WARNING": "Viel VRAM nötig",
   "LOADING_VERIFYING_BACKENDS": "Backends überprüfen",
   "LOADING_AI_PLAYGROUND_LOADING": "AI-Playground lädt"
 }

WebUI/src/assets/i18n/en-US.json

@@ -145,6 +145,7 @@
   "ERROR_UNSUPPORTED_IMAGE_TYPE": "Only supports PNG, JPG, GIF, and BMP image formats",
   "ANSWER_USER_NAME": "You",
   "ANSWER_AI_NAME": "Playground",
+  "ANSWER_NEW_CONVERSATION": "New Conversation",
   "ANSWER_ERROR_NOT_PROMPT": "Please input prompt",
   "ANSWER_ERROR_CLEAR_SESSION": "Clear Chat History",
   "INCREASE_FONT_SIZE": "Enlarge Text",

WebUI/src/assets/i18n/ja.json

@@ -39,7 +39,7 @@
   "SETTINGS_TAB_MODEL": "モデル",
   "SETTINGS_INFERENCE_DEVICE": "推論デバイス",
   "SETTINGS_MODEL_IMAGE_RESOLUTION": "画像解像度",
-  "SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD": "標準",
+  "SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD": "標準",
   "SETTINGS_MODEL_IMAGE_RESOLUTION_HD": "HD",
   "SETTINGS_MODEL_QUALITY": "生成品質",
   "SETTINGS_MODEL_QUALITY_STANDARD": "標準",

WebUI/src/assets/i18n/pl.json

@@ -39,7 +39,7 @@
   "SETTINGS_TAB_MODEL": "Modele",
   "SETTINGS_INFERENCE_DEVICE": "Urządzenie do wnioskowania",
   "SETTINGS_MODEL_IMAGE_RESOLUTION": "Rozdzielczość obrazu",
-  "SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD": "Standardowa",
+  "SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD": "Standardowa",
   "SETTINGS_MODEL_IMAGE_RESOLUTION_HD": "HD",
   "SETTINGS_MODEL_QUALITY": "Jakość generowania",
   "SETTINGS_MODEL_QUALITY_STANDARD": "Standardowa",

WebUI/src/assets/i18n/th.json

@@ -39,7 +39,7 @@
   "SETTINGS_TAB_MODEL": "โมเดล",
   "SETTINGS_INFERENCE_DEVICE": "Inference Device",
   "SETTINGS_MODEL_IMAGE_RESOLUTION": "ความละเอียดของภาพ",
-  "SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD": "มาตรฐาน",
+  "SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD": "มาตรฐาน",
   "SETTINGS_MODEL_IMAGE_RESOLUTION_HD": "HD",
   "SETTINGS_MODEL_QUALITY": "คุณภาพที่ต้องการ",
   "SETTINGS_MODEL_QUALITY_STANDARD": "มาตรฐาน",

WebUI/src/assets/i18n/vi.json

@@ -39,7 +39,7 @@
   "SETTINGS_TAB_MODEL": "Mẫu",
   "SETTINGS_INFERENCE_DEVICE": "Thiết bị suy luận",
   "SETTINGS_MODEL_IMAGE_RESOLUTION": "Độ phân giải ảnh",
-  "SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD": "Tiêu chuẩn",
+  "SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD": "Tiêu chuẩn",
   "SETTINGS_MODEL_IMAGE_RESOLUTION_HD": "Cao",
   "SETTINGS_MODEL_QUALITY": "Chất lượng đầu ra",
   "SETTINGS_MODEL_QUALITY_STANDARD": "Tiêu chuẩn",

WebUI/src/assets/i18n/zh-TW.json

@@ -39,7 +39,7 @@
   "SETTINGS_TAB_MODEL": "模型",
   "SETTINGS_INFERENCE_DEVICE": "推論裝置",
   "SETTINGS_MODEL_IMAGE_RESOLUTION": "圖像生成解析度",
-  "SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD": "標準",
+  "SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD": "標準",
   "SETTINGS_MODEL_IMAGE_RESOLUTION_HD": "高解析",
   "SETTINGS_MODEL_QUALITY": "圖像生成畫質",
   "SETTINGS_MODEL_QUALITY_STANDARD": "標準畫質",

WebUI/src/auto-import.d.ts

@@ -6,81 +6,66 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const EffectScope: (typeof import('vue'))['EffectScope']
-  const computed: (typeof import('vue'))['computed']
-  const createApp: (typeof import('vue'))['createApp']
-  const customRef: (typeof import('vue'))['customRef']
-  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
-  const defineComponent: (typeof import('vue'))['defineComponent']
-  const effectScope: (typeof import('vue'))['effectScope']
-  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
-  const getCurrentScope: (typeof import('vue'))['getCurrentScope']
-  const h: (typeof import('vue'))['h']
-  const inject: (typeof import('vue'))['inject']
-  const isProxy: (typeof import('vue'))['isProxy']
-  const isReactive: (typeof import('vue'))['isReactive']
-  const isReadonly: (typeof import('vue'))['isReadonly']
-  const isRef: (typeof import('vue'))['isRef']
-  const markRaw: (typeof import('vue'))['markRaw']
-  const nextTick: (typeof import('vue'))['nextTick']
-  const onActivated: (typeof import('vue'))['onActivated']
-  const onBeforeMount: (typeof import('vue'))['onBeforeMount']
-  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
-  const onDeactivated: (typeof import('vue'))['onDeactivated']
-  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
-  const onMounted: (typeof import('vue'))['onMounted']
-  const onRenderTracked: (typeof import('vue'))['onRenderTracked']
-  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
-  const onScopeDispose: (typeof import('vue'))['onScopeDispose']
-  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
-  const onUnmounted: (typeof import('vue'))['onUnmounted']
-  const onUpdated: (typeof import('vue'))['onUpdated']
-  const onWatcherCleanup: (typeof import('vue'))['onWatcherCleanup']
-  const provide: (typeof import('vue'))['provide']
-  const reactive: (typeof import('vue'))['reactive']
-  const readonly: (typeof import('vue'))['readonly']
-  const ref: (typeof import('vue'))['ref']
-  const resolveComponent: (typeof import('vue'))['resolveComponent']
-  const shallowReactive: (typeof import('vue'))['shallowReactive']
-  const shallowReadonly: (typeof import('vue'))['shallowReadonly']
-  const shallowRef: (typeof import('vue'))['shallowRef']
-  const toRaw: (typeof import('vue'))['toRaw']
-  const toRef: (typeof import('vue'))['toRef']
-  const toRefs: (typeof import('vue'))['toRefs']
-  const toValue: (typeof import('vue'))['toValue']
-  const triggerRef: (typeof import('vue'))['triggerRef']
-  const unref: (typeof import('vue'))['unref']
-  const useAttrs: (typeof import('vue'))['useAttrs']
-  const useCssModule: (typeof import('vue'))['useCssModule']
-  const useCssVars: (typeof import('vue'))['useCssVars']
-  const useId: (typeof import('vue'))['useId']
-  const useModel: (typeof import('vue'))['useModel']
-  const useSlots: (typeof import('vue'))['useSlots']
-  const useTemplateRef: (typeof import('vue'))['useTemplateRef']
-  const watch: (typeof import('vue'))['watch']
-  const watchEffect: (typeof import('vue'))['watchEffect']
-  const watchPostEffect: (typeof import('vue'))['watchPostEffect']
-  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    ComponentPublicInstance,
-    ComputedRef,
-    DirectiveBinding,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    MaybeRef,
-    MaybeRefOrGetter,
-    VNode,
-    WritableComputedRef,
-  } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

WebUI/src/components/SettingsModel.vue

@@ -213,7 +213,7 @@
 
       <div class="flex justify-between items-center gap-6">
         <span class="text-gray-300 flex-auto"
-          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD }}: dreamshaper-8</span
+          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD }}: dreamshaper-8</span
         >
         <span class="flex-none text-right">6.46 GB</span>
         <button
@@ -240,7 +240,7 @@
       <p>{{ languages.DOWNLOADER_FOR_INAPINT_GENERATE }}</p>
       <div class="flex justify-between items-center gap-6">
         <span class="text-gray-300 flex-auto"
-          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD }}: dreamshaper-8-inpainting</span
+          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD }}: dreamshaper-8-inpainting</span
         >
         <span class="flex-none text-right">4.45 GB</span>
         <button
@@ -255,7 +255,7 @@
       <p>{{ languages.DOWNLOADER_FOR_IMAGE_LORA }}</p>
       <div class="flex items-center gap-4">
         <span class="text-gray-300 flex-auto"
-          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD }}: lcm-lora-sdv1-5</span
+          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD }}: lcm-lora-sdv1-5</span
         >
         <span class="flex-none text-right">128 MB</span>
         <button
@@ -295,7 +295,7 @@
       <p>{{ languages.DOWNLOADER_FOR_RAG_QUERY }}</p>
       <div class="flex items-center gap-4">
         <span class="text-gray-300 flex-auto"
-          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STRANDARD }}: bge-large-en-v1.5</span
+          >{{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_STANDARD }}: bge-large-en-v1.5</span
         >
         <span class="flex-none text-right">1.25 GB</span>
         <button

WebUI/src/components/ui/loadImage/LoadImage.vue

@@ -24,7 +24,7 @@
           props.class,
         )
       "
-      >Load Image</label
+      >{{ languages.COM_LOAD_IMAGE }}</label
     >
   </div>
 </template>
@@ -89,34 +89,3 @@ function processFiles(files: File[] | null, inputCurrent: Ref<string, string>) {
   }
 }
 </script>
-
-<template>
-  <div ref="imgDropZone" class="flex justify-center relative">
-    <div
-      v-show="isOverDropZone"
-      class="bg-black/70 absolute inset-0 flex items-center justify-center text-white text-lg"
-    >
-      Load Image
-    </div>
-    <img :src="imageUrlRef.value as string" alt="Image" class="w-64 py-4 object-scale-down" />
-  </div>
-  <div class="flex justify-center">
-    <input
-      :id="id"
-      :accept="acceptedImageTypes.join(',')"
-      type="file"
-      class="hidden"
-      v-on:change="(e: Event) => handleFilesEvent(imageUrlRef as Ref<string, string>)(e)"
-    />
-    <label
-      :for="id"
-      :class="
-        cn(
-          'text-base bg-color-active py-1 px-6 rounded hover:opacity-90 hover:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ',
-          props.class,
-        )
-      "
-      >Load Image</label
-    >
-  </div>
-</template>