ui: encase Denoising Strength to make it more prominent

This commit is contained in:
blessedcoolant 2023-08-30 09:32:41 +12:00
parent 1b6586dd8c
commit 55f19aff3a
3 changed files with 34 additions and 28 deletions

View File

@ -6,6 +6,7 @@ import IAISlider from 'common/components/IAISlider';
import { setImg2imgStrength } from 'features/parameters/store/generationSlice'; import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import SubParametersWrapper from '../SubParametersWrapper';
const selector = createSelector( const selector = createSelector(
[stateSelector], [stateSelector],
@ -44,6 +45,7 @@ const ImageToImageStrength = () => {
}, [dispatch, initial]); }, [dispatch, initial]);
return ( return (
<SubParametersWrapper>
<IAISlider <IAISlider
label={`${t('parameters.denoisingStrength')}`} label={`${t('parameters.denoisingStrength')}`}
step={step} step={step}
@ -58,6 +60,7 @@ const ImageToImageStrength = () => {
withReset withReset
sliderNumberInputProps={{ max: inputMax }} sliderNumberInputProps={{ max: inputMax }}
/> />
</SubParametersWrapper>
); );
}; };

View File

@ -2,7 +2,7 @@ import { Flex, Text } from '@chakra-ui/react';
import { ReactNode, memo } from 'react'; import { ReactNode, memo } from 'react';
type SubParameterWrapperProps = { type SubParameterWrapperProps = {
children: ReactNode[]; children: ReactNode | ReactNode[];
label?: string; label?: string;
}; };

View File

@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISlider from 'common/components/IAISlider'; import IAISlider from 'common/components/IAISlider';
import SubParametersWrapper from 'features/parameters/components/Parameters/SubParametersWrapper';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { setSDXLImg2ImgDenoisingStrength } from '../store/sdxlSlice'; import { setSDXLImg2ImgDenoisingStrength } from '../store/sdxlSlice';
@ -34,6 +35,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
}, [dispatch]); }, [dispatch]);
return ( return (
<SubParametersWrapper>
<IAISlider <IAISlider
label={`${t('parameters.denoisingStrength')}`} label={`${t('parameters.denoisingStrength')}`}
step={0.01} step={0.01}
@ -47,6 +49,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
withSliderMarks withSliderMarks
withReset withReset
/> />
</SubParametersWrapper>
); );
}; };