add: Noise filter on Canvas

dunkeroni · psychedelicious · commit b7389da89b8e · 2025-01-16T09:27:36.000+11:00
diff --git a/invokeai/app/invocations/image.py b/invokeai/app/invocations/image.py
@@ -1093,11 +1093,11 @@ def invoke(self, context: InvocationContext) -> ImageOutput:
 
 
 @invocation(
-    "image_noise",
+    "img_noise",
     title="Add Image Noise",
     tags=["image", "noise"],
     category="image",
-    version="1.0.2",
+    version="1.0.0",
 )
 class ImageNoiseInvocation(BaseInvocation, WithMetadata, WithBoard):
     """Add noise to an image"""
@@ -1114,7 +1114,7 @@ class ImageNoiseInvocation(BaseInvocation, WithMetadata, WithBoard):
         description="The type of noise to add",
     )
     amount: float = InputField(default=0.1, ge=0, le=1, description="The amount of noise to add")
-    color: bool = InputField(default=False, description="Whether to add color noise")
+    noise_color: bool = InputField(default=True, description="Whether to add colored noise")
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
         image = context.images.get_pil(self.image.image_name, mode="RGBA")
@@ -1126,13 +1126,13 @@ def invoke(self, context: InvocationContext) -> ImageOutput:
         rs = numpy.random.RandomState(numpy.random.MT19937(numpy.random.SeedSequence(self.seed)))
 
         if self.noise_type == "gaussian":
-            if self.color:
+            if self.noise_color:
                 noise = rs.normal(0, 1, (image.height, image.width, 3)) * 255
             else:
                 noise = rs.normal(0, 1, (image.height, image.width)) * 255
                 noise = numpy.stack([noise] * 3, axis=-1)
         elif self.noise_type == "salt_and_pepper":
-            if self.color:
+            if self.noise_color:
                 noise = rs.choice([0, 255], (image.height, image.width, 3), p=[1 - self.amount, self.amount])
             else:
                 noise = rs.choice([0, 255], (image.height, image.width), p=[1 - self.amount, self.amount])
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -1940,6 +1940,15 @@
                 "blur_radius": "Radius",
                 "gaussian_type": "Gaussian",
                 "box_type": "Box"
+            },
+            "img_noise": {
+                "label": "Noise Image",
+                "description": "Adds noise to the selected layer.",
+                "noise_type": "Noise Type",
+                "noise_amount": "Amount",
+                "gaussian_type": "Gaussian",
+                "salt_and_pepper_type": "Salt and Pepper",
+                "noise_color": "Colored Noise"
             }
         },
         "transform": {
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterBlur.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterBlur.tsx
@@ -53,7 +53,7 @@ export const FilterBlur = memo(({ onChange, config }: Props) => {
           onChange={handleRadiusChange}
           min={1}
           max={64}
-          step={1}
+          step={0.1}
           marks
         />
         <CompositeNumberInput
@@ -62,7 +62,7 @@ export const FilterBlur = memo(({ onChange, config }: Props) => {
           onChange={handleRadiusChange}
           min={1}
           max={4096}
-          step={1}
+          step={0.1}
         />
       </FormControl>
     </>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterNoise.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterNoise.tsx
@@ -0,0 +1,84 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import type { NoiseFilterConfig, NoiseTypes } from 'features/controlLayers/store/filters';
+import { IMAGE_FILTERS, isNoiseTypes } from 'features/controlLayers/store/filters';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { FilterComponentProps } from './types';
+
+type Props = FilterComponentProps<NoiseFilterConfig>;
+const DEFAULTS = IMAGE_FILTERS.img_noise.buildDefaults();
+
+export const FilterNoise = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+  const handleNoiseTypeChange = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isNoiseTypes(v?.value)) {
+        return;
+      }
+      onChange({ ...config, noise_type: v.value });
+    },
+    [config, onChange]
+  );
+
+  const handleAmountChange = useCallback(
+    (v: number) => {
+      onChange({ ...config, amount: v });
+    },
+    [config, onChange]
+  );
+
+  const handleColorChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, noise_color: e.target.checked });
+    },
+    [config, onChange]
+  );
+
+  const options: { label: string; value: NoiseTypes }[] = useMemo(
+    () => [
+      { label: t('controlLayers.filter.img_noise.gaussian_type'), value: 'gaussian' },
+      { label: t('controlLayers.filter.img_noise.salt_and_pepper_type'), value: 'salt_and_pepper' },
+    ],
+    [t]
+  );
+
+  const value = useMemo(() => options.filter((o) => o.value === config.noise_type)[0], [options, config.noise_type]);
+
+  return (
+    <>
+      <FormControl>
+        <FormLabel m={0}>{t('controlLayers.filter.img_noise.noise_type')}</FormLabel>
+        <Combobox value={value} options={options} onChange={handleNoiseTypeChange} isSearchable={false} />
+      </FormControl>
+      <FormControl>
+        <FormLabel m={0}>{t('controlLayers.filter.img_noise.noise_amount')}</FormLabel>
+        <CompositeSlider
+          value={config.amount}
+          defaultValue={DEFAULTS.amount}
+          onChange={handleAmountChange}
+          min={0}
+          max={1}
+          step={0.01}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.amount}
+          defaultValue={DEFAULTS.amount}
+          onChange={handleAmountChange}
+          min={0}
+          max={1}
+          step={0.01}
+        />
+      </FormControl>
+      <FormControl w="max-content">
+        <FormLabel m={0}>{t('controlLayers.filter.img_noise.noise_color')}</FormLabel>
+        <Switch defaultChecked={DEFAULTS.noise_color} isChecked={config.noise_color} onChange={handleColorChange} />
+      </FormControl>
+    </>
+  );
+});
+
+FilterNoise.displayName = 'Filternoise';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSettings.tsx
@@ -9,6 +9,7 @@ import { FilterHEDEdgeDetection } from 'features/controlLayers/components/Filter
 import { FilterLineartEdgeDetection } from 'features/controlLayers/components/Filters/FilterLineartEdgeDetection';
 import { FilterMediaPipeFaceDetection } from 'features/controlLayers/components/Filters/FilterMediaPipeFaceDetection';
 import { FilterMLSDDetection } from 'features/controlLayers/components/Filters/FilterMLSDDetection';
+import { FilterNoise } from 'features/controlLayers/components/Filters/FilterNoise';
 import { FilterPiDiNetEdgeDetection } from 'features/controlLayers/components/Filters/FilterPiDiNetEdgeDetection';
 import { FilterSpandrel } from 'features/controlLayers/components/Filters/FilterSpandrel';
 import type { FilterConfig } from 'features/controlLayers/store/filters';
@@ -64,6 +65,10 @@ export const FilterSettings = memo(({ filterConfig, onChange }: Props) => {
     return <FilterPiDiNetEdgeDetection config={filterConfig} onChange={onChange} />;
   }
 
+  if (filterConfig.type === 'img_noise') {
+    return <FilterNoise config={filterConfig} onChange={onChange} />;
+  }
+
   if (filterConfig.type === 'spandrel_filter') {
     return <FilterSpandrel config={filterConfig} onChange={onChange} />;
   }
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/filters.ts b/invokeai/frontend/web/src/features/controlLayers/store/filters.ts
@@ -105,6 +105,17 @@ const zBlurFilterConfig = z.object({
 });
 export type BlurFilterConfig = z.infer<typeof zBlurFilterConfig>;
 
+const zNoiseTypes = z.enum(['gaussian', 'salt_and_pepper']);
+export type NoiseTypes = z.infer<typeof zNoiseTypes>;
+export const isNoiseTypes = (v: unknown): v is NoiseTypes => zNoiseTypes.safeParse(v).success;
+const zNoiseFilterConfig = z.object({
+  type: z.literal('img_noise'),
+  noise_type: zNoiseTypes,
+  amount: z.number().gte(0).lte(1),
+  noise_color: z.boolean(),
+});
+export type NoiseFilterConfig = z.infer<typeof zNoiseFilterConfig>;
+
 const zFilterConfig = z.discriminatedUnion('type', [
   zCannyEdgeDetectionFilterConfig,
   zColorMapFilterConfig,
@@ -120,6 +131,7 @@ const zFilterConfig = z.discriminatedUnion('type', [
   zDWOpenposeDetectionFilterConfig,
   zSpandrelFilterConfig,
   zBlurFilterConfig,
+  zNoiseFilterConfig,
 ]);
 export type FilterConfig = z.infer<typeof zFilterConfig>;
 
@@ -138,6 +150,7 @@ const zFilterType = z.enum([
   'dw_openpose_detection',
   'spandrel_filter',
   'img_blur',
+  'img_noise',
 ]);
 export type FilterType = z.infer<typeof zFilterType>;
 export const isFilterType = (v: unknown): v is FilterType => zFilterType.safeParse(v).success;
@@ -463,6 +476,38 @@ export const IMAGE_FILTERS: { [key in FilterConfig['type']]: ImageFilterData<key
       };
     },
   },
+  img_noise: {
+    type: 'img_noise',
+    buildDefaults: () => ({
+      type: 'img_noise',
+      noise_type: 'gaussian',
+      amount: 0.3,
+      noise_color: true,
+    }),
+    buildGraph: ({ image_name }, { noise_type, amount, noise_color }) => {
+      const graph = new Graph(getPrefixedId('img_noise'));
+      const node = graph.addNode({
+        id: getPrefixedId('img_noise'),
+        type: 'img_noise',
+        image: { image_name },
+        noise_type: noise_type,
+        amount: amount,
+        noise_color: noise_color,
+      });
+      const rand = graph.addNode({
+        id: getPrefixedId('rand_int'),
+        use_cache: false,
+        type: 'rand_int',
+        low: 0,
+        high: 2147483647,
+      });
+      graph.addEdge(rand, 'value', node, 'seed');
+      return {
+        graph,
+        outputNodeId: node.id,
+      };
+    },
+  },
 } as const;
 
 /**
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.test.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.test.ts
@@ -13,6 +13,7 @@ import type {
   LineartEdgeDetectionFilterConfig,
   MediaPipeFaceDetectionFilterConfig,
   MLSDDetectionFilterConfig,
+  NoiseFilterConfig,
   NormalMapFilterConfig,
   PiDiNetEdgeDetectionFilterConfig,
 } from 'features/controlLayers/store/filters';
@@ -73,6 +74,7 @@ describe('Control Adapter Types', () => {
     type _MLSDDetectionFilterConfig = Required<
       Pick<Invocation<'mlsd_detection'>, 'type' | 'score_threshold' | 'distance_threshold'>
     >;
+    type _NoiseFilterConfig = Required<Pick<Invocation<'img_noise'>, 'type' | 'noise_type' | 'amount' | 'noise_color'>>;
     type _NormalMapFilterConfig = Required<Pick<Invocation<'normal_map'>, 'type'>>;
     type _DWOpenposeDetectionFilterConfig = Required<
       Pick<Invocation<'dw_openpose_detection'>, 'type' | 'draw_body' | 'draw_face' | 'draw_hands'>
@@ -93,6 +95,7 @@ describe('Control Adapter Types', () => {
     assert<Equals<_LineartEdgeDetectionFilterConfig, LineartEdgeDetectionFilterConfig>>();
     assert<Equals<_MediaPipeFaceDetectionFilterConfig, MediaPipeFaceDetectionFilterConfig>>();
     assert<Equals<_MLSDDetectionFilterConfig, MLSDDetectionFilterConfig>>();
+    assert<Equals<_NoiseFilterConfig, NoiseFilterConfig>>();
     assert<Equals<_NormalMapFilterConfig, NormalMapFilterConfig>>();
     assert<Equals<_DWOpenposeDetectionFilterConfig, DWOpenposeDetectionFilterConfig>>();
     assert<Equals<_PiDiNetEdgeDetectionFilterConfig, PiDiNetEdgeDetectionFilterConfig>>();
diff --git a/invokeai/frontend/web/src/services/api/schema.ts b/invokeai/frontend/web/src/services/api/schema.ts
