From a1c4ef55d7c934aefb6d6fd20f4dd25f6b79caa0 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 14 Mar 2024 19:05:40 +1100 Subject: [PATCH] feat(ui): update UI to use new events - Use OpenAPI schema for event payload types - Update all event listeners - Add missing events / remove old nonexistent events --- .../middleware/listenerMiddleware/index.ts | 7 +- .../listeners/bulkDownload.tsx | 8 +- .../listeners/controlNetImageProcessed.ts | 4 +- .../socketio/socketInvocationComplete.ts | 12 +- .../socketio/socketInvocationError.ts | 6 +- .../socketInvocationRetrievalError.ts | 14 - .../socketio/socketInvocationStarted.ts | 6 +- .../listeners/socketio/socketModelInstall.ts | 8 +- .../listeners/socketio/socketModelLoad.ts | 14 +- .../socketio/socketQueueItemStatusChanged.ts | 26 +- .../socketio/socketSessionRetrievalError.ts | 14 - .../src/features/system/store/systemSlice.ts | 27 +- .../web/src/features/system/store/types.ts | 1 - .../web/src/services/events/actions.ts | 59 ++-- .../frontend/web/src/services/events/types.ts | 280 ++---------------- .../services/events/util/setEventListeners.ts | 134 ++------- 16 files changed, 145 insertions(+), 475 deletions(-) delete mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts delete mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.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 0c0c8ed2bc..62298a106c 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -35,18 +35,17 @@ import { addImageUploadedFulfilledListener } from 'app/store/middleware/listener import { addModelSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelSelected'; import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelsLoaded'; import { addDynamicPromptsListener } from 'app/store/middleware/listenerMiddleware/listeners/promptChanged'; +import { addSetDefaultSettingsListener } from 'app/store/middleware/listenerMiddleware/listeners/setDefaultSettings'; import { addSocketConnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected'; import { addSocketDisconnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketDisconnected'; import { addGeneratorProgressEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketGeneratorProgress'; import { addGraphExecutionStateCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketGraphExecutionStateComplete'; import { addInvocationCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete'; import { addInvocationErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError'; -import { addInvocationRetrievalErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError'; import { addInvocationStartedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted'; import { addModelInstallEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall'; import { addModelLoadEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad'; import { addSocketQueueItemStatusChangedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged'; -import { addSessionRetrievalErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError'; import { addSocketSubscribedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketSubscribed'; import { addSocketUnsubscribedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketUnsubscribed'; import { addStagingAreaImageSavedListener } from 'app/store/middleware/listenerMiddleware/listeners/stagingAreaImageSaved'; @@ -55,8 +54,6 @@ import { addUpscaleRequestedListener } from 'app/store/middleware/listenerMiddle import { addWorkflowLoadRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested'; import type { AppDispatch, RootState } from 'app/store/store'; -import { addSetDefaultSettingsListener } from './listeners/setDefaultSettings'; - export const listenerMiddleware = createListenerMiddleware(); export type AppStartListening = TypedStartListening; @@ -114,8 +111,6 @@ addSocketSubscribedEventListener(startAppListening); addSocketUnsubscribedEventListener(startAppListening); addModelLoadEventListener(startAppListening); addModelInstallEventListener(startAppListening); -addSessionRetrievalErrorEventListener(startAppListening); -addInvocationRetrievalErrorEventListener(startAppListening); addSocketQueueItemStatusChangedEventListener(startAppListening); addBulkDownloadListeners(startAppListening); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/bulkDownload.tsx b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/bulkDownload.tsx index 38a0fd7911..b2570bddec 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/bulkDownload.tsx +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/bulkDownload.tsx @@ -6,8 +6,8 @@ import { toast } from 'common/util/toast'; import { t } from 'i18next'; import { imagesApi } from 'services/api/endpoints/images'; import { - socketBulkDownloadCompleted, - socketBulkDownloadFailed, + socketBulkDownloadComplete, + socketBulkDownloadError, socketBulkDownloadStarted, } from 'services/events/actions'; @@ -56,7 +56,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) = }); startAppListening({ - actionCreator: socketBulkDownloadCompleted, + actionCreator: socketBulkDownloadComplete, effect: async (action) => { log.debug(action.payload.data, 'Bulk download preparation completed'); @@ -89,7 +89,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) = }); startAppListening({ - actionCreator: socketBulkDownloadFailed, + actionCreator: socketBulkDownloadError, effect: async (action) => { log.debug(action.payload.data, 'Bulk download preparation failed'); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts index 0055866aa7..1c06f33d76 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts @@ -69,8 +69,8 @@ export const addControlNetImageProcessedListener = (startAppListening: AppStartL const [invocationCompleteAction] = await take( (action): action is ReturnType => socketInvocationComplete.match(action) && - action.payload.data.queue_batch_id === enqueueResult.batch.batch_id && - action.payload.data.source_node_id === nodeId + action.payload.data.batch_id === enqueueResult.batch.batch_id && + action.payload.data.invocation_source_id === nodeId ); // We still have to check the output type 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 06dc08d846..3d00e2b4a6 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 @@ -29,12 +29,12 @@ export const addInvocationCompleteEventListener = (startAppListening: AppStartLi actionCreator: socketInvocationComplete, effect: async (action, { dispatch, getState }) => { const { data } = action.payload; - log.debug({ data: parseify(data) }, `Invocation complete (${action.payload.data.node.type})`); + log.debug({ data: parseify(data) }, `Invocation complete (${data.invocation_type})`); - const { result, node, queue_batch_id, source_node_id } = data; + const { result, invocation_source_id } = data; // This complete event has an associated image output - if (isImageOutput(result) && !nodeTypeDenylist.includes(node.type)) { - const { image_name } = result.image; + if (isImageOutput(data.result) && !nodeTypeDenylist.includes(data.invocation_type)) { + const { image_name } = data.result.image; const { canvas, gallery } = getState(); // This populates the `getImageDTO` cache @@ -48,7 +48,7 @@ export const addInvocationCompleteEventListener = (startAppListening: AppStartLi imageDTORequest.unsubscribe(); // Add canvas images to the staging area - if (canvas.batchIds.includes(queue_batch_id) && data.source_node_id === CANVAS_OUTPUT) { + if (canvas.batchIds.includes(data.batch_id) && data.invocation_source_id === CANVAS_OUTPUT) { dispatch(addImageToStagingArea(imageDTO)); } @@ -114,7 +114,7 @@ export const addInvocationCompleteEventListener = (startAppListening: AppStartLi } } - const nes = deepClone($nodeExecutionStates.get()[source_node_id]); + const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]); if (nes) { nes.status = zNodeStatus.enum.COMPLETED; if (nes.progress !== null) { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts index ce26c4dd7d..cd8158c6e4 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts @@ -11,9 +11,9 @@ export const addInvocationErrorEventListener = (startAppListening: AppStartListe startAppListening({ actionCreator: socketInvocationError, effect: (action) => { - log.error(action.payload, `Invocation error (${action.payload.data.node.type})`); - const { source_node_id } = action.payload.data; - const nes = deepClone($nodeExecutionStates.get()[source_node_id]); + log.error(action.payload, `Invocation error (${action.payload.data.invocation_type})`); + const { invocation_source_id } = action.payload.data; + const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]); if (nes) { nes.status = zNodeStatus.enum.FAILED; nes.error = action.payload.data.error; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts deleted file mode 100644 index 44da4c0ddb..0000000000 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { logger } from 'app/logging/logger'; -import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; -import { socketInvocationRetrievalError } from 'services/events/actions'; - -const log = logger('socketio'); - -export const addInvocationRetrievalErrorEventListener = (startAppListening: AppStartListening) => { - startAppListening({ - actionCreator: socketInvocationRetrievalError, - effect: (action) => { - log.error(action.payload, `Invocation retrieval error (${action.payload.data.graph_execution_state_id})`); - }, - }); -}; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts index 9d6e0ac14d..7221589fcb 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts @@ -11,9 +11,9 @@ export const addInvocationStartedEventListener = (startAppListening: AppStartLis startAppListening({ actionCreator: socketInvocationStarted, effect: (action) => { - log.debug(action.payload, `Invocation started (${action.payload.data.node.type})`); - const { source_node_id } = action.payload.data; - const nes = deepClone($nodeExecutionStates.get()[source_node_id]); + log.debug(action.payload, `Invocation started (${action.payload.data.invocation_type})`); + const { invocation_source_id } = action.payload.data; + const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]); if (nes) { nes.status = zNodeStatus.enum.IN_PROGRESS; upsertExecutionState(nes.nodeId, nes); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall.ts index f474c2736b..7fafb8302c 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall.ts @@ -3,14 +3,14 @@ import { api, LIST_TAG } from 'services/api'; import { modelsApi } from 'services/api/endpoints/models'; import { socketModelInstallCancelled, - socketModelInstallCompleted, - socketModelInstallDownloading, + socketModelInstallComplete, + socketModelInstallDownloadProgress, socketModelInstallError, } from 'services/events/actions'; export const addModelInstallEventListener = (startAppListening: AppStartListening) => { startAppListening({ - actionCreator: socketModelInstallDownloading, + actionCreator: socketModelInstallDownloadProgress, effect: async (action, { dispatch }) => { const { bytes, total_bytes, id } = action.payload.data; @@ -29,7 +29,7 @@ export const addModelInstallEventListener = (startAppListening: AppStartListenin }); startAppListening({ - actionCreator: socketModelInstallCompleted, + actionCreator: socketModelInstallComplete, effect: (action, { dispatch }) => { const { id } = action.payload.data; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts index 4f4ec7635e..f6d917dff1 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts @@ -1,6 +1,6 @@ import { logger } from 'app/logging/logger'; import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; -import { socketModelLoadCompleted, socketModelLoadStarted } from 'services/events/actions'; +import { socketModelLoadComplete, socketModelLoadStarted } from 'services/events/actions'; const log = logger('socketio'); @@ -8,10 +8,11 @@ export const addModelLoadEventListener = (startAppListening: AppStartListening) startAppListening({ actionCreator: socketModelLoadStarted, effect: (action) => { - const { model_config, submodel_type } = action.payload.data; - const { name, base, type } = model_config; + const { config, submodel_type } = action.payload.data; + const { name, base, type } = config; const extras: string[] = [base, type]; + if (submodel_type) { extras.push(submodel_type); } @@ -23,16 +24,15 @@ export const addModelLoadEventListener = (startAppListening: AppStartListening) }); startAppListening({ - actionCreator: socketModelLoadCompleted, + actionCreator: socketModelLoadComplete, effect: (action) => { - const { model_config, submodel_type } = action.payload.data; - const { name, base, type } = model_config; + const { config, submodel_type } = action.payload.data; + const { name, base, type } = config; const extras: string[] = [base, type]; if (submodel_type) { extras.push(submodel_type); } - const message = `Model load complete: ${name} (${extras.join(', ')})`; log.debug(action.payload, message); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts index 2adc529766..720abe4adb 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts @@ -14,16 +14,23 @@ export const addSocketQueueItemStatusChangedEventListener = (startAppListening: actionCreator: socketQueueItemStatusChanged, effect: async (action, { dispatch }) => { // we've got new status for the queue item, batch and queue - const { queue_item, batch_status, queue_status } = action.payload.data; + const { item_id, status, started_at, updated_at, error, completed_at, created_at, batch_status, queue_status } = + action.payload.data; - log.debug(action.payload, `Queue item ${queue_item.item_id} status updated: ${queue_item.status}`); + log.debug(action.payload, `Queue item ${item_id} status updated: ${status}`); // Update this specific queue item in the list of queue items (this is the queue item DTO, without the session) dispatch( queueApi.util.updateQueryData('listQueueItems', undefined, (draft) => { queueItemsAdapter.updateOne(draft, { - id: String(queue_item.item_id), - changes: queue_item, + id: String(item_id), + changes: { + status, + started_at, + updated_at: updated_at ?? undefined, + error, + completed_at: completed_at ?? undefined, + }, }); }) ); @@ -45,11 +52,18 @@ export const addSocketQueueItemStatusChangedEventListener = (startAppListening: // Update the queue item status (this is the full queue item, including the session) dispatch( - queueApi.util.updateQueryData('getQueueItem', queue_item.item_id, (draft) => { + queueApi.util.updateQueryData('getQueueItem', item_id, (draft) => { if (!draft) { return; } - Object.assign(draft, queue_item); + Object.assign(draft, { + status, + started_at, + updated_at, + error, + completed_at, + created_at, + }); }) ); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts deleted file mode 100644 index a1a497dc08..0000000000 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { logger } from 'app/logging/logger'; -import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; -import { socketSessionRetrievalError } from 'services/events/actions'; - -const log = logger('socketio'); - -export const addSessionRetrievalErrorEventListener = (startAppListening: AppStartListening) => { - startAppListening({ - actionCreator: socketSessionRetrievalError, - effect: (action) => { - log.error(action.payload, `Session retrieval error (${action.payload.data.graph_execution_state_id})`); - }, - }); -}; diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index 17ddec5471..66bbe15376 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -1,8 +1,7 @@ import type { UseToastOptions } from '@invoke-ai/ui-library'; import type { PayloadAction } from '@reduxjs/toolkit'; -import { createSlice, isAnyOf } from '@reduxjs/toolkit'; +import { createSlice } from '@reduxjs/toolkit'; import type { PersistConfig, RootState } from 'app/store/store'; -import { calculateStepPercentage } from 'features/system/util/calculateStepPercentage'; import { makeToast } from 'features/system/util/makeToast'; import { t } from 'i18next'; import { startCase } from 'lodash-es'; @@ -14,12 +13,10 @@ import { socketGraphExecutionStateComplete, socketInvocationComplete, socketInvocationError, - socketInvocationRetrievalError, socketInvocationStarted, - socketModelLoadCompleted, + socketModelLoadComplete, socketModelLoadStarted, socketQueueItemStatusChanged, - socketSessionRetrievalError, } from 'services/events/actions'; import type { Language, SystemState } from './types'; @@ -110,20 +107,12 @@ export const systemSlice = createSlice({ * Generator Progress */ builder.addCase(socketGeneratorProgress, (state, action) => { - const { - step, - total_steps, - order, - progress_image, - graph_execution_state_id: session_id, - queue_batch_id: batch_id, - } = action.payload.data; + const { step, total_steps, progress_image, session_id, batch_id } = action.payload.data; state.denoiseProgress = { step, total_steps, - order, - percentage: calculateStepPercentage(step, total_steps, order), + percentage: step / total_steps, progress_image, session_id, batch_id, @@ -152,12 +141,12 @@ export const systemSlice = createSlice({ state.status = 'LOADING_MODEL'; }); - builder.addCase(socketModelLoadCompleted, (state) => { + builder.addCase(socketModelLoadComplete, (state) => { state.status = 'CONNECTED'; }); builder.addCase(socketQueueItemStatusChanged, (state, action) => { - if (['completed', 'canceled', 'failed'].includes(action.payload.data.queue_item.status)) { + if (['completed', 'canceled', 'failed'].includes(action.payload.data.status)) { state.status = 'CONNECTED'; state.denoiseProgress = null; } @@ -168,7 +157,7 @@ export const systemSlice = createSlice({ /** * Any server error */ - builder.addMatcher(isAnyServerError, (state, action) => { + builder.addCase(socketInvocationError, (state, action) => { state.toastQueue.push( makeToast({ title: t('toast.serverError'), @@ -194,8 +183,6 @@ export const { setShouldEnableInformationalPopovers, } = systemSlice.actions; -const isAnyServerError = isAnyOf(socketInvocationError, socketSessionRetrievalError, socketInvocationRetrievalError); - export const selectSystemSlice = (state: RootState) => state.system; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts index 430df9aa7d..c827f4059c 100644 --- a/invokeai/frontend/web/src/features/system/store/types.ts +++ b/invokeai/frontend/web/src/features/system/store/types.ts @@ -11,7 +11,6 @@ type DenoiseProgress = { progress_image: ProgressImage | null | undefined; step: number; total_steps: number; - order: number; percentage: number; }; diff --git a/invokeai/frontend/web/src/services/events/actions.ts b/invokeai/frontend/web/src/services/events/actions.ts index 8dd1cfd4fa..7c0cad28bb 100644 --- a/invokeai/frontend/web/src/services/events/actions.ts +++ b/invokeai/frontend/web/src/services/events/actions.ts @@ -1,22 +1,21 @@ import { createAction } from '@reduxjs/toolkit'; import type { - BulkDownloadCompletedEvent, + BulkDownloadCompleteEvent, BulkDownloadFailedEvent, BulkDownloadStartedEvent, - GeneratorProgressEvent, - GraphExecutionStateCompleteEvent, InvocationCompleteEvent, + InvocationDenoiseProgressEvent, InvocationErrorEvent, - InvocationRetrievalErrorEvent, InvocationStartedEvent, ModelInstallCancelledEvent, - ModelInstallCompletedEvent, - ModelInstallDownloadingEvent, + ModelInstallCompleteEvent, + ModelInstallDownloadProgressEvent, ModelInstallErrorEvent, - ModelLoadCompletedEvent, + ModelInstallStartedEvent, + ModelLoadCompleteEvent, ModelLoadStartedEvent, QueueItemStatusChangedEvent, - SessionRetrievalErrorEvent, + SessionCompleteEvent, } from 'services/events/types'; // Create actions for each socket @@ -45,28 +44,32 @@ export const socketInvocationError = createAction<{ }>('socket/socketInvocationError'); export const socketGraphExecutionStateComplete = createAction<{ - data: GraphExecutionStateCompleteEvent; + data: SessionCompleteEvent; }>('socket/socketGraphExecutionStateComplete'); export const socketGeneratorProgress = createAction<{ - data: GeneratorProgressEvent; + data: InvocationDenoiseProgressEvent; }>('socket/socketGeneratorProgress'); export const socketModelLoadStarted = createAction<{ data: ModelLoadStartedEvent; }>('socket/socketModelLoadStarted'); -export const socketModelLoadCompleted = createAction<{ - data: ModelLoadCompletedEvent; -}>('socket/socketModelLoadCompleted'); +export const socketModelLoadComplete = createAction<{ + data: ModelLoadCompleteEvent; +}>('socket/socketModelLoadComplete'); -export const socketModelInstallDownloading = createAction<{ - data: ModelInstallDownloadingEvent; -}>('socket/socketModelInstallDownloading'); +export const socketModelInstallStarted = createAction<{ + data: ModelInstallStartedEvent; +}>('socket/socketModelInstallStarted'); -export const socketModelInstallCompleted = createAction<{ - data: ModelInstallCompletedEvent; -}>('socket/socketModelInstallCompleted'); +export const socketModelInstallDownloadProgress = createAction<{ + data: ModelInstallDownloadProgressEvent; +}>('socket/socketModelInstallDownloadProgress'); + +export const socketModelInstallComplete = createAction<{ + data: ModelInstallCompleteEvent; +}>('socket/socketModelInstallComplete'); export const socketModelInstallError = createAction<{ data: ModelInstallErrorEvent; @@ -76,14 +79,6 @@ export const socketModelInstallCancelled = createAction<{ data: ModelInstallCancelledEvent; }>('socket/socketModelInstallCancelled'); -export const socketSessionRetrievalError = createAction<{ - data: SessionRetrievalErrorEvent; -}>('socket/socketSessionRetrievalError'); - -export const socketInvocationRetrievalError = createAction<{ - data: InvocationRetrievalErrorEvent; -}>('socket/socketInvocationRetrievalError'); - export const socketQueueItemStatusChanged = createAction<{ data: QueueItemStatusChangedEvent; }>('socket/socketQueueItemStatusChanged'); @@ -92,10 +87,10 @@ export const socketBulkDownloadStarted = createAction<{ data: BulkDownloadStartedEvent; }>('socket/socketBulkDownloadStarted'); -export const socketBulkDownloadCompleted = createAction<{ - data: BulkDownloadCompletedEvent; -}>('socket/socketBulkDownloadCompleted'); +export const socketBulkDownloadComplete = createAction<{ + data: BulkDownloadCompleteEvent; +}>('socket/socketBulkDownloadComplete'); -export const socketBulkDownloadFailed = createAction<{ +export const socketBulkDownloadError = createAction<{ data: BulkDownloadFailedEvent; -}>('socket/socketBulkDownloadFailed'); +}>('socket/socketBulkDownloadError'); diff --git a/invokeai/frontend/web/src/services/events/types.ts b/invokeai/frontend/web/src/services/events/types.ts index 161a85b8f6..e5711b7ce4 100644 --- a/invokeai/frontend/web/src/services/events/types.ts +++ b/invokeai/frontend/web/src/services/events/types.ts @@ -1,275 +1,59 @@ -import type { components } from 'services/api/schema'; -import type { AnyModelConfig, Graph, GraphExecutionState, SubModelType } from 'services/api/types'; - -/** - * A progress image, we get one for each step in the generation - */ -export type ProgressImage = { - dataURL: string; - width: number; - height: number; -}; +import type { Graph, GraphExecutionState, S } from 'services/api/types'; export type AnyInvocation = NonNullable[string]>; export type AnyResult = NonNullable; -type BaseNode = { - id: string; - type: string; - [key: string]: AnyInvocation[keyof AnyInvocation]; -}; +export type ModelLoadStartedEvent = S['ModelLoadStartedEvent']; +export type ModelLoadCompleteEvent = S['ModelLoadCompleteEvent']; -export type ModelLoadStartedEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - model_config: AnyModelConfig; - submodel_type?: SubModelType | null; -}; +export type InvocationStartedEvent = S['InvocationStartedEvent']; +export type InvocationDenoiseProgressEvent = S['InvocationDenoiseProgressEvent']; +export type InvocationCompleteEvent = Omit & { result: AnyResult }; +export type InvocationErrorEvent = S['InvocationErrorEvent']; +export type ProgressImage = InvocationDenoiseProgressEvent['progress_image']; -export type ModelLoadCompletedEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - model_config: AnyModelConfig; - submodel_type?: SubModelType | null; -}; +export type ModelInstallDownloadProgressEvent = S['ModelInstallDownloadProgressEvent']; +export type ModelInstallCompleteEvent = S['ModelInstallCompleteEvent']; +export type ModelInstallErrorEvent = S['ModelInstallErrorEvent']; +export type ModelInstallStartedEvent = S['ModelInstallStartedEvent']; +export type ModelInstallCancelledEvent = S['ModelInstallCancelledEvent']; -export type ModelInstallDownloadingEvent = { - bytes: number; - local_path: string; - source: string; - timestamp: number; - total_bytes: number; - id: number; -}; +export type SessionCompleteEvent = S['SessionCompleteEvent']; +export type SessionCanceledEvent = S['SessionCanceledEvent']; -export type ModelInstallCompletedEvent = { - key: number; - source: string; - timestamp: number; - id: number; -}; +export type QueueItemStatusChangedEvent = S['QueueItemStatusChangedEvent']; -export type ModelInstallErrorEvent = { - error: string; - error_type: string; - source: string; - timestamp: number; - id: number; -}; +export type BulkDownloadStartedEvent = S['BulkDownloadStartedEvent']; +export type BulkDownloadCompleteEvent = S['BulkDownloadCompleteEvent']; +export type BulkDownloadFailedEvent = S['BulkDownloadErrorEvent']; -export type ModelInstallCancelledEvent = { - source: string; - timestamp: number; - id: number; -}; - -/** - * A `generator_progress` socket.io event. - * - * @example socket.on('generator_progress', (data: GeneratorProgressEvent) => { ... } - */ -export type GeneratorProgressEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - node_id: string; - source_node_id: string; - progress_image?: ProgressImage; - step: number; - order: number; - total_steps: number; -}; - -/** - * A `invocation_complete` socket.io event. - * - * `result` is a discriminated union with a `type` property as the discriminant. - * - * @example socket.on('invocation_complete', (data: InvocationCompleteEvent) => { ... } - */ -export type InvocationCompleteEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - node: BaseNode; - source_node_id: string; - result: AnyResult; -}; - -/** - * A `invocation_error` socket.io event. - * - * @example socket.on('invocation_error', (data: InvocationErrorEvent) => { ... } - */ -export type InvocationErrorEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - node: BaseNode; - source_node_id: string; - error_type: string; - error: string; -}; - -/** - * A `invocation_started` socket.io event. - * - * @example socket.on('invocation_started', (data: InvocationStartedEvent) => { ... } - */ -export type InvocationStartedEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - node: BaseNode; - source_node_id: string; -}; - -/** - * A `graph_execution_state_complete` socket.io event. - * - * @example socket.on('graph_execution_state_complete', (data: GraphExecutionStateCompleteEvent) => { ... } - */ -export type GraphExecutionStateCompleteEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; -}; - -/** - * A `session_retrieval_error` socket.io event. - * - * @example socket.on('session_retrieval_error', (data: SessionRetrievalErrorEvent) => { ... } - */ -export type SessionRetrievalErrorEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - error_type: string; - error: string; -}; - -/** - * A `invocation_retrieval_error` socket.io event. - * - * @example socket.on('invocation_retrieval_error', (data: InvocationRetrievalErrorEvent) => { ... } - */ -export type InvocationRetrievalErrorEvent = { - queue_id: string; - queue_item_id: number; - queue_batch_id: string; - graph_execution_state_id: string; - node_id: string; - error_type: string; - error: string; -}; - -/** - * A `queue_item_status_changed` socket.io event. - * - * @example socket.on('queue_item_status_changed', (data: QueueItemStatusChangedEvent) => { ... } - */ -export type QueueItemStatusChangedEvent = { - queue_id: string; - queue_item: { - queue_id: string; - item_id: number; - batch_id: string; - session_id: string; - status: components['schemas']['SessionQueueItemDTO']['status']; - error: string | undefined; - created_at: string; - updated_at: string; - started_at: string | undefined; - completed_at: string | undefined; - }; - batch_status: { - queue_id: string; - batch_id: string; - pending: number; - in_progress: number; - completed: number; - failed: number; - canceled: number; - total: number; - }; - queue_status: { - queue_id: string; - item_id?: number; - batch_id?: string; - session_id?: string; - pending: number; - in_progress: number; - completed: number; - failed: number; - canceled: number; - total: number; - }; -}; - -type ClientEmitSubscribeQueue = { +export type ClientEmitSubscribeQueue = { queue_id: string; }; - -type ClientEmitUnsubscribeQueue = { - queue_id: string; -}; - -export type BulkDownloadStartedEvent = { - bulk_download_id: string; - bulk_download_item_id: string; - bulk_download_item_name: string; -}; - -export type BulkDownloadCompletedEvent = { - bulk_download_id: string; - bulk_download_item_id: string; - bulk_download_item_name: string; -}; - -export type BulkDownloadFailedEvent = { - bulk_download_id: string; - bulk_download_item_id: string; - bulk_download_item_name: string; - error: string; -}; - -type ClientEmitSubscribeBulkDownload = { - bulk_download_id: string; -}; - -type ClientEmitUnsubscribeBulkDownload = { +export type ClientEmitUnsubscribeQueue = ClientEmitSubscribeQueue; +export type ClientEmitSubscribeBulkDownload = { bulk_download_id: string; }; +export type ClientEmitUnsubscribeBulkDownload = ClientEmitSubscribeBulkDownload; export type ServerToClientEvents = { - generator_progress: (payload: GeneratorProgressEvent) => void; + invocation_denoise_progress: (payload: InvocationDenoiseProgressEvent) => void; invocation_complete: (payload: InvocationCompleteEvent) => void; invocation_error: (payload: InvocationErrorEvent) => void; invocation_started: (payload: InvocationStartedEvent) => void; - graph_execution_state_complete: (payload: GraphExecutionStateCompleteEvent) => void; + session_complete: (payload: SessionCompleteEvent) => void; model_load_started: (payload: ModelLoadStartedEvent) => void; - model_load_completed: (payload: ModelLoadCompletedEvent) => void; - model_install_downloading: (payload: ModelInstallDownloadingEvent) => void; - model_install_completed: (payload: ModelInstallCompletedEvent) => void; + model_install_started: (payload: ModelInstallStartedEvent) => void; + model_install_download_progress: (payload: ModelInstallDownloadProgressEvent) => void; + model_install_complete: (payload: ModelInstallCompleteEvent) => void; model_install_error: (payload: ModelInstallErrorEvent) => void; - model_install_canceled: (payload: ModelInstallCancelledEvent) => void; - session_retrieval_error: (payload: SessionRetrievalErrorEvent) => void; - invocation_retrieval_error: (payload: InvocationRetrievalErrorEvent) => void; + model_install_cancelled: (payload: ModelInstallCancelledEvent) => void; + model_load_complete: (payload: ModelLoadCompleteEvent) => void; queue_item_status_changed: (payload: QueueItemStatusChangedEvent) => void; bulk_download_started: (payload: BulkDownloadStartedEvent) => void; - bulk_download_completed: (payload: BulkDownloadCompletedEvent) => void; - bulk_download_failed: (payload: BulkDownloadFailedEvent) => void; + bulk_download_complete: (payload: BulkDownloadCompleteEvent) => void; + bulk_download_error: (payload: BulkDownloadFailedEvent) => void; }; export type ClientToServerEvents = { diff --git a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts index 4476624e4e..1ee133d341 100644 --- a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts +++ b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts @@ -5,8 +5,8 @@ import type { AppDispatch } from 'app/store/store'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import { - socketBulkDownloadCompleted, - socketBulkDownloadFailed, + socketBulkDownloadComplete, + socketBulkDownloadError, socketBulkDownloadStarted, socketConnected, socketDisconnected, @@ -14,15 +14,15 @@ import { socketGraphExecutionStateComplete, socketInvocationComplete, socketInvocationError, - socketInvocationRetrievalError, socketInvocationStarted, - socketModelInstallCompleted, - socketModelInstallDownloading, + socketModelInstallCancelled, + socketModelInstallComplete, + socketModelInstallDownloadProgress, socketModelInstallError, - socketModelLoadCompleted, + socketModelInstallStarted, + socketModelLoadComplete, socketModelLoadStarted, socketQueueItemStatusChanged, - socketSessionRetrievalError, } from 'services/events/actions'; import type { ClientToServerEvents, ServerToClientEvents } from 'services/events/types'; import type { Socket } from 'socket.io-client'; @@ -65,131 +65,55 @@ export const setEventListeners = (arg: SetEventListenersArg) => { } }); - /** - * Disconnect - */ socket.on('disconnect', () => { dispatch(socketDisconnected()); }); - - /** - * Invocation started - */ socket.on('invocation_started', (data) => { dispatch(socketInvocationStarted({ data })); }); - /** - * Generator progress - */ - socket.on('generator_progress', (data) => { + socket.on('invocation_denoise_progress', (data) => { dispatch(socketGeneratorProgress({ data })); }); - /** - * Invocation error - */ socket.on('invocation_error', (data) => { dispatch(socketInvocationError({ data })); }); - /** - * Invocation complete - */ socket.on('invocation_complete', (data) => { - dispatch( - socketInvocationComplete({ - data, - }) - ); + dispatch(socketInvocationComplete({ data })); }); - /** - * Graph complete - */ - socket.on('graph_execution_state_complete', (data) => { - dispatch( - socketGraphExecutionStateComplete({ - data, - }) - ); + socket.on('session_complete', (data) => { + dispatch(socketGraphExecutionStateComplete({ data })); }); - /** - * Model load started - */ socket.on('model_load_started', (data) => { - dispatch( - socketModelLoadStarted({ - data, - }) - ); + dispatch(socketModelLoadStarted({ data })); }); - /** - * Model load completed - */ - socket.on('model_load_completed', (data) => { - dispatch( - socketModelLoadCompleted({ - data, - }) - ); + socket.on('model_load_complete', (data) => { + dispatch(socketModelLoadComplete({ data })); }); - /** - * Model Install Downloading - */ - socket.on('model_install_downloading', (data) => { - dispatch( - socketModelInstallDownloading({ - data, - }) - ); + socket.on('model_install_started', (data) => { + dispatch(socketModelInstallStarted({ data })); }); - /** - * Model Install Completed - */ - socket.on('model_install_completed', (data) => { - dispatch( - socketModelInstallCompleted({ - data, - }) - ); + socket.on('model_install_download_progress', (data) => { + dispatch(socketModelInstallDownloadProgress({ data })); + }); + + socket.on('model_install_complete', (data) => { + dispatch(socketModelInstallComplete({ data })); }); - /** - * Model Install Error - */ socket.on('model_install_error', (data) => { - dispatch( - socketModelInstallError({ - data, - }) - ); + dispatch(socketModelInstallError({ data })); }); - /** - * Session retrieval error - */ - socket.on('session_retrieval_error', (data) => { - dispatch( - socketSessionRetrievalError({ - data, - }) - ); - }); - - /** - * Invocation retrieval error - */ - socket.on('invocation_retrieval_error', (data) => { - dispatch( - socketInvocationRetrievalError({ - data, - }) - ); + socket.on('model_install_cancelled', (data) => { + dispatch(socketModelInstallCancelled({ data })); }); socket.on('queue_item_status_changed', (data) => { @@ -200,11 +124,11 @@ export const setEventListeners = (arg: SetEventListenersArg) => { dispatch(socketBulkDownloadStarted({ data })); }); - socket.on('bulk_download_completed', (data) => { - dispatch(socketBulkDownloadCompleted({ data })); + socket.on('bulk_download_complete', (data) => { + dispatch(socketBulkDownloadComplete({ data })); }); - socket.on('bulk_download_failed', (data) => { - dispatch(socketBulkDownloadFailed({ data })); + socket.on('bulk_download_error', (data) => { + dispatch(socketBulkDownloadError({ data })); }); };