mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat: Update DiffusersEdit Component to use Mantine Form
This commit is contained in:
blessedcoolant
psychedelicious
parent
009c20bfea
commit
33db4e27a0
@ -351,6 +351,7 @@
|
||||
"scanForModels": "Scan For Models",
|
||||
"addManually": "Add Manually",
|
||||
"manual": "Manual",
|
||||
"baseModel": "Base Model",
|
||||
"name": "Name",
|
||||
"nameValidationMsg": "Enter a name for your model",
|
||||
"description": "Description",
|
||||
@ -363,6 +364,7 @@
|
||||
"repoIDValidationMsg": "Online repository of your model",
|
||||
"vaeLocation": "VAE Location",
|
||||
"vaeLocationValidationMsg": "Path to where your VAE is located.",
|
||||
"variant": "Variant",
|
||||
"vaeRepoID": "VAE Repo ID",
|
||||
"vaeRepoIDValidationMsg": "Online repository of your VAE",
|
||||
"width": "Width",
|
||||
|
||||
@ -24,6 +24,7 @@ export default function ModelManagerPanel() {
|
||||
<DiffusersModelEdit
|
||||
modelToEdit={openModel}
|
||||
retrievedModel={mainModels['entities'][openModel]}
|
||||
key={openModel}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
||||
@ -1,245 +1,118 @@
|
||||
import IAIButton from 'common/components/IAIButton';
|
||||
import IAIInput from 'common/components/IAIInput';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
||||
|
||||
import { Flex, FormControl, FormLabel, Text, VStack } from '@chakra-ui/react';
|
||||
import { Divider, Flex, Text } from '@chakra-ui/react';
|
||||
|
||||
// import { addNewModel } from 'app/socketio/actions';
|
||||
import { Field, Formik } from 'formik';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useForm } from '@mantine/form';
|
||||
import type { RootState } from 'app/store/store';
|
||||
import type { InvokeDiffusersModelConfigProps } from 'app/types/invokeai';
|
||||
import IAIForm from 'common/components/IAIForm';
|
||||
import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
|
||||
import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
|
||||
import IAIButton from 'common/components/IAIButton';
|
||||
import IAIInput from 'common/components/IAIInput';
|
||||
import IAIMantineSelect from 'common/components/IAIMantineSelect';
|
||||
import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
|
||||
import { S } from 'services/api/types';
|
||||
|
||||
type DiffusersModel =
|
||||
| S<'StableDiffusion1ModelDiffusersConfig'>
|
||||
| S<'StableDiffusion2ModelDiffusersConfig'>;
|
||||
|
||||
type DiffusersModelEditProps = {
|
||||
modelToEdit: string;
|
||||
retrievedModel: any;
|
||||
retrievedModel: DiffusersModel;
|
||||
};
|
||||
|
||||
const baseModelSelectData = [
|
||||
{ value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] },
|
||||
{ value: 'sd-2', label: MODEL_TYPE_MAP['sd-2'] },
|
||||
];
|
||||
|
||||
const variantSelectData = [
|
||||
{ value: 'normal', label: 'Normal' },
|
||||
{ value: 'inpaint', label: 'Inpaint' },
|
||||
{ value: 'depth', label: 'Depth' },
|
||||
];
|
||||
|
||||
export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
|
||||
const isProcessing = useAppSelector(
|
||||
(state: RootState) => state.system.isProcessing
|
||||
);
|
||||
|
||||
const { retrievedModel, modelToEdit } = props;
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [editModelFormValues, setEditModelFormValues] =
|
||||
useState<InvokeDiffusersModelConfigProps>({
|
||||
name: '',
|
||||
description: '',
|
||||
repo_id: '',
|
||||
path: '',
|
||||
vae: { repo_id: '', path: '' },
|
||||
default: false,
|
||||
const diffusersEditForm = useForm({
|
||||
initialValues: {
|
||||
name: retrievedModel.name,
|
||||
base_model: retrievedModel.base_model,
|
||||
type: 'main',
|
||||
path: retrievedModel.path,
|
||||
description: retrievedModel.description,
|
||||
model_format: 'diffusers',
|
||||
});
|
||||
vae: retrievedModel.vae,
|
||||
variant: retrievedModel.variant,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setEditModelFormValues({
|
||||
name: modelToEdit,
|
||||
description: retrievedModel?.description,
|
||||
path:
|
||||
retrievedModel?.path && retrievedModel?.path !== 'None'
|
||||
? retrievedModel?.path
|
||||
: '',
|
||||
repo_id:
|
||||
retrievedModel?.repo_id && retrievedModel?.repo_id !== 'None'
|
||||
? retrievedModel?.repo_id
|
||||
: '',
|
||||
vae: {
|
||||
repo_id: retrievedModel?.vae?.repo_id
|
||||
? retrievedModel?.vae?.repo_id
|
||||
: '',
|
||||
path: retrievedModel?.vae?.path ? retrievedModel?.vae?.path : '',
|
||||
},
|
||||
default: retrievedModel?.default,
|
||||
model_format: 'diffusers',
|
||||
});
|
||||
}, [retrievedModel, modelToEdit]);
|
||||
|
||||
const editModelFormSubmitHandler = (
|
||||
values: InvokeDiffusersModelConfigProps
|
||||
) => {
|
||||
const diffusersModelToEdit = values;
|
||||
|
||||
if (values.path === '') delete diffusersModelToEdit.path;
|
||||
if (values.repo_id === '') delete diffusersModelToEdit.repo_id;
|
||||
if (values.vae.path === '') delete diffusersModelToEdit.vae.path;
|
||||
if (values.vae.repo_id === '') delete diffusersModelToEdit.vae.repo_id;
|
||||
|
||||
dispatch(addNewModel(values));
|
||||
const editModelFormSubmitHandler = (values) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return modelToEdit ? (
|
||||
<Flex flexDirection="column" rowGap={4} width="100%">
|
||||
<Flex alignItems="center">
|
||||
<Flex flexDirection="column">
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
{retrievedModel.name}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="base.400">
|
||||
{MODEL_TYPE_MAP[retrievedModel.base_model]} Model
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex flexDirection="column" overflowY="scroll" paddingInlineEnd={8}>
|
||||
<Formik
|
||||
enableReinitialize={true}
|
||||
initialValues={editModelFormValues}
|
||||
onSubmit={editModelFormSubmitHandler}
|
||||
<Divider />
|
||||
|
||||
<form
|
||||
onSubmit={diffusersEditForm.onSubmit((values) =>
|
||||
editModelFormSubmitHandler(values)
|
||||
)}
|
||||
>
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
overflowY="scroll"
|
||||
gap={4}
|
||||
paddingInlineEnd={8}
|
||||
>
|
||||
{({ handleSubmit, errors, touched }) => (
|
||||
<IAIForm onSubmit={handleSubmit}>
|
||||
<VStack rowGap={2} alignItems="start">
|
||||
{/* Description */}
|
||||
<FormControl
|
||||
isInvalid={!!errors.description && touched.description}
|
||||
isRequired
|
||||
>
|
||||
<FormLabel htmlFor="description" fontSize="sm">
|
||||
{t('modelManager.description')}
|
||||
</FormLabel>
|
||||
<VStack alignItems="start">
|
||||
<Field
|
||||
as={IAIInput}
|
||||
id="description"
|
||||
name="description"
|
||||
type="text"
|
||||
width="full"
|
||||
/>
|
||||
{!!errors.description && touched.description ? (
|
||||
<IAIFormErrorMessage>
|
||||
{errors.description}
|
||||
</IAIFormErrorMessage>
|
||||
) : (
|
||||
<IAIFormHelperText>
|
||||
{t('modelManager.descriptionValidationMsg')}
|
||||
</IAIFormHelperText>
|
||||
)}
|
||||
</VStack>
|
||||
</FormControl>
|
||||
|
||||
{/* Path */}
|
||||
<FormControl
|
||||
isInvalid={!!errors.path && touched.path}
|
||||
isRequired
|
||||
>
|
||||
<FormLabel htmlFor="path" fontSize="sm">
|
||||
{t('modelManager.modelLocation')}
|
||||
</FormLabel>
|
||||
<VStack alignItems="start">
|
||||
<Field
|
||||
as={IAIInput}
|
||||
id="path"
|
||||
name="path"
|
||||
type="text"
|
||||
width="full"
|
||||
/>
|
||||
{!!errors.path && touched.path ? (
|
||||
<IAIFormErrorMessage>{errors.path}</IAIFormErrorMessage>
|
||||
) : (
|
||||
<IAIFormHelperText>
|
||||
{t('modelManager.modelLocationValidationMsg')}
|
||||
</IAIFormHelperText>
|
||||
)}
|
||||
</VStack>
|
||||
</FormControl>
|
||||
|
||||
{/* Repo ID */}
|
||||
<FormControl isInvalid={!!errors.repo_id && touched.repo_id}>
|
||||
<FormLabel htmlFor="repo_id" fontSize="sm">
|
||||
{t('modelManager.repo_id')}
|
||||
</FormLabel>
|
||||
<VStack alignItems="start">
|
||||
<Field
|
||||
as={IAIInput}
|
||||
id="repo_id"
|
||||
name="repo_id"
|
||||
type="text"
|
||||
width="full"
|
||||
/>
|
||||
{!!errors.repo_id && touched.repo_id ? (
|
||||
<IAIFormErrorMessage>
|
||||
{errors.repo_id}
|
||||
</IAIFormErrorMessage>
|
||||
) : (
|
||||
<IAIFormHelperText>
|
||||
{t('modelManager.repoIDValidationMsg')}
|
||||
</IAIFormHelperText>
|
||||
)}
|
||||
</VStack>
|
||||
</FormControl>
|
||||
|
||||
{/* VAE Path */}
|
||||
<FormControl
|
||||
isInvalid={!!errors.vae?.path && touched.vae?.path}
|
||||
>
|
||||
<FormLabel htmlFor="vae.path" fontSize="sm">
|
||||
{t('modelManager.vaeLocation')}
|
||||
</FormLabel>
|
||||
<VStack alignItems="start">
|
||||
<Field
|
||||
as={IAIInput}
|
||||
id="vae.path"
|
||||
name="vae.path"
|
||||
type="text"
|
||||
width="full"
|
||||
/>
|
||||
{!!errors.vae?.path && touched.vae?.path ? (
|
||||
<IAIFormErrorMessage>
|
||||
{errors.vae?.path}
|
||||
</IAIFormErrorMessage>
|
||||
) : (
|
||||
<IAIFormHelperText>
|
||||
{t('modelManager.vaeLocationValidationMsg')}
|
||||
</IAIFormHelperText>
|
||||
)}
|
||||
</VStack>
|
||||
</FormControl>
|
||||
|
||||
{/* VAE Repo ID */}
|
||||
<FormControl
|
||||
isInvalid={!!errors.vae?.repo_id && touched.vae?.repo_id}
|
||||
>
|
||||
<FormLabel htmlFor="vae.repo_id" fontSize="sm">
|
||||
{t('modelManager.vaeRepoID')}
|
||||
</FormLabel>
|
||||
<VStack alignItems="start">
|
||||
<Field
|
||||
as={IAIInput}
|
||||
id="vae.repo_id"
|
||||
name="vae.repo_id"
|
||||
type="text"
|
||||
width="full"
|
||||
/>
|
||||
{!!errors.vae?.repo_id && touched.vae?.repo_id ? (
|
||||
<IAIFormErrorMessage>
|
||||
{errors.vae?.repo_id}
|
||||
</IAIFormErrorMessage>
|
||||
) : (
|
||||
<IAIFormHelperText>
|
||||
{t('modelManager.vaeRepoIDValidationMsg')}
|
||||
</IAIFormHelperText>
|
||||
)}
|
||||
</VStack>
|
||||
</FormControl>
|
||||
|
||||
<IAIButton
|
||||
type="submit"
|
||||
className="modal-close-btn"
|
||||
isLoading={isProcessing}
|
||||
>
|
||||
{t('modelManager.updateModel')}
|
||||
</IAIButton>
|
||||
</VStack>
|
||||
</IAIForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Flex>
|
||||
<IAIInput
|
||||
label={t('modelManager.name')}
|
||||
{...diffusersEditForm.getInputProps('name')}
|
||||
/>
|
||||
<IAIInput
|
||||
label={t('modelManager.description')}
|
||||
{...diffusersEditForm.getInputProps('description')}
|
||||
/>
|
||||
<IAIMantineSelect
|
||||
label={t('modelManager.baseModel')}
|
||||
data={baseModelSelectData}
|
||||
{...diffusersEditForm.getInputProps('base_model')}
|
||||
/>
|
||||
<IAIMantineSelect
|
||||
label={t('modelManager.variant')}
|
||||
data={variantSelectData}
|
||||
{...diffusersEditForm.getInputProps('variant')}
|
||||
/>
|
||||
<IAIInput
|
||||
label={t('modelManager.modelLocation')}
|
||||
{...diffusersEditForm.getInputProps('path')}
|
||||
/>
|
||||
<IAIInput
|
||||
label={t('modelManager.vaeLocation')}
|
||||
{...diffusersEditForm.getInputProps('vae')}
|
||||
/>
|
||||
<IAIButton disabled={isProcessing} type="submit">
|
||||
{t('modelManager.updateModel')}
|
||||
</IAIButton>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
) : (
|
||||
<Flex
|
||||
|
||||
Loading…
Reference in New Issue
Block a user