wip(ui): Replace 2 Layer Coherence pass with Gradient Mask

invokeai/frontend/web/public/locales/en.json

@@ -1130,8 +1130,8 @@
         "codeformerFidelity": "Fidelity",
         "coherenceMode": "Mode",
         "coherencePassHeader": "Coherence Pass",
-        "coherenceSteps": "Steps",
+        "coherenceEdgeSize": "Edge Size",
-        "coherenceStrength": "Strength",
+        "coherenceMinDenoise": "Min Denoise",
         "compositingSettingsHeader": "Compositing Settings",
         "controlNetControlMode": "Control Mode",
         "copyImage": "Copy Image",
@@ -1486,6 +1486,17 @@
             "heading": "Strength",
             "paragraphs": ["Amount of noise added for the Coherence Pass.", "Similar to Denoising Strength."]
         },
+        "compositingCoherenceEdgeSize": {
+            "heading": "Edge Size",
+            "paragraphs": ["The edge size of the coherence pass."]
+        },
+        "compositingCoherenceMinDenoise": {
+            "heading": "Minimum Denoise",
+            "paragraphs": [
+                "Minimum denoise strength for the Coherence mode",
+                "The minimum denoise strength for the coherence region when inpainting or outpainting"
+            ]
+        },
         "compositingMaskAdjustments": {
             "heading": "Mask Adjustments",
             "paragraphs": ["Adjust the mask."]
@@ -1762,6 +1773,9 @@
         "clearCanvasHistoryMessage": "Clearing the canvas history leaves your current canvas intact, but irreversibly clears the undo and redo history.",
         "clearHistory": "Clear History",
         "clearMask": "Clear Mask (Shift+C)",
+        "coherenceModeGaussianBlur": "Gaussian Blur",
+        "coherenceModeBoxBlur": "Box Blur",
+        "coherenceModeStaged": "Staged",
         "colorPicker": "Color Picker",
         "copyToClipboard": "Copy to Clipboard",
         "cursorPosition": "Cursor Position",

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -88,7 +88,7 @@ export type AppConfig = {
     scaledBoundingBoxHeight: NumericalParameterConfig; // initial value comes from model
     scaledBoundingBoxWidth: NumericalParameterConfig; // initial value comes from model
     canvasCoherenceStrength: NumericalParameterConfig;
-    canvasCoherenceSteps: NumericalParameterConfig;
+    canvasCoherenceEdgeSize: NumericalParameterConfig;
     infillTileSize: NumericalParameterConfig;
     infillPatchmatchDownscaleSize: NumericalParameterConfig;
     // Misc advanced

invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts

@@ -10,8 +10,8 @@ export type Feature =
   | 'compositingBlurMethod'
   | 'compositingCoherencePass'
   | 'compositingCoherenceMode'
-  | 'compositingCoherenceSteps'
+  | 'compositingCoherenceEdgeSize'
-  | 'compositingStrength'
+  | 'compositingCoherenceMinDenoise'
   | 'compositingMaskAdjustments'
   | 'controlNet'
   | 'controlNetBeginEnd'

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

@@ -9,7 +9,7 @@ import type {
   NonNullableGraph,
 } from 'services/api/types';
 
-import { CANVAS_COHERENCE_DENOISE_LATENTS, CONTROL_NET_COLLECT } from './constants';
+import { CONTROL_NET_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
 export const addControlNetToLinearGraph = (state: RootState, graph: NonNullableGraph, baseNodeId: string): void => {
@@ -39,16 +39,6 @@ export const addControlNetToLinearGraph = (state: RootState, graph: NonNullableG
       },
     });
 
-    if (CANVAS_COHERENCE_DENOISE_LATENTS in graph.nodes) {
-      graph.edges.push({
-        source: { node_id: CONTROL_NET_COLLECT, field: 'collection' },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'control',
-        },
-      });
-    }
-
     validControlNets.forEach((controlNet) => {
       if (!controlNet.model) {
         return;

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

@@ -9,7 +9,7 @@ import type {
   NonNullableGraph,
 } from 'services/api/types';
 
-import { CANVAS_COHERENCE_DENOISE_LATENTS, IP_ADAPTER_COLLECT } from './constants';
+import { IP_ADAPTER_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
 export const addIPAdapterToLinearGraph = (state: RootState, graph: NonNullableGraph, baseNodeId: string): void => {
@@ -33,15 +33,6 @@ export const addIPAdapterToLinearGraph = (state: RootState, graph: NonNullableGr
       },
     });
 
-    if (CANVAS_COHERENCE_DENOISE_LATENTS in graph.nodes) {
-      graph.edges.push({
-        source: { node_id: IP_ADAPTER_COLLECT, field: 'collection' },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'ip_adapter',
-        },
-      });
-    }
     const ipAdapterMetdata: CoreMetadataInvocation['ipAdapters'] = [];
 
     validIPAdapters.forEach((ipAdapter) => {

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

@@ -2,16 +2,7 @@ import type { RootState } from 'app/store/store';
 import { filter, size } from 'lodash-es';
 import type { CoreMetadataInvocation, LoraLoaderInvocation, NonNullableGraph } from 'services/api/types';
 
-import {
+import { CLIP_SKIP, LORA_LOADER, MAIN_MODEL_LOADER, NEGATIVE_CONDITIONING, POSITIVE_CONDITIONING } from './constants';
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CANVAS_INPAINT_GRAPH,
-  CANVAS_OUTPAINT_GRAPH,
-  CLIP_SKIP,
-  LORA_LOADER,
-  MAIN_MODEL_LOADER,
-  NEGATIVE_CONDITIONING,
-  POSITIVE_CONDITIONING,
-} from './constants';
 import { upsertMetadata } from './metadata';
 
 export const addLoRAsToGraph = (
@@ -127,19 +118,6 @@ export const addLoRAsToGraph = (
         },
       });
 
-      if (graph.id && [CANVAS_INPAINT_GRAPH, CANVAS_OUTPAINT_GRAPH].includes(graph.id)) {
-        graph.edges.push({
-          source: {
-            node_id: currentLoraNodeId,
-            field: 'unet',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-            field: 'unet',
-          },
-        });
-      }
-
       graph.edges.push({
         source: {
           node_id: currentLoraNodeId,

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

@@ -5,12 +5,9 @@ import { filter, size } from 'lodash-es';
 import type { NonNullableGraph, SDXLLoraLoaderInvocation } from 'services/api/types';
 
 import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
   LORA_LOADER,
   NEGATIVE_CONDITIONING,
   POSITIVE_CONDITIONING,
-  SDXL_CANVAS_INPAINT_GRAPH,
-  SDXL_CANVAS_OUTPAINT_GRAPH,
   SDXL_MODEL_LOADER,
   SDXL_REFINER_INPAINT_CREATE_MASK,
   SEAMLESS,
@@ -163,19 +160,6 @@ export const addSDXLLoRAsToGraph = (
         },
       });
 
-      if (graph.id && [SDXL_CANVAS_INPAINT_GRAPH, SDXL_CANVAS_OUTPAINT_GRAPH].includes(graph.id)) {
-        graph.edges.push({
-          source: {
-            node_id: currentLoraNodeId,
-            field: 'unet',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-            field: 'unet',
-          },
-        });
-      }
-
       graph.edges.push({
         source: {
           node_id: currentLoraNodeId,

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

@@ -2,9 +2,6 @@ import type { RootState } from 'app/store/store';
 import type { NonNullableGraph, SeamlessModeInvocation } from 'services/api/types';
 
 import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CANVAS_INPAINT_GRAPH,
-  CANVAS_OUTPAINT_GRAPH,
   DENOISE_LATENTS,
   SDXL_CANVAS_IMAGE_TO_IMAGE_GRAPH,
   SDXL_CANVAS_INPAINT_GRAPH,
@@ -105,22 +102,4 @@ export const addSeamlessToLinearGraph = (
       },
     }
   );
-
-  if (
-    graph.id === CANVAS_INPAINT_GRAPH ||
-    graph.id === CANVAS_OUTPAINT_GRAPH ||
-    graph.id === SDXL_CANVAS_INPAINT_GRAPH ||
-    graph.id === SDXL_CANVAS_OUTPAINT_GRAPH
-  ) {
-    graph.edges.push({
-      source: {
-        node_id: SEAMLESS,
-        field: 'unet',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        field: 'unet',
-      },
-    });
-  }
 };

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

@@ -9,7 +9,7 @@ import type {
   T2IAdapterInvocation,
 } from 'services/api/types';
 
-import { CANVAS_COHERENCE_DENOISE_LATENTS, T2I_ADAPTER_COLLECT } from './constants';
+import { T2I_ADAPTER_COLLECT } from './constants';
 import { upsertMetadata } from './metadata';
 
 export const addT2IAdaptersToLinearGraph = (state: RootState, graph: NonNullableGraph, baseNodeId: string): void => {
@@ -33,15 +33,6 @@ export const addT2IAdaptersToLinearGraph = (state: RootState, graph: NonNullable
       },
     });
 
-    if (CANVAS_COHERENCE_DENOISE_LATENTS in graph.nodes) {
-      graph.edges.push({
-        source: { node_id: T2I_ADAPTER_COLLECT, field: 'collection' },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 't2i_adapter',
-        },
-      });
-    }
     const t2iAdapterMetdata: CoreMetadataInvocation['t2iAdapters'] = [];
 
     validT2IAdapters.forEach((t2iAdapter) => {

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

@@ -2,7 +2,6 @@ import type { RootState } from 'app/store/store';
 import type { NonNullableGraph } from 'services/api/types';
 
 import {
-  CANVAS_COHERENCE_INPAINT_CREATE_MASK,
   CANVAS_IMAGE_TO_IMAGE_GRAPH,
   CANVAS_INPAINT_GRAPH,
   CANVAS_OUTPAINT_GRAPH,
@@ -10,7 +9,6 @@ import {
   CANVAS_TEXT_TO_IMAGE_GRAPH,
   IMAGE_TO_IMAGE_GRAPH,
   IMAGE_TO_LATENTS,
-  INPAINT_CREATE_MASK,
   INPAINT_IMAGE,
   LATENTS_TO_IMAGE,
   MAIN_MODEL_LOADER,
@@ -32,7 +30,7 @@ export const addVAEToGraph = (
   graph: NonNullableGraph,
   modelLoaderNodeId: string = MAIN_MODEL_LOADER
 ): void => {
-  const { vae, canvasCoherenceMode, seamlessXAxis, seamlessYAxis } = state.generation;
+  const { vae, seamlessXAxis, seamlessYAxis } = state.generation;
   const { boundingBoxScaleMethod } = state.canvas;
   const { refinerModel } = state.sdxl;
 
@@ -121,16 +119,7 @@ export const addVAEToGraph = (
           field: 'vae',
         },
       },
-      {
+
-        source: {
-          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
-          field: 'vae',
-        },
-        destination: {
-          node_id: INPAINT_CREATE_MASK,
-          field: 'vae',
-        },
-      },
       {
         source: {
           node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
@@ -142,20 +131,6 @@ export const addVAEToGraph = (
         },
       }
     );
-
-    // Handle Coherence Mode
-    if (canvasCoherenceMode !== 'unmasked') {
-      graph.edges.push({
-        source: {
-          node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER,
-          field: 'vae',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'vae',
-        },
-      });
-    }
   }
 
   if (refinerModel) {

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

@@ -1,15 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
 import { getBoardField, getIsIntermediate } from 'features/nodes/util/graph/graphBuilderUtils';
-import type {
+import type { ImageDTO, ImageToLatentsInvocation, NoiseInvocation, NonNullableGraph } from 'services/api/types';
-  CreateDenoiseMaskInvocation,
-  ImageBlurInvocation,
-  ImageDTO,
-  ImageToLatentsInvocation,
-  MaskEdgeInvocation,
-  NoiseInvocation,
-  NonNullableGraph,
-} from 'services/api/types';
 
 import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
 import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -20,11 +12,6 @@ import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-  CANVAS_COHERENCE_MASK_EDGE,
-  CANVAS_COHERENCE_NOISE,
-  CANVAS_COHERENCE_NOISE_INCREMENT,
   CANVAS_INPAINT_GRAPH,
   CANVAS_OUTPUT,
   CLIP_SKIP,
@@ -35,7 +22,6 @@ import {
   INPAINT_IMAGE_RESIZE_UP,
   LATENTS_TO_IMAGE,
   MAIN_MODEL_LOADER,
-  MASK_BLUR,
   MASK_RESIZE_DOWN,
   MASK_RESIZE_UP,
   NEGATIVE_CONDITIONING,
@@ -65,14 +51,13 @@ export const buildCanvasInpaintGraph = (
     seed,
     vaePrecision,
     shouldUseCpuNoise,
-    maskBlur,
+
-    maskBlurMethod,
-    canvasCoherenceMode,
-    canvasCoherenceSteps,
-    canvasCoherenceStrength,
     clipSkip,
     seamlessXAxis,
     seamlessYAxis,
+    canvasCoherenceMode,
+    canvasCoherenceMinDenoise,
+    canvasCoherenceEdgeSize,
   } = state.generation;
 
   if (!model) {
@@ -121,13 +106,7 @@ export const buildCanvasInpaintGraph = (
         is_intermediate,
         prompt: negativePrompt,
       },
-      [MASK_BLUR]: {
+
-        type: 'img_blur',
-        id: MASK_BLUR,
-        is_intermediate,
-        radius: maskBlur,
-        blur_type: maskBlurMethod,
-      },
       [INPAINT_IMAGE]: {
         type: 'i2l',
         id: INPAINT_IMAGE,
@@ -142,10 +121,12 @@ export const buildCanvasInpaintGraph = (
         is_intermediate,
       },
       [INPAINT_CREATE_MASK]: {
-        type: 'create_denoise_mask',
+        type: 'create_gradient_mask',
         id: INPAINT_CREATE_MASK,
         is_intermediate,
-        fp32,
+        coherence_mode: canvasCoherenceMode,
+        minimum_denoise: canvasCoherenceMinDenoise,
+        edge_radius: canvasCoherenceEdgeSize,
       },
       [DENOISE_LATENTS]: {
         type: 'denoise_latents',
@@ -158,30 +139,6 @@ export const buildCanvasInpaintGraph = (
         denoising_start: 1 - strength,
         denoising_end: 1,
       },
-      [CANVAS_COHERENCE_NOISE]: {
-        type: 'noise',
-        id: CANVAS_COHERENCE_NOISE,
-        use_cpu,
-        seed: seed + 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_NOISE_INCREMENT]: {
-        type: 'add',
-        id: CANVAS_COHERENCE_NOISE_INCREMENT,
-        b: 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_DENOISE_LATENTS]: {
-        type: 'denoise_latents',
-        id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        is_intermediate,
-        steps: canvasCoherenceSteps,
-        cfg_scale: cfg_scale,
-        cfg_rescale_multiplier,
-        scheduler: scheduler,
-        denoising_start: 1 - canvasCoherenceStrength,
-        denoising_end: 1,
-      },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -281,17 +238,6 @@ export const buildCanvasInpaintGraph = (
           field: 'latents',
         },
       },
-      // Create Inpaint Mask
-      {
-        source: {
-          node_id: MASK_BLUR,
-          field: 'image',
-        },
-        destination: {
-          node_id: INPAINT_CREATE_MASK,
-          field: 'mask',
-        },
-      },
       {
         source: {
           node_id: INPAINT_CREATE_MASK,
@@ -302,61 +248,10 @@ export const buildCanvasInpaintGraph = (
           field: 'denoise_mask',
         },
       },
-      // Canvas Refine
-      {
-        source: {
-          node_id: modelLoaderNodeId,
-          field: 'unet',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'unet',
-        },
-      },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NEGATIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: CANVAS_COHERENCE_NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
-      {
-        source: {
-          node_id: DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'latents',
-        },
-      },
       // Decode Inpainted Latents To Image
       {
         source: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
+          node_id: DENOISE_LATENTS,
           field: 'latents',
         },
         destination: {
@@ -406,8 +301,6 @@ export const buildCanvasInpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -427,19 +320,9 @@ export const buildCanvasInpaintGraph = (
           node_id: MASK_RESIZE_UP,
           field: 'image',
         },
-        destination: {
-          node_id: MASK_BLUR,
-          field: 'image',
-        },
-      },
-      {
-        source: {
-          node_id: INPAINT_IMAGE_RESIZE_UP,
-          field: 'image',
-        },
         destination: {
           node_id: INPAINT_CREATE_MASK,
-          field: 'image',
+          field: 'mask',
         },
       },
       // Color Correct The Inpainted Result
@@ -465,7 +348,7 @@ export const buildCanvasInpaintGraph = (
       },
       {
         source: {
-          node_id: MASK_BLUR,
+          node_id: MASK_RESIZE_UP,
           field: 'image',
         },
         destination: {
@@ -488,21 +371,11 @@ export const buildCanvasInpaintGraph = (
     // Add Images To Nodes
     (graph.nodes[NOISE] as NoiseInvocation).width = width;
     (graph.nodes[NOISE] as NoiseInvocation).height = height;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = width;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = height;
 
     graph.nodes[INPAINT_IMAGE] = {
       ...(graph.nodes[INPAINT_IMAGE] as ImageToLatentsInvocation),
       image: canvasInitImage,
     };
-    graph.nodes[MASK_BLUR] = {
-      ...(graph.nodes[MASK_BLUR] as ImageBlurInvocation),
-      image: canvasMaskImage,
-    };
-    graph.nodes[INPAINT_CREATE_MASK] = {
-      ...(graph.nodes[INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
-      image: canvasInitImage,
-    };
 
     graph.edges.push(
       // Color Correct The Inpainted Result
@@ -518,7 +391,7 @@ export const buildCanvasInpaintGraph = (
       },
       {
         source: {
-          node_id: MASK_BLUR,
+          node_id: MASK_RESIZE_DOWN,
           field: 'image',
         },
         destination: {
@@ -529,112 +402,6 @@ export const buildCanvasInpaintGraph = (
     );
   }
 
-  // Handle Coherence Mode
-  if (canvasCoherenceMode !== 'unmasked') {
-    // Create Mask If Coherence Mode Is Not Full
-    graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-      type: 'create_denoise_mask',
-      id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-      is_intermediate,
-      fp32,
-    };
-
-    // Handle Image Input For Mask Creation
-    if (isUsingScaledDimensions) {
-      graph.edges.push({
-        source: {
-          node_id: INPAINT_IMAGE_RESIZE_UP,
-          field: 'image',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'image',
-        },
-      });
-    } else {
-      graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-        ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
-        image: canvasInitImage,
-      };
-    }
-
-    // Create Mask If Coherence Mode Is Mask
-    if (canvasCoherenceMode === 'mask') {
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-            field: 'mask',
-          },
-        });
-      } else {
-        graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-          ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
-          mask: canvasMaskImage,
-        };
-      }
-    }
-
-    // Create Mask Edge If Coherence Mode Is Edge
-    if (canvasCoherenceMode === 'edge') {
-      graph.nodes[CANVAS_COHERENCE_MASK_EDGE] = {
-        type: 'mask_edge',
-        id: CANVAS_COHERENCE_MASK_EDGE,
-        is_intermediate,
-        edge_blur: maskBlur,
-        edge_size: maskBlur * 2,
-        low_threshold: 100,
-        high_threshold: 200,
-      };
-
-      // Handle Scaled Dimensions For Mask Edge
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_MASK_EDGE,
-            field: 'image',
-          },
-        });
-      } else {
-        graph.nodes[CANVAS_COHERENCE_MASK_EDGE] = {
-          ...(graph.nodes[CANVAS_COHERENCE_MASK_EDGE] as MaskEdgeInvocation),
-          image: canvasMaskImage,
-        };
-      }
-
-      graph.edges.push({
-        source: {
-          node_id: CANVAS_COHERENCE_MASK_EDGE,
-          field: 'image',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'mask',
-        },
-      });
-    }
-
-    // Plug Denoise Mask To Coherence Denoise Latents
-    graph.edges.push({
-      source: {
-        node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-        field: 'denoise_mask',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        field: 'denoise_mask',
-      },
-    });
-  }
-
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
     addSeamlessToLinearGraph(state, graph, modelLoaderNodeId);

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

@@ -19,11 +19,6 @@ import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-  CANVAS_COHERENCE_MASK_EDGE,
-  CANVAS_COHERENCE_NOISE,
-  CANVAS_COHERENCE_NOISE_INCREMENT,
   CANVAS_OUTPAINT_GRAPH,
   CANVAS_OUTPUT,
   CLIP_SKIP,
@@ -67,16 +62,15 @@ export const buildCanvasOutpaintGraph = (
     seed,
     vaePrecision,
     shouldUseCpuNoise,
-    maskBlur,
-    canvasCoherenceMode,
-    canvasCoherenceSteps,
-    canvasCoherenceStrength,
     infillTileSize,
     infillPatchmatchDownscaleSize,
     infillMethod,
     clipSkip,
     seamlessXAxis,
     seamlessYAxis,
+    canvasCoherenceMode,
+    canvasCoherenceMinDenoise,
+    canvasCoherenceEdgeSize,
   } = state.generation;
 
   if (!model) {
@@ -151,10 +145,12 @@ export const buildCanvasOutpaintGraph = (
         is_intermediate,
       },
       [INPAINT_CREATE_MASK]: {
-        type: 'create_denoise_mask',
+        type: 'create_gradient_mask',
         id: INPAINT_CREATE_MASK,
         is_intermediate,
-        fp32,
+        coherence_mode: canvasCoherenceMode,
+        minimum_denoise: canvasCoherenceMinDenoise,
+        edge_radius: canvasCoherenceEdgeSize,
       },
       [DENOISE_LATENTS]: {
         type: 'denoise_latents',
@@ -167,30 +163,7 @@ export const buildCanvasOutpaintGraph = (
         denoising_start: 1 - strength,
         denoising_end: 1,
       },
-      [CANVAS_COHERENCE_NOISE]: {
+
-        type: 'noise',
-        id: CANVAS_COHERENCE_NOISE,
-        use_cpu,
-        seed: seed + 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_NOISE_INCREMENT]: {
-        type: 'add',
-        id: CANVAS_COHERENCE_NOISE_INCREMENT,
-        b: 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_DENOISE_LATENTS]: {
-        type: 'denoise_latents',
-        id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        is_intermediate,
-        steps: canvasCoherenceSteps,
-        cfg_scale: cfg_scale,
-        cfg_rescale_multiplier,
-        scheduler: scheduler,
-        denoising_start: 1 - canvasCoherenceStrength,
-        denoising_end: 1,
-      },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -332,73 +305,12 @@ export const buildCanvasOutpaintGraph = (
           field: 'denoise_mask',
         },
       },
-      // Canvas Refine
+
-      {
-        source: {
-          node_id: modelLoaderNodeId,
-          field: 'unet',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'unet',
-        },
-      },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NEGATIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: CANVAS_COHERENCE_NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
       {
         source: {
           node_id: DENOISE_LATENTS,
           field: 'latents',
         },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: INPAINT_INFILL,
-          field: 'image',
-        },
-        destination: {
-          node_id: INPAINT_CREATE_MASK,
-          field: 'image',
-        },
-      },
-      // Decode the result from Inpaint
-      {
-        source: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'latents',
-        },
         destination: {
           node_id: LATENTS_TO_IMAGE,
           field: 'latents',
@@ -487,8 +399,6 @@ export const buildCanvasOutpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -503,7 +413,7 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
       },
-      // Take combined mask and resize and then blur
+      // Take combined mask and resize
       {
         source: {
           node_id: MASK_COMBINE,
@@ -514,7 +424,6 @@ export const buildCanvasOutpaintGraph = (
           field: 'image',
         },
       },
-
       // Resize Results Down
       {
         source: {
@@ -587,8 +496,6 @@ export const buildCanvasOutpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = width;
     (graph.nodes[NOISE] as NoiseInvocation).height = height;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = width;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = height;
 
     graph.nodes[INPAINT_IMAGE] = {
       ...(graph.nodes[INPAINT_IMAGE] as ImageToLatentsInvocation),
@@ -630,115 +537,6 @@ export const buildCanvasOutpaintGraph = (
     );
   }
 
-  // Handle Coherence Mode
-  if (canvasCoherenceMode !== 'unmasked') {
-    graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-      type: 'create_denoise_mask',
-      id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-      is_intermediate,
-      fp32,
-    };
-
-    // Handle Image Input For Mask Creation
-    graph.edges.push({
-      source: {
-        node_id: INPAINT_INFILL,
-        field: 'image',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-        field: 'image',
-      },
-    });
-
-    // Create Mask If Coherence Mode Is Mask
-    if (canvasCoherenceMode === 'mask') {
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-            field: 'mask',
-          },
-        });
-      } else {
-        graph.edges.push({
-          source: {
-            node_id: MASK_COMBINE,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-            field: 'mask',
-          },
-        });
-      }
-    }
-
-    if (canvasCoherenceMode === 'edge') {
-      graph.nodes[CANVAS_COHERENCE_MASK_EDGE] = {
-        type: 'mask_edge',
-        id: CANVAS_COHERENCE_MASK_EDGE,
-        is_intermediate,
-        edge_blur: maskBlur,
-        edge_size: maskBlur * 2,
-        low_threshold: 100,
-        high_threshold: 200,
-      };
-
-      // Handle Scaled Dimensions For Mask Edge
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_MASK_EDGE,
-            field: 'image',
-          },
-        });
-      } else {
-        graph.edges.push({
-          source: {
-            node_id: MASK_COMBINE,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_MASK_EDGE,
-            field: 'image',
-          },
-        });
-      }
-
-      graph.edges.push({
-        source: {
-          node_id: CANVAS_COHERENCE_MASK_EDGE,
-          field: 'image',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'mask',
-        },
-      });
-    }
-
-    // Plug Denoise Mask To Coherence Denoise Latents
-    graph.edges.push({
-      source: {
-        node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-        field: 'denoise_mask',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        field: 'denoise_mask',
-      },
-    });
-  }
-
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
     addSeamlessToLinearGraph(state, graph, modelLoaderNodeId);

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

@@ -2,10 +2,8 @@ import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
 import type {
   CreateDenoiseMaskInvocation,
-  ImageBlurInvocation,
   ImageDTO,
   ImageToLatentsInvocation,
-  MaskEdgeInvocation,
   NoiseInvocation,
   NonNullableGraph,
 } from 'services/api/types';
@@ -20,18 +18,12 @@ import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-  CANVAS_COHERENCE_MASK_EDGE,
-  CANVAS_COHERENCE_NOISE,
-  CANVAS_COHERENCE_NOISE_INCREMENT,
   CANVAS_OUTPUT,
   INPAINT_CREATE_MASK,
   INPAINT_IMAGE,
   INPAINT_IMAGE_RESIZE_DOWN,
   INPAINT_IMAGE_RESIZE_UP,
   LATENTS_TO_IMAGE,
-  MASK_BLUR,
   MASK_RESIZE_DOWN,
   MASK_RESIZE_UP,
   NEGATIVE_CONDITIONING,
@@ -65,11 +57,9 @@ export const buildCanvasSDXLInpaintGraph = (
     seed,
     vaePrecision,
     shouldUseCpuNoise,
-    maskBlur,
-    maskBlurMethod,
     canvasCoherenceMode,
-    canvasCoherenceSteps,
+    canvasCoherenceMinDenoise,
-    canvasCoherenceStrength,
+    canvasCoherenceEdgeSize,
     seamlessXAxis,
     seamlessYAxis,
     img2imgStrength: strength,
@@ -119,13 +109,6 @@ export const buildCanvasSDXLInpaintGraph = (
         prompt: negativePrompt,
         style: negativeStylePrompt,
       },
-      [MASK_BLUR]: {
-        type: 'img_blur',
-        id: MASK_BLUR,
-        is_intermediate,
-        radius: maskBlur,
-        blur_type: maskBlurMethod,
-      },
       [INPAINT_IMAGE]: {
         type: 'i2l',
         id: INPAINT_IMAGE,
@@ -140,10 +123,12 @@ export const buildCanvasSDXLInpaintGraph = (
         is_intermediate,
       },
       [INPAINT_CREATE_MASK]: {
-        type: 'create_denoise_mask',
+        type: 'create_gradient_mask',
         id: INPAINT_CREATE_MASK,
         is_intermediate,
-        fp32,
+        coherence_mode: canvasCoherenceMode,
+        minimum_denoise: canvasCoherenceMinDenoise,
+        edge_radius: canvasCoherenceEdgeSize,
       },
       [SDXL_DENOISE_LATENTS]: {
         type: 'denoise_latents',
@@ -156,30 +141,6 @@ export const buildCanvasSDXLInpaintGraph = (
         denoising_start: refinerModel ? Math.min(refinerStart, 1 - strength) : 1 - strength,
         denoising_end: refinerModel ? refinerStart : 1,
       },
-      [CANVAS_COHERENCE_NOISE]: {
-        type: 'noise',
-        id: CANVAS_COHERENCE_NOISE,
-        use_cpu,
-        seed: seed + 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_NOISE_INCREMENT]: {
-        type: 'add',
-        id: CANVAS_COHERENCE_NOISE_INCREMENT,
-        b: 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_DENOISE_LATENTS]: {
-        type: 'denoise_latents',
-        id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        is_intermediate,
-        steps: canvasCoherenceSteps,
-        cfg_scale: cfg_scale,
-        cfg_rescale_multiplier,
-        scheduler: scheduler,
-        denoising_start: 1 - canvasCoherenceStrength,
-        denoising_end: 1,
-      },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -288,17 +249,6 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'latents',
         },
       },
-      // Create Inpaint Mask
-      {
-        source: {
-          node_id: MASK_BLUR,
-          field: 'image',
-        },
-        destination: {
-          node_id: INPAINT_CREATE_MASK,
-          field: 'mask',
-        },
-      },
       {
         source: {
           node_id: INPAINT_CREATE_MASK,
@@ -309,61 +259,10 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'denoise_mask',
         },
       },
-      // Canvas Refine
-      {
-        source: {
-          node_id: modelLoaderNodeId,
-          field: 'unet',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'unet',
-        },
-      },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NEGATIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: CANVAS_COHERENCE_NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
-      {
-        source: {
-          node_id: SDXL_DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'latents',
-        },
-      },
       // Decode Inpainted Latents To Image
       {
         source: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
+          node_id: SDXL_DENOISE_LATENTS,
           field: 'latents',
         },
         destination: {
@@ -413,8 +312,6 @@ export const buildCanvasSDXLInpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -434,19 +331,9 @@ export const buildCanvasSDXLInpaintGraph = (
           node_id: MASK_RESIZE_UP,
           field: 'image',
         },
-        destination: {
-          node_id: MASK_BLUR,
-          field: 'image',
-        },
-      },
-      {
-        source: {
-          node_id: INPAINT_IMAGE_RESIZE_UP,
-          field: 'image',
-        },
         destination: {
           node_id: INPAINT_CREATE_MASK,
-          field: 'image',
+          field: 'mask',
         },
       },
       // Color Correct The Inpainted Result
@@ -472,7 +359,7 @@ export const buildCanvasSDXLInpaintGraph = (
       },
       {
         source: {
-          node_id: MASK_BLUR,
+          node_id: MASK_RESIZE_UP,
           field: 'image',
         },
         destination: {
@@ -495,17 +382,11 @@ export const buildCanvasSDXLInpaintGraph = (
     // Add Images To Nodes
     (graph.nodes[NOISE] as NoiseInvocation).width = width;
     (graph.nodes[NOISE] as NoiseInvocation).height = height;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = width;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = height;
 
     graph.nodes[INPAINT_IMAGE] = {
       ...(graph.nodes[INPAINT_IMAGE] as ImageToLatentsInvocation),
       image: canvasInitImage,
     };
-    graph.nodes[MASK_BLUR] = {
-      ...(graph.nodes[MASK_BLUR] as ImageBlurInvocation),
-      image: canvasMaskImage,
-    };
     graph.nodes[INPAINT_CREATE_MASK] = {
       ...(graph.nodes[INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
       image: canvasInitImage,
@@ -525,7 +406,7 @@ export const buildCanvasSDXLInpaintGraph = (
       },
       {
         source: {
-          node_id: MASK_BLUR,
+          node_id: MASK_RESIZE_DOWN,
           field: 'image',
         },
         destination: {
@@ -536,112 +417,6 @@ export const buildCanvasSDXLInpaintGraph = (
     );
   }
 
-  // Handle Coherence Mode
-  if (canvasCoherenceMode !== 'unmasked') {
-    // Create Mask If Coherence Mode Is Not Full
-    graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-      type: 'create_denoise_mask',
-      id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-      is_intermediate,
-      fp32,
-    };
-
-    // Handle Image Input For Mask Creation
-    if (isUsingScaledDimensions) {
-      graph.edges.push({
-        source: {
-          node_id: INPAINT_IMAGE_RESIZE_UP,
-          field: 'image',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'image',
-        },
-      });
-    } else {
-      graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-        ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
-        image: canvasInitImage,
-      };
-    }
-
-    // Create Mask If Coherence Mode Is Mask
-    if (canvasCoherenceMode === 'mask') {
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-            field: 'mask',
-          },
-        });
-      } else {
-        graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-          ...(graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] as CreateDenoiseMaskInvocation),
-          mask: canvasMaskImage,
-        };
-      }
-    }
-
-    // Create Mask Edge If Coherence Mode Is Edge
-    if (canvasCoherenceMode === 'edge') {
-      graph.nodes[CANVAS_COHERENCE_MASK_EDGE] = {
-        type: 'mask_edge',
-        id: CANVAS_COHERENCE_MASK_EDGE,
-        is_intermediate,
-        edge_blur: maskBlur,
-        edge_size: maskBlur * 2,
-        low_threshold: 100,
-        high_threshold: 200,
-      };
-
-      // Handle Scaled Dimensions For Mask Edge
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_MASK_EDGE,
-            field: 'image',
-          },
-        });
-      } else {
-        graph.nodes[CANVAS_COHERENCE_MASK_EDGE] = {
-          ...(graph.nodes[CANVAS_COHERENCE_MASK_EDGE] as MaskEdgeInvocation),
-          image: canvasMaskImage,
-        };
-      }
-
-      graph.edges.push({
-        source: {
-          node_id: CANVAS_COHERENCE_MASK_EDGE,
-          field: 'image',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'mask',
-        },
-      });
-    }
-
-    // Plug Denoise Mask To Coherence Denoise Latents
-    graph.edges.push({
-      source: {
-        node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-        field: 'denoise_mask',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        field: 'denoise_mask',
-      },
-    });
-  }
-
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
     addSeamlessToLinearGraph(state, graph, modelLoaderNodeId);
@@ -650,14 +425,7 @@ export const buildCanvasSDXLInpaintGraph = (
 
   // Add Refiner if enabled
   if (refinerModel) {
-    addSDXLRefinerToGraph(
+    addSDXLRefinerToGraph(state, graph, SDXL_DENOISE_LATENTS, modelLoaderNodeId, canvasInitImage, canvasMaskImage);
-      state,
-      graph,
-      CANVAS_COHERENCE_DENOISE_LATENTS,
-      modelLoaderNodeId,
-      canvasInitImage,
-      canvasMaskImage
-    );
     if (seamlessXAxis || seamlessYAxis) {
       modelLoaderNodeId = SDXL_REFINER_SEAMLESS;
     }

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

@@ -19,11 +19,6 @@ import { addT2IAdaptersToLinearGraph } from './addT2IAdapterToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
-  CANVAS_COHERENCE_DENOISE_LATENTS,
-  CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-  CANVAS_COHERENCE_MASK_EDGE,
-  CANVAS_COHERENCE_NOISE,
-  CANVAS_COHERENCE_NOISE_INCREMENT,
   CANVAS_OUTPUT,
   INPAINT_CREATE_MASK,
   INPAINT_IMAGE,
@@ -67,10 +62,9 @@ export const buildCanvasSDXLOutpaintGraph = (
     seed,
     vaePrecision,
     shouldUseCpuNoise,
-    maskBlur,
     canvasCoherenceMode,
-    canvasCoherenceSteps,
+    canvasCoherenceMinDenoise,
-    canvasCoherenceStrength,
+    canvasCoherenceEdgeSize,
     infillTileSize,
     infillPatchmatchDownscaleSize,
     infillMethod,
@@ -149,10 +143,12 @@ export const buildCanvasSDXLOutpaintGraph = (
         is_intermediate,
       },
       [INPAINT_CREATE_MASK]: {
-        type: 'create_denoise_mask',
+        type: 'create_gradient_mask',
         id: INPAINT_CREATE_MASK,
         is_intermediate,
-        fp32,
+        coherence_mode: canvasCoherenceMode,
+        edge_radius: canvasCoherenceEdgeSize,
+        minimum_denoise: canvasCoherenceMinDenoise,
       },
       [SDXL_DENOISE_LATENTS]: {
         type: 'denoise_latents',
@@ -165,30 +161,6 @@ export const buildCanvasSDXLOutpaintGraph = (
         denoising_start: refinerModel ? Math.min(refinerStart, 1 - strength) : 1 - strength,
         denoising_end: refinerModel ? refinerStart : 1,
       },
-      [CANVAS_COHERENCE_NOISE]: {
-        type: 'noise',
-        id: CANVAS_COHERENCE_NOISE,
-        use_cpu,
-        seed: seed + 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_NOISE_INCREMENT]: {
-        type: 'add',
-        id: CANVAS_COHERENCE_NOISE_INCREMENT,
-        b: 1,
-        is_intermediate,
-      },
-      [CANVAS_COHERENCE_DENOISE_LATENTS]: {
-        type: 'denoise_latents',
-        id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        is_intermediate,
-        steps: canvasCoherenceSteps,
-        cfg_scale: cfg_scale,
-        cfg_rescale_multiplier,
-        scheduler: scheduler,
-        denoising_start: 1 - canvasCoherenceStrength,
-        denoising_end: 1,
-      },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',
         id: LATENTS_TO_IMAGE,
@@ -339,71 +311,10 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'denoise_mask',
         },
       },
-      // Canvas Refine
-      {
-        source: {
-          node_id: modelLoaderNodeId,
-          field: 'unet',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'unet',
-        },
-      },
-      {
-        source: {
-          node_id: POSITIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'positive_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: NEGATIVE_CONDITIONING,
-          field: 'conditioning',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'negative_conditioning',
-        },
-      },
-      {
-        source: {
-          node_id: CANVAS_COHERENCE_NOISE,
-          field: 'noise',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'noise',
-        },
-      },
-      {
-        source: {
-          node_id: SDXL_DENOISE_LATENTS,
-          field: 'latents',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-          field: 'latents',
-        },
-      },
-      {
-        source: {
-          node_id: INPAINT_INFILL,
-          field: 'image',
-        },
-        destination: {
-          node_id: INPAINT_CREATE_MASK,
-          field: 'image',
-        },
-      },
       // Decode inpainted latents to image
       {
         source: {
-          node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
+          node_id: SDXL_DENOISE_LATENTS,
           field: 'latents',
         },
         destination: {
@@ -494,8 +405,6 @@ export const buildCanvasSDXLOutpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = scaledWidth;
     (graph.nodes[NOISE] as NoiseInvocation).height = scaledHeight;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = scaledWidth;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = scaledHeight;
 
     // Connect Nodes
     graph.edges.push(
@@ -595,8 +504,6 @@ export const buildCanvasSDXLOutpaintGraph = (
 
     (graph.nodes[NOISE] as NoiseInvocation).width = width;
     (graph.nodes[NOISE] as NoiseInvocation).height = height;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).width = width;
-    (graph.nodes[CANVAS_COHERENCE_NOISE] as NoiseInvocation).height = height;
 
     graph.nodes[INPAINT_IMAGE] = {
       ...(graph.nodes[INPAINT_IMAGE] as ImageToLatentsInvocation),
@@ -638,115 +545,6 @@ export const buildCanvasSDXLOutpaintGraph = (
     );
   }
 
-  // Handle Coherence Mode
-  if (canvasCoherenceMode !== 'unmasked') {
-    graph.nodes[CANVAS_COHERENCE_INPAINT_CREATE_MASK] = {
-      type: 'create_denoise_mask',
-      id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-      is_intermediate,
-      fp32,
-    };
-
-    // Handle Image Input For Mask Creation
-    graph.edges.push({
-      source: {
-        node_id: INPAINT_INFILL,
-        field: 'image',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-        field: 'image',
-      },
-    });
-
-    // Create Mask If Coherence Mode Is Mask
-    if (canvasCoherenceMode === 'mask') {
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-            field: 'mask',
-          },
-        });
-      } else {
-        graph.edges.push({
-          source: {
-            node_id: MASK_COMBINE,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-            field: 'mask',
-          },
-        });
-      }
-    }
-
-    if (canvasCoherenceMode === 'edge') {
-      graph.nodes[CANVAS_COHERENCE_MASK_EDGE] = {
-        type: 'mask_edge',
-        id: CANVAS_COHERENCE_MASK_EDGE,
-        is_intermediate,
-        edge_blur: maskBlur,
-        edge_size: maskBlur * 2,
-        low_threshold: 100,
-        high_threshold: 200,
-      };
-
-      // Handle Scaled Dimensions For Mask Edge
-      if (isUsingScaledDimensions) {
-        graph.edges.push({
-          source: {
-            node_id: MASK_RESIZE_UP,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_MASK_EDGE,
-            field: 'image',
-          },
-        });
-      } else {
-        graph.edges.push({
-          source: {
-            node_id: MASK_COMBINE,
-            field: 'image',
-          },
-          destination: {
-            node_id: CANVAS_COHERENCE_MASK_EDGE,
-            field: 'image',
-          },
-        });
-      }
-
-      graph.edges.push({
-        source: {
-          node_id: CANVAS_COHERENCE_MASK_EDGE,
-          field: 'image',
-        },
-        destination: {
-          node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-          field: 'mask',
-        },
-      });
-    }
-
-    // Plug Denoise Mask To Coherence Denoise Latents
-    graph.edges.push({
-      source: {
-        node_id: CANVAS_COHERENCE_INPAINT_CREATE_MASK,
-        field: 'denoise_mask',
-      },
-      destination: {
-        node_id: CANVAS_COHERENCE_DENOISE_LATENTS,
-        field: 'denoise_mask',
-      },
-    });
-  }
-
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
     addSeamlessToLinearGraph(state, graph, modelLoaderNodeId);
@@ -755,7 +553,7 @@ export const buildCanvasSDXLOutpaintGraph = (
 
   // Add Refiner if enabled
   if (refinerModel) {
-    addSDXLRefinerToGraph(state, graph, CANVAS_COHERENCE_DENOISE_LATENTS, modelLoaderNodeId, canvasInitImage);
+    addSDXLRefinerToGraph(state, graph, SDXL_DENOISE_LATENTS, modelLoaderNodeId, canvasInitImage);
     if (seamlessXAxis || seamlessYAxis) {
       modelLoaderNodeId = SDXL_REFINER_SEAMLESS;
     }

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceEdgeSize.tsx

@@ -1,41 +1,41 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
+import { setCanvasCoherenceEdgeSize } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const ParamCanvasCoherenceSteps = () => {
+const ParamCanvasCoherenceEdgeSize = () => {
   const dispatch = useAppDispatch();
-  const canvasCoherenceSteps = useAppSelector((s) => s.generation.canvasCoherenceSteps);
+  const canvasCoherenceEdgeSize = useAppSelector((s) => s.generation.canvasCoherenceEdgeSize);
-  const initial = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.initial);
+  const initial = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.initial);
-  const sliderMin = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.sliderMin);
+  const sliderMin = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.sliderMin);
-  const sliderMax = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.sliderMax);
+  const sliderMax = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.sliderMax);
-  const numberInputMin = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.numberInputMin);
+  const numberInputMin = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.numberInputMin);
-  const numberInputMax = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.numberInputMax);
+  const numberInputMax = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.numberInputMax);
-  const coarseStep = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.coarseStep);
+  const coarseStep = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.coarseStep);
-  const fineStep = useAppSelector((s) => s.config.sd.canvasCoherenceSteps.fineStep);
+  const fineStep = useAppSelector((s) => s.config.sd.canvasCoherenceEdgeSize.fineStep);
 
   const { t } = useTranslation();
 
   const handleChange = useCallback(
     (v: number) => {
-      dispatch(setCanvasCoherenceSteps(v));
+      dispatch(setCanvasCoherenceEdgeSize(v));
     },
     [dispatch]
   );
 
   return (
     <FormControl>
-      <InformationalPopover feature="compositingCoherenceSteps">
+      <InformationalPopover feature="compositingCoherenceEdgeSize">
-        <FormLabel>{t('parameters.coherenceSteps')}</FormLabel>
+        <FormLabel>{t('parameters.coherenceEdgeSize')}</FormLabel>
       </InformationalPopover>
       <CompositeSlider
         min={sliderMin}
         max={sliderMax}
         step={coarseStep}
         fineStep={fineStep}
-        value={canvasCoherenceSteps}
+        value={canvasCoherenceEdgeSize}
         defaultValue={initial}
         onChange={handleChange}
         marks
@@ -45,7 +45,7 @@ const ParamCanvasCoherenceSteps = () => {
         max={numberInputMax}
         step={coarseStep}
         fineStep={fineStep}
-        value={canvasCoherenceSteps}
+        value={canvasCoherenceEdgeSize}
         defaultValue={initial}
         onChange={handleChange}
       />
@@ -53,4 +53,4 @@ const ParamCanvasCoherenceSteps = () => {
   );
 };
 
-export default memo(ParamCanvasCoherenceSteps);
+export default memo(ParamCanvasCoherenceEdgeSize);

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMinDenoise.tsx

@@ -1,45 +1,45 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
+import { setCanvasCoherenceMinDenoise } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const ParamCanvasCoherenceStrength = () => {
+const ParamCanvasCoherenceMinDenoise = () => {
   const dispatch = useAppDispatch();
-  const canvasCoherenceStrength = useAppSelector((s) => s.generation.canvasCoherenceStrength);
+  const canvasCoherenceMinDenoise = useAppSelector((s) => s.generation.canvasCoherenceMinDenoise);
   const { t } = useTranslation();
 
   const handleChange = useCallback(
     (v: number) => {
-      dispatch(setCanvasCoherenceStrength(v));
+      dispatch(setCanvasCoherenceMinDenoise(v));
     },
     [dispatch]
   );
 
   return (
     <FormControl>
-      <InformationalPopover feature="compositingStrength">
+      <InformationalPopover feature="compositingCoherenceMinDenoise">
-        <FormLabel>{t('parameters.coherenceStrength')}</FormLabel>
+        <FormLabel>{t('parameters.coherenceMinDenoise')}</FormLabel>
       </InformationalPopover>
       <CompositeSlider
         min={0}
         max={1}
         step={0.01}
-        value={canvasCoherenceStrength}
+        value={canvasCoherenceMinDenoise}
-        defaultValue={0.75}
+        defaultValue={0}
         onChange={handleChange}
       />
       <CompositeNumberInput
         min={0}
         max={1}
         step={0.01}
-        value={canvasCoherenceStrength}
+        value={canvasCoherenceMinDenoise}
-        defaultValue={0.75}
+        defaultValue={0}
         onChange={handleChange}
       />
     </FormControl>
   );
 };
 
-export default memo(ParamCanvasCoherenceStrength);
+export default memo(ParamCanvasCoherenceMinDenoise);

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx

@@ -14,9 +14,9 @@ const ParamCanvasCoherenceMode = () => {
 
   const options = useMemo<ComboboxOption[]>(
     () => [
-      { label: t('parameters.unmasked'), value: 'unmasked' },
+      { label: t('unifiedCanvas.coherenceModeGaussianBlur'), value: 'Gaussian Blur' },
-      { label: t('unifiedCanvas.mask'), value: 'mask' },
+      { label: t('unifiedCanvas.coherenceModeBoxBlur'), value: 'Box Blur' },
-      { label: t('parameters.maskEdge'), value: 'edge' },
+      { label: t('unifiedCanvas.coherenceModeStaged'), value: 'Staged' },
     ],
     [t]
   );

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -38,9 +38,9 @@ export const initialGenerationState: GenerationState = {
   scheduler: 'euler',
   maskBlur: 16,
   maskBlurMethod: 'box',
-  canvasCoherenceMode: 'unmasked',
+  canvasCoherenceMode: 'Gaussian Blur',
-  canvasCoherenceSteps: 20,
+  canvasCoherenceMinDenoise: 0,
-  canvasCoherenceStrength: 0.3,
+  canvasCoherenceEdgeSize: 16,
   seed: 0,
   shouldFitToWidthHeight: true,
   shouldRandomizeSeed: true,
@@ -124,11 +124,11 @@ export const generationSlice = createSlice({
     setCanvasCoherenceMode: (state, action: PayloadAction<ParameterCanvasCoherenceMode>) => {
       state.canvasCoherenceMode = action.payload;
     },
-    setCanvasCoherenceSteps: (state, action: PayloadAction<number>) => {
+    setCanvasCoherenceEdgeSize: (state, action: PayloadAction<number>) => {
-      state.canvasCoherenceSteps = action.payload;
+      state.canvasCoherenceEdgeSize = action.payload;
     },
-    setCanvasCoherenceStrength: (state, action: PayloadAction<number>) => {
+    setCanvasCoherenceMinDenoise: (state, action: PayloadAction<number>) => {
-      state.canvasCoherenceStrength = action.payload;
+      state.canvasCoherenceMinDenoise = action.payload;
     },
     setInfillMethod: (state, action: PayloadAction<string>) => {
       state.infillMethod = action.payload;
@@ -274,8 +274,8 @@ export const {
   setMaskBlur,
   setMaskBlurMethod,
   setCanvasCoherenceMode,
-  setCanvasCoherenceSteps,
+  setCanvasCoherenceEdgeSize,
-  setCanvasCoherenceStrength,
+  setCanvasCoherenceMinDenoise,
   setSeed,
   setShouldFitToWidthHeight,
   setShouldRandomizeSeed,

invokeai/frontend/web/src/features/parameters/store/types.ts

@@ -33,8 +33,8 @@ export interface GenerationState {
   maskBlur: number;
   maskBlurMethod: ParameterMaskBlurMethod;
   canvasCoherenceMode: ParameterCanvasCoherenceMode;
-  canvasCoherenceSteps: number;
+  canvasCoherenceMinDenoise: ParameterStrength;
-  canvasCoherenceStrength: ParameterStrength;
+  canvasCoherenceEdgeSize: number;
   seed: ParameterSeed;
   shouldFitToWidthHeight: boolean;
   shouldRandomizeSeed: boolean;

invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts

@@ -213,7 +213,7 @@ export const isParameterMaskBlurMethod = (val: unknown): val is ParameterMaskBlu
 // #endregion
 
 // #region Canvas Coherence Mode
-export const zParameterCanvasCoherenceMode = z.enum(['unmasked', 'mask', 'edge']);
+export const zParameterCanvasCoherenceMode = z.enum(['Gaussian Blur', 'Box Blur', 'Staged']);
 export type ParameterCanvasCoherenceMode = z.infer<typeof zParameterCanvasCoherenceMode>;
 export const isParameterCanvasCoherenceMode = (val: unknown): val is ParameterCanvasCoherenceMode =>
   zParameterCanvasCoherenceMode.safeParse(val).success;

invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx

@@ -9,11 +9,9 @@ import {
   TabPanels,
   Tabs,
 } from '@invoke-ai/ui-library';
+import ParamCanvasCoherenceEdgeSize from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceEdgeSize';
+import ParamCanvasCoherenceMinDenoise from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMinDenoise';
 import ParamCanvasCoherenceMode from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode';
-import ParamCanvasCoherenceSteps from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps';
-import ParamCanvasCoherenceStrength from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength';
-import ParamMaskBlur from 'features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur';
-import ParamMaskBlurMethod from 'features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod';
 import ParamInfillMethod from 'features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod';
 import ParamInfillOptions from 'features/parameters/components/Canvas/InfillAndScaling/ParamInfillOptions';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
@@ -43,10 +41,10 @@ export const CompositingSettingsAccordion = memo(() => {
             <Flex gap={4} p={4} flexDir="column">
               <FormControlGroup formLabelProps={coherenceLabelProps}>
                 <ParamCanvasCoherenceMode />
-                <ParamCanvasCoherenceSteps />
+                <ParamCanvasCoherenceEdgeSize />
-                <ParamCanvasCoherenceStrength />
+                <ParamCanvasCoherenceMinDenoise />
-                <ParamMaskBlurMethod />
+                {/* <ParamMaskBlurMethod />
-                <ParamMaskBlur />
+                <ParamMaskBlur /> */}
               </FormControlGroup>
             </Flex>
           </TabPanel>

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -86,14 +86,14 @@ export const initialConfigState: AppConfig = {
       fineStep: 0.01,
       coarseStep: 0.05,
     },
-    canvasCoherenceSteps: {
+    canvasCoherenceEdgeSize: {
-      initial: 20,
+      initial: 16,
-      sliderMin: 1,
+      sliderMin: 16,
-      sliderMax: 100,
+      sliderMax: 512,
-      numberInputMin: 1,
+      numberInputMin: 16,
-      numberInputMax: 999,
+      numberInputMax: 1024,
-      fineStep: 1,
+      fineStep: 8,
-      coarseStep: 1,
+      coarseStep: 16,
     },
     cfgRescaleMultiplier: {
       initial: 0,