From aa3b2106d46cdb834d6e7a796c8cbb5459312435 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 23 May 2025 13:43:31 +1000 Subject: [PATCH] refactor(ui): canvas flow (wip) --- .../web/src/app/components/GlobalHookIsolator.tsx | 7 +++++++ .../components/CanvasMainPanelContent.tsx | 14 +++++++++----- .../util/graph/generation/buildChatGPT4oGraph.ts | 8 ++++---- .../util/graph/generation/buildCogView4Graph.ts | 4 ++-- .../nodes/util/graph/generation/buildFLUXGraph.ts | 4 ++-- .../util/graph/generation/buildImagen3Graph.ts | 4 ++-- .../util/graph/generation/buildImagen4Graph.ts | 4 ++-- .../nodes/util/graph/generation/buildSD1Graph.ts | 4 ++-- .../nodes/util/graph/generation/buildSD3Graph.ts | 4 ++-- .../nodes/util/graph/generation/buildSDXLGraph.ts | 4 ++-- 10 files changed, 34 insertions(+), 23 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx b/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx index 4be48fcd2c..ef45771119 100644 --- a/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx +++ b/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx @@ -21,8 +21,11 @@ import i18n from 'i18n'; import { size } from 'lodash-es'; import { memo, useEffect } from 'react'; import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo'; +import { useGetQueueCountsByDestinationQuery } from 'services/api/endpoints/queue'; import { useSocketIO } from 'services/events/useSocketIO'; +const queueCountArg = { destination: 'canvas' }; + /** * GlobalHookIsolator is a logical component that runs global hooks in an isolated component, so that they do not * cause needless re-renders of any other components. @@ -41,6 +44,10 @@ export const GlobalHookIsolator = memo( useGetOpenAPISchemaQuery(); useSyncLoggingConfig(); + // Persistent subscription to the queue counts query - canvas relies on this to know if there are pending + // and/or in progress canvas sessions. + useGetQueueCountsByDestinationQuery(queueCountArg); + useEffect(() => { i18n.changeLanguage(language); }, [language]); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx index 2861a1db54..551aabb8c6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx @@ -28,6 +28,7 @@ import { import { selectIsCanvasEmpty, selectIsSessionStarted } from 'features/controlLayers/store/selectors'; import { memo, useCallback } from 'react'; import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi'; +import { assert } from 'tsafe'; import { CanvasAlertsInvocationProgress } from './CanvasAlerts/CanvasAlertsInvocationProgress'; @@ -49,10 +50,10 @@ const MenuContent = memo(() => { MenuContent.displayName = 'MenuContent'; export const CanvasMainPanelContent = memo(() => { - const isSessionStarted = useAppSelector(selectIsSessionStarted); const isCanvasEmpty = useAppSelector(selectIsCanvasEmpty); + const isSessionStarted = useAppSelector(selectIsSessionStarted); - if (!isSessionStarted && isCanvasEmpty) { + if (!isSessionStarted) { return ; } @@ -60,7 +61,11 @@ export const CanvasMainPanelContent = memo(() => { return ; } - return ; + if (isSessionStarted && !isCanvasEmpty) { + return ; + } + + assert(false); }); CanvasMainPanelContent.displayName = 'CanvasMainPanelContent'; @@ -103,7 +108,6 @@ const NoActiveSession = memo(() => { ); }); NoActiveSession.displayName = 'NoActiveSession'; - const SimpleActiveSession = memo(() => { const isStaging = useAppSelector(selectIsStaging); const selectedImage = useAppSelector(selectSelectedImage); @@ -114,7 +118,7 @@ const SimpleActiveSession = memo(() => { Simple Session (staging view) {isStaging && 'STAGING'} {selectedImage && } - + {stagedImages.map(({ imageDTO }) => ( ))} 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 c53da0e1ec..dbad701bc9 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 @@ -79,8 +79,8 @@ export const buildChatGPT4oGraph = async ( aspect_ratio: bbox.aspectRatio.id, reference_images, use_cache: false, - is_intermediate, - board, + is_intermediate: true, + board: undefined, }); g.upsertMetadata({ positive_prompt: positivePrompt, @@ -112,8 +112,8 @@ export const buildChatGPT4oGraph = async ( base_image: { image_name }, reference_images, use_cache: false, - is_intermediate, - board, + is_intermediate: true, + board: undefined, }); g.upsertMetadata({ positive_prompt: positivePrompt, diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildCogView4Graph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildCogView4Graph.ts index b0b29774e9..fb63235f9c 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildCogView4Graph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildCogView4Graph.ts @@ -186,9 +186,9 @@ export const buildCogView4Graph = async ( g.updateNode(canvasOutput, { id: getPrefixedId(CANVAS_OUTPUT_PREFIX), - is_intermediate, + is_intermediate: true, use_cache: false, - board, + board: undefined, }); g.setMetadataReceivingNode(canvasOutput); diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts index 36abfb6a4c..136769b492 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts @@ -345,9 +345,9 @@ export const buildFLUXGraph = async (state: RootState, manager?: CanvasManager | g.updateNode(canvasOutput, { id: getPrefixedId(CANVAS_OUTPUT_PREFIX), - is_intermediate, + is_intermediate: true, use_cache: false, - board, + board: undefined, }); g.setMetadataReceivingNode(canvasOutput); diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen3Graph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen3Graph.ts index 6624aa73af..6f5497a64a 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen3Graph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen3Graph.ts @@ -61,8 +61,8 @@ export const buildImagen3Graph = async ( enhance_prompt: true, // When enhance_prompt is true, Imagen3 will return a new image every time, ignoring the seed. use_cache: false, - is_intermediate, - board, + is_intermediate: true, + board: undefined, }); g.upsertMetadata({ positive_prompt: positivePrompt, diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen4Graph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen4Graph.ts index 698552be54..b5e866312d 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen4Graph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen4Graph.ts @@ -61,8 +61,8 @@ export const buildImagen4Graph = async ( enhance_prompt: true, // When enhance_prompt is true, Imagen4 will return a new image every time, ignoring the seed. use_cache: false, - is_intermediate, - board, + is_intermediate: true, + board: undefined, }); g.upsertMetadata({ positive_prompt: positivePrompt, diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD1Graph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD1Graph.ts index 0abdadfaba..7f869f69f8 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD1Graph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD1Graph.ts @@ -317,9 +317,9 @@ export const buildSD1Graph = async (state: RootState, manager?: CanvasManager | g.updateNode(canvasOutput, { id: getPrefixedId(CANVAS_OUTPUT_PREFIX), - is_intermediate, + is_intermediate: true, use_cache: false, - board, + board: undefined, }); g.setMetadataReceivingNode(canvasOutput); diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD3Graph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD3Graph.ts index 7843c6796f..ab1acf7806 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD3Graph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD3Graph.ts @@ -207,9 +207,9 @@ export const buildSD3Graph = async (state: RootState, manager?: CanvasManager | g.updateNode(canvasOutput, { id: getPrefixedId(CANVAS_OUTPUT_PREFIX), - is_intermediate, + is_intermediate: true, use_cache: false, - board, + board: undefined, }); g.setMetadataReceivingNode(canvasOutput); diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSDXLGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSDXLGraph.ts index 8da0df7d3d..de19fe9151 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSDXLGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSDXLGraph.ts @@ -323,9 +323,9 @@ export const buildSDXLGraph = async (state: RootState, manager?: CanvasManager | g.updateNode(canvasOutput, { id: getPrefixedId(CANVAS_OUTPUT_PREFIX), - is_intermediate, + is_intermediate: true, use_cache: false, - board, + board: undefined, }); g.setMetadataReceivingNode(canvasOutput);