Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): edge cases in starter models search

Browse Source
This commit is contained in:
psychedelicious 2024-07-23 13:49:58 +10:00
parent 46dc8c6641
commit 1072b74c0e
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx
View File

@ -30,7 +30,7 @@ export const StarterModelsResultItem = ({ result }: Props) => {
<Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}> <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>
<Flex fontSize="sm" flexDir="column"> <Flex fontSize="sm" flexDir="column">
<Flex gap={3}> <Flex gap={3}>
<Badge h="min-content">{result.type.replace('_', ' ')}</Badge> <Badge h="min-content">{result.type.replaceAll('_', ' ')}</Badge>
<ModelBaseBadge base={result.base} /> <ModelBaseBadge base={result.base} />
<Text fontWeight="semibold">{result.name}</Text> <Text fontWeight="semibold">{result.name}</Text>
</Flex> </Flex>

8
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx
View File

@ -18,14 +18,18 @@ export const StarterModelsResults = ({ results }: StarterModelsResultsProps) =>
const filteredResults = useMemo(() => { const filteredResults = useMemo(() => {
return results.filter((result) => { return results.filter((result) => {
const trimmedSearchTerm = searchTerm.trim().toLowerCase();
const name = result.name.toLowerCase(); const name = result.name.toLowerCase();
const type = result.type.toLowerCase(); const type = result.type.toLowerCase();
return name.includes(searchTerm.toLowerCase()) || type.includes(searchTerm.toLowerCase()); const description = result.description.toLowerCase();
return (
name.includes(trimmedSearchTerm) || type.includes(trimmedSearchTerm) || description.includes(trimmedSearchTerm)
);
}); });
}, [results, searchTerm]); }, [results, searchTerm]);
const handleSearch: ChangeEventHandler<HTMLInputElement> = useCallback((e) => { const handleSearch: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
setSearchTerm(e.target.value.trim()); setSearchTerm(e.target.value);
}, []); }, []);
const clearSearch = useCallback(() => { const clearSearch = useCallback(() => {