From 7e13224ec8164214102286ab1c22eed6938f94e8 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 24 Feb 2024 18:48:21 +1100 Subject: [PATCH] fix(ui): use new scan_folder response instead of hook to determine if models are installed already --- .../modelManagerV2/hooks/useIsImported.ts | 62 ------------------- .../ScanModels/ScanModelResultItem.tsx | 29 +++------ .../ScanModels/ScanModelsResults.tsx | 19 +++--- 3 files changed, 22 insertions(+), 88 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/modelManagerV2/hooks/useIsImported.ts diff --git a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useIsImported.ts b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useIsImported.ts deleted file mode 100644 index 763317a639..0000000000 --- a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useIsImported.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type { EntityState } from '@reduxjs/toolkit'; -import { forEach } from 'lodash-es'; -import { useCallback } from 'react'; -import { ALL_BASE_MODELS } from 'services/api/constants'; -import { - useGetControlNetModelsQuery, - useGetIPAdapterModelsQuery, - useGetLoRAModelsQuery, - useGetMainModelsQuery, - useGetT2IAdapterModelsQuery, - useGetTextualInversionModelsQuery, - useGetVaeModelsQuery, -} from 'services/api/endpoints/models'; -import type { AnyModelConfig } from 'services/api/types'; - -export const useIsImported = () => { - const { data: mainModels } = useGetMainModelsQuery(ALL_BASE_MODELS); - const { data: loras } = useGetLoRAModelsQuery(); - const { data: embeddings } = useGetTextualInversionModelsQuery(); - const { data: controlnets } = useGetControlNetModelsQuery(); - const { data: ipAdapters } = useGetIPAdapterModelsQuery(); - const { data: t2is } = useGetT2IAdapterModelsQuery(); - const { data: vaes } = useGetVaeModelsQuery(); - - const isImported = useCallback( - ({ name }: { name: string }) => { - const data = [mainModels, loras, embeddings, controlnets, ipAdapters, t2is, vaes]; - let isMatch = false; - for (let index = 0; index < data.length; index++) { - const modelType: EntityState | undefined = data[index]; - - const match = modelsFilter(modelType, name); - - if (match.length) { - isMatch = true; - break; - } - } - return isMatch; - }, - [mainModels, loras, embeddings, controlnets, ipAdapters, t2is, vaes] - ); - - return { isImported }; -}; - -const modelsFilter = (data: EntityState | undefined, nameFilter: string): T[] => { - const filteredModels: T[] = []; - - forEach(data?.entities, (model) => { - if (!model) { - return; - } - - const matchesFilter = model.path.toLowerCase().includes(nameFilter.toLowerCase()); - - if (matchesFilter) { - filteredModels.push(model); - } - }); - return filteredModels; -}; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelResultItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelResultItem.tsx index 7c9ab9f6cb..6ae7573665 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelResultItem.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelResultItem.tsx @@ -1,33 +1,24 @@ import { Badge, Box, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { useIsImported } from 'features/modelManagerV2/hooks/useIsImported'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; -import { useCallback, useMemo } from 'react'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { IoAdd } from 'react-icons/io5'; +import type { ScanFolderResponse } from 'services/api/endpoints/models'; import { useImportMainModelsMutation } from 'services/api/endpoints/models'; -export const ScanModelResultItem = ({ result }: { result: string }) => { +type Props = { + result: ScanFolderResponse[number]; +}; +export const ScanModelResultItem = ({ result }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const { isImported } = useIsImported(); - const [importMainModel] = useImportMainModelsMutation(); - const isAlreadyImported = useMemo(() => { - const prettyName = result.split('\\').slice(-1)[0]; - - if (prettyName) { - return isImported({ name: prettyName }); - } else { - return false; - } - }, [result, isImported]); - const handleQuickAdd = useCallback(() => { - importMainModel({ source: result, config: undefined }) + importMainModel({ source: result.path, config: undefined }) .unwrap() .then((_) => { dispatch( @@ -56,11 +47,11 @@ export const ScanModelResultItem = ({ result }: { result: string }) => { return ( - {result.split('\\').slice(-1)[0]} - {result} + {result.path.split('\\').slice(-1)[0]} + {result.path} - {isAlreadyImported ? ( + {result.is_installed ? ( {t('common.installed')} ) : ( diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx index bcf32995e5..7a300546b3 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx @@ -4,21 +4,26 @@ import { t } from 'i18next'; import type { ChangeEventHandler } from 'react'; import { useCallback, useMemo, useState } from 'react'; import { PiXBold } from 'react-icons/pi'; +import type { ScanFolderResponse } from 'services/api/endpoints/models'; import { ScanModelResultItem } from './ScanModelResultItem'; -export const ScanModelsResults = ({ results }: { results: string[] }) => { +type ScanModelResultsProps = { + results: ScanFolderResponse; +}; + +export const ScanModelsResults = ({ results }: ScanModelResultsProps) => { const [searchTerm, setSearchTerm] = useState(''); const filteredResults = useMemo(() => { return results.filter((result) => { - const modelName = result.split('\\').slice(-1)[0]; - return modelName?.includes(searchTerm); + const modelName = result.path.split('\\').slice(-1)[0]; + return modelName?.toLowerCase().includes(searchTerm.toLowerCase()); }); }, [results, searchTerm]); const handleSearch: ChangeEventHandler = useCallback((e) => { - setSearchTerm(e.target.value); + setSearchTerm(e.target.value.trim()); }, []); const clearSearch = useCallback(() => { @@ -36,13 +41,13 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => { - {!!searchTerm?.length && ( + {searchTerm && ( { {filteredResults.map((result) => ( - + ))}