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

basic scan working and renders results

Browse Source
This commit is contained in:
Mary Hipp 2024-02-22 11:50:16 -05:00 committed by psychedelicious
parent 9ae09e9a7c
commit 57a402053e
6 changed files with 143 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/ImportQueue.tsx
View File

@ -7,7 +7,7 @@ import { useCallback, useMemo } from 'react';
import { RiSparklingFill } from 'react-icons/ri';
import { useGetModelImportsQuery, usePruneModelImportsMutation } from 'services/api/endpoints/models';
import { ImportQueueModel } from '../ImportQueueModel';
import { ImportQueueModel } from './ImportQueueModel';
export const ImportQueue = () => {
const dispatch = useAppDispatch();

5
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModels.tsx Normal file
View File

@ -0,0 +1,5 @@
import { ScanModelsForm } from './ScanModelsForm';
export const ScanModels = () => {
return <ScanModelsForm />;
};

54
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx Normal file
View File

@ -0,0 +1,54 @@
import { Flex, FormControl, FormLabel, Input, Button, FormErrorMessage, Divider } from '@invoke-ai/ui-library';
import { ChangeEventHandler, useCallback, useState } from 'react';
import { useLazyScanModelsQuery } from '../../../../../services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
import { ScanModelsResults } from './ScanModelsResults';
export const ScanModelsForm = () => {
const [scanPath, setScanPath] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [results, setResults] = useState<string[] | undefined>();
const { t } = useTranslation();
const [_scanModels, { isLoading }] = useLazyScanModelsQuery();
const handleSubmitScan = useCallback(async () => {
_scanModels({ scan_path: scanPath })
.unwrap()
.then((result) => {
setResults(result);
})
.catch((error) => {
if (error) {
setErrorMessage(error.data.detail);
}
});
}, [scanPath]);
const handleSetScanPath: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
setScanPath(e.target.value);
setErrorMessage('');
}, []);
return (
<>
<FormControl isInvalid={!!errorMessage.length} w="full">
<Flex flexDir="column" w="full">
<Flex gap={2} alignItems="flex-end" justifyContent="space-between">
<Flex direction="column" w="full">
<FormLabel>{t('common.folder')}</FormLabel>
<Input value={scanPath} onChange={handleSetScanPath} />
</Flex>
<Button onClick={handleSubmitScan} isLoading={isLoading} isDisabled={scanPath.length === 0}>
{t('modelManager.scanFolder')}
</Button>
</Flex>
{!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
</Flex>
</FormControl>
{results && <ScanModelsResults results={results} />}
</>
);
};

77
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx Normal file
View File

@ -0,0 +1,77 @@
import {
Text,
Flex,
Heading,
IconButton,
Input,
InputGroup,
InputRightElement,
Divider,
Box,
} from '@invoke-ai/ui-library';
import { t } from 'i18next';
import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
import { PiXBold } from 'react-icons/pi';
export const ScanModelsResults = ({ results }: { results: string[] }) => {
const [searchTerm, setSearchTerm] = useState('');
const [filteredResults, setFilteredResults] = useState(results);
const handleSearch: ChangeEventHandler<HTMLInputElement> = useCallback(
(e) => {
setSearchTerm(e.target.value);
setFilteredResults(
results.filter((result) => {
const modelName = result.split('\\').slice(-1)[0];
return modelName?.includes(e.target.value);
})
);
},
[results]
);
const clearSearch = useCallback(() => {
setSearchTerm('');
}, []);
return (
<>
<Divider mt={4} />
<Flex flexDir="column" gap={2} mt={4}>
<Flex justifyContent="space-between" alignItems="center" mb={4}>
<Heading fontSize="md" as="h4">
Scan Results
</Heading>
<InputGroup maxW="300px" size="xs">
<Input
placeholder={t('modelManager.search')}
value={searchTerm || ''}
data-testid="board-search-input"
onChange={handleSearch}
size="xs"
/>
{!!searchTerm?.length && (
<InputRightElement h="full" pe={2}>
<IconButton
size="sm"
variant="link"
aria-label={t('boards.clearSearch')}
icon={<PiXBold />}
onClick={clearSearch}
/>
</InputRightElement>
)}
</InputGroup>
</Flex>
{filteredResults.map((result) => (
<Flex key={result} fontSize="sm" flexDir="column">
<Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text>
<Text variant="subtext">{result}</Text>
</Flex>
))}
</Flex>
</>
);
};

7
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
View File

@ -2,6 +2,7 @@ import { Box, Divider, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '
import { ImportQueue } from './AddModelPanel/ImportQueue';
import { SimpleImport } from './AddModelPanel/SimpleImport';
import { ScanModels } from './AddModelPanel/ScanModels/ScanModels';
export const ImportModels = () => {
return (
@ -9,7 +10,7 @@ export const ImportModels = () => {
<Box w="full" p={4}>
<Heading fontSize="xl">Add Model</Heading>
</Box>
<Box layerStyle="second" borderRadius="base" w="full" h="100vh">
<Box layerStyle="second" borderRadius="base" w="full">
<Tabs variant="collapse">
<TabList>
<Tab>Simple</Tab>
@ -21,7 +22,9 @@ export const ImportModels = () => {
<SimpleImport />
</TabPanel>
<TabPanel>Advanced Import Placeholder</TabPanel>
<TabPanel>Scan Models Placeholder</TabPanel>
<TabPanel>
<ScanModels />
</TabPanel>
</TabPanels>
</Tabs>

1
invokeai/frontend/web/src/services/api/endpoints/models.ts
View File

@ -349,6 +349,7 @@ export const {
useMergeMainModelsMutation,
useSyncModelsMutation,
useScanModelsQuery,
useLazyScanModelsQuery,
useGetCheckpointConfigsQuery,
useGetModelImportsQuery,
useGetModelMetadataQuery,