From b771c3b164ca902d1d2deb29efbe5ebc1583d009 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 5 Jul 2025 23:59:07 +1000 Subject: [PATCH] refactor(ui): update graphs to use the right w/h/aspect --- .../controlLayers/store/paramsSlice.ts | 14 +++++---- .../graph/generation/buildChatGPT4oGraph.ts | 20 +++++++------ .../graph/generation/buildCogView4Graph.ts | 4 +-- .../util/graph/generation/buildFLUXGraph.ts | 4 +-- .../util/graph/generation/buildSD1Graph.ts | 4 +-- .../util/graph/generation/buildSD3Graph.ts | 4 +-- .../util/graph/generation/buildSDXLGraph.ts | 4 +-- .../nodes/util/graph/graphBuilderUtils.ts | 30 ++++++++++++++----- .../frontend/web/src/services/api/types.ts | 2 +- 9 files changed, 54 insertions(+), 32 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/store/paramsSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/paramsSlice.ts index 38c2b24d8a..dc29f16fa1 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/paramsSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/paramsSlice.ts @@ -423,11 +423,15 @@ export const selectIsCogView4 = createParamsSelector((params) => params.model?.b export const selectIsImagen3 = createParamsSelector((params) => params.model?.base === 'imagen3'); export const selectIsImagen4 = createParamsSelector((params) => params.model?.base === 'imagen4'); export const selectIsFluxKontextApi = createParamsSelector((params) => params.model?.base === 'flux-kontext'); -export const selectIsFluxKontext = createParamsSelector( - (params) => - params.model?.base === 'flux-kontext' || - (params.model?.base === 'flux' && params.model?.name?.toLowerCase().includes('kontext')) -); +export const selectIsFluxKontext = createParamsSelector((params) => { + if (params.model?.base === 'flux-kontext') { + return true; + } + if (params.model?.base === 'flux' && params.model?.name.toLowerCase().includes('kontext')) { + return true; + } + return false; +}); export const selectIsChatGPT4o = createParamsSelector((params) => params.model?.base === 'chatgpt-4o'); export const selectModel = createParamsSelector((params) => params.model); diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildChatGPT4oGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildChatGPT4oGraph.ts index 622c802bc2..1d12e4a364 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildChatGPT4oGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildChatGPT4oGraph.ts @@ -2,12 +2,15 @@ import { logger } from 'app/logging/logger'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import { selectMainModelConfig } from 'features/controlLayers/store/paramsSlice'; import { selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice'; -import { selectCanvasSlice } from 'features/controlLayers/store/selectors'; import { isChatGPT4oAspectRatioID, isChatGPT4oReferenceImageConfig } from 'features/controlLayers/store/types'; import { getGlobalReferenceImageWarnings } from 'features/controlLayers/store/validators'; import { type ImageField, zModelIdentifierField } from 'features/nodes/types/common'; import { Graph } from 'features/nodes/util/graph/generation/Graph'; -import { selectCanvasOutputFields, selectPresetModifiedPrompts } from 'features/nodes/util/graph/graphBuilderUtils'; +import { + selectCanvasOutputFields, + selectOriginalAndScaledSizes, + selectPresetModifiedPrompts, +} from 'features/nodes/util/graph/graphBuilderUtils'; import type { GraphBuilderArg, GraphBuilderReturn } from 'features/nodes/util/graph/types'; import { UnsupportedGenerationModeError } from 'features/nodes/util/graph/types'; import { t } from 'i18next'; @@ -27,17 +30,14 @@ export const buildChatGPT4oGraph = async (arg: GraphBuilderArg): Promise entity.isEnabled) .filter((entity) => isChatGPT4oReferenceImageConfig(entity.config)) @@ -57,21 +57,23 @@ export const buildChatGPT4oGraph = async (arg: GraphBuilderArg): Promise { - const originalSize = pick(bboxState.rect, 'width', 'height'); - const scaledSize = ['auto', 'manual'].includes(bboxState.scaleMethod) ? bboxState.scaledSize : originalSize; - return { originalSize, scaledSize }; -}; +export const selectOriginalAndScaledSizes = createSelector( + [selectActiveTab, selectParamsSlice, selectCanvasSlice], + (tab, params, canvas) => { + if (tab === 'generate') { + const { width, height } = params.dimensions.rect; + const { aspectRatio } = params.dimensions; + return { + originalSize: { width, height }, + scaledSize: { width, height }, + aspectRatio, + }; + } else { + // tab === 'canvas' + const { width, height } = canvas.bbox.rect; + const { aspectRatio } = canvas.bbox; + const originalSize = { width, height }; + const scaledSize = ['auto', 'manual'].includes(canvas.bbox.scaleMethod) ? canvas.bbox.scaledSize : originalSize; + return { originalSize, scaledSize, aspectRatio }; + } + } +); export const getInfill = ( g: Graph, diff --git a/invokeai/frontend/web/src/services/api/types.ts b/invokeai/frontend/web/src/services/api/types.ts index 8ac1729e9b..7bb5bf045b 100644 --- a/invokeai/frontend/web/src/services/api/types.ts +++ b/invokeai/frontend/web/src/services/api/types.ts @@ -249,7 +249,7 @@ export const isFluxKontextApiModelConfig = (config: AnyModelConfig): config is A }; export const isFluxKontextModelConfig = (config: AnyModelConfig): config is FLUXKontextModelConfig => { - return config.type === 'main' && config.base === 'flux' && config.name?.toLowerCase().includes('kontext'); + return config.type === 'main' && config.base === 'flux' && config.name.toLowerCase().includes('kontext'); }; export const isNonRefinerMainModelConfig = (config: AnyModelConfig): config is MainModelConfig => {