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

tweak(ui): simplify layout of inplace install form elements

Browse Source
This commit is contained in:
psychedelicious 2024-03-08 14:25:58 +11:00
parent a28547b3dd
commit d0fcdbe8a3
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -766,8 +766,8 @@
"importModels": "Import Models", "importModels": "Import Models",
"importQueue": "Import Queue", "importQueue": "Import Queue",
"inpainting": "v1 Inpainting", "inpainting": "v1 Inpainting",
"inplaceInstall": "Inplace install", "inplaceInstall": "In-place install",
"inplaceInstallTooltip": "If inplace installs are enabled, Invoke will reference your model files from where they are now. If disabled, your model files will be cloned into your invokeai directory and referenced from there.", "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.",
"interpolationType": "Interpolation Type", "interpolationType": "Interpolation Type",
"inverseSigmoid": "Inverse Sigmoid", "inverseSigmoid": "Inverse Sigmoid",
"invokeAIFolder": "Invoke AI Folder", "invokeAIFolder": "Invoke AI Folder",

26
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx
View File

@ -1,4 +1,4 @@
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Tooltip } from '@invoke-ai/ui-library'; import { Button, Checkbox, Flex, FormControl, 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';
@ -64,28 +64,36 @@ export const InstallModelForm = () => {
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDir="column" gap={4}>
<Flex gap={2} alignItems="flex-end" justifyContent="space-between"> <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
<FormControl> <FormControl orientation="vertical">
<Flex direction="column" w="full">
<FormLabel>{t('modelManager.modelLocation')}</FormLabel> <FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input {...register('location')} /> <Input {...register('location')} />
</Flex>
</FormControl> </FormControl>
<Button onClick={handleSubmit(onSubmit)} isDisabled={!formState.isDirty} isLoading={isLoading} type="submit"> <Button
onClick={handleSubmit(onSubmit)}
isDisabled={!formState.isDirty}
isLoading={isLoading}
type="submit"
size="sm"
mb={1}
>
{t('modelManager.addModel')} {t('modelManager.addModel')}
</Button> </Button>
</Flex> </Flex>
<FormControl flexDir="column" gap="1" alignItems="flex-start" mt={3}> <FormControl>
<Tooltip label={t('modelManager.inplaceInstallTooltip')}> <Flex flexDir="column" gap={2}>
<Flex gap={3}> <Flex gap={4}>
<Checkbox {...register('inplace')} /> <Checkbox {...register('inplace')} />
<FormLabel> <FormLabel>
{t('modelManager.inplaceInstall')} ({t('modelManager.localOnly')}) {t('modelManager.inplaceInstall')} ({t('modelManager.localOnly')})
</FormLabel> </FormLabel>
</Flex> </Flex>
</Tooltip> <FormHelperText>{t('modelManager.inplaceInstallDesc')}</FormHelperText>
</Flex>
</FormControl> </FormControl>
</Flex>
</form> </form>
); );
}; };