[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>

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