feat: Add Canvas Output node to all Canvas Graphs

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

@@ -7,7 +7,7 @@ import {
   imageSelected,
 } from 'features/gallery/store/gallerySlice';
 import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
-import { INPAINT_FINAL_IMAGE } from 'features/nodes/util/graphBuilders/constants';
+import { CANVAS_OUTPUT } from 'features/nodes/util/graphBuilders/constants';
 import { progressImageSet } from 'features/system/store/systemSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import { isImageOutput } from 'services/api/guards';
@@ -55,7 +55,7 @@ export const addInvocationCompleteEventListener = () => {
         if (
           graph_execution_state_id ===
             canvas.layerState.stagingArea.sessionId &&
-          data.source_node_id === INPAINT_FINAL_IMAGE
+          [CANVAS_OUTPUT].includes(data.source_node_id)
         ) {
           dispatch(addImageToStagingArea(imageDTO));
         }

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts

@@ -14,6 +14,7 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   CLIP_SKIP,
   DENOISE_LATENTS,
   IMAGE_TO_IMAGE_GRAPH,
@@ -129,6 +130,10 @@ export const buildCanvasImageToImageGraph = (
         id: LATENTS_TO_IMAGE,
         is_intermediate: !shouldAutoSave,
       },
+      [CANVAS_OUTPUT]: {
+        type: 'load_image',
+        id: CANVAS_OUTPUT,
+      },
     },
     edges: [
       // Connect Model Loader to CLIP Skip and UNet
@@ -225,6 +230,17 @@ export const buildCanvasImageToImageGraph = (
           field: 'latents',
         },
       },
+      // Canvas Output
+      {
+        source: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: CANVAS_OUTPUT,
+          field: 'image',
+        },
+      },
     ],
   };
 

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts

@@ -12,10 +12,10 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   CLIP_SKIP,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_FINAL_IMAGE,
   INPAINT_GRAPH,
   INPAINT_IMAGE,
   ITERATE,
@@ -149,9 +149,9 @@ export const buildCanvasInpaintGraph = (
         is_intermediate: true,
         reference: canvasInitImage,
       },
-      [INPAINT_FINAL_IMAGE]: {
+      [CANVAS_OUTPUT]: {
         type: 'img_paste',
-        id: INPAINT_FINAL_IMAGE,
+        id: CANVAS_OUTPUT,
         is_intermediate: true,
         base_image: canvasInitImage,
       },
@@ -324,7 +324,7 @@ export const buildCanvasInpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'image',
         },
       },
@@ -334,7 +334,7 @@ export const buildCanvasInpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'mask',
         },
       },

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts

@@ -14,10 +14,10 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   CLIP_SKIP,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_FINAL_IMAGE,
   INPAINT_GRAPH,
   INPAINT_IMAGE,
   INPAINT_INFILL,
@@ -183,9 +183,9 @@ export const buildCanvasOutpaintGraph = (
         id: COLOR_CORRECT,
         is_intermediate: true,
       },
-      [INPAINT_FINAL_IMAGE]: {
+      [CANVAS_OUTPUT]: {
         type: 'img_paste',
-        id: INPAINT_FINAL_IMAGE,
+        id: CANVAS_OUTPUT,
         is_intermediate: true,
       },
       [RANGE_OF_SIZE]: {
@@ -399,7 +399,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'base_image',
         },
       },
@@ -409,7 +409,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'image',
         },
       },
@@ -419,7 +419,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'mask',
         },
       },

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts

@@ -15,6 +15,7 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   DENOISE_LATENTS,
   IMAGE_TO_IMAGE_GRAPH,
   IMAGE_TO_LATENTS,
@@ -136,6 +137,10 @@ export const buildCanvasSDXLImageToImageGraph = (
         id: LATENTS_TO_IMAGE,
         is_intermediate: !shouldAutoSave,
       },
+      [CANVAS_OUTPUT]: {
+        type: 'load_image',
+        id: CANVAS_OUTPUT,
+      },
     },
     edges: [
       // Connect Model Loader To UNet & CLIP
@@ -241,6 +246,17 @@ export const buildCanvasSDXLImageToImageGraph = (
           field: 'latents',
         },
       },
+      // Canvas Output
+      {
+        source: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: CANVAS_OUTPUT,
+          field: 'image',
+        },
+      },
     ],
   };
 

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts

@@ -13,9 +13,9 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_FINAL_IMAGE,
   INPAINT_GRAPH,
   INPAINT_IMAGE,
   ITERATE,
@@ -153,9 +153,9 @@ export const buildCanvasSDXLInpaintGraph = (
         is_intermediate: true,
         reference: canvasInitImage,
       },
-      [INPAINT_FINAL_IMAGE]: {
+      [CANVAS_OUTPUT]: {
         type: 'img_paste',
-        id: INPAINT_FINAL_IMAGE,
+        id: CANVAS_OUTPUT,
         is_intermediate: true,
         base_image: canvasInitImage,
       },
@@ -337,7 +337,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'image',
         },
       },
@@ -347,7 +347,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'mask',
         },
       },

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts

@@ -15,9 +15,9 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_FINAL_IMAGE,
   INPAINT_GRAPH,
   INPAINT_IMAGE,
   INPAINT_INFILL,
@@ -187,9 +187,9 @@ export const buildCanvasSDXLOutpaintGraph = (
         id: COLOR_CORRECT,
         is_intermediate: true,
       },
-      [INPAINT_FINAL_IMAGE]: {
+      [CANVAS_OUTPUT]: {
         type: 'img_paste',
-        id: INPAINT_FINAL_IMAGE,
+        id: CANVAS_OUTPUT,
         is_intermediate: true,
       },
       [RANGE_OF_SIZE]: {
@@ -412,7 +412,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'base_image',
         },
       },
@@ -422,7 +422,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'image',
         },
       },
@@ -432,7 +432,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'image',
         },
         destination: {
-          node_id: INPAINT_FINAL_IMAGE,
+          node_id: CANVAS_OUTPUT,
           field: 'mask',
         },
       },

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts

@@ -14,6 +14,7 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   DENOISE_LATENTS,
   LATENTS_TO_IMAGE,
   METADATA_ACCUMULATOR,
@@ -148,6 +149,10 @@ export const buildCanvasSDXLTextToImageGraph = (
         id: LATENTS_TO_IMAGE,
         is_intermediate: !shouldAutoSave,
       },
+      [CANVAS_OUTPUT]: {
+        type: 'load_image',
+        id: CANVAS_OUTPUT,
+      },
     },
     edges: [
       // Connect Model Loader to UNet and CLIP
@@ -243,6 +248,17 @@ export const buildCanvasSDXLTextToImageGraph = (
           field: 'latents',
         },
       },
+      // Canvas Output
+      {
+        source: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: CANVAS_OUTPUT,
+          field: 'image',
+        },
+      },
     ],
   };
 

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts

@@ -13,6 +13,7 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPUT,
   CLIP_SKIP,
   DENOISE_LATENTS,
   LATENTS_TO_IMAGE,
@@ -141,6 +142,10 @@ export const buildCanvasTextToImageGraph = (
         id: LATENTS_TO_IMAGE,
         is_intermediate: !shouldAutoSave,
       },
+      [CANVAS_OUTPUT]: {
+        type: 'load_image',
+        id: CANVAS_OUTPUT,
+      },
     },
     edges: [
       // Connect Model Loader to UNet & CLIP Skip
@@ -227,6 +232,17 @@ export const buildCanvasTextToImageGraph = (
           field: 'latents',
         },
       },
+      // Canvas Output
+      {
+        source: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: CANVAS_OUTPUT,
+          field: 'image',
+        },
+      },
     ],
   };
 

invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts

@@ -17,6 +17,7 @@ export const CLIP_SKIP = 'clip_skip';
 export const IMAGE_TO_LATENTS = 'image_to_latents';
 export const LATENTS_TO_LATENTS = 'latents_to_latents';
 export const RESIZE = 'resize_image';
+export const CANVAS_OUTPUT = 'canvas_output';
 export const INPAINT = 'inpaint';
 export const INPAINT_SEAM_FIX = 'inpaint_seam_fix';
 export const INPAINT_IMAGE = 'inpaint_image';