apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

feat(gui): add inpaint call to API client

This commit is contained in:
Sean Sube 2023-01-08 18:11:07 -06:00
parent 11b9295efc
commit 15ab44f2ad
2 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
gui/src/api/client.ts
View File

@ -1,4 +1,4 @@
import { doesExist } from '@apextoaster/js-utils'; import { doesExist, NotImplementedError } from '@apextoaster/js-utils';
export interface BaseImgParams { export interface BaseImgParams {
/** /**
@ -38,6 +38,17 @@ export interface Txt2ImgParams extends BaseImgParams {
export type Txt2ImgResponse = Required<Txt2ImgParams>; export type Txt2ImgResponse = Required<Txt2ImgParams>;
export interface InpaintParams extends Img2ImgParams {
mask: Blob;
}
export interface OutpaintParams extends Img2ImgParams {
up: boolean;
down: boolean;
left: boolean;
right: boolean;
}
export interface ApiResponse { export interface ApiResponse {
output: string; output: string;
params: Txt2ImgResponse; params: Txt2ImgResponse;
@ -48,8 +59,11 @@ export interface ApiClient {
platforms(): Promise<Array<string>>; platforms(): Promise<Array<string>>;
schedulers(): Promise<Array<string>>; schedulers(): Promise<Array<string>>;
img2img(params: Img2ImgParams): Promise<ApiResponse>; // TODO: slightly different response type img2img(params: Img2ImgParams): Promise<ApiResponse>;
txt2img(params: Txt2ImgParams): Promise<ApiResponse>; txt2img(params: Txt2ImgParams): Promise<ApiResponse>;
inpaint(params: InpaintParams): Promise<ApiResponse>;
outpaint(params: OutpaintParams): Promise<ApiResponse>;
} }
export const STATUS_SUCCESS = 200; export const STATUS_SUCCESS = 200;
@ -165,5 +179,29 @@ export function makeClient(root: string, f = fetch): ApiClient {
// eslint-disable-next-line no-return-await // eslint-disable-next-line no-return-await
return await pending; return await pending;
}, },
async inpaint(params: InpaintParams) {
if (doesExist(pending)) {
return pending;
}
const url = makeImageURL(root, 'inpaint', params);
const body = new FormData();
body.append('mask', params.mask, 'mask');
body.append('source', params.source, 'source');
pending = f(url, {
body,
method: 'POST',
}).then((res) => imageFromResponse(root, res)).finally(() => {
pending = undefined;
});
// eslint-disable-next-line no-return-await
return await pending;
},
async outpaint() {
throw new NotImplementedError();
},
}; };
} }

23
gui/src/components/Inpaint.tsx
View File

@ -3,7 +3,7 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useMutation, useQuery } from 'react-query'; import { useMutation, useQuery } from 'react-query';
import { ApiClient, BaseImgParams } from '../api/client.js'; import { ApiClient, ApiResponse, BaseImgParams } from '../api/client.js';
import { Config, CONFIG_DEFAULTS, STALE_TIME } from '../config.js'; import { Config, CONFIG_DEFAULTS, STALE_TIME } from '../config.js';
import { SCHEDULER_LABELS } from '../strings.js'; import { SCHEDULER_LABELS } from '../strings.js';
import { ImageCard } from './ImageCard.js'; import { ImageCard } from './ImageCard.js';
@ -26,13 +26,20 @@ export function Inpaint(props: InpaintProps) {
const { client, config, model, platform } = props; const { client, config, model, platform } = props;
async function uploadSource() { async function uploadSource() {
return client.img2img({ const canvas = mustExist(canvasRef.current);
...params, return new Promise<ApiResponse>((res, _rej) => {
model, canvas.toBlob((value) => {
platform, const mask = mustExist(value);
scheduler, res(client.inpaint({
strength, ...params,
source: mustExist(source), // TODO: show an error if this doesn't exist model,
platform,
scheduler,
strength,
mask,
source: mustExist(source),
}));
});
}); });
} }