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

fix(ui): add numberinput to control adapter weight

Browse Source 
Required some rejiggering of the InvControl and InvSlider styles.
This commit is contained in:
psychedelicious 2024-01-02 11:41:55 +11:00 committed by Kent Keirsey
parent 2700d0e769
commit 011757c497
7 changed files with 56 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx
View File

@ -46,7 +46,7 @@ export const InvControl = memo(
isDisabled={isDisabled} isDisabled={isDisabled}
{...formControlProps} {...formControlProps}
> >
<Flex className="invcontrol-label-input-wrapper"> <Flex className="invcontrol-label-wrapper">
{label && ( {label && (
<InvLabel <InvLabel
feature={feature} feature={feature}
@ -56,7 +56,7 @@ export const InvControl = memo(
{label} {label}
</InvLabel> </InvLabel>
)} )}
{children} <Flex className="invcontrol-input-wrapper">{children}</Flex>
</Flex> </Flex>
{helperText && ( {helperText && (
<ChakraFormHelperText>{helperText}</ChakraFormHelperText> <ChakraFormHelperText>{helperText}</ChakraFormHelperText>

10
invokeai/frontend/web/src/common/components/InvControl/theme.ts
View File

@ -19,16 +19,22 @@ const formBaseStyle = defineFormPartsStyle((props) => ({
alignItems: 'flex-start', alignItems: 'flex-start',
gap: 4, gap: 4,
h: 'unset', h: 'unset',
'> .invcontrol-label-input-wrapper': { '> .invcontrol-label-wrapper': {
display: 'flex', display: 'flex',
flexDirection: props.orientation === 'vertical' ? 'column' : 'row', flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center', alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
gap: props.orientation === 'vertical' ? 2 : 4, gap: props.orientation === 'vertical' ? 0 : 4,
minH: 8, minH: 8,
w: 'full', w: 'full',
_invalid: { _invalid: {
color: 'error.300', color: 'error.300',
}, },
'> .invcontrol-input-wrapper': {
w: 'full',
display: 'flex',
gap: 4,
justifyContent: 'flex-end',
},
}, },
}, },
helperText: { helperText: {

6
invokeai/frontend/web/src/common/components/InvSlider/theme.ts
View File

@ -4,7 +4,9 @@ import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
const { definePartsStyle, defineMultiStyleConfig } = const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
const container = defineStyle(() => ({})); const container = defineStyle(() => ({
h: '28px',
}));
const track = defineStyle(() => { const track = defineStyle(() => {
return { return {
@ -49,7 +51,7 @@ const mark = defineStyle(() => {
return { return {
fontSize: '10px', fontSize: '10px',
color: 'base.400', color: 'base.400',
mt: 2, mt: 4,
}; };
}); });

2
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
View File

@ -144,7 +144,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
<Flex w="full" flexDir="column" gap={4}> <Flex w="full" flexDir="column" gap={4}>
<Flex gap={4} w="full" alignItems="center"> <Flex gap={4} w="full" alignItems="center">
<Flex flexDir="column" gap={4} h={32} w="full"> <Flex flexDir="column" gap={2} h={32} w="full">
<ParamControlAdapterWeight id={id} /> <ParamControlAdapterWeight id={id} />
<ParamControlAdapterBeginEnd id={id} /> <ParamControlAdapterBeginEnd id={id} />
</Flex> </Flex>

2
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
View File

@ -180,7 +180,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
position="relative" position="relative"
w="full" w="full"
h={isSmall ? 28 : 366} // magic no touch h={isSmall ? 32 : 366} // magic no touch
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
> >

4
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
View File

@ -78,10 +78,12 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => {
onReset={onReset} onReset={onReset}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.05}
fineStep={0.01}
minStepsBetweenThumbs={5} minStepsBetweenThumbs={5}
formatValue={formatPct} formatValue={formatPct}
marks marks
withThumbTooltip
/> />
</InvControl> </InvControl>
); );

53
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
View File

@ -1,5 +1,7 @@
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl'; import { InvControl } from 'common/components/InvControl/InvControl';
import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput';
import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
import { useControlAdapterWeight } from 'features/controlAdapters/hooks/useControlAdapterWeight'; import { useControlAdapterWeight } from 'features/controlAdapters/hooks/useControlAdapterWeight';
@ -12,17 +14,22 @@ type ParamControlAdapterWeightProps = {
id: string; id: string;
}; };
const formatValue = (v: number) => v.toFixed(2);
const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => { const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
const isEnabled = useControlAdapterIsEnabled(id); const isEnabled = useControlAdapterIsEnabled(id);
const weight = useControlAdapterWeight(id); const weight = useControlAdapterWeight(id);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const handleWeightChanged = useCallback( const onChange = useCallback(
(weight: number) => { (weight: number) => {
dispatch(controlAdapterWeightChanged({ id, weight })); dispatch(controlAdapterWeightChanged({ id, weight }));
}, },
[dispatch, id] [dispatch, id]
); );
const onReset = useCallback(() => {
dispatch(controlAdapterWeightChanged({ id, weight: 1 }));
}, [dispatch, id]);
if (isNil(weight)) { if (isNil(weight)) {
// should never happen // should never happen
@ -30,21 +37,35 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
} }
return ( return (
<InvControl <InvControlGroup orientation="vertical">
label={t('controlnet.weight')} <InvControl
isDisabled={!isEnabled} label={t('controlnet.weight')}
feature="controlNetWeight" isDisabled={!isEnabled}
orientation="vertical" feature="controlNetWeight"
> >
<InvSlider <InvSlider
value={weight} value={weight}
onChange={handleWeightChanged} onChange={onChange}
min={0} onReset={onReset}
max={2} min={0}
step={0.01} max={2}
marks={marks} step={0.05}
/> fineStep={0.01}
</InvControl> marks={marks}
formatValue={formatValue}
/>
<InvNumberInput
value={weight}
onChange={onChange}
onReset={onReset}
min={-1}
max={2}
step={0.05}
fineStep={0.01}
maxW={20}
/>
</InvControl>
</InvControlGroup>
); );
}; };