diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx index 20f4330658..d989463d75 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx @@ -1,337 +1,16 @@ -import { - Flex, - FormControl, - FormErrorMessage, - FormHelperText, - FormLabel, - HStack, - Text, - VStack, -} from '@chakra-ui/react'; - -import IAIButton from 'common/components/IAIButton'; -import IAIInput from 'common/components/IAIInput'; -import IAINumberInput from 'common/components/IAINumberInput'; -import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox'; -import React from 'react'; - -// import { addNewModel } from 'app/socketio/actions'; - -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; - -import { Field, Formik } from 'formik'; -import { useTranslation } from 'react-i18next'; - -import type { RootState } from 'app/store/store'; -import type { InvokeModelConfigProps } from 'app/types/invokeai'; -import IAIForm from 'common/components/IAIForm'; -import { IAIFormItemWrapper } from 'common/components/IAIForms/IAIFormItemWrapper'; -import { setAddNewModelUIOption } from 'features/ui/store/uiSlice'; -import type { FieldInputProps, FormikProps } from 'formik'; -import SearchModels from './SearchModels'; - -const MIN_MODEL_SIZE = 64; -const MAX_MODEL_SIZE = 2048; +import { Flex } from '@chakra-ui/react'; +import FoundModelsList from './FoundModelsList'; +import SearchFolderForm from './SearchFolderForm'; export default function ScanModels() { - const dispatch = useAppDispatch(); - const { t } = useTranslation(); - - const isProcessing = useAppSelector( - (state: RootState) => state.system.isProcessing - ); - - function hasWhiteSpace(s: string) { - return /\s/.test(s); - } - - function baseValidation(value: string) { - let error; - if (hasWhiteSpace(value)) error = t('modelManager.cannotUseSpaces'); - return error; - } - - const addModelFormValues: InvokeModelConfigProps = { - name: '', - description: '', - config: 'configs/stable-diffusion/v1-inference.yaml', - weights: '', - vae: '', - width: 512, - height: 512, - format: 'ckpt', - default: false, - }; - - const addModelFormSubmitHandler = (values: InvokeModelConfigProps) => { - dispatch(addNewModel(values)); - dispatch(setAddNewModelUIOption(null)); - }; - - const [addManually, setAddmanually] = React.useState(false); - return ( - - - setAddmanually(!addManually)} - /> - setAddmanually(!addManually)} - /> + + + + - - {addManually ? ( - - {({ handleSubmit, errors, touched }) => ( - - - - {t('modelManager.manual')} - - {/* Name */} - - - - {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')} - - )} - - - - - {/* Config */} - - - - {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')} - - )} - - - - - {/* VAE */} - - - - {t('modelManager.vaeLocation')} - - - - {!!errors.vae && touched.vae ? ( - {errors.vae} - ) : ( - - {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)) - } - /> - )} - - - {!!errors.height && touched.height ? ( - {errors.height} - ) : ( - - {t('modelManager.heightValidationMsg')} - - )} - - - - - - - {t('modelManager.addModel')} - - - - )} - - ) : ( - - )} - + ); } diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchModels.tsx deleted file mode 100644 index be2d9ea20d..0000000000 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchModels.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Flex } from '@chakra-ui/react'; -import { useAppDispatch } from 'app/store/storeHooks'; -import { useTranslation } from 'react-i18next'; -import FoundModelsList from './FoundModelsList'; -import SearchFolderForm from './SearchFolderForm'; - -export default function SearchModels() { - const dispatch = useAppDispatch(); - const { t } = useTranslation(); - - return ( - - - - - - - ); -}