refactor(ui): add CA processor config components (wip)

invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayerConfig.tsx

@@ -1,6 +1,5 @@
 import { Box, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import ControlAdapterProcessorComponent from 'features/controlAdapters/components/ControlAdapterProcessorComponent';
 import { CALayerModelCombobox } from 'features/controlLayers/components/CALayer/CALayerModelCombobox';
 import { selectCALayer } from 'features/controlLayers/store/controlLayersSlice';
 import { memo } from 'react';
@@ -11,6 +10,7 @@ import { useToggle } from 'react-use';
 import { CALayerBeginEndStepPct } from './CALayerBeginEndStepPct';
 import { CALayerControlMode } from './CALayerControlMode';
 import { CALayerImagePreview } from './CALayerImagePreview';
+import { CALayerProcessor } from './CALayerProcessor';
 import { CALayerProcessorCombobox } from './CALayerProcessorCombobox';
 import { CALayerWeight } from './CALayerWeight';
 
@@ -60,7 +60,7 @@ export const CALayerConfig = memo(({ layerId }: Props) => {
       {isExpanded && (
         <>
           <CALayerProcessorCombobox layerId={layerId} />
-          <ControlAdapterProcessorComponent id={id} />
+          <CALayerProcessor layerId={layerId} />
         </>
       )}
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayerProcessor.tsx

@@ -0,0 +1,95 @@
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { caLayerProcessorConfigChanged, selectCALayer } from 'features/controlLayers/store/controlLayersSlice';
+import type { ProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback } from 'react';
+
+import { CannyProcessor } from './processors/CannyProcessor';
+import { ColorMapProcessor } from './processors/ColorMapProcessor';
+import { ContentShuffleProcessor } from './processors/ContentShuffleProcessor';
+import { DepthAnythingProcessor } from './processors/DepthAnythingProcessor';
+import { DWOpenposeProcessor } from './processors/DWOpenposeProcessor';
+import { HedProcessor } from './processors/HedProcessor';
+import { LineartProcessor } from './processors/LineartProcessor';
+import { MediapipeFaceProcessor } from './processors/MediapipeFaceProcessor';
+import { MidasDepthProcessor } from './processors/MidasDepthProcessor';
+import { MlsdImageProcessor } from './processors/MlsdImageProcessor';
+import { PidiProcessor } from './processors/PidiProcessor';
+
+type Props = {
+  layerId: string;
+};
+
+export const CALayerProcessor = memo(({ layerId }: Props) => {
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((s) => selectCALayer(s.controlLayers.present, layerId).controlAdapter.processorConfig);
+  const onChange = useCallback(
+    (processorConfig: ProcessorConfig) => {
+      dispatch(caLayerProcessorConfigChanged({ layerId, processorConfig }));
+    },
+    [dispatch, layerId]
+  );
+
+  if (!config) {
+    return null;
+  }
+
+  if (config.type === 'canny_image_processor') {
+    return <CannyProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'color_map_image_processor') {
+    return <ColorMapProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'depth_anything_image_processor') {
+    return <DepthAnythingProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'hed_image_processor') {
+    return <HedProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'lineart_image_processor') {
+    return <LineartProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'content_shuffle_image_processor') {
+    return <ContentShuffleProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'lineart_anime_image_processor') {
+    // No configurable options for this processor
+    return null;
+  }
+
+  if (config.type === 'mediapipe_face_processor') {
+    return <MediapipeFaceProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'midas_depth_image_processor') {
+    return <MidasDepthProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'mlsd_image_processor') {
+    return <MlsdImageProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'normalbae_image_processor') {
+    // No configurable options for this processor
+    return null;
+  }
+
+  if (config.type === 'dw_openpose_image_processor') {
+    return <DWOpenposeProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'pidi_image_processor') {
+    return <PidiProcessor onChange={onChange} config={config} />;
+  }
+
+  if (config.type === 'zoe_depth_image_processor') {
+    return null;
+  }
+});
+
+CALayerProcessor.displayName = 'CALayerProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/CannyProcessor.tsx

@@ -0,0 +1,67 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import { type CannyProcessorConfig, CONTROLNET_PROCESSORS } from 'features/controlLayers/util/controlAdapters';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<CannyProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['canny_image_processor'].buildDefaults();
+
+export const CannyProcessor = ({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+  const handleLowThresholdChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, low_threshold: v });
+    },
+    [onChange, config]
+  );
+  const handleHighThresholdChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, high_threshold: v });
+    },
+    [onChange, config]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.lowThreshold')}</FormLabel>
+        <CompositeSlider
+          value={config.low_threshold}
+          onChange={handleLowThresholdChanged}
+          defaultValue={DEFAULTS.low_threshold}
+          min={0}
+          max={255}
+        />
+        <CompositeNumberInput
+          value={config.low_threshold}
+          onChange={handleLowThresholdChanged}
+          defaultValue={DEFAULTS.low_threshold}
+          min={0}
+          max={255}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.highThreshold')}</FormLabel>
+        <CompositeSlider
+          value={config.high_threshold}
+          onChange={handleHighThresholdChanged}
+          defaultValue={DEFAULTS.high_threshold}
+          min={0}
+          max={255}
+        />
+        <CompositeNumberInput
+          value={config.high_threshold}
+          onChange={handleHighThresholdChanged}
+          defaultValue={DEFAULTS.high_threshold}
+          min={0}
+          max={255}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+};
+
+CannyProcessor.displayName = 'CannyProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/ColorMapProcessor.tsx

@@ -0,0 +1,47 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import { type ColorMapProcessorConfig, CONTROLNET_PROCESSORS } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<ColorMapProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['color_map_image_processor'].buildDefaults();
+
+export const ColorMapProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+  const handleColorMapTileSizeChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, color_map_tile_size: v });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.colorMapTileSize')}</FormLabel>
+        <CompositeSlider
+          value={config.color_map_tile_size}
+          defaultValue={DEFAULTS.color_map_tile_size}
+          onChange={handleColorMapTileSizeChanged}
+          min={1}
+          max={256}
+          step={1}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.color_map_tile_size}
+          defaultValue={DEFAULTS.color_map_tile_size}
+          onChange={handleColorMapTileSizeChanged}
+          min={1}
+          max={4096}
+          step={1}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+ColorMapProcessor.displayName = 'ColorMapProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/ContentShuffleProcessor.tsx

@@ -0,0 +1,79 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { ContentShuffleProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { CONTROLNET_PROCESSORS } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<ContentShuffleProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['content_shuffle_image_processor'].buildDefaults();
+
+export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleWChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, w: v });
+    },
+    [config, onChange]
+  );
+
+  const handleHChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, h: v });
+    },
+    [config, onChange]
+  );
+
+  const handleFChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, f: v });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.w')}</FormLabel>
+        <CompositeSlider
+          value={config.w}
+          defaultValue={DEFAULTS.w}
+          onChange={handleWChanged}
+          min={0}
+          max={4096}
+          marks
+        />
+        <CompositeNumberInput value={config.w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.h')}</FormLabel>
+        <CompositeSlider
+          value={config.h}
+          defaultValue={DEFAULTS.h}
+          onChange={handleHChanged}
+          min={0}
+          max={4096}
+          marks
+        />
+        <CompositeNumberInput value={config.h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.f')}</FormLabel>
+        <CompositeSlider
+          value={config.f}
+          defaultValue={DEFAULTS.f}
+          onChange={handleFChanged}
+          min={0}
+          max={4096}
+          marks
+        />
+        <CompositeNumberInput value={config.f} defaultValue={DEFAULTS.f} onChange={handleFChanged} min={0} max={4096} />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+ContentShuffleProcessor.displayName = 'ContentShuffleProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/DWOpenposeProcessor.tsx

@@ -0,0 +1,62 @@
+import { Flex, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { DWOpenposeProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { CONTROLNET_PROCESSORS } from 'features/controlLayers/util/controlAdapters';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<DWOpenposeProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['dw_openpose_image_processor'].buildDefaults();
+
+export const DWOpenposeProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleDrawBodyChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, draw_body: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  const handleDrawFaceChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, draw_face: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  const handleDrawHandsChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, draw_hands: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <Flex sx={{ flexDir: 'row', gap: 6 }}>
+        <FormControl w="max-content">
+          <FormLabel>{t('controlnet.body')}</FormLabel>
+          <Switch defaultChecked={DEFAULTS.draw_body} isChecked={config.draw_body} onChange={handleDrawBodyChanged} />
+        </FormControl>
+        <FormControl w="max-content">
+          <FormLabel>{t('controlnet.face')}</FormLabel>
+          <Switch defaultChecked={DEFAULTS.draw_face} isChecked={config.draw_face} onChange={handleDrawFaceChanged} />
+        </FormControl>
+        <FormControl w="max-content">
+          <FormLabel>{t('controlnet.hands')}</FormLabel>
+          <Switch
+            defaultChecked={DEFAULTS.draw_hands}
+            isChecked={config.draw_hands}
+            onChange={handleDrawHandsChanged}
+          />
+        </FormControl>
+      </Flex>
+    </ProcessorWrapper>
+  );
+});
+
+DWOpenposeProcessor.displayName = 'DWOpenposeProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/DepthAnythingProcessor.tsx

@@ -0,0 +1,52 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { DepthAnythingModelSize, DepthAnythingProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { CONTROLNET_PROCESSORS, isDepthAnythingModelSize } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<DepthAnythingProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['depth_anything_image_processor'].buildDefaults();
+
+export const DepthAnythingProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+  const handleModelSizeChange = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isDepthAnythingModelSize(v?.value)) {
+        return;
+      }
+      onChange({ ...config, model_size: v.value });
+    },
+    [config, onChange]
+  );
+
+  const options: { label: string; value: DepthAnythingModelSize }[] = useMemo(
+    () => [
+      { label: t('controlnet.small'), value: 'small' },
+      { label: t('controlnet.base'), value: 'base' },
+      { label: t('controlnet.large'), value: 'large' },
+    ],
+    [t]
+  );
+
+  const value = useMemo(() => options.filter((o) => o.value === config.model_size)[0], [options, config.model_size]);
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.modelSize')}</FormLabel>
+        <Combobox
+          value={value}
+          defaultInputValue={DEFAULTS.model_size}
+          options={options}
+          onChange={handleModelSizeChange}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+DepthAnythingProcessor.displayName = 'DepthAnythingProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/HedProcessor.tsx

@@ -0,0 +1,32 @@
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { HedProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<HedProcessorConfig>;
+
+export const HedProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleScribbleChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, scribble: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.scribble')}</FormLabel>
+        <Switch isChecked={config.scribble} onChange={handleScribbleChanged} />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+HedProcessor.displayName = 'HedProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/LineartProcessor.tsx

@@ -0,0 +1,32 @@
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { LineartProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<LineartProcessorConfig>;
+
+export const LineartProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleCoarseChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, coarse: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.coarse')}</FormLabel>
+        <Switch isChecked={config.coarse} onChange={handleCoarseChanged} />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+LineartProcessor.displayName = 'LineartProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/MediapipeFaceProcessor.tsx

@@ -0,0 +1,73 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import { CONTROLNET_PROCESSORS, type MediapipeFaceProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<MediapipeFaceProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['mediapipe_face_processor'].buildDefaults();
+
+export const MediapipeFaceProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleMaxFacesChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, max_faces: v });
+    },
+    [config, onChange]
+  );
+
+  const handleMinConfidenceChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, min_confidence: v });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.maxFaces')}</FormLabel>
+        <CompositeSlider
+          value={config.max_faces}
+          onChange={handleMaxFacesChanged}
+          defaultValue={DEFAULTS.max_faces}
+          min={1}
+          max={20}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.max_faces}
+          onChange={handleMaxFacesChanged}
+          defaultValue={DEFAULTS.max_faces}
+          min={1}
+          max={20}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.minConfidence')}</FormLabel>
+        <CompositeSlider
+          value={config.min_confidence}
+          onChange={handleMinConfidenceChanged}
+          defaultValue={DEFAULTS.min_confidence}
+          min={0}
+          max={1}
+          step={0.01}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.min_confidence}
+          onChange={handleMinConfidenceChanged}
+          defaultValue={DEFAULTS.min_confidence}
+          min={0}
+          max={1}
+          step={0.01}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+MediapipeFaceProcessor.displayName = 'MediapipeFaceProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/MidasDepthProcessor.tsx

@@ -0,0 +1,76 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { MidasDepthProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { CONTROLNET_PROCESSORS } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<MidasDepthProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['midas_depth_image_processor'].buildDefaults();
+
+export const MidasDepthProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleAMultChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, a_mult: v });
+    },
+    [config, onChange]
+  );
+
+  const handleBgThChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, bg_th: v });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.amult')}</FormLabel>
+        <CompositeSlider
+          value={config.a_mult}
+          onChange={handleAMultChanged}
+          defaultValue={DEFAULTS.a_mult}
+          min={0}
+          max={20}
+          step={0.01}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.a_mult}
+          onChange={handleAMultChanged}
+          defaultValue={DEFAULTS.a_mult}
+          min={0}
+          max={20}
+          step={0.01}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.bgth')}</FormLabel>
+        <CompositeSlider
+          value={config.bg_th}
+          onChange={handleBgThChanged}
+          defaultValue={DEFAULTS.bg_th}
+          min={0}
+          max={20}
+          step={0.01}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.bg_th}
+          onChange={handleBgThChanged}
+          defaultValue={DEFAULTS.bg_th}
+          min={0}
+          max={20}
+          step={0.01}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+MidasDepthProcessor.displayName = 'MidasDepthProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/MlsdImageProcessor.tsx

@@ -0,0 +1,76 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { MlsdProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import { CONTROLNET_PROCESSORS } from 'features/controlLayers/util/controlAdapters';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<MlsdProcessorConfig>;
+const DEFAULTS = CONTROLNET_PROCESSORS['mlsd_image_processor'].buildDefaults();
+
+export const MlsdImageProcessor = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleThrDChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, thr_d: v });
+    },
+    [config, onChange]
+  );
+
+  const handleThrVChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, thr_v: v });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.w')} </FormLabel>
+        <CompositeSlider
+          value={config.thr_d}
+          onChange={handleThrDChanged}
+          defaultValue={DEFAULTS.thr_d}
+          min={0}
+          max={1}
+          step={0.01}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.thr_d}
+          onChange={handleThrDChanged}
+          defaultValue={DEFAULTS.thr_d}
+          min={0}
+          max={1}
+          step={0.01}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.h')} </FormLabel>
+        <CompositeSlider
+          value={config.thr_v}
+          onChange={handleThrVChanged}
+          defaultValue={DEFAULTS.thr_v}
+          min={0}
+          max={1}
+          step={0.01}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.thr_v}
+          onChange={handleThrVChanged}
+          defaultValue={DEFAULTS.thr_v}
+          min={0}
+          max={1}
+          step={0.01}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+});
+
+MlsdImageProcessor.displayName = 'MlsdImageProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/PidiProcessor.tsx

@@ -0,0 +1,43 @@
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import type { ProcessorComponentProps } from 'features/controlLayers/components/CALayer/processors/types';
+import type { PidiProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+import type { ChangeEvent } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './ProcessorWrapper';
+
+type Props = ProcessorComponentProps<PidiProcessorConfig>;
+
+export const PidiProcessor = ({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const handleScribbleChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, scribble: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  const handleSafeChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, safe: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl>
+        <FormLabel>{t('controlnet.scribble')}</FormLabel>
+        <Switch isChecked={config.scribble} onChange={handleScribbleChanged} />
+      </FormControl>
+      <FormControl>
+        <FormLabel>{t('controlnet.safe')}</FormLabel>
+        <Switch isChecked={config.safe} onChange={handleSafeChanged} />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+};
+
+PidiProcessor.displayName = 'PidiProcessor';

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/ProcessorWrapper.tsx

@@ -0,0 +1,15 @@
+import { Flex } from '@invoke-ai/ui-library';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+type Props = PropsWithChildren;
+
+const ProcessorWrapper = (props: Props) => {
+  return (
+    <Flex flexDir="column" gap={4}>
+      {props.children}
+    </Flex>
+  );
+};
+
+export default memo(ProcessorWrapper);

invokeai/frontend/web/src/features/controlLayers/components/CALayer/processors/types.ts

@@ -0,0 +1,6 @@
+import type { ProcessorConfig } from 'features/controlLayers/util/controlAdapters';
+
+export type ProcessorComponentProps<T extends ProcessorConfig> = {
+  onChange: (config: T) => void;
+  config: T;
+};

invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts

@@ -240,7 +240,7 @@ export const controlLayersSlice = createSlice({
       layer.bboxNeedsUpdate = true;
       layer.isEnabled = true;
       layer.controlAdapter.image = imageDTO ? imageDTOToImageWithDims(imageDTO) : null;
-      layer.controlAdapter.processedImage =  null;
+      layer.controlAdapter.processedImage = null;
     },
     caLayerProcessedImageChanged: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
       const { layerId, imageDTO } = action.payload;

invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.test.ts

@@ -3,7 +3,14 @@ import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 import { describe, test } from 'vitest';
 
-import type { CLIPVisionModel, ControlMode, IPMethod, ProcessorConfig, ProcessorType } from './controlAdapters';
+import type {
+  CLIPVisionModel,
+  ControlMode,
+  DepthAnythingModelSize,
+  IPMethod,
+  ProcessorConfig,
+  ProcessorType,
+} from './controlAdapters';
 
 describe('Control Adapter Types', () => {
   test('ProcessorType', () => assert<Equals<ProcessorConfig['type'], ProcessorType>>());
@@ -11,4 +18,6 @@ describe('Control Adapter Types', () => {
   test('CLIP Vision Model', () =>
     assert<Equals<NonNullable<S['IPAdapterInvocation']['clip_vision_model']>, CLIPVisionModel>>());
   test('Control Mode', () => assert<Equals<NonNullable<S['ControlNetInvocation']['control_mode']>, ControlMode>>());
+  test('DepthAnything Model Size', () =>
+    assert<Equals<NonNullable<S['DepthAnythingImageProcessorInvocation']['model_size']>, DepthAnythingModelSize>>());
 });