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

feat(ui): support negative controlnet weights

Browse Source
This commit is contained in:
psychedelicious 2023-06-12 11:23:44 +10:00
parent 8607b1994c
commit af42d7d347
17 changed files with 112 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

@ -1,4 +1,5 @@
import {
ChakraProps,
FormControl,
FormControlProps,
FormLabel,
@ -39,6 +40,11 @@ import { BiReset } from 'react-icons/bi';
import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
mt: 1.5,
fontSize: '2xs',
};
export type IAIFullSliderProps = {
label?: string;
value: number;
@ -57,6 +63,7 @@ export type IAIFullSliderProps = {
hideTooltip?: boolean;
isCompact?: boolean;
isDisabled?: boolean;
sliderMarks?: number[];
sliderFormControlProps?: FormControlProps;
sliderFormLabelProps?: FormLabelProps;
sliderMarkProps?: Omit<SliderMarkProps, 'value'>;
@ -88,6 +95,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
hideTooltip = false,
isCompact = false,
isDisabled = false,
sliderMarks,
handleReset,
sliderFormControlProps,
sliderFormLabelProps,
@ -198,14 +206,14 @@ const IAISlider = (props: IAIFullSliderProps) => {
isDisabled={isDisabled}
{...rest}
>
{withSliderMarks && (
{withSliderMarks && !sliderMarks && (
<>
<SliderMark
value={min}
sx={{
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
mt: 1.5,
...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
@ -216,7 +224,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
mt: 1.5,
...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
@ -224,6 +232,56 @@ const IAISlider = (props: IAIFullSliderProps) => {
</SliderMark>
</>
)}
{withSliderMarks && sliderMarks && (
<>
{sliderMarks.map((m, i) => {
if (i === 0) {
return (
<SliderMark
key={m}
value={m}
sx={{
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
{m}
</SliderMark>
);
} else if (i === sliderMarks.length - 1) {
return (
<SliderMark
key={m}
value={m}
sx={{
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
{m}
</SliderMark>
);
} else {
return (
<SliderMark
key={m}
value={m}
sx={{
...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
{m}
</SliderMark>
);
}
})}
</>
)}
<SliderTrack {...sliderTrackProps}>
<SliderFilledTrack />

6
invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
View File

@ -143,7 +143,7 @@ const ControlNet = (props: ControlNetProps) => {
flexDir: 'column',
gap: 2,
w: 'full',
h: 24,
h: isExpanded ? 28 : 24,
paddingInlineStart: 1,
paddingInlineEnd: isExpanded ? 1 : 0,
pb: 2,
@ -153,13 +153,13 @@ const ControlNet = (props: ControlNetProps) => {
<ParamControlNetWeight
controlNetId={controlNetId}
weight={weight}
mini
mini={!isExpanded}
/>
<ParamControlNetBeginEnd
controlNetId={controlNetId}
beginStepPct={beginStepPct}
endStepPct={endStepPct}
mini
mini={!isExpanded}
/>
</Flex>
{!isExpanded && (

37
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx
View File

@ -1,4 +1,5 @@
import {
ChakraProps,
FormControl,
FormLabel,
HStack,
@ -10,14 +11,19 @@ import {
Tooltip,
} from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import {
controlNetBeginStepPctChanged,
controlNetEndStepPctChanged,
} from 'features/controlNet/store/controlNetSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { BiReset } from 'react-icons/bi';
const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
mt: 1.5,
fontSize: '2xs',
fontWeight: '500',
color: 'base.400',
};
type Props = {
controlNetId: string;
@ -29,7 +35,7 @@ type Props = {
const formatPct = (v: number) => `${Math.round(v * 100)}%`;
const ParamControlNetBeginEnd = (props: Props) => {
const { controlNetId, beginStepPct, endStepPct, mini = false } = props;
const { controlNetId, beginStepPct, mini = false, endStepPct } = props;
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -75,12 +81,9 @@ const ParamControlNetBeginEnd = (props: Props) => {
<RangeSliderMark
value={0}
sx={{
fontSize: 'xs',
fontWeight: '500',
color: 'base.200',
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
mt: 1.5,
...SLIDER_MARK_STYLES,
}}
>
0%
@ -88,10 +91,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
<RangeSliderMark
value={0.5}
sx={{
fontSize: 'xs',
fontWeight: '500',
color: 'base.200',
mt: 1.5,
...SLIDER_MARK_STYLES,
}}
>
50%
@ -99,12 +99,9 @@ const ParamControlNetBeginEnd = (props: Props) => {
<RangeSliderMark
value={1}
sx={{
fontSize: 'xs',
fontWeight: '500',
color: 'base.200',
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
mt: 1.5,
...SLIDER_MARK_STYLES,
}}
>
100%
@ -112,16 +109,6 @@ const ParamControlNetBeginEnd = (props: Props) => {
</>
)}
</RangeSlider>
{!mini && (
<IAIIconButton
size="sm"
aria-label={t('accessibility.reset')}
tooltip={t('accessibility.reset')}
icon={<BiReset />}
onClick={handleStepPctReset}
/>
)}
</HStack>
</FormControl>
);

29
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx
View File

@ -20,36 +20,17 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
[controlNetId, dispatch]
);
const handleWeightReset = () => {
dispatch(controlNetWeightChanged({ controlNetId, weight: 1 }));
};
if (mini) {
return (
<IAISlider
label={'Weight'}
sliderFormLabelProps={{ pb: 1 }}
value={weight}
onChange={handleWeightChanged}
min={0}
max={1}
step={0.01}
/>
);
}
return (
<IAISlider
label="Weight"
label={'Weight'}
sliderFormLabelProps={{ pb: 2 }}
value={weight}
onChange={handleWeightChanged}
withInput
withReset
handleReset={handleWeightReset}
withSliderMarks
min={0}
min={-1}
max={1}
step={0.01}
withSliderMarks={!mini}
sliderMarks={[-1, 0, 1]}
/>
);
};

2
invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx
View File

@ -54,6 +54,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
min={0}
max={255}
withInput
withSliderMarks
/>
<IAISlider
label="High Threshold"
@ -64,6 +65,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
min={0}
max={255}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

5
invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx
View File

@ -93,6 +93,7 @@ const ContentShuffleProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -103,6 +104,7 @@ const ContentShuffleProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="W"
@ -113,6 +115,7 @@ const ContentShuffleProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="H"
@ -123,6 +126,7 @@ const ContentShuffleProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="F"
@ -133,6 +137,7 @@ const ContentShuffleProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

2
invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx
View File

@ -65,6 +65,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -75,6 +76,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISwitch
label="Scribble"

2
invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx
View File

@ -54,6 +54,7 @@ const LineartAnimeProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -64,6 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

2
invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx
View File

@ -62,6 +62,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -72,6 +73,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISwitch
label="Coarse"

2
invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx
View File

@ -50,6 +50,7 @@ const MediapipeFaceProcessor = (props: Props) => {
min={1}
max={20}
withInput
withSliderMarks
/>
<IAISlider
label="Min Confidence"
@ -61,6 +62,7 @@ const MediapipeFaceProcessor = (props: Props) => {
max={1}
step={0.01}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

2
invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx
View File

@ -51,6 +51,7 @@ const MidasDepthProcessor = (props: Props) => {
max={20}
step={0.01}
withInput
withSliderMarks
/>
<IAISlider
label="bg_th"
@ -62,6 +63,7 @@ const MidasDepthProcessor = (props: Props) => {
max={20}
step={0.01}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

4
invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx
View File

@ -76,6 +76,7 @@ const MlsdImageProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -86,6 +87,7 @@ const MlsdImageProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="W"
@ -97,6 +99,7 @@ const MlsdImageProcessor = (props: Props) => {
max={1}
step={0.01}
withInput
withSliderMarks
/>
<IAISlider
label="H"
@ -108,6 +111,7 @@ const MlsdImageProcessor = (props: Props) => {
max={1}
step={0.01}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

2
invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx
View File

@ -54,6 +54,7 @@ const NormalBaeProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -64,6 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
</ProcessorWrapper>
);

2
invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx
View File

@ -62,6 +62,7 @@ const OpenposeProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -72,6 +73,7 @@ const OpenposeProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISwitch
label="Hand and Face"

2
invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx
View File

@ -69,6 +69,7 @@ const PidiProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISlider
label="Image Resolution"
@ -79,6 +80,7 @@ const PidiProcessor = (props: Props) => {
min={0}
max={4096}
withInput
withSliderMarks
/>
<IAISwitch
label="Scribble"

6
invokeai/frontend/web/src/features/controlNet/store/constants.ts
View File

@ -23,7 +23,7 @@ type ControlNetProcessorsDict = Record<
*
* TODO: Generate from the OpenAPI schema
*/
export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
export const CONTROLNET_PROCESSORS = {
none: {
type: 'none',
label: 'none',
@ -129,7 +129,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
normalbae_image_processor: {
type: 'normalbae_image_processor',
label: 'NormalBae',
label: 'Normal BAE',
description: '',
default: {
id: 'normalbae_image_processor',
@ -208,7 +208,7 @@ export const CONTROLNET_MODELS: Record<string, ControlNetModel> = {
},
'lllyasviel/control_v11p_sd15_seg': {
type: 'lllyasviel/control_v11p_sd15_seg',
label: 'Segment Anything',
label: 'Segmentation',
},
'lllyasviel/control_v11p_sd15_lineart': {
type: 'lllyasviel/control_v11p_sd15_lineart',

2
invokeai/frontend/web/src/theme/components/slider.ts
View File

@ -30,7 +30,7 @@ const invokeAIMark = defineStyle((_props) => {
return {
fontSize: 'xs',
fontWeight: '500',
color: 'base.200',
color: 'base.400',
mt: 2,
insetInlineStart: 'unset',
};