fix(ui): add missing translations (#5096)

* first string only to test

* more strings changed

* almost half strings added in json file

* more strings added

* more changes

* few strings and t function changed

* resolved

* errors resolved

* chore(ui): fmt en.json

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx

@@ -3,8 +3,10 @@ import IAIButton from 'common/components/IAIButton';
 import { useCallback, useState } from 'react';
 import AdvancedAddModels from './AdvancedAddModels';
 import SimpleAddModels from './SimpleAddModels';
+import { useTranslation } from 'react-i18next';
 
 export default function AddModels() {
+  const { t } = useTranslation();
   const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>(
     'simple'
   );
@@ -27,14 +29,14 @@ export default function AddModels() {
           isChecked={addModelMode == 'simple'}
           onClick={handleAddModelSimple}
         >
-          Simple
+          {t('common.simple')}
         </IAIButton>
         <IAIButton
           size="sm"
           isChecked={addModelMode == 'advanced'}
           onClick={handleAddModelAdvanced}
         >
-          Advanced
+          {t('common.advanced')}
         </IAIButton>
       </ButtonGroup>
       <Flex

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx

@@ -1,16 +1,11 @@
 import { Flex } from '@chakra-ui/react';
 import { SelectItem } from '@mantine/core';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
 import AdvancedAddDiffusers from './AdvancedAddDiffusers';
 import { useTranslation } from 'react-i18next';
 
-export const advancedAddModeData: SelectItem[] = [
-  { label: 'Diffusers', value: 'diffusers' },
-  { label: 'Checkpoint / Safetensors', value: 'checkpoint' },
-];
-
 export type ManualAddMode = 'diffusers' | 'checkpoint';
 
 export default function AdvancedAddModels() {
@@ -25,6 +20,14 @@ export default function AdvancedAddModels() {
     setAdvancedAddMode(v as ManualAddMode);
   }, []);
 
+  const advancedAddModeData: SelectItem[] = useMemo(
+    () => [
+      { label: t('modelManager.diffusersModels'), value: 'diffusers' },
+      { label: t('modelManager.checkpointOrSafetensors'), value: 'checkpoint' },
+    ],
+    [t]
+  );
+
   return (
     <Flex flexDirection="column" gap={4} width="100%">
       <IAIMantineSelect

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx

@@ -4,13 +4,14 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { motion } from 'framer-motion';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
 import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
 import AdvancedAddDiffusers from './AdvancedAddDiffusers';
-import { ManualAddMode, advancedAddModeData } from './AdvancedAddModels';
+import { ManualAddMode } from './AdvancedAddModels';
 import { useTranslation } from 'react-i18next';
+import { SelectItem } from '@mantine/core';
 
 export default function ScanAdvancedAddModels() {
   const advancedAddScanModel = useAppSelector(
@@ -19,6 +20,14 @@ export default function ScanAdvancedAddModels() {
 
   const { t } = useTranslation();
 
+  const advancedAddModeData: SelectItem[] = useMemo(
+    () => [
+      { label: t('modelManager.diffusersModels'), value: 'diffusers' },
+      { label: t('modelManager.checkpointOrSafetensors'), value: 'checkpoint' },
+    ],
+    [t]
+  );
+
   const [advancedAddMode, setAdvancedAddMode] =
     useState<ManualAddMode>('diffusers');
 

invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx

@@ -227,7 +227,7 @@ export default function MergeModelsPanel() {
 
       <Flex columnGap={4}>
         <IAIMantineSelect
-          label="Model Type"
+          label={t('modelManager.modelType')}
           w="100%"
           data={baseModelTypeSelectData}
           value={baseModel}

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx

@@ -13,6 +13,7 @@ import DiffusersModelEdit from './ModelManagerPanel/DiffusersModelEdit';
 import LoRAModelEdit from './ModelManagerPanel/LoRAModelEdit';
 import ModelList from './ModelManagerPanel/ModelList';
 import { ALL_BASE_MODELS } from 'services/api/constants';
+import { useTranslation } from 'react-i18next';
 
 export default function ModelManagerPanel() {
   const [selectedModelId, setSelectedModelId] = useState<string>();
@@ -45,6 +46,7 @@ type ModelEditProps = {
 };
 
 const ModelEdit = (props: ModelEditProps) => {
+  const { t } = useTranslation();
   const { model } = props;
 
   if (model?.model_format === 'checkpoint') {
@@ -75,7 +77,7 @@ const ModelEdit = (props: ModelEditProps) => {
         userSelect: 'none',
       }}
     >
-      <Text variant="subtext">No Model Selected</Text>
+      <Text variant="subtext">{t('modelManager.noModelSelected')}</Text>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx

@@ -54,7 +54,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) {
       minW="max-content"
       {...rest}
     >
-      Sync Models
+      {t('modelManager.syncModels')}
     </IAIButton>
   ) : (
     <IAIIconButton