feat(ui): add rest of controlnet processors

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -71,6 +71,7 @@ import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSa
 import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
 import { addImageCategoriesChangedListener } from './listeners/imageCategoriesChanged';
 import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
+import { addControlNetProcessorParamsChangedListener } from './listeners/controlNetProcessorParamsChanged';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -177,3 +178,4 @@ addImageCategoriesChangedListener();
 
 // ControlNet
 addControlNetImageProcessedListener();
+addControlNetProcessorParamsChangedListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts

@@ -8,6 +8,7 @@ import { sessionReadyToInvoke } from 'features/system/store/actions';
 import { socketInvocationComplete } from 'services/events/actions';
 import { isImageOutput } from 'services/types/guards';
 import { controlNetProcessedImageChanged } from 'features/controlNet/store/controlNetSlice';
+import { pick } from 'lodash-es';
 
 const moduleLog = log.child({ namespace: 'controlNet' });
 
@@ -15,11 +16,27 @@ export const addControlNetImageProcessedListener = () => {
   startAppListening({
     actionCreator: controlNetImageProcessed,
     effect: async (action, { dispatch, getState, take }) => {
-      const { controlNetId, processorNode } = action.payload;
+      const { controlNetId } = action.payload;
+      const controlNet = getState().controlNet.controlNets[controlNetId];
 
-      // ControlNet one-off procressing graph is just he processor node, no edges
+      if (!controlNet.controlImage) {
+        moduleLog.error('Unable to process ControlNet image');
+        return;
+      }
+
+      // ControlNet one-off procressing graph is just the processor node, no edges.
+      // Also we need to grab the image.
       const graph: Graph = {
-        nodes: { [processorNode.id]: processorNode },
+        nodes: {
+          [controlNet.processorNode.id]: {
+            ...controlNet.processorNode,
+            is_intermediate: true,
+            image: pick(controlNet.controlImage, [
+              'image_name',
+              'image_origin',
+            ]),
+          },
+        },
       };
 
       // Create a session to run the graph & wait til it's ready to invoke

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetProcessorParamsChanged.ts

@@ -0,0 +1,27 @@
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import { controlNetImageProcessed } from 'features/controlNet/store/actions';
+import {
+  controlNetProcessorParamsChanged,
+  controlNetProcessorTypeChanged,
+} from 'features/controlNet/store/controlNetSlice';
+
+const moduleLog = log.child({ namespace: 'controlNet' });
+
+export const addControlNetProcessorParamsChangedListener = () => {
+  startAppListening({
+    predicate: (action) =>
+      controlNetProcessorParamsChanged.match(action) ||
+      controlNetProcessorTypeChanged.match(action),
+    effect: async (action, { dispatch, cancelActiveListeners, delay }) => {
+      const { controlNetId } = action.payload;
+      // Cancel any in-progress instances of this listener
+      cancelActiveListeners();
+
+      // Delay before starting actual work
+      await delay(1000);
+
+      dispatch(controlNetImageProcessed({ controlNetId }));
+    },
+  });
+};