fix(ui): fix sdxl style prompts

- Do not _merge_ prompt and style prompt when concat is enabled - either use the prompt as style, or use the style directly.
- Set style prompt metadata correctly.
- Add metadata recall for style prompt.

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

@@ -1223,7 +1223,7 @@
     },
     "sdxl": {
         "cfgScale": "CFG Scale",
-        "concatPromptStyle": "Concatenating Prompt & Style",
+        "concatPromptStyle": "Linking Prompt & Style",
         "freePromptStyle": "Manual Style Prompting",
         "denoisingStrength": "Denoising Strength",
         "loading": "Loading...",

invokeai/frontend/web/src/common/components/InvBadge/theme.ts

@@ -14,7 +14,7 @@ const baseStyle = defineStyle((props) => ({
   wordBreak: 'break-all',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  overflow: 'hidden'
+  overflow: 'hidden',
 }));
 
 export const badgeTheme = defineStyleConfig({

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx

@@ -45,6 +45,8 @@ const ImageMetadataActions = (props: Props) => {
     recallControlNet,
     recallIPAdapter,
     recallT2IAdapter,
+    recallSDXLPositiveStylePrompt,
+    recallSDXLNegativeStylePrompt,
   } = useRecallParameters();
 
   const handleRecallPositivePrompt = useCallback(() => {
@@ -55,6 +57,14 @@ const ImageMetadataActions = (props: Props) => {
     recallNegativePrompt(metadata?.negative_prompt);
   }, [metadata?.negative_prompt, recallNegativePrompt]);
 
+  const handleRecallSDXLPositiveStylePrompt = useCallback(() => {
+    recallSDXLPositiveStylePrompt(metadata?.positive_style_prompt);
+  }, [metadata?.positive_style_prompt, recallSDXLPositiveStylePrompt]);
+
+  const handleRecallSDXLNegativeStylePrompt = useCallback(() => {
+    recallSDXLNegativeStylePrompt(metadata?.negative__style_prompt);
+  }, [metadata?.negative__style_prompt, recallSDXLNegativeStylePrompt]);
+
   const handleRecallSeed = useCallback(() => {
     recallSeed(metadata?.seed);
   }, [metadata?.seed, recallSeed]);
@@ -193,6 +203,22 @@ const ImageMetadataActions = (props: Props) => {
           onClick={handleRecallNegativePrompt}
         />
       )}
+      {metadata.positive_style_prompt && (
+        <ImageMetadataItem
+          label={t('sdxl.posStylePrompt')}
+          labelPosition="top"
+          value={metadata.positive_style_prompt}
+          onClick={handleRecallSDXLPositiveStylePrompt}
+        />
+      )}
+      {metadata.negative_style_prompt && (
+        <ImageMetadataItem
+          label={t('sdxl.negStylePrompt')}
+          labelPosition="top"
+          value={metadata.negative_style_prompt}
+          onClick={handleRecallSDXLNegativeStylePrompt}
+        />
+      )}
       {metadata.seed !== undefined && metadata.seed !== null && (
         <ImageMetadataItem
           label={t('metadata.seed')}

invokeai/frontend/web/src/features/nodes/util/graph/addSDXLRefinerToGraph.ts

@@ -24,7 +24,7 @@ import {
   SDXL_REFINER_POSITIVE_CONDITIONING,
   SDXL_REFINER_SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 import { upsertMetadata } from './metadata';
 
 export const addSDXLRefinerToGraph = (
@@ -73,8 +73,8 @@ export const addSDXLRefinerToGraph = (
     : SDXL_MODEL_LOADER;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state, true);
+    getSDXLStylePrompts(state);
 
   // Unplug SDXL Latents Generation To Latents To Image
   graph.edges = graph.edges.filter(
@@ -95,13 +95,13 @@ export const addSDXLRefinerToGraph = (
   graph.nodes[SDXL_REFINER_POSITIVE_CONDITIONING] = {
     type: 'sdxl_refiner_compel_prompt',
     id: SDXL_REFINER_POSITIVE_CONDITIONING,
-    style: joinedPositiveStylePrompt,
+    style: positiveStylePrompt,
     aesthetic_score: refinerPositiveAestheticScore,
   };
   graph.nodes[SDXL_REFINER_NEGATIVE_CONDITIONING] = {
     type: 'sdxl_refiner_compel_prompt',
     id: SDXL_REFINER_NEGATIVE_CONDITIONING,
-    style: joinedNegativeStylePrompt,
+    style: negativeStylePrompt,
     aesthetic_score: refinerNegativeAestheticScore,
   };
   graph.nodes[SDXL_REFINER_DENOISE_LATENTS] = {

invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts

@@ -30,7 +30,7 @@ import {
   SDXL_REFINER_SEAMLESS,
   SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 import { addCoreMetadataNode } from './metadata';
 
 /**
@@ -81,8 +81,8 @@ export const buildCanvasSDXLImageToImageGraph = (
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state);
+    getSDXLStylePrompts(state);
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
@@ -106,13 +106,13 @@ export const buildCanvasSDXLImageToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: joinedPositiveStylePrompt,
+        style: positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: joinedNegativeStylePrompt,
+        style: negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',
@@ -344,6 +344,8 @@ export const buildCanvasSDXLImageToImageGraph = (
       scheduler,
       strength,
       init_image: initialImage.image_name,
+      positive_style_prompt: positiveStylePrompt,
+      negative_style_prompt: negativeStylePrompt,
     },
     CANVAS_OUTPUT
   );

invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts

@@ -44,7 +44,7 @@ import {
   SDXL_REFINER_SEAMLESS,
   SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 
 /**
  * Builds the Canvas tab's Inpaint graph.
@@ -99,8 +99,8 @@ export const buildCanvasSDXLInpaintGraph = (
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state);
+    getSDXLStylePrompts(state);
 
   const graph: NonNullableGraph = {
     id: SDXL_CANVAS_INPAINT_GRAPH,
@@ -114,13 +114,13 @@ export const buildCanvasSDXLInpaintGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: joinedPositiveStylePrompt,
+        style: positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: joinedNegativeStylePrompt,
+        style: negativeStylePrompt,
       },
       [MASK_BLUR]: {
         type: 'img_blur',

invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts

@@ -46,7 +46,7 @@ import {
   SDXL_REFINER_SEAMLESS,
   SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 
 /**
  * Builds the Canvas tab's Outpaint graph.
@@ -103,8 +103,8 @@ export const buildCanvasSDXLOutpaintGraph = (
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state);
+    getSDXLStylePrompts(state);
 
   const graph: NonNullableGraph = {
     id: SDXL_CANVAS_OUTPAINT_GRAPH,
@@ -118,13 +118,13 @@ export const buildCanvasSDXLOutpaintGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: joinedPositiveStylePrompt,
+        style: positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: joinedNegativeStylePrompt,
+        style: negativeStylePrompt,
       },
       [MASK_FROM_ALPHA]: {
         type: 'tomask',

invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts

@@ -24,7 +24,7 @@ import {
   SDXL_REFINER_SEAMLESS,
   SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 import { addCoreMetadataNode } from './metadata';
 
 /**
@@ -72,8 +72,8 @@ export const buildCanvasSDXLTextToImageGraph = (
   let modelLoaderNodeId = SDXL_MODEL_LOADER;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state);
+    getSDXLStylePrompts(state);
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
@@ -99,14 +99,14 @@ export const buildCanvasSDXLTextToImageGraph = (
         id: POSITIVE_CONDITIONING,
         is_intermediate,
         prompt: positivePrompt,
-        style: joinedPositiveStylePrompt,
+        style: positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         is_intermediate,
         prompt: negativePrompt,
-        style: joinedNegativeStylePrompt,
+        style: negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',
@@ -293,6 +293,8 @@ export const buildCanvasSDXLTextToImageGraph = (
         : scaledBoundingBoxDimensions.height,
       positive_prompt: positivePrompt,
       negative_prompt: negativePrompt,
+      positive_style_prompt: positiveStylePrompt,
+      negative_style_prompt: negativeStylePrompt,
       model,
       seed,
       steps,

invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts

@@ -19,7 +19,7 @@ export const prepareLinearUIBatch = (
   prepend: boolean
 ): BatchConfig => {
   const { iterations, model, shouldRandomizeSeed, seed } = state.generation;
-  const { shouldConcatSDXLStylePrompt, positiveStylePrompt } = state.sdxl;
+  const { shouldConcatSDXLStylePrompt } = state.sdxl;
   const { prompts, seedBehaviour } = state.dynamicPrompts;
 
   const data: Batch['data'] = [];
@@ -118,15 +118,11 @@ export const prepareLinearUIBatch = (
   }
 
   if (shouldConcatSDXLStylePrompt && model?.base_model === 'sdxl') {
-    const stylePrompts = extendedPrompts.map((p) =>
-      [p, positiveStylePrompt].join(' ')
-    );
-
     if (graph.nodes[POSITIVE_CONDITIONING]) {
       firstBatchDatumList.push({
         node_path: POSITIVE_CONDITIONING,
         field_name: 'style',
-        items: stylePrompts,
+        items: extendedPrompts,
       });
     }
 

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

@@ -29,7 +29,7 @@ import {
   SDXL_REFINER_SEAMLESS,
   SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 import { addCoreMetadataNode } from './metadata';
 
 /**
@@ -59,12 +59,7 @@ export const buildLinearSDXLImageToImageGraph = (
     img2imgStrength: strength,
   } = state.generation;
 
-  const {
+  const { refinerModel, refinerStart } = state.sdxl;
-    positiveStylePrompt,
-    negativeStylePrompt,
-    refinerModel,
-    refinerStart,
-  } = state.sdxl;
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
@@ -94,8 +89,8 @@ export const buildLinearSDXLImageToImageGraph = (
   const use_cpu = shouldUseCpuNoise;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state);
+    getSDXLStylePrompts(state);
 
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {
@@ -111,14 +106,14 @@ export const buildLinearSDXLImageToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: joinedPositiveStylePrompt,
+        style: positiveStylePrompt,
         is_intermediate,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: joinedNegativeStylePrompt,
+        style: negativeStylePrompt,
         is_intermediate,
       },
       [NOISE]: {

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

@@ -23,7 +23,7 @@ import {
   SDXL_TEXT_TO_IMAGE_GRAPH,
   SEAMLESS,
 } from './constants';
-import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
+import { getSDXLStylePrompts } from './getSDXLStylePrompt';
 import { addCoreMetadataNode } from './metadata';
 
 export const buildLinearSDXLTextToImageGraph = (
@@ -47,12 +47,7 @@ export const buildLinearSDXLTextToImageGraph = (
     seamlessYAxis,
   } = state.generation;
 
-  const {
+  const { refinerModel, refinerStart } = state.sdxl;
-    positiveStylePrompt,
-    negativeStylePrompt,
-    refinerModel,
-    refinerStart,
-  } = state.sdxl;
 
   const use_cpu = shouldUseCpuNoise;
 
@@ -65,8 +60,8 @@ export const buildLinearSDXLTextToImageGraph = (
   const is_intermediate = true;
 
   // Construct Style Prompt
-  const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
+  const { positiveStylePrompt, negativeStylePrompt } =
-    buildSDXLStylePrompts(state);
+    getSDXLStylePrompts(state);
 
   // Model Loader ID
   let modelLoaderNodeId = SDXL_MODEL_LOADER;
@@ -94,14 +89,14 @@ export const buildLinearSDXLTextToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: joinedPositiveStylePrompt,
+        style: positiveStylePrompt,
         is_intermediate,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: joinedNegativeStylePrompt,
+        style: negativeStylePrompt,
         is_intermediate,
       },
       [NOISE]: {

invokeai/frontend/web/src/features/nodes/util/graph/getSDXLStylePrompt.ts

@@ -0,0 +1,21 @@
+import type { RootState } from 'app/store/store';
+
+export const getSDXLStylePrompts = (
+  state: RootState
+): { positiveStylePrompt: string; negativeStylePrompt: string } => {
+  const { positivePrompt, negativePrompt } = state.generation;
+  const {
+    positiveStylePrompt,
+    negativeStylePrompt,
+    shouldConcatSDXLStylePrompt,
+  } = state.sdxl;
+
+  return {
+    positiveStylePrompt: shouldConcatSDXLStylePrompt
+      ? positivePrompt
+      : positiveStylePrompt,
+    negativeStylePrompt: shouldConcatSDXLStylePrompt
+      ? negativePrompt
+      : negativeStylePrompt,
+  };
+};

invokeai/frontend/web/src/features/nodes/util/graph/helpers/craftSDXLStylePrompt.ts

@@ -1,26 +0,0 @@
-import type { RootState } from 'app/store/store';
-
-export const buildSDXLStylePrompts = (
-  state: RootState,
-  overrideConcat?: boolean
-) => {
-  const { positivePrompt, negativePrompt } = state.generation;
-  const {
-    positiveStylePrompt,
-    negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
-  } = state.sdxl;
-
-  // Construct Style Prompt
-  const joinedPositiveStylePrompt =
-    shouldConcatSDXLStylePrompt || overrideConcat
-      ? [positivePrompt, positiveStylePrompt].join(' ')
-      : positiveStylePrompt;
-
-  const joinedNegativeStylePrompt =
-    shouldConcatSDXLStylePrompt || overrideConcat
-      ? [negativePrompt, negativeStylePrompt].join(' ')
-      : negativeStylePrompt;
-
-  return { joinedPositiveStylePrompt, joinedNegativeStylePrompt };
-};