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

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) => {
+    <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) => {
+      }}
+    />
+    <TextField
+      label='Negative Prompt'
+      variant='outlined'
+      value={controlState.negativePrompt}
+      onChange={(event) => {
         if (doesExist(props.onChange)) {
           props.onChange({
             ...controlState,
             negativePrompt: event.target.value,
           });
         }
-    }} />
+      }}
+    />
   </Stack>;
 }

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'