feat: Update DiffusersEdit Component to use Mantine Form

invokeai/frontend/web/public/locales/en.json

@@ -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",

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx

@@ -24,6 +24,7 @@ export default function ModelManagerPanel() {
         <DiffusersModelEdit
           modelToEdit={openModel}
           retrievedModel={mainModels['entities'][openModel]}
+          key={openModel}
         />
       );
     } else {

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx

@@ -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 IAIButton from 'common/components/IAIButton';
-import IAIForm from 'common/components/IAIForm';
+import IAIInput from 'common/components/IAIInput';
-import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
+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] =
+  const diffusersEditForm = useForm({
-    useState<InvokeDiffusersModelConfigProps>({
+    initialValues: {
-      name: '',
+      name: retrievedModel.name,
-      description: '',
+      base_model: retrievedModel.base_model,
-      repo_id: '',
+      type: 'main',
-      path: '',
+      path: retrievedModel.path,
-      vae: { repo_id: '', path: '' },
+      description: retrievedModel.description,
-      default: false,
       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 = (
+  const editModelFormSubmitHandler = (values) => {
-    values: InvokeDiffusersModelConfigProps
+    console.log(values);
-  ) => {
-    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));
   };
 
   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}>
+      <Divider />
-        <Formik
-          enableReinitialize={true}
-          initialValues={editModelFormValues}
-          onSubmit={editModelFormSubmitHandler}
-        >
-          {({ 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 */}
+      <form
-                <FormControl
+        onSubmit={diffusersEditForm.onSubmit((values) =>
-                  isInvalid={!!errors.path && touched.path}
+          editModelFormSubmitHandler(values)
-                  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">
+        <Flex
-                    {t('modelManager.vaeLocation')}
+          flexDirection="column"
-                  </FormLabel>
+          overflowY="scroll"
-                  <VStack alignItems="start">
+          gap={4}
-                    <Field
+          paddingInlineEnd={8}
-                      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">
+          <IAIInput
-                    {t('modelManager.vaeRepoID')}
+            label={t('modelManager.name')}
-                  </FormLabel>
+            {...diffusersEditForm.getInputProps('name')}
-                  <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 ? (
+          <IAIInput
-                      <IAIFormErrorMessage>
+            label={t('modelManager.description')}
-                        {errors.vae?.repo_id}
+            {...diffusersEditForm.getInputProps('description')}
-                      </IAIFormErrorMessage>
+          />
-                    ) : (
+          <IAIMantineSelect
-                      <IAIFormHelperText>
+            label={t('modelManager.baseModel')}
-                        {t('modelManager.vaeRepoIDValidationMsg')}
+            data={baseModelSelectData}
-                      </IAIFormHelperText>
+            {...diffusersEditForm.getInputProps('base_model')}
-                    )}
+          />
-                  </VStack>
+          <IAIMantineSelect
-                </FormControl>
+            label={t('modelManager.variant')}
-
+            data={variantSelectData}
-                <IAIButton
+            {...diffusersEditForm.getInputProps('variant')}
-                  type="submit"
+          />
-                  className="modal-close-btn"
+          <IAIInput
-                  isLoading={isProcessing}
+            label={t('modelManager.modelLocation')}
-                >
+            {...diffusersEditForm.getInputProps('path')}
+          />
+          <IAIInput
+            label={t('modelManager.vaeLocation')}
+            {...diffusersEditForm.getInputProps('vae')}
+          />
+          <IAIButton disabled={isProcessing} type="submit">
             {t('modelManager.updateModel')}
           </IAIButton>
-              </VStack>
-            </IAIForm>
-          )}
-        </Formik>
         </Flex>
+      </form>
     </Flex>
   ) : (
     <Flex