feat(ui): add out of sync details to model default settings button

Author: Mary Hipp

invokeai/frontend/web/public/locales/en.json

@@ -713,8 +713,10 @@
         "convertToDiffusersHelpText4": "This is a one time process only. It might take around 30s-60s depending on the specifications of your computer.",
         "convertToDiffusersHelpText5": "Please make sure you have enough disk space. Models generally vary between 2GB-7GB in size.",
         "convertToDiffusersHelpText6": "Do you wish to convert this model?",
+        "noDefaultSettings": "No Default Settings configured for this model. Visit the Model Manager to configure.",
         "defaultSettings": "Default Settings",
         "defaultSettingsSaved": "Default Settings Saved",
+        "defaultSettingsOutOfSync": "The below generation settings are out of sync for this model's default settings",
         "delete": "Delete",
         "deleteConfig": "Delete Config",
         "deleteModel": "Delete Model",
@@ -773,6 +775,7 @@
         "pruneTooltip": "Prune finished imports from queue",
         "repo_id": "Repo ID",
         "repoVariant": "Repo Variant",
+        "restoreDefaultSettings": "Click to reset to default settings",
         "scanFolder": "Scan Folder",
         "scanFolderHelper": "The folder will be recursively scanned for models. This can take a few moments for very large folders.",
         "scanPlaceholder": "Path to a local folder",
@@ -799,7 +802,7 @@
         "uploadImage": "Upload Image",
         "urlOrLocalPath": "URL or Local Path",
         "urlOrLocalPathHelper": "URLs should point to a single file. Local paths can point to a single file or folder for a single diffusers model.",
-        "useDefaultSettings": "Use Default Settings",
+        "usingDefaultSettings": "Using default settings",
         "vae": "VAE",
         "vaePrecision": "VAE Precision",
         "variant": "Variant",

invokeai/frontend/web/src/features/parameters/components/MainModel/UseDefaultSettingsButton.tsx

@@ -1,15 +1,155 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { Flex, IconButton, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectModel } from 'features/controlLayers/store/paramsSlice';
+import {
+  selectCFGRescaleMultiplier,
+  selectCFGScale,
+  selectGuidance,
+  selectModel,
+  selectScheduler,
+  selectSteps,
+  selectVAE,
+  selectVAEPrecision,
+} from 'features/controlLayers/store/paramsSlice';
+import { selectHeight, selectWidth } from 'features/controlLayers/store/selectors';
 import { setDefaultSettings } from 'features/parameters/store/actions';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiSparkleFill } from 'react-icons/pi';
+import { modelConfigsAdapterSelectors, useGetModelConfigsQuery } from 'services/api/endpoints/models';
+import { isNonRefinerMainModelConfig } from 'services/api/types';
 
 export const UseDefaultSettingsButton = () => {
   const model = useAppSelector(selectModel);
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const { data: modelConfigs } = useGetModelConfigsQuery();
+
+  const scheduler = useAppSelector(selectScheduler);
+  const steps = useAppSelector(selectSteps);
+  const vae = useAppSelector(selectVAE);
+  const vaePrecision = useAppSelector(selectVAEPrecision);
+  const width = useAppSelector(selectWidth);
+  const height = useAppSelector(selectHeight);
+  const guidance = useAppSelector(selectGuidance);
+  const cfg = useAppSelector(selectCFGScale);
+  const cfgRescale = useAppSelector(selectCFGRescaleMultiplier);
+
+  const modelConfig = useMemo(() => {
+    if (!modelConfigs) {
+      return null;
+    }
+    if (model === null) {
+      return null;
+    }
+
+    return modelConfigsAdapterSelectors.selectById(modelConfigs, model.key);
+  }, [modelConfigs, model]);
+
+  const hasDefaultSettings = useMemo(() => {
+    const settings = modelConfig && isNonRefinerMainModelConfig(modelConfig) && modelConfig.default_settings;
+    return settings && Object.values(settings).some((setting) => !!setting);
+  }, [modelConfig]);
+
+  const defaultSettings = useMemo(() => {
+    return modelConfig && isNonRefinerMainModelConfig(modelConfig) && modelConfig.default_settings
+      ? modelConfig.default_settings
+      : {};
+  }, [modelConfig]);
+
+  const outOfSyncSettings = useMemo(() => {
+    const settings = [];
+    if (hasDefaultSettings) {
+      const {
+        vae: defaultVAE,
+        vae_precision: defaultVAEPrecision,
+        cfg_scale: defaultCfg,
+        cfg_rescale_multiplier: defaultCfgRescale,
+        steps: defaultSteps,
+        scheduler: defaultScheduler,
+        width: defaultWidth,
+        height: defaultHeight,
+        guidance: defaultGuidance,
+      } = defaultSettings;
+
+      if (defaultVAE && vae && defaultVAE !== vae.key) {
+        settings.push(t('modelManager.vae'));
+      }
+
+      if (defaultVAE && !vae && defaultVAE !== 'default') {
+        settings.push(t('modelManager.vae'));
+      }
+
+      if (defaultVAEPrecision && defaultVAEPrecision !== vaePrecision) {
+        settings.push(t('modelManager.vaePrecision'));
+      }
+
+      if (defaultCfg && defaultCfg !== cfg) {
+        settings.push(t('parameters.cfgScale'));
+      }
+
+      if (defaultCfgRescale && defaultCfgRescale !== cfgRescale) {
+        settings.push(t('parameters.cfgRescaleMultiplier'));
+      }
+
+      if (defaultSteps && defaultSteps !== steps) {
+        settings.push(t('parameters.steps'));
+      }
+
+      if (defaultScheduler && defaultScheduler !== scheduler) {
+        settings.push(t('parameters.scheduler'));
+      }
+
+      if (defaultWidth && defaultWidth !== width) {
+        settings.push(t('parameters.width'));
+      }
+
+      if (defaultHeight && defaultHeight !== height) {
+        settings.push(t('parameters.height'));
+      }
+
+      if (defaultGuidance && defaultGuidance !== guidance) {
+        settings.push(t('parameters.guidance'));
+      }
+    }
+    return settings;
+  }, [
+    hasDefaultSettings,
+    vae,
+    vaePrecision,
+    cfg,
+    cfgRescale,
+    steps,
+    scheduler,
+    width,
+    height,
+    guidance,
+    t,
+    defaultSettings,
+  ]);
+
+  const tooltip = useMemo(() => {
+    if (!hasDefaultSettings) {
+      return t('modelManager.noDefaultSettings');
+    }
+
+    if (outOfSyncSettings.length === 0) {
+      return t('modelManager.usingDefaultSettings');
+    }
+
+    return (
+      <Flex direction="column" gap={3}>
+        <Flex direction="column">
+          <Text>{t('modelManager.defaultSettingsOutOfSync')}</Text>
+          <UnorderedList>
+            {outOfSyncSettings.map((setting) => (
+              <ListItem key={setting}>{setting}</ListItem>
+            ))}
+          </UnorderedList>
+        </Flex>
+        <Text>{t('modelManager.restoreDefaultSettings')}</Text>
+      </Flex>
+    );
+  }, [outOfSyncSettings, t, hasDefaultSettings]);
 
   const handleClickDefaultSettings = useCallback(() => {
     dispatch(setDefaultSettings());
@@ -18,12 +158,13 @@ export const UseDefaultSettingsButton = () => {
   return (
     <IconButton
       icon={<PiSparkleFill />}
-      tooltip={t('modelManager.useDefaultSettings')}
+      tooltip={tooltip}
       aria-label={t('modelManager.useDefaultSettings')}
-      isDisabled={!model}
+      isDisabled={!model || !hasDefaultSettings}
       onClick={handleClickDefaultSettings}
       size="sm"
       variant="ghost"
+      colorScheme={outOfSyncSettings.length ? 'warning' : 'invokeBlue'}
     />
   );
 };