feat: Add SDXL Style Prompt Concat Toggle

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts

@@ -50,6 +50,7 @@ export const buildLinearSDXLImageToImageGraph = (
   const {
     positiveStylePrompt,
     negativeStylePrompt,
+    shouldConcatSDXLStylePrompt,
     shouldUseSDXLRefiner,
     refinerStart,
     sdxlImg2ImgDenoisingStrength: strength,
@@ -91,13 +92,17 @@ export const buildLinearSDXLImageToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: `${positivePrompt} ${positiveStylePrompt}`,
+        style: shouldConcatSDXLStylePrompt
+          ? `${positivePrompt} ${positiveStylePrompt}`
+          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: `${negativePrompt} ${negativeStylePrompt}`,
+        style: shouldConcatSDXLStylePrompt
+          ? `${negativePrompt} ${negativeStylePrompt}`
+          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts

@@ -39,6 +39,7 @@ export const buildLinearSDXLTextToImageGraph = (
   const {
     positiveStylePrompt,
     negativeStylePrompt,
+    shouldConcatSDXLStylePrompt,
     shouldUseSDXLRefiner,
     refinerStart,
   } = state.sdxl;
@@ -74,13 +75,17 @@ export const buildLinearSDXLTextToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: `${positivePrompt} ${positiveStylePrompt}`,
+        style: shouldConcatSDXLStylePrompt
+          ? `${positivePrompt} ${positiveStylePrompt}`
+          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: `${negativePrompt} ${negativeStylePrompt}`,
+        style: shouldConcatSDXLStylePrompt
+          ? `${negativePrompt} ${negativeStylePrompt}`
+          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -0,0 +1,37 @@
+import { Box } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAISwitch from 'common/components/IAISwitch';
+import { ChangeEvent } from 'react';
+import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
+
+export default function ParamSDXLConcatPrompt() {
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
+  const dispatch = useAppDispatch();
+
+  const handleShouldConcatPromptChange = (e: ChangeEvent<HTMLInputElement>) => {
+    dispatch(setShouldConcatSDXLStylePrompt(e.target.checked));
+  };
+
+  return (
+    <Box
+      sx={{
+        px: 4,
+        py: 2,
+        borderRadius: 4,
+        bg: 'base.100',
+        _dark: { bg: 'base.800' },
+      }}
+    >
+      <IAISwitch
+        label="Concat Style Prompt"
+        tooltip="Concatenates Basic Prompt with Style (Recommended)"
+        isChecked={shouldConcatSDXLStylePrompt}
+        onChange={handleShouldConcatPromptChange}
+      />
+    </Box>
+  );
+}

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

@@ -2,8 +2,8 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 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 ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
 import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
 import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
@@ -16,6 +16,7 @@ const SDXLImageToImageTabParameters = () => {
       <ParamSDXLPositiveStyleConditioning />
       <ParamNegativeConditioning />
       <ParamSDXLNegativeStyleConditioning />
+      <ParamSDXLConcatPrompt />
       <ProcessButtons />
       <SDXLImageToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />

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

@@ -4,6 +4,7 @@ import ParamPositiveConditioning from 'features/parameters/components/Parameters
 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 ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
 import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
@@ -15,6 +16,7 @@ const SDXLTextToImageTabParameters = () => {
       <ParamSDXLPositiveStyleConditioning />
       <ParamNegativeConditioning />
       <ParamSDXLNegativeStyleConditioning />
+      <ParamSDXLConcatPrompt />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />

invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts

@@ -10,6 +10,7 @@ import { MainModelField } from 'services/api/types';
 type SDXLInitialState = {
   positiveStylePrompt: PositiveStylePromptSDXLParam;
   negativeStylePrompt: NegativeStylePromptSDXLParam;
+  shouldConcatSDXLStylePrompt: boolean;
   shouldUseSDXLRefiner: boolean;
   sdxlImg2ImgDenoisingStrength: number;
   refinerModel: MainModelField | null;
@@ -23,6 +24,7 @@ type SDXLInitialState = {
 const sdxlInitialState: SDXLInitialState = {
   positiveStylePrompt: '',
   negativeStylePrompt: '',
+  shouldConcatSDXLStylePrompt: true,
   shouldUseSDXLRefiner: false,
   sdxlImg2ImgDenoisingStrength: 0.7,
   refinerModel: null,
@@ -43,6 +45,9 @@ const sdxlSlice = createSlice({
     setNegativeStylePromptSDXL: (state, action: PayloadAction<string>) => {
       state.negativeStylePrompt = action.payload;
     },
+    setShouldConcatSDXLStylePrompt: (state, action: PayloadAction<boolean>) => {
+      state.shouldConcatSDXLStylePrompt = action.payload;
+    },
     setShouldUseSDXLRefiner: (state, action: PayloadAction<boolean>) => {
       state.shouldUseSDXLRefiner = action.payload;
     },
@@ -76,6 +81,7 @@ const sdxlSlice = createSlice({
 export const {
   setPositiveStylePromptSDXL,
   setNegativeStylePromptSDXL,
+  setShouldConcatSDXLStylePrompt,
   setShouldUseSDXLRefiner,
   setSDXLImg2ImgDenoisingStrength,
   refinerModelChanged,