From 88c8cb61f0d91a018fe1d66d057389ddf4437dc1 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 22 Sep 2023 12:38:09 +1000 Subject: [PATCH] feat(ui): update linear UI to use new board field on `save_image` - No longer need to make network request to add image to board after it's finished - removed - Update linear graphs & upscale graph to save image to the board - Update autoSwitch logic so when image is generated we still switch to the right board --- .../socketio/socketInvocationComplete.ts | 55 +++++++------------ .../listeners/upscaleRequested.ts | 5 +- .../util/graphBuilders/addSaveImageNode.ts | 2 + .../graphBuilders/buildAdHocUpscaleGraph.ts | 5 ++ 4 files changed, 30 insertions(+), 37 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts index b6d8acc82e..df07f84416 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts @@ -37,6 +37,7 @@ export const addInvocationCompleteEventListener = () => { const { image_name } = result.image; const { canvas, gallery } = getState(); + // This populates the `getImageDTO` cache const imageDTO = await dispatch( imagesApi.endpoints.getImageDTO.initiate(image_name) ).unwrap(); @@ -52,54 +53,36 @@ export const addInvocationCompleteEventListener = () => { if (!imageDTO.is_intermediate) { /** * Cache updates for when an image result is received - * - *add* to getImageDTO - * - IF `autoAddBoardId` is set: - * - THEN add it to the board_id/images - * - ELSE (`autoAddBoardId` is not set): - * - THEN add it to the no_board/images + * - add it to the no_board/images */ - const { autoAddBoardId } = gallery; - if (autoAddBoardId && autoAddBoardId !== 'none') { - dispatch( - imagesApi.endpoints.addImageToBoard.initiate({ - board_id: autoAddBoardId, - imageDTO, - }) - ); - } else { - dispatch( - imagesApi.util.updateQueryData( - 'listImages', - { - board_id: 'none', - categories: IMAGE_CATEGORIES, - }, - (draft) => { - imagesAdapter.addOne(draft, imageDTO); - } - ) - ); - } + dispatch( + imagesApi.util.updateQueryData( + 'listImages', + { + board_id: imageDTO.board_id ?? 'none', + categories: IMAGE_CATEGORIES, + }, + (draft) => { + imagesAdapter.addOne(draft, imageDTO); + } + ) + ); dispatch( imagesApi.util.invalidateTags([ - { type: 'BoardImagesTotal', id: autoAddBoardId }, - { type: 'BoardAssetsTotal', id: autoAddBoardId }, + { type: 'BoardImagesTotal', id: imageDTO.board_id }, + { type: 'BoardAssetsTotal', id: imageDTO.board_id }, ]) ); - const { selectedBoardId, shouldAutoSwitch } = gallery; + const { shouldAutoSwitch } = gallery; // If auto-switch is enabled, select the new image if (shouldAutoSwitch) { // if auto-add is enabled, switch the board as the image comes in - if (autoAddBoardId && autoAddBoardId !== selectedBoardId) { - dispatch(boardIdSelected(autoAddBoardId)); - dispatch(galleryViewChanged('images')); - } else if (!autoAddBoardId) { - dispatch(galleryViewChanged('images')); - } + dispatch(galleryViewChanged('images')); + dispatch(boardIdSelected(imageDTO.board_id ?? 'none')); dispatch(imageSelected(imageDTO)); } } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts index 61ecc61a03..b54d8b553c 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts @@ -18,11 +18,14 @@ export const addUpscaleRequestedListener = () => { const log = logger('session'); const { image_name } = action.payload; - const { esrganModelName } = getState().postprocessing; + const state = getState(); + const { esrganModelName } = state.postprocessing; + const { autoAddBoardId } = state.gallery; const graph = buildAdHocUpscaleGraph({ image_name, esrganModelName, + autoAddBoardId, }); try { diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSaveImageNode.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSaveImageNode.ts index 43d1a19f81..738c69faff 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSaveImageNode.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSaveImageNode.ts @@ -24,12 +24,14 @@ export const addSaveImageNode = ( const activeTabName = activeTabNameSelector(state); const is_intermediate = activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false; + const { autoAddBoardId } = state.gallery; const saveImageNode: SaveImageInvocation = { id: SAVE_IMAGE, type: 'save_image', is_intermediate, use_cache: false, + board: autoAddBoardId === 'none' ? undefined : { board_id: autoAddBoardId }, }; graph.nodes[SAVE_IMAGE] = saveImageNode; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildAdHocUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildAdHocUpscaleGraph.ts index 9c53227ead..c612e88598 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildAdHocUpscaleGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildAdHocUpscaleGraph.ts @@ -6,15 +6,18 @@ import { SaveImageInvocation, } from 'services/api/types'; import { REALESRGAN as ESRGAN, SAVE_IMAGE } from './constants'; +import { BoardId } from 'features/gallery/store/types'; type Arg = { image_name: string; esrganModelName: ESRGANModelName; + autoAddBoardId: BoardId; }; export const buildAdHocUpscaleGraph = ({ image_name, esrganModelName, + autoAddBoardId, }: Arg): Graph => { const realesrganNode: ESRGANInvocation = { id: ESRGAN, @@ -28,6 +31,8 @@ export const buildAdHocUpscaleGraph = ({ id: SAVE_IMAGE, type: 'save_image', use_cache: false, + is_intermediate: false, + board: autoAddBoardId === 'none' ? undefined : { board_id: autoAddBoardId }, }; const graph: NonNullableGraph = {