enhancement(ui): add graph util to abstract distinction of SD i2l and FLUX i2l nodes

invokeai/frontend/web/src/features/nodes/util/graph/generation/addImageToImage.ts

@@ -2,6 +2,7 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import type { CanvasState, Dimensions } from 'features/controlLayers/store/types';
 import type { Graph } from 'features/nodes/util/graph/generation/Graph';
+import { addImageToLatents } from 'features/nodes/util/graph/graphBuilderUtils';
 import { isEqual } from 'lodash-es';
 import type { Invocation } from 'services/api/types';
 
@@ -30,10 +31,7 @@ export const addImageToImage = async (
       ...scaledSize,
     });
 
-    const i2l =
-      vaeSource.type === 'flux_model_loader'
-        ? g.addNode({ id: 'flux_vae_encode', type: 'flux_vae_encode' })
-        : g.addNode({ id: 'i2l', type: 'i2l', fp32 });
+    const i2l = addImageToLatents(g, l2i.type === 'flux_vae_decode', fp32);
 
     const resizeImageToOriginalSize = g.addNode({
       type: 'img_resize',
@@ -50,10 +48,7 @@ export const addImageToImage = async (
     return resizeImageToOriginalSize;
   } else {
     // No need to resize, just decode
-    const i2l =
-      vaeSource.type === 'flux_model_loader'
-        ? g.addNode({ id: 'flux_vae_encode', type: 'flux_vae_encode', image: { image_name } })
-        : g.addNode({ id: 'i2l', type: 'i2l', image: { image_name }, fp32 });
+    const i2l = addImageToLatents(g, l2i.type === 'flux_vae_decode', fp32, image_name);
     g.addEdge(vaeSource, 'vae', i2l, 'vae');
     g.addEdge(i2l, 'latents', denoise, 'latents');
     return l2i;

invokeai/frontend/web/src/features/nodes/util/graph/generation/addInpaint.ts

@@ -6,6 +6,7 @@ import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import type { Dimensions } from 'features/controlLayers/store/types';
 import type { Graph } from 'features/nodes/util/graph/generation/Graph';
+import { addImageToLatents } from 'features/nodes/util/graph/graphBuilderUtils';
 import { isEqual } from 'lodash-es';
 import type { Invocation } from 'services/api/types';
 
@@ -35,10 +36,7 @@ export const addInpaint = async (
 
   if (!isEqual(scaledSize, originalSize)) {
     // Scale before processing requires some resizing
-    const i2l =
-      vaeSource.type === 'flux_model_loader'
-        ? g.addNode({ id: 'flux_vae_encode', type: 'flux_vae_encode' })
-        : g.addNode({ id: 'i2l', type: 'i2l', fp32 });
+    const i2l = addImageToLatents(g, modelLoader.type === 'flux_model_loader', fp32, initialImage.image_name);
 
     const resizeImageToScaledSize = g.addNode({
       type: 'img_resize',
@@ -113,10 +111,7 @@ export const addInpaint = async (
     return canvasPasteBack;
   } else {
     // No scale before processing, much simpler
-    const i2l =
-      vaeSource.type === 'flux_model_loader'
-        ? g.addNode({ id: 'flux_vae_encode', type: 'flux_vae_encode', image: { image_name: initialImage.image_name } })
-        : g.addNode({ id: getPrefixedId('i2l'), type: 'i2l', image: { image_name: initialImage.image_name }, fp32 });
+    const i2l = addImageToLatents(g, modelLoader.type === 'flux_model_loader', fp32, initialImage.image_name);
 
     const alphaToMask = g.addNode({
       id: getPrefixedId('alpha_to_mask'),

invokeai/frontend/web/src/features/nodes/util/graph/generation/addOutpaint.ts

@@ -6,7 +6,7 @@ import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import type { Dimensions } from 'features/controlLayers/store/types';
 import type { Graph } from 'features/nodes/util/graph/generation/Graph';
-import { getInfill } from 'features/nodes/util/graph/graphBuilderUtils';
+import { addImageToLatents, getInfill } from 'features/nodes/util/graph/graphBuilderUtils';
 import { isEqual } from 'lodash-es';
 import type { Invocation } from 'services/api/types';
 
@@ -93,10 +93,7 @@ export const addOutpaint = async (
     g.addEdge(createGradientMask, 'denoise_mask', denoise, 'denoise_mask');
 
     // Decode infilled image and connect to denoise
-    const i2l =
-      vaeSource.type === 'flux_model_loader'
-        ? g.addNode({ id: 'flux_vae_encode', type: 'flux_vae_encode' })
-        : g.addNode({ id: 'i2l', type: 'i2l', fp32 });
+    const i2l = addImageToLatents(g, modelLoader.type === 'flux_model_loader', fp32);
     g.addEdge(infill, 'image', i2l, 'image');
     g.addEdge(vaeSource, 'vae', i2l, 'vae');
     g.addEdge(i2l, 'latents', denoise, 'latents');
@@ -138,10 +135,7 @@ export const addOutpaint = async (
   } else {
     infill.image = { image_name: initialImage.image_name };
     // No scale before processing, much simpler
-    const i2l =
-      vaeSource.type === 'flux_model_loader'
-        ? g.addNode({ id: 'flux_vae_encode', type: 'flux_vae_encode' })
-        : g.addNode({ id: 'i2l', type: 'i2l', fp32 });
+    const i2l = addImageToLatents(g, modelLoader.type === 'flux_model_loader', fp32);
     const maskAlphaToMask = g.addNode({
       id: getPrefixedId('mask_alpha_to_mask'),
       type: 'tomask',

invokeai/frontend/web/src/features/nodes/util/graph/graphBuilderUtils.ts

@@ -115,3 +115,15 @@ export const getInfill = (
 
   assert(false, 'Unknown infill method');
 };
+
+export const addImageToLatents = (g: Graph, isFlux: boolean, fp32: boolean, image_name?: string) => {
+  if (isFlux) {
+    return g.addNode({
+      id: 'flux_vae_encode',
+      type: 'flux_vae_encode',
+      image: image_name ? { image_name } : undefined,
+    });
+  } else {
+    return g.addNode({ id: 'i2l', type: 'i2l', fp32, image: image_name ? { image_name } : undefined });
+  }
+};