feat(ui): update default settings for main models

Needed some massaging now that only main models get main model default settings.

invokeai/frontend/web/src/features/modelManagerV2/hooks/useMainModelDefaultSettings.ts

@@ -0,0 +1,65 @@
+import { skipToken } from '@reduxjs/toolkit/query';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectConfigSlice } from 'features/system/store/configSlice';
+import { isNil } from 'lodash-es';
+import { useMemo } from 'react';
+import { useGetModelConfigWithTypeGuard } from 'services/api/hooks/useGetModelConfigWithTypeGuard';
+import { isNonRefinerMainModelConfig } from 'services/api/types';
+
+const initialStatesSelector = createMemoizedSelector(selectConfigSlice, (config) => {
+  const { steps, guidance, scheduler, cfgRescaleMultiplier, vaePrecision } = config.sd;
+
+  return {
+    initialSteps: steps.initial,
+    initialCfg: guidance.initial,
+    initialScheduler: scheduler,
+    initialCfgRescaleMultiplier: cfgRescaleMultiplier.initial,
+    initialVaePrecision: vaePrecision,
+  };
+});
+
+export const useMainModelDefaultSettings = (modelKey?: string | null) => {
+  const { modelConfig, isLoading } = useGetModelConfigWithTypeGuard(modelKey ?? skipToken, isNonRefinerMainModelConfig);
+
+  const { initialSteps, initialCfg, initialScheduler, initialCfgRescaleMultiplier, initialVaePrecision } =
+    useAppSelector(initialStatesSelector);
+
+  const defaultSettingsDefaults = useMemo(() => {
+    return {
+      vae: {
+        isEnabled: !isNil(modelConfig?.default_settings?.vae),
+        value: modelConfig?.default_settings?.vae || 'default',
+      },
+      vaePrecision: {
+        isEnabled: !isNil(modelConfig?.default_settings?.vae_precision),
+        value: modelConfig?.default_settings?.vae_precision || initialVaePrecision || 'fp32',
+      },
+      scheduler: {
+        isEnabled: !isNil(modelConfig?.default_settings?.scheduler),
+        value: modelConfig?.default_settings?.scheduler || initialScheduler || 'euler',
+      },
+      steps: {
+        isEnabled: !isNil(modelConfig?.default_settings?.steps),
+        value: modelConfig?.default_settings?.steps || initialSteps,
+      },
+      cfgScale: {
+        isEnabled: !isNil(modelConfig?.default_settings?.cfg_scale),
+        value: modelConfig?.default_settings?.cfg_scale || initialCfg,
+      },
+      cfgRescaleMultiplier: {
+        isEnabled: !isNil(modelConfig?.default_settings?.cfg_rescale_multiplier),
+        value: modelConfig?.default_settings?.cfg_rescale_multiplier || initialCfgRescaleMultiplier,
+      },
+    };
+  }, [
+    modelConfig?.default_settings,
+    initialSteps,
+    initialCfg,
+    initialScheduler,
+    initialCfgRescaleMultiplier,
+    initialVaePrecision,
+  ]);
+
+  return { defaultSettingsDefaults, isLoading };
+};

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/DefaultSettings.tsx

@@ -1,68 +0,0 @@
-import { Text } from '@invoke-ai/ui-library';
-import { skipToken } from '@reduxjs/toolkit/query';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectConfigSlice } from 'features/system/store/configSlice';
-import { isNil } from 'lodash-es';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useGetModelConfigQuery } from 'services/api/endpoints/models';
-
-import { DefaultSettingsForm } from './DefaultSettings/DefaultSettingsForm';
-
-const initialStatesSelector = createMemoizedSelector(selectConfigSlice, (config) => {
-  const { steps, guidance, scheduler, cfgRescaleMultiplier, vaePrecision } = config.sd;
-
-  return {
-    initialSteps: steps.initial,
-    initialCfg: guidance.initial,
-    initialScheduler: scheduler,
-    initialCfgRescaleMultiplier: cfgRescaleMultiplier.initial,
-    initialVaePrecision: vaePrecision,
-  };
-});
-
-export const DefaultSettings = () => {
-  const selectedModelKey = useAppSelector((s) => s.modelmanagerV2.selectedModelKey);
-  const { t } = useTranslation();
-
-  const { data, isLoading } = useGetModelConfigQuery(selectedModelKey ?? skipToken);
-  const { initialSteps, initialCfg, initialScheduler, initialCfgRescaleMultiplier, initialVaePrecision } =
-    useAppSelector(initialStatesSelector);
-
-  const defaultSettingsDefaults = useMemo(() => {
-    return {
-      vae: { isEnabled: !isNil(data?.default_settings?.vae), value: data?.default_settings?.vae || 'default' },
-      vaePrecision: {
-        isEnabled: !isNil(data?.default_settings?.vae_precision),
-        value: data?.default_settings?.vae_precision || initialVaePrecision || 'fp32',
-      },
-      scheduler: {
-        isEnabled: !isNil(data?.default_settings?.scheduler),
-        value: data?.default_settings?.scheduler || initialScheduler || 'euler',
-      },
-      steps: { isEnabled: !isNil(data?.default_settings?.steps), value: data?.default_settings?.steps || initialSteps },
-      cfgScale: {
-        isEnabled: !isNil(data?.default_settings?.cfg_scale),
-        value: data?.default_settings?.cfg_scale || initialCfg,
-      },
-      cfgRescaleMultiplier: {
-        isEnabled: !isNil(data?.default_settings?.cfg_rescale_multiplier),
-        value: data?.default_settings?.cfg_rescale_multiplier || initialCfgRescaleMultiplier,
-      },
-    };
-  }, [
-    data?.default_settings,
-    initialSteps,
-    initialCfg,
-    initialScheduler,
-    initialCfgRescaleMultiplier,
-    initialVaePrecision,
-  ]);
-
-  if (isLoading) {
-    return <Text>{t('common.loading')}</Text>;
-  }
-
-  return <DefaultSettingsForm defaultSettingsDefaults={defaultSettingsDefaults} />;
-};

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultCfgRescaleMultiplier.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/DefaultSettings/SettingToggle';
+import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/SettingToggle';
 import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';
 import { useController } from 'react-hook-form';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultCfgScale.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/DefaultSettings/SettingToggle';
+import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/SettingToggle';
 import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';
 import { useController } from 'react-hook-form';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultScheduler.tsx

@@ -1,7 +1,7 @@
 import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/DefaultSettings/SettingToggle';
+import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/SettingToggle';
 import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
 import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
 import { useCallback, useMemo } from 'react';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultSteps.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/DefaultSettings/SettingToggle';
+import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/SettingToggle';
 import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';
 import { useController } from 'react-hook-form';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultVae.tsx

@@ -3,7 +3,7 @@ import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/DefaultSettings/SettingToggle';
+import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/SettingToggle';
 import { map } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultVaePrecision.tsx

@@ -1,7 +1,7 @@
 import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/DefaultSettings/SettingToggle';
+import { SettingToggle } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/SettingToggle';
 import { isParameterPrecision } from 'features/parameters/types/parameterSchemas';
 import { useCallback, useMemo } from 'react';
 import type { UseControllerProps } from 'react-hook-form';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx

@@ -0,0 +1,144 @@
+import { Button, Flex, Heading, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useMainModelDefaultSettings } from 'features/modelManagerV2/hooks/useMainModelDefaultSettings';
+import type { ParameterScheduler } from 'features/parameters/types/parameterSchemas';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
+import { useCallback } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { PiCheckBold } from 'react-icons/pi';
+import { useUpdateModelMutation } from 'services/api/endpoints/models';
+
+import { DefaultCfgRescaleMultiplier } from './DefaultCfgRescaleMultiplier';
+import { DefaultCfgScale } from './DefaultCfgScale';
+import { DefaultScheduler } from './DefaultScheduler';
+import { DefaultSteps } from './DefaultSteps';
+import { DefaultVae } from './DefaultVae';
+import { DefaultVaePrecision } from './DefaultVaePrecision';
+interface FormField<T> {
+  value: T;
+  isEnabled: boolean;
+}
+
+type DefaultSettingsFormData = {
+  vae: FormField<string>;
+  vaePrecision: FormField<string>;
+  scheduler: FormField<ParameterScheduler>;
+  steps: FormField<number>;
+  cfgScale: FormField<number>;
+  cfgRescaleMultiplier: FormField<number>;
+};
+
+export const MainModelDefaultSettings = () => {
+  const selectedModelKey = useAppSelector((s) => s.modelmanagerV2.selectedModelKey);
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const { defaultSettingsDefaults, isLoading: isLoadingDefaultSettings } =
+    useMainModelDefaultSettings(selectedModelKey);
+
+  const [updateModel, { isLoading: isLoadingUpdateModel }] = useUpdateModelMutation();
+
+  const { handleSubmit, control, formState, reset } = useForm<DefaultSettingsFormData>({
+    defaultValues: defaultSettingsDefaults,
+  });
+
+  const onSubmit = useCallback<SubmitHandler<DefaultSettingsFormData>>(
+    (data) => {
+      if (!selectedModelKey) {
+        return;
+      }
+
+      const body = {
+        vae: data.vae.isEnabled ? data.vae.value : null,
+        vae_precision: data.vaePrecision.isEnabled ? data.vaePrecision.value : null,
+        cfg_scale: data.cfgScale.isEnabled ? data.cfgScale.value : null,
+        cfg_rescale_multiplier: data.cfgRescaleMultiplier.isEnabled ? data.cfgRescaleMultiplier.value : null,
+        steps: data.steps.isEnabled ? data.steps.value : null,
+        scheduler: data.scheduler.isEnabled ? data.scheduler.value : null,
+      };
+
+      updateModel({
+        key: selectedModelKey,
+        body: { default_settings: body },
+      })
+        .unwrap()
+        .then((_) => {
+          dispatch(
+            addToast(
+              makeToast({
+                title: t('modelManager.defaultSettingsSaved'),
+                status: 'success',
+              })
+            )
+          );
+          reset(data);
+        })
+        .catch((error) => {
+          if (error) {
+            dispatch(
+              addToast(
+                makeToast({
+                  title: `${error.data.detail} `,
+                  status: 'error',
+                })
+              )
+            );
+          }
+        });
+    },
+    [selectedModelKey, dispatch, reset, updateModel, t]
+  );
+
+  if (isLoadingDefaultSettings) {
+    return <Text>{t('common.loading')}</Text>;
+  }
+
+  return (
+    <>
+      <Flex gap="4" justifyContent="space-between" w="full" pb={4}>
+        <Heading fontSize="md">{t('modelManager.defaultSettings')}</Heading>
+        <Button
+          size="sm"
+          leftIcon={<PiCheckBold />}
+          colorScheme="invokeYellow"
+          isDisabled={!formState.isDirty}
+          onClick={handleSubmit(onSubmit)}
+          type="submit"
+          isLoading={isLoadingUpdateModel}
+        >
+          {t('common.save')}
+        </Button>
+      </Flex>
+
+      <Flex flexDir="column" gap={8}>
+        <Flex gap={8}>
+          <Flex gap={4} w="full">
+            <DefaultVae control={control} name="vae" />
+          </Flex>
+          <Flex gap={4} w="full">
+            <DefaultVaePrecision control={control} name="vaePrecision" />
+          </Flex>
+        </Flex>
+        <Flex gap={8}>
+          <Flex gap={4} w="full">
+            <DefaultScheduler control={control} name="scheduler" />
+          </Flex>
+          <Flex gap={4} w="full">
+            <DefaultSteps control={control} name="steps" />
+          </Flex>
+        </Flex>
+        <Flex gap={8}>
+          <Flex gap={4} w="full">
+            <DefaultCfgScale control={control} name="cfgScale" />
+          </Flex>
+          <Flex gap={4} w="full">
+            <DefaultCfgRescaleMultiplier control={control} name="cfgRescaleMultiplier" />
+          </Flex>
+        </Flex>
+      </Flex>
+    </>
+  );
+};

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx

@@ -5,7 +5,7 @@ import { TriggerPhrases } from 'features/modelManagerV2/subpanels/ModelPanel/Tri
 import { useTranslation } from 'react-i18next';
 import { useGetModelConfigQuery } from 'services/api/endpoints/models';
 
-import { DefaultSettings } from './DefaultSettings';
+import { MainModelDefaultSettings } from './MainModelDefaultSettings/MainModelDefaultSettings';
 import { ModelAttrView } from './ModelAttrView';
 
 export const ModelView = () => {
@@ -61,7 +61,7 @@ export const ModelView = () => {
       </Box>
       {data.type === 'main' && (
         <Box layerStyle="second" borderRadius="base" p={4}>
-          <DefaultSettings />
+          <MainModelDefaultSettings />
         </Box>
       )}
       {(data.type === 'main' || data.type === 'lora') && (

invokeai/frontend/web/src/services/api/types.ts

@@ -89,6 +89,12 @@ export const isControlAdapterModelConfig = (
   return isControlNetModelConfig(config) || isT2IAdapterModelConfig(config) || isIPAdapterModelConfig(config);
 };
 
+export const isControlNetOrT2IAdapterModelConfig = (
+  config: AnyModelConfig
+): config is ControlNetModelConfig | T2IAdapterModelConfig => {
+  return isControlNetModelConfig(config) || isT2IAdapterModelConfig(config);
+};
+
 export const isNonRefinerMainModelConfig = (config: AnyModelConfig): config is MainModelConfig => {
   return config.type === 'main' && config.base !== 'sdxl-refiner';
 };