fix(ui): Clean up manual add forms

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

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 (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        padding: 4,
+        rowGap: 4,
+        borderRadius: 'base',
+        width: 'full',
+        bg: 'base.900',
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}

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 (
     <VStack gap={2} alignItems="flex-start">
-      <SearchModels />
+      <Flex columnGap={4}>
+        <IAICheckbox
+          isChecked={!addManually}
+          label={t('modelManager.scanForModels')}
+          onChange={() => setAddmanually(!addManually)}
+        />
         <IAICheckbox
           label={t('modelManager.addManually')}
           isChecked={addManually}
           onChange={() => setAddmanually(!addManually)}
         />
+      </Flex>
 
-      {addManually && (
+      {addManually ? (
         <Formik
           initialValues={addModelFormValues}
           onSubmit={addModelFormSubmitHandler}
@@ -90,6 +98,7 @@ export default function AddCheckpointModel() {
                   {t('modelManager.manual')}
                 </Text>
                 {/* Name */}
+                <IAIFormItemWrapper>
                   <FormControl
                     isInvalid={!!errors.name && touched.name}
                     isRequired
@@ -115,8 +124,10 @@ export default function AddCheckpointModel() {
                       )}
                     </VStack>
                   </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* Description */}
+                <IAIFormItemWrapper>
                   <FormControl
                     isInvalid={!!errors.description && touched.description}
                     isRequired
@@ -133,7 +144,9 @@ export default function AddCheckpointModel() {
                         width="full"
                       />
                       {!!errors.description && touched.description ? (
-                      <FormErrorMessage>{errors.description}</FormErrorMessage>
+                        <FormErrorMessage>
+                          {errors.description}
+                        </FormErrorMessage>
                       ) : (
                         <FormHelperText margin={0}>
                           {t('modelManager.descriptionValidationMsg')}
@@ -141,8 +154,10 @@ export default function AddCheckpointModel() {
                       )}
                     </VStack>
                   </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* Config */}
+                <IAIFormItemWrapper>
                   <FormControl
                     isInvalid={!!errors.config && touched.config}
                     isRequired
@@ -167,8 +182,10 @@ export default function AddCheckpointModel() {
                       )}
                     </VStack>
                   </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* Weights */}
+                <IAIFormItemWrapper>
                   <FormControl
                     isInvalid={!!errors.weights && touched.weights}
                     isRequired
@@ -193,8 +210,10 @@ export default function AddCheckpointModel() {
                       )}
                     </VStack>
                   </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* VAE */}
+                <IAIFormItemWrapper>
                   <FormControl isInvalid={!!errors.vae && touched.vae}>
                     <FormLabel htmlFor="vae" fontSize="sm">
                       {t('modelManager.vaeLocation')}
@@ -216,9 +235,11 @@ export default function AddCheckpointModel() {
                       )}
                     </VStack>
                   </FormControl>
+                </IAIFormItemWrapper>
 
-                <HStack width="100%" gap={8}>
+                <HStack width="100%">
                   {/* Width */}
+                  <IAIFormItemWrapper>
                     <FormControl isInvalid={!!errors.width && touched.width}>
                       <FormLabel htmlFor="width" fontSize="sm">
                         {t('modelManager.width')}
@@ -255,8 +276,10 @@ export default function AddCheckpointModel() {
                         )}
                       </VStack>
                     </FormControl>
+                  </IAIFormItemWrapper>
 
                   {/* Height */}
+                  <IAIFormItemWrapper>
                     <FormControl isInvalid={!!errors.height && touched.height}>
                       <FormLabel htmlFor="height" fontSize="sm">
                         {t('modelManager.height')}
@@ -293,6 +316,7 @@ export default function AddCheckpointModel() {
                         )}
                       </VStack>
                     </FormControl>
+                  </IAIFormItemWrapper>
                 </HStack>
 
                 <IAIButton
@@ -306,6 +330,8 @@ export default function AddCheckpointModel() {
             </IAIForm>
           )}
         </Formik>
+      ) : (
+        <SearchModels />
       )}
     </VStack>
   );

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 (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        padding: 4,
-        rowGap: 4,
-        borderRadius: 'base',
-        width: 'full',
-        bg: 'base.900',
-      }}
-    >
-      {children}
-    </Flex>
-  );
-}
+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 }) => (
           <IAIForm onSubmit={handleSubmit}>
             <VStack rowGap={2}>
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 {/* Name */}
                 <FormControl
                   isInvalid={!!errors.name && touched.name}
@@ -123,9 +102,9 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 {/* Description */}
                 <FormControl
                   isInvalid={!!errors.description && touched.description}
@@ -152,9 +131,9 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 <Text fontWeight="bold" fontSize="sm">
                   {t('modelManager.formMessageDiffusersModelLocation')}
                 </Text>
@@ -213,9 +192,9 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 {/* VAE Path */}
                 <Text fontWeight="bold">
                   {t('modelManager.formMessageDiffusersVAELocation')}
@@ -277,7 +256,7 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
               <IAIButton type="submit" isLoading={isProcessing}>
                 {t('modelManager.addModel')}