diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx index a76a43188e..50afb8f8da 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx @@ -12,6 +12,7 @@ import { SimpleSelect } from '@/app/components/base/select' import TagInput from '@/app/components/base/tag-input' export type ParameterValue = number | string | string[] | boolean | undefined + type ParameterItemProps = { parameterRule: ModelParameterRule value?: ParameterValue @@ -28,48 +29,29 @@ const ParameterItem: FC = ({ }) => { const language = useLanguage() const [localValue, setLocalValue] = useState(value) - const mergedValue = isNullOrUndefined(value) ? localValue : value const getDefaultValue = () => { let defaultValue: ParameterValue - if (parameterRule.type === 'int' || parameterRule.type === 'float') { - if (isNullOrUndefined(parameterRule.default)) { - if (parameterRule.min) - defaultValue = parameterRule.min - else - defaultValue = 0 - } - else { - defaultValue = parameterRule.default - } - } - - if (parameterRule.type === 'string' && !parameterRule.options?.length) - defaultValue = parameterRule.default || '' - - if (parameterRule.type === 'string' && parameterRule.options?.length) - defaultValue = parameterRule.default || '' - - if (parameterRule.type === 'boolean') + if (parameterRule.type === 'int' || parameterRule.type === 'float') + defaultValue = isNullOrUndefined(parameterRule.default) ? (parameterRule.min || 0) : parameterRule.default + else if (parameterRule.type === 'string') + defaultValue = parameterRule.options?.length ? (parameterRule.default || '') : (parameterRule.default || '') + else if (parameterRule.type === 'boolean') defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false - - if (parameterRule.type === 'tag') + else if (parameterRule.type === 'tag') defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : [] return defaultValue } - const renderValue = isNullOrUndefined(mergedValue) ? getDefaultValue() : mergedValue - const handleChange = (v: ParameterValue) => { - setLocalValue(v) + const renderValue = value ?? localValue ?? getDefaultValue() - if (onChange) { - if (parameterRule.name === 'stop') - onChange(v) - else if (!isNullOrUndefined(value)) - onChange(v) - } + const handleInputChange = (newValue: ParameterValue) => { + setLocalValue(newValue) + + if (onChange && (parameterRule.name === 'stop' || !isNullOrUndefined(value))) + onChange(newValue) } const handleNumberInputChange = (e: React.ChangeEvent) => { @@ -81,45 +63,127 @@ const ParameterItem: FC = ({ if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!) num = parameterRule.min as number - handleChange(num) + handleInputChange(num) } const handleSlideChange = (num: number) => { - handleChange(num) + handleInputChange(num) } const handleRadioChange = (v: number) => { - handleChange(v === 1) + handleInputChange(v === 1) } const handleStringInputChange = (e: React.ChangeEvent) => { - handleChange(e.target.value) + handleInputChange(e.target.value) } const handleSelect = (option: { value: string | number; name: string }) => { - handleChange(option.value) + handleInputChange(option.value) } const handleTagChange = (newSequences: string[]) => { - handleChange(newSequences) + handleInputChange(newSequences) } const handleSwitch = (checked: boolean) => { if (onSwitch) { - let assignValue: ParameterValue = localValue - - if (isNullOrUndefined(localValue)) - assignValue = getDefaultValue() + const assignValue: ParameterValue = localValue || getDefaultValue() onSwitch(checked, assignValue) } } - const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float') + const renderInput = () => { + const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float') && !isNullOrUndefined(parameterRule.min) && !isNullOrUndefined(parameterRule.max) - const numberInput = (parameterRule.type === 'int' || parameterRule.type === 'float') - && (isNullOrUndefined(parameterRule.min) || isNullOrUndefined(parameterRule.max)) + + if (parameterRule.type === 'int' || parameterRule.type === 'float') { + let step = 100 + if (parameterRule.max) { + if (parameterRule.max < 10) + step = 0.1 + else if (parameterRule.max < 100) + step = 1 + else if (parameterRule.max < 1000) + step = 10 + else if (parameterRule.max < 10000) + step = 100 + } + + return ( + <> + {numberInputWithSlide && } + + + ) + } + + if (parameterRule.type === 'boolean') { + return ( + + True + False + + ) + } + + if (parameterRule.type === 'string' && !parameterRule.options?.length) { + return ( + + ) + } + + if (parameterRule.type === 'string' && !!parameterRule?.options?.length) { + return ( + ({ value: option, name: option }))} + /> + ) + } + + if (parameterRule.type === 'tag') { + return ( +
+ +
+ ) + } + + return null + } return (
@@ -161,82 +225,7 @@ const ParameterItem: FC = ({ ) }
- { - numberInputWithSlide && ( -
- - -
- ) - } - { - parameterRule.type === 'boolean' && ( - - True - False - - ) - } - { - numberInput && ( - - ) - } - { - parameterRule.type === 'string' && !parameterRule.options?.length && ( - - ) - } - { - parameterRule.type === 'string' && !!parameterRule?.options?.length && ( - ({ value: option, name: option }))} - /> - ) - } - { - parameterRule.type === 'tag' && ( -
- -
- ) - } + {renderInput()} ) }