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
parent 7ba2108eb0
commit 37c8b9d06a
13 changed files with 92 additions and 81 deletions
--- 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 };
-};