feat: Move SDXL Image Denoising to own component

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;
 
   /**

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 (
+    <IAISlider
+      label={`${t('parameters.denoisingStrength')}`}
+      step={0.01}
+      min={0.01}
+      max={0.99}
+      onChange={handleChange}
+      handleReset={handleReset}
+      value={sdxlImg2ImgDenoisingStrength}
+      isInteger={false}
+      withInput
+      withSliderMarks
+      withReset
+      sliderNumberInputProps={{ max: 0.99 }}
+    />
+  );
+};
+
+export default memo(ParamSDXLImg2ImgDenoisingStrength);

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 (
+    <IAICollapse
+      label={'General'}
+      activeLabel={activeLabel}
+      defaultIsOpen={true}
+    >
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          gap: 3,
+        }}
+      >
+        {shouldUseSliders ? (
+          <>
+            <ParamIterations />
+            <ParamSteps />
+            <ParamCFGScale />
+            <ParamModelandVAEandScheduler />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
+            <ParamSize />
+          </>
+        ) : (
+          <>
+            <Flex gap={3}>
+              <ParamIterations />
+              <ParamSteps />
+              <ParamCFGScale />
+            </Flex>
+            <ParamModelandVAEandScheduler />
+            <Box pt={2}>
+              <ParamSeedFull />
+            </Box>
+            <ParamSize />
+          </>
+        )}
+        <ParamSDXLImg2ImgDenoisingStrength />
+        <ImageToImageFit />
+      </Flex>
+    </IAICollapse>
+  );
+};
+
+export default memo(SDXLImageToImageTabCoreParameters);

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 = () => {
       <ParamNegativeConditioning />
       <ParamSDXLNegativeStyleConditioning />
       <ProcessButtons />
-      <ImageToImageTabCoreParameters />
+      <SDXLImageToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamNoiseCollapse />

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 (
     <IAISlider
       label="Refiner Start"
-      step={shift ? 0.05 : 0.01}
+      step={0.01}
       min={0.01}
-      max={1}
+      max={0.99}
       onChange={handleChange}
       handleReset={handleReset}
       value={refinerStart}
-      sliderNumberInputProps={{ max: 1 }}
+      sliderNumberInputProps={{ max: 0.99 }}
       withInput
       withReset
       withSliderMarks

invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts

@@ -11,6 +11,7 @@ type SDXLInitialState = {
   positiveStylePrompt: PositiveStylePromptSDXLParam;
   negativeStylePrompt: NegativeStylePromptSDXLParam;
   shouldUseSDXLRefiner: boolean;
+  sdxlImg2ImgDenoisingStrength: number;
   refinerModel: MainModelField | null;
   refinerSteps: number;
   refinerCFGScale: number;
@@ -23,6 +24,7 @@ const sdxlInitialState: SDXLInitialState = {
   positiveStylePrompt: '',
   negativeStylePrompt: '',
   shouldUseSDXLRefiner: false,
+  sdxlImg2ImgDenoisingStrength: 0.7,
   refinerModel: null,
   refinerSteps: 20,
   refinerCFGScale: 7.5,
@@ -44,6 +46,9 @@ const sdxlSlice = createSlice({
     setShouldUseSDXLRefiner: (state, action: PayloadAction<boolean>) => {
       state.shouldUseSDXLRefiner = action.payload;
     },
+    setSDXLImg2ImgDenoisingStrength: (state, action: PayloadAction<number>) => {
+      state.sdxlImg2ImgDenoisingStrength = action.payload;
+    },
     refinerModelChanged: (
       state,
       action: PayloadAction<MainModelParam | null>
@@ -72,6 +77,7 @@ export const {
   setPositiveStylePromptSDXL,
   setNegativeStylePromptSDXL,
   setShouldUseSDXLRefiner,
+  setSDXLImg2ImgDenoisingStrength,
   refinerModelChanged,
   setRefinerSteps,
   setRefinerCFGScale,