feat: Make SDXL Style Prompt not take spaces

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

@@ -16,18 +16,16 @@ import {
   SDXL_REFINER_NEGATIVE_CONDITIONING,
   SDXL_REFINER_POSITIVE_CONDITIONING,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 export const addSDXLRefinerToGraph = (
   state: RootState,
   graph: NonNullableGraph,
   baseNodeId: string
 ): void => {
-  const { positivePrompt, negativePrompt } = state.generation;
   const {
     refinerModel,
     refinerAestheticScore,
-    positiveStylePrompt,
-    negativeStylePrompt,
     refinerSteps,
     refinerScheduler,
     refinerCFGScale,
@@ -49,6 +47,10 @@ export const addSDXLRefinerToGraph = (
     metadataAccumulator.refiner_steps = refinerSteps;
   }
 
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, true);
+
   // Unplug SDXL Latents Generation To Latents To Image
   graph.edges = graph.edges.filter(
     (e) =>
@@ -71,13 +73,13 @@ export const addSDXLRefinerToGraph = (
   graph.nodes[SDXL_REFINER_POSITIVE_CONDITIONING] = {
     type: 'sdxl_refiner_compel_prompt',
     id: SDXL_REFINER_POSITIVE_CONDITIONING,
-    style: `${positivePrompt} ${positiveStylePrompt}`,
+    style: craftedPositiveStylePrompt,
     aesthetic_score: refinerAestheticScore,
   };
   graph.nodes[SDXL_REFINER_NEGATIVE_CONDITIONING] = {
     type: 'sdxl_refiner_compel_prompt',
     id: SDXL_REFINER_NEGATIVE_CONDITIONING,
-    style: `${negativePrompt} ${negativeStylePrompt}`,
+    style: craftedNegativeStylePrompt,
     aesthetic_score: refinerAestheticScore,
   };
   graph.nodes[SDXL_REFINER_DENOISE_LATENTS] = {

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

@@ -26,6 +26,7 @@ import {
   SDXL_DENOISE_LATENTS,
   SDXL_MODEL_LOADER,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 /**
  * Builds the Canvas tab's Image to Image graph.
@@ -49,12 +50,10 @@ export const buildCanvasSDXLImageToImageGraph = (
   } = state.generation;
 
   const {
-    positiveStylePrompt,
-    negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
     shouldUseSDXLRefiner,
     refinerStart,
     sdxlImg2ImgDenoisingStrength: strength,
+    shouldConcatSDXLStylePrompt,
   } = state.sdxl;
 
   // The bounding box determines width and height, not the width and height params
@@ -71,6 +70,10 @@ export const buildCanvasSDXLImageToImageGraph = (
     ? shouldUseCpuNoise
     : initialGenerationState.shouldUseCpuNoise;
 
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, shouldConcatSDXLStylePrompt);
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -93,17 +96,13 @@ export const buildCanvasSDXLImageToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedPositiveStylePrompt,
-          ? `${positivePrompt} ${positiveStylePrompt}`
-          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedNegativeStylePrompt,
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -35,6 +35,7 @@ import {
   SDXL_DENOISE_LATENTS,
   SDXL_MODEL_LOADER,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 /**
  * Builds the Canvas tab's Inpaint graph.
@@ -63,13 +64,8 @@ export const buildCanvasSDXLInpaintGraph = (
     maskBlurMethod,
   } = state.generation;
 
-  const {
+  const { shouldUseSDXLRefiner, refinerStart, shouldConcatSDXLStylePrompt } =
-    positiveStylePrompt,
+    state.sdxl;
-    negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
-    shouldUseSDXLRefiner,
-    refinerStart,
-  } = state.sdxl;
 
   if (!model) {
     log.error('No model found in state');
@@ -90,6 +86,10 @@ export const buildCanvasSDXLInpaintGraph = (
     ? shouldUseCpuNoise
     : shouldUseCpuNoise;
 
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, shouldConcatSDXLStylePrompt);
+
   const graph: NonNullableGraph = {
     id: SDXL_CANVAS_INPAINT_GRAPH,
     nodes: {
@@ -102,17 +102,13 @@ export const buildCanvasSDXLInpaintGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedPositiveStylePrompt,
-          ? `${positivePrompt} ${positiveStylePrompt}`
-          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedNegativeStylePrompt,
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
       },
       [MASK_BLUR]: {
         type: 'img_blur',

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

@@ -41,6 +41,7 @@ import {
   SDXL_DENOISE_LATENTS,
   SDXL_MODEL_LOADER,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 /**
  * Builds the Canvas tab's Outpaint graph.
@@ -71,13 +72,8 @@ export const buildCanvasSDXLOutpaintGraph = (
     infillMethod,
   } = state.generation;
 
-  const {
+  const { shouldUseSDXLRefiner, refinerStart, shouldConcatSDXLStylePrompt } =
-    positiveStylePrompt,
+    state.sdxl;
-    negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
-    shouldUseSDXLRefiner,
-    refinerStart,
-  } = state.sdxl;
 
   if (!model) {
     log.error('No model found in state');
@@ -98,6 +94,10 @@ export const buildCanvasSDXLOutpaintGraph = (
     ? shouldUseCpuNoise
     : shouldUseCpuNoise;
 
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, shouldConcatSDXLStylePrompt);
+
   const graph: NonNullableGraph = {
     id: SDXL_CANVAS_OUTPAINT_GRAPH,
     nodes: {
@@ -110,17 +110,13 @@ export const buildCanvasSDXLOutpaintGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedPositiveStylePrompt,
-          ? `${positivePrompt} ${positiveStylePrompt}`
-          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedNegativeStylePrompt,
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
       },
       [MASK_FROM_ALPHA]: {
         type: 'tomask',

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

@@ -24,6 +24,7 @@ import {
   SDXL_DENOISE_LATENTS,
   SDXL_MODEL_LOADER,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 /**
  * Builds the Canvas tab's Text to Image graph.
@@ -50,13 +51,8 @@ export const buildCanvasSDXLTextToImageGraph = (
 
   const { shouldAutoSave } = state.canvas;
 
-  const {
+  const { shouldUseSDXLRefiner, refinerStart, shouldConcatSDXLStylePrompt } =
-    positiveStylePrompt,
+    state.sdxl;
-    negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
-    shouldUseSDXLRefiner,
-    refinerStart,
-  } = state.sdxl;
 
   if (!model) {
     log.error('No model found in state');
@@ -97,6 +93,11 @@ export const buildCanvasSDXLTextToImageGraph = (
           denoising_start: 0,
           denoising_end: shouldUseSDXLRefiner ? refinerStart : 1,
         };
+
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, shouldConcatSDXLStylePrompt);
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -122,18 +123,14 @@ export const buildCanvasSDXLTextToImageGraph = (
         id: POSITIVE_CONDITIONING,
         is_intermediate: true,
         prompt: positivePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedPositiveStylePrompt,
-          ? `${positivePrompt} ${positiveStylePrompt}`
-          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: isUsingOnnxModel ? 'prompt_onnx' : 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         is_intermediate: true,
         prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedNegativeStylePrompt,
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -25,6 +25,7 @@ import {
   SDXL_IMAGE_TO_IMAGE_GRAPH,
   SDXL_MODEL_LOADER,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 /**
  * Builds the Image to Image tab graph.
@@ -82,6 +83,10 @@ export const buildLinearSDXLImageToImageGraph = (
     ? shouldUseCpuNoise
     : initialGenerationState.shouldUseCpuNoise;
 
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, shouldConcatSDXLStylePrompt);
+
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {
     id: SDXL_IMAGE_TO_IMAGE_GRAPH,
@@ -95,17 +100,13 @@ export const buildLinearSDXLImageToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedPositiveStylePrompt,
-          ? `${positivePrompt} ${positiveStylePrompt}`
-          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedNegativeStylePrompt,
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -19,6 +19,7 @@ import {
   SDXL_MODEL_LOADER,
   SDXL_TEXT_TO_IMAGE_GRAPH,
 } from './constants';
+import { craftSDXLStylePrompt } from './helpers/craftSDXLStylePrompt';
 
 export const buildLinearSDXLTextToImageGraph = (
   state: RootState
@@ -42,8 +43,8 @@ export const buildLinearSDXLTextToImageGraph = (
   const {
     positiveStylePrompt,
     negativeStylePrompt,
-    shouldConcatSDXLStylePrompt,
     shouldUseSDXLRefiner,
+    shouldConcatSDXLStylePrompt,
     refinerStart,
   } = state.sdxl;
 
@@ -56,6 +57,10 @@ export const buildLinearSDXLTextToImageGraph = (
     throw new Error('No model found in state');
   }
 
+  // Construct Style Prompt
+  const { craftedPositiveStylePrompt, craftedNegativeStylePrompt } =
+    craftSDXLStylePrompt(state, shouldConcatSDXLStylePrompt);
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -78,17 +83,13 @@ export const buildLinearSDXLTextToImageGraph = (
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
         prompt: positivePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedPositiveStylePrompt,
-          ? `${positivePrompt} ${positiveStylePrompt}`
-          : positiveStylePrompt,
       },
       [NEGATIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: NEGATIVE_CONDITIONING,
         prompt: negativePrompt,
-        style: shouldConcatSDXLStylePrompt
+        style: craftedNegativeStylePrompt,
-          ? `${negativePrompt} ${negativeStylePrompt}`
-          : negativeStylePrompt,
       },
       [NOISE]: {
         type: 'noise',

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

@@ -0,0 +1,28 @@
+import { RootState } from 'app/store/store';
+
+export const craftSDXLStylePrompt = (
+  state: RootState,
+  shouldConcatSDXLStylePrompt: boolean
+) => {
+  const { positivePrompt, negativePrompt } = state.generation;
+  const { positiveStylePrompt, negativeStylePrompt } = state.sdxl;
+
+  let craftedPositiveStylePrompt = positiveStylePrompt;
+  let craftedNegativeStylePrompt = negativeStylePrompt;
+
+  if (shouldConcatSDXLStylePrompt) {
+    if (positiveStylePrompt.length > 0) {
+      craftedPositiveStylePrompt = `${positivePrompt} ${positiveStylePrompt}`;
+    } else {
+      craftedPositiveStylePrompt = positivePrompt;
+    }
+
+    if (negativeStylePrompt.length > 0) {
+      craftedNegativeStylePrompt = `${negativePrompt} ${negativeStylePrompt}`;
+    } else {
+      craftedNegativeStylePrompt = negativePrompt;
+    }
+  }
+
+  return { craftedPositiveStylePrompt, craftedNegativeStylePrompt };
+};