feat: Add DepthAnything to Linear UI

Author: blessedcoolant

invokeai/frontend/web/public/locales/en.json

@@ -224,6 +224,7 @@
         "amult": "a_mult",
         "autoConfigure": "Auto configure processor",
         "balanced": "Balanced",
+        "base": "Base",
         "beginEndStepPercent": "Begin / End Step Percentage",
         "bgth": "bg_th",
         "canny": "Canny",
@@ -237,6 +238,8 @@
         "controlMode": "Control Mode",
         "crop": "Crop",
         "delete": "Delete",
+        "depthAnything": "Depth Anything",
+        "depthAnythingDescription": "Depth map generation using the Depth Anything technique",
         "depthMidas": "Depth (Midas)",
         "depthMidasDescription": "Depth map generation using Midas",
         "depthZoe": "Depth (Zoe)",
@@ -256,6 +259,7 @@
         "colorMapTileSize": "Tile Size",
         "importImageFromCanvas": "Import Image From Canvas",
         "importMaskFromCanvas": "Import Mask From Canvas",
+        "large": "Large",
         "lineart": "Lineart",
         "lineartAnime": "Lineart Anime",
         "lineartAnimeDescription": "Anime-style lineart processing",
@@ -268,6 +272,7 @@
         "minConfidence": "Min Confidence",
         "mlsd": "M-LSD",
         "mlsdDescription": "Minimalist Line Segment Detector",
+        "modelSize": "Model Size",
         "none": "None",
         "noneDescription": "No processing applied",
         "normalBae": "Normal BAE",
@@ -288,6 +293,7 @@
         "selectModel": "Select a model",
         "setControlImageDimensions": "Set Control Image Dimensions To W/H",
         "showAdvanced": "Show Advanced",
+        "small": "Small",
         "toggleControlNet": "Toggle this ControlNet",
         "w": "W",
         "weight": "Weight",

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import CannyProcessor from './processors/CannyProcessor';
 import ColorMapProcessor from './processors/ColorMapProcessor';
 import ContentShuffleProcessor from './processors/ContentShuffleProcessor';
+import DepthAnyThingProcessor from './processors/DepthAnyThingProcessor';
 import HedProcessor from './processors/HedProcessor';
 import LineartAnimeProcessor from './processors/LineartAnimeProcessor';
 import LineartProcessor from './processors/LineartProcessor';
@@ -48,6 +49,16 @@ const ControlAdapterProcessorComponent = ({ id }: Props) => {
     );
   }
 
+  if (processorNode.type === 'depth_anything_image_processor') {
+    return (
+      <DepthAnyThingProcessor
+        controlNetId={id}
+        processorNode={processorNode}
+        isEnabled={isEnabled}
+      />
+    );
+  }
+
   if (processorNode.type === 'hed_image_processor') {
     return (
       <HedProcessor

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

@@ -0,0 +1,72 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
+import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
+import type {
+  DepthAnythingModelSize,
+  RequiredDepthAnythingImageProcessorInvocation,
+} from 'features/controlAdapters/store/types';
+import { isDepthAnythingModelSize } from 'features/controlAdapters/store/types';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ProcessorWrapper from './common/ProcessorWrapper';
+
+const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
+  .default as RequiredDepthAnythingImageProcessorInvocation;
+
+type Props = {
+  controlNetId: string;
+  processorNode: RequiredDepthAnythingImageProcessorInvocation;
+  isEnabled: boolean;
+};
+
+const DepthAnythingProcessor = (props: Props) => {
+  const { controlNetId, processorNode, isEnabled } = props;
+  const { model_size } = processorNode;
+  const processorChanged = useProcessorNodeChanged();
+
+  const { t } = useTranslation();
+
+  const handleModelSizeChange = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isDepthAnythingModelSize(v?.value)) {
+        return;
+      }
+      processorChanged(controlNetId, {
+        model_size: v.value,
+      });
+    },
+    [controlNetId, processorChanged]
+  );
+
+  const options: { label: string; value: DepthAnythingModelSize }[] = useMemo(
+    () => [
+      { label: t('controlnet.large'), value: 'large' },
+      { label: t('controlnet.base'), value: 'base' },
+      { label: t('controlnet.small'), value: 'small' },
+    ],
+    [t]
+  );
+
+  const value = useMemo(
+    () => options.filter((o) => o.value === model_size)[0],
+    [options, model_size]
+  );
+
+  return (
+    <ProcessorWrapper>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.modelSize')}</FormLabel>
+        <Combobox
+          value={value}
+          defaultInputValue={DEFAULTS.model_size}
+          options={options}
+          onChange={handleModelSizeChange}
+        />
+      </FormControl>
+    </ProcessorWrapper>
+  );
+};
+
+export default memo(DepthAnythingProcessor);

invokeai/frontend/web/src/features/controlAdapters/store/constants.ts

@@ -83,6 +83,21 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       f: 256,
     },
   },
+  depth_anything_image_processor: {
+    type: 'depth_anything_image_processor',
+    get label() {
+      return i18n.t('controlnet.depthAnything');
+    },
+    get description() {
+      return i18n.t('controlnet.depthAnythingDescription');
+    },
+    default: {
+      id: 'depth_anything_image_processor',
+      type: 'depth_anything_image_processor',
+      model_size: 'large',
+      offload: false,
+    },
+  },
   hed_image_processor: {
     type: 'hed_image_processor',
     get label() {

invokeai/frontend/web/src/features/controlAdapters/store/types.ts

@@ -10,6 +10,7 @@ import type {
   CannyImageProcessorInvocation,
   ColorMapImageProcessorInvocation,
   ContentShuffleImageProcessorInvocation,
+  DepthAnythingImageProcessorInvocation,
   HedImageProcessorInvocation,
   LineartAnimeImageProcessorInvocation,
   LineartImageProcessorInvocation,
@@ -31,6 +32,7 @@ export type ControlAdapterProcessorNode =
   | CannyImageProcessorInvocation
   | ColorMapImageProcessorInvocation
   | ContentShuffleImageProcessorInvocation
+  | DepthAnythingImageProcessorInvocation
   | HedImageProcessorInvocation
   | LineartAnimeImageProcessorInvocation
   | LineartImageProcessorInvocation
@@ -73,6 +75,20 @@ export type RequiredContentShuffleImageProcessorInvocation = O.Required<
   'type' | 'detect_resolution' | 'image_resolution' | 'w' | 'h' | 'f'
 >;
 
+/**
+ * The DepthAnything processor node, with parameters flagged as required
+ */
+export type RequiredDepthAnythingImageProcessorInvocation = O.Required<
+  DepthAnythingImageProcessorInvocation,
+  'type' | 'model_size' | 'offload'
+>;
+
+export const zDepthAnythingModelSize = z.enum(['large', 'base', 'small']);
+export type DepthAnythingModelSize = z.infer<typeof zDepthAnythingModelSize>;
+export const isDepthAnythingModelSize = (
+  v: unknown
+): v is DepthAnythingModelSize => zDepthAnythingModelSize.safeParse(v).success;
+
 /**
  * The HED processor node, with parameters flagged as required
  */
@@ -161,6 +177,7 @@ export type RequiredControlAdapterProcessorNode =
       | RequiredCannyImageProcessorInvocation
       | RequiredColorMapImageProcessorInvocation
       | RequiredContentShuffleImageProcessorInvocation
+      | RequiredDepthAnythingImageProcessorInvocation
       | RequiredHedImageProcessorInvocation
       | RequiredLineartAnimeImageProcessorInvocation
       | RequiredLineartImageProcessorInvocation
@@ -219,6 +236,22 @@ export const isContentShuffleImageProcessorInvocation = (
   return false;
 };
 
+/**
+ * Type guard for DepthAnythingImageProcessorInvocation
+ */
+export const isDepthAnythingImageProcessorInvocation = (
+  obj: unknown
+): obj is DepthAnythingImageProcessorInvocation => {
+  if (
+    isObject(obj) &&
+    'type' in obj &&
+    obj.type === 'depth_anything_image_processor'
+  ) {
+    return true;
+  }
+  return false;
+};
+
 /**
  * Type guard for HedImageprocessorInvocation
  */