From 2baf521aa80987dfd540e48c4e599d318e881f66 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 04:34:26 +1200 Subject: [PATCH 1/4] fix: SDXL - Concat Prompt and Style for Style Prompt --- .../graphBuilders/buildLinearSDXLImageToImageGraph.ts | 8 ++++---- .../util/graphBuilders/buildLinearSDXLTextToImageGraph.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts index 8c82002b2e3..5a032db3991 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts @@ -7,7 +7,9 @@ import { ImageToLatentsInvocation, } from 'services/api/types'; import { addDynamicPromptsToGraph } from './addDynamicPromptsToGraph'; +import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph'; +import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { IMAGE_TO_LATENTS, LATENTS_TO_IMAGE, @@ -20,8 +22,6 @@ import { SDXL_LATENTS_TO_LATENTS, SDXL_MODEL_LOADER, } from './constants'; -import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; -import { addWatermarkerToGraph } from './addWatermarkerToGraph'; /** * Builds the Image to Image tab graph. @@ -91,13 +91,13 @@ export const buildLinearSDXLImageToImageGraph = ( type: 'sdxl_compel_prompt', id: POSITIVE_CONDITIONING, prompt: positivePrompt, - style: positiveStylePrompt, + style: `${positivePrompt} ${positiveStylePrompt}`, }, [NEGATIVE_CONDITIONING]: { type: 'sdxl_compel_prompt', id: NEGATIVE_CONDITIONING, prompt: negativePrompt, - style: negativeStylePrompt, + style: `${negativePrompt} ${negativeStylePrompt}`, }, [NOISE]: { type: 'noise', diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts index 36f35a90de1..42b7d5e0387 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts @@ -3,7 +3,9 @@ import { RootState } from 'app/store/store'; import { NonNullableGraph } from 'features/nodes/types/types'; import { initialGenerationState } from 'features/parameters/store/generationSlice'; import { addDynamicPromptsToGraph } from './addDynamicPromptsToGraph'; +import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph'; +import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { LATENTS_TO_IMAGE, METADATA_ACCUMULATOR, @@ -14,8 +16,6 @@ import { SDXL_TEXT_TO_IMAGE_GRAPH, SDXL_TEXT_TO_LATENTS, } from './constants'; -import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; -import { addWatermarkerToGraph } from './addWatermarkerToGraph'; export const buildLinearSDXLTextToImageGraph = ( state: RootState @@ -74,13 +74,13 @@ export const buildLinearSDXLTextToImageGraph = ( type: 'sdxl_compel_prompt', id: POSITIVE_CONDITIONING, prompt: positivePrompt, - style: positiveStylePrompt, + style: `${positivePrompt} ${positiveStylePrompt}`, }, [NEGATIVE_CONDITIONING]: { type: 'sdxl_compel_prompt', id: NEGATIVE_CONDITIONING, prompt: negativePrompt, - style: negativeStylePrompt, + style: `${negativePrompt} ${negativeStylePrompt}`, }, [NOISE]: { type: 'noise', From ddfcb3a8a0eafb8d37315f4d92b906159c00e256 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 04:55:55 +1200 Subject: [PATCH 2/4] feat: Add SDXL Style Prompt Concat Toggle --- .../buildLinearSDXLImageToImageGraph.ts | 9 ++++- .../buildLinearSDXLTextToImageGraph.ts | 9 ++++- .../sdxl/components/ParamSDXLConcatPrompt.tsx | 37 +++++++++++++++++++ .../SDXLImageToImageTabParameters.tsx | 3 +- .../SDXLTextToImageTabParameters.tsx | 2 + .../web/src/features/sdxl/store/sdxlSlice.ts | 6 +++ 6 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts index 5a032db3991..a260dbc4671 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts @@ -50,6 +50,7 @@ export const buildLinearSDXLImageToImageGraph = ( const { positiveStylePrompt, negativeStylePrompt, + shouldConcatSDXLStylePrompt, shouldUseSDXLRefiner, refinerStart, sdxlImg2ImgDenoisingStrength: strength, @@ -91,13 +92,17 @@ export const buildLinearSDXLImageToImageGraph = ( type: 'sdxl_compel_prompt', id: POSITIVE_CONDITIONING, prompt: positivePrompt, - style: `${positivePrompt} ${positiveStylePrompt}`, + style: shouldConcatSDXLStylePrompt + ? `${positivePrompt} ${positiveStylePrompt}` + : positiveStylePrompt, }, [NEGATIVE_CONDITIONING]: { type: 'sdxl_compel_prompt', id: NEGATIVE_CONDITIONING, prompt: negativePrompt, - style: `${negativePrompt} ${negativeStylePrompt}`, + style: shouldConcatSDXLStylePrompt + ? `${negativePrompt} ${negativeStylePrompt}` + : negativeStylePrompt, }, [NOISE]: { type: 'noise', diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts index 42b7d5e0387..c10e7831d3c 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts @@ -39,6 +39,7 @@ export const buildLinearSDXLTextToImageGraph = ( const { positiveStylePrompt, negativeStylePrompt, + shouldConcatSDXLStylePrompt, shouldUseSDXLRefiner, refinerStart, } = state.sdxl; @@ -74,13 +75,17 @@ export const buildLinearSDXLTextToImageGraph = ( type: 'sdxl_compel_prompt', id: POSITIVE_CONDITIONING, prompt: positivePrompt, - style: `${positivePrompt} ${positiveStylePrompt}`, + style: shouldConcatSDXLStylePrompt + ? `${positivePrompt} ${positiveStylePrompt}` + : positiveStylePrompt, }, [NEGATIVE_CONDITIONING]: { type: 'sdxl_compel_prompt', id: NEGATIVE_CONDITIONING, prompt: negativePrompt, - style: `${negativePrompt} ${negativeStylePrompt}`, + style: shouldConcatSDXLStylePrompt + ? `${negativePrompt} ${negativeStylePrompt}` + : negativeStylePrompt, }, [NOISE]: { type: 'noise', diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx new file mode 100644 index 00000000000..ad48a8af14a --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx @@ -0,0 +1,37 @@ +import { Box } from '@chakra-ui/react'; +import { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAISwitch from 'common/components/IAISwitch'; +import { ChangeEvent } from 'react'; +import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice'; + +export default function ParamSDXLConcatPrompt() { + const shouldConcatSDXLStylePrompt = useAppSelector( + (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt + ); + + const dispatch = useAppDispatch(); + + const handleShouldConcatPromptChange = (e: ChangeEvent) => { + dispatch(setShouldConcatSDXLStylePrompt(e.target.checked)); + }; + + return ( + + + + ); +} diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx index 778116eefef..4a0c46eb7c7 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx @@ -2,8 +2,8 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; -// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; +import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt'; import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; @@ -16,6 +16,7 @@ const SDXLImageToImageTabParameters = () => { + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx index 2175fcc9e39..e740cc336bb 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx @@ -4,6 +4,7 @@ import ParamPositiveConditioning from 'features/parameters/components/Parameters import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters'; +import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt'; import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; @@ -15,6 +16,7 @@ const SDXLTextToImageTabParameters = () => { + diff --git a/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts b/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts index 16bb806029d..7a8ccffa97c 100644 --- a/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts +++ b/invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts @@ -10,6 +10,7 @@ import { MainModelField } from 'services/api/types'; type SDXLInitialState = { positiveStylePrompt: PositiveStylePromptSDXLParam; negativeStylePrompt: NegativeStylePromptSDXLParam; + shouldConcatSDXLStylePrompt: boolean; shouldUseSDXLRefiner: boolean; sdxlImg2ImgDenoisingStrength: number; refinerModel: MainModelField | null; @@ -23,6 +24,7 @@ type SDXLInitialState = { const sdxlInitialState: SDXLInitialState = { positiveStylePrompt: '', negativeStylePrompt: '', + shouldConcatSDXLStylePrompt: true, shouldUseSDXLRefiner: false, sdxlImg2ImgDenoisingStrength: 0.7, refinerModel: null, @@ -43,6 +45,9 @@ const sdxlSlice = createSlice({ setNegativeStylePromptSDXL: (state, action: PayloadAction) => { state.negativeStylePrompt = action.payload; }, + setShouldConcatSDXLStylePrompt: (state, action: PayloadAction) => { + state.shouldConcatSDXLStylePrompt = action.payload; + }, setShouldUseSDXLRefiner: (state, action: PayloadAction) => { state.shouldUseSDXLRefiner = action.payload; }, @@ -76,6 +81,7 @@ const sdxlSlice = createSlice({ export const { setPositiveStylePromptSDXL, setNegativeStylePromptSDXL, + setShouldConcatSDXLStylePrompt, setShouldUseSDXLRefiner, setSDXLImg2ImgDenoisingStrength, refinerModelChanged, From 1489cf2cb0a4d0064f1c2d0697488286da7da693 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 05:28:04 +1200 Subject: [PATCH 3/4] fix: Improve Styling of SDXL Prompt Area --- .../sdxl/components/ParamSDXLConcatPrompt.tsx | 6 +---- .../SDXLImageToImageTabParameters.tsx | 22 ++++++++++++++----- .../SDXLTextToImageTabParameters.tsx | 22 ++++++++++++++----- .../tabs/TextToImage/TextToImageTab.tsx | 4 ++-- 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx index ad48a8af14a..89e67be6529 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx @@ -19,11 +19,7 @@ export default function ParamSDXLConcatPrompt() { return ( { return ( <> - - - - - + + + + + + + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx index e740cc336bb..eddc0b88912 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx @@ -1,3 +1,4 @@ +import { Flex } from '@chakra-ui/react'; import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; @@ -12,11 +13,22 @@ import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; const SDXLTextToImageTabParameters = () => { return ( <> - - - - - + + + + + + + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx index 8c3add3d621..7e6e02ff5ab 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx @@ -1,7 +1,7 @@ import { Flex } from '@chakra-ui/react'; import { RootState } from 'app/store/store'; import { useAppSelector } from 'app/store/storeHooks'; -import TextToImageSDXLTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters'; +import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters'; import { memo } from 'react'; import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; import TextToImageTabMain from './TextToImageTabMain'; @@ -13,7 +13,7 @@ const TextToImageTab = () => { {model && model.base_model === 'sdxl' ? ( - + ) : ( )} From 1b88586aa75eedaf9086c30fa4fb5c1551a72193 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 05:28:21 +1200 Subject: [PATCH 4/4] fix: Prompt Drawer Unpinned not having SDXL UI --- .../ui/components/ParametersDrawer.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx index 89400c09e58..393cb5bb34a 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx @@ -1,7 +1,10 @@ import { Flex } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; +import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import SDXLImageToImageTabParameters from 'features/sdxl/components/SDXLImageToImageTabParameters'; +import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters'; import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent'; import { activeTabNameSelector, @@ -39,13 +42,23 @@ const ParametersDrawer = () => { dispatch(setShouldShowParametersPanel(false)); }; + const model = useAppSelector((state: RootState) => state.generation.model); + const drawerContent = useMemo(() => { if (activeTabName === 'txt2img') { - return ; + return model && model.base_model === 'sdxl' ? ( + + ) : ( + + ); } if (activeTabName === 'img2img') { - return ; + return model && model.base_model === 'sdxl' ? ( + + ) : ( + + ); } if (activeTabName === 'unifiedCanvas') { @@ -53,7 +66,7 @@ const ParametersDrawer = () => { } return null; - }, [activeTabName]); + }, [activeTabName, model]); if (shouldPinParametersPanel) { return null;