From cdd2c52836bd7b0fed1fb590a72cc5c84a2afecc Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Tue, 27 Feb 2024 10:39:55 -0500 Subject: [PATCH 1/2] update UI to display VAE override for model as dropdown of installed options --- .../subpanels/ModelPanel/Fields/VaeSelect.tsx | 72 +++++++++++++++++++ .../subpanels/ModelPanel/ModelEdit.tsx | 39 ++-------- 2 files changed, 76 insertions(+), 35 deletions(-) create mode 100644 invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/VaeSelect.tsx diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/VaeSelect.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/VaeSelect.tsx new file mode 100644 index 00000000000..206e5817dda --- /dev/null +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/VaeSelect.tsx @@ -0,0 +1,72 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox } from '@invoke-ai/ui-library'; +import { typedMemo } from 'common/util/typedMemo'; +import { useCallback, useMemo } from 'react'; +import type { UseControllerProps } from 'react-hook-form'; +import { useController, useWatch } from 'react-hook-form'; +import type { AnyModelConfig } from 'services/api/types'; +import { useGetVaeModelsQuery } from '../../../../../services/api/endpoints/models'; +import { useTranslation } from 'react-i18next'; +import { GroupBase } from 'chakra-react-select'; +import { map, reduce, groupBy } from 'lodash-es'; + +const VaeSelect = (props: UseControllerProps) => { + const { t } = useTranslation(); + const { field } = useController(props); + const { data } = useGetVaeModelsQuery(); + const base = useWatch({ control: props.control, name: 'base' }); + + const onChange = useCallback( + (value) => { + if (!value) { + field.onChange(null); + return; + } + + field.onChange(value.value); + }, + [field] + ); + + const options = useMemo[]>(() => { + if (!data) { + return []; + } + const modelEntitiesArray = map(data.entities); + const groupedModels = groupBy(modelEntitiesArray, 'base'); + const _options = reduce( + groupedModels, + (acc, val, label) => { + acc.push({ + label, + options: val.map((model) => ({ + label: model.name, + value: model.path, + isDisabled: base !== model.base, + })), + }); + return acc; + }, + [] as GroupBase[] + ); + _options.sort((a) => (a.label === base ? -1 : 1)); + return _options; + }, [data, base]); + + const value = useMemo( + () => options.flatMap((o) => o.options).find((m) => (field.value ? m.value === field.value : false)) ?? null, + [options, field.value] + ); + + return ( + + ); +}; + +export default typedMemo(VaeSelect); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx index 5025271b8a4..fad1fbe129b 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx @@ -29,6 +29,7 @@ import ModelTypeSelect from './Fields/ModelTypeSelect'; import ModelVariantSelect from './Fields/ModelVariantSelect'; import PredictionTypeSelect from './Fields/PredictionTypeSelect'; import RepoVariantSelect from './Fields/RepoVariantSelect'; +import VaeSelect from './Fields/VaeSelect'; export const ModelEdit = () => { const dispatch = useAppDispatch(); @@ -39,39 +40,6 @@ export const ModelEdit = () => { const { t } = useTranslation(); - // const modelData = useMemo(() => { - // if (!data) { - // return null; - // } - // const modelFormat = data.format; - // const modelType = data.type; - - // if (modelType === 'main') { - // if (modelFormat === 'diffusers') { - // return data as DiffusersModelConfig; - // } else if (modelFormat === 'checkpoint') { - // return data as CheckpointModelConfig; - // } - // } - - // switch (modelType) { - // case 'lora': - // return data as LoRAModelConfig; - // case 'embedding': - // return data as TextualInversionModelConfig; - // case 't2i_adapter': - // return data as T2IAdapterModelConfig; - // case 'ip_adapter': - // return data as IPAdapterModelConfig; - // case 'controlnet': - // return data as ControlNetModelConfig; - // case 'vae': - // return data as VAEModelConfig; - // default: - // return null; - // } - // }, [data]); - const { register, handleSubmit, @@ -91,6 +59,7 @@ export const ModelEdit = () => { const onSubmit = useCallback>( (values) => { + console.log({ values }); if (!data?.key) { return; } @@ -243,8 +212,8 @@ export const ModelEdit = () => { control={control} name="ztsnr_training" /> - {t('modelManager.vaeLocation')} - + {t('modelManager.vae')} + From fd41d1e8dc4ea0bed8ba8cf5d96989d9f01c7871 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Tue, 27 Feb 2024 10:46:24 -0500 Subject: [PATCH 2/2] remove log --- .../features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx index fad1fbe129b..723e641d1d6 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx @@ -59,7 +59,6 @@ export const ModelEdit = () => { const onSubmit = useCallback>( (values) => { - console.log({ values }); if (!data?.key) { return; }