diff --git a/gui/src/api/client.ts b/gui/src/api/client.ts index b5928a72..9c2ea4e2 100644 --- a/gui/src/api/client.ts +++ b/gui/src/api/client.ts @@ -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; } diff --git a/gui/src/components/Img2Img.tsx b/gui/src/components/Img2Img.tsx index 84f6d989..167778f1 100644 --- a/gui/src/components/Img2Img.tsx +++ b/gui/src/components/Img2Img.tsx @@ -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(); const [strength, setStrength] = useState(config.strength.default); - const [params, setParams] = useState({ - cfg: config.cfg.default, - seed: config.seed.default, - steps: config.steps.default, - prompt: config.prompt.default, - }); + const [params, setParams] = useState(paramsFromConfig(config)); const [scheduler, setScheduler] = useState(config.scheduler.default); return diff --git a/gui/src/components/Inpaint.tsx b/gui/src/components/Inpaint.tsx index d20c3e84..b3c2d633 100644 --- a/gui/src/components/Inpaint.tsx +++ b/gui/src/components/Inpaint.tsx @@ -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(); const [source, setSource] = useState(); - const [params, setParams] = useState({ - cfg: config.cfg.default, - seed: config.seed.default, - steps: config.steps.default, - prompt: config.prompt.default, - }); + const [params, setParams] = useState(paramsFromConfig(config)); const [scheduler, setScheduler] = useState(config.scheduler.default); useEffect(() => { diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/Txt2Img.tsx index eb8f055d..5bc035b6 100644 --- a/gui/src/components/Txt2Img.tsx +++ b/gui/src/components/Txt2Img.tsx @@ -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({ - cfg: config.cfg.default, - seed: config.seed.default, - steps: config.steps.default, - prompt: config.prompt.default, - }); + const [params, setParams] = useState(paramsFromConfig(config)); const [scheduler, setScheduler] = useState(config.scheduler.default); return diff --git a/gui/src/main.tsx b/gui/src/main.tsx index 0a9fb32f..8c6c9fb6 100644 --- a/gui/src/main.tsx +++ b/gui/src/main.tsx @@ -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( - + ); }