fix(ui): add missing translation strings

invokeai/frontend/web/public/locales/en.json

@@ -45,10 +45,12 @@
         "accept": "Accept",
         "advanced": "Advanced",
         "areYouSure": "Are you sure?",
+        "auto": "Auto",
         "back": "Back",
         "batch": "Batch Manager",
         "cancel": "Cancel",
         "close": "Close",
+        "on": "On",
         "communityLabel": "Community",
         "controlNet": "ControlNet",
         "controlAdapter": "Control Adapter",
@@ -133,7 +135,8 @@
         "upload": "Upload"
     },
     "controlnet": {
-        "controlAdapter": "Control Adapter",
+        "controlAdapter_one": "Control Adapter",
+        "controlAdapter_other": "Control Adapters",
         "controlnet": "$t(controlnet.controlAdapter) #{{number}} ($t(common.controlNet))",
         "ip_adapter": "$t(controlnet.controlAdapter) #{{number}} ($t(common.ipAdapter))",
         "t2i_adapter": "$t(controlnet.controlAdapter) #{{number}} ($t(common.t2iAdapter))",
@@ -702,6 +705,7 @@
         "vae": "VAE",
         "vaeLocation": "VAE Location",
         "vaeLocationValidationMsg": "Path to where your VAE is located.",
+        "vaePrecision": "VAE Precision",
         "vaeRepoID": "VAE Repo ID",
         "vaeRepoIDValidationMsg": "Online repository of your VAE",
         "variant": "Variant",
@@ -922,6 +926,7 @@
     },
     "parameters": {
         "aspectRatio": "Aspect Ratio",
+        "aspectRatioFree": "Free",
         "boundingBoxHeader": "Bounding Box",
         "boundingBoxHeight": "Bounding Box Height",
         "boundingBoxWidth": "Bounding Box Width",

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -45,7 +45,7 @@ const selector = createSelector(
 
     return {
       activeLayerColor,
-      activeLayerString: layer.charAt(0).toUpperCase() + layer.slice(1),
+      layer,
       boundingBoxColor,
       boundingBoxCoordinatesString: `(${roundToHundreth(
         boxX
@@ -73,7 +73,7 @@ const selector = createSelector(
 const IAICanvasStatusText = () => {
   const {
     activeLayerColor,
-    activeLayerString,
+    layer,
     boundingBoxColor,
     boundingBoxCoordinatesString,
     boundingBoxDimensionsString,
@@ -116,7 +116,9 @@ const IAICanvasStatusText = () => {
         style={{
           color: activeLayerColor,
         }}
-      >{`${t('unifiedCanvas.activeLayer')}: ${activeLayerString}`}</Box>
+      >{`${t('unifiedCanvas.activeLayer')}: ${t(
+        `unifiedCanvas.${layer}`
+      )}`}</Box>
       <Box>{`${t('unifiedCanvas.canvasScale')}: ${canvasScaleString}%`}</Box>
       {shouldPreserveMaskedArea && (
         <Box
@@ -124,7 +126,7 @@ const IAICanvasStatusText = () => {
             color: warningColor,
           }}
         >
-          Preserve Masked Area: On
+          {t('unifiedCanvas.preserveMaskedArea')}: {t('common.on')}
         </Box>
       )}
       {shouldShowBoundingBox && (

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdaptersCollapse.tsx

@@ -89,7 +89,12 @@ const ControlAdaptersCollapse = () => {
   }
 
   return (
-    <IAICollapse label="Control Adapters" activeLabel={activeLabel}>
+    <IAICollapse
+      label={t('controlnet.controlAdapter', {
+        count: controlAdapterIds.length,
+      })}
+      activeLabel={activeLabel}
+    >
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ButtonGroup size="sm" w="full" justifyContent="space-between">
           <IAIButton

invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx

@@ -1,7 +1,9 @@
 import { Badge, Flex } from '@chakra-ui/react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const AutoAddIcon = () => {
+  const { t } = useTranslation();
   return (
     <Flex
       sx={{
@@ -15,7 +17,7 @@ const AutoAddIcon = () => {
         variant="solid"
         sx={{ bg: 'accent.400', _dark: { bg: 'accent.500' } }}
       >
-        auto
+        {t('common.auto')}
       </Badge>
     </Flex>
   );

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -20,6 +20,7 @@ import BoardsList from './Boards/BoardsList/BoardsList';
 import GalleryBoardName from './GalleryBoardName';
 import GallerySettingsPopover from './GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   [stateSelector],
@@ -34,6 +35,7 @@ const selector = createSelector(
 );
 
 const ImageGalleryContent = () => {
+  const { t } = useTranslation();
   const resizeObserverRef = useRef<HTMLDivElement>(null);
   const galleryGridRef = useRef<HTMLDivElement>(null);
   const { galleryView } = useAppSelector(selector);
@@ -111,7 +113,7 @@ const ImageGalleryContent = () => {
                   leftIcon={<FaImages />}
                   data-testid="images-tab"
                 >
-                  Images
+                  {t('gallery.images')}
                 </Tab>
                 <Tab
                   as={IAIButton}
@@ -124,7 +126,7 @@ const ImageGalleryContent = () => {
                   leftIcon={<FaServer />}
                   data-testid="assets-tab"
                 >
-                  Assets
+                  {t('gallery.assets')}
                 </Tab>
               </ButtonGroup>
             </TabList>

invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx

@@ -9,6 +9,7 @@ import { memo } from 'react';
 import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
 import ParamLoraList from './ParamLoraList';
 import ParamLoRASelect from './ParamLoraSelect';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   stateSelector,
@@ -22,6 +23,7 @@ const selector = createSelector(
 );
 
 const ParamLoraCollapse = () => {
+  const { t } = useTranslation();
   const { activeLabel } = useAppSelector(selector);
 
   const isLoraEnabled = useFeatureStatus('lora').isFeatureEnabled;
@@ -31,7 +33,7 @@ const ParamLoraCollapse = () => {
   }
 
   return (
-    <IAICollapse label="LoRA" activeLabel={activeLabel}>
+    <IAICollapse label={t('modelManager.loraModels')} activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamLoRASelect />
         <ParamLoraList />

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx

@@ -6,10 +6,11 @@ import {
   setAspectRatio,
   setShouldLockAspectRatio,
 } from 'features/parameters/store/generationSlice';
+import i18next from 'i18next';
 import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
 
 const aspectRatios = [
-  { name: 'Free', value: null },
+  { name: i18next.t('parameters.aspectRatioFree'), value: null },
   { name: '2:3', value: 2 / 3 },
   { name: '16:9', value: 16 / 9 },
   { name: '1:1', value: 1 / 1 },

invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx

@@ -7,6 +7,7 @@ import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { vaePrecisionChanged } from 'features/parameters/store/generationSlice';
 import { PrecisionParam } from 'features/parameters/types/parameterSchemas';
 import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   stateSelector,
@@ -20,6 +21,7 @@ const selector = createSelector(
 const DATA = ['fp16', 'fp32'];
 
 const ParamVAEModelSelect = () => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { vaePrecision } = useAppSelector(selector);
 
@@ -37,7 +39,7 @@ const ParamVAEModelSelect = () => {
   return (
     <IAIInformationalPopover feature="paramVAEPrecision">
       <IAIMantineSelect
-        label="VAE Precision"
+        label={t('modelManager.vaePrecision')}
         value={vaePrecision}
         data={DATA}
         onChange={handleChange}

invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx

@@ -60,9 +60,9 @@ const QueueButtonTooltipContent = ({ prepend = false }: Props) => {
       )}
       <StyledDivider />
       <Text fontWeight={400} fontStyle="oblique 10deg">
-        Adding images to{' '}
+        {t('parameters.invoke.addingImagesTo')}{' '}
         <Text as="span" fontWeight={600}>
-          {autoAddBoardName || 'Uncategorized'}
+          {autoAddBoardName || t('boards.uncategorized')}
         </Text>
       </Text>
     </Flex>

invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx

@@ -14,6 +14,7 @@ import { generationSelector } from 'features/parameters/store/generationSelector
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 import ParamSDXLImg2ImgDenoisingStrength from './ParamSDXLImg2ImgDenoisingStrength';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   [uiSelector, generationSelector],
@@ -29,10 +30,15 @@ const selector = createSelector(
 );
 
 const SDXLImageToImageTabCoreParameters = () => {
+  const { t } = useTranslation();
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
+    <IAICollapse
+      label={t('parameters.general')}
+      activeLabel={activeLabel}
+      defaultIsOpen={true}
+    >
       <Flex
         sx={{
           flexDirection: 'column',

invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx

@@ -12,6 +12,7 @@ import ParamSteps from 'features/parameters/components/Parameters/Core/ParamStep
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 import { memo } from 'react';
 import ParamSDXLImg2ImgDenoisingStrength from './ParamSDXLImg2ImgDenoisingStrength';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   stateSelector,
@@ -27,10 +28,15 @@ const selector = createSelector(
 );
 
 const SDXLUnifiedCanvasTabCoreParameters = () => {
+  const { t } = useTranslation();
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
+    <IAICollapse
+      label={t('parameters.general')}
+      activeLabel={activeLabel}
+      defaultIsOpen={true}
+    >
       <Flex
         sx={{
           flexDirection: 'column',

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx

@@ -11,14 +11,16 @@ import ImageToImageStrength from 'features/parameters/components/Parameters/Imag
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 import { useCoreParametersCollapseLabel } from 'features/parameters/util/useCoreParametersCollapseLabel';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const ImageToImageTabCoreParameters = () => {
+  const { t } = useTranslation();
   const shouldUseSliders = useAppSelector((state) => state.ui.shouldUseSliders);
   const { iterationsAndSeedLabel } = useCoreParametersCollapseLabel();
 
   return (
     <IAICollapse
-      label="General"
+      label={t('parameters.general')}
       activeLabel={iterationsAndSeedLabel}
       defaultIsOpen={true}
     >

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx

@@ -9,14 +9,16 @@ import ParamSteps from 'features/parameters/components/Parameters/Core/ParamStep
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 import { useCoreParametersCollapseLabel } from 'features/parameters/util/useCoreParametersCollapseLabel';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const TextToImageTabCoreParameters = () => {
+  const { t } = useTranslation();
   const shouldUseSliders = useAppSelector((state) => state.ui.shouldUseSliders);
   const { iterationsAndSeedLabel } = useCoreParametersCollapseLabel();
 
   return (
     <IAICollapse
-      label="General"
+      label={t('parameters.general')}
       activeLabel={iterationsAndSeedLabel}
       defaultIsOpen={true}
     >

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx

@@ -10,14 +10,16 @@ import ImageToImageStrength from 'features/parameters/components/Parameters/Imag
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
 import { useCoreParametersCollapseLabel } from 'features/parameters/util/useCoreParametersCollapseLabel';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const UnifiedCanvasCoreParameters = () => {
+  const { t } = useTranslation();
   const shouldUseSliders = useAppSelector((state) => state.ui.shouldUseSliders);
   const { iterationsAndSeedLabel } = useCoreParametersCollapseLabel();
 
   return (
     <IAICollapse
-      label="General"
+      label={t('parameters.general')}
       activeLabel={iterationsAndSeedLabel}
       defaultIsOpen={true}
     >

invokeai/frontend/web/src/services/api/hooks/useBoardName.ts

@@ -1,11 +1,12 @@
 import { BoardId } from 'features/gallery/store/types';
 import { useListAllBoardsQuery } from '../endpoints/boards';
+import { t } from 'i18next';
 
 export const useBoardName = (board_id: BoardId) => {
   const { boardName } = useListAllBoardsQuery(undefined, {
     selectFromResult: ({ data }) => {
       const selectedBoard = data?.find((b) => b.board_id === board_id);
-      const boardName = selectedBoard?.board_name || 'Uncategorized';
+      const boardName = selectedBoard?.board_name || t('boards.uncategorized');
 
       return { boardName };
     },