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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation;
type CannyProcessorProps = { type CannyProcessorProps = {
controlNetId: string; controlNetId: string;
processorNode: RequiredCannyImageProcessorInvocation; processorNode: RequiredCannyImageProcessorInvocation;
@ -17,9 +15,12 @@ type CannyProcessorProps = {
const CannyProcessor = (props: CannyProcessorProps) => { const CannyProcessor = (props: CannyProcessorProps) => {
const { controlNetId, processorNode, isEnabled } = props; const { controlNetId, processorNode, isEnabled } = props;
const { low_threshold, high_threshold } = processorNode; const { low_threshold, high_threshold, image_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'canny_image_processor'
) as RequiredCannyImageProcessorInvocation;
const handleLowThresholdChanged = useCallback( const handleLowThresholdChanged = useCallback(
(v: number) => { (v: number) => {
@ -35,6 +36,13 @@ const CannyProcessor = (props: CannyProcessorProps) => {
[controlNetId, processorChanged] [controlNetId, processorChanged]
); );
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
},
[controlNetId, processorChanged]
);
return ( return (
<ProcessorWrapper> <ProcessorWrapper>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
@ -42,14 +50,14 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<CompositeSlider <CompositeSlider
value={low_threshold} value={low_threshold}
onChange={handleLowThresholdChanged} onChange={handleLowThresholdChanged}
defaultValue={DEFAULTS.low_threshold} defaultValue={defaults.low_threshold}
min={0} min={0}
max={255} max={255}
/> />
<CompositeNumberInput <CompositeNumberInput
value={low_threshold} value={low_threshold}
onChange={handleLowThresholdChanged} onChange={handleLowThresholdChanged}
defaultValue={DEFAULTS.low_threshold} defaultValue={defaults.low_threshold}
min={0} min={0}
max={255} max={255}
/> />
@ -59,18 +67,36 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<CompositeSlider <CompositeSlider
value={high_threshold} value={high_threshold}
onChange={handleHighThresholdChanged} onChange={handleHighThresholdChanged}
defaultValue={DEFAULTS.high_threshold} defaultValue={defaults.high_threshold}
min={0} min={0}
max={255} max={255}
/> />
<CompositeNumberInput <CompositeNumberInput
value={high_threshold} value={high_threshold}
onChange={handleHighThresholdChanged} onChange={handleHighThresholdChanged}
defaultValue={DEFAULTS.high_threshold} defaultValue={defaults.high_threshold}
min={0} min={0}
max={255} max={255}
/> />
</FormControl> </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> </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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor.default as RequiredColorMapImageProcessorInvocation;
type ColorMapProcessorProps = { type ColorMapProcessorProps = {
controlNetId: string; controlNetId: string;
processorNode: RequiredColorMapImageProcessorInvocation; processorNode: RequiredColorMapImageProcessorInvocation;
@ -20,6 +18,9 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
const { color_map_tile_size } = processorNode; const { color_map_tile_size } = processorNode;
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'color_map_image_processor'
) as RequiredColorMapImageProcessorInvocation;
const handleColorMapTileSizeChanged = useCallback( const handleColorMapTileSizeChanged = useCallback(
(v: number) => { (v: number) => {
@ -34,7 +35,7 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
<FormLabel>{t('controlnet.colorMapTileSize')}</FormLabel> <FormLabel>{t('controlnet.colorMapTileSize')}</FormLabel>
<CompositeSlider <CompositeSlider
value={color_map_tile_size} value={color_map_tile_size}
defaultValue={DEFAULTS.color_map_tile_size} defaultValue={defaults.color_map_tile_size}
onChange={handleColorMapTileSizeChanged} onChange={handleColorMapTileSizeChanged}
min={1} min={1}
max={256} max={256}
@ -43,7 +44,7 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
/> />
<CompositeNumberInput <CompositeNumberInput
value={color_map_tile_size} value={color_map_tile_size}
defaultValue={DEFAULTS.color_map_tile_size} defaultValue={defaults.color_map_tile_size}
onChange={handleColorMapTileSizeChanged} onChange={handleColorMapTileSizeChanged}
min={1} min={1}
max={4096} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor
.default as RequiredContentShuffleImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredContentShuffleImageProcessorInvocation; processorNode: RequiredContentShuffleImageProcessorInvocation;
@ -22,6 +19,10 @@ const ContentShuffleProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'content_shuffle_image_processor'
) as RequiredContentShuffleImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -63,7 +64,7 @@ const ContentShuffleProcessor = (props: Props) => {
<FormLabel>{t('controlnet.detectResolution')}</FormLabel> <FormLabel>{t('controlnet.detectResolution')}</FormLabel>
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -71,7 +72,7 @@ const ContentShuffleProcessor = (props: Props) => {
/> />
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -81,7 +82,7 @@ const ContentShuffleProcessor = (props: Props) => {
<FormLabel>{t('controlnet.imageResolution')}</FormLabel> <FormLabel>{t('controlnet.imageResolution')}</FormLabel>
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -89,7 +90,7 @@ const ContentShuffleProcessor = (props: Props) => {
/> />
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -97,18 +98,18 @@ const ContentShuffleProcessor = (props: Props) => {
</FormControl> </FormControl>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.w')}</FormLabel> <FormLabel>{t('controlnet.w')}</FormLabel>
<CompositeSlider value={w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} marks /> <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} /> <CompositeNumberInput value={w} defaultValue={defaults.w} onChange={handleWChanged} min={0} max={4096} />
</FormControl> </FormControl>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.h')}</FormLabel> <FormLabel>{t('controlnet.h')}</FormLabel>
<CompositeSlider value={h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} marks /> <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} /> <CompositeNumberInput value={h} defaultValue={defaults.h} onChange={handleHChanged} min={0} max={4096} />
</FormControl> </FormControl>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.f')}</FormLabel> <FormLabel>{t('controlnet.f')}</FormLabel>
<CompositeSlider value={f} defaultValue={DEFAULTS.f} onChange={handleFChanged} min={0} max={4096} marks /> <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} /> <CompositeNumberInput value={f} defaultValue={defaults.f} onChange={handleFChanged} min={0} max={4096} />
</FormControl> </FormControl>
</ProcessorWrapper> </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 { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 { RequiredDWOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -8,9 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.dw_openpose_image_processor
.default as RequiredDWOpenposeImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredDWOpenposeImageProcessorInvocation; processorNode: RequiredDWOpenposeImageProcessorInvocation;
@ -23,6 +20,10 @@ const DWOpenposeProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'dw_openpose_image_processor'
) as RequiredDWOpenposeImageProcessorInvocation;
const handleDrawBodyChanged = useCallback( const handleDrawBodyChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => { (e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { draw_body: e.target.checked }); processorChanged(controlNetId, { draw_body: e.target.checked });
@ -56,15 +57,15 @@ const DWOpenposeProcessor = (props: Props) => {
<Flex sx={{ flexDir: 'row', gap: 6 }}> <Flex sx={{ flexDir: 'row', gap: 6 }}>
<FormControl isDisabled={!isEnabled} w="max-content"> <FormControl isDisabled={!isEnabled} w="max-content">
<FormLabel>{t('controlnet.body')}</FormLabel> <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>
<FormControl isDisabled={!isEnabled} w="max-content"> <FormControl isDisabled={!isEnabled} w="max-content">
<FormLabel>{t('controlnet.face')}</FormLabel> <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>
<FormControl isDisabled={!isEnabled} w="max-content"> <FormControl isDisabled={!isEnabled} w="max-content">
<FormLabel>{t('controlnet.hands')}</FormLabel> <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> </FormControl>
</Flex> </Flex>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
@ -72,7 +73,7 @@ const DWOpenposeProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -80,7 +81,7 @@ const DWOpenposeProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} 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 type { ComboboxOnChange } from '@invoke-ai/ui-library';
import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel } 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 { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import { useGetDefaultForControlnetProcessor } from 'features/controlAdapters/hooks/useGetDefaultForControlnetProcessor';
import type { import type {
DepthAnythingModelSize, DepthAnythingModelSize,
RequiredDepthAnythingImageProcessorInvocation, RequiredDepthAnythingImageProcessorInvocation,
@ -12,9 +12,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
.default as RequiredDepthAnythingImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredDepthAnythingImageProcessorInvocation; processorNode: RequiredDepthAnythingImageProcessorInvocation;
@ -25,9 +22,12 @@ const DepthAnythingProcessor = (props: Props) => {
const { controlNetId, processorNode, isEnabled } = props; const { controlNetId, processorNode, isEnabled } = props;
const { model_size, resolution } = processorNode; const { model_size, resolution } = processorNode;
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'midas_depth_image_processor'
) as RequiredDepthAnythingImageProcessorInvocation;
const handleModelSizeChange = useCallback<ComboboxOnChange>( const handleModelSizeChange = useCallback<ComboboxOnChange>(
(v) => { (v) => {
if (!isDepthAnythingModelSize(v?.value)) { if (!isDepthAnythingModelSize(v?.value)) {
@ -68,7 +68,7 @@ const DepthAnythingProcessor = (props: Props) => {
<FormLabel>{t('controlnet.modelSize')}</FormLabel> <FormLabel>{t('controlnet.modelSize')}</FormLabel>
<Combobox <Combobox
value={value} value={value}
defaultInputValue={DEFAULTS.model_size} defaultInputValue={defaults.model_size}
options={options} options={options}
onChange={handleModelSizeChange} onChange={handleModelSizeChange}
/> />
@ -78,7 +78,7 @@ const DepthAnythingProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={resolution} value={resolution}
onChange={handleResolutionChange} onChange={handleResolutionChange}
defaultValue={DEFAULTS.resolution} defaultValue={defaults.resolution}
min={64} min={64}
max={4096} max={4096}
step={64} step={64}
@ -88,7 +88,7 @@ const DepthAnythingProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={resolution} value={resolution}
onChange={handleResolutionChange} onChange={handleResolutionChange}
defaultValue={DEFAULTS.resolution} defaultValue={defaults.resolution}
min={64} min={64}
max={4096} max={4096}
step={64} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -8,8 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default as RequiredHedImageProcessorInvocation;
type HedProcessorProps = { type HedProcessorProps = {
controlNetId: string; controlNetId: string;
processorNode: RequiredHedImageProcessorInvocation; processorNode: RequiredHedImageProcessorInvocation;
@ -25,6 +23,8 @@ const HedPreprocessor = (props: HedProcessorProps) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor('hed_image_processor') as RequiredHedImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -52,7 +52,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<FormLabel>{t('controlnet.detectResolution')}</FormLabel> <FormLabel>{t('controlnet.detectResolution')}</FormLabel>
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -60,7 +60,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
/> />
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -71,7 +71,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -79,7 +79,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor
.default as RequiredLineartAnimeImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredLineartAnimeImageProcessorInvocation; processorNode: RequiredLineartAnimeImageProcessorInvocation;
@ -22,6 +19,10 @@ const LineartAnimeProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'lineart_anime_image_processor'
) as RequiredLineartAnimeImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -42,7 +43,7 @@ const LineartAnimeProcessor = (props: Props) => {
<FormLabel>{t('controlnet.detectResolution')}</FormLabel> <FormLabel>{t('controlnet.detectResolution')}</FormLabel>
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -50,7 +51,7 @@ const LineartAnimeProcessor = (props: Props) => {
/> />
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
min={0} min={0}
max={4096} max={4096}
@ -61,7 +62,7 @@ const LineartAnimeProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -69,7 +70,7 @@ const LineartAnimeProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -8,8 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default as RequiredLineartImageProcessorInvocation;
type LineartProcessorProps = { type LineartProcessorProps = {
controlNetId: string; controlNetId: string;
processorNode: RequiredLineartImageProcessorInvocation; processorNode: RequiredLineartImageProcessorInvocation;
@ -22,6 +20,10 @@ const LineartProcessor = (props: LineartProcessorProps) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'lineart_image_processor'
) as RequiredLineartImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -50,7 +52,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -58,7 +60,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
/> />
@ -68,7 +70,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -76,7 +78,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default as RequiredMediapipeFaceProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredMediapipeFaceProcessorInvocation; processorNode: RequiredMediapipeFaceProcessorInvocation;
@ -17,10 +15,14 @@ type Props = {
const MediapipeFaceProcessor = (props: Props) => { const MediapipeFaceProcessor = (props: Props) => {
const { controlNetId, processorNode, isEnabled } = props; const { controlNetId, processorNode, isEnabled } = props;
const { max_faces, min_confidence } = processorNode; const { max_faces, min_confidence, image_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'mediapipe_face_processor'
) as RequiredMediapipeFaceProcessorInvocation;
const handleMaxFacesChanged = useCallback( const handleMaxFacesChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { max_faces: v }); processorChanged(controlNetId, { max_faces: v });
@ -35,6 +37,13 @@ const MediapipeFaceProcessor = (props: Props) => {
[controlNetId, processorChanged] [controlNetId, processorChanged]
); );
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
},
[controlNetId, processorChanged]
);
return ( return (
<ProcessorWrapper> <ProcessorWrapper>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
@ -42,7 +51,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={max_faces} value={max_faces}
onChange={handleMaxFacesChanged} onChange={handleMaxFacesChanged}
defaultValue={DEFAULTS.max_faces} defaultValue={defaults.max_faces}
min={1} min={1}
max={20} max={20}
marks marks
@ -50,7 +59,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={max_faces} value={max_faces}
onChange={handleMaxFacesChanged} onChange={handleMaxFacesChanged}
defaultValue={DEFAULTS.max_faces} defaultValue={defaults.max_faces}
min={1} min={1}
max={20} max={20}
/> />
@ -60,7 +69,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={min_confidence} value={min_confidence}
onChange={handleMinConfidenceChanged} onChange={handleMinConfidenceChanged}
defaultValue={DEFAULTS.min_confidence} defaultValue={defaults.min_confidence}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
@ -69,12 +78,30 @@ const MediapipeFaceProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={min_confidence} value={min_confidence}
onChange={handleMinConfidenceChanged} onChange={handleMinConfidenceChanged}
defaultValue={DEFAULTS.min_confidence} defaultValue={defaults.min_confidence}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
/> />
</FormControl> </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> </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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
.default as RequiredMidasDepthImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredMidasDepthImageProcessorInvocation; processorNode: RequiredMidasDepthImageProcessorInvocation;
@ -18,10 +15,14 @@ type Props = {
const MidasDepthProcessor = (props: Props) => { const MidasDepthProcessor = (props: Props) => {
const { controlNetId, processorNode, isEnabled } = props; const { controlNetId, processorNode, isEnabled } = props;
const { a_mult, bg_th } = processorNode; const { a_mult, bg_th, image_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'midas_depth_image_processor'
) as RequiredMidasDepthImageProcessorInvocation;
const handleAMultChanged = useCallback( const handleAMultChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { a_mult: v }); processorChanged(controlNetId, { a_mult: v });
@ -36,6 +37,13 @@ const MidasDepthProcessor = (props: Props) => {
[controlNetId, processorChanged] [controlNetId, processorChanged]
); );
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
},
[controlNetId, processorChanged]
);
return ( return (
<ProcessorWrapper> <ProcessorWrapper>
<FormControl isDisabled={!isEnabled}> <FormControl isDisabled={!isEnabled}>
@ -43,7 +51,7 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={a_mult} value={a_mult}
onChange={handleAMultChanged} onChange={handleAMultChanged}
defaultValue={DEFAULTS.a_mult} defaultValue={defaults.a_mult}
min={0} min={0}
max={20} max={20}
step={0.01} step={0.01}
@ -52,7 +60,7 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={a_mult} value={a_mult}
onChange={handleAMultChanged} onChange={handleAMultChanged}
defaultValue={DEFAULTS.a_mult} defaultValue={defaults.a_mult}
min={0} min={0}
max={20} max={20}
step={0.01} step={0.01}
@ -63,7 +71,7 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={bg_th} value={bg_th}
onChange={handleBgThChanged} onChange={handleBgThChanged}
defaultValue={DEFAULTS.bg_th} defaultValue={defaults.bg_th}
min={0} min={0}
max={20} max={20}
step={0.01} step={0.01}
@ -72,12 +80,30 @@ const MidasDepthProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={bg_th} value={bg_th}
onChange={handleBgThChanged} onChange={handleBgThChanged}
defaultValue={DEFAULTS.bg_th} defaultValue={defaults.bg_th}
min={0} min={0}
max={20} max={20}
step={0.01} step={0.01}
/> />
</FormControl> </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> </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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default as RequiredMlsdImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredMlsdImageProcessorInvocation; processorNode: RequiredMlsdImageProcessorInvocation;
@ -21,6 +19,8 @@ const MlsdImageProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor('mlsd_image_processor') as RequiredMlsdImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -56,7 +56,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
marks={marks0to4096} marks={marks0to4096}
@ -64,7 +64,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
/> />
@ -74,7 +74,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks={marks0to4096} marks={marks0to4096}
@ -82,7 +82,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
/> />
@ -92,7 +92,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={thr_d} value={thr_d}
onChange={handleThrDChanged} onChange={handleThrDChanged}
defaultValue={DEFAULTS.thr_d} defaultValue={defaults.thr_d}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
@ -101,7 +101,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={thr_d} value={thr_d}
onChange={handleThrDChanged} onChange={handleThrDChanged}
defaultValue={DEFAULTS.thr_d} defaultValue={defaults.thr_d}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
@ -112,7 +112,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={thr_v} value={thr_v}
onChange={handleThrVChanged} onChange={handleThrVChanged}
defaultValue={DEFAULTS.thr_v} defaultValue={defaults.thr_v}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
@ -121,7 +121,7 @@ const MlsdImageProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={thr_v} value={thr_v}
onChange={handleThrVChanged} onChange={handleThrVChanged}
defaultValue={DEFAULTS.thr_v} defaultValue={defaults.thr_v}
min={0} min={0}
max={1} max={1}
step={0.01} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default as RequiredNormalbaeImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredNormalbaeImageProcessorInvocation; processorNode: RequiredNormalbaeImageProcessorInvocation;
@ -21,6 +19,10 @@ const NormalBaeProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor(
'normalbae_image_processor'
) as RequiredNormalbaeImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -42,7 +44,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -50,7 +52,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
/> />
@ -60,7 +62,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -68,7 +70,7 @@ const NormalBaeProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} 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 { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; 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 { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -8,8 +8,6 @@ import { useTranslation } from 'react-i18next';
import ProcessorWrapper from './common/ProcessorWrapper'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default as RequiredPidiImageProcessorInvocation;
type Props = { type Props = {
controlNetId: string; controlNetId: string;
processorNode: RequiredPidiImageProcessorInvocation; processorNode: RequiredPidiImageProcessorInvocation;
@ -22,6 +20,8 @@ const PidiProcessor = (props: Props) => {
const processorChanged = useProcessorNodeChanged(); const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation(); const { t } = useTranslation();
const defaults = useGetDefaultForControlnetProcessor('pidi_image_processor') as RequiredPidiImageProcessorInvocation;
const handleDetectResolutionChanged = useCallback( const handleDetectResolutionChanged = useCallback(
(v: number) => { (v: number) => {
processorChanged(controlNetId, { detect_resolution: v }); processorChanged(controlNetId, { detect_resolution: v });
@ -57,7 +57,7 @@ const PidiProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -65,7 +65,7 @@ const PidiProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={detect_resolution} value={detect_resolution}
onChange={handleDetectResolutionChanged} onChange={handleDetectResolutionChanged}
defaultValue={DEFAULTS.detect_resolution} defaultValue={defaults.detect_resolution}
min={0} min={0}
max={4096} max={4096}
/> />
@ -75,7 +75,7 @@ const PidiProcessor = (props: Props) => {
<CompositeSlider <CompositeSlider
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} max={4096}
marks marks
@ -83,7 +83,7 @@ const PidiProcessor = (props: Props) => {
<CompositeNumberInput <CompositeNumberInput
value={image_resolution} value={image_resolution}
onChange={handleImageResolutionChanged} onChange={handleImageResolutionChanged}
defaultValue={DEFAULTS.image_resolution} defaultValue={defaults.image_resolution}
min={0} min={0}
max={4096} 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 defaultPreprocessor = firstModel.default_settings?.preprocessor;
const processorType = isControlAdapterProcessorType(defaultPreprocessor) ? defaultPreprocessor : 'none'; const processorType = isControlAdapterProcessorType(defaultPreprocessor) ? defaultPreprocessor : 'none';
const processorNode = CONTROLNET_PROCESSORS[processorType].default; const processorNode = CONTROLNET_PROCESSORS[processorType].buildDefaults(baseModel);
dispatch( dispatch(
controlAdapterAdded({ controlAdapterAdded({
type, type,
@ -55,7 +55,7 @@ export const useAddControlAdapter = (type: ControlAdapterType) => {
overrides: { model: firstModel }, overrides: { model: firstModel },
}) })
); );
}, [dispatch, firstModel, isDisabled, type]); }, [dispatch, firstModel, isDisabled, type, baseModel]);
return [addControlAdapter, isDisabled] as const; 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 i18n from 'i18next';
import type { BaseModelType } from 'services/api/types';
import type { ControlAdapterProcessorType, RequiredControlAdapterProcessorNode } from './types'; import type { ControlAdapterProcessorType, RequiredControlAdapterProcessorNode } from './types';
@ -8,7 +9,7 @@ type ControlNetProcessorsDict = Record<
type: ControlAdapterProcessorType | 'none'; type: ControlAdapterProcessorType | 'none';
label: string; label: string;
description: string; description: string;
default: RequiredControlAdapterProcessorNode | { type: 'none' }; buildDefaults(baseModel?: BaseModelType): RequiredControlAdapterProcessorNode | { type: 'none' };
} }
>; >;
/** /**
@ -29,9 +30,9 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.noneDescription'); return i18n.t('controlnet.noneDescription');
}, },
default: { buildDefaults: () => ({
type: 'none', type: 'none',
}, }),
}, },
canny_image_processor: { canny_image_processor: {
type: 'canny_image_processor', type: 'canny_image_processor',
@ -41,12 +42,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.cannyDescription'); return i18n.t('controlnet.cannyDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'canny_image_processor', id: 'canny_image_processor',
type: 'canny_image_processor', type: 'canny_image_processor',
low_threshold: 100, low_threshold: 100,
high_threshold: 200, high_threshold: 200,
}, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
}, },
color_map_image_processor: { color_map_image_processor: {
type: 'color_map_image_processor', type: 'color_map_image_processor',
@ -56,11 +58,11 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.colorMapDescription'); return i18n.t('controlnet.colorMapDescription');
}, },
default: { buildDefaults: () => ({
id: 'color_map_image_processor', id: 'color_map_image_processor',
type: 'color_map_image_processor', type: 'color_map_image_processor',
color_map_tile_size: 64, color_map_tile_size: 64,
}, }),
}, },
content_shuffle_image_processor: { content_shuffle_image_processor: {
type: 'content_shuffle_image_processor', type: 'content_shuffle_image_processor',
@ -70,15 +72,15 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.contentShuffleDescription'); return i18n.t('controlnet.contentShuffleDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'content_shuffle_image_processor', id: 'content_shuffle_image_processor',
type: 'content_shuffle_image_processor', type: 'content_shuffle_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
h: 512, h: baseModel === 'sdxl' ? 1024 : 512,
w: 512, w: baseModel === 'sdxl' ? 1024 : 512,
f: 256, f: baseModel === 'sdxl' ? 512 : 256,
}, }),
}, },
depth_anything_image_processor: { depth_anything_image_processor: {
type: 'depth_anything_image_processor', type: 'depth_anything_image_processor',
@ -88,12 +90,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.depthAnythingDescription'); return i18n.t('controlnet.depthAnythingDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'depth_anything_image_processor', id: 'depth_anything_image_processor',
type: 'depth_anything_image_processor', type: 'depth_anything_image_processor',
model_size: 'small', model_size: 'small',
resolution: 512, resolution: baseModel === 'sdxl' ? 1024 : 512,
}, }),
}, },
hed_image_processor: { hed_image_processor: {
type: 'hed_image_processor', type: 'hed_image_processor',
@ -103,13 +105,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.hedDescription'); return i18n.t('controlnet.hedDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'hed_image_processor', id: 'hed_image_processor',
type: 'hed_image_processor', type: 'hed_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
scribble: false, scribble: false,
}, }),
}, },
lineart_anime_image_processor: { lineart_anime_image_processor: {
type: 'lineart_anime_image_processor', type: 'lineart_anime_image_processor',
@ -119,12 +121,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.lineartAnimeDescription'); return i18n.t('controlnet.lineartAnimeDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'lineart_anime_image_processor', id: 'lineart_anime_image_processor',
type: 'lineart_anime_image_processor', type: 'lineart_anime_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}, }),
}, },
lineart_image_processor: { lineart_image_processor: {
type: 'lineart_image_processor', type: 'lineart_image_processor',
@ -134,13 +136,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.lineartDescription'); return i18n.t('controlnet.lineartDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'lineart_image_processor', id: 'lineart_image_processor',
type: 'lineart_image_processor', type: 'lineart_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
coarse: false, coarse: false,
}, }),
}, },
mediapipe_face_processor: { mediapipe_face_processor: {
type: 'mediapipe_face_processor', type: 'mediapipe_face_processor',
@ -150,12 +152,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.mediapipeFaceDescription'); return i18n.t('controlnet.mediapipeFaceDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'mediapipe_face_processor', id: 'mediapipe_face_processor',
type: 'mediapipe_face_processor', type: 'mediapipe_face_processor',
max_faces: 1, max_faces: 1,
min_confidence: 0.5, min_confidence: 0.5,
}, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
}, },
midas_depth_image_processor: { midas_depth_image_processor: {
type: 'midas_depth_image_processor', type: 'midas_depth_image_processor',
@ -165,12 +168,13 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.depthMidasDescription'); return i18n.t('controlnet.depthMidasDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'midas_depth_image_processor', id: 'midas_depth_image_processor',
type: 'midas_depth_image_processor', type: 'midas_depth_image_processor',
a_mult: 2, a_mult: 2,
bg_th: 0.1, bg_th: 0.1,
}, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}),
}, },
mlsd_image_processor: { mlsd_image_processor: {
type: 'mlsd_image_processor', type: 'mlsd_image_processor',
@ -180,14 +184,14 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.mlsdDescription'); return i18n.t('controlnet.mlsdDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'mlsd_image_processor', id: 'mlsd_image_processor',
type: 'mlsd_image_processor', type: 'mlsd_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
thr_d: 0.1, thr_d: 0.1,
thr_v: 0.1, thr_v: 0.1,
}, }),
}, },
normalbae_image_processor: { normalbae_image_processor: {
type: 'normalbae_image_processor', type: 'normalbae_image_processor',
@ -197,12 +201,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.normalBaeDescription'); return i18n.t('controlnet.normalBaeDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'normalbae_image_processor', id: 'normalbae_image_processor',
type: 'normalbae_image_processor', type: 'normalbae_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
}, }),
}, },
dw_openpose_image_processor: { dw_openpose_image_processor: {
type: 'dw_openpose_image_processor', type: 'dw_openpose_image_processor',
@ -212,14 +216,14 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.dwOpenposeDescription'); return i18n.t('controlnet.dwOpenposeDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'dw_openpose_image_processor', id: 'dw_openpose_image_processor',
type: 'dw_openpose_image_processor', type: 'dw_openpose_image_processor',
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
draw_body: true, draw_body: true,
draw_face: false, draw_face: false,
draw_hands: false, draw_hands: false,
}, }),
}, },
pidi_image_processor: { pidi_image_processor: {
type: 'pidi_image_processor', type: 'pidi_image_processor',
@ -229,14 +233,14 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.pidiDescription'); return i18n.t('controlnet.pidiDescription');
}, },
default: { buildDefaults: (baseModel?: BaseModelType) => ({
id: 'pidi_image_processor', id: 'pidi_image_processor',
type: 'pidi_image_processor', type: 'pidi_image_processor',
detect_resolution: 512, detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
image_resolution: 512, image_resolution: baseModel === 'sdxl' ? 1024 : 512,
scribble: false, scribble: false,
safe: false, safe: false,
}, }),
}, },
zoe_depth_image_processor: { zoe_depth_image_processor: {
type: 'zoe_depth_image_processor', type: 'zoe_depth_image_processor',
@ -246,9 +250,9 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
get description() { get description() {
return i18n.t('controlnet.depthZoeDescription'); return i18n.t('controlnet.depthZoeDescription');
}, },
default: { buildDefaults: () => ({
id: 'zoe_depth_image_processor', id: 'zoe_depth_image_processor',
type: '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( const processorNode = cloneDeep(
CONTROLNET_PROCESSORS[processorType].default CONTROLNET_PROCESSORS[processorType].buildDefaults(cn.model?.base)
) as RequiredControlAdapterProcessorNode; ) as RequiredControlAdapterProcessorNode;
caAdapter.updateOne(state, { 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< export type RequiredCannyImageProcessorInvocation = O.Required<
CannyImageProcessorInvocation, 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< export type RequiredColorMapImageProcessorInvocation = O.Required<
ColorMapImageProcessorInvocation, 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< export type RequiredMediapipeFaceProcessorInvocation = O.Required<
MediapipeFaceProcessorInvocation, 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< export type RequiredMidasDepthImageProcessorInvocation = O.Required<
MidasDepthImageProcessorInvocation, MidasDepthImageProcessorInvocation,
'type' | 'a_mult' | 'bg_th' 'type' | 'a_mult' | 'bg_th' | 'image_resolution'
>; >;
/** /**