From 82a8972bde318de3c168af57ee29b8ed08738cbe Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Thu, 25 May 2023 16:11:05 -0400 Subject: [PATCH 1/2] create listener for imageMetdataReceived to swap our progressImage --- .../middleware/listenerMiddleware/index.ts | 2 ++ .../listeners/imageMetadataReceived.ts | 26 +++++++++++++++++++ .../src/features/system/store/systemSlice.ts | 5 +++- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts index c04a3943f3..48608b789a 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -28,6 +28,7 @@ import { addSocketDisconnectedListener } from './listeners/socketio/socketDiscon import { addSocketSubscribedListener } from './listeners/socketio/socketSubscribed'; import { addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed'; import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke'; +import { addImageMetadataReceivedListener } from './listeners/imageMetadataReceived'; export const listenerMiddleware = createListenerMiddleware(); @@ -50,6 +51,7 @@ export type AppListenerEffect = ListenerEffect< addImageUploadedListener(); addInitialImageSelectedListener(); addRequestedImageDeletionListener(); +addImageMetadataReceivedListener(); addUserInvokedCanvasListener(); addUserInvokedNodesListener(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts new file mode 100644 index 0000000000..4a610154ad --- /dev/null +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts @@ -0,0 +1,26 @@ +import { invocationComplete } from 'services/events/actions'; +import { isImageOutput } from 'services/types/guards'; +import { imageMetadataReceived } from 'services/thunks/image'; +import { startAppListening } from '..'; +import { progressImageSet } from '../../../../../features/system/store/systemSlice'; + +export const addImageMetadataReceivedListener = () => { + startAppListening({ + predicate: (action) => { + if ( + invocationComplete.match(action) && + isImageOutput(action.payload.data.result) + ) { + return true; + } + return false; + }, + effect: async (action, { getState, dispatch, take }) => { + if (imageMetadataReceived.fulfilled.match(action)) { + return; + } + + dispatch(progressImageSet(null)); + }, + }); +}; diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index 7331fcdba9..06fa0e47d8 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -215,6 +215,9 @@ export const systemSlice = createSlice({ languageChanged: (state, action: PayloadAction) => { state.language = action.payload; }, + progressImageSet(state, action: PayloadAction) { + state.progressImage = action.payload; + }, }, extraReducers(builder) { /** @@ -305,7 +308,6 @@ export const systemSlice = createSlice({ state.currentStep = 0; state.totalSteps = 0; state.statusTranslationKey = 'common.statusProcessingComplete'; - state.progressImage = null; if (state.canceledSession === data.graph_execution_state_id) { state.isProcessing = false; @@ -438,6 +440,7 @@ export const { isPersistedChanged, shouldAntialiasProgressImageChanged, languageChanged, + progressImageSet, } = systemSlice.actions; export default systemSlice.reducer; From 57a3eb365271facbd884bcae92921b08322ed962 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 26 May 2023 13:24:44 +1000 Subject: [PATCH 2/2] feat(ui): unset progress image inside invocationComplete listener --- .../middleware/listenerMiddleware/index.ts | 2 -- .../listeners/imageMetadataReceived.ts | 26 ------------------- .../listeners/socketio/invocationComplete.ts | 9 +++---- 3 files changed, 3 insertions(+), 34 deletions(-) delete mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts index 48608b789a..c04a3943f3 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -28,7 +28,6 @@ import { addSocketDisconnectedListener } from './listeners/socketio/socketDiscon import { addSocketSubscribedListener } from './listeners/socketio/socketSubscribed'; import { addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed'; import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke'; -import { addImageMetadataReceivedListener } from './listeners/imageMetadataReceived'; export const listenerMiddleware = createListenerMiddleware(); @@ -51,7 +50,6 @@ export type AppListenerEffect = ListenerEffect< addImageUploadedListener(); addInitialImageSelectedListener(); addRequestedImageDeletionListener(); -addImageMetadataReceivedListener(); addUserInvokedCanvasListener(); addUserInvokedNodesListener(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts deleted file mode 100644 index 4a610154ad..0000000000 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { invocationComplete } from 'services/events/actions'; -import { isImageOutput } from 'services/types/guards'; -import { imageMetadataReceived } from 'services/thunks/image'; -import { startAppListening } from '..'; -import { progressImageSet } from '../../../../../features/system/store/systemSlice'; - -export const addImageMetadataReceivedListener = () => { - startAppListening({ - predicate: (action) => { - if ( - invocationComplete.match(action) && - isImageOutput(action.payload.data.result) - ) { - return true; - } - return false; - }, - effect: async (action, { getState, dispatch, take }) => { - if (imageMetadataReceived.fulfilled.match(action)) { - return; - } - - dispatch(progressImageSet(null)); - }, - }); -}; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/invocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/invocationComplete.ts index 76ae46c4a2..70ae1d2c71 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/invocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/invocationComplete.ts @@ -8,6 +8,7 @@ import { } from 'services/thunks/image'; import { sessionCanceled } from 'services/thunks/session'; import { isImageOutput } from 'services/types/guards'; +import { progressImageSet } from 'features/system/store/systemSlice'; const moduleLog = log.child({ namespace: 'socketio' }); const nodeDenylist = ['dataURL_image']; @@ -37,12 +38,6 @@ export const addInvocationCompleteListener = () => { if (isImageOutput(result) && !nodeDenylist.includes(node.type)) { const { image_name, image_type } = result.image; - // Get its URLS - // TODO: is this extraneous? I think so... - dispatch( - imageUrlsReceived({ imageName: image_name, imageType: image_type }) - ); - // Get its metadata dispatch( imageMetadataReceived({ @@ -65,6 +60,8 @@ export const addInvocationCompleteListener = () => { ); dispatch(addImageToStagingArea(image)); } + + dispatch(progressImageSet(null)); } }, });