fix(gui): consistently load image controls from server params
This commit is contained in:
parent
37efd51341
commit
4a6458d8f6
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue