diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx index 2777e35967..a435b50bbf 100644 --- a/invokeai/frontend/web/src/common/components/IAISlider.tsx +++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx @@ -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; @@ -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 && ( <> @@ -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) => { )} + {withSliderMarks && sliderMarks && ( + <> + {sliderMarks.map((m, i) => { + if (i === 0) { + return ( + + {m} + + ); + } else if (i === sliderMarks.length - 1) { + return ( + + {m} + + ); + } else { + return ( + + {m} + + ); + } + })} + + )} diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx index 5001a9ba24..927daa9dc0 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx @@ -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) => { {!isExpanded && ( diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx index bb2f151193..7d0c53fe40 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx @@ -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) => { 0% @@ -88,10 +91,7 @@ const ParamControlNetBeginEnd = (props: Props) => { 50% @@ -99,12 +99,9 @@ const ParamControlNetBeginEnd = (props: Props) => { 100% @@ -112,16 +109,6 @@ const ParamControlNetBeginEnd = (props: Props) => { )} - - {!mini && ( - } - onClick={handleStepPctReset} - /> - )} ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx index 007ef355c3..c2b77125d0 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx @@ -20,36 +20,17 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => { [controlNetId, dispatch] ); - const handleWeightReset = () => { - dispatch(controlNetWeightChanged({ controlNetId, weight: 1 })); - }; - - if (mini) { - return ( - - ); - } - return ( ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx index 6887d1abb0..b502658e9e 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx @@ -54,6 +54,7 @@ const CannyProcessor = (props: CannyProcessorProps) => { min={0} max={255} withInput + withSliderMarks /> { min={0} max={255} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx index 7ce6ab2297..5f16117449 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx @@ -93,6 +93,7 @@ const ContentShuffleProcessor = (props: Props) => { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx index a1aced5a8f..f01a7d0d7c 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx @@ -65,6 +65,7 @@ const HedPreprocessor = (props: HedProcessorProps) => { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx index 99765ff62f..1ed863cbcb 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx @@ -62,6 +62,7 @@ const LineartProcessor = (props: LineartProcessorProps) => { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={1} max={20} withInput + withSliderMarks /> { max={1} step={0.01} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx index a552c90f3a..48d0ba7bbd 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx @@ -51,6 +51,7 @@ const MidasDepthProcessor = (props: Props) => { max={20} step={0.01} withInput + withSliderMarks /> { max={20} step={0.01} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx index d753d3b266..f6a685a2f4 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx @@ -76,6 +76,7 @@ const MlsdImageProcessor = (props: Props) => { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { max={1} step={0.01} withInput + withSliderMarks /> { max={1} step={0.01} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx index ea3270adb3..6c39c3eea9 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx @@ -54,6 +54,7 @@ const NormalBaeProcessor = (props: Props) => { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> ); diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx index 57b45fffa4..d22282b464 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx @@ -62,6 +62,7 @@ const OpenposeProcessor = (props: Props) => { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> { min={0} max={4096} withInput + withSliderMarks /> = { }, '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', diff --git a/invokeai/frontend/web/src/theme/components/slider.ts b/invokeai/frontend/web/src/theme/components/slider.ts index ef3d84196e..e706aab7b8 100644 --- a/invokeai/frontend/web/src/theme/components/slider.ts +++ b/invokeai/frontend/web/src/theme/components/slider.ts @@ -30,7 +30,7 @@ const invokeAIMark = defineStyle((_props) => { return { fontSize: 'xs', fontWeight: '500', - color: 'base.200', + color: 'base.400', mt: 2, insetInlineStart: 'unset', };