feat: Unify Prompt Area Design Between SDXL and Regular Models

invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx

@@ -0,0 +1,21 @@
+import { Flex } from '@chakra-ui/react';
+import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
+import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+
+export default function ParamPromptArea() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+        p: 2,
+        borderRadius: 4,
+        bg: 'base.100',
+        _dark: { bg: 'base.850' },
+      }}
+    >
+      <ParamPositiveConditioning />
+      <ParamNegativeConditioning />
+    </Flex>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { Flex } from '@chakra-ui/react';
+import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
+import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
+import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
+import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
+
+export default function ParamSDXLPromptArea() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+        p: 2,
+        borderRadius: 4,
+        bg: 'base.100',
+        _dark: { bg: 'base.850' },
+      }}
+    >
+      <ParamPositiveConditioning />
+      <ParamSDXLPositiveStyleConditioning />
+      <ParamNegativeConditioning />
+      <ParamSDXLNegativeStyleConditioning />
+      <ParamSDXLConcatPrompt />
+    </Flex>
+  );
+}

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

@@ -1,34 +1,14 @@
-import { Flex } from '@chakra-ui/react';
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
+import ParamSDXLPromptArea from './ParamSDXLPromptArea';
-import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
-import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters';
 
 const SDXLImageToImageTabParameters = () => {
   return (
     <>
-      <Flex
+      <ParamSDXLPromptArea />
-        sx={{
-          flexDirection: 'column',
-          gap: 2,
-          p: 2,
-          borderRadius: 4,
-          bg: 'base.100',
-          _dark: { bg: 'base.850' },
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamSDXLPositiveStyleConditioning />
-        <ParamNegativeConditioning />
-        <ParamSDXLNegativeStyleConditioning />
-        <ParamSDXLConcatPrompt />
-      </Flex>
       <ProcessButtons />
       <SDXLImageToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />

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

@@ -1,34 +1,14 @@
-import { Flex } from '@chakra-ui/react';
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
-import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
+import ParamSDXLPromptArea from './ParamSDXLPromptArea';
-import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
-import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 
 const SDXLTextToImageTabParameters = () => {
   return (
     <>
-      <Flex
+      <ParamSDXLPromptArea />
-        sx={{
-          flexDirection: 'column',
-          gap: 2,
-          p: 2,
-          borderRadius: 4,
-          bg: 'base.100',
-          _dark: { bg: 'base.850' },
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamSDXLPositiveStyleConditioning />
-        <ParamNegativeConditioning />
-        <ParamSDXLNegativeStyleConditioning />
-        <ParamSDXLConcatPrompt />
-      </Flex>
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx

@@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 
 const ImageToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
+      <ParamPromptArea />
-      <ParamNegativeConditioning />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx

@@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
 import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
 
 const TextToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
+      <ParamPromptArea />
-      <ParamNegativeConditioning />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamControlNetCollapse />

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

@@ -4,18 +4,16 @@ import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Adv
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
 import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
 
 const UnifiedCanvasParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
+      <ParamPromptArea />
-      <ParamNegativeConditioning />
       <ProcessButtons />
       <UnifiedCanvasCoreParameters />
       <ParamControlNetCollapse />