(ui): restore optioanl limit on upcsale output resolution

Author: Mary Hipp

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

@@ -1052,11 +1052,7 @@
         "remixImage": "Remix Image",
         "usePrompt": "Use Prompt",
         "useSeed": "Use Seed",
-        "width": "Width",
-        "isAllowedToUpscale": {
-            "useX2Model": "Image is too large to upscale with x4 model, use x2 model",
-            "tooLarge": "Image is too large to upscale, select smaller image"
-        }
+        "width": "Width"
     },
     "dynamicPrompts": {
         "showDynamicPrompts": "Show Dynamic Prompts",
@@ -1684,6 +1680,8 @@
         "postProcessingMissingModelWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install a post-processing (image to image) model.",
         "missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
         "mainModelDesc": "Main model (SD1.5 or SDXL architecture)",
+        "outputTooLargeShort": "Output is too large to upscale",
+        "outputTooLarge": "Max upscale limit is 10,000x10,000 pixels. Please try a smaller image or decrease your scale selection.",
         "tileControlNetModelDesc": "Tile ControlNet model for the chosen main model architecture",
         "upscaleModelDesc": "Upscale (image to image) model",
         "missingUpscaleInitialImage": "Missing initial image for upscaling",

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -65,6 +65,7 @@ export type AppConfig = {
    */
   shouldUpdateImagesOnConnect: boolean;
   shouldFetchMetadataFromApi: boolean;
+  maxUpscalePixels?: number;
   allowPrivateBoards: boolean;
   disabledTabs: InvokeTabName[];
   disabledFeatures: AppFeature[];

invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts

@@ -16,6 +16,7 @@ import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettin
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { selectUpscalelice } from 'features/parameters/store/upscaleSlice';
+import { selectConfigSlice } from 'features/system/store/configSlice';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import i18n from 'i18next';
@@ -42,6 +43,7 @@ const createSelector = (templates: Templates) =>
       selectControlLayersSlice,
       activeTabNameSelector,
       selectUpscalelice,
+      selectConfigSlice,
     ],
     (
       controlAdapters,
@@ -52,7 +54,8 @@ const createSelector = (templates: Templates) =>
       dynamicPrompts,
       controlLayers,
       activeTabName,
-      upscale
+      upscale,
+      config
     ) => {
       const { model } = generation;
       const { size } = controlLayers.present;
@@ -209,6 +212,12 @@ const createSelector = (templates: Templates) =>
         } else if (activeTabName === 'upscaling') {
           if (!upscale.upscaleInitialImage) {
             reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
+          } else if (config.maxUpscalePixels) {
+            const upscaledPixels =
+              upscale.upscaleInitialImage.width * upscale.scale * upscale.upscaleInitialImage.height * upscale.scale;
+            if (upscaledPixels > config.maxUpscalePixels) {
+              reasons.push({ content: i18n.t('upscaling.outputTooLargeShort') });
+            }
           }
           if (!upscale.upscaleModel) {
             reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });

invokeai/frontend/web/src/features/parameters/hooks/useIsTooLargeToUpscale.ts

@@ -5,24 +5,20 @@ import { selectConfigSlice } from 'features/system/store/configSlice';
 import { useMemo } from 'react';
 import type { ImageDTO } from 'services/api/types';
 
-
 export const createIsTooLargeToUpscaleSelector = (imageDTO?: ImageDTO) =>
   createMemoizedSelector(selectUpscalelice, selectConfigSlice, (upscale, config) => {
     const { upscaleModel, scale } = upscale;
     const { maxUpscalePixels } = config;
 
     if (!maxUpscalePixels || !upscaleModel || !imageDTO) {
-      return false
+      return false;
     }
 
     const upscaledPixels = imageDTO.width * scale * imageDTO.height * scale;
-    console.log({ upscaledPixels })
-    console.log({ maxUpscalePixels })
-    return upscaledPixels > maxUpscalePixels
-
+    return upscaledPixels > maxUpscalePixels;
   });
 
 export const useIsTooLargeToUpscale = (imageDTO?: ImageDTO) => {
   const selectIsTooLargeToUpscale = useMemo(() => createIsTooLargeToUpscaleSelector(imageDTO), [imageDTO]);
   return useAppSelector(selectIsTooLargeToUpscale);
-};
+};

invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx

@@ -1,12 +1,12 @@
 import { Button, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
+import { useIsTooLargeToUpscale } from 'features/parameters/hooks/useIsTooLargeToUpscale';
 import { tileControlnetModelChanged } from 'features/parameters/store/upscaleSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useCallback, useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useControlNetModels } from 'services/api/hooks/modelsByType';
-import { useIsTooLargeToUpscale } from '../../../parameters/hooks/useIsTooLargeToUpscale';
 
 export const UpscaleWarning = () => {
   const { t } = useTranslation();
@@ -42,13 +42,12 @@ export const UpscaleWarning = () => {
   }, [model, tileControlnetModel, upscaleModel, t]);
 
   const otherWarnings = useMemo(() => {
-    console.log({ isTooLargeToUpscale });
     const _warnings: string[] = [];
     if (isTooLargeToUpscale) {
       _warnings.push(t('upscaling.outputTooLarge'));
     }
     return _warnings;
-  }, [isTooLargeToUpscale]);
+  }, [isTooLargeToUpscale, t]);
 
   const handleGoToModelManager = useCallback(() => {
     dispatch(setActiveTab('models'));