feat(gui): add validation to numeric inputs, token counter to prompt
This commit is contained in:
parent
0d1f236096
commit
a1b16bb435
|
@ -14,6 +14,8 @@ import { QueryList } from '../input/QueryList.js';
|
||||||
|
|
||||||
const { useContext } = React;
|
const { useContext } = React;
|
||||||
|
|
||||||
|
export const PROMPT_LIMIT = 70;
|
||||||
|
|
||||||
export interface ImageControlProps {
|
export interface ImageControlProps {
|
||||||
selector: (state: OnnxState) => BaseImgParams;
|
selector: (state: OnnxState) => BaseImgParams;
|
||||||
|
|
||||||
|
@ -33,6 +35,17 @@ export function ImageControl(props: ImageControlProps) {
|
||||||
staleTime: STALE_TIME,
|
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}>
|
return <Stack spacing={2}>
|
||||||
<QueryList
|
<QueryList
|
||||||
id='schedulers'
|
id='schedulers'
|
||||||
|
@ -114,21 +127,33 @@ export function ImageControl(props: ImageControlProps) {
|
||||||
New Seed
|
New Seed
|
||||||
</Button>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
<TextField label='Prompt' variant='outlined' value={controlState.prompt} onChange={(event) => {
|
<TextField
|
||||||
if (doesExist(props.onChange)) {
|
error={error}
|
||||||
props.onChange({
|
label='Prompt'
|
||||||
...controlState,
|
helperText={promptHelper()}
|
||||||
prompt: event.target.value,
|
variant='outlined'
|
||||||
});
|
value={controlState.prompt}
|
||||||
}
|
onChange={(event) => {
|
||||||
}} />
|
if (doesExist(props.onChange)) {
|
||||||
<TextField label='Negative Prompt' variant='outlined' value={controlState.negativePrompt} onChange={(event) => {
|
props.onChange({
|
||||||
if (doesExist(props.onChange)) {
|
...controlState,
|
||||||
props.onChange({
|
prompt: event.target.value,
|
||||||
...controlState,
|
});
|
||||||
negativePrompt: 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>;
|
</Stack>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,9 +25,13 @@ export interface ImageControlProps {
|
||||||
export function NumericField(props: ImageControlProps) {
|
export function NumericField(props: ImageControlProps) {
|
||||||
const { decimal = false, disabled = false, label, min, max, step, value } = props;
|
const { decimal = false, disabled = false, label, min, max, step, value } = props;
|
||||||
|
|
||||||
|
const error = (value < min) || (value > max);
|
||||||
|
|
||||||
return <Stack spacing={2}>
|
return <Stack spacing={2}>
|
||||||
<TextField
|
<TextField
|
||||||
|
error={error}
|
||||||
label={label}
|
label={label}
|
||||||
|
helperText={error && 'Out of range'}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
type='number'
|
type='number'
|
||||||
|
|
Loading…
Reference in New Issue