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.
2024-08-30 20:32:17 +00:00 · 2024-01-03 10:44:24 +11:00 · 2024-01-03 10:44:24 +11:00 · 37c8b9d06a
commit 37c8b9d06a
parent 7ba2108eb0
13 changed files with 92 additions and 81 deletions
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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...",
--- a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts
+++ b/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({
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/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')}
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addSDXLRefinerToGraph.ts
+++ b/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 } =
-    buildSDXLStylePrompts(state, true);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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] = {
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts
+++ b/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 } =
-    buildSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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
  );
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts
+++ b/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 } =
-    buildSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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',
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts
+++ b/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 } =
-    buildSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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',
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts
+++ b/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 } =
-    buildSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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,
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
+++ b/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,
      });
    }

--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLImageToImageGraph.ts
+++ b/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 {
-    positiveStylePrompt,
-    negativeStylePrompt,
-    refinerModel,
-    refinerStart,
-  } = state.sdxl;
+  const { 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 } =
-    buildSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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]: {
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts
+++ b/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 {
-    positiveStylePrompt,
-    negativeStylePrompt,
-    refinerModel,
-    refinerStart,
-  } = state.sdxl;
+  const { 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 } =
-    buildSDXLStylePrompts(state);
+  const { positiveStylePrompt, negativeStylePrompt } =
+    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]: {
--- a/invokeai/frontend/web/src/features/nodes/util/graph/getSDXLStylePrompt.ts
+++ b/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,
+  };
+};
--- a/invokeai/frontend/web/src/features/nodes/util/graph/helpers/craftSDXLStylePrompt.ts
+++ b/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 };
-};