chore: Cleanup, comment and organize Node Graphs

Before it gets too chaotic

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

@@ -75,6 +75,18 @@ export const buildCanvasImageToImageGraph = (
   const graph: NonNullableGraph = {
     id: IMAGE_TO_IMAGE_GRAPH,
     nodes: {
+      [MAIN_MODEL_LOADER]: {
+        type: 'main_model_loader',
+        id: MAIN_MODEL_LOADER,
+        is_intermediate: true,
+        model,
+      },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        is_intermediate: true,
+        skipped_layers: clipSkip,
+      },
       [POSITIVE_CONDITIONING]: {
         type: 'compel',
         id: POSITIVE_CONDITIONING,
@@ -93,17 +105,14 @@ export const buildCanvasImageToImageGraph = (
         is_intermediate: true,
         use_cpu,
       },
-      [MAIN_MODEL_LOADER]: {
+      [IMAGE_TO_LATENTS]: {
-        type: 'main_model_loader',
+        type: 'i2l',
-        id: MAIN_MODEL_LOADER,
+        id: IMAGE_TO_LATENTS,
         is_intermediate: true,
-        model,
+        // must be set manually later, bc `fit` parameter may require a resize node inserted
-      },
+        // image: {
-      [CLIP_SKIP]: {
+        //   image_name: initialImage.image_name,
-        type: 'clip_skip',
+        // },
-        id: CLIP_SKIP,
-        is_intermediate: true,
-        skipped_layers: clipSkip,
       },
       [DENOISE_LATENTS]: {
         type: 'denoise_latents',
@@ -115,15 +124,6 @@ export const buildCanvasImageToImageGraph = (
         denoising_start: 1 - strength,
         denoising_end: 1,
       },
-      [IMAGE_TO_LATENTS]: {
-        type: 'i2l',
-        id: IMAGE_TO_LATENTS,
-        is_intermediate: true,
-        // must be set manually later, bc `fit` parameter may require a resize node inserted
-        // image: {
-        //   image_name: initialImage.image_name,
-        // },
-      },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -131,6 +131,17 @@ export const buildCanvasImageToImageGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to CLIP Skip and UNet
+      {
+        source: {
+          node_id: MAIN_MODEL_LOADER,
+          field: 'unet',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'unet',
+        },
+      },
       {
         source: {
           node_id: MAIN_MODEL_LOADER,
@@ -141,6 +152,7 @@ export const buildCanvasImageToImageGraph = (
           field: 'clip',
         },
       },
+      // Connect CLIP Skip To Conditioning
       {
         source: {
           node_id: CLIP_SKIP,
@@ -161,44 +173,15 @@ export const buildCanvasImageToImageGraph = (
           field: 'clip',
         },
       },
+      // Connect Everything To Denoise Latents
       {
         source: {
-          node_id: DENOISE_LATENTS,
+          node_id: POSITIVE_CONDITIONING,
-          field: 'latents',
+          field: 'conditioning',
-        },
-        destination: {
-          node_id: LATENTS_TO_IMAGE,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: IMAGE_TO_LATENTS,
-          field: 'latents',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'latents',
+          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
-      {
-        source: {
-          node_id: MAIN_MODEL_LOADER,
-          field: 'unet',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'unet',
         },
       },
       {
@@ -213,12 +196,33 @@ export const buildCanvasImageToImageGraph = (
       },
       {
         source: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: NOISE,
-          field: 'conditioning',
+          field: 'noise',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'positive_conditioning',
+          field: 'noise',
+        },
+      },
+      {
+        source: {
+          node_id: IMAGE_TO_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+      },
+      // Decode the denoised latents to an image
+      {
+        source: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'latents',
         },
       },
     ],
@@ -328,7 +332,7 @@ export const buildCanvasImageToImageGraph = (
   addLoRAsToGraph(state, graph, DENOISE_LATENTS);
 
   // optionally add custom VAE
-  addVAEToGraph(state, graph);
+  addVAEToGraph(state, graph, MAIN_MODEL_LOADER);
 
   // add dynamic prompts - also sets up core iteration and seed
   addDynamicPromptsToGraph(state, graph);

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

@@ -80,15 +80,29 @@ export const buildCanvasInpaintGraph = (
   const graph: NonNullableGraph = {
     id: INPAINT_GRAPH,
     nodes: {
-      [INPAINT]: {
+      [MAIN_MODEL_LOADER]: {
-        type: 'denoise_latents',
+        type: 'main_model_loader',
-        id: INPAINT,
+        id: MAIN_MODEL_LOADER,
         is_intermediate: true,
-        steps: steps,
+        model,
-        cfg_scale: cfg_scale,
+      },
-        scheduler: scheduler,
+      [CLIP_SKIP]: {
-        denoising_start: 1 - strength,
+        type: 'clip_skip',
-        denoising_end: 1,
+        id: CLIP_SKIP,
+        is_intermediate: true,
+        skipped_layers: clipSkip,
+      },
+      [POSITIVE_CONDITIONING]: {
+        type: 'compel',
+        id: POSITIVE_CONDITIONING,
+        is_intermediate: true,
+        prompt: positivePrompt,
+      },
+      [NEGATIVE_CONDITIONING]: {
+        type: 'compel',
+        id: NEGATIVE_CONDITIONING,
+        is_intermediate: true,
+        prompt: negativePrompt,
       },
       [MASK_BLUR]: {
         type: 'mask_blur',
@@ -113,23 +127,15 @@ export const buildCanvasInpaintGraph = (
         use_cpu,
         is_intermediate: true,
       },
-      [POSITIVE_CONDITIONING]: {
+      [INPAINT]: {
-        type: 'compel',
+        type: 'denoise_latents',
-        id: POSITIVE_CONDITIONING,
+        id: INPAINT,
         is_intermediate: true,
-        prompt: positivePrompt,
+        steps: steps,
-      },
+        cfg_scale: cfg_scale,
-      [NEGATIVE_CONDITIONING]: {
+        scheduler: scheduler,
-        type: 'compel',
+        denoising_start: 1 - strength,
-        id: NEGATIVE_CONDITIONING,
+        denoising_end: 1,
-        is_intermediate: true,
-        prompt: negativePrompt,
-      },
-      [MAIN_MODEL_LOADER]: {
-        type: 'main_model_loader',
-        id: MAIN_MODEL_LOADER,
-        is_intermediate: true,
-        model,
       },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
@@ -137,12 +143,6 @@ export const buildCanvasInpaintGraph = (
         is_intermediate: true,
         fp32: vaePrecision === 'fp32' ? true : false,
       },
-      [CLIP_SKIP]: {
-        type: 'clip_skip',
-        id: CLIP_SKIP,
-        is_intermediate: true,
-        skipped_layers: clipSkip,
-      },
       [COLOR_CORRECT]: {
         type: 'color_correct',
         id: COLOR_CORRECT,
@@ -172,6 +172,7 @@ export const buildCanvasInpaintGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to CLIP Skip and UNet
       {
         source: {
           node_id: MAIN_MODEL_LOADER,
@@ -192,6 +193,7 @@ export const buildCanvasInpaintGraph = (
           field: 'clip',
         },
       },
+      // Connect CLIP Skip to Conditioning
       {
         source: {
           node_id: CLIP_SKIP,
@@ -212,6 +214,17 @@ export const buildCanvasInpaintGraph = (
           field: 'clip',
         },
       },
+      // Connect Everything To Inpaint Node
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'positive_conditioning',
+        },
+      },
       {
         source: {
           node_id: NEGATIVE_CONDITIONING,
@@ -222,16 +235,6 @@ export const buildCanvasInpaintGraph = (
           field: 'negative_conditioning',
         },
       },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'positive_conditioning',
-        },
-      },
       {
         source: {
           node_id: NOISE,
@@ -262,6 +265,7 @@ export const buildCanvasInpaintGraph = (
           field: 'mask',
         },
       },
+      // Iterate
       {
         source: {
           node_id: RANGE_OF_SIZE,
@@ -282,6 +286,7 @@ export const buildCanvasInpaintGraph = (
           field: 'seed',
         },
       },
+      // Decode Inpainted Latents To Image
       {
         source: {
           node_id: INPAINT,
@@ -292,6 +297,7 @@ export const buildCanvasInpaintGraph = (
           field: 'latents',
         },
       },
+      // Color Correct The Inpainted Result
       {
         source: {
           node_id: LATENTS_TO_IMAGE,
@@ -302,6 +308,17 @@ export const buildCanvasInpaintGraph = (
           field: 'image',
         },
       },
+      // Paste Back Onto Original Image
+      {
+        source: {
+          node_id: COLOR_CORRECT,
+          field: 'image',
+        },
+        destination: {
+          node_id: INPAINT_FINAL_IMAGE,
+          field: 'image',
+        },
+      },
       {
         source: {
           node_id: MASK_BLUR,
@@ -312,22 +329,9 @@ export const buildCanvasInpaintGraph = (
           field: 'mask',
         },
       },
-      {
-        source: {
-          node_id: COLOR_CORRECT,
-          field: 'image',
-        },
-        destination: {
-          node_id: INPAINT_FINAL_IMAGE,
-          field: 'image',
-        },
-      },
     ],
   };
 
-  // Add VAE
-  addVAEToGraph(state, graph, MAIN_MODEL_LOADER);
-
   // handle seed
   if (shouldRandomizeSeed) {
     // Random int node to generate the starting seed
@@ -348,6 +352,9 @@ export const buildCanvasInpaintGraph = (
     (graph.nodes[RANGE_OF_SIZE] as RangeOfSizeInvocation).start = seed;
   }
 
+  // Add VAE
+  addVAEToGraph(state, graph, MAIN_MODEL_LOADER);
+
   // add LoRA support
   addLoRAsToGraph(state, graph, INPAINT, MAIN_MODEL_LOADER);
 

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

@@ -104,17 +104,30 @@ export const buildCanvasOutpaintGraph = (
   const graph: NonNullableGraph = {
     id: INPAINT_GRAPH,
     nodes: {
-      [INPAINT]: {
+      [MAIN_MODEL_LOADER]: {
-        type: 'denoise_latents',
+        type: 'main_model_loader',
-        id: INPAINT,
+        id: MAIN_MODEL_LOADER,
         is_intermediate: true,
-        steps: steps,
+        model,
-        cfg_scale: cfg_scale,
+      },
-        scheduler: scheduler,
+      [CLIP_SKIP]: {
-        denoising_start: 1 - strength,
+        type: 'clip_skip',
-        denoising_end: 1,
+        id: CLIP_SKIP,
+        is_intermediate: true,
+        skipped_layers: clipSkip,
+      },
+      [POSITIVE_CONDITIONING]: {
+        type: 'compel',
+        id: POSITIVE_CONDITIONING,
+        is_intermediate: true,
+        prompt: positivePrompt,
+      },
+      [NEGATIVE_CONDITIONING]: {
+        type: 'compel',
+        id: NEGATIVE_CONDITIONING,
+        is_intermediate: true,
+        prompt: negativePrompt,
       },
-      [infillNode.id]: infillNode,
       [MASK_FROM_ALPHA]: {
         type: 'tomask',
         id: MASK_FROM_ALPHA,
@@ -134,6 +147,7 @@ export const buildCanvasOutpaintGraph = (
         radius: maskBlur,
         blur_type: maskBlurMethod,
       },
+      [infillNode.id]: infillNode,
       [INPAINT_IMAGE]: {
         type: 'i2l',
         id: INPAINT_IMAGE,
@@ -148,23 +162,15 @@ export const buildCanvasOutpaintGraph = (
         use_cpu,
         is_intermediate: true,
       },
-      [POSITIVE_CONDITIONING]: {
+      [INPAINT]: {
-        type: 'compel',
+        type: 'denoise_latents',
-        id: POSITIVE_CONDITIONING,
+        id: INPAINT,
         is_intermediate: true,
-        prompt: positivePrompt,
+        steps: steps,
-      },
+        cfg_scale: cfg_scale,
-      [NEGATIVE_CONDITIONING]: {
+        scheduler: scheduler,
-        type: 'compel',
+        denoising_start: 1 - strength,
-        id: NEGATIVE_CONDITIONING,
+        denoising_end: 1,
-        is_intermediate: true,
-        prompt: negativePrompt,
-      },
-      [MAIN_MODEL_LOADER]: {
-        type: 'main_model_loader',
-        id: MAIN_MODEL_LOADER,
-        is_intermediate: true,
-        model,
       },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
@@ -172,12 +178,6 @@ export const buildCanvasOutpaintGraph = (
         is_intermediate: true,
         fp32: vaePrecision === 'fp32' ? true : false,
       },
-      [CLIP_SKIP]: {
-        type: 'clip_skip',
-        id: CLIP_SKIP,
-        is_intermediate: true,
-        skipped_layers: clipSkip,
-      },
       [COLOR_CORRECT]: {
         type: 'color_correct',
         id: COLOR_CORRECT,
@@ -204,6 +204,7 @@ export const buildCanvasOutpaintGraph = (
       },
     },
     edges: [
+      // Connect Model Loader To UNet & Clip Skip
       {
         source: {
           node_id: MAIN_MODEL_LOADER,
@@ -224,6 +225,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'clip',
         },
       },
+      // Connect CLIP Skip to Conditioning
       {
         source: {
           node_id: CLIP_SKIP,
@@ -244,36 +246,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'clip',
         },
       },
-      {
+      // Connect Infill Result To Inpaint Image
-        source: {
-          node_id: NEGATIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'noise',
-        },
-      },
       {
         source: {
           node_id: INPAINT_INFILL,
@@ -284,16 +257,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
       },
-      {
+      // Combine Mask from Init Image with User Painted Mask
-        source: {
-          node_id: INPAINT_IMAGE,
-          field: 'latents',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'latents',
-        },
-      },
       {
         source: {
           node_id: MASK_FROM_ALPHA,
@@ -314,6 +278,47 @@ export const buildCanvasOutpaintGraph = (
           field: 'mask',
         },
       },
+      // Plug Everything Into Inpaint Node
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'positive_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NEGATIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'negative_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NOISE,
+          field: 'noise',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'noise',
+        },
+      },
+      {
+        source: {
+          node_id: INPAINT_IMAGE,
+          field: 'latents',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'latents',
+        },
+      },
       {
         source: {
           node_id: MASK_BLUR,
@@ -324,6 +329,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'mask',
         },
       },
+      // Iterate
       {
         source: {
           node_id: RANGE_OF_SIZE,
@@ -344,6 +350,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'seed',
         },
       },
+      // Decode the result from Inpaint
       {
         source: {
           node_id: INPAINT,
@@ -354,6 +361,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'latents',
         },
       },
+      // Color Correct The Inpainted Result
       {
         source: {
           node_id: INPAINT_INFILL,
@@ -364,16 +372,6 @@ export const buildCanvasOutpaintGraph = (
           field: 'reference',
         },
       },
-      {
-        source: {
-          node_id: MASK_BLUR,
-          field: 'mask',
-        },
-        destination: {
-          node_id: COLOR_CORRECT,
-          field: 'mask',
-        },
-      },
       {
         source: {
           node_id: LATENTS_TO_IMAGE,
@@ -384,6 +382,17 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
       },
+      {
+        source: {
+          node_id: MASK_BLUR,
+          field: 'mask',
+        },
+        destination: {
+          node_id: COLOR_CORRECT,
+          field: 'mask',
+        },
+      },
+      // Paste Everything Back
       {
         source: {
           node_id: INPAINT_INFILL,
@@ -394,16 +403,6 @@ export const buildCanvasOutpaintGraph = (
           field: 'base_image',
         },
       },
-      {
-        source: {
-          node_id: MASK_BLUR,
-          field: 'mask',
-        },
-        destination: {
-          node_id: INPAINT_FINAL_IMAGE,
-          field: 'mask',
-        },
-      },
       {
         source: {
           node_id: COLOR_CORRECT,
@@ -414,12 +413,19 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
       },
+      {
+        source: {
+          node_id: MASK_BLUR,
+          field: 'mask',
+        },
+        destination: {
+          node_id: INPAINT_FINAL_IMAGE,
+          field: 'mask',
+        },
+      },
     ],
   };
 
-  // Add VAE
-  addVAEToGraph(state, graph, MAIN_MODEL_LOADER);
-
   // handle seed
   if (shouldRandomizeSeed) {
     // Random int node to generate the starting seed
@@ -440,6 +446,9 @@ export const buildCanvasOutpaintGraph = (
     (graph.nodes[RANGE_OF_SIZE] as RangeOfSizeInvocation).start = seed;
   }
 
+  // Add VAE
+  addVAEToGraph(state, graph, MAIN_MODEL_LOADER);
+
   // add LoRA support
   addLoRAsToGraph(state, graph, INPAINT, MAIN_MODEL_LOADER);
 

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

@@ -110,6 +110,15 @@ export const buildCanvasSDXLImageToImageGraph = (
         is_intermediate: true,
         use_cpu,
       },
+      [IMAGE_TO_LATENTS]: {
+        type: 'i2l',
+        id: IMAGE_TO_LATENTS,
+        is_intermediate: true,
+        // must be set manually later, bc `fit` parameter may require a resize node inserted
+        // image: {
+        //   image_name: initialImage.image_name,
+        // },
+      },
       [DENOISE_LATENTS]: {
         type: 'denoise_latents',
         id: DENOISE_LATENTS,
@@ -122,15 +131,6 @@ export const buildCanvasSDXLImageToImageGraph = (
           : 1 - strength,
         denoising_end: shouldUseSDXLRefiner ? refinerStart : 1,
       },
-      [IMAGE_TO_LATENTS]: {
-        type: 'i2l',
-        id: IMAGE_TO_LATENTS,
-        is_intermediate: true,
-        // must be set manually later, bc `fit` parameter may require a resize node inserted
-        // image: {
-        //   image_name: initialImage.image_name,
-        // },
-      },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -138,36 +138,7 @@ export const buildCanvasSDXLImageToImageGraph = (
       },
     },
     edges: [
-      {
+      // Connect Model Loader To UNet & CLIP
-        source: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: LATENTS_TO_IMAGE,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: IMAGE_TO_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
       {
         source: {
           node_id: SDXL_MODEL_LOADER,
@@ -218,6 +189,17 @@ export const buildCanvasSDXLImageToImageGraph = (
           field: 'clip2',
         },
       },
+      // Connect Everything to Denoise Latents
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'positive_conditioning',
+        },
+      },
       {
         source: {
           node_id: NEGATIVE_CONDITIONING,
@@ -230,12 +212,33 @@ export const buildCanvasSDXLImageToImageGraph = (
       },
       {
         source: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: NOISE,
-          field: 'conditioning',
+          field: 'noise',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'positive_conditioning',
+          field: 'noise',
+        },
+      },
+      {
+        source: {
+          node_id: IMAGE_TO_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+      },
+      // Decode denoised latents to an image
+      {
+        source: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'latents',
         },
       },
     ],

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

@@ -176,6 +176,7 @@ export const buildCanvasSDXLInpaintGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to UNet and CLIP
       {
         source: {
           node_id: SDXL_MODEL_LOADER,
@@ -226,6 +227,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'clip2',
         },
       },
+      // Connect everything to Inpaint
       {
         source: {
           node_id: POSITIVE_CONDITIONING,
@@ -276,6 +278,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'mask',
         },
       },
+      // Iterate
       {
         source: {
           node_id: RANGE_OF_SIZE,
@@ -296,6 +299,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'seed',
         },
       },
+      // Decode inpainted latents to image
       {
         source: {
           node_id: INPAINT,
@@ -306,6 +310,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'latents',
         },
       },
+      // Color Correct Inpainted Result
       {
         source: {
           node_id: LATENTS_TO_IMAGE,
@@ -316,6 +321,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'image',
         },
       },
+      // Paste them back on original image
       {
         source: {
           node_id: COLOR_CORRECT,

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

@@ -111,17 +111,34 @@ export const buildCanvasSDXLOutpaintGraph = (
   const graph: NonNullableGraph = {
     id: INPAINT_GRAPH,
     nodes: {
-      [INPAINT]: {
+      [SDXL_MODEL_LOADER]: {
-        type: 'denoise_latents',
+        type: 'sdxl_model_loader',
-        id: INPAINT,
+        id: SDXL_MODEL_LOADER,
-        is_intermediate: true,
+        model,
-        steps: steps,
+      },
-        cfg_scale: cfg_scale,
+      [POSITIVE_CONDITIONING]: {
-        scheduler: scheduler,
+        type: 'sdxl_compel_prompt',
-        denoising_start: 1 - strength,
+        id: POSITIVE_CONDITIONING,
-        denoising_end: shouldUseSDXLRefiner ? refinerStart : 1,
+        prompt: positivePrompt,
+        style: shouldConcatSDXLStylePrompt
+          ? `${positivePrompt} ${positiveStylePrompt}`
+          : positiveStylePrompt,
+      },
+      [NEGATIVE_CONDITIONING]: {
+        type: 'sdxl_compel_prompt',
+        id: NEGATIVE_CONDITIONING,
+        prompt: negativePrompt,
+        style: shouldConcatSDXLStylePrompt
+          ? `${negativePrompt} ${negativeStylePrompt}`
+          : negativeStylePrompt,
       },
       [infillNode.id]: infillNode,
+      [INPAINT_IMAGE]: {
+        type: 'i2l',
+        id: INPAINT_IMAGE,
+        is_intermediate: true,
+        fp32: vaePrecision === 'fp32' ? true : false,
+      },
       [MASK_FROM_ALPHA]: {
         type: 'tomask',
         id: MASK_FROM_ALPHA,
@@ -141,12 +158,6 @@ export const buildCanvasSDXLOutpaintGraph = (
         radius: maskBlur,
         blur_type: maskBlurMethod,
       },
-      [INPAINT_IMAGE]: {
-        type: 'i2l',
-        id: INPAINT_IMAGE,
-        is_intermediate: true,
-        fp32: vaePrecision === 'fp32' ? true : false,
-      },
       [NOISE]: {
         type: 'noise',
         id: NOISE,
@@ -155,26 +166,15 @@ export const buildCanvasSDXLOutpaintGraph = (
         use_cpu,
         is_intermediate: true,
       },
-      [POSITIVE_CONDITIONING]: {
+      [INPAINT]: {
-        type: 'sdxl_compel_prompt',
+        type: 'denoise_latents',
-        id: POSITIVE_CONDITIONING,
+        id: INPAINT,
-        prompt: positivePrompt,
+        is_intermediate: true,
-        style: shouldConcatSDXLStylePrompt
+        steps: steps,
-          ? `${positivePrompt} ${positiveStylePrompt}`
+        cfg_scale: cfg_scale,
-          : positiveStylePrompt,
+        scheduler: scheduler,
-      },
+        denoising_start: 1 - strength,
-      [NEGATIVE_CONDITIONING]: {
+        denoising_end: shouldUseSDXLRefiner ? refinerStart : 1,
-        type: 'sdxl_compel_prompt',
-        id: NEGATIVE_CONDITIONING,
-        prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
-      },
-      [SDXL_MODEL_LOADER]: {
-        type: 'sdxl_model_loader',
-        id: SDXL_MODEL_LOADER,
-        model,
       },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
@@ -208,6 +208,7 @@ export const buildCanvasSDXLOutpaintGraph = (
       },
     },
     edges: [
+      // Connect Model Loader To UNet and CLIP
       {
         source: {
           node_id: SDXL_MODEL_LOADER,
@@ -258,36 +259,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'clip2',
         },
       },
-      {
+      // Infill The Image
-        source: {
-          node_id: NEGATIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'noise',
-        },
-      },
       {
         source: {
           node_id: INPAINT_INFILL,
@@ -298,16 +270,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'image',
         },
       },
-      {
+      // Create mask from image alpha & merge with user painted mask
-        source: {
-          node_id: INPAINT_IMAGE,
-          field: 'latents',
-        },
-        destination: {
-          node_id: INPAINT,
-          field: 'latents',
-        },
-      },
       {
         source: {
           node_id: MASK_FROM_ALPHA,
@@ -328,6 +291,47 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'mask',
         },
       },
+      // Connect Everything To Inpaint
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'positive_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NEGATIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'negative_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NOISE,
+          field: 'noise',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'noise',
+        },
+      },
+      {
+        source: {
+          node_id: INPAINT_IMAGE,
+          field: 'latents',
+        },
+        destination: {
+          node_id: INPAINT,
+          field: 'latents',
+        },
+      },
       {
         source: {
           node_id: MASK_BLUR,
@@ -338,6 +342,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'mask',
         },
       },
+      // Iterate
       {
         source: {
           node_id: RANGE_OF_SIZE,
@@ -358,6 +363,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'seed',
         },
       },
+      // Decode inpainted latents to image
       {
         source: {
           node_id: INPAINT,
@@ -368,6 +374,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'latents',
         },
       },
+      // Color Correct The Inpainted Result
       {
         source: {
           node_id: INPAINT_INFILL,
@@ -378,16 +385,6 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'reference',
         },
       },
-      {
-        source: {
-          node_id: MASK_BLUR,
-          field: 'mask',
-        },
-        destination: {
-          node_id: COLOR_CORRECT,
-          field: 'mask',
-        },
-      },
       {
         source: {
           node_id: LATENTS_TO_IMAGE,
@@ -398,6 +395,17 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'image',
         },
       },
+      {
+        source: {
+          node_id: MASK_BLUR,
+          field: 'mask',
+        },
+        destination: {
+          node_id: COLOR_CORRECT,
+          field: 'mask',
+        },
+      },
+      // Paste Back Outpainted Image on Original
       {
         source: {
           node_id: INPAINT_INFILL,
@@ -408,16 +416,6 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'base_image',
         },
       },
-      {
-        source: {
-          node_id: MASK_BLUR,
-          field: 'mask',
-        },
-        destination: {
-          node_id: INPAINT_FINAL_IMAGE,
-          field: 'mask',
-        },
-      },
       {
         source: {
           node_id: COLOR_CORRECT,
@@ -428,6 +426,16 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'image',
         },
       },
+      {
+        source: {
+          node_id: MASK_BLUR,
+          field: 'mask',
+        },
+        destination: {
+          node_id: INPAINT_FINAL_IMAGE,
+          field: 'mask',
+        },
+      },
     ],
   };
 

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

@@ -65,13 +65,17 @@ export const buildCanvasSDXLTextToImageGraph = (
   const use_cpu = shouldUseNoiseSettings
     ? shouldUseCpuNoise
     : initialGenerationState.shouldUseCpuNoise;
+
   const isUsingOnnxModel = model.model_type === 'onnx';
+
   const modelLoaderNodeId = isUsingOnnxModel
     ? ONNX_MODEL_LOADER
     : SDXL_MODEL_LOADER;
+
   const modelLoaderNodeType = isUsingOnnxModel
     ? 'onnx_model_loader'
     : 'sdxl_model_loader';
+
   const t2lNode: DenoiseLatentsInvocation | ONNXTextToLatentsInvocation =
     isUsingOnnxModel
       ? {
@@ -106,6 +110,12 @@ export const buildCanvasSDXLTextToImageGraph = (
   const graph: NonNullableGraph = {
     id: TEXT_TO_IMAGE_GRAPH,
     nodes: {
+      [modelLoaderNodeId]: {
+        type: modelLoaderNodeType,
+        id: modelLoaderNodeId,
+        is_intermediate: true,
+        model,
+      },
       [POSITIVE_CONDITIONING]: {
         type: isUsingOnnxModel ? 'prompt_onnx' : 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -133,13 +143,6 @@ export const buildCanvasSDXLTextToImageGraph = (
         use_cpu,
       },
       [t2lNode.id]: t2lNode,
-      [modelLoaderNodeId]: {
-        type: modelLoaderNodeType,
-        id: modelLoaderNodeId,
-        is_intermediate: true,
-        model,
-      },
-
       [LATENTS_TO_IMAGE]: {
         type: isUsingOnnxModel ? 'l2i_onnx' : 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -147,6 +150,7 @@ export const buildCanvasSDXLTextToImageGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to UNet and CLIP
       {
         source: {
           node_id: modelLoaderNodeId,
@@ -197,6 +201,17 @@ export const buildCanvasSDXLTextToImageGraph = (
           field: 'clip2',
         },
       },
+      // Connect everything to Denoise Latents
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'positive_conditioning',
+        },
+      },
       {
         source: {
           node_id: NEGATIVE_CONDITIONING,
@@ -209,14 +224,15 @@ export const buildCanvasSDXLTextToImageGraph = (
       },
       {
         source: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: NOISE,
-          field: 'conditioning',
+          field: 'noise',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'positive_conditioning',
+          field: 'noise',
         },
       },
+      // Decode Denoised Latents To Image
       {
         source: {
           node_id: DENOISE_LATENTS,
@@ -227,16 +243,6 @@ export const buildCanvasSDXLTextToImageGraph = (
           field: 'latents',
         },
       },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
     ],
   };
 

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

@@ -57,13 +57,17 @@ export const buildCanvasTextToImageGraph = (
   const use_cpu = shouldUseNoiseSettings
     ? shouldUseCpuNoise
     : initialGenerationState.shouldUseCpuNoise;
+
   const isUsingOnnxModel = model.model_type === 'onnx';
+
   const modelLoaderNodeId = isUsingOnnxModel
     ? ONNX_MODEL_LOADER
     : MAIN_MODEL_LOADER;
+
   const modelLoaderNodeType = isUsingOnnxModel
     ? 'onnx_model_loader'
     : 'main_model_loader';
+
   const t2lNode: DenoiseLatentsInvocation | ONNXTextToLatentsInvocation =
     isUsingOnnxModel
       ? {
@@ -84,6 +88,7 @@ export const buildCanvasTextToImageGraph = (
           denoising_start: 0,
           denoising_end: 1,
         };
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -98,6 +103,18 @@ export const buildCanvasTextToImageGraph = (
   const graph: NonNullableGraph = {
     id: TEXT_TO_IMAGE_GRAPH,
     nodes: {
+      [modelLoaderNodeId]: {
+        type: modelLoaderNodeType,
+        id: modelLoaderNodeId,
+        is_intermediate: true,
+        model,
+      },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        is_intermediate: true,
+        skipped_layers: clipSkip,
+      },
       [POSITIVE_CONDITIONING]: {
         type: isUsingOnnxModel ? 'prompt_onnx' : 'compel',
         id: POSITIVE_CONDITIONING,
@@ -119,18 +136,6 @@ export const buildCanvasTextToImageGraph = (
         use_cpu,
       },
       [t2lNode.id]: t2lNode,
-      [modelLoaderNodeId]: {
-        type: modelLoaderNodeType,
-        id: modelLoaderNodeId,
-        is_intermediate: true,
-        model,
-      },
-      [CLIP_SKIP]: {
-        type: 'clip_skip',
-        id: CLIP_SKIP,
-        is_intermediate: true,
-        skipped_layers: clipSkip,
-      },
       [LATENTS_TO_IMAGE]: {
         type: isUsingOnnxModel ? 'l2i_onnx' : 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -138,16 +143,49 @@ export const buildCanvasTextToImageGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to UNet & CLIP Skip
       {
         source: {
-          node_id: NEGATIVE_CONDITIONING,
+          node_id: modelLoaderNodeId,
-          field: 'conditioning',
+          field: 'unet',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'negative_conditioning',
+          field: 'unet',
         },
       },
+      {
+        source: {
+          node_id: modelLoaderNodeId,
+          field: 'clip',
+        },
+        destination: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+      },
+      // Connect CLIP Skip to Conditioning
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: NEGATIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      // Connect everything to Denoise Latents
       {
         source: {
           node_id: POSITIVE_CONDITIONING,
@@ -160,52 +198,12 @@ export const buildCanvasTextToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
-          field: 'clip',
-        },
-        destination: {
-          node_id: CLIP_SKIP,
-          field: 'clip',
-        },
-      },
-      {
-        source: {
-          node_id: CLIP_SKIP,
-          field: 'clip',
-        },
-        destination: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'clip',
-        },
-      },
-      {
-        source: {
-          node_id: CLIP_SKIP,
-          field: 'clip',
-        },
-        destination: {
           node_id: NEGATIVE_CONDITIONING,
-          field: 'clip',
+          field: 'conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: modelLoaderNodeId,
-          field: 'unet',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'unet',
+          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: LATENTS_TO_IMAGE,
-          field: 'latents',
         },
       },
       {
@@ -218,6 +216,17 @@ export const buildCanvasTextToImageGraph = (
           field: 'noise',
         },
       },
+      // Decode denoised latents to image
+      {
+        source: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'latents',
+        },
+      },
     ],
   };
 
@@ -253,12 +262,12 @@ export const buildCanvasTextToImageGraph = (
     },
   });
 
-  // add LoRA support
-  addLoRAsToGraph(state, graph, DENOISE_LATENTS, modelLoaderNodeId);
-
   // optionally add custom VAE
   addVAEToGraph(state, graph, modelLoaderNodeId);
 
+  // add LoRA support
+  addLoRAsToGraph(state, graph, DENOISE_LATENTS, modelLoaderNodeId);
+
   // add dynamic prompts - also sets up core iteration and seed
   addDynamicPromptsToGraph(state, graph);
 

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

@@ -138,6 +138,7 @@ export const buildLinearImageToImageGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to UNet and CLIP Skip
       {
         source: {
           node_id: MAIN_MODEL_LOADER,
@@ -158,6 +159,7 @@ export const buildLinearImageToImageGraph = (
           field: 'clip',
         },
       },
+      // Connect CLIP Skip to Conditioning
       {
         source: {
           node_id: CLIP_SKIP,
@@ -178,34 +180,15 @@ export const buildLinearImageToImageGraph = (
           field: 'clip',
         },
       },
+      // Connect everything to Denoise Latents
       {
         source: {
-          node_id: DENOISE_LATENTS,
+          node_id: POSITIVE_CONDITIONING,
-          field: 'latents',
+          field: 'conditioning',
-        },
-        destination: {
-          node_id: LATENTS_TO_IMAGE,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: IMAGE_TO_LATENTS,
-          field: 'latents',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'latents',
+          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'noise',
         },
       },
       {
@@ -220,12 +203,33 @@ export const buildLinearImageToImageGraph = (
       },
       {
         source: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: NOISE,
-          field: 'conditioning',
+          field: 'noise',
         },
         destination: {
           node_id: DENOISE_LATENTS,
-          field: 'positive_conditioning',
+          field: 'noise',
+        },
+      },
+      {
+        source: {
+          node_id: IMAGE_TO_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+      },
+      // Decode denoised latents to image
+      {
+        source: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'latents',
         },
       },
     ],
@@ -334,12 +338,12 @@ export const buildLinearImageToImageGraph = (
     },
   });
 
+  // optionally add custom VAE
+  addVAEToGraph(state, graph, MAIN_MODEL_LOADER);
+
   // add LoRA support
   addLoRAsToGraph(state, graph, DENOISE_LATENTS);
 
-  // optionally add custom VAE
-  addVAEToGraph(state, graph);
-
   // add dynamic prompts - also sets up core iteration and seed
   addDynamicPromptsToGraph(state, graph);
 

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

@@ -137,6 +137,7 @@ export const buildLinearSDXLImageToImageGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to UNet, CLIP & VAE
       {
         source: {
           node_id: SDXL_MODEL_LOADER,
@@ -207,36 +208,7 @@ export const buildLinearSDXLImageToImageGraph = (
           field: 'clip2',
         },
       },
-      {
+      // Connect everything to Denoise Latents
-        source: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: LATENTS_TO_IMAGE,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: IMAGE_TO_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
       {
         source: {
           node_id: POSITIVE_CONDITIONING,
@@ -257,6 +229,37 @@ export const buildLinearSDXLImageToImageGraph = (
           field: 'negative_conditioning',
         },
       },
+      {
+        source: {
+          node_id: NOISE,
+          field: 'noise',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'noise',
+        },
+      },
+      {
+        source: {
+          node_id: IMAGE_TO_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+      },
+      // Decode Denoised Latents To Image
+      {
+        source: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'latents',
+        },
+      },
     ],
   };
 

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

@@ -111,6 +111,7 @@ export const buildLinearSDXLTextToImageGraph = (
       },
     },
     edges: [
+      // Connect Model Loader to UNet, VAE & CLIP
       {
         source: {
           node_id: SDXL_MODEL_LOADER,
@@ -171,6 +172,7 @@ export const buildLinearSDXLTextToImageGraph = (
           field: 'clip2',
         },
       },
+      // Connect everything to Denoise Latents
       {
         source: {
           node_id: POSITIVE_CONDITIONING,
@@ -201,6 +203,7 @@ export const buildLinearSDXLTextToImageGraph = (
           field: 'noise',
         },
       },
+      // Decode Denoised Latents To Image
       {
         source: {
           node_id: DENOISE_LATENTS,

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

@@ -54,12 +54,15 @@ export const buildLinearTextToImageGraph = (
   }
 
   const isUsingOnnxModel = model.model_type === 'onnx';
+
   const modelLoaderNodeId = isUsingOnnxModel
     ? ONNX_MODEL_LOADER
     : MAIN_MODEL_LOADER;
+
   const modelLoaderNodeType = isUsingOnnxModel
     ? 'onnx_model_loader'
     : 'main_model_loader';
+
   const t2lNode: DenoiseLatentsInvocation | ONNXTextToLatentsInvocation =
     isUsingOnnxModel
       ? {
@@ -80,6 +83,7 @@ export const buildLinearTextToImageGraph = (
           denoising_start: 0,
           denoising_end: 1,
         };
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -95,6 +99,18 @@ export const buildLinearTextToImageGraph = (
   const graph: NonNullableGraph = {
     id: TEXT_TO_IMAGE_GRAPH,
     nodes: {
+      [modelLoaderNodeId]: {
+        type: modelLoaderNodeType,
+        id: modelLoaderNodeId,
+        is_intermediate: true,
+        model,
+      },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate: true,
+      },
       [POSITIVE_CONDITIONING]: {
         type: isUsingOnnxModel ? 'prompt_onnx' : 'compel',
         id: POSITIVE_CONDITIONING,
@@ -116,18 +132,6 @@ export const buildLinearTextToImageGraph = (
         is_intermediate: true,
       },
       [t2lNode.id]: t2lNode,
-      [modelLoaderNodeId]: {
-        type: modelLoaderNodeType,
-        id: modelLoaderNodeId,
-        is_intermediate: true,
-        model,
-      },
-      [CLIP_SKIP]: {
-        type: 'clip_skip',
-        id: CLIP_SKIP,
-        skipped_layers: clipSkip,
-        is_intermediate: true,
-      },
       [LATENTS_TO_IMAGE]: {
         type: isUsingOnnxModel ? 'l2i_onnx' : 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -135,16 +139,7 @@ export const buildLinearTextToImageGraph = (
       },
     },
     edges: [
-      {
+      // Connect Model Loader to UNet and CLIP Skip
-        source: {
-          node_id: modelLoaderNodeId,
-          field: 'clip',
-        },
-        destination: {
-          node_id: CLIP_SKIP,
-          field: 'clip',
-        },
-      },
       {
         source: {
           node_id: modelLoaderNodeId,
@@ -155,6 +150,17 @@ export const buildLinearTextToImageGraph = (
           field: 'unet',
         },
       },
+      {
+        source: {
+          node_id: modelLoaderNodeId,
+          field: 'clip',
+        },
+        destination: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+      },
+      // Connect CLIP Skip to Conditioning
       {
         source: {
           node_id: CLIP_SKIP,
@@ -175,6 +181,7 @@ export const buildLinearTextToImageGraph = (
           field: 'clip',
         },
       },
+      // Connect everything to Denoise Latents
       {
         source: {
           node_id: POSITIVE_CONDITIONING,
@@ -195,16 +202,6 @@ export const buildLinearTextToImageGraph = (
           field: 'negative_conditioning',
         },
       },
-      {
-        source: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: LATENTS_TO_IMAGE,
-          field: 'latents',
-        },
-      },
       {
         source: {
           node_id: NOISE,
@@ -215,6 +212,17 @@ export const buildLinearTextToImageGraph = (
           field: 'noise',
         },
       },
+      // Decode Denoised Latents To Image
+      {
+        source: {
+          node_id: DENOISE_LATENTS,
+          field: 'latents',
+        },
+        destination: {
+          node_id: LATENTS_TO_IMAGE,
+          field: 'latents',
+        },
+      },
     ],
   };
 
@@ -250,12 +258,12 @@ export const buildLinearTextToImageGraph = (
     },
   });
 
-  // add LoRA support
-  addLoRAsToGraph(state, graph, DENOISE_LATENTS, modelLoaderNodeId);
-
   // optionally add custom VAE
   addVAEToGraph(state, graph, modelLoaderNodeId);
 
+  // add LoRA support
+  addLoRAsToGraph(state, graph, DENOISE_LATENTS, modelLoaderNodeId);
+
   // add dynamic prompts - also sets up core iteration and seed
   addDynamicPromptsToGraph(state, graph);