feat: Add Color PreProcessor to Linear UI

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

@@ -136,6 +136,8 @@
         "bgth": "bg_th",
         "canny": "Canny",
         "cannyDescription": "Canny edge detection",
+        "colorMap": "Color",
+        "colorMapDescription": "Generates a color map from the image",
         "coarse": "Coarse",
         "contentShuffle": "Content Shuffle",
         "contentShuffleDescription": "Shuffles the content in an image",
@@ -159,6 +161,7 @@
         "hideAdvanced": "Hide Advanced",
         "highThreshold": "High Threshold",
         "imageResolution": "Image Resolution",
+        "colorMapTileSize": "Tile Size",
         "importImageFromCanvas": "Import Image From Canvas",
         "importMaskFromCanvas": "Import Mask From Canvas",
         "incompatibleBaseModel": "Incompatible base model:",

invokeai/frontend/web/src/features/controlNet/components/ControlNetProcessorComponent.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { ControlNetConfig } from '../store/controlNetSlice';
 import CannyProcessor from './processors/CannyProcessor';
+import ColorMapProcessor from './processors/ColorMapProcessor';
 import ContentShuffleProcessor from './processors/ContentShuffleProcessor';
 import HedProcessor from './processors/HedProcessor';
 import LineartAnimeProcessor from './processors/LineartAnimeProcessor';
@@ -30,6 +31,16 @@ const ControlNetProcessorComponent = (props: ControlNetProcessorProps) => {
     );
   }
 
+  if (processorNode.type === 'color_map_image_processor') {
+    return (
+      <ColorMapProcessor
+        controlNetId={controlNetId}
+        processorNode={processorNode}
+        isEnabled={isEnabled}
+      />
+    );
+  }
+
   if (processorNode.type === 'hed_image_processor') {
     return (
       <HedProcessor

invokeai/frontend/web/src/features/controlNet/components/processors/ColorMapProcessor.tsx

@@ -0,0 +1,59 @@
+import IAISlider from 'common/components/IAISlider';
+import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
+import { RequiredColorMapImageProcessorInvocation } from 'features/controlNet/store/types';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
+import ProcessorWrapper from './common/ProcessorWrapper';
+
+const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor
+  .default as RequiredColorMapImageProcessorInvocation;
+
+type ColorMapProcessorProps = {
+  controlNetId: string;
+  processorNode: RequiredColorMapImageProcessorInvocation;
+  isEnabled: boolean;
+};
+
+const ColorMapProcessor = (props: ColorMapProcessorProps) => {
+  const { controlNetId, processorNode, isEnabled } = props;
+  const { color_map_tile_size } = processorNode;
+  const processorChanged = useProcessorNodeChanged();
+  const { t } = useTranslation();
+
+  const handleColorMapTileSizeChanged = useCallback(
+    (v: number) => {
+      processorChanged(controlNetId, { color_map_tile_size: v });
+    },
+    [controlNetId, processorChanged]
+  );
+
+  const handleColorMapTileSizeReset = useCallback(() => {
+    processorChanged(controlNetId, {
+      color_map_tile_size: DEFAULTS.color_map_tile_size,
+    });
+  }, [controlNetId, processorChanged]);
+
+  return (
+    <ProcessorWrapper>
+      <IAISlider
+        isDisabled={!isEnabled}
+        label={t('controlnet.colorMapTileSize')}
+        value={color_map_tile_size}
+        onChange={handleColorMapTileSizeChanged}
+        handleReset={handleColorMapTileSizeReset}
+        withReset
+        min={1}
+        max={256}
+        step={1}
+        withInput
+        withSliderMarks
+        sliderNumberInputProps={{
+          max: 4096,
+        }}
+      />
+    </ProcessorWrapper>
+  );
+};
+
+export default memo(ColorMapProcessor);

invokeai/frontend/web/src/features/controlNet/components/processors/common/ProcessorWrapper.tsx

@@ -4,5 +4,9 @@ import { PropsWithChildren } from 'react';
 type Props = PropsWithChildren;
 
 export default function ProcessorWrapper(props: Props) {
-  return <Flex sx={{ flexDirection: 'column', gap: 2 }}>{props.children}</Flex>;
+  return (
+    <Flex sx={{ flexDirection: 'column', gap: 2, pb: 2 }}>
+      {props.children}
+    </Flex>
+  );
 }

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

@@ -1,8 +1,8 @@
+import i18n from 'i18next';
 import {
   ControlNetProcessorType,
   RequiredControlNetProcessorNode,
 } from './types';
-import i18n from 'i18next';
 
 type ControlNetProcessorsDict = Record<
   ControlNetProcessorType,
@@ -50,6 +50,20 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       high_threshold: 200,
     },
   },
+  color_map_image_processor: {
+    type: 'color_map_image_processor',
+    get label() {
+      return i18n.t('controlnet.colorMap');
+    },
+    get description() {
+      return i18n.t('controlnet.colorMapDescription');
+    },
+    default: {
+      id: 'color_map_image_processor',
+      type: 'color_map_image_processor',
+      color_map_tile_size: 64,
+    },
+  },
   content_shuffle_image_processor: {
     type: 'content_shuffle_image_processor',
     get label() {

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

@@ -1,6 +1,7 @@
 import { isObject } from 'lodash-es';
 import {
   CannyImageProcessorInvocation,
+  ColorMapImageProcessorInvocation,
   ContentShuffleImageProcessorInvocation,
   HedImageProcessorInvocation,
   LineartAnimeImageProcessorInvocation,
@@ -20,6 +21,7 @@ import { O } from 'ts-toolbelt';
  */
 export type ControlNetProcessorNode =
   | CannyImageProcessorInvocation
+  | ColorMapImageProcessorInvocation
   | ContentShuffleImageProcessorInvocation
   | HedImageProcessorInvocation
   | LineartAnimeImageProcessorInvocation
@@ -47,6 +49,14 @@ export type RequiredCannyImageProcessorInvocation = O.Required<
   'type' | 'low_threshold' | 'high_threshold'
 >;
 
+/**
+ * The Color Map processor node, with parameters flagged as required
+ */
+export type RequiredColorMapImageProcessorInvocation = O.Required<
+  ColorMapImageProcessorInvocation,
+  'type' | 'color_map_tile_size'
+>;
+
 /**
  * The ContentShuffle processor node, with parameters flagged as required
  */
@@ -140,6 +150,7 @@ export type RequiredZoeDepthImageProcessorInvocation = O.Required<
  */
 export type RequiredControlNetProcessorNode = O.Required<
   | RequiredCannyImageProcessorInvocation
+  | RequiredColorMapImageProcessorInvocation
   | RequiredContentShuffleImageProcessorInvocation
   | RequiredHedImageProcessorInvocation
   | RequiredLineartAnimeImageProcessorInvocation
@@ -166,6 +177,22 @@ export const isCannyImageProcessorInvocation = (
   return false;
 };
 
+/**
+ * Type guard for ColorMapImageProcessorInvocation
+ */
+export const isColorMapImageProcessorInvocation = (
+  obj: unknown
+): obj is ColorMapImageProcessorInvocation => {
+  if (
+    isObject(obj) &&
+    'type' in obj &&
+    obj.type === 'color_map_image_processor'
+  ) {
+    return true;
+  }
+  return false;
+};
+
 /**
  * Type guard for ContentShuffleImageProcessorInvocation
  */

invokeai/frontend/web/src/services/api/types.ts

@@ -152,6 +152,8 @@ export type SaveImageInvocation = s['SaveImageInvocation'];
 export type ControlNetInvocation = s['ControlNetInvocation'];
 export type IPAdapterInvocation = s['IPAdapterInvocation'];
 export type CannyImageProcessorInvocation = s['CannyImageProcessorInvocation'];
+export type ColorMapImageProcessorInvocation =
+  s['ColorMapImageProcessorInvocation'];
 export type ContentShuffleImageProcessorInvocation =
   s['ContentShuffleImageProcessorInvocation'];
 export type HedImageProcessorInvocation = s['HedImageProcessorInvocation'];