feat(ui): improve log messages

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -16,6 +16,8 @@ import { receivedOpenAPISchema } from 'services/thunks/schema';
 import { isFulfilledAnyGraphBuilt } from 'services/thunks/session';
 import { InvocationTemplate, InvocationValue } from '../types/types';
 import { parseSchema } from '../util/parseSchema';
+import { log } from 'app/logging/useLogger';
+import { size } from 'lodash-es';
 
 export type NodesState = {
   nodes: Node<InvocationValue>[];
@@ -85,7 +87,12 @@ const nodesSlice = createSlice({
     parsedOpenAPISchema: (state, action: PayloadAction<OpenAPIV3.Document>) => {
       try {
         const parsedSchema = parseSchema(action.payload);
-        console.debug('Parsed schema: ', parsedSchema);
+
+        // TODO: Achtung! Side effect in a reducer!
+        log.info(
+          { namespace: 'schema', nodes: parsedSchema },
+          `Parsed ${size(parsedSchema)} nodes`
+        );
         state.invocationTemplates = parsedSchema;
       } catch (err) {
         console.error(err);

invokeai/frontend/web/src/services/events/actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import {
   GeneratorProgressEvent,
+  GraphExecutionStateCompleteEvent,
   InvocationCompleteEvent,
   InvocationErrorEvent,
   InvocationStartedEvent,
@@ -45,6 +46,10 @@ export const invocationError = createAction<
   BaseSocketPayload & { data: InvocationErrorEvent }
 >('socket/invocationError');
 
+export const graphExecutionStateComplete = createAction<
+  BaseSocketPayload & { data: GraphExecutionStateCompleteEvent }
+>('socket/graphExecutionStateComplete');
+
 export const generatorProgress = createAction<
   BaseSocketPayload & { data: GeneratorProgressEvent }
 >('socket/generatorProgress');

invokeai/frontend/web/src/services/events/middleware.ts

@@ -118,7 +118,9 @@ export const socketMiddleware = () => {
           if (system.sessionId) {
             const sessionLog = moduleLog.child({ sessionId: system.sessionId });
 
-            sessionLog.debug('Re-subscribe');
+            sessionLog.debug(
+              `Subscribed to existing session (${system.sessionId})`
+            );
 
             socket.emit('subscribe', { session: system.sessionId });
             dispatch(
@@ -158,9 +160,10 @@ export const socketMiddleware = () => {
         // };
 
         if (oldSessionId) {
-          sessionLog
+          sessionLog.debug(
-            .child({ oldSessionId })
+            { oldSessionId },
-            .debug('Unsubscribe from old session');
+            `Unsubscribed from old session (${oldSessionId})`
+          );
           // Unsubscribe when invocations complete
           socket.emit('unsubscribe', {
             session: oldSessionId,
@@ -185,7 +188,7 @@ export const socketMiddleware = () => {
           });
         }
 
-        sessionLog.debug('Subscribe');
+        sessionLog.debug(`Subscribe to new session (${sessionId})`);
         socket.emit('subscribe', { session: sessionId });
         dispatch(
           socketSubscribed({

invokeai/frontend/web/src/services/events/util/setEventListeners.ts

@@ -5,6 +5,7 @@ import { sessionCanceled } from 'services/thunks/session';
 import { Socket } from 'socket.io-client';
 import {
   generatorProgress,
+  graphExecutionStateComplete,
   invocationComplete,
   invocationError,
   invocationStarted,
@@ -24,22 +25,22 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
   const { dispatch, getState } = store;
   // Set up listeners for the present subscription
   socket.on('invocation_started', (data) => {
-    sessionLog.child({ data }).info('Invocation started');
+    sessionLog.child({ data }).info(`Invocation started (${data.node.type})`);
     dispatch(invocationStarted({ data, timestamp: getTimestamp() }));
   });
 
   socket.on('generator_progress', (data) => {
-    sessionLog.child({ data }).trace('Generator progress');
+    sessionLog.child({ data }).trace(`Generator progress (${data.node.type})`);
     dispatch(generatorProgress({ data, timestamp: getTimestamp() }));
   });
 
   socket.on('invocation_error', (data) => {
-    sessionLog.child({ data }).error('Invocation error');
+    sessionLog.child({ data }).error(`Invocation error (${data.node.type})`);
     dispatch(invocationError({ data, timestamp: getTimestamp() }));
   });
 
   socket.on('invocation_complete', (data) => {
-    sessionLog.child({ data }).info('Invocation complete');
+    sessionLog.child({ data }).info(`Invocation complete (${data.node.type})`);
     const sessionId = data.graph_execution_state_id;
 
     const { cancelType, isCancelScheduled } = getState().system;
@@ -58,4 +59,13 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
       })
     );
   });
+
+  socket.on('graph_execution_state_complete', (data) => {
+    sessionLog
+      .child({ data })
+      .info(
+        `Graph execution state complete (${data.graph_execution_state_id})`
+      );
+    dispatch(graphExecutionStateComplete({ data, timestamp: getTimestamp() }));
+  });
 };

invokeai/frontend/web/src/services/thunks/gallery.ts

@@ -15,7 +15,7 @@ export const receivedResultImagesPage = createAppAsyncThunk(
       perPage: IMAGES_PER_PAGE,
     });
 
-    galleryLog.info({ response }, 'Received page of results images');
+    galleryLog.info({ response }, `Received ${response.items.length} results`);
 
     return response;
   }
@@ -30,7 +30,7 @@ export const receivedUploadImagesPage = createAppAsyncThunk(
       perPage: IMAGES_PER_PAGE,
     });
 
-    galleryLog.info({ response }, 'Received page of uploads images');
+    galleryLog.info({ response }, `Received ${response.items.length} uploads`);
 
     return response;
   }

invokeai/frontend/web/src/services/thunks/image.ts

@@ -53,7 +53,10 @@ export const imageUploaded = createAppAsyncThunk(
     const response = await ImagesService.uploadImage(arg);
     const { location } = getHeaders(response);
 
-    imagesLog.info({ arg: '<Blob>', response, location }, 'Image uploaded');
+    imagesLog.info(
+      { arg: '<Blob>', response, location },
+      `Image uploaded (${response.image_name})`
+    );
 
     return { response, location };
   }
@@ -108,7 +111,10 @@ export const imageDeleted = createAppAsyncThunk(
 
     const response = await ImagesService.deleteImage(arg);
 
-    imagesLog.info({ arg, response }, 'Image deleted');
+    imagesLog.info(
+      { arg, response },
+      `Image deleted (${arg.imageType} - ${arg.imageName})`
+    );
 
     return response;
   }

invokeai/frontend/web/src/services/thunks/model.ts

@@ -1,7 +1,7 @@
 import { log } from 'app/logging/useLogger';
 import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { Model } from 'features/system/store/modelSlice';
-import { reduce } from 'lodash-es';
+import { reduce, size } from 'lodash-es';
 import { ModelsService } from 'services/api';
 
 const models = log.child({ namespace: 'model' });
@@ -23,7 +23,7 @@ export const receivedModels = createAppAsyncThunk(
       {} as Record<string, Model>
     );
 
-    models.info({ response }, 'Received models');
+    models.info({ response }, `Received ${size(response.models)} models`);
 
     return deserializedModels;
   }

invokeai/frontend/web/src/services/thunks/session.ts

@@ -50,7 +50,7 @@ export const sessionCreated = createAppAsyncThunk(
       requestBody: arg.graph,
     });
 
-    sessionLog.info({ arg, response }, 'Session created');
+    sessionLog.info({ arg, response }, `Session created (${response.id})`);
 
     return response;
   }
@@ -77,7 +77,7 @@ export const nodeAdded = createAppAsyncThunk(
       sessionId: arg.sessionId,
     });
 
-    sessionLog.info({ arg, response }, 'Node added');
+    sessionLog.info({ arg, response }, `Node added (${response})`);
 
     return response;
   }
@@ -96,7 +96,7 @@ export const sessionInvoked = createAppAsyncThunk(
       all: true,
     });
 
-    sessionLog.info({ arg, response }, 'Session invoked');
+    sessionLog.info({ arg, response }, `Session invoked (${sessionId})`);
 
     return response;
   }
@@ -118,7 +118,7 @@ export const sessionCanceled = createAppAsyncThunk(
       sessionId,
     });
 
-    sessionLog.info({ arg, response }, 'Session canceled');
+    sessionLog.info({ arg, response }, `Session canceled (${sessionId})`);
 
     return response;
   }
@@ -136,7 +136,10 @@ export const listedSessions = createAppAsyncThunk(
   async (arg: SessionsListedArg, _thunkApi) => {
     const response = await SessionsService.listSessions(arg);
 
-    sessionLog.info({ arg, response }, 'Sessions listed');
+    sessionLog.info(
+      { arg, response },
+      `Sessions listed (${response.items.length})`
+    );
 
     return response;
   }