[WebUI] Localize tooltips (#2136)

* [WebUI]: Localize tooltips

* fix: typo in seamCorrection translation

* [WebUI]: Localize tooltips

* fix: typo in seamCorrection translation

* Add Missing Language Placeholders for Tooltip Localization

* Fix UI displacement in RU localization for options

* Fix double options during merge.

* Fix tkinter lefover

Co-authored-by: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>

backend/invoke_ai_web_server.py

@@ -17,7 +17,6 @@
 from PIL.Image import Image as ImageType
 from uuid import uuid4
 from threading import Event
-from tkinter import filedialog
 
 from ldm.generate import Generate
 from ldm.invoke.args import Args, APP_ID, APP_VERSION, calculate_init_img_hash

frontend/public/locales/options/ru.json

@@ -5,7 +5,7 @@
   "width": "Ширина",
   "height": "Высота",
   "sampler": "Семплер",
-  "seed": "Сид (Seed)",
+  "seed": "Сид",
   "randomizeSeed": "Случайный сид",
   "shuffle": "Обновить",
   "noiseThreshold": "Порог шума",

frontend/public/locales/settings/pl.json

@@ -4,7 +4,7 @@
   "saveSteps": "Zapisuj obrazy co X kroków",
   "confirmOnDelete": "Potwierdzaj usuwanie",
   "displayHelpIcons": "Wyświetlaj ikony pomocy",
-  "useCanvasBeta": "Nowego układ trybu uniwersalnego",
+  "useCanvasBeta": "Nowy układ trybu uniwersalnego",
   "enableImageDebugging": "Włącz debugowanie obrazu",
   "resetWebUI": "Zresetuj interfejs",
   "resetWebUIDesc1": "Resetowanie interfejsu wyczyści jedynie dane i ustawienia zapisane w pamięci przeglądarki. Nie usunie żadnych obrazów z dysku.",

frontend/public/locales/tooltip/de.json

@@ -0,0 +1 @@
+{}

frontend/public/locales/tooltip/en-US.json

@@ -0,0 +1,15 @@
+{
+  "feature": {
+    "prompt": "This field will take all prompt text, including both content and stylistic terms. While weights can be included in the prompt, standard CLI Commands/parameters will not work.",
+    "gallery": "As new invocations are generated, files from the output directory will be displayed here. Generations have additional options to configure new generations.",
+    "other": "These options will enable alternative processing modes for Invoke. Seamless tiling will work to generate repeating patterns in the output. High Resolution Optimization performs a two-step generation cycle, and should be used at higher resolutions when you desire a more coherent image/composition.",
+    "seed": "Seed values provide an initial set of noise which guide the denoising process, and can be randomized or populated with a seed from a previous invocation. The Threshold feature can be used to mitigate undesirable outcomes at higher CFG values (try between 0-10), and Perlin can be used to add Perlin noise into the denoising process - Both serve to add variation to your outputs.",
+    "variations": "Try a variation with an amount of between 0 and 1 to change the output image for the set seed - Interesting variations on the seed are found between 0.1 and 0.3.",
+    "upscale": "Using ESRGAN you can increase the output resolution without requiring a higher width/height in the initial generation.",
+    "faceCorrection": "Using GFPGAN or Codeformer, Face Correction will attempt to identify faces in outputs, and correct any defects/abnormalities. Higher strength values will apply a stronger corrective pressure on outputs, resulting in more appealing faces. With Codeformer, a higher fidelity will attempt to preserve the original image, at the expense of face correction strength.",
+    "imageToImage": "Image to Image allows the upload of an initial image, which InvokeAI will use to guide the generation process, along with a prompt. A lower value for this setting will more closely resemble the original image. Values between 0-1 are accepted, and a range of .25-.75 is recommended.",
+    "boundingBox": "The bounding box is analogous to the Width and Height settings for Text to Image or Image to Image. Only the area in the box will be processed.",
+    "seamCorrection": "Control the handling of visible seams which may occur when a generated image is pasted back onto the canvas.",
+    "infillAndScaling": "Manage infill methods (used on masked or erased areas of the canvas) and scaling (useful for small bounding box sizes)."
+  }
+}

frontend/public/locales/tooltip/en.json

@@ -0,0 +1,15 @@
+{
+  "feature": {
+    "prompt": "This field will take all prompt text, including both content and stylistic terms. While weights can be included in the prompt, standard CLI Commands/parameters will not work.",
+    "gallery": "As new invocations are generated, files from the output directory will be displayed here. Generations have additional options to configure new generations.",
+    "other": "These options will enable alternative processing modes for Invoke. Seamless tiling will work to generate repeating patterns in the output. High Resolution Optimization performs a two-step generation cycle, and should be used at higher resolutions when you desire a more coherent image/composition.",
+    "seed": "Seed values provide an initial set of noise which guide the denoising process, and can be randomized or populated with a seed from a previous invocation. The Threshold feature can be used to mitigate undesirable outcomes at higher CFG values (try between 0-10), and Perlin can be used to add Perlin noise into the denoising process - Both serve to add variation to your outputs.",
+    "variations": "Try a variation with an amount of between 0 and 1 to change the output image for the set seed - Interesting variations on the seed are found between 0.1 and 0.3.",
+    "upscale": "Using ESRGAN you can increase the output resolution without requiring a higher width/height in the initial generation.",
+    "faceCorrection": "Using GFPGAN or Codeformer, Face Correction will attempt to identify faces in outputs, and correct any defects/abnormalities. Higher strength values will apply a stronger corrective pressure on outputs, resulting in more appealing faces. With Codeformer, a higher fidelity will attempt to preserve the original image, at the expense of face correction strength.",
+    "imageToImage": "Image to Image allows the upload of an initial image, which InvokeAI will use to guide the generation process, along with a prompt. A lower value for this setting will more closely resemble the original image. Values between 0-1 are accepted, and a range of .25-.75 is recommended.",
+    "boundingBox": "The bounding box is analogous to the Width and Height settings for Text to Image or Image to Image. Only the area in the box will be processed.",
+    "seamCorrection": "Control the handling of visible seams which may occur when a generated image is pasted back onto the canvas.",
+    "infillAndScaling": "Manage infill methods (used on masked or erased areas of the canvas) and scaling (useful for small bounding box sizes)."
+  }
+}

frontend/public/locales/tooltip/it.json

@@ -0,0 +1 @@
+{}

frontend/public/locales/tooltip/pl.json

@@ -0,0 +1,15 @@
+{
+  "feature": {
+    "prompt": "To pole musi zawierać cały tekst sugestii, w tym zarówno opis oczekiwanej zawartości, jak i terminy stylistyczne. Chociaż wagi mogą być zawarte w sugestiach, inne parametry znane z linii poleceń nie będą działać.",
+    "gallery": "W miarę generowania nowych wywołań w tym miejscu będą wyświetlane pliki z katalogu wyjściowego. Obrazy mają dodatkowo opcje konfiguracji nowych wywołań.",
+    "other": "Opcje umożliwią alternatywne tryby przetwarzania. Płynne scalanie będzie pomocne przy generowaniu powtarzających się wzorów. Optymalizacja wysokiej rozdzielczości wykonuje dwuetapowy cykl generowania i powinna być używana przy wyższych rozdzielczościach, gdy potrzebny jest bardziej spójny obraz/kompozycja.",
+    "seed": "Inicjator określa początkowy zestaw szumów, który kieruje procesem odszumiania i może być losowy lub pobrany z poprzedniego wywołania. Funkcja \"Poziom szumu\" może być użyta do złagodzenia saturacji przy wyższych wartościach CFG (spróbuj między 0-10), a Perlin może być użyty w celu dodania wariacji do twoich wyników.",
+    "variations": "Poziom zróżnicowania przyjmuje wartości od 0 do 1 i pozwala zmienić obraz wyjściowy dla ustawionego inicjatora. Interesujące wyniki uzyskuje się zwykle między 0,1 a 0,3.",
+    "upscale": "Korzystając z ESRGAN, możesz zwiększyć rozdzielczość obrazu wyjściowego bez konieczności zwiększania szerokości/wysokości w ustawieniach początkowych.",
+    "faceCorrection": "Poprawianie twarzy próbuje identyfikować twarze na obrazie wyjściowym i korygować wszelkie defekty/nieprawidłowości. W GFPGAN im większa siła, tym mocniejszy efekt. W metodzie Codeformer wyższa wartość oznacza bardziej wierne odtworzenie oryginalnej twarzy, nawet kosztem siły korekcji.",
+    "imageToImage": "Tryb \"Obraz na obraz\" pozwala na załadowanie obrazu wzorca, który obok wprowadzonych sugestii zostanie użyty porzez InvokeAI do wygenerowania nowego obrazu. Niższa wartość tego ustawienia będzie bardziej przypominać oryginalny obraz. Akceptowane są wartości od 0 do 1, a zalecany jest zakres od 0,25 do 0,75.",
+    "boundingBox": "Zaznaczony obszar odpowiada ustawieniom wysokości i szerokości w trybach Tekst na obraz i Obraz na obraz. Jedynie piksele znajdujące się w obszarze zaznaczenia zostaną uwzględnione podczas wywoływania nowego obrazu.",
+    "seamCorrection": "Opcje wpływające na poziom widoczności szwów, które mogą wystąpić, gdy wygenerowany obraz jest ponownie wklejany na płótno.",
+    "infillAndScaling": "Zarządzaj metodami wypełniania (używanymi na zamaskowanych lub wymazanych obszarach płótna) i skalowaniem (przydatne w przypadku zaznaczonego obszaru o b. małych rozmiarach)."
+  }
+}

frontend/public/locales/tooltip/pt_br.json

@@ -0,0 +1 @@
+{}

frontend/public/locales/tooltip/ru.json

@@ -0,0 +1 @@
+{}

frontend/src/app/features.ts

@@ -1,3 +1,6 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
 type FeatureHelpInfo = {
   text: string;
   href: string;
@@ -21,60 +24,71 @@ export enum Feature {
  *
  * To-do: href & GuideImages are placeholders, and are not currently utilized, but will be updated (along with the tooltip UI) as feature and UI develop and we get a better idea on where things "forever homes" will be .
  */
-export const FEATURES: Record<Feature, FeatureHelpInfo> = {
-  [Feature.PROMPT]: {
-    text: 'This field will take all prompt text, including both content and stylistic terms. While weights can be included in the prompt, standard CLI Commands/parameters will not work.',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.GALLERY]: {
-    text: 'As new invocations are generated, files from the output directory will be displayed here. Generations have additional options to configure new generations.',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.OTHER]: {
-    text: 'These options will enable alternative processing modes for Invoke. Seamless tiling will work to generate repeating patterns in the output. High Resolution Optimization performs a two-step generation cycle, and should be used at higher resolutions when you desire a more coherent image/composition. ',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.SEED]: {
-    text: 'Seed values provide an initial set of noise which guide the denoising process, and can be randomized or populated with a seed from a previous invocation. The Threshold feature can be used to mitigate undesirable outcomes at higher CFG values (try between 0-10), and Perlin can be used to add Perlin noise into the denoising process - Both serve to add variation to your outputs. ',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.VARIATIONS]: {
-    text: 'Try a variation with an amount of between 0 and 1 to change the output image for the set seed - Interesting variations on the seed are found between 0.1 and 0.3.',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.UPSCALE]: {
-    text: 'Using ESRGAN you can increase the output resolution without requiring a higher width/height in the initial generation.',
-    href: 'link/to/docs/feature1.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.FACE_CORRECTION]: {
-    text: 'Using GFPGAN or Codeformer, Face Correction will attempt to identify faces in outputs, and correct any defects/abnormalities. Higher strength values will apply a stronger corrective pressure on outputs, resulting in more appealing faces. With Codeformer, a higher fidelity will attempt to preserve the original image, at the expense of face correction strength.',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.IMAGE_TO_IMAGE]: {
-    text: 'Image to Image allows the upload of an initial image, which InvokeAI will use to guide the generation process, along with a prompt. A lower value for this setting will more closely resemble the original image. Values between 0-1 are accepted, and a range of .25-.75 is recommended ',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.BOUNDING_BOX]: {
-    text: 'The bounding box is analogous to the Width and Height settings for Text to Image or Image to Image. Only the area in the box will be processed.',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.SEAM_CORRECTION]: {
-    text: 'Control the handling of visible seams which may occur when a generated image is pasted back onto the canvas.',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
-  [Feature.INFILL_AND_SCALING]: {
-    text: 'Manage infill methods (used on masked or erased areas of the canvas) and scaling (useful for small bounding box sizes).',
-    href: 'link/to/docs/feature3.html',
-    guideImage: 'asset/path.gif',
-  },
+const useFeatures = (): Record<Feature, FeatureHelpInfo> => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => ({
+      [Feature.PROMPT]: {
+        text: t('tooltip:feature.prompt'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.GALLERY]: {
+        text: t('tooltip:feature.gallery'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.OTHER]: {
+        text: t('tooltip:feature.other'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.SEED]: {
+        text: t('tooltip:feature.seed'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.VARIATIONS]: {
+        text: t('tooltip:feature.variations'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.UPSCALE]: {
+        text: t('tooltip:feature.upscale'),
+        href: 'link/to/docs/feature1.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.FACE_CORRECTION]: {
+        text: t('tooltip:feature.faceCorrection'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.IMAGE_TO_IMAGE]: {
+        text: t('tooltip:feature.imageToImage'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.BOUNDING_BOX]: {
+        text: t('tooltip:feature.boundingBox'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.SEAM_CORRECTION]: {
+        text: t('tooltip:feature.seamCorrection'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+      [Feature.INFILL_AND_SCALING]: {
+        text: t('tooltip:feature.infillAndScaling'),
+        href: 'link/to/docs/feature3.html',
+        guideImage: 'asset/path.gif',
+      },
+    }),
+    [t]
+  );
+};
+
+export const useFeatureHelpInfo = (feature: Feature): FeatureHelpInfo => {
+  const features = useFeatures();
+  return features[feature];
 };

frontend/src/common/components/GuidePopover.tsx

@@ -10,7 +10,7 @@ import { useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
 import { createSelector } from '@reduxjs/toolkit';
 import { ReactElement } from 'react';
-import { Feature, FEATURES } from 'app/features';
+import { Feature, useFeatureHelpInfo } from 'app/features';
 
 type GuideProps = {
   children: ReactElement;
@@ -24,7 +24,7 @@ const systemSelector = createSelector(
 
 const GuidePopover = ({ children, feature }: GuideProps) => {
   const shouldDisplayGuides = useAppSelector(systemSelector);
-  const { text } = FEATURES[feature];
+  const { text } = useFeatureHelpInfo(feature);
 
   if (!shouldDisplayGuides) return null;
 

frontend/src/i18.d.ts

@@ -8,6 +8,7 @@ import gallery from '../public/locales/gallery/en.json';
 import toast from '../public/locales/toast/en.json';
 import hotkeys from '../public/locales/hotkeys/en.json';
 import settings from '../public/locales/settings/en.json';
+import tooltip from '../public/locales/tooltip/en.json';
 import modelmanager from '../public/locales/modelmanager/en.json';
 
 declare module 'i18next' {
@@ -24,6 +25,7 @@ declare module 'i18next' {
       toast: typeof toast;
       hotkeys: typeof hotkeys;
       settings: typeof settings;
+      tooltip: typeof tooltip;
       modelmanager: typeof modelmanager;
     };
     // Never Return Null

frontend/src/i18n.ts

@@ -12,13 +12,14 @@ i18n
     debug: false,
     ns: [
       'common',
-      'options',
-      'unifiedcanvas',
       'gallery',
-      'toast',
       'hotkeys',
+      'options',
       'settings',
       'modelmanager',
+      'toast',
+      'tooltip',
+      'unifiedcanvas',
     ],
     backend: {
       loadPath: '/locales/{{ns}}/{{lng}}.json',