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): wip controlnet layout

Browse Source
This commit is contained in:
psychedelicious 2023-07-15 18:50:37 +10:00
parent 77ad3c959b
commit 8a14c5db00
3 changed files with 88 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Box, Flex, useColorMode } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { FaCopy, FaTrash } from 'react-icons/fa'; import { FaCopy, FaTrash } from 'react-icons/fa';
@ -17,7 +17,6 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAISwitch from 'common/components/IAISwitch'; import IAISwitch from 'common/components/IAISwitch';
import { useToggle } from 'react-use'; import { useToggle } from 'react-use';
import { mode } from 'theme/util/mode';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import ControlNetImagePreview from './ControlNetImagePreview'; import ControlNetImagePreview from './ControlNetImagePreview';
import ControlNetProcessorComponent from './ControlNetProcessorComponent'; import ControlNetProcessorComponent from './ControlNetProcessorComponent';
@ -46,9 +45,8 @@ const ControlNet = (props: ControlNetProps) => {
); );
const { isEnabled, shouldAutoConfig } = useAppSelector(selector); const { isEnabled, shouldAutoConfig } = useAppSelector(selector);
const [isExpanded, toggleIsExpanded] = useToggle(false); const [isExpanded, toggleIsExpanded] = useToggle(false);
const { colorMode } = useColorMode();
const handleDelete = useCallback(() => { const handleDelete = useCallback(() => {
dispatch(controlNetRemoved({ controlNetId })); dispatch(controlNetRemoved({ controlNetId }));
}, [controlNetId, dispatch]); }, [controlNetId, dispatch]);
@ -72,9 +70,12 @@ const ControlNet = (props: ControlNetProps) => {
flexDir: 'column', flexDir: 'column',
gap: 2, gap: 2,
p: 3, p: 3,
bg: mode('base.200', 'base.850')(colorMode),
borderRadius: 'base', borderRadius: 'base',
position: 'relative', position: 'relative',
bg: 'base.200',
_dark: {
bg: 'base.850',
},
}} }}
> >
<Flex sx={{ gap: 2 }}> <Flex sx={{ gap: 2 }}>
@ -120,10 +121,13 @@ const ControlNet = (props: ControlNetProps) => {
<ChevronUpIcon <ChevronUpIcon
sx={{ sx={{
boxSize: 4, boxSize: 4,
color: mode('base.700', 'base.300')(colorMode), color: 'base.700',
transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)', transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)',
transitionProperty: 'common', transitionProperty: 'common',
transitionDuration: 'normal', transitionDuration: 'normal',
_dark: {
color: 'base.300',
},
}} }}
/> />
} }
@ -136,72 +140,62 @@ const ControlNet = (props: ControlNetProps) => {
w: 1.5, w: 1.5,
h: 1.5, h: 1.5,
borderRadius: 'full', borderRadius: 'full',
bg: mode('error.700', 'error.200')(colorMode),
top: 4, top: 4,
insetInlineEnd: 4, insetInlineEnd: 4,
bg: 'error.700',
_dark: {
bg: 'error.200',
},
}} }}
/> />
)} )}
</Flex> </Flex>
<Flex alignItems="flex-end" gap="2"> <Flex sx={{ w: 'full', flexDirection: 'column' }}>
<ParamControlNetProcessorSelect controlNetId={controlNetId} /> <Flex sx={{ gap: 4, w: 'full', alignItems: 'center' }}>
<ParamControlNetShouldAutoConfig controlNetId={controlNetId} /> <Flex
</Flex> sx={{
{isEnabled && ( flexDir: 'column',
<> gap: 3,
<Flex sx={{ w: 'full', flexDirection: 'column' }}> h: 28,
<Flex sx={{ gap: 4, w: 'full' }}> w: 'full',
<Flex paddingInlineStart: 1,
sx={{ paddingInlineEnd: isExpanded ? 1 : 0,
flexDir: 'column', pb: 2,
gap: 3, justifyContent: 'space-between',
w: 'full', }}
paddingInlineStart: 1, >
paddingInlineEnd: isExpanded ? 1 : 0, <ParamControlNetWeight controlNetId={controlNetId} />
pb: 2, <ParamControlNetBeginEnd controlNetId={controlNetId} />
justifyContent: 'space-between',
}}
>
<ParamControlNetWeight
controlNetId={controlNetId}
mini={!isExpanded}
/>
<ParamControlNetBeginEnd
controlNetId={controlNetId}
mini={!isExpanded}
/>
</Flex>
{!isExpanded && (
<Flex
sx={{
alignItems: 'center',
justifyContent: 'center',
h: 24,
w: 24,
aspectRatio: '1/1',
}}
>
<ControlNetImagePreview
controlNetId={controlNetId}
height={24}
/>
</Flex>
)}
</Flex>
<ParamControlNetControlMode controlNetId={controlNetId} />
</Flex> </Flex>
{!isExpanded && (
{isExpanded && ( <Flex
<> sx={{
<Box mt={2}> alignItems: 'center',
<ControlNetImagePreview justifyContent: 'center',
controlNetId={controlNetId} h: 28,
height={96} w: 28,
/> aspectRatio: '1/1',
</Box> }}
<ControlNetProcessorComponent controlNetId={controlNetId} /> >
</> <ControlNetImagePreview controlNetId={controlNetId} height={28} />
</Flex>
)} )}
</Flex>
</Flex>
{isExpanded && (
<>
<ParamControlNetControlMode controlNetId={controlNetId} />
<ParamControlNetProcessorSelect controlNetId={controlNetId} />
<ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
<Box mt={2}>
<ControlNetImagePreview
controlNetId={controlNetId}
height="392px"
/>
</Box>
<ControlNetProcessorComponent controlNetId={controlNetId} />
</> </>
)} )}
</Flex> </Flex>

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

@ -1,5 +1,4 @@
import { import {
ChakraProps,
FormControl, FormControl,
FormLabel, FormLabel,
HStack, HStack,
@ -20,22 +19,14 @@ import {
} from 'features/controlNet/store/controlNetSlice'; } from 'features/controlNet/store/controlNetSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
mt: 1.5,
fontSize: '2xs',
fontWeight: '500',
color: 'base.400',
};
type Props = { type Props = {
controlNetId: string; controlNetId: string;
mini?: boolean;
}; };
const formatPct = (v: number) => `${Math.round(v * 100)}%`; const formatPct = (v: number) => `${Math.round(v * 100)}%`;
const ParamControlNetBeginEnd = (props: Props) => { const ParamControlNetBeginEnd = (props: Props) => {
const { controlNetId, mini = false } = props; const { controlNetId } = props;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selector = useMemo( const selector = useMemo(
@ -91,38 +82,33 @@ const ParamControlNetBeginEnd = (props: Props) => {
<Tooltip label={formatPct(endStepPct)} placement="top" hasArrow> <Tooltip label={formatPct(endStepPct)} placement="top" hasArrow>
<RangeSliderThumb index={1} /> <RangeSliderThumb index={1} />
</Tooltip> </Tooltip>
{!mini && ( <RangeSliderMark
<> value={0}
<RangeSliderMark sx={{
value={0} insetInlineStart: '0 !important',
sx={{ insetInlineEnd: 'unset !important',
insetInlineStart: '0 !important', }}
insetInlineEnd: 'unset !important', >
...SLIDER_MARK_STYLES, 0%
}} </RangeSliderMark>
> <RangeSliderMark
0% value={0.5}
</RangeSliderMark> sx={{
<RangeSliderMark insetInlineStart: '50% !important',
value={0.5} transform: 'translateX(-50%)',
sx={{ }}
...SLIDER_MARK_STYLES, >
}} 50%
> </RangeSliderMark>
50% <RangeSliderMark
</RangeSliderMark> value={1}
<RangeSliderMark sx={{
value={1} insetInlineStart: 'unset !important',
sx={{ insetInlineEnd: '0 !important',
insetInlineStart: 'unset !important', }}
insetInlineEnd: '0 !important', >
...SLIDER_MARK_STYLES, 100%
}} </RangeSliderMark>
>
100%
</RangeSliderMark>
</>
)}
</RangeSlider> </RangeSlider>
</HStack> </HStack>
</FormControl> </FormControl>

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

@ -8,11 +8,10 @@ import { memo, useCallback, useMemo } from 'react';
type ParamControlNetWeightProps = { type ParamControlNetWeightProps = {
controlNetId: string; controlNetId: string;
mini?: boolean;
}; };
const ParamControlNetWeight = (props: ParamControlNetWeightProps) => { const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
const { controlNetId, mini = false } = props; const { controlNetId } = props;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selector = useMemo( const selector = useMemo(
() => () =>
@ -35,13 +34,12 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
return ( return (
<IAISlider <IAISlider
label={'Weight'} label={'Weight'}
sliderFormLabelProps={{ pb: 2 }}
value={weight} value={weight}
onChange={handleWeightChanged} onChange={handleWeightChanged}
min={0} min={0}
max={2} max={2}
step={0.01} step={0.01}
withSliderMarks={!mini} withSliderMarks
sliderMarks={[0, 1, 2]} sliderMarks={[0, 1, 2]}
/> />
); );