fix: not translated strings

Author: rohinish404

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

@@ -656,6 +656,8 @@
         "load": "Load",
         "localOnly": "local only",
         "manual": "Manual",
+        "loraModels": "LoRAs",
+        "main": "Main",
         "metadata": "Metadata",
         "model": "Model",
         "modelConversionFailed": "Model Conversion Failed",
@@ -698,6 +700,7 @@
         "source": "Source",
         "starterModels": "Starter Models",
         "syncModels": "Sync Models",
+        "textualInversions": "Textual Inversions",
         "triggerPhrases": "Trigger Phrases",
         "loraTriggerPhrases": "LoRA Trigger Phrases",
         "mainModelTriggerPhrases": "Main Model Trigger Phrases",

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelList.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   useControlNetModels,
   useEmbeddingModels,
@@ -18,6 +19,7 @@ import { ModelListWrapper } from './ModelListWrapper';
 
 const ModelList = () => {
   const { searchTerm, filteredModelType } = useAppSelector((s) => s.modelmanagerV2);
+  const { t } = useTranslation();
 
   const [mainModels, { isLoading: isLoadingMainModels }] = useMainModels();
   const filteredMainModels = useMemo(
@@ -67,18 +69,22 @@ const ModelList = () => {
         {/* Main Model List */}
         {isLoadingMainModels && <FetchingModelsLoader loadingMessage="Loading Main Models..." />}
         {!isLoadingMainModels && filteredMainModels.length > 0 && (
-          <ModelListWrapper title="Main" modelList={filteredMainModels} key="main" />
+          <ModelListWrapper title={t('modelManager.main')} modelList={filteredMainModels} key="main" />
         )}
         {/* LoRAs List */}
         {isLoadingLoRAModels && <FetchingModelsLoader loadingMessage="Loading LoRAs..." />}
         {!isLoadingLoRAModels && filteredLoRAModels.length > 0 && (
-          <ModelListWrapper title="LoRA" modelList={filteredLoRAModels} key="loras" />
+          <ModelListWrapper title={t('modelManager.loraModels')} modelList={filteredLoRAModels} key="loras" />
         )}
 
         {/* TI List */}
-        {isLoadingEmbeddingModels && <FetchingModelsLoader loadingMessage="Loading Embeddings..." />}
+        {isLoadingEmbeddingModels && <FetchingModelsLoader loadingMessage="Loading Textual Inversions..." />}
         {!isLoadingEmbeddingModels && filteredEmbeddingModels.length > 0 && (
-          <ModelListWrapper title="Embedding" modelList={filteredEmbeddingModels} key="textual-inversions" />
+          <ModelListWrapper
+            title={t('modelManager.textualInversions')}
+            modelList={filteredEmbeddingModels}
+            key="textual-inversions"
+          />
         )}
 
         {/* VAE List */}
@@ -95,12 +101,16 @@ const ModelList = () => {
         {/* IP Adapter List */}
         {isLoadingIPAdapterModels && <FetchingModelsLoader loadingMessage="Loading IP Adapters..." />}
         {!isLoadingIPAdapterModels && filteredIPAdapterModels.length > 0 && (
-          <ModelListWrapper title="IP Adapter" modelList={filteredIPAdapterModels} key="ip-adapters" />
+          <ModelListWrapper
+            title={t('modelManager.ipAdapters')}
+            modelList={filteredIPAdapterModels}
+            key="ip-adapters"
+          />
         )}
         {/* T2I Adapters List */}
         {isLoadingT2IAdapterModels && <FetchingModelsLoader loadingMessage="Loading T2I Adapters..." />}
         {!isLoadingT2IAdapterModels && filteredT2IAdapterModels.length > 0 && (
-          <ModelListWrapper title="T2I Adapter" modelList={filteredT2IAdapterModels} key="t2i-adapters" />
+          <ModelListWrapper title={t('common.t2iAdapter')} modelList={filteredT2IAdapterModels} key="t2i-adapters" />
         )}
       </Flex>
     </ScrollableContent>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx

@@ -2,24 +2,27 @@ import { Button, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-libr
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { FilterableModelType } from 'features/modelManagerV2/store/modelManagerV2Slice';
 import { setFilteredModelType } from 'features/modelManagerV2/store/modelManagerV2Slice';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFunnelBold } from 'react-icons/pi';
 import { objectKeys } from 'tsafe';
 
-const MODEL_TYPE_LABELS: Record<FilterableModelType, string> = {
-  main: 'Main',
-  lora: 'LoRA',
-  embedding: 'Textual Inversion',
-  controlnet: 'ControlNet',
-  vae: 'VAE',
-  t2i_adapter: 'T2I Adapter',
-  ip_adapter: 'IP Adapter',
-};
-
 export const ModelTypeFilter = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const MODEL_TYPE_LABELS: Record<FilterableModelType, string> = useMemo(
+    () => ({
+      main: t('modelManager.main'),
+      lora: 'LoRA',
+      embedding: t('modelManager.textualInversions'),
+      controlnet: 'ControlNet',
+      vae: 'VAE',
+      t2i_adapter: t('common.t2iAdapter'),
+      ip_adapter: t('modelManager.ipAdapters'),
+      clip_vision: 'Clip Vision',
+    }),
+    [t]
+  );
   const filteredModelType = useAppSelector((s) => s.modelmanagerV2.filteredModelType);
 
   const selectModelType = useCallback(