feat(gui): add validation to numeric inputs, token counter to prompt

ssube · Jan 22, 2023 · a1b16bb · a1b16bb
1 parent 0d1f236
commit a1b16bb
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/gui/src/components/control/ImageControl.tsx b/gui/src/components/control/ImageControl.tsx
@@ -14,6 +14,8 @@ import { QueryList } from '../input/QueryList.js';
 
 const { useContext } = React;
 
+export const PROMPT_LIMIT = 70;
+
 export interface ImageControlProps {
   selector: (state: OnnxState) => BaseImgParams;
 
@@ -33,6 +35,17 @@ export function ImageControl(props: ImageControlProps) {
     staleTime: STALE_TIME,
   });
 
+  const promptLength = controlState.prompt.split(' ').length;
+  const error = promptLength > PROMPT_LIMIT;
+
+  function promptHelper() {
+    if (error) {
+      return `Too many tokens: ${promptLength}/${PROMPT_LIMIT}`;
+    } else {
+      return `Tokens: ${promptLength}/${PROMPT_LIMIT}`;
+    }
+  }
+
   return <Stack spacing={2}>
     <QueryList
       id='schedulers'
@@ -114,21 +127,33 @@ export function ImageControl(props: ImageControlProps) {
         New Seed
       </Button>
     </Stack>
-    <TextField label='Prompt' variant='outlined' value={controlState.prompt} onChange={(event) => {
-      if (doesExist(props.onChange)) {
-        props.onChange({
-          ...controlState,
-          prompt: event.target.value,
-        });
-      }
-    }} />
-    <TextField label='Negative Prompt' variant='outlined' value={controlState.negativePrompt} onChange={(event) => {
-      if (doesExist(props.onChange)) {
-        props.onChange({
-          ...controlState,
-          negativePrompt: event.target.value,
-        });
-      }
-    }} />
+    <TextField
+      error={error}
+      label='Prompt'
+      helperText={promptHelper()}
+      variant='outlined'
+      value={controlState.prompt}
+      onChange={(event) => {
+        if (doesExist(props.onChange)) {
+          props.onChange({
+            ...controlState,
+            prompt: event.target.value,
+          });
+        }
+      }}
+    />
+    <TextField
+      label='Negative Prompt'
+      variant='outlined'
+      value={controlState.negativePrompt}
+      onChange={(event) => {
+        if (doesExist(props.onChange)) {
+          props.onChange({
+            ...controlState,
+            negativePrompt: event.target.value,
+          });
+        }
+      }}
+    />
   </Stack>;
 }
diff --git a/gui/src/components/input/NumericField.tsx b/gui/src/components/input/NumericField.tsx
@@ -25,9 +25,13 @@ export interface ImageControlProps {
 export function NumericField(props: ImageControlProps) {
   const { decimal = false, disabled = false, label, min, max, step, value } = props;
 
+  const error = (value < min) || (value > max);
+
   return <Stack spacing={2}>
     <TextField
+      error={error}
       label={label}
+      helperText={error && 'Out of range'}
       disabled={disabled}
       variant='outlined'
       type='number'