Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: encase Denoising Strength to make it more prominent

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx
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,20 +45,22 @@ const ImageToImageStrength = () => {
}, [dispatch, initial]); }, [dispatch, initial]);
return ( return (
<IAISlider <SubParametersWrapper>
label={`${t('parameters.denoisingStrength')}`} <IAISlider
step={step} label={`${t('parameters.denoisingStrength')}`}
min={min} step={step}
max={sliderMax} min={min}
onChange={handleChange} max={sliderMax}
handleReset={handleReset} onChange={handleChange}
value={img2imgStrength} handleReset={handleReset}
isInteger={false} value={img2imgStrength}
withInput isInteger={false}
withSliderMarks withInput
withReset withSliderMarks
sliderNumberInputProps={{ max: inputMax }} withReset
/> sliderNumberInputProps={{ max: inputMax }}
/>
</SubParametersWrapper>
); );
}; };

2
invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx
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;
}; };

29
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx
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,19 +35,21 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
}, [dispatch]); }, [dispatch]);
return ( return (
<IAISlider <SubParametersWrapper>
label={`${t('parameters.denoisingStrength')}`} <IAISlider
step={0.01} label={`${t('parameters.denoisingStrength')}`}
min={0} step={0.01}
max={1} min={0}
onChange={handleChange} max={1}
handleReset={handleReset} onChange={handleChange}
value={sdxlImg2ImgDenoisingStrength} handleReset={handleReset}
isInteger={false} value={sdxlImg2ImgDenoisingStrength}
withInput isInteger={false}
withSliderMarks withInput
withReset withSliderMarks
/> withReset
/>
</SubParametersWrapper>
); );
}; };