From 51651abd085e4b89df1f48e93d858270a1c743ea Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sat, 11 Feb 2023 17:41:58 -0600
Subject: [PATCH] feat(gui): add tile order as an inpaint parameter (#107)

---
 api/params.json                        |  4 ++++
 gui/src/client.ts                      |  2 ++
 gui/src/components/input/QueryList.tsx |  1 +
 gui/src/components/tab/Inpaint.tsx     | 16 +++++++++++++++-
 gui/src/state.ts                       |  2 ++
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/api/params.json b/api/params.json
index f44dabf9..6f194a0e 100644
--- a/api/params.json
+++ b/api/params.json
@@ -66,6 +66,10 @@
     "default": "histogram",
     "keys": []
   },
+  "order": {
+    "default": "spiral",
+    "keys": []
+  },
   "outscale": {
     "default": 1,
     "min": 1,
diff --git a/gui/src/client.ts b/gui/src/client.ts
index 18814d8c..b8f9bb56 100644
--- a/gui/src/client.ts
+++ b/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);
diff --git a/gui/src/components/input/QueryList.tsx b/gui/src/components/input/QueryList.tsx
index 11e05c04..c66fab43 100644
--- a/gui/src/components/input/QueryList.tsx
+++ b/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);
diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx
index b9647f1b..bfd9983f 100644
--- a/gui/src/components/tab/Inpaint.tsx
+++ b/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'
diff --git a/gui/src/state.ts b/gui/src/state.ts
index 71bb9186..0dd9a6a4 100644
--- a/gui/src/state.ts
+++ b/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,
         },
       });
     },