ui: Combine mask and coherence under Compositing

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

@@ -506,12 +506,13 @@
         "hiresStrength": "High Res Strength",
         "imageFit": "Fit Initial Image To Output Size",
         "codeformerFidelity": "Fidelity",
+        "compositingSettingsHeader": "Compositing Settings",
         "maskAdjustmentsHeader": "Mask Adjustments",
-        "maskBlur": "Mask Blur",
+        "maskBlur": "Blur",
-        "maskBlurMethod": "Mask Blur Method",
+        "maskBlurMethod": "Blur Method",
         "coherencePassHeader": "Coherence Pass",
-        "coherenceSteps": "Coherence Pass Steps",
+        "coherenceSteps": "Steps",
-        "coherenceStrength": "Coherence Pass Strength",
+        "coherenceStrength": "Strength",
         "seamLowThreshold": "Low",
         "seamHighThreshold": "High",
         "scaleBeforeProcessing": "Scale Before Processing",

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx

@@ -0,0 +1,57 @@
+import { Divider, Flex, Text } from '@chakra-ui/react';
+import IAICollapse from 'common/components/IAICollapse';
+import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps';
+import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength';
+import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur';
+import ParamMaskBlurMethod from './MaskAdjustment/ParamMaskBlurMethod';
+
+const ParamCompositingSettingsCollapse = () => {
+  const { t } = useTranslation();
+
+  return (
+    <IAICollapse label={t('parameters.compositingSettingsHeader')}>
+      <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+        <CompositingSettingsWrapper>
+          <Text fontSize="sm" fontWeight="bold">
+            {t('parameters.maskAdjustmentsHeader')}
+          </Text>
+          <ParamMaskBlur />
+          <ParamMaskBlurMethod />
+        </CompositingSettingsWrapper>
+        <Divider />
+        <CompositingSettingsWrapper>
+          <Text fontSize="sm" fontWeight="bold">
+            {t('parameters.coherencePassHeader')}
+          </Text>
+          <ParamCanvasCoherenceSteps />
+          <ParamCanvasCoherenceStrength />
+        </CompositingSettingsWrapper>
+      </Flex>
+    </IAICollapse>
+  );
+};
+
+const CompositingSettingsWrapper = memo((props: PropsWithChildren) => (
+  <Flex
+    sx={{
+      flexDir: 'column',
+      gap: 2,
+      bg: 'base.100',
+      px: 4,
+      pt: 2,
+      pb: 4,
+      borderRadius: 'base',
+      _dark: {
+        bg: 'base.750',
+      },
+    }}
+  >
+    {props.children}
+  </Flex>
+));
+
+CompositingSettingsWrapper.displayName = 'CompositingSettingsWrapper';
+
+export default memo(ParamCompositingSettingsCollapse);

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx

@@ -1,21 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ParamMaskBlur from './ParamMaskBlur';
-import ParamMaskBlurMethod from './ParamMaskBlurMethod';
-
-const ParamMaskAdjustmentCollapse = () => {
-  const { t } = useTranslation();
-
-  return (
-    <IAICollapse label={t('parameters.maskAdjustmentsHeader')}>
-      <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-        <ParamMaskBlur />
-        <ParamMaskBlurMethod />
-      </Flex>
-    </IAICollapse>
-  );
-};
-
-export default memo(ParamMaskAdjustmentCollapse);

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx

@@ -1,21 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ParamCanvasCoherenceSteps from './ParamCanvasCoherenceSteps';
-import ParamCanvasCoherenceStrength from './ParamCanvasCoherenceStrength';
-
-const ParamCanvasCoherencePassCollapse = () => {
-  const { t } = useTranslation();
-
-  return (
-    <IAICollapse label={t('parameters.coherencePassHeader')}>
-      <Flex sx={{ flexDirection: 'column', gap: 2, paddingBottom: 2 }}>
-        <ParamCanvasCoherenceSteps />
-        <ParamCanvasCoherenceStrength />
-      </Flex>
-    </IAICollapse>
-  );
-};
-
-export default memo(ParamCanvasCoherencePassCollapse);

invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx

@@ -1,8 +1,7 @@
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
+import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse';
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
-import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
-import ParamCanvasCoherencePassCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
@@ -20,9 +19,8 @@ export default function SDXLUnifiedCanvasTabParameters() {
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamNoiseCollapse />
-      <ParamMaskAdjustmentCollapse />
       <ParamInfillAndScalingCollapse />
-      <ParamCanvasCoherencePassCollapse />
+      <ParamCompositingSettingsCollapse />
       <ParamSeamlessCollapse />
     </>
   );

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx

@@ -1,9 +1,8 @@
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
+import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse';
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
-import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
-import ParamCanvasCoherencePassCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
@@ -20,9 +19,8 @@ const UnifiedCanvasParameters = () => {
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamSymmetryCollapse />
-      <ParamMaskAdjustmentCollapse />
       <ParamInfillAndScalingCollapse />
-      <ParamCanvasCoherencePassCollapse />
+      <ParamCompositingSettingsCollapse />
       <ParamSeamlessCollapse />
       <ParamAdvancedCollapse />
     </>