feat(gui): add tile order as an inpaint parameter (#107)

api/params.json

@@ -66,6 +66,10 @@
     "default": "histogram",
     "keys": []
   },
+  "order": {
+    "default": "spiral",
+    "keys": []
+  },
   "outscale": {
     "default": 1,
     "min": 1,

gui/src/client.ts

@@ -73,6 +73,7 @@ export interface InpaintParams extends BaseImgParams {
   noise: string;
   strength: number;
   fillColor: string;
+  tileOrder: string;
 }
 
 /**
@@ -421,6 +422,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
       url.searchParams.append('noise', params.noise);
       url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
       url.searchParams.append('fillColor', params.fillColor);
+      url.searchParams.append('tileOrder', params.tileOrder);
 
       if (doesExist(upscale)) {
         appendUpscaleToURL(url, upscale);

gui/src/components/input/QueryList.tsx

@@ -49,6 +49,7 @@ export function QueryList<T>(props: QueryListProps<T>) {
     }
   }
 
+  // update state when previous selection was invalid: https://github.com/ssube/onnx-web/issues/120
   useEffect(() => {
     if (result.status === 'success' && doesExist(result.data) && doesExist(props.onChange)) {
       const data = filterQuery(query);

gui/src/components/tab/Inpaint.tsx

@@ -1,5 +1,5 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
-import { Box, Button, FormControlLabel, Stack } from '@mui/material';
+import { Box, Button, FormControl, FormControlLabel, InputLabel, Select, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
@@ -58,6 +58,7 @@ export function Inpaint() {
   const mask = useStore(state, (s) => s.inpaint.mask);
   const source = useStore(state, (s) => s.inpaint.source);
   const strength = useStore(state, (s) => s.inpaint.strength);
+  const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setInpaint = useStore(state, (s) => s.setInpaint);
@@ -149,6 +150,19 @@ export function Inpaint() {
             });
           }}
         />
+        <FormControl>
+          <InputLabel id={'outpaint-tiling'}>Tile Order</InputLabel>
+          <Select
+            labelId={'outpaint-tiling'}
+            label={'Tile Order'}
+            value={tileOrder}
+            onChange={(e) => {
+              setInpaint({
+                tileOrder: e.target.value,
+              });
+            }}
+          ></Select>
+        </FormControl>
         <Stack direction='row' spacing={2}>
           <FormControlLabel
             label='Fill Color'

gui/src/state.ts

@@ -258,6 +258,7 @@ export function createStateSlices(server: ServerParams) {
       noise: server.noise.default,
       source: null,
       strength: server.strength.default,
+      tileOrder: server.tileOrder.default,
     },
     setInpaint(params) {
       set((prev) => ({
@@ -277,6 +278,7 @@ export function createStateSlices(server: ServerParams) {
           noise: server.noise.default,
           source: null,
           strength: server.strength.default,
+          tileOrder: server.tileOrder.default,
         },
       });
     },