diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index b6bad9b3cd..e0baefcf9e 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/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", diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx index 7aa9cad003..2b13e5cf6b 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx +++ b/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}`} + >{`${t('unifiedCanvas.activeLayer')}: ${t( + `unifiedCanvas.${layer}` + )}`} {`${t('unifiedCanvas.canvasScale')}: ${canvasScaleString}%`} {shouldPreserveMaskedArea && ( { color: warningColor, }} > - Preserve Masked Area: On + {t('unifiedCanvas.preserveMaskedArea')}: {t('common.on')} )} {shouldShowBoundingBox && ( diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdaptersCollapse.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdaptersCollapse.tsx index b2f9bcfe41..d1c3f6f0b9 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdaptersCollapse.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdaptersCollapse.tsx @@ -89,7 +89,12 @@ const ControlAdaptersCollapse = () => { } return ( - + { + const { t } = useTranslation(); return ( { variant="solid" sx={{ bg: 'accent.400', _dark: { bg: 'accent.500' } }} > - auto + {t('common.auto')} ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx index 63e0cee378..fa640bf202 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx +++ b/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(null); const galleryGridRef = useRef(null); const { galleryView } = useAppSelector(selector); @@ -111,7 +113,7 @@ const ImageGalleryContent = () => { leftIcon={} data-testid="images-tab" > - Images + {t('gallery.images')} { leftIcon={} data-testid="assets-tab" > - Assets + {t('gallery.assets')} diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx index c2edd94106..4f6fe26f1d 100644 --- a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx +++ b/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 ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx index 3a5cc264e7..19d707765b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx +++ b/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 }, diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx index f71794394e..723e57a288 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx +++ b/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 ( { )} - Adding images to{' '} + {t('parameters.invoke.addingImagesTo')}{' '} - {autoAddBoardName || 'Uncategorized'} + {autoAddBoardName || t('boards.uncategorized')} diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx index dae462ad47..d107503dc6 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx +++ b/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 ( - + { + const { t } = useTranslation(); const { shouldUseSliders, activeLabel } = useAppSelector(selector); return ( - + { + const { t } = useTranslation(); const shouldUseSliders = useAppSelector((state) => state.ui.shouldUseSliders); const { iterationsAndSeedLabel } = useCoreParametersCollapseLabel(); return ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx index ea6ef03e09..3f3cf2db05 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx +++ b/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 ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx index c57a68ed62..40a5026d09 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx +++ b/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 ( diff --git a/invokeai/frontend/web/src/services/api/hooks/useBoardName.ts b/invokeai/frontend/web/src/services/api/hooks/useBoardName.ts index ce0cff7b8a..54e3745c27 100644 --- a/invokeai/frontend/web/src/services/api/hooks/useBoardName.ts +++ b/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 }; },