feat(ui): add missing detect_resolution to processors

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

@@ -15,7 +15,7 @@ type CannyProcessorProps = {
 
 const CannyProcessor = (props: CannyProcessorProps) => {
   const { controlNetId, processorNode, isEnabled } = props;
-  const { low_threshold, high_threshold, image_resolution } = processorNode;
+  const { low_threshold, high_threshold, image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
   const { t } = useTranslation();
   const defaults = useGetDefaultForControlnetProcessor(
@@ -43,6 +43,13 @@ const CannyProcessor = (props: CannyProcessorProps) => {
     [controlNetId, processorChanged]
   );
 
+  const handleDetectResolutionChanged = useCallback(
+    (v: number) => {
+      processorChanged(controlNetId, { detect_resolution: v });
+    },
+    [controlNetId, processorChanged]
+  );
+
   return (
     <ProcessorWrapper>
       <FormControl isDisabled={!isEnabled}>
@@ -97,6 +104,24 @@ const CannyProcessor = (props: CannyProcessorProps) => {
           max={4096}
         />
       </FormControl>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.detectResolution')}</FormLabel>
+        <CompositeSlider
+          value={detect_resolution}
+          onChange={handleDetectResolutionChanged}
+          defaultValue={defaults.detect_resolution}
+          min={0}
+          max={4096}
+          marks
+        />
+        <CompositeNumberInput
+          value={detect_resolution}
+          onChange={handleDetectResolutionChanged}
+          defaultValue={defaults.detect_resolution}
+          min={0}
+          max={4096}
+        />
+      </FormControl>
     </ProcessorWrapper>
   );
 };

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

@@ -15,7 +15,7 @@ type Props = {
 
 const MediapipeFaceProcessor = (props: Props) => {
   const { controlNetId, processorNode, isEnabled } = props;
-  const { max_faces, min_confidence, image_resolution } = processorNode;
+  const { max_faces, min_confidence, image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
   const { t } = useTranslation();
 
@@ -44,6 +44,13 @@ const MediapipeFaceProcessor = (props: Props) => {
     [controlNetId, processorChanged]
   );
 
+  const handleDetectResolutionChanged = useCallback(
+    (v: number) => {
+      processorChanged(controlNetId, { detect_resolution: v });
+    },
+    [controlNetId, processorChanged]
+  );
+
   return (
     <ProcessorWrapper>
       <FormControl isDisabled={!isEnabled}>
@@ -102,6 +109,24 @@ const MediapipeFaceProcessor = (props: Props) => {
           max={4096}
         />
       </FormControl>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.detectResolution')}</FormLabel>
+        <CompositeSlider
+          value={detect_resolution}
+          onChange={handleDetectResolutionChanged}
+          defaultValue={defaults.detect_resolution}
+          min={0}
+          max={4096}
+          marks
+        />
+        <CompositeNumberInput
+          value={detect_resolution}
+          onChange={handleDetectResolutionChanged}
+          defaultValue={defaults.detect_resolution}
+          min={0}
+          max={4096}
+        />
+      </FormControl>
     </ProcessorWrapper>
   );
 };

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

@@ -15,7 +15,7 @@ type Props = {
 
 const MidasDepthProcessor = (props: Props) => {
   const { controlNetId, processorNode, isEnabled } = props;
-  const { a_mult, bg_th, image_resolution } = processorNode;
+  const { a_mult, bg_th, image_resolution, detect_resolution } = processorNode;
   const processorChanged = useProcessorNodeChanged();
   const { t } = useTranslation();
 
@@ -44,6 +44,13 @@ const MidasDepthProcessor = (props: Props) => {
     [controlNetId, processorChanged]
   );
 
+  const handleDetectResolutionChanged = useCallback(
+    (v: number) => {
+      processorChanged(controlNetId, { detect_resolution: v });
+    },
+    [controlNetId, processorChanged]
+  );
+
   return (
     <ProcessorWrapper>
       <FormControl isDisabled={!isEnabled}>
@@ -104,6 +111,24 @@ const MidasDepthProcessor = (props: Props) => {
           max={4096}
         />
       </FormControl>
+      <FormControl isDisabled={!isEnabled}>
+        <FormLabel>{t('controlnet.detectResolution')}</FormLabel>
+        <CompositeSlider
+          value={detect_resolution}
+          onChange={handleDetectResolutionChanged}
+          defaultValue={defaults.detect_resolution}
+          min={0}
+          max={4096}
+          marks
+        />
+        <CompositeNumberInput
+          value={detect_resolution}
+          onChange={handleDetectResolutionChanged}
+          defaultValue={defaults.detect_resolution}
+          min={0}
+          max={4096}
+        />
+      </FormControl>
     </ProcessorWrapper>
   );
 };

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

@@ -48,6 +48,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       low_threshold: 100,
       high_threshold: 200,
       image_resolution: baseModel === 'sdxl' ? 1024 : 512,
+      detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
     }),
   },
   color_map_image_processor: {
@@ -158,6 +159,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       max_faces: 1,
       min_confidence: 0.5,
       image_resolution: baseModel === 'sdxl' ? 1024 : 512,
+      detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
     }),
   },
   midas_depth_image_processor: {
@@ -174,6 +176,7 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       a_mult: 2,
       bg_th: 0.1,
       image_resolution: baseModel === 'sdxl' ? 1024 : 512,
+      detect_resolution: baseModel === 'sdxl' ? 1024 : 512,
     }),
   },
   mlsd_image_processor: {

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

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