feat(gui): add selector for mask filter

gui/src/api/client.ts

@@ -44,7 +44,7 @@ export interface InpaintParams extends BaseImgParams {
   mask: Blob;
   source: Blob;
 
-  blend: string;
+  filter: string;
   noise: string;
 }
 
@@ -78,7 +78,7 @@ export interface ApiReady {
 }
 
 export interface ApiClient {
-  blends(): Promise<Array<string>>;
+  masks(): Promise<Array<string>>;
   models(): Promise<Array<string>>;
   noises(): Promise<Array<string>>;
   params(): Promise<ConfigParams>;
@@ -161,8 +161,8 @@ export function makeClient(root: string, f = fetch): ApiClient {
   }
 
   return {
-    async blends(): Promise<Array<string>> {
+    async masks(): Promise<Array<string>> {
-      const path = makeApiUrl(root, 'settings', 'blends');
+      const path = makeApiUrl(root, 'settings', 'masks');
       const res = await f(path);
       return await res.json() as Array<string>;
     },
@@ -238,8 +238,8 @@ export function makeClient(root: string, f = fetch): ApiClient {
       }
 
       const url = makeImageURL(root, 'inpaint', params);
+      url.searchParams.append('filter', params.filter);
       url.searchParams.append('noise', params.noise);
-      url.searchParams.append('blend', params.blend);
 
       const body = new FormData();
       body.append('mask', params.mask, 'mask');
@@ -259,8 +259,8 @@ export function makeClient(root: string, f = fetch): ApiClient {
       }
 
       const url = makeImageURL(root, 'inpaint', params);
+      url.searchParams.append('filter', params.filter);
       url.searchParams.append('noise', params.noise);
-      url.searchParams.append('blend', params.blend);
 
       if (doesExist(params.left)) {
         url.searchParams.append('left', params.left.toFixed(0));

gui/src/components/Inpaint.tsx

@@ -6,7 +6,7 @@ import { useStore } from 'zustand';
 
 import { ConfigParams, IMAGE_FILTER, STALE_TIME } from '../config.js';
 import { ClientContext, StateContext } from '../state.js';
-import { BLEND_LABELS, NOISE_LABELS } from '../strings.js';
+import { MASK_LABELS, NOISE_LABELS } from '../strings.js';
 import { ImageControl } from './ImageControl.js';
 import { ImageInput } from './ImageInput.js';
 import { MaskCanvas } from './MaskCanvas.js';
@@ -25,7 +25,7 @@ export interface InpaintProps {
 export function Inpaint(props: InpaintProps) {
   const { config, model, platform } = props;
   const client = mustExist(useContext(ClientContext));
-  const blends = useQuery('blends', async () => client.blends(), {
+  const masks = useQuery('masks', async () => client.masks(), {
     staleTime: STALE_TIME,
   });
   const noises = useQuery('noises', async () => client.noises(), {
@@ -114,14 +114,14 @@ export function Inpaint(props: InpaintProps) {
       />
       <Stack direction='row' spacing={2}>
         <QueryList
-          id='blends'
+          id='masks'
-          labels={BLEND_LABELS}
+          labels={MASK_LABELS}
-          name='Blend Mode'
+          name='Mask Filter'
-          result={blends}
+          result={masks}
-          value={params.blend}
+          value={params.filter}
-          onChange={(blend) => {
+          onChange={(filter) => {
             setInpaint({
-              blend,
+              filter,
             });
           }}
         />

gui/src/state.ts

@@ -126,10 +126,10 @@ export function createStateSlices(base: ConfigParams) {
   const createInpaintSlice: StateCreator<OnnxState, [], [], InpaintSlice> = (set) => ({
     inpaint: {
       ...defaults,
+      filter: '',
       mask: null,
-      source: null,
       noise: '',
-      blend: '',
+      source: null,
     },
     setInpaint(params) {
       set((prev) => ({
@@ -143,10 +143,10 @@ export function createStateSlices(base: ConfigParams) {
       set({
         inpaint: {
           ...defaults,
+          filter: '',
           mask: null,
           source: null,
           noise: '',
-          blend: '',
         },
       });
     },

gui/src/strings.ts

@@ -35,7 +35,7 @@ export const NOISE_LABELS: Record<string, string> = {
   uniform: 'Uniform Noise',
 };
 
-export const BLEND_LABELS: Record<string, string> = {
+export const MASK_LABELS: Record<string, string> = {
-  'mask-source': 'Noise -> Source',
+  gaussian: 'Gaussian Blur',
-  'source-mask': 'Source -> Noise',
+  none: 'None',
 };