From 09f396ce8440f91bde2933296e18b605bed326bb Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Tue, 13 Jun 2023 20:51:35 +1000 Subject: [PATCH] feat(ui): add warning socket event handling --- invokeai/frontend/web/public/locales/en.json | 1 + .../middleware/listenerMiddleware/index.ts | 2 ++ .../socketio/socketInvocationWarning.ts | 21 +++++++++++++++++++ .../src/features/system/store/systemSlice.ts | 15 +++++++++++++ .../web/src/features/ui/store/tabMap.ts | 1 + .../web/src/services/events/actions.ts | 19 +++++++++++++++++ .../frontend/web/src/services/events/types.ts | 13 ++++++++++++ .../services/events/util/setEventListeners.ts | 8 +++++++ 8 files changed, 80 insertions(+) create mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationWarning.ts diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 7a73bae411..a27ca4e36d 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -551,6 +551,7 @@ }, "toast": { "serverError": "Server Error", + "serverWarning": "Server Warning", "disconnected": "Disconnected from Server", "connected": "Connected to Server", "canceled": "Processing Canceled", 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 8c073e81d6..e230a83112 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -73,6 +73,7 @@ import { addImageCategoriesChangedListener } from './listeners/imageCategoriesCh import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed'; import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess'; import { addUpdateImageUrlsOnConnectListener } from './listeners/updateImageUrlsOnConnect'; +import { addInvocationWarningEventListener } from './listeners/socketio/socketInvocationWarning'; export const listenerMiddleware = createListenerMiddleware(); @@ -149,6 +150,7 @@ addGeneratorProgressListener(); addGraphExecutionStateCompleteListener(); addInvocationCompleteListener(); addInvocationErrorListener(); +addInvocationWarningEventListener(); addInvocationStartedListener(); addSocketConnectedListener(); addSocketDisconnectedListener(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationWarning.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationWarning.ts new file mode 100644 index 0000000000..51d1d08778 --- /dev/null +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationWarning.ts @@ -0,0 +1,21 @@ +import { startAppListening } from '../..'; +import { log } from 'app/logging/useLogger'; +import { + appSocketInvocationWarning, + socketInvocationWarning, +} from 'services/events/actions'; + +const moduleLog = log.child({ namespace: 'socketio' }); + +export const addInvocationWarningEventListener = () => { + startAppListening({ + actionCreator: socketInvocationWarning, + effect: (action, { dispatch, getState }) => { + moduleLog.warn( + action.payload, + `Invocation warning (${action.payload.data.node.type})` + ); + dispatch(appSocketInvocationWarning(action.payload)); + }, + }); +}; diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index b17f497f6c..ae849a62a3 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -23,6 +23,7 @@ import { appSocketInvocationComplete, appSocketInvocationError, appSocketInvocationStarted, + appSocketInvocationWarning, appSocketSubscribed, appSocketUnsubscribed, } from 'services/events/actions'; @@ -334,6 +335,20 @@ export const systemSlice = createSlice({ ); }); + /** + * Invocation Warning + */ + builder.addCase(appSocketInvocationWarning, (state, action) => { + const { data } = action.payload; + state.toastQueue.push( + makeToast({ + title: t('toast.serverWarning'), + description: data.warning, + status: 'warning', + }) + ); + }); + /** * Graph Execution State Complete */ diff --git a/invokeai/frontend/web/src/features/ui/store/tabMap.ts b/invokeai/frontend/web/src/features/ui/store/tabMap.ts index becf52886e..925f2c455d 100644 --- a/invokeai/frontend/web/src/features/ui/store/tabMap.ts +++ b/invokeai/frontend/web/src/features/ui/store/tabMap.ts @@ -6,6 +6,7 @@ export const tabMap = [ 'nodes', // 'postprocessing', // 'training', + 'prompt', ] as const; export type InvokeTabName = (typeof tabMap)[number]; diff --git a/invokeai/frontend/web/src/services/events/actions.ts b/invokeai/frontend/web/src/services/events/actions.ts index 5832cb24b1..31c77bb5ca 100644 --- a/invokeai/frontend/web/src/services/events/actions.ts +++ b/invokeai/frontend/web/src/services/events/actions.ts @@ -5,6 +5,7 @@ import { InvocationCompleteEvent, InvocationErrorEvent, InvocationStartedEvent, + InvocationWarningEvent, } from 'services/events/types'; // Common socket action payload data @@ -131,6 +132,24 @@ export const appSocketInvocationError = createAction< BaseSocketPayload & { data: InvocationErrorEvent } >('socket/appSocketInvocationError'); +/** + * Socket.IO Invocation Warning + * + * Do not use. Only for use in middleware. + */ +export const socketInvocationWarning = createAction< + BaseSocketPayload & { data: InvocationWarningEvent } +>('socket/socketInvocationWarning'); + +/** + * Socket.IO Invocation Warning + * + * Do not use. Only for use in middleware. + */ +export const appSocketInvocationWarning = createAction< + BaseSocketPayload & { data: InvocationWarningEvent } +>('socket/appSocketInvocationWarning'); + /** * Socket.IO Graph Execution State Complete * diff --git a/invokeai/frontend/web/src/services/events/types.ts b/invokeai/frontend/web/src/services/events/types.ts index 2577b7fe92..fa50b867f7 100644 --- a/invokeai/frontend/web/src/services/events/types.ts +++ b/invokeai/frontend/web/src/services/events/types.ts @@ -63,6 +63,18 @@ export type InvocationErrorEvent = { error: string; }; +/** + * A `invocation_warning` socket.io event. + * + * @example socket.on('invocation_warning', (data: InvocationWarningEvent) => { ... } + */ +export type InvocationWarningEvent = { + graph_execution_state_id: string; + node: BaseNode; + source_node_id: string; + warning: string; +}; + /** * A `invocation_started` socket.io event. * @@ -95,6 +107,7 @@ export type ServerToClientEvents = { generator_progress: (payload: GeneratorProgressEvent) => void; invocation_complete: (payload: InvocationCompleteEvent) => void; invocation_error: (payload: InvocationErrorEvent) => void; + invocation_warning: (payload: InvocationWarningEvent) => void; invocation_started: (payload: InvocationStartedEvent) => void; graph_execution_state_complete: ( payload: GraphExecutionStateCompleteEvent diff --git a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts index 2c4cba510a..f97127d770 100644 --- a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts +++ b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts @@ -11,6 +11,7 @@ import { socketConnected, socketDisconnected, socketSubscribed, + socketInvocationWarning, } from '../actions'; import { ClientToServerEvents, ServerToClientEvents } from '../types'; import { Logger } from 'roarr'; @@ -94,6 +95,13 @@ export const setEventListeners = (arg: SetEventListenersArg) => { dispatch(socketInvocationError({ data, timestamp: getTimestamp() })); }); + /** + * Invocation warning + */ + socket.on('invocation_warning', (data) => { + dispatch(socketInvocationWarning({ data, timestamp: getTimestamp() })); + }); + /** * Invocation complete */