feat(ui): partial rebuild of model manager internal logic

This commit is contained in:
psychedelicious 2023-12-29 20:43:20 +11:00 committed by Kent Keirsey
parent 2a661450c3
commit 52f9749bf5
16 changed files with 457 additions and 317 deletions

View File

@ -66,7 +66,7 @@
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@fontsource-variable/inter": "^5.0.16",
"@mantine/form": "^6.0.21",
"@mantine/form": "6.0.21",
"@nanostores/react": "^0.7.1",
"@reduxjs/toolkit": "^2.0.1",
"@roarr/browser-log-writer": "^1.3.0",
@ -89,6 +89,7 @@
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-error-boundary": "^4.0.12",
"react-hook-form": "^7.49.2",
"react-hotkeys-hook": "4.4.1",
"react-i18next": "^13.5.0",
"react-icons": "^4.12.0",

View File

@ -48,7 +48,7 @@ dependencies:
specifier: ^5.0.16
version: 5.0.16
'@mantine/form':
specifier: ^6.0.21
specifier: 6.0.21
version: 6.0.21(react@18.2.0)
'@nanostores/react':
specifier: ^0.7.1
@ -116,6 +116,9 @@ dependencies:
react-error-boundary:
specifier: ^4.0.12
version: 4.0.12(react@18.2.0)
react-hook-form:
specifier: ^7.49.2
version: 7.49.2(react@18.2.0)
react-hotkeys-hook:
specifier: 4.4.1
version: 4.4.1(react-dom@18.2.0)(react@18.2.0)
@ -11049,6 +11052,15 @@ packages:
use-sidecar: 1.1.2(@types/react@18.2.46)(react@18.2.0)
dev: false
/react-hook-form@7.49.2(react@18.2.0):
resolution: {integrity: sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==}
engines: {node: '>=18', pnpm: '8'}
peerDependencies:
react: ^16.8.0 || ^17 || ^18
dependencies:
react: 18.2.0
dev: false
/react-hotkeys-hook@4.4.1(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==}
peerDependencies:

View File

@ -1,6 +1,7 @@
import {
Flex,
FormControl as ChakraFormControl,
FormErrorMessage as ChakraFormErrorMessage,
FormHelperText as ChakraFormHelperText,
forwardRef,
} from '@chakra-ui/react';
@ -22,12 +23,12 @@ export const InvControl = memo(
isDisabled,
labelProps,
label,
error,
...formControlProps
} = props;
const ctx = useContext(InvControlGroupContext);
if (helperText) {
return (
<ChakraFormControl
ref={ref}
@ -48,10 +49,12 @@ export const InvControl = memo(
)}
{children}
</Flex>
{helperText && (
<ChakraFormHelperText>{helperText}</ChakraFormHelperText>
)}
{error && <ChakraFormErrorMessage>{error}</ChakraFormErrorMessage>}
</ChakraFormControl>
);
}
return (
<ChakraFormControl

View File

@ -1,14 +1,19 @@
import { formAnatomy as parts } from '@chakra-ui/anatomy';
import {
formAnatomy as formParts,
formErrorAnatomy as formErrorParts,
} from '@chakra-ui/anatomy';
import {
createMultiStyleConfigHelpers,
defineStyle,
defineStyleConfig,
} from '@chakra-ui/styled-system';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
const {
definePartsStyle: defineFormPartsStyle,
defineMultiStyleConfig: defineFormMultiStyleConfig,
} = createMultiStyleConfigHelpers(formParts.keys);
const formBaseStyle = definePartsStyle((props) => {
const formBaseStyle = defineFormPartsStyle((props) => {
return {
container: {
display: 'flex',
@ -19,7 +24,7 @@ const formBaseStyle = definePartsStyle((props) => {
};
});
const withHelperText = definePartsStyle(() => ({
const withHelperText = defineFormPartsStyle(() => ({
container: {
flexDirection: 'column',
gap: 0,
@ -41,7 +46,7 @@ const withHelperText = definePartsStyle(() => ({
},
}));
export const formTheme = defineMultiStyleConfig({
export const formTheme = defineFormMultiStyleConfig({
baseStyle: formBaseStyle,
variants: {
withHelperText,
@ -73,3 +78,14 @@ const formLabelBaseStyle = defineStyle(() => {
export const formLabelTheme = defineStyleConfig({
baseStyle: formLabelBaseStyle,
});
const { defineMultiStyleConfig: defineFormErrorMultiStyleConfig } =
createMultiStyleConfigHelpers(formErrorParts.keys);
export const formErrorTheme = defineFormErrorMultiStyleConfig({
baseStyle: {
text: {
color: 'error.300',
},
},
});

View File

@ -7,6 +7,7 @@ import type { Feature } from 'common/components/IAIInformationalPopover/constant
export type InvControlProps = ChakraFormControlProps & {
label?: string;
helperText?: string;
error?: string;
feature?: Feature;
renderInfoPopoverInPortal?: boolean;
labelProps?: Omit<

View File

@ -1,5 +1,4 @@
import { Flex } from '@chakra-ui/react';
import { useForm } from '@mantine/form';
import { useAppDispatch } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvCheckbox } from 'common/components/InvCheckbox/wrapper';
@ -13,6 +12,8 @@ import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import type { CSSProperties, FocusEventHandler } from 'react';
import { memo, useCallback, useState } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useAddMainModelsMutation } from 'services/api/endpoints/models';
import type { CheckpointModelConfig } from 'services/api/types';
@ -28,8 +29,16 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
const dispatch = useAppDispatch();
const { model_path } = props;
const advancedAddCheckpointForm = useForm<CheckpointModelConfig>({
initialValues: {
const {
register,
handleSubmit,
control,
getValues,
setValue,
formState: { errors },
reset,
} = useForm<CheckpointModelConfig>({
defaultValues: {
model_name: model_path ? getModelName(model_path) : '',
base_model: 'sd-1',
model_type: 'main',
@ -41,13 +50,15 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
variant: 'normal',
config: 'configs\\stable-diffusion\\v1-inference.yaml',
},
mode: 'onChange',
});
const [addMainModel] = useAddMainModelsMutation();
const [useCustomConfig, setUseCustomConfig] = useState<boolean>(false);
const advancedAddCheckpointFormHandler = (values: CheckpointModelConfig) => {
const onSubmit = useCallback<SubmitHandler<CheckpointModelConfig>>(
(values) => {
addMainModel({
body: values,
})
@ -63,7 +74,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
})
)
);
advancedAddCheckpointForm.reset();
reset();
// Close Advanced Panel in Scan Models tab
if (model_path) {
@ -82,22 +93,20 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
);
}
});
};
},
[addMainModel, dispatch, model_path, reset, t]
);
const handleBlurModelLocation: FocusEventHandler<HTMLInputElement> =
useCallback(
const onBlur: FocusEventHandler<HTMLInputElement> = useCallback(
(e) => {
if (advancedAddCheckpointForm.values['model_name'] === '') {
if (getValues().model_name === '') {
const modelName = getModelName(e.currentTarget.value);
if (modelName) {
advancedAddCheckpointForm.setFieldValue(
'model_name',
modelName as string
);
setValue('model_name', modelName as string);
}
}
},
[advancedAddCheckpointForm]
[getValues, setValue]
);
const handleChangeUseCustomConfig = useCallback(
@ -106,56 +115,53 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
);
return (
<form
onSubmit={advancedAddCheckpointForm.onSubmit((v) =>
advancedAddCheckpointFormHandler(v)
)}
style={formStyles}
>
<form onSubmit={handleSubmit(onSubmit)} style={formStyles}>
<Flex flexDirection="column" gap={2}>
<InvControl label={t('modelManager.model')} isRequired>
<InvControl
label={t('modelManager.model')}
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<InvInput
{...advancedAddCheckpointForm.getInputProps('model_name')}
{...register('model_name', {
validate: (value) =>
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
</InvControl>
<InvControl label={t('modelManager.baseModel')}>
<BaseModelSelect
{...advancedAddCheckpointForm.getInputProps('base_model')}
<BaseModelSelect<CheckpointModelConfig>
control={control}
name="base_model"
/>
</InvControl>
<InvControl label={t('modelManager.modelLocation')} isRequired>
<InvControl
label={t('modelManager.modelLocation')}
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<InvInput
{...advancedAddCheckpointForm.getInputProps('path')}
onBlur={handleBlurModelLocation}
{...register('path', {
validate: (value) =>
value.trim().length > 0 || 'Must provide a path',
onBlur,
})}
/>
</InvControl>
<InvControl label={t('modelManager.description')}>
<InvInput
{...advancedAddCheckpointForm.getInputProps('description')}
/>
<InvInput {...register('description')} />
</InvControl>
<InvControl label={t('modelManager.vaeLocation')}>
<InvInput {...advancedAddCheckpointForm.getInputProps('vae')} />
<InvInput {...register('vae')} />
</InvControl>
<InvControl label={t('modelManager.variant')}>
<ModelVariantSelect
{...advancedAddCheckpointForm.getInputProps('variant')}
<ModelVariantSelect<CheckpointModelConfig>
control={control}
name="variant"
/>
</InvControl>
<Flex flexDirection="column" width="100%" gap={2}>
{!useCustomConfig ? (
<CheckpointConfigsSelect
required
{...advancedAddCheckpointForm.getInputProps('config')}
/>
<CheckpointConfigsSelect control={control} name="config" />
) : (
<InvControl
label={t('modelManager.customConfigFileLocation')}
isRequired
>
<InvInput
{...advancedAddCheckpointForm.getInputProps('config')}
/>
<InvControl isRequired label={t('modelManager.config')}>
<InvInput {...register('config')} />
</InvControl>
)}
<InvControl label={t('modelManager.useCustomConfig')}>

View File

@ -1,5 +1,4 @@
import { Flex } from '@chakra-ui/react';
import { useForm } from '@mantine/form';
import { useAppDispatch } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -11,6 +10,8 @@ import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import type { CSSProperties, FocusEventHandler } from 'react';
import { memo, useCallback } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useAddMainModelsMutation } from 'services/api/endpoints/models';
import type { DiffusersModelConfig } from 'services/api/types';
@ -28,8 +29,16 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
const [addMainModel] = useAddMainModelsMutation();
const advancedAddDiffusersForm = useForm<DiffusersModelConfig>({
initialValues: {
const {
register,
handleSubmit,
control,
getValues,
setValue,
formState: { errors },
reset,
} = useForm<DiffusersModelConfig>({
defaultValues: {
model_name: model_path ? getModelName(model_path, false) : '',
base_model: 'sd-1',
model_type: 'main',
@ -40,9 +49,11 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
vae: '',
variant: 'normal',
},
mode: 'onChange',
});
const advancedAddDiffusersFormHandler = (values: DiffusersModelConfig) => {
const onSubmit = useCallback<SubmitHandler<DiffusersModelConfig>>(
(values) => {
addMainModel({
body: values,
})
@ -58,7 +69,7 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
})
)
);
advancedAddDiffusersForm.reset();
reset();
// Close Advanced Panel in Scan Models tab
if (model_path) {
dispatch(setAdvancedAddScanModel(null));
@ -76,60 +87,66 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
);
}
});
};
},
[addMainModel, dispatch, model_path, reset, t]
);
const handleBlurModelLocation: FocusEventHandler<HTMLInputElement> =
useCallback(
const onBlur: FocusEventHandler<HTMLInputElement> = useCallback(
(e) => {
if (advancedAddDiffusersForm.values['model_name'] === '') {
if (getValues().model_name === '') {
const modelName = getModelName(e.currentTarget.value, false);
if (modelName) {
advancedAddDiffusersForm.setFieldValue(
'model_name',
modelName as string
);
setValue('model_name', modelName as string);
}
}
},
[advancedAddDiffusersForm]
[getValues, setValue]
);
return (
<form
onSubmit={advancedAddDiffusersForm.onSubmit((v) =>
advancedAddDiffusersFormHandler(v)
)}
style={formStyles}
>
<form onSubmit={handleSubmit(onSubmit)} style={formStyles}>
<Flex flexDirection="column" gap={2}>
<InvControl isRequired label={t('modelManager.model')}>
<InvInput {...advancedAddDiffusersForm.getInputProps('model_name')} />
</InvControl>
<InvControl label={t('modelManager.baseModel')}>
<BaseModelSelect
{...advancedAddDiffusersForm.getInputProps('base_model')}
<InvControl
label={t('modelManager.name')}
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<InvInput
{...register('model_name', {
validate: (value) =>
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
</InvControl>
<InvControl isRequired label={t('modelManager.modelLocation')}>
<InvControl label={t('modelManager.baseModel')}>
<BaseModelSelect<DiffusersModelConfig>
control={control}
name="base_model"
/>
</InvControl>
<InvControl
label={t('modelManager.modelLocation')}
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<InvInput
placeholder={t('modelManager.modelLocationValidationMsg')}
{...advancedAddDiffusersForm.getInputProps('path')}
onBlur={handleBlurModelLocation}
{...register('path', {
validate: (value) =>
value.trim().length > 0 || 'Must provide a path',
onBlur,
})}
/>
</InvControl>
<InvControl label={t('modelManager.description')}>
<InvInput
{...advancedAddDiffusersForm.getInputProps('description')}
/>
<InvInput {...register('description')} />
</InvControl>
<InvControl label={t('modelManager.vaeLocation')}>
<InvInput {...advancedAddDiffusersForm.getInputProps('vae')} />
<InvInput {...register('vae')} />
</InvControl>
<InvControl label={t('modelManager.variant')}>
<ModelVariantSelect
{...advancedAddDiffusersForm.getInputProps('variant')}
<ModelVariantSelect<DiffusersModelConfig>
control={control}
name="variant"
/>
</InvControl>
<InvButton mt={2} type="submit">
{t('modelManager.addModel')}

View File

@ -7,15 +7,10 @@ import SearchFolderForm from './SearchFolderForm';
const ScanModels = () => {
return (
<Flex flexDirection="column" w="100%" gap={4}>
<Flex flexDirection="column" w="100%" h="full" gap={4}>
<SearchFolderForm />
<Flex gap={4}>
<Flex
maxHeight="calc(100vh - 300px)"
overflow="scroll"
gap={4}
w="100%"
>
<Flex overflow="scroll" gap={4} w="100%" h="full">
<FoundModelsList />
</Flex>
<ScanAdvancedAddModels />

View File

@ -17,7 +17,7 @@ const ImportModelsPanel = () => {
const handleClickScanTab = useCallback(() => setAddModelTab('scan'), []);
return (
<Flex flexDirection="column" gap={4}>
<Flex flexDirection="column" gap={4} h="full">
<InvButtonGroup>
<InvButton
onClick={handleClickAddTab}

View File

@ -1,5 +1,4 @@
import { Badge, Divider, Flex } from '@chakra-ui/react';
import { useForm } from '@mantine/form';
import { useAppDispatch } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvCheckbox } from 'common/components/InvCheckbox/wrapper';
@ -13,6 +12,8 @@ import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { memo, useCallback, useEffect, useState } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type { CheckpointModelConfigEntity } from 'services/api/endpoints/models';
import {
@ -44,8 +45,14 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const checkpointEditForm = useForm<CheckpointModelConfig>({
initialValues: {
const {
register,
handleSubmit,
control,
formState: { errors },
reset,
} = useForm<CheckpointModelConfig>({
defaultValues: {
model_name: model.model_name ? model.model_name : '',
base_model: model.base_model,
model_type: 'main',
@ -56,10 +63,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
config: model.config ? model.config : '',
variant: model.variant,
},
validate: {
path: (value) =>
value.trim().length === 0 ? 'Must provide a path' : null,
},
mode: 'onChange',
});
const handleChangeUseCustomConfig = useCallback(
@ -67,8 +71,8 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
[]
);
const editModelFormSubmitHandler = useCallback(
(values: CheckpointModelConfig) => {
const onSubmit = useCallback<SubmitHandler<CheckpointModelConfig>>(
(values) => {
const responseBody = {
base_model: model.base_model,
model_name: model.model_name,
@ -77,7 +81,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
updateMainModel(responseBody)
.unwrap()
.then((payload) => {
checkpointEditForm.setValues(payload as CheckpointModelConfig);
reset(payload as CheckpointModelConfig, { keepDefaultValues: true });
dispatch(
addToast(
makeToast({
@ -88,7 +92,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
);
})
.catch((_) => {
checkpointEditForm.reset();
reset();
dispatch(
addToast(
makeToast({
@ -99,14 +103,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
);
});
},
[
checkpointEditForm,
dispatch,
model.base_model,
model.model_name,
t,
updateMainModel,
]
[dispatch, model.base_model, model.model_name, reset, t, updateMainModel]
);
return (
@ -135,42 +132,53 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
maxHeight={window.innerHeight - 270}
overflowY="scroll"
>
<form
onSubmit={checkpointEditForm.onSubmit((values) =>
editModelFormSubmitHandler(values)
)}
>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<InvControl label={t('modelManager.name')}>
<InvInput {...checkpointEditForm.getInputProps('model_name')} />
<InvControl
label={t('modelManager.name')}
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<InvInput
{...register('model_name', {
validate: (value) =>
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
</InvControl>
<InvControl label={t('modelManager.description')}>
<InvInput {...checkpointEditForm.getInputProps('description')} />
<InvInput {...register('description')} />
</InvControl>
<BaseModelSelect
required
{...checkpointEditForm.getInputProps('base_model')}
<BaseModelSelect<CheckpointModelConfig>
control={control}
name="base_model"
/>
<ModelVariantSelect
required
{...checkpointEditForm.getInputProps('variant')}
<ModelVariantSelect<CheckpointModelConfig>
control={control}
name="variant"
/>
<InvControl
label={t('modelManager.modelLocation')}
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<InvInput
{...register('path', {
validate: (value) =>
value.trim().length > 0 || 'Must provide a path',
})}
/>
<InvControl isRequired label={t('modelManager.modelLocation')}>
<InvInput {...checkpointEditForm.getInputProps('path')} />
</InvControl>
<InvControl label={t('modelManager.vaeLocation')}>
<InvInput {...checkpointEditForm.getInputProps('vae')} />
<InvInput {...register('vae')} />
</InvControl>
<Flex flexDirection="column" gap={2}>
{!useCustomConfig ? (
<CheckpointConfigsSelect
required
{...checkpointEditForm.getInputProps('config')}
/>
<CheckpointConfigsSelect control={control} name="config" />
) : (
<InvControl isRequired label={t('modelManager.config')}>
<InvInput {...checkpointEditForm.getInputProps('config')} />
<InvInput {...register('config')} />
</InvControl>
)}
<InvControl label="Use Custom Config">

View File

@ -1,5 +1,4 @@
import { Divider, Flex } from '@chakra-ui/react';
import { useForm } from '@mantine/form';
import { useAppDispatch } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -11,6 +10,8 @@ import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { memo, useCallback } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type { DiffusersModelConfigEntity } from 'services/api/endpoints/models';
import { useUpdateMainModelsMutation } from 'services/api/endpoints/models';
@ -28,8 +29,14 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const diffusersEditForm = useForm<DiffusersModelConfig>({
initialValues: {
const {
register,
handleSubmit,
control,
formState: { errors },
reset,
} = useForm<DiffusersModelConfig>({
defaultValues: {
model_name: model.model_name ? model.model_name : '',
base_model: model.base_model,
model_type: 'main',
@ -39,14 +46,11 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
vae: model.vae ? model.vae : '',
variant: model.variant,
},
validate: {
path: (value) =>
value.trim().length === 0 ? 'Must provide a path' : null,
},
mode: 'onChange',
});
const editModelFormSubmitHandler = useCallback(
(values: DiffusersModelConfig) => {
const onSubmit = useCallback<SubmitHandler<DiffusersModelConfig>>(
(values) => {
const responseBody = {
base_model: model.base_model,
model_name: model.model_name,
@ -56,7 +60,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
updateMainModel(responseBody)
.unwrap()
.then((payload) => {
diffusersEditForm.setValues(payload as DiffusersModelConfig);
reset(payload as DiffusersModelConfig, { keepDefaultValues: true });
dispatch(
addToast(
makeToast({
@ -67,7 +71,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
);
})
.catch((_) => {
diffusersEditForm.reset();
reset();
dispatch(
addToast(
makeToast({
@ -78,14 +82,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
);
});
},
[
diffusersEditForm,
dispatch,
model.base_model,
model.model_name,
t,
updateMainModel,
]
[dispatch, model.base_model, model.model_name, reset, t, updateMainModel]
);
return (
@ -100,31 +97,45 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
</Flex>
<Divider />
<form
onSubmit={diffusersEditForm.onSubmit((values) =>
editModelFormSubmitHandler(values)
)}
>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<InvControl label={t('modelManager.name')}>
<InvInput {...diffusersEditForm.getInputProps('model_name')} />
<InvControl
label={t('modelManager.name')}
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<InvInput
{...register('model_name', {
validate: (value) =>
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
</InvControl>
<InvControl label={t('modelManager.description')}>
<InvInput {...diffusersEditForm.getInputProps('description')} />
<InvInput {...register('description')} />
</InvControl>
<BaseModelSelect
required
{...diffusersEditForm.getInputProps('base_model')}
<BaseModelSelect<DiffusersModelConfig>
control={control}
name="base_model"
/>
<ModelVariantSelect
required
{...diffusersEditForm.getInputProps('variant')}
<ModelVariantSelect<DiffusersModelConfig>
control={control}
name="variant"
/>
<InvControl
label={t('modelManager.modelLocation')}
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<InvInput
{...register('path', {
validate: (value) =>
value.trim().length > 0 || 'Must provide a path',
})}
/>
<InvControl isRequired label={t('modelManager.modelLocation')}>
<InvInput {...diffusersEditForm.getInputProps('path')} />
</InvControl>
<InvControl label={t('modelManager.vaeLocation')}>
<InvInput {...diffusersEditForm.getInputProps('vae')} />
<InvInput {...register('vae')} />
</InvControl>
<InvButton type="submit" isLoading={isLoading}>
{t('modelManager.updateModel')}

View File

@ -1,5 +1,4 @@
import { Divider, Flex } from '@chakra-ui/react';
import { useForm } from '@mantine/form';
import { useAppDispatch } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -13,6 +12,8 @@ import {
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { memo, useCallback } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
import { useUpdateLoRAModelsMutation } from 'services/api/endpoints/models';
@ -30,8 +31,14 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const loraEditForm = useForm<LoRAModelConfig>({
initialValues: {
const {
register,
handleSubmit,
control,
formState: { errors },
reset,
} = useForm<LoRAModelConfig>({
defaultValues: {
model_name: model.model_name ? model.model_name : '',
base_model: model.base_model,
model_type: 'lora',
@ -39,14 +46,11 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
description: model.description ? model.description : '',
model_format: model.model_format,
},
validate: {
path: (value) =>
value.trim().length === 0 ? 'Must provide a path' : null,
},
mode: 'onChange',
});
const editModelFormSubmitHandler = useCallback(
(values: LoRAModelConfig) => {
const onSubmit = useCallback<SubmitHandler<LoRAModelConfig>>(
(values) => {
const responseBody = {
base_model: model.base_model,
model_name: model.model_name,
@ -56,7 +60,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
updateLoRAModel(responseBody)
.unwrap()
.then((payload) => {
loraEditForm.setValues(payload as LoRAModelConfig);
reset(payload as LoRAModelConfig, { keepDefaultValues: true });
dispatch(
addToast(
makeToast({
@ -67,7 +71,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
);
})
.catch((_) => {
loraEditForm.reset();
reset();
dispatch(
addToast(
makeToast({
@ -78,14 +82,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
);
});
},
[
dispatch,
loraEditForm,
model.base_model,
model.model_name,
t,
updateLoRAModel,
]
[dispatch, model.base_model, model.model_name, reset, t, updateLoRAModel]
);
return (
@ -101,21 +98,39 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
</Flex>
<Divider />
<form
onSubmit={loraEditForm.onSubmit((values) =>
editModelFormSubmitHandler(values)
)}
>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<InvControl label={t('modelManager.name')}>
<InvInput {...loraEditForm.getInputProps('model_name')} />
<InvControl
label={t('modelManager.name')}
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<InvInput
{...register('model_name', {
validate: (value) =>
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
</InvControl>
<InvControl label={t('modelManager.description')}>
<InvInput {...loraEditForm.getInputProps('description')} />
<InvInput {...register('description')} />
</InvControl>
<BaseModelSelect {...loraEditForm.getInputProps('base_model')} />
<InvControl label={t('modelManager.modelLocation')}>
<InvInput {...loraEditForm.getInputProps('path')} />
<BaseModelSelect<LoRAModelConfig>
control={control}
name="base_model"
/>
<InvControl
label={t('modelManager.modelLocation')}
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<InvInput
{...register('path', {
validate: (value) =>
value.trim().length > 0 || 'Must provide a path',
})}
/>
</InvControl>
<InvButton type="submit" isLoading={isLoading}>
{t('modelManager.updateModel')}

View File

@ -1,12 +1,16 @@
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
import type {
InvSelectOnChange,
InvSelectOption,
InvSelectProps,
} from 'common/components/InvSelect/types';
import { typedMemo } from 'common/util/typedMemo';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { memo } from 'react';
import { useCallback, useMemo } from 'react';
import type { UseControllerProps } from 'react-hook-form';
import { useController } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type { AnyModelConfig } from 'services/api/types';
const options: InvSelectOption[] = [
{ value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] },
@ -15,15 +19,26 @@ const options: InvSelectOption[] = [
{ value: 'sdxl-refiner', label: MODEL_TYPE_MAP['sdxl-refiner'] },
];
type BaseModelSelectProps = Omit<InvSelectProps, 'options'>;
const BaseModelSelect = (props: BaseModelSelectProps) => {
const BaseModelSelect = <T extends AnyModelConfig>(
props: UseControllerProps<T>
) => {
const { t } = useTranslation();
const { field } = useController(props);
const value = useMemo(
() => options.find((o) => o.value === field.value),
[field.value]
);
const onChange = useCallback<InvSelectOnChange>(
(v) => {
field.onChange(v?.value);
},
[field]
);
return (
<InvControl label={t('modelManager.baseModel')}>
<InvSelect options={options} {...props} />
<InvSelect value={value} options={options} onChange={onChange} />
</InvControl>
);
};
export default memo(BaseModelSelect);
export default typedMemo(BaseModelSelect);

View File

@ -2,29 +2,44 @@ import type { ChakraProps } from '@chakra-ui/react';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
import type {
InvSelectOnChange,
InvSelectOption,
InvSelectProps,
} from 'common/components/InvSelect/types';
import { memo, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useController, type UseControllerProps } from 'react-hook-form';
import { useGetCheckpointConfigsQuery } from 'services/api/endpoints/models';
type CheckpointConfigSelectProps = Omit<InvSelectProps, 'options'>;
import type { CheckpointModelConfig } from 'services/api/types';
const sx: ChakraProps['sx'] = { w: 'full' };
const CheckpointConfigsSelect = (props: CheckpointConfigSelectProps) => {
const CheckpointConfigsSelect = (
props: UseControllerProps<CheckpointModelConfig>
) => {
const { data } = useGetCheckpointConfigsQuery();
const options = useMemo<InvSelectOption[]>(
() => (data ? data.map((i) => ({ label: i, value: i })) : []),
[data]
);
const { field } = useController(props);
const value = useMemo(
() => options.find((o) => o.value === field.value),
[field.value, options]
);
const onChange = useCallback<InvSelectOnChange>(
(v) => {
field.onChange(v?.value);
},
[field]
);
return (
<InvControl label="Config File">
<InvSelect
placeholder="Select A Config File"
value={value}
options={options}
onChange={onChange}
sx={sx}
{...props}
/>
</InvControl>
);

View File

@ -1,11 +1,18 @@
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
import type {
InvSelectOnChange,
InvSelectOption,
InvSelectProps,
} from 'common/components/InvSelect/types';
import { memo } from 'react';
import { typedMemo } from 'common/util/typedMemo';
import { useCallback, useMemo } from 'react';
import type { UseControllerProps } from 'react-hook-form';
import { useController } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type {
CheckpointModelConfig,
DiffusersModelConfig,
} from 'services/api/types';
const options: InvSelectOption[] = [
{ value: 'normal', label: 'Normal' },
@ -13,15 +20,28 @@ const options: InvSelectOption[] = [
{ value: 'depth', label: 'Depth' },
];
type VariantSelectProps = Omit<InvSelectProps, 'options'>;
const ModelVariantSelect = (props: VariantSelectProps) => {
const ModelVariantSelect = <
T extends CheckpointModelConfig | DiffusersModelConfig,
>(
props: UseControllerProps<T>
) => {
const { t } = useTranslation();
const { field } = useController(props);
const value = useMemo(
() => options.find((o) => o.value === field.value),
[field.value]
);
const onChange = useCallback<InvSelectOnChange>(
(v) => {
field.onChange(v?.value);
},
[field]
);
return (
<InvControl label={t('modelManager.variant')}>
<InvSelect options={options} {...props} />
<InvSelect value={value} options={options} onChange={onChange} />
</InvControl>
);
};
export default memo(ModelVariantSelect);
export default typedMemo(ModelVariantSelect);

View File

@ -4,7 +4,11 @@ import { badgeTheme } from 'common/components/InvBadge/theme';
import { buttonTheme } from 'common/components/InvButton/theme';
import { cardTheme } from 'common/components/InvCard/theme';
import { checkboxTheme } from 'common/components/InvCheckbox/theme';
import { formLabelTheme, formTheme } from 'common/components/InvControl/theme';
import {
formErrorTheme,
formLabelTheme,
formTheme,
} from 'common/components/InvControl/theme';
import { editableTheme } from 'common/components/InvEditable/theme';
import { headingTheme } from 'common/components/InvHeading/theme';
import { inputTheme } from 'common/components/InvInput/theme';
@ -112,6 +116,7 @@ export const theme: ThemeOverride = {
Text: textTheme,
Textarea: textareaTheme,
Tooltip: tooltipTheme,
FormError: formErrorTheme,
},
space: space,
sizes: space,