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}
{...formControlProps}
>
<Flex className="invcontrol-label-input-wrapper">
<Flex className="invcontrol-label-wrapper">
{label && (
<InvLabel
feature={feature}
@ -56,7 +56,7 @@ export const InvControl = memo(
{label}
</InvLabel>
)}
{children}
<Flex className="invcontrol-input-wrapper">{children}</Flex>
</Flex>
{helperText && (
<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',
gap: 4,
h: 'unset',
'> .invcontrol-label-input-wrapper': {
'> .invcontrol-label-wrapper': {
display: 'flex',
flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
gap: props.orientation === 'vertical' ? 2 : 4,
gap: props.orientation === 'vertical' ? 0 : 4,
minH: 8,
w: 'full',
_invalid: {
color: 'error.300',
},
'> .invcontrol-input-wrapper': {
w: 'full',
display: 'flex',
gap: 4,
justifyContent: 'flex-end',
},
},
},
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 } =
createMultiStyleConfigHelpers(parts.keys);
const container = defineStyle(() => ({}));
const container = defineStyle(() => ({
h: '28px',
}));
const track = defineStyle(() => {
return {
@ -49,7 +51,7 @@ const mark = defineStyle(() => {
return {
fontSize: '10px',
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 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} />
<ParamControlAdapterBeginEnd id={id} />
</Flex>

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

@ -180,7 +180,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
onMouseLeave={handleMouseLeave}
position="relative"
w="full"
h={isSmall ? 28 : 366} // magic no touch
h={isSmall ? 32 : 366} // magic no touch
alignItems="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}
min={0}
max={1}
step={0.01}
step={0.05}
fineStep={0.01}
minStepsBetweenThumbs={5}
formatValue={formatPct}
marks
withThumbTooltip
/>
</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 { 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 { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
import { useControlAdapterWeight } from 'features/controlAdapters/hooks/useControlAdapterWeight';
@ -12,17 +14,22 @@ type ParamControlAdapterWeightProps = {
id: string;
};
const formatValue = (v: number) => v.toFixed(2);
const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
const isEnabled = useControlAdapterIsEnabled(id);
const weight = useControlAdapterWeight(id);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleWeightChanged = useCallback(
const onChange = useCallback(
(weight: number) => {
dispatch(controlAdapterWeightChanged({ id, weight }));
},
[dispatch, id]
);
const onReset = useCallback(() => {
dispatch(controlAdapterWeightChanged({ id, weight: 1 }));
}, [dispatch, id]);
if (isNil(weight)) {
// should never happen
@ -30,21 +37,35 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
}
return (
<InvControl
label={t('controlnet.weight')}
isDisabled={!isEnabled}
feature="controlNetWeight"
orientation="vertical"
>
<InvSlider
value={weight}
onChange={handleWeightChanged}
min={0}
max={2}
step={0.01}
marks={marks}
/>
</InvControl>
<InvControlGroup orientation="vertical">
<InvControl
label={t('controlnet.weight')}
isDisabled={!isEnabled}
feature="controlNetWeight"
>
<InvSlider
value={weight}
onChange={onChange}
onReset={onReset}
min={0}
max={2}
step={0.05}
fineStep={0.01}
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>
);
};