feat: add private node for linear UI image outputting

Add a LinearUIOutputInvocation node to be the new terminal node for Linear UI graphs. This node is private and hidden from the Workflow Editor, as it is an implementation detail.

The Linear UI was using the Save Image node for this purpose. It allowed every linear graph to end a single node type, which handled saving metadata and board. This substantially reduced the complexity of the linear graphs.

This caused two related issues:
- Images were saved to disk twice
- Noticeable delay between when an image was decoded and showed up in the UI

To resolve this, the new LinearUIOutputInvocation node will handle adding an image to a board if one is provided.

Metadata is no longer provided in this unified node. Instead, the metadata graph helpers now need to know the node to add metadata to and provide it to the last node that actually outputs an image. This is a `l2i` node for txt2img & img2img graphs, and a different image-outputting node for canvas graphs.

HRF poses another complication, in that it changes the terminal node. To handle this, a new metadata util is added called `setMetadataReceivingNode()`. HRF calls this to change the node that should receive the graph's metadata.

This resolves the duplicate images issue and improves perf without otherwise changing the user experience.

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

@@ -23,7 +23,7 @@ import {
   RESIZE_HRF,
   VAE_LOADER,
 } from './constants';
-import { upsertMetadata } from './metadata';
+import { setMetadataReceivingNode, upsertMetadata } from './metadata';
 
 // Copy certain connections from previous DENOISE_LATENTS to new DENOISE_LATENTS_HRF.
 function copyConnectionsToDenoiseLatentsHrf(graph: NonNullableGraph): void {
@@ -369,4 +369,5 @@ export const addHrfToGraph = (
     hrf_enabled: hrfEnabled,
     hrf_method: hrfMethod,
   });
+  setMetadataReceivingNode(graph, LATENTS_TO_IMAGE_HRF_HR);
 };

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

@@ -1,20 +1,20 @@
 import { RootState } from 'app/store/store';
 import { NonNullableGraph } from 'features/nodes/types/types';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { SaveImageInvocation } from 'services/api/types';
+import { LinearUIOutputInvocation } from 'services/api/types';
 import {
   CANVAS_OUTPUT,
   LATENTS_TO_IMAGE,
   LATENTS_TO_IMAGE_HRF_HR,
+  LINEAR_UI_OUTPUT,
   NSFW_CHECKER,
-  SAVE_IMAGE,
   WATERMARKER,
 } from './constants';
 
 /**
  * Set the `use_cache` field on the linear/canvas graph's final image output node to False.
  */
-export const addSaveImageNode = (
+export const addLinearUIOutputNode = (
   state: RootState,
   graph: NonNullableGraph
 ): void => {
@@ -23,18 +23,18 @@ export const addSaveImageNode = (
     activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false;
   const { autoAddBoardId } = state.gallery;
 
-  const saveImageNode: SaveImageInvocation = {
-    id: SAVE_IMAGE,
-    type: 'save_image',
+  const linearUIOutputNode: LinearUIOutputInvocation = {
+    id: LINEAR_UI_OUTPUT,
+    type: 'linear_ui_output',
     is_intermediate,
     use_cache: false,
     board: autoAddBoardId === 'none' ? undefined : { board_id: autoAddBoardId },
   };
 
-  graph.nodes[SAVE_IMAGE] = saveImageNode;
+  graph.nodes[LINEAR_UI_OUTPUT] = linearUIOutputNode;
 
   const destination = {
-    node_id: SAVE_IMAGE,
+    node_id: LINEAR_UI_OUTPUT,
     field: 'image',
   };
 

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

@@ -4,9 +4,9 @@ import { ESRGANModelName } from 'features/parameters/store/postprocessingSlice';
 import {
   ESRGANInvocation,
   Graph,
-  SaveImageInvocation,
+  LinearUIOutputInvocation,
 } from 'services/api/types';
-import { REALESRGAN as ESRGAN, SAVE_IMAGE } from './constants';
+import { REALESRGAN as ESRGAN, LINEAR_UI_OUTPUT } from './constants';
 import { addCoreMetadataNode, upsertMetadata } from './metadata';
 
 type Arg = {
@@ -28,9 +28,9 @@ export const buildAdHocUpscaleGraph = ({
     is_intermediate: true,
   };
 
-  const saveImageNode: SaveImageInvocation = {
-    id: SAVE_IMAGE,
-    type: 'save_image',
+  const linearUIOutputNode: LinearUIOutputInvocation = {
+    id: LINEAR_UI_OUTPUT,
+    type: 'linear_ui_output',
     use_cache: false,
     is_intermediate: false,
     board: autoAddBoardId === 'none' ? undefined : { board_id: autoAddBoardId },
@@ -40,7 +40,7 @@ export const buildAdHocUpscaleGraph = ({
     id: `adhoc-esrgan-graph`,
     nodes: {
       [ESRGAN]: realesrganNode,
-      [SAVE_IMAGE]: saveImageNode,
+      [LINEAR_UI_OUTPUT]: linearUIOutputNode,
     },
     edges: [
       {
@@ -49,14 +49,14 @@ export const buildAdHocUpscaleGraph = ({
           field: 'image',
         },
         destination: {
-          node_id: SAVE_IMAGE,
+          node_id: LINEAR_UI_OUTPUT,
           field: 'image',
         },
       },
     ],
   };
 
-  addCoreMetadataNode(graph, {});
+  addCoreMetadataNode(graph, {}, ESRGAN);
   upsertMetadata(graph, {
     esrgan_model: esrganModelName,
   });

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

@@ -6,7 +6,7 @@ import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addLoRAsToGraph } from './addLoRAsToGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -308,24 +308,30 @@ export const buildCanvasImageToImageGraph = (
     });
   }
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'img2img',
-    cfg_scale,
-    width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
-    height: !isUsingScaledDimensions
-      ? height
-      : scaledBoundingBoxDimensions.height,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    clip_skip: clipSkip,
-    strength,
-    init_image: initialImage.image_name,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'img2img',
+      cfg_scale,
+      width: !isUsingScaledDimensions
+        ? width
+        : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions
+        ? height
+        : scaledBoundingBoxDimensions.height,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      clip_skip: clipSkip,
+      strength,
+      init_image: initialImage.image_name,
+    },
+    CANVAS_OUTPUT
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -357,7 +363,7 @@ export const buildCanvasImageToImageGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -13,7 +13,7 @@ import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addLoRAsToGraph } from './addLoRAsToGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -666,7 +666,7 @@ export const buildCanvasInpaintGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -12,7 +12,7 @@ import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addLoRAsToGraph } from './addLoRAsToGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -770,7 +770,7 @@ export const buildCanvasOutpaintGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -7,7 +7,7 @@ import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLLoRAsToGraph } from './addSDXLLoRAstoGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
@@ -319,23 +319,29 @@ export const buildCanvasSDXLImageToImageGraph = (
     });
   }
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'img2img',
-    cfg_scale,
-    width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
-    height: !isUsingScaledDimensions
-      ? height
-      : scaledBoundingBoxDimensions.height,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    strength,
-    init_image: initialImage.image_name,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'img2img',
+      cfg_scale,
+      width: !isUsingScaledDimensions
+        ? width
+        : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions
+        ? height
+        : scaledBoundingBoxDimensions.height,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      strength,
+      init_image: initialImage.image_name,
+    },
+    CANVAS_OUTPUT
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -380,7 +386,7 @@ export const buildCanvasSDXLImageToImageGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -14,7 +14,7 @@ import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLLoRAsToGraph } from './addSDXLLoRAstoGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -696,7 +696,7 @@ export const buildCanvasSDXLInpaintGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -13,7 +13,7 @@ import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLLoRAsToGraph } from './addSDXLLoRAstoGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -799,7 +799,7 @@ export const buildCanvasSDXLOutpaintGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -10,7 +10,7 @@ import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLLoRAsToGraph } from './addSDXLLoRAstoGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -301,21 +301,27 @@ export const buildCanvasSDXLTextToImageGraph = (
     });
   }
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'txt2img',
-    cfg_scale,
-    width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
-    height: !isUsingScaledDimensions
-      ? height
-      : scaledBoundingBoxDimensions.height,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'txt2img',
+      cfg_scale,
+      width: !isUsingScaledDimensions
+        ? width
+        : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions
+        ? height
+        : scaledBoundingBoxDimensions.height,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+    },
+    CANVAS_OUTPUT
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -360,7 +366,7 @@ export const buildCanvasSDXLTextToImageGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -9,7 +9,7 @@ import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addLoRAsToGraph } from './addLoRAsToGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -289,22 +289,28 @@ export const buildCanvasTextToImageGraph = (
     });
   }
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'txt2img',
-    cfg_scale,
-    width: !isUsingScaledDimensions ? width : scaledBoundingBoxDimensions.width,
-    height: !isUsingScaledDimensions
-      ? height
-      : scaledBoundingBoxDimensions.height,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    clip_skip: clipSkip,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'txt2img',
+      cfg_scale,
+      width: !isUsingScaledDimensions
+        ? width
+        : scaledBoundingBoxDimensions.width,
+      height: !isUsingScaledDimensions
+        ? height
+        : scaledBoundingBoxDimensions.height,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      clip_skip: clipSkip,
+    },
+    CANVAS_OUTPUT
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -336,7 +342,7 @@ export const buildCanvasTextToImageGraph = (
     addWatermarkerToGraph(state, graph, CANVAS_OUTPUT);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -9,7 +9,7 @@ import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addLoRAsToGraph } from './addLoRAsToGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -311,22 +311,26 @@ export const buildLinearImageToImageGraph = (
     });
   }
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'img2img',
-    cfg_scale,
-    height,
-    width,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    clip_skip: clipSkip,
-    strength,
-    init_image: initialImage.imageName,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'img2img',
+      cfg_scale,
+      height,
+      width,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      clip_skip: clipSkip,
+      strength,
+      init_image: initialImage.imageName,
+    },
+    IMAGE_TO_LATENTS
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -358,7 +362,7 @@ export const buildLinearImageToImageGraph = (
     addWatermarkerToGraph(state, graph);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -10,7 +10,7 @@ import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLLoRAsToGraph } from './addSDXLLoRAstoGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -331,23 +331,27 @@ export const buildLinearSDXLImageToImageGraph = (
     });
   }
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'sdxl_img2img',
-    cfg_scale,
-    height,
-    width,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    strength,
-    init_image: initialImage.imageName,
-    positive_style_prompt: positiveStylePrompt,
-    negative_style_prompt: negativeStylePrompt,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'sdxl_img2img',
+      cfg_scale,
+      height,
+      width,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      strength,
+      init_image: initialImage.imageName,
+      positive_style_prompt: positiveStylePrompt,
+      negative_style_prompt: negativeStylePrompt,
+    },
+    IMAGE_TO_LATENTS
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -388,7 +392,7 @@ export const buildLinearSDXLImageToImageGraph = (
     addWatermarkerToGraph(state, graph);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -6,7 +6,7 @@ import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLLoRAsToGraph } from './addSDXLLoRAstoGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -225,21 +225,25 @@ export const buildLinearSDXLTextToImageGraph = (
     ],
   };
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'sdxl_txt2img',
-    cfg_scale,
-    height,
-    width,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    positive_style_prompt: positiveStylePrompt,
-    negative_style_prompt: negativeStylePrompt,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'sdxl_txt2img',
+      cfg_scale,
+      height,
+      width,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      positive_style_prompt: positiveStylePrompt,
+      negative_style_prompt: negativeStylePrompt,
+    },
+    LATENTS_TO_IMAGE
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -280,7 +284,7 @@ export const buildLinearSDXLTextToImageGraph = (
     addWatermarkerToGraph(state, graph);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -10,7 +10,7 @@ import { addHrfToGraph } from './addHrfToGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
 import { addLoRAsToGraph } from './addLoRAsToGraph';
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addSaveImageNode } from './addSaveImageNode';
+import { addLinearUIOutputNode } from './addLinearUIOutputNode';
 import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
@@ -234,20 +234,24 @@ export const buildLinearTextToImageGraph = (
     ],
   };
 
-  addCoreMetadataNode(graph, {
-    generation_mode: 'txt2img',
-    cfg_scale,
-    height,
-    width,
-    positive_prompt: positivePrompt,
-    negative_prompt: negativePrompt,
-    model,
-    seed,
-    steps,
-    rand_device: use_cpu ? 'cpu' : 'cuda',
-    scheduler,
-    clip_skip: clipSkip,
-  });
+  addCoreMetadataNode(
+    graph,
+    {
+      generation_mode: 'txt2img',
+      cfg_scale,
+      height,
+      width,
+      positive_prompt: positivePrompt,
+      negative_prompt: negativePrompt,
+      model,
+      seed,
+      steps,
+      rand_device: use_cpu ? 'cpu' : 'cuda',
+      scheduler,
+      clip_skip: clipSkip,
+    },
+    LATENTS_TO_IMAGE
+  );
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -286,7 +290,7 @@ export const buildLinearTextToImageGraph = (
     addWatermarkerToGraph(state, graph);
   }
 
-  addSaveImageNode(state, graph);
+  addLinearUIOutputNode(state, graph);
 
   return graph;
 };

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

@@ -9,7 +9,7 @@ export const LATENTS_TO_IMAGE_HRF_LR = 'latents_to_image_hrf_lr';
 export const IMAGE_TO_LATENTS_HRF = 'image_to_latents_hrf';
 export const RESIZE_HRF = 'resize_hrf';
 export const ESRGAN_HRF = 'esrgan_hrf';
-export const SAVE_IMAGE = 'save_image';
+export const LINEAR_UI_OUTPUT = 'linear_ui_output';
 export const NSFW_CHECKER = 'nsfw_checker';
 export const WATERMARKER = 'invisible_watermark';
 export const NOISE = 'noise';

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

@@ -1,11 +1,12 @@
 import { NonNullableGraph } from 'features/nodes/types/types';
 import { CoreMetadataInvocation } from 'services/api/types';
 import { JsonObject } from 'type-fest';
-import { METADATA, SAVE_IMAGE } from './constants';
+import { METADATA } from './constants';
 
 export const addCoreMetadataNode = (
   graph: NonNullableGraph,
-  metadata: Partial<CoreMetadataInvocation>
+  metadata: Partial<CoreMetadataInvocation>,
+  nodeId: string
 ): void => {
   graph.nodes[METADATA] = {
     id: METADATA,
@@ -19,7 +20,7 @@ export const addCoreMetadataNode = (
       field: 'metadata',
     },
     destination: {
-      node_id: SAVE_IMAGE,
+      node_id: nodeId,
       field: 'metadata',
     },
   });
@@ -64,3 +65,21 @@ export const getHasMetadata = (graph: NonNullableGraph): boolean => {
 
   return Boolean(metadataNode);
 };
+
+export const setMetadataReceivingNode = (
+  graph: NonNullableGraph,
+  nodeId: string
+) => {
+  graph.edges = graph.edges.filter((edge) => edge.source.node_id !== METADATA);
+
+  graph.edges.push({
+    source: {
+      node_id: METADATA,
+      field: 'metadata',
+    },
+    destination: {
+      node_id: nodeId,
+      field: 'metadata',
+    },
+  });
+};

invokeai/frontend/web/src/features/nodes/util/parseSchema.ts

@@ -19,7 +19,7 @@ const RESERVED_INPUT_FIELD_NAMES = ['id', 'type', 'use_cache'];
 const RESERVED_OUTPUT_FIELD_NAMES = ['type'];
 const RESERVED_FIELD_TYPES = ['IsIntermediate'];
 
-const invocationDenylist: AnyInvocationType[] = ['graph'];
+const invocationDenylist: AnyInvocationType[] = ['graph', 'linear_ui_output'];
 
 const isReservedInputField = (nodeType: string, fieldName: string) => {
   if (RESERVED_INPUT_FIELD_NAMES.includes(fieldName)) {