diff --git a/gui/src/components/control/ImageControl.tsx b/gui/src/components/control/ImageControl.tsx index 6a3f0b5d..829f0567 100644 --- 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 - { - if (doesExist(props.onChange)) { - props.onChange({ - ...controlState, - prompt: event.target.value, - }); - } - }} /> - { - if (doesExist(props.onChange)) { - props.onChange({ - ...controlState, - negativePrompt: event.target.value, - }); - } - }} /> + { + if (doesExist(props.onChange)) { + props.onChange({ + ...controlState, + prompt: event.target.value, + }); + } + }} + /> + { + if (doesExist(props.onChange)) { + props.onChange({ + ...controlState, + negativePrompt: event.target.value, + }); + } + }} + /> ; } diff --git a/gui/src/components/input/NumericField.tsx b/gui/src/components/input/NumericField.tsx index 258820f5..1f4ea018 100644 --- 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