mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): style HF scan tab
This commit is contained in:
psychedelicious
parent
01207a2fa5
commit
d93d4afbb7
@ -762,9 +762,10 @@
|
||||
"formMessageDiffusersVAELocationDesc": "If not provided, InvokeAI will look for the VAE file inside the model location given above.",
|
||||
"height": "Height",
|
||||
"heightValidationMsg": "Default height of your model.",
|
||||
"huggingFace": "Hugging Face",
|
||||
"huggingFace": "HuggingFace",
|
||||
"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",
|
||||
"imageEncoderModelId": "Image Encoder Model ID",
|
||||
"importModels": "Import Models",
|
||||
@ -772,6 +773,9 @@
|
||||
"inpainting": "v1 Inpainting",
|
||||
"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.",
|
||||
"install": "Install",
|
||||
"installAll": "Install All",
|
||||
"installRepo": "Install Repo",
|
||||
"interpolationType": "Interpolation Type",
|
||||
"inverseSigmoid": "Inverse Sigmoid",
|
||||
"invokeAIFolder": "Invoke AI Folder",
|
||||
|
||||
@ -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 { addToast } from 'features/system/store/systemSlice';
|
||||
import { makeToast } from 'features/system/util/makeToast';
|
||||
@ -74,8 +74,8 @@ export const HuggingFaceForm = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Flex flexDir="column" height="100%">
|
||||
<FormControl isInvalid={!!errorMessage.length} w="full" orientation="vertical">
|
||||
<Flex flexDir="column" height="100%" gap={3}>
|
||||
<FormControl isInvalid={!!errorMessage.length} w="full" orientation="vertical" flexShrink={0}>
|
||||
<FormLabel>{t('modelManager.huggingFaceRepoID')}</FormLabel>
|
||||
<Flex gap={3} alignItems="center" w="full">
|
||||
<Input
|
||||
@ -90,9 +90,10 @@ export const HuggingFaceForm = () => {
|
||||
size="sm"
|
||||
flexShrink={0}
|
||||
>
|
||||
{t('modelManager.addModel')}
|
||||
{t('modelManager.installRepo')}
|
||||
</Button>
|
||||
</Flex>
|
||||
<FormHelperText>{t('modelManager.huggingFaceHelper')}</FormHelperText>
|
||||
{!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
|
||||
</FormControl>
|
||||
{data && data.urls && displayResults && <HuggingFaceResults results={data.urls} />}
|
||||
|
||||
@ -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 { addToast } from 'features/system/store/systemSlice';
|
||||
import { makeToast } from 'features/system/util/makeToast';
|
||||
@ -16,7 +16,7 @@ export const HuggingFaceResultItem = ({ result }: Props) => {
|
||||
|
||||
const [installModel] = useInstallModelMutation();
|
||||
|
||||
const handleQuickAdd = useCallback(() => {
|
||||
const handleInstall = useCallback(() => {
|
||||
installModel({ source: result })
|
||||
.unwrap()
|
||||
.then((_) => {
|
||||
@ -44,16 +44,14 @@ export const HuggingFaceResultItem = ({ result }: Props) => {
|
||||
}, [installModel, result, dispatch, t]);
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" w="100%">
|
||||
<Flex alignItems="center" justifyContent="space-between" w="100%" gap={4}>
|
||||
<Flex fontSize="sm" flexDir="column">
|
||||
<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>
|
||||
<Box>
|
||||
<Tooltip label={t('modelManager.quickAdd')}>
|
||||
<IconButton aria-label={t('modelManager.quickAdd')} icon={<PiPlusBold />} onClick={handleQuickAdd} />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={handleInstall} size="sm" />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -77,15 +77,15 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider mt={6} />
|
||||
<Flex flexDir="column" gap={2} mt={4} height="100%">
|
||||
<Divider />
|
||||
<Flex flexDir="column" gap={3} height="100%">
|
||||
<Flex justifyContent="space-between" alignItems="center">
|
||||
<Heading fontSize="md" as="h4">
|
||||
<Heading size="sm">
|
||||
{t('modelManager.availableModels')}
|
||||
</Heading>
|
||||
<Flex alignItems="center" gap="4">
|
||||
<Button size="sm" onClick={handleAddAll} isDisabled={results.length === 0}>
|
||||
{t('modelManager.addAll')}
|
||||
<Flex alignItems="center" gap={3}>
|
||||
<Button size="sm" onClick={handleAddAll} isDisabled={results.length === 0} flexShrink={0}>
|
||||
{t('modelManager.installAll')}
|
||||
</Button>
|
||||
<InputGroup maxW="300px" size="xs">
|
||||
<Input
|
||||
@ -110,7 +110,7 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
|
||||
</InputGroup>
|
||||
</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>
|
||||
<Flex flexDir="column" gap={3}>
|
||||
{filteredResults.map((result) => (
|
||||
|
||||
@ -9,31 +9,27 @@ import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
|
||||
export const InstallModels = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Flex layerStyle="first" p={3} borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
|
||||
<Box w="full" p={2}>
|
||||
<Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
|
||||
</Box>
|
||||
<Box layerStyle="second" borderRadius="base" w="full" h="50%" overflow="hidden">
|
||||
<Tabs variant="collapse" height="100%">
|
||||
<TabList>
|
||||
<Tab>{t('common.simple')}</Tab>
|
||||
<Tab>{t('modelManager.huggingFace')}</Tab>
|
||||
<Tab>{t('modelManager.scan')}</Tab>
|
||||
</TabList>
|
||||
<TabPanels p={3} height="100%">
|
||||
<TabPanel>
|
||||
<InstallModelForm />
|
||||
</TabPanel>
|
||||
<TabPanel height="100%">
|
||||
<HuggingFaceForm />
|
||||
</TabPanel>
|
||||
<TabPanel height="100%">
|
||||
<ScanModelsForm />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
<Box layerStyle="second" borderRadius="base" w="full" h="50%">
|
||||
<Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
|
||||
<Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
|
||||
<Tabs variant="collapse" height="50%" display="flex" flexDir="column">
|
||||
<TabList>
|
||||
<Tab>{t('common.simple')}</Tab>
|
||||
<Tab>{t('modelManager.huggingFace')}</Tab>
|
||||
<Tab>{t('modelManager.scan')}</Tab>
|
||||
</TabList>
|
||||
<TabPanels p={3} height="100%">
|
||||
<TabPanel>
|
||||
<InstallModelForm />
|
||||
</TabPanel>
|
||||
<TabPanel height="100%">
|
||||
<HuggingFaceForm />
|
||||
</TabPanel>
|
||||
<TabPanel height="100%">
|
||||
<ScanModelsForm />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
<Box layerStyle="second" borderRadius="base" h="50%">
|
||||
<ModelInstallQueue />
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user