Skip to content

Commit 37c8b9d

Browse files
psychedeliciouspsychedelicious
committed
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.
1 parent 7ba2108 commit 37c8b9d

File tree

13 files changed

+92
-81
lines changed

13 files changed

+92
-81
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1223,7 +1223,7 @@
12231223
},
12241224
"sdxl": {
12251225
"cfgScale": "CFG Scale",
1226-
"concatPromptStyle": "Concatenating Prompt & Style",
1226+
"concatPromptStyle": "Linking Prompt & Style",
12271227
"freePromptStyle": "Manual Style Prompting",
12281228
"denoisingStrength": "Denoising Strength",
12291229
"loading": "Loading...",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const baseStyle = defineStyle((props) => ({
1414
wordBreak: 'break-all',
1515
whiteSpace: 'nowrap',
1616
textOverflow: 'ellipsis',
17-
overflow: 'hidden'
17+
overflow: 'hidden',
1818
}));
1919

2020
export const badgeTheme = defineStyleConfig({

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ const ImageMetadataActions = (props: Props) => {
4545
recallControlNet,
4646
recallIPAdapter,
4747
recallT2IAdapter,
48+
recallSDXLPositiveStylePrompt,
49+
recallSDXLNegativeStylePrompt,
4850
} = useRecallParameters();
4951

5052
const handleRecallPositivePrompt = useCallback(() => {
@@ -55,6 +57,14 @@ const ImageMetadataActions = (props: Props) => {
5557
recallNegativePrompt(metadata?.negative_prompt);
5658
}, [metadata?.negative_prompt, recallNegativePrompt]);
5759

60+
const handleRecallSDXLPositiveStylePrompt = useCallback(() => {
61+
recallSDXLPositiveStylePrompt(metadata?.positive_style_prompt);
62+
}, [metadata?.positive_style_prompt, recallSDXLPositiveStylePrompt]);
63+
64+
const handleRecallSDXLNegativeStylePrompt = useCallback(() => {
65+
recallSDXLNegativeStylePrompt(metadata?.negative__style_prompt);
66+
}, [metadata?.negative__style_prompt, recallSDXLNegativeStylePrompt]);
67+
5868
const handleRecallSeed = useCallback(() => {
5969
recallSeed(metadata?.seed);
6070
}, [metadata?.seed, recallSeed]);
@@ -193,6 +203,22 @@ const ImageMetadataActions = (props: Props) => {
193203
onClick={handleRecallNegativePrompt}
194204
/>
195205
)}
206+
{metadata.positive_style_prompt && (
207+
<ImageMetadataItem
208+
label={t('sdxl.posStylePrompt')}
209+
labelPosition="top"
210+
value={metadata.positive_style_prompt}
211+
onClick={handleRecallSDXLPositiveStylePrompt}
212+
/>
213+
)}
214+
{metadata.negative_style_prompt && (
215+
<ImageMetadataItem
216+
label={t('sdxl.negStylePrompt')}
217+
labelPosition="top"
218+
value={metadata.negative_style_prompt}
219+
onClick={handleRecallSDXLNegativeStylePrompt}
220+
/>
221+
)}
196222
{metadata.seed !== undefined && metadata.seed !== null && (
197223
<ImageMetadataItem
198224
label={t('metadata.seed')}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
SDXL_REFINER_POSITIVE_CONDITIONING,
2525
SDXL_REFINER_SEAMLESS,
2626
} from './constants';
27-
import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
27+
import { getSDXLStylePrompts } from './getSDXLStylePrompt';
2828
import { upsertMetadata } from './metadata';
2929

3030
export const addSDXLRefinerToGraph = (
@@ -73,8 +73,8 @@ export const addSDXLRefinerToGraph = (
7373
: SDXL_MODEL_LOADER;
7474

7575
// Construct Style Prompt
76-
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
77-
buildSDXLStylePrompts(state, true);
76+
const { positiveStylePrompt, negativeStylePrompt } =
77+
getSDXLStylePrompts(state);
7878

7979
// Unplug SDXL Latents Generation To Latents To Image
8080
graph.edges = graph.edges.filter(
@@ -95,13 +95,13 @@ export const addSDXLRefinerToGraph = (
9595
graph.nodes[SDXL_REFINER_POSITIVE_CONDITIONING] = {
9696
type: 'sdxl_refiner_compel_prompt',
9797
id: SDXL_REFINER_POSITIVE_CONDITIONING,
98-
style: joinedPositiveStylePrompt,
98+
style: positiveStylePrompt,
9999
aesthetic_score: refinerPositiveAestheticScore,
100100
};
101101
graph.nodes[SDXL_REFINER_NEGATIVE_CONDITIONING] = {
102102
type: 'sdxl_refiner_compel_prompt',
103103
id: SDXL_REFINER_NEGATIVE_CONDITIONING,
104-
style: joinedNegativeStylePrompt,
104+
style: negativeStylePrompt,
105105
aesthetic_score: refinerNegativeAestheticScore,
106106
};
107107
graph.nodes[SDXL_REFINER_DENOISE_LATENTS] = {

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
SDXL_REFINER_SEAMLESS,
3131
SEAMLESS,
3232
} from './constants';
33-
import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
33+
import { getSDXLStylePrompts } from './getSDXLStylePrompt';
3434
import { addCoreMetadataNode } from './metadata';
3535

3636
/**
@@ -81,8 +81,8 @@ export const buildCanvasSDXLImageToImageGraph = (
8181
const use_cpu = shouldUseCpuNoise;
8282

8383
// Construct Style Prompt
84-
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
85-
buildSDXLStylePrompts(state);
84+
const { positiveStylePrompt, negativeStylePrompt } =
85+
getSDXLStylePrompts(state);
8686

8787
/**
8888
* 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 = (
106106
type: 'sdxl_compel_prompt',
107107
id: POSITIVE_CONDITIONING,
108108
prompt: positivePrompt,
109-
style: joinedPositiveStylePrompt,
109+
style: positiveStylePrompt,
110110
},
111111
[NEGATIVE_CONDITIONING]: {
112112
type: 'sdxl_compel_prompt',
113113
id: NEGATIVE_CONDITIONING,
114114
prompt: negativePrompt,
115-
style: joinedNegativeStylePrompt,
115+
style: negativeStylePrompt,
116116
},
117117
[NOISE]: {
118118
type: 'noise',
@@ -344,6 +344,8 @@ export const buildCanvasSDXLImageToImageGraph = (
344344
scheduler,
345345
strength,
346346
init_image: initialImage.image_name,
347+
positive_style_prompt: positiveStylePrompt,
348+
negative_style_prompt: negativeStylePrompt,
347349
},
348350
CANVAS_OUTPUT
349351
);

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import {
4444
SDXL_REFINER_SEAMLESS,
4545
SEAMLESS,
4646
} from './constants';
47-
import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
47+
import { getSDXLStylePrompts } from './getSDXLStylePrompt';
4848

4949
/**
5050
* Builds the Canvas tab's Inpaint graph.
@@ -99,8 +99,8 @@ export const buildCanvasSDXLInpaintGraph = (
9999
const use_cpu = shouldUseCpuNoise;
100100

101101
// Construct Style Prompt
102-
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
103-
buildSDXLStylePrompts(state);
102+
const { positiveStylePrompt, negativeStylePrompt } =
103+
getSDXLStylePrompts(state);
104104

105105
const graph: NonNullableGraph = {
106106
id: SDXL_CANVAS_INPAINT_GRAPH,
@@ -114,13 +114,13 @@ export const buildCanvasSDXLInpaintGraph = (
114114
type: 'sdxl_compel_prompt',
115115
id: POSITIVE_CONDITIONING,
116116
prompt: positivePrompt,
117-
style: joinedPositiveStylePrompt,
117+
style: positiveStylePrompt,
118118
},
119119
[NEGATIVE_CONDITIONING]: {
120120
type: 'sdxl_compel_prompt',
121121
id: NEGATIVE_CONDITIONING,
122122
prompt: negativePrompt,
123-
style: joinedNegativeStylePrompt,
123+
style: negativeStylePrompt,
124124
},
125125
[MASK_BLUR]: {
126126
type: 'img_blur',

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import {
4646
SDXL_REFINER_SEAMLESS,
4747
SEAMLESS,
4848
} from './constants';
49-
import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
49+
import { getSDXLStylePrompts } from './getSDXLStylePrompt';
5050

5151
/**
5252
* Builds the Canvas tab's Outpaint graph.
@@ -103,8 +103,8 @@ export const buildCanvasSDXLOutpaintGraph = (
103103
const use_cpu = shouldUseCpuNoise;
104104

105105
// Construct Style Prompt
106-
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
107-
buildSDXLStylePrompts(state);
106+
const { positiveStylePrompt, negativeStylePrompt } =
107+
getSDXLStylePrompts(state);
108108

109109
const graph: NonNullableGraph = {
110110
id: SDXL_CANVAS_OUTPAINT_GRAPH,
@@ -118,13 +118,13 @@ export const buildCanvasSDXLOutpaintGraph = (
118118
type: 'sdxl_compel_prompt',
119119
id: POSITIVE_CONDITIONING,
120120
prompt: positivePrompt,
121-
style: joinedPositiveStylePrompt,
121+
style: positiveStylePrompt,
122122
},
123123
[NEGATIVE_CONDITIONING]: {
124124
type: 'sdxl_compel_prompt',
125125
id: NEGATIVE_CONDITIONING,
126126
prompt: negativePrompt,
127-
style: joinedNegativeStylePrompt,
127+
style: negativeStylePrompt,
128128
},
129129
[MASK_FROM_ALPHA]: {
130130
type: 'tomask',

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
SDXL_REFINER_SEAMLESS,
2525
SEAMLESS,
2626
} from './constants';
27-
import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
27+
import { getSDXLStylePrompts } from './getSDXLStylePrompt';
2828
import { addCoreMetadataNode } from './metadata';
2929

3030
/**
@@ -72,8 +72,8 @@ export const buildCanvasSDXLTextToImageGraph = (
7272
let modelLoaderNodeId = SDXL_MODEL_LOADER;
7373

7474
// Construct Style Prompt
75-
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
76-
buildSDXLStylePrompts(state);
75+
const { positiveStylePrompt, negativeStylePrompt } =
76+
getSDXLStylePrompts(state);
7777

7878
/**
7979
* 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 = (
9999
id: POSITIVE_CONDITIONING,
100100
is_intermediate,
101101
prompt: positivePrompt,
102-
style: joinedPositiveStylePrompt,
102+
style: positiveStylePrompt,
103103
},
104104
[NEGATIVE_CONDITIONING]: {
105105
type: 'sdxl_compel_prompt',
106106
id: NEGATIVE_CONDITIONING,
107107
is_intermediate,
108108
prompt: negativePrompt,
109-
style: joinedNegativeStylePrompt,
109+
style: negativeStylePrompt,
110110
},
111111
[NOISE]: {
112112
type: 'noise',
@@ -293,6 +293,8 @@ export const buildCanvasSDXLTextToImageGraph = (
293293
: scaledBoundingBoxDimensions.height,
294294
positive_prompt: positivePrompt,
295295
negative_prompt: negativePrompt,
296+
positive_style_prompt: positiveStylePrompt,
297+
negative_style_prompt: negativeStylePrompt,
296298
model,
297299
seed,
298300
steps,

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const prepareLinearUIBatch = (
1919
prepend: boolean
2020
): BatchConfig => {
2121
const { iterations, model, shouldRandomizeSeed, seed } = state.generation;
22-
const { shouldConcatSDXLStylePrompt, positiveStylePrompt } = state.sdxl;
22+
const { shouldConcatSDXLStylePrompt } = state.sdxl;
2323
const { prompts, seedBehaviour } = state.dynamicPrompts;
2424

2525
const data: Batch['data'] = [];
@@ -118,15 +118,11 @@ export const prepareLinearUIBatch = (
118118
}
119119

120120
if (shouldConcatSDXLStylePrompt && model?.base_model === 'sdxl') {
121-
const stylePrompts = extendedPrompts.map((p) =>
122-
[p, positiveStylePrompt].join(' ')
123-
);
124-
125121
if (graph.nodes[POSITIVE_CONDITIONING]) {
126122
firstBatchDatumList.push({
127123
node_path: POSITIVE_CONDITIONING,
128124
field_name: 'style',
129-
items: stylePrompts,
125+
items: extendedPrompts,
130126
});
131127
}
132128

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

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
SDXL_REFINER_SEAMLESS,
3030
SEAMLESS,
3131
} from './constants';
32-
import { buildSDXLStylePrompts } from './helpers/craftSDXLStylePrompt';
32+
import { getSDXLStylePrompts } from './getSDXLStylePrompt';
3333
import { addCoreMetadataNode } from './metadata';
3434

3535
/**
@@ -59,12 +59,7 @@ export const buildLinearSDXLImageToImageGraph = (
5959
img2imgStrength: strength,
6060
} = state.generation;
6161

62-
const {
63-
positiveStylePrompt,
64-
negativeStylePrompt,
65-
refinerModel,
66-
refinerStart,
67-
} = state.sdxl;
62+
const { refinerModel, refinerStart } = state.sdxl;
6863

6964
/**
7065
* 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 = (
9489
const use_cpu = shouldUseCpuNoise;
9590

9691
// Construct Style Prompt
97-
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
98-
buildSDXLStylePrompts(state);
92+
const { positiveStylePrompt, negativeStylePrompt } =
93+
getSDXLStylePrompts(state);
9994

10095
// copy-pasted graph from node editor, filled in with state values & friendly node ids
10196
const graph: NonNullableGraph = {
@@ -111,14 +106,14 @@ export const buildLinearSDXLImageToImageGraph = (
111106
type: 'sdxl_compel_prompt',
112107
id: POSITIVE_CONDITIONING,
113108
prompt: positivePrompt,
114-
style: joinedPositiveStylePrompt,
109+
style: positiveStylePrompt,
115110
is_intermediate,
116111
},
117112
[NEGATIVE_CONDITIONING]: {
118113
type: 'sdxl_compel_prompt',
119114
id: NEGATIVE_CONDITIONING,
120115
prompt: negativePrompt,
121-
style: joinedNegativeStylePrompt,
116+
style: negativeStylePrompt,
122117
is_intermediate,
123118
},
124119
[NOISE]: {

0 commit comments

Comments
 (0)