diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts index 76b5df323a..2199bdcc58 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts +++ b/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, - height: ((upscaleInitialImage.height * SCALE) / 8) * 8, + width: ((upscaleInitialImage.width * scale) / 8) * 8, + height: ((upscaleInitialImage.height * scale) / 8) * 8, resample_mode: "lanczos", }) diff --git a/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts b/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts index 5bf684699d..51ef40e013 100644 --- a/invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts +++ b/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) => { 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) => { state.upscaleInitialImage = action.payload; @@ -47,10 +57,13 @@ export const upscaleSlice = createSlice({ sharpnessChanged: (state, action: PayloadAction) => { state.sharpness = action.payload; }, + scaleChanged: (state, action: PayloadAction) => { + 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; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx index e1dc7e31b1..f963dad4af 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSizeDetails.tsx +++ b/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(() => { - if (upscaleModel) { - const upscaleFactor = upscaleModel.name.match(/x(\d+)/); - if (upscaleFactor && upscaleFactor[1]) { - return parseInt(upscaleFactor[1], 10); - } + const outputSizeText = useMemo(() => { + if (upscaleInitialImage && scale) { + return `Output image size: ${upscaleInitialImage.width * scale} x ${upscaleInitialImage.height * scale}`; } - }, [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} - Output image size: {upscaleInitialImage.width * scaleFactor} x {upscaleInitialImage.height * scaleFactor} + {outputSizeText} );