add: Blur filter option on canvas

Author: dunkeroni

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

@@ -1932,6 +1932,14 @@
                 "description": "Generates an edge map from the selected layer using the PiDiNet edge detection model.",
                 "scribble": "Scribble",
                 "quantize_edges": "Quantize Edges"
+            },
+            "img_blur": {
+                "label": "Blur Image",
+                "description": "Blurs the selected layer.",
+                "blur_type": "Blur Type",
+                "blur_radius": "Radius",
+                "gaussian_type": "Gaussian",
+                "box_type": "Box"
             }
         },
         "transform": {

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterBlur.tsx

@@ -0,0 +1,72 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import type { BlurFilterConfig, BlurTypes } from 'features/controlLayers/store/filters';
+import { IMAGE_FILTERS, isBlurTypes } from 'features/controlLayers/store/filters';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { FilterComponentProps } from './types';
+
+type Props = FilterComponentProps<BlurFilterConfig>;
+const DEFAULTS = IMAGE_FILTERS.img_blur.buildDefaults();
+
+export const FilterBlur = memo(({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+  const handleBlurTypeChange = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isBlurTypes(v?.value)) {
+        return;
+      }
+      onChange({ ...config, blur_type: v.value });
+    },
+    [config, onChange]
+  );
+
+  const handleRadiusChange = useCallback(
+    (v: number) => {
+      onChange({ ...config, radius: v });
+    },
+    [config, onChange]
+  );
+
+  const options: { label: string; value: BlurTypes }[] = useMemo(
+    () => [
+      { label: t('controlLayers.filter.img_blur.gaussian_type'), value: 'gaussian' },
+      { label: t('controlLayers.filter.img_blur.box_type'), value: 'box' },
+    ],
+    [t]
+  );
+
+  const value = useMemo(() => options.filter((o) => o.value === config.blur_type)[0], [options, config.blur_type]);
+
+  return (
+    <>
+      <FormControl>
+        <FormLabel m={0}>{t('controlLayers.filter.img_blur.blur_type')}</FormLabel>
+        <Combobox value={value} options={options} onChange={handleBlurTypeChange} isSearchable={false} />
+      </FormControl>
+      <FormControl>
+        <FormLabel m={0}>{t('controlLayers.filter.img_blur.blur_radius')}</FormLabel>
+        <CompositeSlider
+          value={config.radius}
+          defaultValue={DEFAULTS.radius}
+          onChange={handleRadiusChange}
+          min={1}
+          max={64}
+          step={1}
+          marks
+        />
+        <CompositeNumberInput
+          value={config.radius}
+          defaultValue={DEFAULTS.radius}
+          onChange={handleRadiusChange}
+          min={1}
+          max={4096}
+          step={1}
+        />
+      </FormControl>
+    </>
+  );
+});
+
+FilterBlur.displayName = 'FilterBlur';

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSettings.tsx

@@ -1,4 +1,5 @@
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { FilterBlur } from 'features/controlLayers/components/Filters/FilterBlur';
 import { FilterCannyEdgeDetection } from 'features/controlLayers/components/Filters/FilterCannyEdgeDetection';
 import { FilterColorMap } from 'features/controlLayers/components/Filters/FilterColorMap';
 import { FilterContentShuffle } from 'features/controlLayers/components/Filters/FilterContentShuffle';
@@ -19,6 +20,10 @@ type Props = { filterConfig: FilterConfig; onChange: (filterConfig: FilterConfig
 export const FilterSettings = memo(({ filterConfig, onChange }: Props) => {
   const { t } = useTranslation();
 
+  if (filterConfig.type === 'img_blur') {
+    return <FilterBlur config={filterConfig} onChange={onChange} />;
+  }
+
   if (filterConfig.type === 'canny_edge_detection') {
     return <FilterCannyEdgeDetection config={filterConfig} onChange={onChange} />;
   }

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

@@ -95,6 +95,16 @@ const zSpandrelFilterConfig = z.object({
 });
 export type SpandrelFilterConfig = z.infer<typeof zSpandrelFilterConfig>;
 
+const zBlurTypes = z.enum(['gaussian', 'box']);
+export type BlurTypes = z.infer<typeof zBlurTypes>;
+export const isBlurTypes = (v: unknown): v is BlurTypes => zBlurTypes.safeParse(v).success;
+const zBlurFilterConfig = z.object({
+  type: z.literal('img_blur'),
+  blur_type: zBlurTypes,
+  radius: z.number().gte(0),
+});
+export type BlurFilterConfig = z.infer<typeof zBlurFilterConfig>;
+
 const zFilterConfig = z.discriminatedUnion('type', [
   zCannyEdgeDetectionFilterConfig,
   zColorMapFilterConfig,
@@ -109,6 +119,7 @@ const zFilterConfig = z.discriminatedUnion('type', [
   zPiDiNetEdgeDetectionFilterConfig,
   zDWOpenposeDetectionFilterConfig,
   zSpandrelFilterConfig,
+  zBlurFilterConfig,
 ]);
 export type FilterConfig = z.infer<typeof zFilterConfig>;
 
@@ -126,6 +137,7 @@ const zFilterType = z.enum([
   'pidi_edge_detection',
   'dw_openpose_detection',
   'spandrel_filter',
+  'img_blur',
 ]);
 export type FilterType = z.infer<typeof zFilterType>;
 export const isFilterType = (v: unknown): v is FilterType => zFilterType.safeParse(v).success;
@@ -429,6 +441,28 @@ export const IMAGE_FILTERS: { [key in FilterConfig['type']]: ImageFilterData<key
       return true;
     },
   },
+  img_blur: {
+    type: 'img_blur',
+    buildDefaults: () => ({
+      type: 'img_blur',
+      blur_type: 'gaussian',
+      radius: 8,
+    }),
+    buildGraph: ({ image_name }, { blur_type, radius }) => {
+      const graph = new Graph(getPrefixedId('img_blur'));
+      const node = graph.addNode({
+        id: getPrefixedId('img_blur'),
+        type: 'img_blur',
+        image: { image_name },
+        blur_type: blur_type,
+        radius: radius,
+      });
+      return {
+        graph,
+        outputNodeId: node.id,
+      };
+    },
+  },
 } as const;
 
 /**

invokeai/frontend/web/src/features/controlLayers/store/types.test.ts

@@ -1,4 +1,5 @@
 import type {
+  BlurFilterConfig,
   CannyEdgeDetectionFilterConfig,
   ColorMapFilterConfig,
   ContentShuffleFilterConfig,
@@ -54,6 +55,7 @@ describe('Control Adapter Types', () => {
   });
   test('Processor Configs', () => {
     // Types derived from OpenAPI
+    type _BlurFilterConfig = Required<Pick<Invocation<'img_blur'>, 'type' | 'radius' | 'blur_type'>>;
     type _CannyEdgeDetectionFilterConfig = Required<
       Pick<Invocation<'canny_edge_detection'>, 'type' | 'low_threshold' | 'high_threshold'>
     >;
@@ -81,6 +83,7 @@ describe('Control Adapter Types', () => {
 
     // The processor configs are manually modeled zod schemas. This test ensures that the inferred types are correct.
     // The types prefixed with `_` are types generated from OpenAPI, while the types without the prefix are manually modeled.
+    assert<Equals<_BlurFilterConfig, BlurFilterConfig>>();
     assert<Equals<_CannyEdgeDetectionFilterConfig, CannyEdgeDetectionFilterConfig>>();
     assert<Equals<_ColorMapFilterConfig, ColorMapFilterConfig>>();
     assert<Equals<_ContentShuffleFilterConfig, ContentShuffleFilterConfig>>();