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(