diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 22e6a089e2..53b5963821 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -333,6 +333,7 @@
"addNewModel": "Add New Model",
"addCheckpointModel": "Add Checkpoint / Safetensor Model",
"addDiffuserModel": "Add Diffusers",
+ "scanForModels": "Scan For Models",
"addManually": "Add Manually",
"manual": "Manual",
"name": "Name",
diff --git a/invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx b/invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx
new file mode 100644
index 0000000000..1b1ca29d76
--- /dev/null
+++ b/invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx
@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/react';
+import { ReactElement } from 'react';
+
+export function IAIFormItemWrapper({
+ children,
+}: {
+ children: ReactElement | ReactElement[];
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
index e0de5e87b0..5fc877891e 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx
@@ -1,4 +1,5 @@
import {
+ Flex,
FormControl,
FormErrorMessage,
FormHelperText,
@@ -28,6 +29,7 @@ import type { RootState } from 'app/store';
import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
import type { FieldInputProps, FormikProps } from 'formik';
import IAIForm from 'common/components/IAIForm';
+import { IAIFormItemWrapper } from 'common/components/IAIForms/IAIFormItemWrapper';
const MIN_MODEL_SIZE = 64;
const MAX_MODEL_SIZE = 2048;
@@ -71,14 +73,20 @@ export default function AddCheckpointModel() {
return (
-
- setAddmanually(!addManually)}
- />
+
+ setAddmanually(!addManually)}
+ />
+ setAddmanually(!addManually)}
+ />
+
- {addManually && (
+ {addManually ? (
{/* Name */}
-
-
- {t('modelManager.name')}
-
-
-
- {!!errors.name && touched.name ? (
- {errors.name}
- ) : (
-
- {t('modelManager.nameValidationMsg')}
-
- )}
-
-
+
+
+
+ {t('modelManager.name')}
+
+
+
+ {!!errors.name && touched.name ? (
+ {errors.name}
+ ) : (
+
+ {t('modelManager.nameValidationMsg')}
+
+ )}
+
+
+
{/* Description */}
-
-
- {t('modelManager.description')}
-
-
-
- {!!errors.description && touched.description ? (
- {errors.description}
- ) : (
-
- {t('modelManager.descriptionValidationMsg')}
-
- )}
-
-
+
+
+
+ {t('modelManager.description')}
+
+
+
+ {!!errors.description && touched.description ? (
+
+ {errors.description}
+
+ ) : (
+
+ {t('modelManager.descriptionValidationMsg')}
+
+ )}
+
+
+
{/* Config */}
-
-
- {t('modelManager.config')}
-
-
-
- {!!errors.config && touched.config ? (
- {errors.config}
- ) : (
-
- {t('modelManager.configValidationMsg')}
-
- )}
-
-
+
+
+
+ {t('modelManager.config')}
+
+
+
+ {!!errors.config && touched.config ? (
+ {errors.config}
+ ) : (
+
+ {t('modelManager.configValidationMsg')}
+
+ )}
+
+
+
{/* Weights */}
-
-
- {t('modelManager.modelLocation')}
-
-
-
- {!!errors.weights && touched.weights ? (
- {errors.weights}
- ) : (
-
- {t('modelManager.modelLocationValidationMsg')}
-
- )}
-
-
+
+
+
+ {t('modelManager.modelLocation')}
+
+
+
+ {!!errors.weights && touched.weights ? (
+ {errors.weights}
+ ) : (
+
+ {t('modelManager.modelLocationValidationMsg')}
+
+ )}
+
+
+
{/* VAE */}
-
-
- {t('modelManager.vaeLocation')}
-
-
-
- {!!errors.vae && touched.vae ? (
- {errors.vae}
- ) : (
-
- {t('modelManager.vaeLocationValidationMsg')}
-
- )}
-
-
-
-
- {/* Width */}
-
-
- {t('modelManager.width')}
+
+
+
+ {t('modelManager.vaeLocation')}
-
- {({
- field,
- form,
- }: {
- field: FieldInputProps;
- form: FormikProps;
- }) => (
-
- form.setFieldValue(field.name, Number(value))
- }
- />
- )}
-
-
- {!!errors.width && touched.width ? (
- {errors.width}
+
+ {!!errors.vae && touched.vae ? (
+ {errors.vae}
) : (
- {t('modelManager.widthValidationMsg')}
+ {t('modelManager.vaeLocationValidationMsg')}
)}
+
+
+
+ {/* Width */}
+
+
+
+ {t('modelManager.width')}
+
+
+
+ {({
+ field,
+ form,
+ }: {
+ field: FieldInputProps;
+ form: FormikProps;
+ }) => (
+
+ form.setFieldValue(field.name, Number(value))
+ }
+ />
+ )}
+
+
+ {!!errors.width && touched.width ? (
+ {errors.width}
+ ) : (
+
+ {t('modelManager.widthValidationMsg')}
+
+ )}
+
+
+
{/* Height */}
-
-
- {t('modelManager.height')}
-
-
-
- {({
- field,
- form,
- }: {
- field: FieldInputProps;
- form: FormikProps;
- }) => (
-
- form.setFieldValue(field.name, Number(value))
- }
- />
- )}
-
+
+
+
+ {t('modelManager.height')}
+
+
+
+ {({
+ field,
+ form,
+ }: {
+ field: FieldInputProps;
+ form: FormikProps;
+ }) => (
+
+ form.setFieldValue(field.name, Number(value))
+ }
+ />
+ )}
+
- {!!errors.height && touched.height ? (
- {errors.height}
- ) : (
-
- {t('modelManager.heightValidationMsg')}
-
- )}
-
-
+ {!!errors.height && touched.height ? (
+ {errors.height}
+ ) : (
+
+ {t('modelManager.heightValidationMsg')}
+
+ )}
+
+
+
)}
+ ) : (
+
)}
);
diff --git a/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx b/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
index 0f7b07d975..14cd488b72 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx
@@ -17,29 +17,8 @@ import { Field, Formik } from 'formik';
import { useTranslation } from 'react-i18next';
import type { RootState } from 'app/store';
-import type { ReactElement } from 'react';
import IAIForm from 'common/components/IAIForm';
-
-function FormItemWrapper({
- children,
-}: {
- children: ReactElement | ReactElement[];
-}) {
- return (
-
- {children}
-
- );
-}
+import { IAIFormItemWrapper } from 'common/components/IAIForms/IAIFormItemWrapper';
export default function AddDiffusersModel() {
const dispatch = useAppDispatch();
@@ -95,7 +74,7 @@ export default function AddDiffusersModel() {
{({ handleSubmit, errors, touched }) => (
-
+
{/* Name */}
-
+
-
+
{/* Description */}
-
+
-
+
{t('modelManager.formMessageDiffusersModelLocation')}
@@ -213,9 +192,9 @@ export default function AddDiffusersModel() {
)}
-
+
-
+
{/* VAE Path */}
{t('modelManager.formMessageDiffusersVAELocation')}
@@ -277,7 +256,7 @@ export default function AddDiffusersModel() {
)}
-
+
{t('modelManager.addModel')}