prevent selecting the same variable for both axes

gui/src/client/utils.ts

@@ -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>;
 }

gui/src/components/control/VariableControl.tsx

@@ -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,13 +18,24 @@ export function VariableControl(props: VariableControlProps) {
   const store = mustExist(useContext(StateContext));
   const grid = useStore(store, props.selectGrid);
 
-  return <Stack direction='column' spacing={2}>
+  const stack = [
     <Stack direction='row' spacing={2}>
-      <InputLabel>Grid Mode</InputLabel>
-      <Checkbox checked={grid.enabled} onChange={() => props.setGrid({
+      <FormControl>
+        <FormControlLabel
+          label='Grid Mode'
+          control={<Checkbox
+            checked={grid.enabled}
+            onChange={() => props.setGrid({
               enabled: grid.enabled === false,
-      })} />
-    </Stack>
+            })}
+          />}
+        />
+      </FormControl>
+    </Stack>,
+  ];
+
+  if (grid.enabled) {
+    stack.push(
       <Stack direction='row' spacing={2}>
         <FormControl>
           <InputLabel id='TODO'>Columns</InputLabel>
@@ -35,9 +46,7 @@ export function VariableControl(props: VariableControlProps) {
               values: [],
             },
           })} 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>
+            {...parameterList([grid.rows.parameter])}
           </Select>
         </FormControl>
         <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),
           },
         })} />
-    </Stack>
+      </Stack>,
       <Stack direction='row' spacing={2}>
         <FormControl>
           <InputLabel id='TODO'>Rows</InputLabel>
@@ -58,9 +67,7 @@ export function VariableControl(props: VariableControlProps) {
               values: [],
             }
           })} 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>
+            {...parameterList([grid.columns.parameter])}
           </Select>
         </FormControl>
         <TextField label={grid.rows.parameter} value={grid.rows.input} onChange={(event) => props.setGrid({
@@ -71,25 +78,36 @@ export function VariableControl(props: VariableControlProps) {
           }
         })} />
       </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;
+}