diff --git a/gui/src/components/ImageControl.tsx b/gui/src/components/ImageControl.tsx index 8a8ac64f..3f86720d 100644 --- a/gui/src/components/ImageControl.tsx +++ b/gui/src/components/ImageControl.tsx @@ -1,10 +1,11 @@ import { doesExist } from '@apextoaster/js-utils'; -import { IconButton, Stack, TextField } from '@mui/material'; import { Casino } from '@mui/icons-material'; +import { IconButton, Stack, TextField } from '@mui/material'; import * as React from 'react'; -import { NumericField } from './NumericField.js'; import { BaseImgParams } from '../api/client.js'; +import { CONFIG_DEFAULTS } from '../config.js'; +import { NumericField } from './NumericField.js'; export interface ImageControlProps { params: BaseImgParams; @@ -18,9 +19,9 @@ export function ImageControl(props: ImageControlProps) { { if (doesExist(props.onChange)) { @@ -33,9 +34,9 @@ export function ImageControl(props: ImageControlProps) { /> { if (doesExist(props.onChange)) { @@ -50,9 +51,9 @@ export function ImageControl(props: ImageControlProps) { { if (doesExist(props.onChange)) { @@ -64,7 +65,7 @@ export function ImageControl(props: ImageControlProps) { }} /> { - const seed = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER); + const seed = Math.floor(Math.random() * CONFIG_DEFAULTS.seed.max); if (doesExist(props.onChange)) { props.onChange({ ...params, diff --git a/gui/src/components/Img2Img.tsx b/gui/src/components/Img2Img.tsx index 4013f8ce..6d8c7445 100644 --- a/gui/src/components/Img2Img.tsx +++ b/gui/src/components/Img2Img.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { useMutation, useQuery } from 'react-query'; import { ApiClient, BaseImgParams } from '../api/client.js'; -import { Config } from '../config.js'; +import { Config, CONFIG_DEFAULTS, STALE_TIME } from '../config.js'; import { SCHEDULER_LABELS } from '../strings.js'; import { ImageCard } from './ImageCard.js'; import { ImageControl } from './ImageControl.js'; @@ -14,7 +14,6 @@ import { QueryList } from './QueryList.js'; const { useState } = React; -export const STALE_TIME = 3_000; export interface Img2ImgProps { client: ApiClient; config: Config; @@ -52,11 +51,11 @@ export function Img2Img(props: Img2ImgProps) { }); const [source, setSource] = useState(); - const [strength, setStrength] = useState(0.5); + const [strength, setStrength] = useState(CONFIG_DEFAULTS.strength.default); const [params, setParams] = useState({ - cfg: 6, - seed: -1, - steps: 25, + cfg: CONFIG_DEFAULTS.cfg.default, + seed: CONFIG_DEFAULTS.seed.default, + steps: CONFIG_DEFAULTS.steps.default, prompt: config.default.prompt, }); const [scheduler, setScheduler] = useState(config.default.scheduler); @@ -81,10 +80,10 @@ export function Img2Img(props: Img2ImgProps) { }} /> { setStrength(value); diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx index 05a1da24..f570dd43 100644 --- a/gui/src/components/OnnxWeb.tsx +++ b/gui/src/components/OnnxWeb.tsx @@ -4,11 +4,11 @@ import * as React from 'react'; import { useQuery } from 'react-query'; import { ApiClient } from '../api/client.js'; -import { Config } from '../config.js'; +import { Config, STALE_TIME } from '../config.js'; import { MODEL_LABELS, PLATFORM_LABELS } from '../strings.js'; import { Img2Img } from './Img2Img.js'; import { QueryList } from './QueryList.js'; -import { STALE_TIME, Txt2Img } from './Txt2Img.js'; +import { Txt2Img } from './Txt2Img.js'; const { useState } = React; diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/Txt2Img.tsx index c68b40f7..a299e13c 100644 --- a/gui/src/components/Txt2Img.tsx +++ b/gui/src/components/Txt2Img.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { useMutation, useQuery } from 'react-query'; import { ApiClient, BaseImgParams } from '../api/client.js'; -import { Config } from '../config.js'; +import { Config, CONFIG_DEFAULTS, STALE_TIME } from '../config.js'; import { SCHEDULER_LABELS } from '../strings.js'; import { ImageCard } from './ImageCard.js'; import { ImageControl } from './ImageControl.js'; @@ -13,7 +13,6 @@ import { QueryList } from './QueryList.js'; const { useState } = React; -export const STALE_TIME = 3_000; export interface Txt2ImgProps { client: ApiClient; config: Config; @@ -41,12 +40,12 @@ export function Txt2Img(props: Txt2ImgProps) { staleTime: STALE_TIME, }); - const [height, setHeight] = useState(512); - const [width, setWidth] = useState(512); + const [height, setHeight] = useState(CONFIG_DEFAULTS.height.default); + const [width, setWidth] = useState(CONFIG_DEFAULTS.width.default); const [params, setParams] = useState({ - cfg: 6, - seed: -1, - steps: 25, + cfg: CONFIG_DEFAULTS.cfg.default, + seed: CONFIG_DEFAULTS.seed.default, + steps: CONFIG_DEFAULTS.steps.default, prompt: config.default.prompt, }); const [scheduler, setScheduler] = useState(config.default.scheduler); @@ -71,9 +70,9 @@ export function Txt2Img(props: Txt2ImgProps) { { setWidth(value); @@ -81,9 +80,9 @@ export function Txt2Img(props: Txt2ImgProps) { /> { setHeight(value); diff --git a/gui/src/config.ts b/gui/src/config.ts index 9017563d..6b964769 100644 --- a/gui/src/config.ts +++ b/gui/src/config.ts @@ -1,4 +1,4 @@ -import { STATUS_SUCCESS } from './api/client.js'; +import { Img2ImgParams, STATUS_SUCCESS, Txt2ImgParams } from './api/client.js'; export interface Config { api: { @@ -21,3 +21,67 @@ export async function loadConfig(): Promise { throw new Error('could not load config'); } } + +export interface ConfigRange { + default: number; + min: number; + max: number; + step: number; +} + +export type KeyFilter = { + [K in keyof T]: T[K] extends number ? K : T[K] extends string ? K : never; +}[keyof T]; + +export type ConfigRanges = { + [K in KeyFilter]: T[K] extends number ? ConfigRange : T[K] extends string ? string : never; +}; + +export const IMAGE_STEP = 8; +export const IMAGE_MAX = 512; + +export const CONFIG_DEFAULTS: ConfigRanges> = { + cfg: { + default: 6, + min: 1, + max: 30, + step: 0.1, + }, + height: { + default: IMAGE_MAX, + min: IMAGE_STEP, + max: IMAGE_MAX, + step: IMAGE_STEP, + }, + model: '', + negativePrompt: '', + platform: '', + prompt: 'an astronaut eating a hamburger', + scheduler: '', + steps: { + default: 25, + min: 1, + max: 200, + step: 1, + }, + seed: { + default: -1, + min: -1, + max: (2 ** 32) - 1, + step: 1, + }, + strength: { + default: 0.5, + min: 0, + max: 1, + step: 0.01, + }, + width: { + default: IMAGE_MAX, + min: IMAGE_STEP, + max: IMAGE_MAX, + step: IMAGE_STEP, + }, +}; + +export const STALE_TIME = 3_000;