Made the text in the Workflow translatable and translated it into ger…

…man using TAIA as an example

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

WebUI/src/assets/i18n/de.json

@@ -164,5 +164,12 @@
 "ERROR_PYTHON_BACKEND_INIT": "Backend Initialisierung fehlgeschlagen",
 "ERROR_PYTHON_BACKEND_INIT_DETAILS_TEXT": "Das AI-Inferenz-Backend konnte nicht initialisiert werden. Versuchen Sie bitte die Anwendung neu zu starten. Wenn das Problem weiterhin besteht, können Sie in den Details nach weiteren Informationen zum Fehler suchen.",
 "ERROR_PYTHON_BACKEND_INIT_DETAILS": "Details",
-"ERROR_PYTHON_BACKEND_INIT_OPEN_LOG": "Open Log"
+"ERROR_PYTHON_BACKEND_INIT_OPEN_LOG": "Open Log",
+  "RELOAD_WORKFLOW_INFO": "TEST",
+  "SETTINGS_IMAGE_MODE": "Modus",
+  "SETTINGS_IMAGE_WORKFLOW": "Arbeitsablauf",
+  "WORKFLOW_RELOAD_INFO": "Arbeitsabläufe von der Festplatte neu laden.",
+  "WORKFLOW_DOWNLOAD_INFO": "Die neuesten Arbeitsabläufe herunterladen und vorhandene Arbeitsabläufe sichern.",
+  "WORKFLOW_HIGH_VRAM_INFO": "Dieses Modell benötigt viel VRAM. Reduzieren Sie die Auflösung und/oder starten Sie den ComfyUI-Backend-Server neu, wenn Sie eine schlechte Leistung erleben.",
+  "WORKFLOW_HIGH_VRAM_WARNING": "hohes VRAM erforderlich"
 }

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

@@ -208,5 +208,11 @@
   "BACKEND_ACTION": "Action",
   "BACKEND_REQUIRED_COMPONENTS_MESSAGE": "Before you can use the Intel AI Playground, we need to download some additional components. Please make sure you have a stable and unmetered internet connection.",
   "BACKEND_OPTIONAL_COMPONENTS_MESSAGE": "Optional components are not required for AI-Playground to work, but provide alternative functions. If you want to use them please click the info buttons to familiarize yourself with their terms and conditions before activating them.",
-  "BACKEND_TERMS_AND_CONDITIONS": "* I have reviewed the optional component. I agree to all terms and conditions and would like to download and enable third-party software if applicable."
+  "BACKEND_TERMS_AND_CONDITIONS": "* I have reviewed the optional component. I agree to all terms and conditions and would like to download and enable third-party software if applicable.",
+  "SETTINGS_IMAGE_MODE": "Mode",
+  "SETTINGS_IMAGE_WORKFLOW": "Workflow",
+  "WORKFLOW_RELOAD_INFO": "Reload workflows from disk.",
+  "WORKFLOW_DOWNLOAD_INFO": "Download latest workflows and back up existing workflows.",
+  "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"
 }

WebUI/src/components/SettingsImageWorkflowSelector.vue

@@ -26,7 +26,7 @@
                              @close="onComfyUIDialogClose"></comfy-u-i-download-dialog>
   <div class="items-center flex-wrap grid grid-cols-1 gap-2">
     <div class="flex flex-col gap-2">
-      <p>{{ "Mode" }}</p>
+      <p>{{ languages.SETTINGS_IMAGE_MODE }}</p>
       <div class="grid grid-cols-2 items-center gap-2 flex-wrap">
         <radio-block :checked="imageGeneration.backend === 'default'"
                      :text="'Default'"
@@ -64,8 +64,9 @@
     </div>
     <div v-if="imageGeneration.backend === 'comfyui'" class="flex flex-col gap-2">
       <div class="flex justify-between items-center pt-3">
-        <p>Workflow</p>
-        <p v-show="imageGeneration.activeWorkflow.requirements?.includes('high-vram')" data-tooltip="This model requires a lot of VRAM. Reduce the resolution and/or restart the ComfyUI backend when in case you experience a poor performance."> ⚠️ high VRAM ⚠️</p>
+        <p>{{languages.SETTINGS_IMAGE_WORKFLOW}}</p>
+        <p v-show="imageGeneration.activeWorkflow.requirements?.includes('high-vram')" :data-tooltip="highVRAMWorkflowINFO">
+          ⚠️  {{ languages.WORKFLOW_HIGH_VRAM_WARNING }}️</p>
       </div>
       <div class="flex gap-2 items-center">
         <drop-selector :array="imageGeneration.workflows.filter(w => w.backend === 'comfyui').sort(highToLowPrio)"
@@ -94,36 +95,42 @@
             </div>
           </template>
         </drop-selector>
-        <div data-tooltip="Reload workflows from disk">
+        <div :data-tooltip="reloadWorkflowINFO">
           <button class="svg-icon i-refresh w-5 h-5 text-purple-500"
                   @click="imageGeneration.loadWorkflowsFromJson"></button>
         </div>
         <div
-            data-tooltip="Download latest workflows and back up existing workflows">
+            :data-tooltip="downloadWorkflowINFO">
           <button class="svg-icon i-download-cloud w-5 h-5 text-purple-500"
                   @click="loadWorkflowsFromIntel"></button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+
+
 import {ComfyUiWorkflow, useImageGeneration} from "@/assets/js/store/imageGeneration";
 import DropSelector from "../components/DropSelector.vue";
 import RadioBlock from "../components/RadioBlock.vue";
 import {useBackendServices} from "@/assets/js/store/backendServices.ts";
 import ComfyUIDownloadDialog from "@/components/ComfyUIDownloadDialog.vue";
 import {toast} from '@/assets/js/toast';
-import {Input} from "@/components/ui/input";
 import {useI18N} from "@/assets/js/store/i18n.ts";
-
 const i18nState = useI18N().state;
+
 const imageGeneration = useImageGeneration();
 const backendServices = useBackendServices();
 
 const hdConfirmationDialog = ref<HTMLDialogElement>();
 const hdWarningOverride = ref(false);
-const showVramInfo = ref(false);
+
+const reloadWorkflowINFO = computed(() => i18nState.WORKFLOW_RELOAD_INFO)
+const downloadWorkflowINFO = computed(() => i18nState.WORKFLOW_DOWNLOAD_INFO)
+const highVRAMWorkflowINFO = computed(() => i18nState.WORKFLOW_HIGH_VRAM_INFO)
+
 
 const showComfyUIDownloadDialog = ref(false);
 
@@ -244,6 +251,5 @@ const stringToColour = (str: string) => {
   border-radius: 0.5rem;
   padding: .7em;
   z-index: 10;
-
 }
 </style>