update translations, change config value to be dimension instead of total pixels

Author: Mary Hipp

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

@@ -1673,15 +1673,15 @@
     },
     "upscaling": {
         "creativity": "Creativity",
+        "exceedsMaxSize": "Upscale settings exceed max size limit",
+        "exceedsMaxSizeDetails": "Max upscale limit is {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixels. Please try a smaller image or decrease your scale selection.",
         "structure": "Structure",
         "upscaleModel": "Upscale Model",
         "postProcessingModel": "Post-Processing Model",
         "scale": "Scale",
         "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,7 +65,7 @@ export type AppConfig = {
    */
   shouldUpdateImagesOnConnect: boolean;
   shouldFetchMetadataFromApi: boolean;
-  maxUpscalePixels?: number;
+  maxUpscaleDimension?: number;
   allowPrivateBoards: boolean;
   disabledTabs: InvokeTabName[];
   disabledFeatures: AppFeature[];

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

@@ -212,11 +212,11 @@ const createSelector = (templates: Templates) =>
         } else if (activeTabName === 'upscaling') {
           if (!upscale.upscaleInitialImage) {
             reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
-          } else if (config.maxUpscalePixels) {
+          } else if (config.maxUpscaleDimension) {
             const upscaledPixels =
               upscale.upscaleInitialImage.width * upscale.scale * upscale.upscaleInitialImage.height * upscale.scale;
-            if (upscaledPixels > config.maxUpscalePixels) {
-              reasons.push({ content: i18n.t('upscaling.outputTooLargeShort') });
+            if (upscaledPixels > config.maxUpscaleDimension) {
+              reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
             }
           }
           if (!upscale.upscaleModel) {

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

@@ -8,14 +8,14 @@ import type { ImageDTO } from 'services/api/types';
 const createIsTooLargeToUpscaleSelector = (imageDTO?: ImageDTO) =>
   createMemoizedSelector(selectUpscalelice, selectConfigSlice, (upscale, config) => {
     const { upscaleModel, scale } = upscale;
-    const { maxUpscalePixels } = config;
+    const { maxUpscaleDimension } = config;
 
-    if (!maxUpscalePixels || !upscaleModel || !imageDTO) {
+    if (!maxUpscaleDimension || !upscaleModel || !imageDTO) {
       return false;
     }
 
     const upscaledPixels = imageDTO.width * scale * imageDTO.height * scale;
-    return upscaledPixels > maxUpscalePixels;
+    return upscaledPixels > maxUpscaleDimension * maxUpscaleDimension;
   });
 
 export const useIsTooLargeToUpscale = (imageDTO?: ImageDTO) => {

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

@@ -18,6 +18,7 @@ export const UpscaleWarning = () => {
   const [modelConfigs, { isLoading }] = useControlNetModels();
   const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
   const shouldShowButton = useMemo(() => !disabledTabs.includes('models'), [disabledTabs]);
+  const maxUpscaleDimension = useAppSelector((s) => s.config.maxUpscaleDimension);
   const isTooLargeToUpscale = useIsTooLargeToUpscale(upscaleInitialImage || undefined);
 
   useEffect(() => {
@@ -43,11 +44,13 @@ export const UpscaleWarning = () => {
 
   const otherWarnings = useMemo(() => {
     const _warnings: string[] = [];
-    if (isTooLargeToUpscale) {
-      _warnings.push(t('upscaling.outputTooLarge'));
+    if (isTooLargeToUpscale && maxUpscaleDimension) {
+      _warnings.push(
+        t('upscaling.exceedsMaxSizeDetails', { maxUpscaleDimension: maxUpscaleDimension.toLocaleString() })
+      );
     }
     return _warnings;
-  }, [isTooLargeToUpscale, t]);
+  }, [isTooLargeToUpscale, t, maxUpscaleDimension]);
 
   const handleGoToModelManager = useCallback(() => {
     dispatch(setActiveTab('models'));