base scale off of upscale model selected

invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts

@@ -3,7 +3,6 @@ import type { GraphType } from 'features/nodes/util/graph/generation/Graph';
 import { Graph } from 'features/nodes/util/graph/generation/Graph';
 import { isParamESRGANModelName } from 'features/parameters/store/postprocessingSlice';
 import { assert } from 'tsafe';
-
 import { CLIP_SKIP, CONTROL_NET_COLLECT, ESRGAN, IMAGE_TO_LATENTS, LATENTS_TO_IMAGE, MAIN_MODEL_LOADER, NEGATIVE_CONDITIONING, NOISE, POSITIVE_CONDITIONING, RESIZE, SDXL_MODEL_LOADER, TILED_MULTI_DIFFUSION_DENOISE_LATENTS, UNSHARP_MASK, VAE_LOADER } from './constants';
 import { addLoRAs } from './generation/addLoRAs';
 import { addSDXLLoRas } from './generation/addSDXLLoRAs';
@@ -21,12 +20,13 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
         vae,
     } = state.generation;
     const { positivePrompt, negativePrompt } = state.controlLayers.present;
-    const { upscaleModel, upscaleInitialImage, sharpness, structure, creativity, tiledVAE } = state.upscale;
+    const { upscaleModel, upscaleInitialImage, sharpness, structure, creativity, tiledVAE, scale } = state.upscale;
 
     assert(model, 'No model found in state');
     assert(upscaleModel, 'No upscale model found in state');
     assert(upscaleInitialImage, 'No initial image found in state');
     assert(isParamESRGANModelName(upscaleModel.name), "")
+    assert(scale)
 
     const g = new Graph()
 
@@ -56,13 +56,11 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
 
     g.addEdge(upscaleNode, 'image', unsharpMaskNode2, 'image',)
 
-    const SCALE = 4
-
     const resizeNode = g.addNode({
         id: RESIZE,
         type: 'img_resize',
-        width: ((upscaleInitialImage.width * SCALE) / 8) * 8,
+        width: ((upscaleInitialImage.width * scale) / 8) * 8,
-        height: ((upscaleInitialImage.height * SCALE) / 8) * 8,
+        height: ((upscaleInitialImage.height * scale) / 8) * 8,
         resample_mode: "lanczos",
     })
 

invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts

@@ -13,6 +13,7 @@ interface UpscaleState {
   structure: number;
   creativity: number;
   tiledVAE: boolean;
+  scale: number | null;
 }
 
 const initialUpscaleState: UpscaleState = {
@@ -22,7 +23,8 @@ const initialUpscaleState: UpscaleState = {
   sharpness: 0,
   structure: 0,
   creativity: 0,
-  tiledVAE: false
+  tiledVAE: false,
+  scale: null
 };
 
 export const upscaleSlice = createSlice({
@@ -31,6 +33,14 @@ export const upscaleSlice = createSlice({
   reducers: {
     upscaleModelChanged: (state, action: PayloadAction<ParameterSpandrelImageToImageModel | null>) => {
       state.upscaleModel = action.payload;
+
+      if (state.upscaleModel) {
+        const upscaleFactor = state.upscaleModel.name.match(/x(\d+)/);
+        if (upscaleFactor && upscaleFactor[1]) {
+          const scale = parseInt(upscaleFactor[1], 10);
+          state.scale = scale;
+        }
+      }
     },
     upscaleInitialImageChanged: (state, action: PayloadAction<ImageDTO | null>) => {
       state.upscaleInitialImage = action.payload;
@@ -47,10 +57,13 @@ export const upscaleSlice = createSlice({
     sharpnessChanged: (state, action: PayloadAction<number>) => {
       state.sharpness = action.payload;
     },
+    scaleChanged: (state, action: PayloadAction<number | null>) => {
+      state.scale = action.payload;
+    },
   },
 });
 
-export const { upscaleModelChanged, upscaleInitialImageChanged, tiledVAEChanged, structureChanged, creativityChanged, sharpnessChanged } = upscaleSlice.actions;
+export const { upscaleModelChanged, upscaleInitialImageChanged, tiledVAEChanged, structureChanged, creativityChanged, sharpnessChanged, scaleChanged } = upscaleSlice.actions;
 
 export const selectUpscalelice = (state: RootState) => state.upscale;
 

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

@@ -3,18 +3,15 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useMemo } from 'react';
 
 export const UpscaleSizeDetails = () => {
-  const { upscaleInitialImage, upscaleModel } = useAppSelector((s) => s.upscale);
+  const { upscaleInitialImage, scale } = useAppSelector((s) => s.upscale);
 
-  const scaleFactor = useMemo(() => {
+  const outputSizeText = useMemo(() => {
-    if (upscaleModel) {
+    if (upscaleInitialImage && scale) {
-      const upscaleFactor = upscaleModel.name.match(/x(\d+)/);
+      return `Output image size: ${upscaleInitialImage.width * scale} x ${upscaleInitialImage.height * scale}`;
-      if (upscaleFactor && upscaleFactor[1]) {
-        return parseInt(upscaleFactor[1], 10);
-      }
     }
-  }, [upscaleModel]);
+  }, [upscaleInitialImage, scale]);
 
-  if (!upscaleInitialImage || !upscaleModel || !scaleFactor) {
+  if (!outputSizeText || !upscaleInitialImage) {
     return <></>;
   }
 
@@ -24,7 +21,7 @@ export const UpscaleSizeDetails = () => {
         Current image size: {upscaleInitialImage.width} x {upscaleInitialImage.height}
       </Text>
       <Text variant="subtext" fontWeight="bold">
-        Output image size: {upscaleInitialImage.width * scaleFactor} x {upscaleInitialImage.height * scaleFactor}
+        {outputSizeText}
       </Text>
     </Flex>
   );