feat: SDXL - Concat Prompt and Style for Style Prompt

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

@@ -7,7 +7,9 @@ import {
   ImageToLatentsInvocation,
 } from 'services/api/types';
 import { addDynamicPromptsToGraph } from './addDynamicPromptsToGraph';
+import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
+import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
   IMAGE_TO_LATENTS,
   LATENTS_TO_IMAGE,
@@ -20,8 +22,6 @@ import {
   SDXL_LATENTS_TO_LATENTS,
   SDXL_MODEL_LOADER,
 } from './constants';
-import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 
 /**
  * Builds the Image to Image tab graph.
@@ -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: positiveStylePrompt,
+        style: shouldConcatSDXLStylePrompt
+          ? `${positivePrompt} ${positiveStylePrompt}`
+          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: negativeStylePrompt,
+        style: shouldConcatSDXLStylePrompt
+          ? `${negativePrompt} ${negativeStylePrompt}`
+          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -3,7 +3,9 @@ import { RootState } from 'app/store/store';
 import { NonNullableGraph } from 'features/nodes/types/types';
 import { initialGenerationState } from 'features/parameters/store/generationSlice';
 import { addDynamicPromptsToGraph } from './addDynamicPromptsToGraph';
+import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
 import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph';
+import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
   LATENTS_TO_IMAGE,
   METADATA_ACCUMULATOR,
@@ -14,8 +16,6 @@ import {
   SDXL_TEXT_TO_IMAGE_GRAPH,
   SDXL_TEXT_TO_LATENTS,
 } from './constants';
-import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
-import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 
 export const buildLinearSDXLTextToImageGraph = (
   state: RootState
@@ -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: positiveStylePrompt,
+        style: shouldConcatSDXLStylePrompt
+          ? `${positivePrompt} ${positiveStylePrompt}`
+          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: negativeStylePrompt,
+        style: shouldConcatSDXLStylePrompt
+          ? `${negativePrompt} ${negativeStylePrompt}`
+          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -0,0 +1,33 @@
+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: 2,
+      }}
+    >
+      <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

@@ -1,9 +1,10 @@
+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 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';
@@ -12,10 +13,22 @@ import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParamete
 const SDXLImageToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
-      <ParamSDXLPositiveStyleConditioning />
-      <ParamNegativeConditioning />
-      <ParamSDXLNegativeStyleConditioning />
+      <Flex
+        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,20 +1,34 @@
+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 ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
 import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 
 const SDXLTextToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
-      <ParamSDXLPositiveStyleConditioning />
-      <ParamNegativeConditioning />
-      <ParamSDXLNegativeStyleConditioning />
+      <Flex
+        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/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,

invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx

@@ -1,7 +1,10 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import SDXLImageToImageTabParameters from 'features/sdxl/components/SDXLImageToImageTabParameters';
+import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
 import {
   activeTabNameSelector,
@@ -39,21 +42,31 @@ const ParametersDrawer = () => {
     dispatch(setShouldShowParametersPanel(false));
   };
 
+  const model = useAppSelector((state: RootState) => state.generation.model);
+
   const drawerContent = useMemo(() => {
     if (activeTabName === 'txt2img') {
-      return <TextToImageTabParameters />;
+      return model && model.base_model === 'sdxl' ? (
+        <SDXLTextToImageTabParameters />
+      ) : (
+        <TextToImageTabParameters />
+      );
     }
 
     if (activeTabName === 'img2img') {
-      return <ImageToImageTabParameters />;
+      return model && model.base_model === 'sdxl' ? (
+        <SDXLImageToImageTabParameters />
+      ) : (
+        <ImageToImageTabParameters />
+      );
     }
 
     if (activeTabName === 'unifiedCanvas') {
       return <UnifiedCanvasParameters />;
     }
 
     return null;
-  }, [activeTabName]);
+  }, [activeTabName, model]);
 
   if (shouldPinParametersPanel) {
     return null;

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

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import TextToImageSDXLTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
+import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
 import { memo } from 'react';
 import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 import TextToImageTabMain from './TextToImageTabMain';
@@ -13,7 +13,7 @@ const TextToImageTab = () => {
     <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         {model && model.base_model === 'sdxl' ? (
-          <TextToImageSDXLTabParameters />
+          <SDXLTextToImageTabParameters />
         ) : (
           <TextToImageTabParameters />
         )}