From 59c2556e6b64dd92285eb6233f857cfba3027feb Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 26 Jul 2023 14:43:30 +1200 Subject: [PATCH] feat: Move SDXL Image Denoising to own component --- .../buildLinearSDXLImageToImageGraph.ts | 2 +- .../ParamSDXLImg2ImgDenoisingStrength.tsx | 54 +++++++++++++ .../SDXLImageToImageTabCoreParameters.tsx | 78 +++++++++++++++++++ .../SDXLImageToImageTabParameters.tsx | 4 +- .../SDXLRefiner/ParamSDXLRefinerStart.tsx | 13 ++-- .../web/src/features/sdxl/store/sdxlSlice.ts | 6 ++ 6 files changed, 146 insertions(+), 11 deletions(-) create mode 100644 invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx create mode 100644 invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.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 1465e5e606..e80821e060 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts @@ -39,7 +39,6 @@ export const buildLinearSDXLImageToImageGraph = ( shouldFitToWidthHeight, width, height, - img2imgStrength: strength, clipSkip, shouldUseCpuNoise, shouldUseNoiseSettings, @@ -51,6 +50,7 @@ export const buildLinearSDXLImageToImageGraph = ( negativeStylePrompt, shouldUseSDXLRefiner, refinerStart, + sdxlImg2ImgDenoisingStrength: strength, } = state.sdxl; /** diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx new file mode 100644 index 0000000000..ff9750dbeb --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx @@ -0,0 +1,54 @@ +import { createSelector } from '@reduxjs/toolkit'; +import { stateSelector } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAISlider from 'common/components/IAISlider'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { setSDXLImg2ImgDenoisingStrength } from '../store/sdxlSlice'; + +const selector = createSelector( + [stateSelector], + ({ sdxl }) => { + const { sdxlImg2ImgDenoisingStrength } = sdxl; + + return { + sdxlImg2ImgDenoisingStrength, + }; + }, + defaultSelectorOptions +); + +const ParamSDXLImg2ImgDenoisingStrength = () => { + const { sdxlImg2ImgDenoisingStrength } = useAppSelector(selector); + const dispatch = useAppDispatch(); + const { t } = useTranslation(); + + const handleChange = useCallback( + (v: number) => dispatch(setSDXLImg2ImgDenoisingStrength(v)), + [dispatch] + ); + + const handleReset = useCallback(() => { + dispatch(setSDXLImg2ImgDenoisingStrength(0.7)); + }, [dispatch]); + + return ( + + ); +}; + +export default memo(ParamSDXLImg2ImgDenoisingStrength); diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx new file mode 100644 index 0000000000..4d7c919655 --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx @@ -0,0 +1,78 @@ +import { Box, Flex } from '@chakra-ui/react'; +import { createSelector } from '@reduxjs/toolkit'; +import { useAppSelector } from 'app/store/storeHooks'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAICollapse from 'common/components/IAICollapse'; +import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale'; +import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations'; +import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler'; +import ParamSize from 'features/parameters/components/Parameters/Core/ParamSize'; +import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps'; +import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit'; +import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull'; +import { generationSelector } from 'features/parameters/store/generationSelectors'; +import { uiSelector } from 'features/ui/store/uiSelectors'; +import { memo } from 'react'; +import ParamSDXLImg2ImgDenoisingStrength from './ParamSDXLImg2ImgDenoisingStrength'; + +const selector = createSelector( + [uiSelector, generationSelector], + (ui, generation) => { + const { shouldUseSliders } = ui; + const { shouldRandomizeSeed } = generation; + + const activeLabel = !shouldRandomizeSeed ? 'Manual Seed' : undefined; + + return { shouldUseSliders, activeLabel }; + }, + defaultSelectorOptions +); + +const SDXLImageToImageTabCoreParameters = () => { + const { shouldUseSliders, activeLabel } = useAppSelector(selector); + + return ( + + + {shouldUseSliders ? ( + <> + + + + + + + + + + ) : ( + <> + + + + + + + + + + + + )} + + + + + ); +}; + +export default memo(SDXLImageToImageTabCoreParameters); diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx index a92e7a2fd0..778116eefe 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx @@ -4,10 +4,10 @@ import ParamPositiveConditioning from 'features/parameters/components/Parameters 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 ImageToImageTabCoreParameters from 'features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters'; import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; +import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters'; const SDXLImageToImageTabParameters = () => { return ( @@ -17,7 +17,7 @@ const SDXLImageToImageTabParameters = () => { - + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx index 83860cd6ab..fcf5b733a2 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx @@ -9,20 +9,17 @@ import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable' const selector = createSelector( [stateSelector], - ({ sdxl, hotkeys }) => { + ({ sdxl }) => { const { refinerStart } = sdxl; - const { shift } = hotkeys; - return { refinerStart, - shift, }; }, defaultSelectorOptions ); const ParamSDXLRefinerStart = () => { - const { refinerStart, shift } = useAppSelector(selector); + const { refinerStart } = useAppSelector(selector); const dispatch = useAppDispatch(); const isRefinerAvailable = useIsRefinerAvailable(); const handleChange = useCallback( @@ -38,13 +35,13 @@ const ParamSDXLRefinerStart = () => { return ( ) => { state.shouldUseSDXLRefiner = action.payload; }, + setSDXLImg2ImgDenoisingStrength: (state, action: PayloadAction) => { + state.sdxlImg2ImgDenoisingStrength = action.payload; + }, refinerModelChanged: ( state, action: PayloadAction @@ -72,6 +77,7 @@ export const { setPositiveStylePromptSDXL, setNegativeStylePromptSDXL, setShouldUseSDXLRefiner, + setSDXLImg2ImgDenoisingStrength, refinerModelChanged, setRefinerSteps, setRefinerCFGScale,