diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index a088835bdb..3f94cde44c 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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",
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelList.tsx
index b7ce8f8105..98d290031c 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/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 && }
{!isLoadingMainModels && filteredMainModels.length > 0 && (
-
+
)}
{/* LoRAs List */}
{isLoadingLoRAModels && }
{!isLoadingLoRAModels && filteredLoRAModels.length > 0 && (
-
+
)}
{/* TI List */}
- {isLoadingEmbeddingModels && }
+ {isLoadingEmbeddingModels && }
{!isLoadingEmbeddingModels && filteredEmbeddingModels.length > 0 && (
-
+
)}
{/* VAE List */}
@@ -95,12 +101,16 @@ const ModelList = () => {
{/* IP Adapter List */}
{isLoadingIPAdapterModels && }
{!isLoadingIPAdapterModels && filteredIPAdapterModels.length > 0 && (
-
+
)}
{/* T2I Adapters List */}
{isLoadingT2IAdapterModels && }
{!isLoadingT2IAdapterModels && filteredT2IAdapterModels.length > 0 && (
-
+
)}
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx
index 94a06bf5d9..a75b04a056 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx
+++ b/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 = {
- 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 = 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(