fix(gui): limit seed to safe values, prep for more settings
This commit is contained in:
parent
c5e0439aa5
commit
3dfbb0061b
|
@ -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) {
|
|||
<Stack direction='row' spacing={4}>
|
||||
<NumericField
|
||||
label='CFG'
|
||||
min={0}
|
||||
max={30}
|
||||
step={1}
|
||||
min={CONFIG_DEFAULTS.cfg.min}
|
||||
max={CONFIG_DEFAULTS.cfg.max}
|
||||
step={CONFIG_DEFAULTS.cfg.step}
|
||||
value={params.cfg}
|
||||
onChange={(cfg) => {
|
||||
if (doesExist(props.onChange)) {
|
||||
|
@ -33,9 +34,9 @@ export function ImageControl(props: ImageControlProps) {
|
|||
/>
|
||||
<NumericField
|
||||
label='Steps'
|
||||
min={1}
|
||||
max={150}
|
||||
step={1}
|
||||
min={CONFIG_DEFAULTS.steps.min}
|
||||
max={CONFIG_DEFAULTS.steps.max}
|
||||
step={CONFIG_DEFAULTS.steps.step}
|
||||
value={params.steps}
|
||||
onChange={(steps) => {
|
||||
if (doesExist(props.onChange)) {
|
||||
|
@ -50,9 +51,9 @@ export function ImageControl(props: ImageControlProps) {
|
|||
<Stack direction='row' spacing={4}>
|
||||
<NumericField
|
||||
label='Seed'
|
||||
min={-1}
|
||||
max={Number.MAX_SAFE_INTEGER}
|
||||
step={1}
|
||||
min={CONFIG_DEFAULTS.seed.min}
|
||||
max={CONFIG_DEFAULTS.seed.max}
|
||||
step={CONFIG_DEFAULTS.seed.step}
|
||||
value={params.seed}
|
||||
onChange={(seed) => {
|
||||
if (doesExist(props.onChange)) {
|
||||
|
@ -64,7 +65,7 @@ export function ImageControl(props: ImageControlProps) {
|
|||
}}
|
||||
/>
|
||||
<IconButton onClick={() => {
|
||||
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,
|
||||
|
|
|
@ -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<File>();
|
||||
const [strength, setStrength] = useState(0.5);
|
||||
const [strength, setStrength] = useState(CONFIG_DEFAULTS.strength.default);
|
||||
const [params, setParams] = useState<BaseImgParams>({
|
||||
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) {
|
|||
}} />
|
||||
<NumericField
|
||||
decimal
|
||||
label='Weight'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
label='Strength'
|
||||
min={CONFIG_DEFAULTS.strength.min}
|
||||
max={CONFIG_DEFAULTS.strength.max}
|
||||
step={CONFIG_DEFAULTS.strength.step}
|
||||
value={strength}
|
||||
onChange={(value) => {
|
||||
setStrength(value);
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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<BaseImgParams>({
|
||||
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) {
|
|||
<Stack direction='row' spacing={4}>
|
||||
<NumericField
|
||||
label='Width'
|
||||
min={8}
|
||||
max={512}
|
||||
step={8}
|
||||
min={CONFIG_DEFAULTS.width.min}
|
||||
max={CONFIG_DEFAULTS.width.max}
|
||||
step={CONFIG_DEFAULTS.width.step}
|
||||
value={width}
|
||||
onChange={(value) => {
|
||||
setWidth(value);
|
||||
|
@ -81,9 +80,9 @@ export function Txt2Img(props: Txt2ImgProps) {
|
|||
/>
|
||||
<NumericField
|
||||
label='Height'
|
||||
min={8}
|
||||
max={512}
|
||||
step={8}
|
||||
min={CONFIG_DEFAULTS.height.min}
|
||||
max={CONFIG_DEFAULTS.height.max}
|
||||
step={CONFIG_DEFAULTS.height.step}
|
||||
value={height}
|
||||
onChange={(value) => {
|
||||
setHeight(value);
|
||||
|
|
|
@ -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<Config> {
|
|||
throw new Error('could not load config');
|
||||
}
|
||||
}
|
||||
|
||||
export interface ConfigRange {
|
||||
default: number;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
}
|
||||
|
||||
export type KeyFilter<T extends object> = {
|
||||
[K in keyof T]: T[K] extends number ? K : T[K] extends string ? K : never;
|
||||
}[keyof T];
|
||||
|
||||
export type ConfigRanges<T extends object> = {
|
||||
[K in KeyFilter<T>]: 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<Required<Img2ImgParams & Txt2ImgParams>> = {
|
||||
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;
|
||||
|
|
Loading…
Reference in New Issue