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

feat(ui): style HF scan tab

Browse Source
This commit is contained in:
psychedelicious 2024-03-13 19:58:19 +11:00
parent 01207a2fa5
commit d93d4afbb7
5 changed files with 46 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/public/locales/en.json
View File

@ -762,9 +762,10 @@
"formMessageDiffusersVAELocationDesc": "If not provided, InvokeAI will look for the VAE file inside the model location given above.", "formMessageDiffusersVAELocationDesc": "If not provided, InvokeAI will look for the VAE file inside the model location given above.",
"height": "Height", "height": "Height",
"heightValidationMsg": "Default height of your model.", "heightValidationMsg": "Default height of your model.",
"huggingFace": "Hugging Face", "huggingFace": "HuggingFace",
"huggingFacePlaceholder": "owner/model-name", "huggingFacePlaceholder": "owner/model-name",
"huggingFaceRepoID": "Hugging Face Repo ID", "huggingFaceRepoID": "HuggingFace Repo ID",
"huggingFaceHelper": "If multiple models are found in this repo, you will be prompted to select one to install.",
"ignoreMismatch": "Ignore Mismatches Between Selected Models", "ignoreMismatch": "Ignore Mismatches Between Selected Models",
"imageEncoderModelId": "Image Encoder Model ID", "imageEncoderModelId": "Image Encoder Model ID",
"importModels": "Import Models", "importModels": "Import Models",
@ -772,6 +773,9 @@
"inpainting": "v1 Inpainting", "inpainting": "v1 Inpainting",
"inplaceInstall": "In-place install", "inplaceInstall": "In-place install",
"inplaceInstallDesc": "Install models without copying the files. When using the model, it will be loaded from its this location. If disabled, the model file(s) will be copied into the Invoke-managed models directory during installation.", "inplaceInstallDesc": "Install models without copying the files. When using the model, it will be loaded from its this location. If disabled, the model file(s) will be copied into the Invoke-managed models directory during installation.",
"install": "Install",
"installAll": "Install All",
"installRepo": "Install Repo",
"interpolationType": "Interpolation Type", "interpolationType": "Interpolation Type",
"inverseSigmoid": "Inverse Sigmoid", "inverseSigmoid": "Inverse Sigmoid",
"invokeAIFolder": "Invoke AI Folder", "invokeAIFolder": "Invoke AI Folder",

9
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx
View File

@ -1,4 +1,4 @@
import { Button, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library'; import { Button, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice'; import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast'; import { makeToast } from 'features/system/util/makeToast';
@ -74,8 +74,8 @@ export const HuggingFaceForm = () => {
}, []); }, []);
return ( return (
<Flex flexDir="column" height="100%"> <Flex flexDir="column" height="100%" gap={3}>
<FormControl isInvalid={!!errorMessage.length} w="full" orientation="vertical"> <FormControl isInvalid={!!errorMessage.length} w="full" orientation="vertical" flexShrink={0}>
<FormLabel>{t('modelManager.huggingFaceRepoID')}</FormLabel> <FormLabel>{t('modelManager.huggingFaceRepoID')}</FormLabel>
<Flex gap={3} alignItems="center" w="full"> <Flex gap={3} alignItems="center" w="full">
<Input <Input
@ -90,9 +90,10 @@ export const HuggingFaceForm = () => {
size="sm" size="sm"
flexShrink={0} flexShrink={0}
> >
{t('modelManager.addModel')} {t('modelManager.installRepo')}
</Button> </Button>
</Flex> </Flex>
<FormHelperText>{t('modelManager.huggingFaceHelper')}</FormHelperText>
{!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>} {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
</FormControl> </FormControl>
{data && data.urls && displayResults && <HuggingFaceResults results={data.urls} />} {data && data.urls && displayResults && <HuggingFaceResults results={data.urls} />}

16
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceResultItem.tsx
View File

@ -1,4 +1,4 @@
import { Box, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library'; import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice'; import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast'; import { makeToast } from 'features/system/util/makeToast';
@ -16,7 +16,7 @@ export const HuggingFaceResultItem = ({ result }: Props) => {
const [installModel] = useInstallModelMutation(); const [installModel] = useInstallModelMutation();
const handleQuickAdd = useCallback(() => { const handleInstall = useCallback(() => {
installModel({ source: result }) installModel({ source: result })
.unwrap() .unwrap()
.then((_) => { .then((_) => {
@ -44,16 +44,14 @@ export const HuggingFaceResultItem = ({ result }: Props) => {
}, [installModel, result, dispatch, t]); }, [installModel, result, dispatch, t]);
return ( return (
<Flex justifyContent="space-between" w="100%"> <Flex alignItems="center" justifyContent="space-between" w="100%" gap={4}>
<Flex fontSize="sm" flexDir="column"> <Flex fontSize="sm" flexDir="column">
<Text fontWeight="semibold">{result.split('/').slice(-1)[0]}</Text> <Text fontWeight="semibold">{result.split('/').slice(-1)[0]}</Text>
<Text variant="subtext">{result}</Text> <Text variant="subtext" noOfLines={1} wordBreak="break-all">
{result}
</Text>
</Flex> </Flex>
<Box> <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={handleInstall} size="sm" />
<Tooltip label={t('modelManager.quickAdd')}>
<IconButton aria-label={t('modelManager.quickAdd')} icon={<PiPlusBold />} onClick={handleQuickAdd} />
</Tooltip>
</Box>
</Flex> </Flex>
); );
}; };

14
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceResults.tsx
View File

@ -77,15 +77,15 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
return ( return (
<> <>
<Divider mt={6} /> <Divider />
<Flex flexDir="column" gap={2} mt={4} height="100%"> <Flex flexDir="column" gap={3} height="100%">
<Flex justifyContent="space-between" alignItems="center"> <Flex justifyContent="space-between" alignItems="center">
<Heading fontSize="md" as="h4"> <Heading size="sm">
{t('modelManager.availableModels')} {t('modelManager.availableModels')}
</Heading> </Heading>
<Flex alignItems="center" gap="4"> <Flex alignItems="center" gap={3}>
<Button size="sm" onClick={handleAddAll} isDisabled={results.length === 0}> <Button size="sm" onClick={handleAddAll} isDisabled={results.length === 0} flexShrink={0}>
{t('modelManager.addAll')} {t('modelManager.installAll')}
</Button> </Button>
<InputGroup maxW="300px" size="xs"> <InputGroup maxW="300px" size="xs">
<Input <Input
@ -110,7 +110,7 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
</InputGroup> </InputGroup>
</Flex> </Flex>
</Flex> </Flex>
<Flex height="100%" layerStyle="third" borderRadius="base" p={4} mt={4} mb={4}> <Flex height="100%" layerStyle="third" borderRadius="base" p={4}>
<ScrollableContent> <ScrollableContent>
<Flex flexDir="column" gap={3}> <Flex flexDir="column" gap={3}>
{filteredResults.map((result) => ( {filteredResults.map((result) => (

46
invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
View File

@ -9,31 +9,27 @@ import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
export const InstallModels = () => { export const InstallModels = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Flex layerStyle="first" p={3} borderRadius="base" w="full" h="full" flexDir="column" gap={2}> <Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
<Box w="full" p={2}> <Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
<Heading fontSize="xl">{t('modelManager.addModel')}</Heading> <Tabs variant="collapse" height="50%" display="flex" flexDir="column">
</Box> <TabList>
<Box layerStyle="second" borderRadius="base" w="full" h="50%" overflow="hidden"> <Tab>{t('common.simple')}</Tab>
<Tabs variant="collapse" height="100%"> <Tab>{t('modelManager.huggingFace')}</Tab>
<TabList> <Tab>{t('modelManager.scan')}</Tab>
<Tab>{t('common.simple')}</Tab> </TabList>
<Tab>{t('modelManager.huggingFace')}</Tab> <TabPanels p={3} height="100%">
<Tab>{t('modelManager.scan')}</Tab> <TabPanel>
</TabList> <InstallModelForm />
<TabPanels p={3} height="100%"> </TabPanel>
<TabPanel> <TabPanel height="100%">
<InstallModelForm /> <HuggingFaceForm />
</TabPanel> </TabPanel>
<TabPanel height="100%"> <TabPanel height="100%">
<HuggingFaceForm /> <ScanModelsForm />
</TabPanel> </TabPanel>
<TabPanel height="100%"> </TabPanels>
<ScanModelsForm /> </Tabs>
</TabPanel> <Box layerStyle="second" borderRadius="base" h="50%">
</TabPanels>
</Tabs>
</Box>
<Box layerStyle="second" borderRadius="base" w="full" h="50%">
<ModelInstallQueue /> <ModelInstallQueue />
</Box> </Box>
</Flex> </Flex>