feat(ui): add warning socket event handling

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",

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();

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));
+    },
+  });
+};

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
      */

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];

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
  *

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

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
    */