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';
|
||||
|
||||
export interface PipelineVariable {
|
||||
parameter: 'prompt' | 'cfg' | 'seed' | 'steps';
|
||||
parameter: 'prompt' | 'cfg' | 'seed' | 'steps' | 'eta' | 'scheduler' | 'token';
|
||||
input: string;
|
||||
values: Array<number | string>;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
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 { useContext } from 'react';
|
||||
import { useStore } from 'zustand';
|
||||
|
@ -18,78 +18,96 @@ export function VariableControl(props: VariableControlProps) {
|
|||
const store = mustExist(useContext(StateContext));
|
||||
const grid = useStore(store, props.selectGrid);
|
||||
|
||||
return <Stack direction='column' spacing={2}>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<InputLabel>Grid Mode</InputLabel>
|
||||
<Checkbox checked={grid.enabled} onChange={() => props.setGrid({
|
||||
enabled: grid.enabled === false,
|
||||
})} />
|
||||
</Stack>
|
||||
const stack = [
|
||||
<Stack direction='row' spacing={2}>
|
||||
<FormControl>
|
||||
<InputLabel id='TODO'>Columns</InputLabel>
|
||||
<Select onChange={(event) => props.setGrid({
|
||||
<FormControlLabel
|
||||
label='Grid Mode'
|
||||
control={<Checkbox
|
||||
checked={grid.enabled}
|
||||
onChange={() => props.setGrid({
|
||||
enabled: grid.enabled === false,
|
||||
})}
|
||||
/>}
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>,
|
||||
];
|
||||
|
||||
if (grid.enabled) {
|
||||
stack.push(
|
||||
<Stack direction='row' spacing={2}>
|
||||
<FormControl>
|
||||
<InputLabel id='TODO'>Columns</InputLabel>
|
||||
<Select onChange={(event) => props.setGrid({
|
||||
columns: {
|
||||
parameter: event.target.value as VariableKey,
|
||||
input: '',
|
||||
values: [],
|
||||
},
|
||||
})} value={grid.columns.parameter}>
|
||||
{...parameterList([grid.rows.parameter])}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField label={grid.columns.parameter} value={grid.columns.input} onChange={(event) => props.setGrid({
|
||||
columns: {
|
||||
parameter: event.target.value as VariableKey,
|
||||
input: '',
|
||||
values: [],
|
||||
parameter: grid.columns.parameter,
|
||||
input: event.target.value,
|
||||
values: rangeSplit(grid.columns.parameter, event.target.value),
|
||||
},
|
||||
})} value={grid.columns.parameter}>
|
||||
<MenuItem key='prompt' value='prompt'>Prompt</MenuItem>
|
||||
<MenuItem key='seed' value='seed'>Seed</MenuItem>
|
||||
<MenuItem key='steps' value='steps'>Steps</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField label={grid.columns.parameter} value={grid.columns.input} onChange={(event) => props.setGrid({
|
||||
columns: {
|
||||
parameter: grid.columns.parameter,
|
||||
input: event.target.value,
|
||||
values: rangeSplit(grid.columns.parameter, event.target.value),
|
||||
},
|
||||
})} />
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<FormControl>
|
||||
<InputLabel id='TODO'>Rows</InputLabel>
|
||||
<Select onChange={(event) => props.setGrid({
|
||||
})} />
|
||||
</Stack>,
|
||||
<Stack direction='row' spacing={2}>
|
||||
<FormControl>
|
||||
<InputLabel id='TODO'>Rows</InputLabel>
|
||||
<Select onChange={(event) => props.setGrid({
|
||||
rows: {
|
||||
parameter: event.target.value as VariableKey,
|
||||
input: '',
|
||||
values: [],
|
||||
}
|
||||
})} value={grid.rows.parameter}>
|
||||
{...parameterList([grid.columns.parameter])}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField label={grid.rows.parameter} value={grid.rows.input} onChange={(event) => props.setGrid({
|
||||
rows: {
|
||||
parameter: event.target.value as VariableKey,
|
||||
input: '',
|
||||
values: [],
|
||||
parameter: grid.rows.parameter,
|
||||
input: event.target.value,
|
||||
values: rangeSplit(grid.rows.parameter, event.target.value),
|
||||
}
|
||||
})} value={grid.rows.parameter}>
|
||||
<MenuItem key='prompt' value='prompt'>Prompt</MenuItem>
|
||||
<MenuItem key='seed' value='seed'>Seed</MenuItem>
|
||||
<MenuItem key='steps' value='steps'>Steps</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField label={grid.rows.parameter} value={grid.rows.input} onChange={(event) => props.setGrid({
|
||||
rows: {
|
||||
parameter: grid.rows.parameter,
|
||||
input: event.target.value,
|
||||
values: rangeSplit(grid.rows.parameter, event.target.value),
|
||||
}
|
||||
})} />
|
||||
</Stack>
|
||||
</Stack>;
|
||||
})} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return <Stack direction='column' spacing={2}>{...stack}</Stack>;
|
||||
}
|
||||
|
||||
export function rangeSplit(parameter: string, value: string): Array<number | string> {
|
||||
// string values
|
||||
if (parameter === 'prompt') {
|
||||
return value.split('\n');
|
||||
const csv = value.split(',').map((it) => it.trim());
|
||||
|
||||
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 function expandRanges(range: string): Array<string | number> {
|
||||
if (EXPR_STRICT_NUMBER.test(range)) {
|
||||
// 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)) {
|
||||
|
@ -105,3 +123,27 @@ export function expandRanges(range: string): Array<string | number> {
|
|||
|
||||
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