fix(ui): fix plurals (#4860)

invokeai/frontend/web/.prettierignore

@@ -1,4 +1,5 @@
 dist/
+public/locales/*.json
 .husky/
 node_modules/
 patches/

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))",
@@ -275,7 +278,8 @@
         "batchValues": "Batch Values",
         "notReady": "Unable to Queue",
         "batchQueued": "Batch Queued",
-        "batchQueuedDesc": "Added {{item_count}} sessions to {{direction}} of queue",
+        "batchQueuedDesc_one": "Added {{count}} sessions to {{direction}} of queue",
+        "batchQueuedDesc_other": "Added {{count}} sessions to {{direction}} of queue",
         "front": "front",
         "back": "back",
         "batchFailedToQueue": "Failed to Queue Batch",
@@ -701,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",
@@ -921,6 +926,7 @@
     },
     "parameters": {
         "aspectRatio": "Aspect Ratio",
+        "aspectRatioFree": "Free",
         "boundingBoxHeader": "Bounding Box",
         "boundingBoxHeight": "Bounding Box Height",
         "boundingBoxWidth": "Bounding Box Width",
@@ -1111,17 +1117,17 @@
         "clearIntermediatesDesc2": "Intermediate images are byproducts of generation, different from the result images in the gallery. Clearing intermediates will free disk space.",
         "clearIntermediatesDesc3": "Your gallery images will not be deleted.",
         "clearIntermediates": "Clear Intermediates",
-        "clearIntermediates_one": "Clear 1 Intermediate",
+        "clearIntermediatesWithCount_one": "Clear {{count}} Intermediate",
-        "clearIntermediates_other": "Clear {{number}} Intermediates",
+        "clearIntermediatesWithCount_other": "Clear {{count}} Intermediates",
-        "noIntermediates": "No Intermediates to Clear",
+        "clearIntermediatesWithCount_zero": "No Intermediates to Clear",
-        "intermediatesCleared_one": "Cleared 1 Intermediate",
+        "intermediatesCleared_one": "Cleared {{count}} Intermediate",
-        "intermediatesCleared_other": "Cleared {{number}} Intermediates",
+        "intermediatesCleared_other": "Cleared {{count}} Intermediates",
         "intermediatesClearedFailed": "Problem Clearing Intermediates"
     },
     "toast": {
         "addedToBoard": "Added to board",
-        "baseModelChangedCleared_one": "Base model changed, cleared or disabled {{number}} incompatible submodel",
+        "baseModelChangedCleared_one": "Base model changed, cleared or disabled {{count}} incompatible submodel",
-        "baseModelChangedCleared_many": "$t(toast.baseModelChangedCleared_one)s",
+        "baseModelChangedCleared_other": "Base model changed, cleared or disabled {{count}} incompatible submodels",
         "canceled": "Processing Canceled",
         "canvasCopiedClipboard": "Canvas Copied to Clipboard",
         "canvasDownloaded": "Canvas Downloaded",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts

@@ -30,7 +30,7 @@ export const addBatchEnqueuedListener = () => {
           id: 'batch-queued',
           title: t('queue.batchQueued'),
           description: t('queue.batchQueuedDesc', {
-            item_count: response.enqueued,
+            count: response.enqueued,
             direction: arg.prepend ? t('queue.front') : t('queue.back'),
           }),
           duration: 1000,

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -73,14 +73,9 @@ export const addModelSelectedListener = () => {
           dispatch(
             addToast(
               makeToast({
-                title: t(
+                title: t('toast.baseModelChangedCleared', {
-                  modelsCleared === 1
+                  count: modelsCleared,
-                    ? 'toast.baseModelChangedCleared_one'
+                }),
-                    : 'toast.baseModelChangedCleared_many',
-                  {
-                    number: modelsCleared,
-                  }
-                ),
                 status: 'warning',
               })
             )

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/system/components/SettingsModal/SettingsClearIntermediates.tsx

@@ -1,7 +1,7 @@
 import { Heading, Text } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import IAIButton from '../../../../common/components/IAIButton';
 import {
@@ -25,15 +25,12 @@ export default function SettingsClearIntermediates() {
   const handleClickClearIntermediates = useCallback(() => {
     clearIntermediates()
       .unwrap()
-      .then((number) => {
+      .then((clearedCount) => {
         dispatch(controlAdaptersReset());
         dispatch(resetCanvas());
         dispatch(
           addToast({
-            title:
+            title: t('settings.intermediatesCleared', { count: clearedCount }),
-              number === 1
-                ? t('settings.intermediatesCleared_one')
-                : t('settings.intermediatesCleared_other', { number }),
             status: 'info',
           })
         );
@@ -53,18 +50,6 @@ export default function SettingsClearIntermediates() {
     updateIntermediatesCount();
   }, [updateIntermediatesCount]);
 
-  const buttonText = useMemo(() => {
-    if (!intermediatesCount) {
-      return t('settings.noIntermediates');
-    }
-    if (intermediatesCount === 1) {
-      return t('settings.clearIntermediates_one');
-    }
-    return t('settings.clearIntermediates_other', {
-      number: intermediatesCount,
-    });
-  }, [intermediatesCount, t]);
-
   return (
     <StyledFlex>
       <Heading size="sm">{t('settings.clearIntermediates')}</Heading>
@@ -74,7 +59,9 @@ export default function SettingsClearIntermediates() {
         isLoading={isLoadingClearIntermediates}
         isDisabled={!intermediatesCount}
       >
-        {buttonText}
+        {t('settings.clearIntermediatesWithCount', {
+          count: intermediatesCount ?? 0,
+        })}
       </IAIButton>
       <Text fontWeight="bold">{t('settings.clearIntermediatesDesc1')}</Text>
       <Text variant="subtext">{t('settings.clearIntermediatesDesc2')}</Text>

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 };
     },