apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): consistently load image controls from server params

This commit is contained in:
Sean Sube 2023-01-09 23:16:28 -06:00
parent 37efd51341
commit 4a6458d8f6
5 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { doesExist, NotImplementedError } from '@apextoaster/js-utils';
import { ConfigParams } from '../config';
import { ConfigParams } from '../config.js';
export interface BaseImgParams {
/**
@ -71,6 +72,16 @@ export interface ApiClient {
export const STATUS_SUCCESS = 200;
export function paramsFromConfig(defaults: ConfigParams): BaseImgParams {
return {
cfg: defaults.cfg.default,
negativePrompt: defaults.negativePrompt.default,
prompt: defaults.prompt.default,
steps: defaults.steps.default,
seed: defaults.seed.default,
};
}
export function equalResponse(a: ApiResponse, b: ApiResponse): boolean {
return a.output === b.output;
}

11
gui/src/components/Img2Img.tsx
View File

@ -3,12 +3,12 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react';
import { useMutation, useQuery } from 'react-query';
import { ApiClient, BaseImgParams } from '../api/client.js';
import { ApiClient, BaseImgParams, paramsFromConfig } from '../api/client.js';
import { ConfigParams, IMAGE_FILTER, STALE_TIME } from '../config.js';
import { SCHEDULER_LABELS } from '../strings.js';
import { ImageInput } from './ImageInput.js';
import { ImageCard } from './ImageCard.js';
import { ImageControl } from './ImageControl.js';
import { ImageInput } from './ImageInput.js';
import { MutationHistory } from './MutationHistory.js';
import { NumericField } from './NumericField.js';
import { QueryList } from './QueryList.js';
@ -44,12 +44,7 @@ export function Img2Img(props: Img2ImgProps) {
const [source, setSource] = useState<File>();
const [strength, setStrength] = useState(config.strength.default);
const [params, setParams] = useState<BaseImgParams>({
cfg: config.cfg.default,
seed: config.seed.default,
steps: config.steps.default,
prompt: config.prompt.default,
});
const [params, setParams] = useState<BaseImgParams>(paramsFromConfig(config));
const [scheduler, setScheduler] = useState(config.scheduler.default);
return <Box>

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

@ -4,12 +4,12 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react';
import { useMutation, useQuery } from 'react-query';
import { ApiClient, ApiResponse, BaseImgParams, equalResponse } from '../api/client.js';
import { Config, ConfigParams, DEFAULT_BRUSH, IMAGE_FILTER, STALE_TIME } from '../config.js';
import { ApiClient, ApiResponse, BaseImgParams, equalResponse, paramsFromConfig } from '../api/client.js';
import { ConfigParams, DEFAULT_BRUSH, IMAGE_FILTER, STALE_TIME } from '../config.js';
import { SCHEDULER_LABELS } from '../strings.js';
import { ImageInput } from './ImageInput.js';
import { ImageCard } from './ImageCard.js';
import { ImageControl } from './ImageControl.js';
import { ImageInput } from './ImageInput.js';
import { MutationHistory } from './MutationHistory.js';
import { NumericField } from './NumericField.js';
import { QueryList } from './QueryList.js';
@ -165,12 +165,7 @@ export function Inpaint(props: InpaintProps) {
const [mask, setMask] = useState<File>();
const [source, setSource] = useState<File>();
const [params, setParams] = useState<BaseImgParams>({
cfg: config.cfg.default,
seed: config.seed.default,
steps: config.steps.default,
prompt: config.prompt.default,
});
const [params, setParams] = useState<BaseImgParams>(paramsFromConfig(config));
const [scheduler, setScheduler] = useState(config.scheduler.default);
useEffect(() => {

9
gui/src/components/Txt2Img.tsx
View File

@ -2,7 +2,7 @@ import { Box, Button, Stack } from '@mui/material';
import * as React from 'react';
import { useMutation, useQuery } from 'react-query';
import { ApiClient, BaseImgParams } from '../api/client.js';
import { ApiClient, BaseImgParams, paramsFromConfig } from '../api/client.js';
import { ConfigParams, STALE_TIME } from '../config.js';
import { SCHEDULER_LABELS } from '../strings.js';
import { ImageCard } from './ImageCard.js';
@ -42,12 +42,7 @@ export function Txt2Img(props: Txt2ImgProps) {
const [height, setHeight] = useState(config.height.default);
const [width, setWidth] = useState(config.width.default);
const [params, setParams] = useState<BaseImgParams>({
cfg: config.cfg.default,
seed: config.seed.default,
steps: config.steps.default,
prompt: config.prompt.default,
});
const [params, setParams] = useState<BaseImgParams>(paramsFromConfig(config));
const [scheduler, setScheduler] = useState(config.scheduler.default);
return <Box>

8
gui/src/main.tsx
View File

@ -7,19 +7,19 @@ import { QueryClient, QueryClientProvider } from 'react-query';
import { makeClient } from './api/client.js';
import { OnnxWeb } from './components/OnnxWeb.js';
import { ConfigParams, loadConfig } from './config.js';
import { loadConfig } from './config.js';
export async function main() {
const config = await loadConfig();
const client = makeClient(config.api.root);
const params = await client.params();
const merged = merge(params, config.params) as ConfigParams;
const query = new QueryClient();
merge(params, config.params);
const query = new QueryClient();
const appElement = mustExist(document.getElementById('app'));
const app = ReactDOM.createRoot(appElement);
app.render(<QueryClientProvider client={query}>
<OnnxWeb client={client} config={merged} />
<OnnxWeb client={client} config={params} />
</QueryClientProvider>);
}