feat: Give each graph its own unique id

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

@@ -2,10 +2,13 @@ import { RootState } from 'app/store/store';
 import { NonNullableGraph } from 'features/nodes/types/types';
 import { MetadataAccumulatorInvocation } from 'services/api/types';
 import {
+  CANVAS_IMAGE_TO_IMAGE_GRAPH,
+  CANVAS_INPAINT_GRAPH,
+  CANVAS_OUTPAINT_GRAPH,
   CANVAS_OUTPUT,
+  CANVAS_TEXT_TO_IMAGE_GRAPH,
   IMAGE_TO_IMAGE_GRAPH,
   IMAGE_TO_LATENTS,
-  INPAINT_GRAPH,
   INPAINT_IMAGE,
   LATENTS_TO_IMAGE,
   MAIN_MODEL_LOADER,
@@ -38,19 +41,6 @@ export const addVAEToGraph = (
   const isOnnxModel = modelLoaderNodeId == ONNX_MODEL_LOADER;
 
   if (graph.id === TEXT_TO_IMAGE_GRAPH || graph.id === IMAGE_TO_IMAGE_GRAPH) {
-    graph.edges.push({
-      source: {
-        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
-        field: isAutoVae && isOnnxModel ? 'vae_decoder' : 'vae',
-      },
-      destination: {
-        node_id: CANVAS_OUTPUT,
-        field: 'vae',
-      },
-    });
-  }
-
-  if (graph.id === INPAINT_GRAPH) {
     graph.edges.push({
       source: {
         node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
@@ -63,7 +53,26 @@ export const addVAEToGraph = (
     });
   }
 
-  if (graph.id === IMAGE_TO_IMAGE_GRAPH) {
+  if (
+    graph.id === CANVAS_TEXT_TO_IMAGE_GRAPH ||
+    graph.id === CANVAS_IMAGE_TO_IMAGE_GRAPH
+  ) {
+    graph.edges.push({
+      source: {
+        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+        field: isAutoVae && isOnnxModel ? 'vae_decoder' : 'vae',
+      },
+      destination: {
+        node_id: CANVAS_OUTPUT,
+        field: 'vae',
+      },
+    });
+  }
+
+  if (
+    graph.id === IMAGE_TO_IMAGE_GRAPH ||
+    graph.id === CANVAS_IMAGE_TO_IMAGE_GRAPH
+  ) {
     graph.edges.push({
       source: {
         node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
@@ -76,17 +85,29 @@ export const addVAEToGraph = (
     });
   }
 
-  if (graph.id === INPAINT_GRAPH) {
+  if (graph.id === CANVAS_INPAINT_GRAPH || graph.id == CANVAS_OUTPAINT_GRAPH) {
-    graph.edges.push({
+    graph.edges.push(
-      source: {
+      {
-        node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+        source: {
-        field: isAutoVae && isOnnxModel ? 'vae_decoder' : 'vae',
+          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
+          field: isAutoVae && isOnnxModel ? 'vae_decoder' : 'vae',
+        },
+        destination: {
+          node_id: INPAINT_IMAGE,
+          field: 'vae',
+        },
       },
-      destination: {
+      {
-        node_id: INPAINT_IMAGE,
+        source: {
-        field: 'vae',
+          node_id: isAutoVae ? modelLoaderNodeId : VAE_LOADER,
-      },
+          field: isAutoVae && isOnnxModel ? 'vae_decoder' : 'vae',
-    });
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'vae',
+        },
+      }
+    );
   }
 
   if (vae && metadataAccumulator) {

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

@@ -14,10 +14,10 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_IMAGE_TO_IMAGE_GRAPH,
   CANVAS_OUTPUT,
   CLIP_SKIP,
   DENOISE_LATENTS,
-  IMAGE_TO_IMAGE_GRAPH,
   IMAGE_TO_LATENTS,
   MAIN_MODEL_LOADER,
   METADATA_ACCUMULATOR,
@@ -73,7 +73,7 @@ export const buildCanvasImageToImageGraph = (
 
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {
-    id: IMAGE_TO_IMAGE_GRAPH,
+    id: CANVAS_IMAGE_TO_IMAGE_GRAPH,
     nodes: {
       [MAIN_MODEL_LOADER]: {
         type: 'main_model_loader',

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

@@ -12,11 +12,11 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_INPAINT_GRAPH,
   CANVAS_OUTPUT,
   CLIP_SKIP,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_GRAPH,
   INPAINT_IMAGE,
   ITERATE,
   LATENTS_TO_IMAGE,
@@ -78,7 +78,7 @@ export const buildCanvasInpaintGraph = (
     : shouldUseCpuNoise;
 
   const graph: NonNullableGraph = {
-    id: INPAINT_GRAPH,
+    id: CANVAS_INPAINT_GRAPH,
     nodes: {
       [MAIN_MODEL_LOADER]: {
         type: 'main_model_loader',

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

@@ -14,11 +14,11 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPAINT_GRAPH,
   CANVAS_OUTPUT,
   CLIP_SKIP,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_GRAPH,
   INPAINT_IMAGE,
   INPAINT_INFILL,
   ITERATE,
@@ -102,7 +102,7 @@ export const buildCanvasOutpaintGraph = (
   }
 
   const graph: NonNullableGraph = {
-    id: INPAINT_GRAPH,
+    id: CANVAS_OUTPAINT_GRAPH,
     nodes: {
       [MAIN_MODEL_LOADER]: {
         type: 'main_model_loader',

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

@@ -15,9 +15,9 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_IMAGE_TO_IMAGE_GRAPH,
   CANVAS_OUTPUT,
   DENOISE_LATENTS,
-  IMAGE_TO_IMAGE_GRAPH,
   IMAGE_TO_LATENTS,
   METADATA_ACCUMULATOR,
   NEGATIVE_CONDITIONING,
@@ -81,7 +81,7 @@ export const buildCanvasSDXLImageToImageGraph = (
 
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {
-    id: IMAGE_TO_IMAGE_GRAPH,
+    id: CANVAS_IMAGE_TO_IMAGE_GRAPH,
     nodes: {
       [SDXL_MODEL_LOADER]: {
         type: 'sdxl_model_loader',

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

@@ -13,10 +13,10 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_INPAINT_GRAPH,
   CANVAS_OUTPUT,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_GRAPH,
   INPAINT_IMAGE,
   ITERATE,
   LATENTS_TO_IMAGE,
@@ -85,7 +85,7 @@ export const buildCanvasSDXLInpaintGraph = (
     : shouldUseCpuNoise;
 
   const graph: NonNullableGraph = {
-    id: INPAINT_GRAPH,
+    id: CANVAS_INPAINT_GRAPH,
     nodes: {
       [SDXL_MODEL_LOADER]: {
         type: 'sdxl_model_loader',

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

@@ -15,10 +15,10 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CANVAS_OUTPAINT_GRAPH,
   CANVAS_OUTPUT,
   COLOR_CORRECT,
   INPAINT,
-  INPAINT_GRAPH,
   INPAINT_IMAGE,
   INPAINT_INFILL,
   ITERATE,
@@ -109,7 +109,7 @@ export const buildCanvasSDXLOutpaintGraph = (
   }
 
   const graph: NonNullableGraph = {
-    id: INPAINT_GRAPH,
+    id: CANVAS_OUTPAINT_GRAPH,
     nodes: {
       [SDXL_MODEL_LOADER]: {
         type: 'sdxl_model_loader',

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

@@ -15,6 +15,7 @@ import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
   CANVAS_OUTPUT,
+  CANVAS_TEXT_TO_IMAGE_GRAPH,
   DENOISE_LATENTS,
   METADATA_ACCUMULATOR,
   NEGATIVE_CONDITIONING,
@@ -22,7 +23,6 @@ import {
   ONNX_MODEL_LOADER,
   POSITIVE_CONDITIONING,
   SDXL_MODEL_LOADER,
-  TEXT_TO_IMAGE_GRAPH,
 } from './constants';
 
 /**
@@ -108,7 +108,7 @@ export const buildCanvasSDXLTextToImageGraph = (
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   // TODO: Actually create the graph correctly for ONNX
   const graph: NonNullableGraph = {
-    id: TEXT_TO_IMAGE_GRAPH,
+    id: CANVAS_TEXT_TO_IMAGE_GRAPH,
     nodes: {
       [modelLoaderNodeId]: {
         type: modelLoaderNodeType,

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

@@ -14,6 +14,7 @@ import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
   CANVAS_OUTPUT,
+  CANVAS_TEXT_TO_IMAGE_GRAPH,
   CLIP_SKIP,
   DENOISE_LATENTS,
   MAIN_MODEL_LOADER,
@@ -22,7 +23,6 @@ import {
   NOISE,
   ONNX_MODEL_LOADER,
   POSITIVE_CONDITIONING,
-  TEXT_TO_IMAGE_GRAPH,
 } from './constants';
 
 /**
@@ -101,7 +101,7 @@ export const buildCanvasTextToImageGraph = (
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   // TODO: Actually create the graph correctly for ONNX
   const graph: NonNullableGraph = {
-    id: TEXT_TO_IMAGE_GRAPH,
+    id: CANVAS_TEXT_TO_IMAGE_GRAPH,
     nodes: {
       [modelLoaderNodeId]: {
         type: modelLoaderNodeType,

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

@@ -49,7 +49,10 @@ export const SDXL_REFINER_LATENTS_TO_LATENTS = 'l2l_sdxl_refiner';
 
 // friendly graph ids
 export const TEXT_TO_IMAGE_GRAPH = 'text_to_image_graph';
+export const IMAGE_TO_IMAGE_GRAPH = 'image_to_image_graph';
+export const CANVAS_TEXT_TO_IMAGE_GRAPH = 'canvas_text_to_image_graph';
+export const CANVAS_IMAGE_TO_IMAGE_GRAPH = 'canvas_image_to_image_graph';
+export const CANVAS_INPAINT_GRAPH = 'canvas_inpaint_graph';
+export const CANVAS_OUTPAINT_GRAPH = 'canvas_outpaint_graph';
 export const SDXL_TEXT_TO_IMAGE_GRAPH = 'sdxl_text_to_image_graph';
 export const SDXL_IMAGE_TO_IMAGE_GRAPH = 'sxdl_image_to_image_graph';
-export const IMAGE_TO_IMAGE_GRAPH = 'image_to_image_graph';
-export const INPAINT_GRAPH = 'inpaint_graph';