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