feat(ui): update warnings on upscaling tab based on model arch

When an unsupported model architecture is selected, show that warning only, without the extra warnings (i.e. no "missing tile controlnet" warning) Update Invoke tooltip warnings accordingly Closes #7239 Closes #7177
invoke-ai · Nov 8, 2024 · 79eb817 · 79eb817
1 parent 5b3e159
commit 79eb817
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -1999,7 +1999,9 @@
         "upscaleModelDesc": "Upscale (image to image) model",
         "missingUpscaleInitialImage": "Missing initial image for upscaling",
         "missingUpscaleModel": "Missing upscale model",
-        "missingTileControlNetModel": "No valid tile ControlNet models installed"
+        "missingTileControlNetModel": "No valid tile ControlNet models installed",
+        "incompatibleBaseModel": "Unsupported main model architecture for upscaling",
+        "incompatibleBaseModelDesc": "Upscaling is supported for SD1.5 and SDXL architecture models only. Change the main model to enable upscaling."
     },
     "stylePresets": {
         "active": "Active",

diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
@@ -119,11 +119,20 @@ const createSelector = (
             reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
           }
         }
-        if (!upscale.upscaleModel) {
-          reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
-        }
-        if (!upscale.tileControlnetModel) {
-          reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
+        if (model && !['sd-1', 'sdxl'].includes(model.base)) {
+          // When we are using an upsupported model, do not add the other warnings
+          reasons.push({ content: i18n.t('upscaling.incompatibleBaseModel') });
+        } else {
+          // Using a compatible model, add all warnings
+          if (!model) {
+            reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
+          }
+          if (!upscale.upscaleModel) {
+            reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
+          }
+          if (!upscale.tileControlnetModel) {
+            reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
+          }
         }
       } else {
         if (canvasIsFiltering) {

diff --git a/...eb/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx b/...eb/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx
@@ -34,8 +34,15 @@ export const UpscaleWarning = () => {
     dispatch(tileControlnetModelChanged(validModel || null));
   }, [model?.base, modelConfigs, dispatch]);
 
+  const isBaseModelCompatible = useMemo(() => {
+    return model && ['sd-1', 'sdxl'].includes(model.base);
+  }, [model]);
+
   const modelWarnings = useMemo(() => {
     const _warnings: string[] = [];
+    if (!isBaseModelCompatible) {
+      return _warnings;
+    }
     if (!model) {
       _warnings.push(t('upscaling.mainModelDesc'));
     }
@@ -46,7 +53,7 @@ export const UpscaleWarning = () => {
       _warnings.push(t('upscaling.upscaleModelDesc'));
     }
     return _warnings;
-  }, [model, tileControlnetModel, upscaleModel, t]);
+  }, [isBaseModelCompatible, model, tileControlnetModel, upscaleModel, t]);
 
   const otherWarnings = useMemo(() => {
     const _warnings: string[] = [];
@@ -58,22 +65,25 @@ export const UpscaleWarning = () => {
     return _warnings;
   }, [isTooLargeToUpscale, t, maxUpscaleDimension]);
 
+  const allWarnings = useMemo(() => [...modelWarnings, ...otherWarnings], [modelWarnings, otherWarnings]);
+
   const handleGoToModelManager = useCallback(() => {
     dispatch(setActiveTab('models'));
     $installModelsTab.set(3);
   }, [dispatch]);
 
-  if (modelWarnings.length && isModelsTabDisabled) {
+  if (isBaseModelCompatible && modelWarnings.length > 0 && isModelsTabDisabled) {
     return null;
   }
 
-  if ((!modelWarnings.length && !otherWarnings.length) || isLoading) {
+  if ((isBaseModelCompatible && allWarnings.length === 0) || isLoading) {
     return null;
   }
 
   return (
     <Flex bg="error.500" borderRadius="base" padding={4} direction="column" fontSize="sm" gap={2}>
-      {!!modelWarnings.length && (
+      {!isBaseModelCompatible && <Text>{t('upscaling.incompatibleBaseModelDesc')}</Text>}
+      {modelWarnings.length > 0 && (
         <Text>
           <Trans
             i18nKey="upscaling.missingModelsWarning"
@@ -85,11 +95,13 @@ export const UpscaleWarning = () => {
           />
         </Text>
       )}
-      <UnorderedList>
-        {[...modelWarnings, ...otherWarnings].map((warning) => (
-          <ListItem key={warning}>{warning}</ListItem>
-        ))}
-      </UnorderedList>
+      {allWarnings.length > 0 && (
+        <UnorderedList>
+          {allWarnings.map((warning) => (
+            <ListItem key={warning}>{warning}</ListItem>
+          ))}
+        </UnorderedList>
+      )}
     </Flex>
   );
 };