feat(gui): add menus for noise source and blend mode
This commit is contained in:
parent
a8f0a7a7eb
commit
d3ad43bef4
|
@ -43,6 +43,9 @@ export type Txt2ImgResponse = Required<Txt2ImgParams>;
|
||||||
export interface InpaintParams extends BaseImgParams {
|
export interface InpaintParams extends BaseImgParams {
|
||||||
mask: Blob;
|
mask: Blob;
|
||||||
source: Blob;
|
source: Blob;
|
||||||
|
|
||||||
|
blend: string;
|
||||||
|
noise: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface OutpaintPixels {
|
export interface OutpaintPixels {
|
||||||
|
@ -75,7 +78,9 @@ export interface ApiReady {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ApiClient {
|
export interface ApiClient {
|
||||||
|
blends(): Promise<Array<string>>;
|
||||||
models(): Promise<Array<string>>;
|
models(): Promise<Array<string>>;
|
||||||
|
noises(): Promise<Array<string>>;
|
||||||
params(): Promise<ConfigParams>;
|
params(): Promise<ConfigParams>;
|
||||||
platforms(): Promise<Array<string>>;
|
platforms(): Promise<Array<string>>;
|
||||||
schedulers(): Promise<Array<string>>;
|
schedulers(): Promise<Array<string>>;
|
||||||
|
@ -156,11 +161,21 @@ export function makeClient(root: string, f = fetch): ApiClient {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
async blends(): Promise<Array<string>> {
|
||||||
|
const path = makeApiUrl(root, 'settings', 'blends');
|
||||||
|
const res = await f(path);
|
||||||
|
return await res.json() as Array<string>;
|
||||||
|
},
|
||||||
async models(): Promise<Array<string>> {
|
async models(): Promise<Array<string>> {
|
||||||
const path = makeApiUrl(root, 'settings', 'models');
|
const path = makeApiUrl(root, 'settings', 'models');
|
||||||
const res = await f(path);
|
const res = await f(path);
|
||||||
return await res.json() as Array<string>;
|
return await res.json() as Array<string>;
|
||||||
},
|
},
|
||||||
|
async noises(): Promise<Array<string>> {
|
||||||
|
const path = makeApiUrl(root, 'settings', 'noises');
|
||||||
|
const res = await f(path);
|
||||||
|
return await res.json() as Array<string>;
|
||||||
|
},
|
||||||
async params(): Promise<ConfigParams> {
|
async params(): Promise<ConfigParams> {
|
||||||
const path = makeApiUrl(root, 'settings', 'params');
|
const path = makeApiUrl(root, 'settings', 'params');
|
||||||
const res = await f(path);
|
const res = await f(path);
|
||||||
|
@ -223,6 +238,8 @@ export function makeClient(root: string, f = fetch): ApiClient {
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = makeImageURL(root, 'inpaint', params);
|
const url = makeImageURL(root, 'inpaint', params);
|
||||||
|
url.searchParams.append('noise', params.noise);
|
||||||
|
url.searchParams.append('blend', params.blend);
|
||||||
|
|
||||||
const body = new FormData();
|
const body = new FormData();
|
||||||
body.append('mask', params.mask, 'mask');
|
body.append('mask', params.mask, 'mask');
|
||||||
|
@ -242,6 +259,8 @@ export function makeClient(root: string, f = fetch): ApiClient {
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = makeImageURL(root, 'inpaint', params);
|
const url = makeImageURL(root, 'inpaint', params);
|
||||||
|
url.searchParams.append('noise', params.noise);
|
||||||
|
url.searchParams.append('blend', params.blend);
|
||||||
|
|
||||||
if (doesExist(params.left)) {
|
if (doesExist(params.left)) {
|
||||||
url.searchParams.append('left', params.left.toFixed(0));
|
url.searchParams.append('left', params.left.toFixed(0));
|
||||||
|
|
|
@ -1,15 +1,17 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useMutation, useQueryClient } from 'react-query';
|
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { ConfigParams, IMAGE_FILTER } from '../config.js';
|
import { ConfigParams, IMAGE_FILTER, STALE_TIME } from '../config.js';
|
||||||
import { ClientContext, StateContext } from '../state.js';
|
import { ClientContext, StateContext } from '../state.js';
|
||||||
|
import { BLEND_LABELS, NOISE_LABELS } from '../strings.js';
|
||||||
import { ImageControl } from './ImageControl.js';
|
import { ImageControl } from './ImageControl.js';
|
||||||
import { ImageInput } from './ImageInput.js';
|
import { ImageInput } from './ImageInput.js';
|
||||||
import { MaskCanvas } from './MaskCanvas.js';
|
import { MaskCanvas } from './MaskCanvas.js';
|
||||||
import { OutpaintControl } from './OutpaintControl.js';
|
import { OutpaintControl } from './OutpaintControl.js';
|
||||||
|
import { QueryList } from './QueryList.js';
|
||||||
|
|
||||||
const { useContext } = React;
|
const { useContext } = React;
|
||||||
|
|
||||||
|
@ -23,6 +25,12 @@ export interface InpaintProps {
|
||||||
export function Inpaint(props: InpaintProps) {
|
export function Inpaint(props: InpaintProps) {
|
||||||
const { config, model, platform } = props;
|
const { config, model, platform } = props;
|
||||||
const client = mustExist(useContext(ClientContext));
|
const client = mustExist(useContext(ClientContext));
|
||||||
|
const blends = useQuery('blends', async () => client.blends(), {
|
||||||
|
staleTime: STALE_TIME,
|
||||||
|
});
|
||||||
|
const noises = useQuery('noises', async () => client.noises(), {
|
||||||
|
staleTime: STALE_TIME,
|
||||||
|
});
|
||||||
|
|
||||||
async function uploadSource(): Promise<void> {
|
async function uploadSource(): Promise<void> {
|
||||||
const outpaint = state.getState().outpaint; // TODO: seems shady
|
const outpaint = state.getState().outpaint; // TODO: seems shady
|
||||||
|
@ -104,6 +112,30 @@ export function Inpaint(props: InpaintProps) {
|
||||||
setInpaint(newParams);
|
setInpaint(newParams);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<QueryList
|
||||||
|
id='blends'
|
||||||
|
labels={BLEND_LABELS}
|
||||||
|
name='Blend Mode'
|
||||||
|
result={blends}
|
||||||
|
value={params.blend}
|
||||||
|
onChange={(blend) => {
|
||||||
|
setInpaint({
|
||||||
|
blend,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<QueryList
|
||||||
|
id='noises'
|
||||||
|
labels={NOISE_LABELS}
|
||||||
|
name='Noise Source'
|
||||||
|
result={noises}
|
||||||
|
value={params.noise}
|
||||||
|
onChange={(noise) => {
|
||||||
|
setInpaint({
|
||||||
|
noise,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<OutpaintControl config={config} />
|
<OutpaintControl config={config} />
|
||||||
<Button onClick={() => upload.mutate()}>Generate</Button>
|
<Button onClick={() => upload.mutate()}>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -128,6 +128,8 @@ export function createStateSlices(base: ConfigParams) {
|
||||||
...defaults,
|
...defaults,
|
||||||
mask: null,
|
mask: null,
|
||||||
source: null,
|
source: null,
|
||||||
|
noise: '',
|
||||||
|
blend: '',
|
||||||
},
|
},
|
||||||
setInpaint(params) {
|
setInpaint(params) {
|
||||||
set((prev) => ({
|
set((prev) => ({
|
||||||
|
@ -143,6 +145,8 @@ export function createStateSlices(base: ConfigParams) {
|
||||||
...defaults,
|
...defaults,
|
||||||
mask: null,
|
mask: null,
|
||||||
source: null,
|
source: null,
|
||||||
|
noise: '',
|
||||||
|
blend: '',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -26,3 +26,16 @@ export const SCHEDULER_LABELS: Record<string, string> = {
|
||||||
'lms-discrete': 'LMS',
|
'lms-discrete': 'LMS',
|
||||||
'pndm': 'PNDM',
|
'pndm': 'PNDM',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const NOISE_LABELS: Record<string, string> = {
|
||||||
|
fill: 'Fill Edges',
|
||||||
|
guassian: 'Gaussian Blur',
|
||||||
|
histogram: 'Histogram Noise',
|
||||||
|
normal: 'Gaussian Noise',
|
||||||
|
uniform: 'Uniform Noise',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const BLEND_LABELS: Record<string, string> = {
|
||||||
|
'mask-source': 'Noise -> Source',
|
||||||
|
'source-mask': 'Source -> Noise',
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue