(feat): Add Seam Painting to Canvas (1.x, 2.x & SDXL w/ Refiner) (#4292)

## What type of PR is this? (check all applicable) - [x] Feature ## Have you discussed this change with the InvokeAI team? - [x] Yes ## Description PR to add Seam Painting back to the Canvas. ## TODO Later While the graph works as intended, it has become extremely large and complex. I don't know if there's a simpler way to do this. Maybe there is but there's soo many connections and visualizing the graph in my head is extremely difficult. We might need to create some kind of tooling for this. Coz it's going going to get crazier. But well works for now.
2024-08-30 20:32:17 +00:00 · 2023-08-17 21:24:39 +12:00 · 2023-08-17 21:24:39 +12:00 · 89b82b3dc4
commit 89b82b3dc4
parent 226409107b 8923201fdf
13 changed files with 758 additions and 19 deletions
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@ -506,10 +506,14 @@
        "maskAdjustmentsHeader": "Mask Adjustments",
        "maskBlur": "Mask Blur",
        "maskBlurMethod": "Mask Blur Method",
+        "seamPaintingHeader": "Seam Painting",
        "seamSize": "Seam Size",
        "seamBlur": "Seam Blur",
-        "seamStrength": "Seam Strength",
        "seamSteps": "Seam Steps",
+        "seamStrength": "Seam Strength",
+        "seamThreshold": "Seam Threshold",
+        "seamLowThreshold": "Low",
+        "seamHighThreshold": "High",
        "scaleBeforeProcessing": "Scale Before Processing",
        "scaledWidth": "Scaled W",
        "scaledHeight": "Scaled H",
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts
@ -32,6 +32,7 @@ import {
  MAIN_MODEL_LOADER,
  MASK_BLUR,
  MASK_COMBINE,
+  MASK_EDGE,
  MASK_FROM_ALPHA,
  MASK_RESIZE_DOWN,
  MASK_RESIZE_UP,
@ -40,6 +41,10 @@ import {
  POSITIVE_CONDITIONING,
  RANDOM_INT,
  RANGE_OF_SIZE,
+  SEAM_FIX_DENOISE_LATENTS,
+  SEAM_MASK_COMBINE,
+  SEAM_MASK_RESIZE_DOWN,
+  SEAM_MASK_RESIZE_UP,
 } from './constants';

 /**
@ -67,6 +72,12 @@ export const buildCanvasOutpaintGraph = (
    shouldUseCpuNoise,
    maskBlur,
    maskBlurMethod,
+    seamSize,
+    seamBlur,
+    seamSteps,
+    seamStrength,
+    seamLowThreshold,
+    seamHighThreshold,
    tileSize,
    infillMethod,
    clipSkip,
@ -130,6 +141,11 @@ export const buildCanvasOutpaintGraph = (
        is_intermediate: true,
        mask2: canvasMaskImage,
      },
+      [SEAM_MASK_COMBINE]: {
+        type: 'mask_combine',
+        id: MASK_COMBINE,
+        is_intermediate: true,
+      },
      [MASK_BLUR]: {
        type: 'img_blur',
        id: MASK_BLUR,
@ -165,6 +181,25 @@ export const buildCanvasOutpaintGraph = (
        denoising_start: 1 - strength,
        denoising_end: 1,
      },
+      [MASK_EDGE]: {
+        type: 'mask_edge',
+        id: MASK_EDGE,
+        is_intermediate: true,
+        edge_size: seamSize,
+        edge_blur: seamBlur,
+        low_threshold: seamLowThreshold,
+        high_threshold: seamHighThreshold,
+      },
+      [SEAM_FIX_DENOISE_LATENTS]: {
+        type: 'denoise_latents',
+        id: SEAM_FIX_DENOISE_LATENTS,
+        is_intermediate: true,
+        steps: seamSteps,
+        cfg_scale: cfg_scale,
+        scheduler: scheduler,
+        denoising_start: 1 - seamStrength,
+        denoising_end: 1,
+      },
      [LATENTS_TO_IMAGE]: {
        type: 'l2i',
        id: LATENTS_TO_IMAGE,
@ -333,12 +368,63 @@ export const buildCanvasOutpaintGraph = (
          field: 'seed',
        },
      },
-      // Decode the result from Inpaint
+      // Seam Paint
+      {
+        source: {
+          node_id: MAIN_MODEL_LOADER,
+          field: 'unet',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'unet',
+        },
+      },
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'positive_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NEGATIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'negative_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NOISE,
+          field: 'noise',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'noise',
+        },
+      },
      {
        source: {
          node_id: DENOISE_LATENTS,
          field: 'latents',
        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'latents',
+        },
+      },
+      // Decode the result from Inpaint
+      {
+        source: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'latents',
+        },
        destination: {
          node_id: LATENTS_TO_IMAGE,
          field: 'latents',
@ -348,7 +434,6 @@ export const buildCanvasOutpaintGraph = (
  };

  // Add Infill Nodes
-
  if (infillMethod === 'patchmatch') {
    graph.nodes[INPAINT_INFILL] = {
      type: 'infill_patchmatch',
@ -378,6 +463,13 @@ export const buildCanvasOutpaintGraph = (
      width: scaledWidth,
      height: scaledHeight,
    };
+    graph.nodes[SEAM_MASK_RESIZE_UP] = {
+      type: 'img_resize',
+      id: SEAM_MASK_RESIZE_UP,
+      is_intermediate: true,
+      width: scaledWidth,
+      height: scaledHeight,
+    };
    graph.nodes[INPAINT_IMAGE_RESIZE_DOWN] = {
      type: 'img_resize',
      id: INPAINT_IMAGE_RESIZE_DOWN,
@ -399,6 +491,13 @@ export const buildCanvasOutpaintGraph = (
      width: width,
      height: height,
    };
+    graph.nodes[SEAM_MASK_RESIZE_DOWN] = {
+      type: 'img_resize',
+      id: SEAM_MASK_RESIZE_DOWN,
+      is_intermediate: true,
+      width: width,
+      height: height,
+    };

    graph.nodes[NOISE] = {
      ...(graph.nodes[NOISE] as NoiseInvocation),
@ -440,6 +539,57 @@ export const buildCanvasOutpaintGraph = (
          field: 'image',
        },
      },
+      // Seam Paint Mask
+      {
+        source: {
+          node_id: MASK_FROM_ALPHA,
+          field: 'image',
+        },
+        destination: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_RESIZE_UP,
+          field: 'image',
+        },
+      },
+      {
+        source: {
+          node_id: SEAM_MASK_RESIZE_UP,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'mask',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_BLUR,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask1',
+        },
+      },
+      {
+        source: {
+          node_id: SEAM_MASK_RESIZE_UP,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask2',
+        },
+      },
      // Resize Results Down
      {
        source: {
@ -453,7 +603,7 @@ export const buildCanvasOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_BLUR,
+          node_id: MASK_RESIZE_UP,
          field: 'image',
        },
        destination: {
@ -461,6 +611,16 @@ export const buildCanvasOutpaintGraph = (
          field: 'image',
        },
      },
+      {
+        source: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_RESIZE_DOWN,
+          field: 'image',
+        },
+      },
      {
        source: {
          node_id: INPAINT_INFILL,
@ -494,7 +654,7 @@ export const buildCanvasOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_RESIZE_DOWN,
+          node_id: SEAM_MASK_RESIZE_DOWN,
          field: 'image',
        },
        destination: {
@ -525,7 +685,7 @@ export const buildCanvasOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_RESIZE_DOWN,
+          node_id: SEAM_MASK_RESIZE_DOWN,
          field: 'image',
        },
        destination: {
@ -553,7 +713,6 @@ export const buildCanvasOutpaintGraph = (
    };
    graph.nodes[MASK_BLUR] = {
      ...(graph.nodes[MASK_BLUR] as ImageBlurInvocation),
-      image: canvasMaskImage,
    };

    graph.edges.push(
@ -568,6 +727,47 @@ export const buildCanvasOutpaintGraph = (
          field: 'image',
        },
      },
+      // Seam Paint Mask
+      {
+        source: {
+          node_id: MASK_FROM_ALPHA,
+          field: 'image',
+        },
+        destination: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'mask',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_FROM_ALPHA,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask1',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask2',
+        },
+      },
      // Color Correct The Inpainted Result
      {
        source: {
@ -591,7 +791,7 @@ export const buildCanvasOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_BLUR,
+          node_id: SEAM_MASK_COMBINE,
          field: 'image',
        },
        destination: {
@ -622,7 +822,7 @@ export const buildCanvasOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_BLUR,
+          node_id: SEAM_MASK_COMBINE,
          field: 'image',
        },
        destination: {
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
@ -29,6 +29,7 @@ import {
  LATENTS_TO_IMAGE,
  MASK_BLUR,
  MASK_COMBINE,
+  MASK_EDGE,
  MASK_FROM_ALPHA,
  MASK_RESIZE_DOWN,
  MASK_RESIZE_UP,
@ -40,6 +41,10 @@ import {
  SDXL_CANVAS_OUTPAINT_GRAPH,
  SDXL_DENOISE_LATENTS,
  SDXL_MODEL_LOADER,
+  SEAM_FIX_DENOISE_LATENTS,
+  SEAM_MASK_COMBINE,
+  SEAM_MASK_RESIZE_DOWN,
+  SEAM_MASK_RESIZE_UP,
 } from './constants';
 import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';

@ -67,6 +72,12 @@ export const buildCanvasSDXLOutpaintGraph = (
    shouldUseCpuNoise,
    maskBlur,
    maskBlurMethod,
+    seamSize,
+    seamBlur,
+    seamSteps,
+    seamStrength,
+    seamLowThreshold,
+    seamHighThreshold,
    tileSize,
    infillMethod,
  } = state.generation;
@ -133,6 +144,11 @@ export const buildCanvasSDXLOutpaintGraph = (
        is_intermediate: true,
        mask2: canvasMaskImage,
      },
+      [SEAM_MASK_COMBINE]: {
+        type: 'mask_combine',
+        id: MASK_COMBINE,
+        is_intermediate: true,
+      },
      [MASK_BLUR]: {
        type: 'img_blur',
        id: MASK_BLUR,
@ -170,6 +186,25 @@ export const buildCanvasSDXLOutpaintGraph = (
          : 1 - strength,
        denoising_end: shouldUseSDXLRefiner ? refinerStart : 1,
      },
+      [MASK_EDGE]: {
+        type: 'mask_edge',
+        id: MASK_EDGE,
+        is_intermediate: true,
+        edge_size: seamSize,
+        edge_blur: seamBlur,
+        low_threshold: seamLowThreshold,
+        high_threshold: seamHighThreshold,
+      },
+      [SEAM_FIX_DENOISE_LATENTS]: {
+        type: 'denoise_latents',
+        id: SEAM_FIX_DENOISE_LATENTS,
+        is_intermediate: true,
+        steps: seamSteps,
+        cfg_scale: cfg_scale,
+        scheduler: scheduler,
+        denoising_start: 1 - seamStrength,
+        denoising_end: 1,
+      },
      [LATENTS_TO_IMAGE]: {
        type: 'l2i',
        id: LATENTS_TO_IMAGE,
@ -347,12 +382,63 @@ export const buildCanvasSDXLOutpaintGraph = (
          field: 'seed',
        },
      },
-      // Decode inpainted latents to image
+      // Seam Paint
+      {
+        source: {
+          node_id: SDXL_MODEL_LOADER,
+          field: 'unet',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'unet',
+        },
+      },
+      {
+        source: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'positive_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NEGATIVE_CONDITIONING,
+          field: 'conditioning',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'negative_conditioning',
+        },
+      },
+      {
+        source: {
+          node_id: NOISE,
+          field: 'noise',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'noise',
+        },
+      },
      {
        source: {
          node_id: SDXL_DENOISE_LATENTS,
          field: 'latents',
        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'latents',
+        },
+      },
+      // Decode inpainted latents to image
+      {
+        source: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'latents',
+        },
        destination: {
          node_id: LATENTS_TO_IMAGE,
          field: 'latents',
@ -392,6 +478,13 @@ export const buildCanvasSDXLOutpaintGraph = (
      width: scaledWidth,
      height: scaledHeight,
    };
+    graph.nodes[SEAM_MASK_RESIZE_UP] = {
+      type: 'img_resize',
+      id: SEAM_MASK_RESIZE_UP,
+      is_intermediate: true,
+      width: scaledWidth,
+      height: scaledHeight,
+    };
    graph.nodes[INPAINT_IMAGE_RESIZE_DOWN] = {
      type: 'img_resize',
      id: INPAINT_IMAGE_RESIZE_DOWN,
@ -413,6 +506,13 @@ export const buildCanvasSDXLOutpaintGraph = (
      width: width,
      height: height,
    };
+    graph.nodes[SEAM_MASK_RESIZE_DOWN] = {
+      type: 'img_resize',
+      id: SEAM_MASK_RESIZE_DOWN,
+      is_intermediate: true,
+      width: width,
+      height: height,
+    };

    graph.nodes[NOISE] = {
      ...(graph.nodes[NOISE] as NoiseInvocation),
@ -454,6 +554,57 @@ export const buildCanvasSDXLOutpaintGraph = (
          field: 'image',
        },
      },
+      // Seam Paint Mask
+      {
+        source: {
+          node_id: MASK_FROM_ALPHA,
+          field: 'image',
+        },
+        destination: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_RESIZE_UP,
+          field: 'image',
+        },
+      },
+      {
+        source: {
+          node_id: SEAM_MASK_RESIZE_UP,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'mask',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_BLUR,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask1',
+        },
+      },
+      {
+        source: {
+          node_id: SEAM_MASK_RESIZE_UP,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask2',
+        },
+      },
      // Resize Results Down
      {
        source: {
@ -467,7 +618,7 @@ export const buildCanvasSDXLOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_BLUR,
+          node_id: MASK_RESIZE_UP,
          field: 'image',
        },
        destination: {
@ -475,6 +626,16 @@ export const buildCanvasSDXLOutpaintGraph = (
          field: 'image',
        },
      },
+      {
+        source: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_RESIZE_DOWN,
+          field: 'image',
+        },
+      },
      {
        source: {
          node_id: INPAINT_INFILL,
@ -508,7 +669,7 @@ export const buildCanvasSDXLOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_RESIZE_DOWN,
+          node_id: SEAM_MASK_RESIZE_DOWN,
          field: 'image',
        },
        destination: {
@ -539,7 +700,7 @@ export const buildCanvasSDXLOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_RESIZE_DOWN,
+          node_id: SEAM_MASK_RESIZE_DOWN,
          field: 'image',
        },
        destination: {
@ -567,7 +728,6 @@ export const buildCanvasSDXLOutpaintGraph = (
    };
    graph.nodes[MASK_BLUR] = {
      ...(graph.nodes[MASK_BLUR] as ImageBlurInvocation),
-      image: canvasMaskImage,
    };

    graph.edges.push(
@ -582,6 +742,47 @@ export const buildCanvasSDXLOutpaintGraph = (
          field: 'image',
        },
      },
+      // Seam Paint Mask
+      {
+        source: {
+          node_id: MASK_FROM_ALPHA,
+          field: 'image',
+        },
+        destination: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_FIX_DENOISE_LATENTS,
+          field: 'mask',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_FROM_ALPHA,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask1',
+        },
+      },
+      {
+        source: {
+          node_id: MASK_EDGE,
+          field: 'image',
+        },
+        destination: {
+          node_id: SEAM_MASK_COMBINE,
+          field: 'mask2',
+        },
+      },
      // Color Correct The Inpainted Result
      {
        source: {
@ -605,7 +806,7 @@ export const buildCanvasSDXLOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_BLUR,
+          node_id: SEAM_MASK_COMBINE,
          field: 'image',
        },
        destination: {
@ -636,7 +837,7 @@ export const buildCanvasSDXLOutpaintGraph = (
      },
      {
        source: {
-          node_id: MASK_BLUR,
+          node_id: SEAM_MASK_COMBINE,
          field: 'image',
        },
        destination: {
@ -669,7 +870,7 @@ export const buildCanvasSDXLOutpaintGraph = (

  // Add Refiner if enabled
  if (shouldUseSDXLRefiner) {
-    addSDXLRefinerToGraph(state, graph, SDXL_DENOISE_LATENTS);
+    addSDXLRefinerToGraph(state, graph, SEAM_FIX_DENOISE_LATENTS);
  }

  // optionally add custom VAE
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts
@ -18,8 +18,6 @@ export const IMAGE_TO_LATENTS = 'image_to_latents';
 export const LATENTS_TO_LATENTS = 'latents_to_latents';
 export const RESIZE = 'resize_image';
 export const CANVAS_OUTPUT = 'canvas_output';
-export const INPAINT = 'inpaint';
-export const INPAINT_SEAM_FIX = 'inpaint_seam_fix';
 export const INPAINT_IMAGE = 'inpaint_image';
 export const SCALED_INPAINT_IMAGE = 'scaled_inpaint_image';
 export const INPAINT_IMAGE_RESIZE_UP = 'inpaint_image_resize_up';
@ -27,10 +25,14 @@ export const INPAINT_IMAGE_RESIZE_DOWN = 'inpaint_image_resize_down';
 export const INPAINT_INFILL = 'inpaint_infill';
 export const INPAINT_INFILL_RESIZE_DOWN = 'inpaint_infill_resize_down';
 export const INPAINT_FINAL_IMAGE = 'inpaint_final_image';
+export const SEAM_FIX_DENOISE_LATENTS = 'seam_fix_denoise_latents';
 export const MASK_FROM_ALPHA = 'tomask';
 export const MASK_EDGE = 'mask_edge';
 export const MASK_BLUR = 'mask_blur';
 export const MASK_COMBINE = 'mask_combine';
+export const SEAM_MASK_COMBINE = 'seam_mask_combine';
+export const SEAM_MASK_RESIZE_UP = 'seam_mask_resize_up';
+export const SEAM_MASK_RESIZE_DOWN = 'seam_mask_resize_down';
 export const MASK_RESIZE_UP = 'mask_resize_up';
 export const MASK_RESIZE_DOWN = 'mask_resize_down';
 export const COLOR_CORRECT = 'color_correct';
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamBlur.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamBlur.tsx
@ -0,0 +1,36 @@
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISlider from 'common/components/IAISlider';
+import { setSeamBlur } from 'features/parameters/store/generationSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ParamSeamBlur = () => {
+  const dispatch = useAppDispatch();
+  const seamBlur = useAppSelector(
+    (state: RootState) => state.generation.seamBlur
+  );
+  const { t } = useTranslation();
+
+  return (
+    <IAISlider
+      label={t('parameters.seamBlur')}
+      min={0}
+      max={64}
+      step={8}
+      sliderNumberInputProps={{ max: 512 }}
+      value={seamBlur}
+      onChange={(v) => {
+        dispatch(setSeamBlur(v));
+      }}
+      withInput
+      withSliderMarks
+      withReset
+      handleReset={() => {
+        dispatch(setSeamBlur(8));
+      }}
+    />
+  );
+};
+
+export default memo(ParamSeamBlur);
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse.tsx
@ -0,0 +1,27 @@
+import { Flex } from '@chakra-ui/react';
+import IAICollapse from 'common/components/IAICollapse';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ParamSeamBlur from './ParamSeamBlur';
+import ParamSeamSize from './ParamSeamSize';
+import ParamSeamSteps from './ParamSeamSteps';
+import ParamSeamStrength from './ParamSeamStrength';
+import ParamSeamThreshold from './ParamSeamThreshold';
+
+const ParamSeamPaintingCollapse = () => {
+  const { t } = useTranslation();
+
+  return (
+    <IAICollapse label={t('parameters.seamPaintingHeader')}>
+      <Flex sx={{ flexDirection: 'column', gap: 2, paddingBottom: 2 }}>
+        <ParamSeamSize />
+        <ParamSeamBlur />
+        <ParamSeamSteps />
+        <ParamSeamStrength />
+        <ParamSeamThreshold />
+      </Flex>
+    </IAICollapse>
+  );
+};
+
+export default memo(ParamSeamPaintingCollapse);
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSize.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSize.tsx
@ -0,0 +1,36 @@
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISlider from 'common/components/IAISlider';
+import { setSeamSize } from 'features/parameters/store/generationSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ParamSeamSize = () => {
+  const dispatch = useAppDispatch();
+  const seamSize = useAppSelector(
+    (state: RootState) => state.generation.seamSize
+  );
+  const { t } = useTranslation();
+
+  return (
+    <IAISlider
+      label={t('parameters.seamSize')}
+      min={0}
+      max={128}
+      step={8}
+      sliderNumberInputProps={{ max: 512 }}
+      value={seamSize}
+      onChange={(v) => {
+        dispatch(setSeamSize(v));
+      }}
+      withInput
+      withSliderMarks
+      withReset
+      handleReset={() => {
+        dispatch(setSeamSize(16));
+      }}
+    />
+  );
+};
+
+export default memo(ParamSeamSize);
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSteps.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSteps.tsx
@ -0,0 +1,36 @@
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISlider from 'common/components/IAISlider';
+import { setSeamSteps } from 'features/parameters/store/generationSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ParamSeamSteps = () => {
+  const dispatch = useAppDispatch();
+  const seamSteps = useAppSelector(
+    (state: RootState) => state.generation.seamSteps
+  );
+  const { t } = useTranslation();
+
+  return (
+    <IAISlider
+      label={t('parameters.seamSteps')}
+      min={0}
+      max={100}
+      step={1}
+      sliderNumberInputProps={{ max: 999 }}
+      value={seamSteps}
+      onChange={(v) => {
+        dispatch(setSeamSteps(v));
+      }}
+      withInput
+      withSliderMarks
+      withReset
+      handleReset={() => {
+        dispatch(setSeamSteps(20));
+      }}
+    />
+  );
+};
+
+export default memo(ParamSeamSteps);
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamStrength.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamStrength.tsx
@ -0,0 +1,36 @@
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISlider from 'common/components/IAISlider';
+import { setSeamStrength } from 'features/parameters/store/generationSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ParamSeamStrength = () => {
+  const dispatch = useAppDispatch();
+  const seamStrength = useAppSelector(
+    (state: RootState) => state.generation.seamStrength
+  );
+  const { t } = useTranslation();
+
+  return (
+    <IAISlider
+      label={t('parameters.seamStrength')}
+      min={0}
+      max={1}
+      step={0.01}
+      sliderNumberInputProps={{ max: 999 }}
+      value={seamStrength}
+      onChange={(v) => {
+        dispatch(setSeamStrength(v));
+      }}
+      withInput
+      withSliderMarks
+      withReset
+      handleReset={() => {
+        dispatch(setSeamStrength(0.7));
+      }}
+    />
+  );
+};
+
+export default memo(ParamSeamStrength);
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamThreshold.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamThreshold.tsx
@ -0,0 +1,121 @@
+import {
+  FormControl,
+  FormLabel,
+  HStack,
+  RangeSlider,
+  RangeSliderFilledTrack,
+  RangeSliderMark,
+  RangeSliderThumb,
+  RangeSliderTrack,
+  Tooltip,
+} from '@chakra-ui/react';
+import type { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import {
+  setSeamHighThreshold,
+  setSeamLowThreshold,
+} from 'features/parameters/store/generationSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BiReset } from 'react-icons/bi';
+
+const ParamSeamThreshold = () => {
+  const dispatch = useAppDispatch();
+  const seamLowThreshold = useAppSelector(
+    (state: RootState) => state.generation.seamLowThreshold
+  );
+
+  const seamHighThreshold = useAppSelector(
+    (state: RootState) => state.generation.seamHighThreshold
+  );
+  const { t } = useTranslation();
+
+  const handleSeamThresholdChange = useCallback(
+    (v: number[]) => {
+      dispatch(setSeamLowThreshold(v[0] as number));
+      dispatch(setSeamHighThreshold(v[1] as number));
+    },
+    [dispatch]
+  );
+
+  const handleSeamThresholdReset = () => {
+    dispatch(setSeamLowThreshold(100));
+    dispatch(setSeamHighThreshold(200));
+  };
+
+  return (
+    <FormControl>
+      <FormLabel>{t('parameters.seamThreshold')}</FormLabel>
+      <HStack w="100%" gap={4} mt={-2}>
+        <RangeSlider
+          aria-label={[
+            t('parameters.seamLowThreshold'),
+            t('parameters.seamHighThreshold'),
+          ]}
+          value={[seamLowThreshold, seamHighThreshold]}
+          min={0}
+          max={255}
+          step={1}
+          minStepsBetweenThumbs={1}
+          onChange={handleSeamThresholdChange}
+        >
+          <RangeSliderTrack>
+            <RangeSliderFilledTrack />
+          </RangeSliderTrack>
+          <Tooltip label={seamLowThreshold} placement="top" hasArrow>
+            <RangeSliderThumb index={0} />
+          </Tooltip>
+          <Tooltip label={seamHighThreshold} placement="top" hasArrow>
+            <RangeSliderThumb index={1} />
+          </Tooltip>
+          <RangeSliderMark
+            value={0}
+            sx={{
+              insetInlineStart: '0 !important',
+              insetInlineEnd: 'unset !important',
+            }}
+          >
+            0
+          </RangeSliderMark>
+          <RangeSliderMark
+            value={0.392}
+            sx={{
+              insetInlineStart: '38.4% !important',
+              transform: 'translateX(-38.4%)',
+            }}
+          >
+            100
+          </RangeSliderMark>
+          <RangeSliderMark
+            value={0.784}
+            sx={{
+              insetInlineStart: '79.8% !important',
+              transform: 'translateX(-79.8%)',
+            }}
+          >
+            200
+          </RangeSliderMark>
+          <RangeSliderMark
+            value={1}
+            sx={{
+              insetInlineStart: 'unset !important',
+              insetInlineEnd: '0 !important',
+            }}
+          >
+            255
+          </RangeSliderMark>
+        </RangeSlider>
+        <IAIIconButton
+          size="sm"
+          aria-label={t('accessibility.reset')}
+          tooltip={t('accessibility.reset')}
+          icon={<BiReset />}
+          onClick={handleSeamThresholdReset}
+        />
+      </HStack>
+    </FormControl>
+  );
+};
+
+export default memo(ParamSeamThreshold);
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
@ -37,6 +37,12 @@ export interface GenerationState {
  scheduler: SchedulerParam;
  maskBlur: number;
  maskBlurMethod: MaskBlurMethodParam;
+  seamSize: number;
+  seamBlur: number;
+  seamSteps: number;
+  seamStrength: StrengthParam;
+  seamLowThreshold: number;
+  seamHighThreshold: number;
  seed: SeedParam;
  seedWeights: string;
  shouldFitToWidthHeight: boolean;
@ -74,6 +80,12 @@ export const initialGenerationState: GenerationState = {
  scheduler: 'euler',
  maskBlur: 16,
  maskBlurMethod: 'box',
+  seamSize: 16,
+  seamBlur: 8,
+  seamSteps: 20,
+  seamStrength: 0.7,
+  seamLowThreshold: 100,
+  seamHighThreshold: 200,
  seed: 0,
  seedWeights: '',
  shouldFitToWidthHeight: true,
@ -200,6 +212,24 @@ export const generationSlice = createSlice({
    setMaskBlurMethod: (state, action: PayloadAction<MaskBlurMethodParam>) => {
      state.maskBlurMethod = action.payload;
    },
+    setSeamSize: (state, action: PayloadAction<number>) => {
+      state.seamSize = action.payload;
+    },
+    setSeamBlur: (state, action: PayloadAction<number>) => {
+      state.seamBlur = action.payload;
+    },
+    setSeamSteps: (state, action: PayloadAction<number>) => {
+      state.seamSteps = action.payload;
+    },
+    setSeamStrength: (state, action: PayloadAction<number>) => {
+      state.seamStrength = action.payload;
+    },
+    setSeamLowThreshold: (state, action: PayloadAction<number>) => {
+      state.seamLowThreshold = action.payload;
+    },
+    setSeamHighThreshold: (state, action: PayloadAction<number>) => {
+      state.seamHighThreshold = action.payload;
+    },
    setTileSize: (state, action: PayloadAction<number>) => {
      state.tileSize = action.payload;
    },
@ -306,6 +336,12 @@ export const {
  setScheduler,
  setMaskBlur,
  setMaskBlurMethod,
+  setSeamSize,
+  setSeamBlur,
+  setSeamSteps,
+  setSeamStrength,
+  setSeamLowThreshold,
+  setSeamHighThreshold,
  setSeed,
  setSeedWeights,
  setShouldFitToWidthHeight,
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
@ -2,6 +2,7 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
 import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
+import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
@ -22,6 +23,7 @@ export default function SDXLUnifiedCanvasTabParameters() {
      <ParamNoiseCollapse />
      <ParamMaskAdjustmentCollapse />
      <ParamInfillAndScalingCollapse />
+      <ParamSeamPaintingCollapse />
    </>
  );
 }
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@ -6,6 +6,7 @@ import ParamControlNetCollapse from 'features/parameters/components/Parameters/C
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
+import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
 import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
@ -23,6 +24,7 @@ const UnifiedCanvasParameters = () => {
      <ParamSymmetryCollapse />
      <ParamMaskAdjustmentCollapse />
      <ParamInfillAndScalingCollapse />
+      <ParamSeamPaintingCollapse />
      <ParamAdvancedCollapse />
    </>
  );