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..a260dbc467 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. @@ -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: positiveStylePrompt, + style: shouldConcatSDXLStylePrompt + ? `${positivePrompt} ${positiveStylePrompt}` + : positiveStylePrompt, }, [NEGATIVE_CONDITIONING]: { type: 'sdxl_compel_prompt', id: NEGATIVE_CONDITIONING, prompt: negativePrompt, - style: 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 36f35a90de..c10e7831d3 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 @@ -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: positiveStylePrompt, + style: shouldConcatSDXLStylePrompt + ? `${positivePrompt} ${positiveStylePrompt}` + : positiveStylePrompt, }, [NEGATIVE_CONDITIONING]: { type: 'sdxl_compel_prompt', id: NEGATIVE_CONDITIONING, prompt: negativePrompt, - style: 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..89e67be652 --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx @@ -0,0 +1,33 @@ +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..05aca62b79 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx @@ -1,9 +1,10 @@ +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'; 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'; @@ -12,10 +13,22 @@ import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParamete const SDXLImageToImageTabParameters = () => { return ( <> - - - - + + + + + + + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx index 2175fcc9e3..eddc0b8891 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx @@ -1,9 +1,11 @@ +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'; 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'; @@ -11,10 +13,22 @@ import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; const SDXLTextToImageTabParameters = () => { return ( <> - - - - + + + + + + + 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, 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 && ( 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; 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' ? ( - + ) : ( )}