feat(gui): add tile order as an inpaint parameter (#107)
This commit is contained in:
parent
3c7a3e54b9
commit
51651abd08
|
@ -66,6 +66,10 @@
|
||||||
"default": "histogram",
|
"default": "histogram",
|
||||||
"keys": []
|
"keys": []
|
||||||
},
|
},
|
||||||
|
"order": {
|
||||||
|
"default": "spiral",
|
||||||
|
"keys": []
|
||||||
|
},
|
||||||
"outscale": {
|
"outscale": {
|
||||||
"default": 1,
|
"default": 1,
|
||||||
"min": 1,
|
"min": 1,
|
||||||
|
|
|
@ -73,6 +73,7 @@ export interface InpaintParams extends BaseImgParams {
|
||||||
noise: string;
|
noise: string;
|
||||||
strength: number;
|
strength: number;
|
||||||
fillColor: string;
|
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('noise', params.noise);
|
||||||
url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
|
url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
|
||||||
url.searchParams.append('fillColor', params.fillColor);
|
url.searchParams.append('fillColor', params.fillColor);
|
||||||
|
url.searchParams.append('tileOrder', params.tileOrder);
|
||||||
|
|
||||||
if (doesExist(upscale)) {
|
if (doesExist(upscale)) {
|
||||||
appendUpscaleToURL(url, upscale);
|
appendUpscaleToURL(url, upscale);
|
||||||
|
|
|
@ -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(() => {
|
useEffect(() => {
|
||||||
if (result.status === 'success' && doesExist(result.data) && doesExist(props.onChange)) {
|
if (result.status === 'success' && doesExist(result.data) && doesExist(props.onChange)) {
|
||||||
const data = filterQuery(query);
|
const data = filterQuery(query);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
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 * as React from 'react';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||||
|
@ -58,6 +58,7 @@ export function Inpaint() {
|
||||||
const mask = useStore(state, (s) => s.inpaint.mask);
|
const mask = useStore(state, (s) => s.inpaint.mask);
|
||||||
const source = useStore(state, (s) => s.inpaint.source);
|
const source = useStore(state, (s) => s.inpaint.source);
|
||||||
const strength = useStore(state, (s) => s.inpaint.strength);
|
const strength = useStore(state, (s) => s.inpaint.strength);
|
||||||
|
const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||||
const setInpaint = useStore(state, (s) => s.setInpaint);
|
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}>
|
<Stack direction='row' spacing={2}>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
label='Fill Color'
|
label='Fill Color'
|
||||||
|
|
|
@ -258,6 +258,7 @@ export function createStateSlices(server: ServerParams) {
|
||||||
noise: server.noise.default,
|
noise: server.noise.default,
|
||||||
source: null,
|
source: null,
|
||||||
strength: server.strength.default,
|
strength: server.strength.default,
|
||||||
|
tileOrder: server.tileOrder.default,
|
||||||
},
|
},
|
||||||
setInpaint(params) {
|
setInpaint(params) {
|
||||||
set((prev) => ({
|
set((prev) => ({
|
||||||
|
@ -277,6 +278,7 @@ export function createStateSlices(server: ServerParams) {
|
||||||
noise: server.noise.default,
|
noise: server.noise.default,
|
||||||
source: null,
|
source: null,
|
||||||
strength: server.strength.default,
|
strength: server.strength.default,
|
||||||
|
tileOrder: server.tileOrder.default,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue