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): update processor constants to calculate default resolution based on current base model, add image_resolution to the processors that didn't have it in the UI as a configurable op

Browse Source 
tion
This commit is contained in:
Mary Hipp 2024-03-18 13:24:17 -04:00 committed by psychedelicious
parent ed0f9f7d66
commit 8c6c33a315
18 changed files with 270 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
View File

@ -1,14 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation;
type CannyProcessorProps = {
controlNetId: string;
processorNode: RequiredCannyImageProcessorInvocation;
@ -17,9 +15,12 @@ type CannyProcessorProps = {
const CannyProcessor = (props: CannyProcessorProps) => {
const { controlNetId, processorNode, isEnabled } = props;
const { low_threshold, high_threshold } = processorNode;
const { low_threshold, high_threshold, image_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'canny_image_processor'
) as RequiredCannyImageProcessorInvocation;
const handleLowThresholdChanged = useCallback(
(v: number) => {
@ -35,6 +36,13 @@ const CannyProcessor = (props: CannyProcessorProps) => {
[controlNetId, processorChanged]
);
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
},
[controlNetId, processorChanged]
);
return (
<ProcessorWrapper>
<FormControl isDisabled={!isEnabled}>
@ -42,14 +50,14 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<CompositeSlider
value={low_threshold}
onChange={handleLowThresholdChanged}
defaultValue={DEFAULTS.low_threshold}
defaultValue={defaults.low_threshold}
min={0}
max={255}
/>
<CompositeNumberInput
value={low_threshold}
onChange={handleLowThresholdChanged}
defaultValue={DEFAULTS.low_threshold}
defaultValue={defaults.low_threshold}
min={0}
max={255}
/>
@ -59,18 +67,36 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<CompositeSlider
value={high_threshold}
onChange={handleHighThresholdChanged}
defaultValue={DEFAULTS.high_threshold}
defaultValue={defaults.high_threshold}
min={0}
max={255}
/>
<CompositeNumberInput
value={high_threshold}
onChange={handleHighThresholdChanged}
defaultValue={DEFAULTS.high_threshold}
defaultValue={defaults.high_threshold}
min={0}
max={255}
/>
</FormControl>
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.imageResolution')}</FormLabel>
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
/>
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>
</FormControl>
</ProcessorWrapper>
);
};

11
invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
View File

@ -1,14 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor.default as RequiredColorMapImageProcessorInvocation;
type ColorMapProcessorProps = {
controlNetId: string;
processorNode: RequiredColorMapImageProcessorInvocation;
@ -20,6 +18,9 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
const { color_map_tile_size } = processorNode;
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'color_map_image_processor'
) as RequiredColorMapImageProcessorInvocation;
const handleColorMapTileSizeChanged = useCallback(
(v: number) => {
@ -34,7 +35,7 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
<FormLabel>{t('controlnet.colorMapTileSize')}</FormLabel>
<CompositeSlider
value={color_map_tile_size}
defaultValue={DEFAULTS.color_map_tile_size}
defaultValue={defaults.color_map_tile_size}
onChange={handleColorMapTileSizeChanged}
min={1}
max={256}
@ -43,7 +44,7 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
/>
<CompositeNumberInput
value={color_map_tile_size}
defaultValue={DEFAULTS.color_map_tile_size}
defaultValue={defaults.color_map_tile_size}
onChange={handleColorMapTileSizeChanged}
min={1}
max={4096}

29
invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
View File

@ -1,15 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor
.default as RequiredContentShuffleImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredContentShuffleImageProcessorInvocation;
@ -22,6 +19,10 @@ const ContentShuffleProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'content_shuffle_image_processor'
) as RequiredContentShuffleImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -63,7 +64,7 @@ const ContentShuffleProcessor = (props: Props) => {
<FormLabel>{t('controlnet.detectResolution')}</FormLabel>
<CompositeSlider
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged}
min={0}
max={4096}
@ -71,7 +72,7 @@ const ContentShuffleProcessor = (props: Props) => {
/>
<CompositeNumberInput
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged}
min={0}
max={4096}
@ -81,7 +82,7 @@ const ContentShuffleProcessor = (props: Props) => {
<FormLabel>{t('controlnet.imageResolution')}</FormLabel>
<CompositeSlider
value={image_resolution}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
onChange={handleImageResolutionChanged}
min={0}
max={4096}
@ -89,7 +90,7 @@ const ContentShuffleProcessor = (props: Props) => {
/>
<CompositeNumberInput
value={image_resolution}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
onChange={handleImageResolutionChanged}
min={0}
max={4096}
@ -97,18 +98,18 @@ const ContentShuffleProcessor = (props: Props) => {
</FormControl>
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.w')}</FormLabel>
<CompositeSlider value={w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} marks />
<CompositeNumberInput value={w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} />
<CompositeSlider value={w} defaultValue={defaults.w} onChange={handleWChanged} min={0} max={4096} marks />
<CompositeNumberInput value={w} defaultValue={defaults.w} onChange={handleWChanged} min={0} max={4096} />
</FormControl>
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.h')}</FormLabel>
<CompositeSlider value={h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} marks />
<CompositeNumberInput value={h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} />
<CompositeSlider value={h} defaultValue={defaults.h} onChange={handleHChanged} min={0} max={4096} marks />
<CompositeNumberInput value={h} defaultValue={defaults.h} onChange={handleHChanged} min={0} max={4096} />
</FormControl>
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.f')}</FormLabel>
<CompositeSlider value={f} defaultValue={DEFAULTS.f} onChange={handleFChanged} min={0} max={4096} marks />
<CompositeNumberInput value={f} defaultValue={DEFAULTS.f} onChange={handleFChanged} min={0} max={4096} />
<CompositeSlider value={f} defaultValue={defaults.f} onChange={handleFChanged} min={0} max={4096} marks />
<CompositeNumberInput value={f} defaultValue={defaults.f} onChange={handleFChanged} min={0} max={4096} />
</FormControl>
</ProcessorWrapper>
);

19
invokeai/frontend/web/src/features/controlAdapters/components/processors/DWOpenposeProcessor.tsx
View File

@ -1,6 +1,6 @@
import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredDWOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@ -8,9 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.dw_openpose_image_processor
.default as RequiredDWOpenposeImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredDWOpenposeImageProcessorInvocation;
@ -23,6 +20,10 @@ const DWOpenposeProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'dw_openpose_image_processor'
) as RequiredDWOpenposeImageProcessorInvocation;
const handleDrawBodyChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { draw_body: e.target.checked });
@ -56,15 +57,15 @@ const DWOpenposeProcessor = (props: Props) => {
<Flex sx={{ flexDir: 'row', gap: 6 }}>
<FormControl isDisabled={!isEnabled} w="max-content">
<FormLabel>{t('controlnet.body')}</FormLabel>
<Switch defaultChecked={DEFAULTS.draw_body} isChecked={draw_body} onChange={handleDrawBodyChanged} />
<Switch defaultChecked={defaults.draw_body} isChecked={draw_body} onChange={handleDrawBodyChanged} />
</FormControl>
<FormControl isDisabled={!isEnabled} w="max-content">
<FormLabel>{t('controlnet.face')}</FormLabel>
<Switch defaultChecked={DEFAULTS.draw_face} isChecked={draw_face} onChange={handleDrawFaceChanged} />
<Switch defaultChecked={defaults.draw_face} isChecked={draw_face} onChange={handleDrawFaceChanged} />
</FormControl>
<FormControl isDisabled={!isEnabled} w="max-content">
<FormLabel>{t('controlnet.hands')}</FormLabel>
<Switch defaultChecked={DEFAULTS.draw_hands} isChecked={draw_hands} onChange={handleDrawHandsChanged} />
<Switch defaultChecked={defaults.draw_hands} isChecked={draw_hands} onChange={handleDrawHandsChanged} />
</FormControl>
</Flex>
<FormControl isDisabled={!isEnabled}>
@ -72,7 +73,7 @@ const DWOpenposeProcessor = (props: Props) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
@ -80,7 +81,7 @@ const DWOpenposeProcessor = (props: Props) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx
View File

@ -1,7 +1,7 @@
import type { ComboboxOnChange } from '@invoke-ai/ui-library';
import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type {
DepthAnythingModelSize,
RequiredDepthAnythingImageProcessorInvocation,
@ -12,9 +12,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
.default as RequiredDepthAnythingImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredDepthAnythingImageProcessorInvocation;
@ -25,9 +22,12 @@ const DepthAnythingProcessor = (props: Props) => {
const { controlNetId, processorNode, isEnabled } = props;
const { model_size, resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'midas_depth_image_processor'
) as RequiredDepthAnythingImageProcessorInvocation;
const handleModelSizeChange = useCallback<ComboboxOnChange>(
(v) => {
if (!isDepthAnythingModelSize(v?.value)) {
@ -68,7 +68,7 @@ const DepthAnythingProcessor = (props: Props) => {
<FormLabel>{t('controlnet.modelSize')}</FormLabel>
<Combobox
value={value}
defaultInputValue={DEFAULTS.model_size}
defaultInputValue={defaults.model_size}
options={options}
onChange={handleModelSizeChange}
/>
@ -78,7 +78,7 @@ const DepthAnythingProcessor = (props: Props) => {
<CompositeSlider
value={resolution}
onChange={handleResolutionChange}
defaultValue={DEFAULTS.resolution}
defaultValue={defaults.resolution}
min={64}
max={4096}
step={64}
@ -88,7 +88,7 @@ const DepthAnythingProcessor = (props: Props) => {
<CompositeNumberInput
value={resolution}
onChange={handleResolutionChange}
defaultValue={DEFAULTS.resolution}
defaultValue={defaults.resolution}
min={64}
max={4096}
step={64}

14
invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
View File

@ -1,6 +1,6 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@ -8,8 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default as RequiredHedImageProcessorInvocation;
type HedProcessorProps = {
controlNetId: string;
processorNode: RequiredHedImageProcessorInvocation;
@ -25,6 +23,8 @@ const HedPreprocessor = (props: HedProcessorProps) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor('hed_image_processor') as RequiredHedImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -52,7 +52,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<FormLabel>{t('controlnet.detectResolution')}</FormLabel>
<CompositeSlider
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged}
min={0}
max={4096}
@ -60,7 +60,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
/>
<CompositeNumberInput
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged}
min={0}
max={4096}
@ -71,7 +71,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
@ -79,7 +79,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>

17
invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
View File

@ -1,15 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor
.default as RequiredLineartAnimeImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredLineartAnimeImageProcessorInvocation;
@ -22,6 +19,10 @@ const LineartAnimeProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'lineart_anime_image_processor'
) as RequiredLineartAnimeImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -42,7 +43,7 @@ const LineartAnimeProcessor = (props: Props) => {
<FormLabel>{t('controlnet.detectResolution')}</FormLabel>
<CompositeSlider
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged}
min={0}
max={4096}
@ -50,7 +51,7 @@ const LineartAnimeProcessor = (props: Props) => {
/>
<CompositeNumberInput
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged}
min={0}
max={4096}
@ -61,7 +62,7 @@ const LineartAnimeProcessor = (props: Props) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
@ -69,7 +70,7 @@ const LineartAnimeProcessor = (props: Props) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
View File

@ -1,6 +1,6 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@ -8,8 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default as RequiredLineartImageProcessorInvocation;
type LineartProcessorProps = {
controlNetId: string;
processorNode: RequiredLineartImageProcessorInvocation;
@ -22,6 +20,10 @@ const LineartProcessor = (props: LineartProcessorProps) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'lineart_image_processor'
) as RequiredLineartImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -50,7 +52,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
marks
@ -58,7 +60,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeNumberInput
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
/>
@ -68,7 +70,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
@ -76,7 +78,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>

43
invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
View File

@ -1,14 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default as RequiredMediapipeFaceProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredMediapipeFaceProcessorInvocation;
@ -17,10 +15,14 @@ type Props = {
const MediapipeFaceProcessor = (props: Props) => {
const { controlNetId, processorNode, isEnabled } = props;
const { max_faces, min_confidence } = processorNode;
const { max_faces, min_confidence, image_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'mediapipe_face_processor'
) as RequiredMediapipeFaceProcessorInvocation;
const handleMaxFacesChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { max_faces: v });
@ -35,6 +37,13 @@ const MediapipeFaceProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
},
[controlNetId, processorChanged]
);
return (
<ProcessorWrapper>
<FormControl isDisabled={!isEnabled}>
@ -42,7 +51,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeSlider
value={max_faces}
onChange={handleMaxFacesChanged}
defaultValue={DEFAULTS.max_faces}
defaultValue={defaults.max_faces}
min={1}
max={20}
marks
@ -50,7 +59,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeNumberInput
value={max_faces}
onChange={handleMaxFacesChanged}
defaultValue={DEFAULTS.max_faces}
defaultValue={defaults.max_faces}
min={1}
max={20}
/>
@ -60,7 +69,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeSlider
value={min_confidence}
onChange={handleMinConfidenceChanged}
defaultValue={DEFAULTS.min_confidence}
defaultValue={defaults.min_confidence}
min={0}
max={1}
step={0.01}
@ -69,12 +78,30 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeNumberInput
value={min_confidence}
onChange={handleMinConfidenceChanged}
defaultValue={DEFAULTS.min_confidence}
defaultValue={defaults.min_confidence}
min={0}
max={1}
step={0.01}
/>
</FormControl>
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.imageResolution')}</FormLabel>
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
/>
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>
</FormControl>
</ProcessorWrapper>
);
};

44
invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
View File

@ -1,15 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
.default as RequiredMidasDepthImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredMidasDepthImageProcessorInvocation;
@ -18,10 +15,14 @@ type Props = {
const MidasDepthProcessor = (props: Props) => {
const { controlNetId, processorNode, isEnabled } = props;
const { a_mult, bg_th } = processorNode;
const { a_mult, bg_th, image_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'midas_depth_image_processor'
) as RequiredMidasDepthImageProcessorInvocation;
const handleAMultChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { a_mult: v });
@ -36,6 +37,13 @@ const MidasDepthProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
},
[controlNetId, processorChanged]
);
return (
<ProcessorWrapper>
<FormControl isDisabled={!isEnabled}>
@ -43,7 +51,7 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeSlider
value={a_mult}
onChange={handleAMultChanged}
defaultValue={DEFAULTS.a_mult}
defaultValue={defaults.a_mult}
min={0}
max={20}
step={0.01}
@ -52,7 +60,7 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeNumberInput
value={a_mult}
onChange={handleAMultChanged}
defaultValue={DEFAULTS.a_mult}
defaultValue={defaults.a_mult}
min={0}
max={20}
step={0.01}
@ -63,7 +71,7 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeSlider
value={bg_th}
onChange={handleBgThChanged}
defaultValue={DEFAULTS.bg_th}
defaultValue={defaults.bg_th}
min={0}
max={20}
step={0.01}
@ -72,12 +80,30 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeNumberInput
value={bg_th}
onChange={handleBgThChanged}
defaultValue={DEFAULTS.bg_th}
defaultValue={defaults.bg_th}
min={0}
max={20}
step={0.01}
/>
</FormControl>
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.imageResolution')}</FormLabel>
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
/>
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>
</FormControl>
</ProcessorWrapper>
);
};

22
invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
View File

@ -1,14 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default as RequiredMlsdImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredMlsdImageProcessorInvocation;
@ -21,6 +19,8 @@ const MlsdImageProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor('mlsd_image_processor') as RequiredMlsdImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -56,7 +56,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
marks={marks0to4096}
@ -64,7 +64,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
/>
@ -74,7 +74,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks={marks0to4096}
@ -82,7 +82,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>
@ -92,7 +92,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider
value={thr_d}
onChange={handleThrDChanged}
defaultValue={DEFAULTS.thr_d}
defaultValue={defaults.thr_d}
min={0}
max={1}
step={0.01}
@ -101,7 +101,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput
value={thr_d}
onChange={handleThrDChanged}
defaultValue={DEFAULTS.thr_d}
defaultValue={defaults.thr_d}
min={0}
max={1}
step={0.01}
@ -112,7 +112,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider
value={thr_v}
onChange={handleThrVChanged}
defaultValue={DEFAULTS.thr_v}
defaultValue={defaults.thr_v}
min={0}
max={1}
step={0.01}
@ -121,7 +121,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput
value={thr_v}
onChange={handleThrVChanged}
defaultValue={DEFAULTS.thr_v}
defaultValue={defaults.thr_v}
min={0}
max={1}
step={0.01}

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
View File

@ -1,14 +1,12 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default as RequiredNormalbaeImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredNormalbaeImageProcessorInvocation;
@ -21,6 +19,10 @@ const NormalBaeProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'normalbae_image_processor'
) as RequiredNormalbaeImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -42,7 +44,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
marks
@ -50,7 +52,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeNumberInput
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
/>
@ -60,7 +62,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
@ -68,7 +70,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>

14
invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
View File

@ -1,6 +1,6 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@ -8,8 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default as RequiredPidiImageProcessorInvocation;
type Props = {
controlNetId: string;
processorNode: RequiredPidiImageProcessorInvocation;
@ -22,6 +20,8 @@ const PidiProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor('pidi_image_processor') as RequiredPidiImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { detect_resolution: v });
@ -57,7 +57,7 @@ const PidiProcessor = (props: Props) => {
<CompositeSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
marks
@ -65,7 +65,7 @@ const PidiProcessor = (props: Props) => {
<CompositeNumberInput
value={detect_resolution}
onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution}
defaultValue={defaults.detect_resolution}
min={0}
max={4096}
/>
@ -75,7 +75,7 @@ const PidiProcessor = (props: Props) => {
<CompositeSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
marks
@ -83,7 +83,7 @@ const PidiProcessor = (props: Props) => {
<CompositeNumberInput
value={image_resolution}
onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution}
defaultValue={defaults.image_resolution}
min={0}
max={4096}
/>

4
invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts
View File

@ -36,7 +36,7 @@ export const useAddControlAdapter = (type: ControlAdapterType) => {
) {
const defaultPreprocessor = firstModel.default_settings?.preprocessor;
const processorType = isControlAdapterProcessorType(defaultPreprocessor) ? defaultPreprocessor : 'none';
const processorNode = CONTROLNET_PROCESSORS[processorType].default;
const processorNode = CONTROLNET_PROCESSORS[processorType].buildDefaults(baseModel);
dispatch(
controlAdapterAdded({
type,
@ -55,7 +55,7 @@ export const useAddControlAdapter = (type: ControlAdapterType) => {
overrides: { model: firstModel },
})
);
}, [dispatch, firstModel, isDisabled, type]);
}, [dispatch, firstModel, isDisabled, type, baseModel]);
return [addControlAdapter, isDisabled] as const;
};

14
invokeai/frontend/web/src/features/controlAdapters/hooks/useGetDefaultForControlnetProcessor.ts Normal file
View File

@ -0,0 +1,14 @@
import { useAppSelector } from 'app/store/storeHooks';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
import type { ControlAdapterProcessorType } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useGetDefaultForControlnetProcessor = (processorType: ControlAdapterProcessorType) => {
const baseModel = useAppSelector((s) => s.generation.model?.base);
const defaults = useMemo(() => {
return CONTROLNET_PROCESSORS[processorType].buildDefaults(baseModel);
}, [baseModel, processorType]);
return defaults;
};

104
invokeai/frontend/web/src/features/controlAdapters/store/constants.ts
View File

@ -1,4 +1,5 @@
import i18n from 'i18next';
import type { BaseModelType } from 'services/api/types';
import type { ControlAdapterProcessorType, RequiredControlAdapterProcessorNode } from './types';
@ -8,7 +9,7 @@ type ControlNetProcessorsDict = Record<
type: ControlAdapterProcessorType | 'none';
label: string;
description: string;
default: RequiredControlAdapterProcessorNode | { type: 'none' };
buildDefaults(baseModel?: BaseModelType): RequiredControlAdapterProcessorNode | { type: 'none' };
}
>;
/**
@ -29,9 +30,9 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.noneDescription');
},
default: {
buildDefaults: () => ({
type: 'none',
},
}),
},
canny_image_processor: {
type: 'canny_image_processor',
@ -41,12 +42,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.cannyDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'canny_image_processor',
type: 'canny_image_processor',
low_threshold: 100,
high_threshold: 200,
},
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
},
color_map_image_processor: {
type: 'color_map_image_processor',
@ -56,11 +58,11 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.colorMapDescription');
},
default: {
buildDefaults: () => ({
id: 'color_map_image_processor',
type: 'color_map_image_processor',
color_map_tile_size: 64,
},
}),
},
content_shuffle_image_processor: {
type: 'content_shuffle_image_processor',
@ -70,15 +72,15 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.contentShuffleDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'content_shuffle_image_processor',
type: 'content_shuffle_image_processor',
detect_resolution: 512,
image_resolution: 512,
h: 512,
w: 512,
f: 256,
},
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
h: baseModel === 'sdxl' ? 1024 : 512,
w: baseModel === 'sdxl' ? 1024 : 512,
f: baseModel === 'sdxl' ? 512 : 256,
}),
},
depth_anything_image_processor: {
type: 'depth_anything_image_processor',
@ -88,12 +90,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.depthAnythingDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'depth_anything_image_processor',
type: 'depth_anything_image_processor',
model_size: 'small',
resolution: 512,
},
resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
},
hed_image_processor: {
type: 'hed_image_processor',
@ -103,13 +105,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.hedDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'hed_image_processor',
type: 'hed_image_processor',
detect_resolution: 512,
image_resolution: 512,
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
scribble: false,
},
}),
},
lineart_anime_image_processor: {
type: 'lineart_anime_image_processor',
@ -119,12 +121,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.lineartAnimeDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'lineart_anime_image_processor',
type: 'lineart_anime_image_processor',
detect_resolution: 512,
image_resolution: 512,
},
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
},
lineart_image_processor: {
type: 'lineart_image_processor',
@ -134,13 +136,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.lineartDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'lineart_image_processor',
type: 'lineart_image_processor',
detect_resolution: 512,
image_resolution: 512,
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
coarse: false,
},
}),
},
mediapipe_face_processor: {
type: 'mediapipe_face_processor',
@ -150,12 +152,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.mediapipeFaceDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'mediapipe_face_processor',
type: 'mediapipe_face_processor',
max_faces: 1,
min_confidence: 0.5,
},
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
},
midas_depth_image_processor: {
type: 'midas_depth_image_processor',
@ -165,12 +168,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.depthMidasDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'midas_depth_image_processor',
type: 'midas_depth_image_processor',
a_mult: 2,
bg_th: 0.1,
},
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
},
mlsd_image_processor: {
type: 'mlsd_image_processor',
@ -180,14 +184,14 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.mlsdDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'mlsd_image_processor',
type: 'mlsd_image_processor',
detect_resolution: 512,
image_resolution: 512,
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
thr_d: 0.1,
thr_v: 0.1,
},
}),
},
normalbae_image_processor: {
type: 'normalbae_image_processor',
@ -197,12 +201,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.normalBaeDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'normalbae_image_processor',
type: 'normalbae_image_processor',
detect_resolution: 512,
image_resolution: 512,
},
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
},
dw_openpose_image_processor: {
type: 'dw_openpose_image_processor',
@ -212,14 +216,14 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.dwOpenposeDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'dw_openpose_image_processor',
type: 'dw_openpose_image_processor',
image_resolution: 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
draw_body: true,
draw_face: false,
draw_hands: false,
},
}),
},
pidi_image_processor: {
type: 'pidi_image_processor',
@ -229,14 +233,14 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.pidiDescription');
},
default: {
buildDefaults: (baseModel?: BaseModelType) => ({
id: 'pidi_image_processor',
type: 'pidi_image_processor',
detect_resolution: 512,
image_resolution: 512,
detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: baseModel === 'sdxl' ? 1024 : 512,
scribble: false,
safe: false,
},
}),
},
zoe_depth_image_processor: {
type: 'zoe_depth_image_processor',
@ -246,9 +250,9 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() {
return i18n.t('controlnet.depthZoeDescription');
},
default: {
buildDefaults: () => ({
id: 'zoe_depth_image_processor',
type: 'zoe_depth_image_processor',
},
}),
},
};

2
invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts
View File

@ -294,7 +294,7 @@ export const controlAdaptersSlice = createSlice({
}
const processorNode = cloneDeep(
CONTROLNET_PROCESSORS[processorType].default
CONTROLNET_PROCESSORS[processorType].buildDefaults(cn.model?.base)
) as RequiredControlAdapterProcessorNode;
caAdapter.updateOne(state, {

8
invokeai/frontend/web/src/features/controlAdapters/store/types.ts
View File

@ -72,7 +72,7 @@ export const isControlAdapterProcessorType = (v: unknown): v is ControlAdapterPr
*/
export type RequiredCannyImageProcessorInvocation = O.Required<
CannyImageProcessorInvocation,
'type' | 'low_threshold' | 'high_threshold'
'type' | 'low_threshold' | 'high_threshold' | 'image_resolution'
>;
/**
@ -80,7 +80,7 @@ export type RequiredCannyImageProcessorInvocation = O.Required<
*/
export type RequiredColorMapImageProcessorInvocation = O.Required<
ColorMapImageProcessorInvocation,
'type' | 'color_map_tile_size'
'type' | 'color_map_tile_size' | 'image_resolution'
>;
/**
@ -133,7 +133,7 @@ export type RequiredLineartImageProcessorInvocation = O.Required<
*/
export type RequiredMediapipeFaceProcessorInvocation = O.Required<
MediapipeFaceProcessorInvocation,
'type' | 'max_faces' | 'min_confidence'
'type' | 'max_faces' | 'min_confidence' | 'image_resolution'
>;
/**
@ -141,7 +141,7 @@ export type RequiredMediapipeFaceProcessorInvocation = O.Required<
*/
export type RequiredMidasDepthImageProcessorInvocation = O.Required<
MidasDepthImageProcessorInvocation,
'type' | 'a_mult' | 'bg_th'
'type' | 'a_mult' | 'bg_th' | 'image_resolution'
>;
/**