From c2e9bdc6c5e22494d92c2a50938ad1478b15d490 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sun, 4 Aug 2024 19:02:45 +1000 Subject: [PATCH] feat(ui): handle new progress event Minor changes to use the new progress event. Only additional feature is if the progress has a message, it is displayed as a tooltip on the progress bar. --- .../middleware/devtools/actionSanitizer.ts | 8 +++---- .../middleware/listenerMiddleware/index.ts | 4 ++-- ...rogress.ts => socketInvocationProgress.ts} | 12 +++++----- .../components/IAICanvasIntermediateImage.tsx | 3 +-- .../ImageViewer/CurrentImageButtons.tsx | 2 +- .../components/ImageViewer/ProgressImage.tsx | 10 ++++---- .../nodes/CurrentImage/CurrentImageNode.tsx | 2 +- .../system/components/ProgressBar.tsx | 23 +++++++++++-------- .../src/features/system/store/systemSlice.ts | 11 ++++----- .../web/src/features/system/store/types.ts | 13 ++--------- .../web/src/services/events/actions.ts | 6 ++--- .../src/services/events/setEventListeners.ts | 6 ++--- .../frontend/web/src/services/events/types.ts | 5 ++-- 13 files changed, 47 insertions(+), 58 deletions(-) rename invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/{socketGeneratorProgress.ts => socketInvocationProgress.ts} (65%) diff --git a/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts b/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts index f0ea175aec..b6f1d53a2c 100644 --- a/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts +++ b/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts @@ -3,7 +3,7 @@ import { deepClone } from 'common/util/deepClone'; import { isAnyGraphBuilt } from 'features/nodes/store/actions'; import { appInfoApi } from 'services/api/endpoints/appInfo'; import type { Graph } from 'services/api/types'; -import { socketGeneratorProgress } from 'services/events/actions'; +import { socketInvocationProgress } from 'services/events/actions'; export const actionSanitizer = (action: A): A => { if (isAnyGraphBuilt(action)) { @@ -24,10 +24,10 @@ export const actionSanitizer = (action: A): A => { }; } - if (socketGeneratorProgress.match(action)) { + if (socketInvocationProgress.match(action)) { const sanitized = deepClone(action); - if (sanitized.payload.data.progress_image) { - sanitized.payload.data.progress_image.dataURL = ''; + if (sanitized.payload.data.image) { + sanitized.payload.data.image.dataURL = ''; } return sanitized; } 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 a1ce52b407..38b8ed4e0f 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -39,9 +39,9 @@ import { addDynamicPromptsListener } from 'app/store/middleware/listenerMiddlewa 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 { addInvocationCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete'; import { addInvocationErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError'; +import { addInvocationProgressEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationProgress'; 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'; @@ -102,7 +102,7 @@ addStagingAreaImageSavedListener(startAppListening); addCommitStagingAreaImageListener(startAppListening); // Socket.IO -addGeneratorProgressEventListener(startAppListening); +addInvocationProgressEventListener(startAppListening); addInvocationCompleteEventListener(startAppListening); addInvocationErrorEventListener(startAppListening); addInvocationStartedEventListener(startAppListening); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketGeneratorProgress.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationProgress.ts similarity index 65% rename from invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketGeneratorProgress.ts rename to invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationProgress.ts index 08ad830ba4..a0c3419ec8 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketGeneratorProgress.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationProgress.ts @@ -4,21 +4,21 @@ import { deepClone } from 'common/util/deepClone'; import { parseify } from 'common/util/serialize'; import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState'; import { zNodeStatus } from 'features/nodes/types/invocation'; -import { socketGeneratorProgress } from 'services/events/actions'; +import { socketInvocationProgress } from 'services/events/actions'; const log = logger('socketio'); -export const addGeneratorProgressEventListener = (startAppListening: AppStartListening) => { +export const addInvocationProgressEventListener = (startAppListening: AppStartListening) => { startAppListening({ - actionCreator: socketGeneratorProgress, + actionCreator: socketInvocationProgress, effect: (action) => { log.trace(parseify(action.payload), `Generator progress`); - const { invocation_source_id, step, total_steps, progress_image } = action.payload.data; + const { invocation_source_id, percentage, image } = action.payload.data; const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]); if (nes) { nes.status = zNodeStatus.enum.IN_PROGRESS; - nes.progress = (step + 1) / total_steps; - nes.progressImage = progress_image ?? null; + nes.progress = percentage; + nes.progressImage = image ?? null; upsertExecutionState(nes.nodeId, nes); } }, diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx index bd9b93997e..091ec6be7b 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx @@ -10,8 +10,7 @@ const progressImageSelector = createMemoizedSelector([selectSystemSlice, selectC const { batchIds } = canvas; return { - progressImage: - denoiseProgress && batchIds.includes(denoiseProgress.batch_id) ? denoiseProgress.progress_image : undefined, + progressImage: denoiseProgress && batchIds.includes(denoiseProgress.batch_id) ? denoiseProgress.image : undefined, boundingBox: canvas.layerState.stagingArea.boundingBox, }; }); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx index d1f874271d..718e0a1587 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx @@ -40,7 +40,7 @@ const selectShouldDisableToolbarButtons = createSelector( selectGallerySlice, selectLastSelectedImage, (system, gallery, lastSelectedImage) => { - const hasProgressImage = Boolean(system.denoiseProgress?.progress_image); + const hasProgressImage = Boolean(system.denoiseProgress?.image); return hasProgressImage || !lastSelectedImage; } ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx index 0ee75fbcd4..b40ad0c175 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx @@ -4,7 +4,7 @@ import { useAppSelector } from 'app/store/storeHooks'; import { memo, useMemo } from 'react'; const CurrentImagePreview = () => { - const progress_image = useAppSelector((s) => s.system.denoiseProgress?.progress_image); + const image = useAppSelector((s) => s.system.denoiseProgress?.image); const shouldAntialiasProgressImage = useAppSelector((s) => s.system.shouldAntialiasProgressImage); const sx = useMemo( @@ -14,15 +14,15 @@ const CurrentImagePreview = () => { [shouldAntialiasProgressImage] ); - if (!progress_image) { + if (!image) { return null; } return ( { const { t } = useTranslation(); const { data: queueStatus } = useGetQueueStatusQuery(); const isConnected = useAppSelector((s) => s.system.isConnected); - const hasSteps = useAppSelector((s) => Boolean(s.system.denoiseProgress)); + const message = useAppSelector((s) => s.system.denoiseProgress?.message); + const hasSteps = useAppSelector((s) => Boolean(s.system.denoiseProgress?.percentage !== undefined)); const value = useAppSelector(selectProgressValue); return ( - + + + ); }; diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index 3c700e683e..d58ed7ba87 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -5,8 +5,8 @@ import type { LogLevelName } from 'roarr'; import { socketConnected, socketDisconnected, - socketGeneratorProgress, socketInvocationComplete, + socketInvocationProgress, socketInvocationStarted, socketModelLoadComplete, socketModelLoadStarted, @@ -95,8 +95,8 @@ export const systemSlice = createSlice({ /** * Generator Progress */ - builder.addCase(socketGeneratorProgress, (state, action) => { - const { step, total_steps, progress_image, session_id, batch_id, percentage } = action.payload.data; + builder.addCase(socketInvocationProgress, (state, action) => { + const { image, session_id, batch_id, percentage, message } = action.payload.data; if (state.cancellations.includes(session_id)) { // Do not update the progress if this session has been cancelled. This prevents a race condition where we get a @@ -105,10 +105,9 @@ export const systemSlice = createSlice({ } state.denoiseProgress = { - step, - total_steps, + message, percentage, - progress_image, + image, session_id, batch_id, }; diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts index d896dee5f5..06c9655417 100644 --- a/invokeai/frontend/web/src/features/system/store/types.ts +++ b/invokeai/frontend/web/src/features/system/store/types.ts @@ -1,18 +1,9 @@ import type { LogLevel } from 'app/logging/logger'; -import type { ProgressImage } from 'services/events/types'; +import type { InvocationProgressEvent } from 'services/events/types'; import { z } from 'zod'; type SystemStatus = 'CONNECTED' | 'DISCONNECTED' | 'PROCESSING' | 'ERROR' | 'LOADING_MODEL'; -type DenoiseProgress = { - session_id: string; - batch_id: string; - progress_image: ProgressImage | null | undefined; - step: number; - total_steps: number; - percentage: number; -}; - const zLanguage = z.enum([ 'ar', 'az', @@ -45,7 +36,7 @@ export interface SystemState { isConnected: boolean; shouldConfirmOnDelete: boolean; enableImageDebugging: boolean; - denoiseProgress: DenoiseProgress | null; + denoiseProgress: Pick | null; consoleLogLevel: LogLevel; shouldLogToConsole: boolean; shouldAntialiasProgressImage: boolean; diff --git a/invokeai/frontend/web/src/services/events/actions.ts b/invokeai/frontend/web/src/services/events/actions.ts index a97bdcbf8b..2b6193c940 100644 --- a/invokeai/frontend/web/src/services/events/actions.ts +++ b/invokeai/frontend/web/src/services/events/actions.ts @@ -9,8 +9,8 @@ import type { DownloadProgressEvent, DownloadStartedEvent, InvocationCompleteEvent, - InvocationDenoiseProgressEvent, InvocationErrorEvent, + InvocationProgressEvent, InvocationStartedEvent, ModelInstallCancelledEvent, ModelInstallCompleteEvent, @@ -32,9 +32,7 @@ export const socketDisconnected = createSocketAction('Disconnected'); export const socketInvocationStarted = createSocketAction('InvocationStartedEvent'); export const socketInvocationComplete = createSocketAction('InvocationCompleteEvent'); export const socketInvocationError = createSocketAction('InvocationErrorEvent'); -export const socketGeneratorProgress = createSocketAction( - 'InvocationDenoiseProgressEvent' -); +export const socketInvocationProgress = createSocketAction('InvocationProgressEvent'); export const socketModelLoadStarted = createSocketAction('ModelLoadStartedEvent'); export const socketModelLoadComplete = createSocketAction('ModelLoadCompleteEvent'); export const socketDownloadStarted = createSocketAction('DownloadStartedEvent'); diff --git a/invokeai/frontend/web/src/services/events/setEventListeners.ts b/invokeai/frontend/web/src/services/events/setEventListeners.ts index 6bc0154ef0..f4b3cf8aca 100644 --- a/invokeai/frontend/web/src/services/events/setEventListeners.ts +++ b/invokeai/frontend/web/src/services/events/setEventListeners.ts @@ -14,9 +14,9 @@ import { socketDownloadError, socketDownloadProgress, socketDownloadStarted, - socketGeneratorProgress, socketInvocationComplete, socketInvocationError, + socketInvocationProgress, socketInvocationStarted, socketModelInstallCancelled, socketModelInstallComplete, @@ -65,8 +65,8 @@ export const setEventListeners = ({ socket, dispatch }: SetEventListenersArg) => socket.on('invocation_started', (data) => { dispatch(socketInvocationStarted({ data })); }); - socket.on('invocation_denoise_progress', (data) => { - dispatch(socketGeneratorProgress({ data })); + socket.on('invocation_progress', (data) => { + dispatch(socketInvocationProgress({ data })); }); socket.on('invocation_error', (data) => { dispatch(socketInvocationError({ data })); diff --git a/invokeai/frontend/web/src/services/events/types.ts b/invokeai/frontend/web/src/services/events/types.ts index 2d3725394d..7323fe1ca5 100644 --- a/invokeai/frontend/web/src/services/events/types.ts +++ b/invokeai/frontend/web/src/services/events/types.ts @@ -4,10 +4,9 @@ export type ModelLoadStartedEvent = S['ModelLoadStartedEvent']; export type ModelLoadCompleteEvent = S['ModelLoadCompleteEvent']; export type InvocationStartedEvent = S['InvocationStartedEvent']; -export type InvocationDenoiseProgressEvent = S['InvocationDenoiseProgressEvent']; +export type InvocationProgressEvent = S['InvocationProgressEvent']; export type InvocationCompleteEvent = S['InvocationCompleteEvent']; export type InvocationErrorEvent = S['InvocationErrorEvent']; -export type ProgressImage = InvocationDenoiseProgressEvent['progress_image']; export type ModelInstallDownloadStartedEvent = S['ModelInstallDownloadStartedEvent']; export type ModelInstallDownloadProgressEvent = S['ModelInstallDownloadProgressEvent']; @@ -39,7 +38,7 @@ type ClientEmitSubscribeBulkDownload = { type ClientEmitUnsubscribeBulkDownload = ClientEmitSubscribeBulkDownload; export type ServerToClientEvents = { - invocation_denoise_progress: (payload: InvocationDenoiseProgressEvent) => void; + invocation_progress: (payload: InvocationProgressEvent) => void; invocation_complete: (payload: InvocationCompleteEvent) => void; invocation_error: (payload: InvocationErrorEvent) => void; invocation_started: (payload: InvocationStartedEvent) => void;