prevent selecting the same variable for both axes
This commit is contained in:
parent
bf830a9032
commit
f3d1b16c8c
|
@ -1,7 +1,8 @@
|
||||||
|
import { doesExist } from '@apextoaster/js-utils';
|
||||||
import { ChainPipeline, HighresParams, ModelParams, Txt2ImgParams, UpscaleParams } from './types.js';
|
import { ChainPipeline, HighresParams, ModelParams, Txt2ImgParams, UpscaleParams } from './types.js';
|
||||||
|
|
||||||
export interface PipelineVariable {
|
export interface PipelineVariable {
|
||||||
parameter: 'prompt' | 'cfg' | 'seed' | 'steps';
|
parameter: 'prompt' | 'cfg' | 'seed' | 'steps' | 'eta' | 'scheduler' | 'token';
|
||||||
input: string;
|
input: string;
|
||||||
values: Array<number | string>;
|
values: Array<number | string>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Checkbox, FormControl, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
|
import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
@ -18,13 +18,24 @@ export function VariableControl(props: VariableControlProps) {
|
||||||
const store = mustExist(useContext(StateContext));
|
const store = mustExist(useContext(StateContext));
|
||||||
const grid = useStore(store, props.selectGrid);
|
const grid = useStore(store, props.selectGrid);
|
||||||
|
|
||||||
return <Stack direction='column' spacing={2}>
|
const stack = [
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<InputLabel>Grid Mode</InputLabel>
|
<FormControl>
|
||||||
<Checkbox checked={grid.enabled} onChange={() => props.setGrid({
|
<FormControlLabel
|
||||||
|
label='Grid Mode'
|
||||||
|
control={<Checkbox
|
||||||
|
checked={grid.enabled}
|
||||||
|
onChange={() => props.setGrid({
|
||||||
enabled: grid.enabled === false,
|
enabled: grid.enabled === false,
|
||||||
})} />
|
})}
|
||||||
</Stack>
|
/>}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</Stack>,
|
||||||
|
];
|
||||||
|
|
||||||
|
if (grid.enabled) {
|
||||||
|
stack.push(
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<InputLabel id='TODO'>Columns</InputLabel>
|
<InputLabel id='TODO'>Columns</InputLabel>
|
||||||
|
@ -35,9 +46,7 @@ export function VariableControl(props: VariableControlProps) {
|
||||||
values: [],
|
values: [],
|
||||||
},
|
},
|
||||||
})} value={grid.columns.parameter}>
|
})} value={grid.columns.parameter}>
|
||||||
<MenuItem key='prompt' value='prompt'>Prompt</MenuItem>
|
{...parameterList([grid.rows.parameter])}
|
||||||
<MenuItem key='seed' value='seed'>Seed</MenuItem>
|
|
||||||
<MenuItem key='steps' value='steps'>Steps</MenuItem>
|
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<TextField label={grid.columns.parameter} value={grid.columns.input} onChange={(event) => props.setGrid({
|
<TextField label={grid.columns.parameter} value={grid.columns.input} onChange={(event) => props.setGrid({
|
||||||
|
@ -47,7 +56,7 @@ export function VariableControl(props: VariableControlProps) {
|
||||||
values: rangeSplit(grid.columns.parameter, event.target.value),
|
values: rangeSplit(grid.columns.parameter, event.target.value),
|
||||||
},
|
},
|
||||||
})} />
|
})} />
|
||||||
</Stack>
|
</Stack>,
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<InputLabel id='TODO'>Rows</InputLabel>
|
<InputLabel id='TODO'>Rows</InputLabel>
|
||||||
|
@ -58,9 +67,7 @@ export function VariableControl(props: VariableControlProps) {
|
||||||
values: [],
|
values: [],
|
||||||
}
|
}
|
||||||
})} value={grid.rows.parameter}>
|
})} value={grid.rows.parameter}>
|
||||||
<MenuItem key='prompt' value='prompt'>Prompt</MenuItem>
|
{...parameterList([grid.columns.parameter])}
|
||||||
<MenuItem key='seed' value='seed'>Seed</MenuItem>
|
|
||||||
<MenuItem key='steps' value='steps'>Steps</MenuItem>
|
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<TextField label={grid.rows.parameter} value={grid.rows.input} onChange={(event) => props.setGrid({
|
<TextField label={grid.rows.parameter} value={grid.rows.input} onChange={(event) => props.setGrid({
|
||||||
|
@ -71,25 +78,36 @@ export function VariableControl(props: VariableControlProps) {
|
||||||
}
|
}
|
||||||
})} />
|
})} />
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>;
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Stack direction='column' spacing={2}>{...stack}</Stack>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function rangeSplit(parameter: string, value: string): Array<number | string> {
|
export function rangeSplit(parameter: string, value: string): Array<number | string> {
|
||||||
// string values
|
const csv = value.split(',').map((it) => it.trim());
|
||||||
if (parameter === 'prompt') {
|
|
||||||
return value.split('\n');
|
if (STRING_PARAMETERS.includes(parameter)) {
|
||||||
|
return csv;
|
||||||
}
|
}
|
||||||
|
|
||||||
return value.split(',').map((it) => it.trim()).flatMap((it) => expandRanges(it));
|
return csv.flatMap((it) => expandRanges(it));
|
||||||
}
|
}
|
||||||
|
|
||||||
export const EXPR_STRICT_NUMBER = /^[0-9]+$/;
|
export const EXPR_STRICT_NUMBER = /^-?[0-9]+$/;
|
||||||
export const EXPR_NUMBER_RANGE = /^([0-9]+)-([0-9]+)$/;
|
export const EXPR_NUMBER_RANGE = /^([0-9]+)-([0-9]+)$/;
|
||||||
|
|
||||||
export function expandRanges(range: string): Array<string | number> {
|
export function expandRanges(range: string): Array<string | number> {
|
||||||
if (EXPR_STRICT_NUMBER.test(range)) {
|
if (EXPR_STRICT_NUMBER.test(range)) {
|
||||||
// entirely numeric, return without parsing
|
// entirely numeric, return without parsing
|
||||||
return [parseInt(range, 10)];
|
const val = parseInt(range, 10);
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
||||||
|
if (val === -1) {
|
||||||
|
return [newSeed()];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [val];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (EXPR_NUMBER_RANGE.test(range)) {
|
if (EXPR_NUMBER_RANGE.test(range)) {
|
||||||
|
@ -105,3 +123,27 @@ export function expandRanges(range: string): Array<string | number> {
|
||||||
|
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const MAX_SEED_SIZE = 32;
|
||||||
|
export const MAX_SEED = (2**MAX_SEED_SIZE) - 1;
|
||||||
|
|
||||||
|
export function newSeed(): number {
|
||||||
|
return Math.floor(Math.random() * MAX_SEED);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VARIABLE_PARAMETERS = ['prompt', 'negativePrompt', 'seed', 'steps', 'cfg', 'scheduler', 'eta', 'token'];
|
||||||
|
export const STRING_PARAMETERS = ['prompt', 'negativePrompt', 'scheduler', 'token'];
|
||||||
|
|
||||||
|
export function parameterList(exclude?: Array<string>) {
|
||||||
|
const items = [];
|
||||||
|
|
||||||
|
for (const variable of VARIABLE_PARAMETERS) {
|
||||||
|
if (variable !== 'token' && doesExist(exclude) && exclude.includes(variable)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
items.push(<MenuItem key={variable} value={variable}>{variable}</MenuItem>);
|
||||||
|
}
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue