From f86d0d1b69b40d560191f99d200ca74a4e684793 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Wed, 26 Jul 2023 10:55:38 -0400 Subject: [PATCH 1/5] hide localization toggle --- .../SettingsModal/SettingsModal.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index ede125592a..af810f7836 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -104,6 +104,7 @@ type ConfigOptions = { shouldShowAdvancedOptionsSettings: boolean; shouldShowClearIntermediates: boolean; shouldShowNodesToggle: boolean; + shouldShowLocalizationToggle: boolean; }; type SettingsModalProps = { @@ -125,6 +126,8 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { const shouldShowClearIntermediates = config?.shouldShowClearIntermediates ?? true; const shouldShowNodesToggle = config?.shouldShowNodesToggle ?? true; + const shouldShowLocalizationToggle = + config?.shouldShowLocalizationToggle ?? true; useEffect(() => { if (!shouldShowDeveloperSettings) { @@ -325,16 +328,18 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { onChange={handleToggleNodes} /> )} - ({ - value, - label, - }))} - onChange={handleLanguageChanged} - /> + {shouldShowLocalizationToggle && ( + ({ + value, + label, + }))} + onChange={handleLanguageChanged} + /> + )} {shouldShowDeveloperSettings && ( From b6522cf2cf42495d6694c697605566a794db851e 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 2/5] 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 8c82002b2e..5a032db399 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 36f35a90de..42b7d5e038 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 3bd9c27a798b37b300fb8eb3a7143c9404bd86ca 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 3/5] 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 5a032db399..a260dbc467 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 42b7d5e038..c10e7831d3 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 0000000000..ad48a8af14 --- /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 778116eefe..4a0c46eb7c 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 2175fcc9e3..e740cc336b 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 16bb806029..7a8ccffa97 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 0420d75d2bf1af51a793c25b27b8d7d98d0aa2bb 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 4/5] 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 ad48a8af14..89e67be652 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 e740cc336b..eddc0b8891 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 8c3add3d62..7e6e02ff5a 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 3376968cbbd12665ba58179d94326afffb5dc223 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 5/5] 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 89400c09e5..393cb5bb34 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;