Model Runtime (#1858)
Co-authored-by: StyleZhang <jasonapring2015@outlook.com> Co-authored-by: Garfield Dai <dai.hai@foxmail.com> Co-authored-by: chenhe <guchenhe@gmail.com> Co-authored-by: jyong <jyong@dify.ai> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Yeuoly <admin@srmxy.cn>
This commit is contained in:
takatost
@@ -0,0 +1,223 @@
|
||||
import type { FC } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type {
|
||||
DefaultModel,
|
||||
FormValue,
|
||||
ModelParameterRule,
|
||||
} from '../declarations'
|
||||
import ModelIcon from '../model-icon'
|
||||
import ModelName from '../model-name'
|
||||
import ModelSelector from '../model-selector'
|
||||
import { useTextGenerationCurrentProviderAndModelAndModelList } from '../hooks'
|
||||
import ParameterItem from './parameter-item'
|
||||
import type { ParameterValue } from './parameter-item'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
|
||||
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
|
||||
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
|
||||
import { fetchModelParameterRules } from '@/service/common'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
|
||||
type ModelParameterModalProps = {
|
||||
isAdvancedMode: boolean
|
||||
mode: string
|
||||
modelId: string
|
||||
provider: string
|
||||
setModel: (model: { modelId: string; provider: string; mode?: string; features: string[] }) => void
|
||||
completionParams: FormValue
|
||||
onCompletionParamsChange: (newParams: FormValue) => void
|
||||
disabled: boolean
|
||||
}
|
||||
const stopParameerRule: ModelParameterRule = {
|
||||
default: [],
|
||||
help: {
|
||||
en_US: 'Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.',
|
||||
zh_Hans: '最多四个序列，API 将停止生成更多的 token。返回的文本将不包含停止序列。',
|
||||
},
|
||||
label: {
|
||||
en_US: 'Stop sequences',
|
||||
zh_Hans: '停止序列 stop_sequences',
|
||||
},
|
||||
name: 'stop',
|
||||
required: false,
|
||||
type: 'tag',
|
||||
tagPlaceholder: {
|
||||
en_US: 'Enter sequence and press Tab',
|
||||
zh_Hans: '输入序列并按 Tab 键',
|
||||
},
|
||||
}
|
||||
const ModelParameterModal: FC<ModelParameterModalProps> = ({
|
||||
isAdvancedMode,
|
||||
modelId,
|
||||
provider,
|
||||
setModel,
|
||||
completionParams,
|
||||
onCompletionParamsChange,
|
||||
disabled,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const { data: parameterRulesData, isLoading } = useSWR(`/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`, fetchModelParameterRules)
|
||||
const {
|
||||
currentProvider,
|
||||
currentModel,
|
||||
textGenerationModelList,
|
||||
} = useTextGenerationCurrentProviderAndModelAndModelList(
|
||||
{ provider, model: modelId },
|
||||
)
|
||||
|
||||
const parameterRules = parameterRulesData?.data || []
|
||||
|
||||
const handleParamChange = (key: string, value: ParameterValue) => {
|
||||
onCompletionParamsChange({
|
||||
...completionParams,
|
||||
[key]: value,
|
||||
})
|
||||
}
|
||||
|
||||
const handleChangeModel = ({ provider, model }: DefaultModel) => {
|
||||
const targetProvider = textGenerationModelList.find(modelItem => modelItem.provider === provider)
|
||||
const targetModelItem = targetProvider?.models.find(modelItem => modelItem.model === model)
|
||||
setModel({
|
||||
modelId: model,
|
||||
provider,
|
||||
mode: targetModelItem?.model_properties.mode as string,
|
||||
features: targetModelItem?.features || [],
|
||||
})
|
||||
}
|
||||
|
||||
const handleChangeParams = () => {
|
||||
const newCompletionParams = parameterRules.reduce((acc, parameter) => {
|
||||
if (parameter.default !== undefined)
|
||||
acc[parameter.name] = parameter.default
|
||||
|
||||
return acc
|
||||
}, {} as Record<string, any>)
|
||||
|
||||
onCompletionParamsChange(newCompletionParams)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleChangeParams()
|
||||
}, [parameterRules])
|
||||
|
||||
const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
|
||||
if (!value) {
|
||||
const newCompletionParams = { ...completionParams }
|
||||
delete newCompletionParams[key]
|
||||
|
||||
onCompletionParamsChange(newCompletionParams)
|
||||
}
|
||||
if (value) {
|
||||
onCompletionParamsChange({
|
||||
...completionParams,
|
||||
[key]: assignValue,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-end'
|
||||
offset={4}
|
||||
>
|
||||
<div className='relative'>
|
||||
<PortalToFollowElemTrigger
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className='block'
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
|
||||
${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
|
||||
`}
|
||||
>
|
||||
{
|
||||
currentProvider && (
|
||||
<ModelIcon
|
||||
className='mr-1.5 !w-5 !h-5'
|
||||
provider={currentProvider}
|
||||
modelName={currentModel?.model}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
currentModel && (
|
||||
<ModelName
|
||||
className='mr-1.5 text-gray-900'
|
||||
modelItem={currentModel}
|
||||
showMode={isAdvancedMode}
|
||||
modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
|
||||
showFeatures={isAdvancedMode}
|
||||
featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
disabled
|
||||
? (
|
||||
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
|
||||
)
|
||||
: (
|
||||
<SlidersH className='w-4 h-4 text-indigo-600' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent>
|
||||
<div className='w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl'>
|
||||
<div className='flex items-center px-4 h-12 rounded-t-xl border-b border-gray-100 bg-gray-50 text-md font-medium text-gray-900'>
|
||||
<CubeOutline className='mr-2 w-4 h-4 text-primary-600' />
|
||||
{t('common.modelProvider.modelAndParameters')}
|
||||
</div>
|
||||
<div className='px-10 pt-4 pb-8'>
|
||||
<div className='flex items-center justify-between h-8'>
|
||||
<div className='text-sm font-medium text-gray-900'>
|
||||
{t('common.modelProvider.model')}
|
||||
</div>
|
||||
<ModelSelector
|
||||
defaultModel={{ provider, model: modelId }}
|
||||
modelList={textGenerationModelList}
|
||||
onSelect={handleChangeModel}
|
||||
/>
|
||||
</div>
|
||||
<div className='my-5 h-[1px] bg-gray-100' />
|
||||
{
|
||||
isLoading && (
|
||||
<Loading />
|
||||
)
|
||||
}
|
||||
{
|
||||
!isLoading && (
|
||||
[
|
||||
...parameterRules,
|
||||
...(isAdvancedMode ? [stopParameerRule] : []),
|
||||
].map(parameter => (
|
||||
<ParameterItem
|
||||
key={parameter.name}
|
||||
className='mb-4'
|
||||
parameterRule={parameter}
|
||||
value={completionParams[parameter.name]}
|
||||
onChange={v => handleParamChange(parameter.name, v)}
|
||||
onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
|
||||
/>
|
||||
))
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</div>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModelParameterModal
|
||||
@@ -0,0 +1,223 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import type { ModelParameterRule } from '../declarations'
|
||||
import { useLanguage } from '../hooks'
|
||||
import { isNullOrUndefined } from '../utils'
|
||||
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Slider from '@/app/components/base/slider'
|
||||
import Radio from '@/app/components/base/radio'
|
||||
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
|
||||
onChange?: (value: ParameterValue) => void
|
||||
className?: string
|
||||
onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
|
||||
}
|
||||
const ParameterItem: FC<ParameterItemProps> = ({
|
||||
parameterRule,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
onSwitch,
|
||||
}) => {
|
||||
const language = useLanguage()
|
||||
const [localValue, setLocalValue] = useState(value)
|
||||
const mergedValue = isNullOrUndefined(value) ? localValue : value
|
||||
const renderValue = mergedValue === undefined ? parameterRule.default : mergedValue
|
||||
|
||||
const handleChange = (v: ParameterValue) => {
|
||||
setLocalValue(v)
|
||||
if (!isNullOrUndefined(value) && onChange)
|
||||
onChange(v)
|
||||
}
|
||||
|
||||
const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let num = +e.target.value
|
||||
|
||||
if (!isNullOrUndefined(parameterRule.max) && num > parameterRule.max!)
|
||||
num = parameterRule.max as number
|
||||
|
||||
if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!)
|
||||
num = parameterRule.min as number
|
||||
|
||||
handleChange(num)
|
||||
}
|
||||
|
||||
const handleSlideChange = (num: number) => {
|
||||
handleChange(num)
|
||||
}
|
||||
|
||||
const handleRadioChange = (v: number) => {
|
||||
handleChange(v === 1)
|
||||
}
|
||||
|
||||
const handleStringInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
handleChange(e.target.value)
|
||||
}
|
||||
|
||||
const handleSelect = (option: { value: string | number; name: string }) => {
|
||||
handleChange(option.value)
|
||||
}
|
||||
|
||||
const handleTagChange = (newSequences: string[]) => {
|
||||
handleChange(newSequences)
|
||||
}
|
||||
|
||||
const handleSwitch = (checked: boolean) => {
|
||||
if (onSwitch) {
|
||||
let assignValue: ParameterValue = localValue
|
||||
|
||||
if (isNullOrUndefined(localValue)) {
|
||||
if (parameterRule.type === 'int' || parameterRule.type === 'float')
|
||||
assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : 0
|
||||
|
||||
if (parameterRule.type === 'string' && !parameterRule.options?.length)
|
||||
assignValue = parameterRule.default || ''
|
||||
|
||||
if (parameterRule.type === 'string' && parameterRule.options?.length)
|
||||
assignValue = parameterRule.options[0]
|
||||
|
||||
if (parameterRule.type === 'boolean')
|
||||
assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
|
||||
|
||||
if (parameterRule.type === 'tag')
|
||||
assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
|
||||
}
|
||||
|
||||
onSwitch(checked, assignValue)
|
||||
}
|
||||
}
|
||||
|
||||
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))
|
||||
|
||||
return (
|
||||
<div className={`flex items-center justify-between ${className}`}>
|
||||
<div>
|
||||
<div className='shrink-0 flex items-center w-[200px]'>
|
||||
<div
|
||||
className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
|
||||
title={parameterRule.label[language]}
|
||||
>
|
||||
{parameterRule.label[language]}
|
||||
</div>
|
||||
{
|
||||
parameterRule.help && (
|
||||
<Tooltip
|
||||
selector={`model-parameter-rule-${parameterRule.name}`}
|
||||
htmlContent={(
|
||||
<div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language]}</div>
|
||||
)}
|
||||
>
|
||||
<HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
{
|
||||
!parameterRule.required && parameterRule.name !== 'stop' && (
|
||||
<Switch
|
||||
defaultValue={!isNullOrUndefined(value)}
|
||||
onChange={handleSwitch}
|
||||
size='md'
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
parameterRule.type === 'tag' && (
|
||||
<div className='w-[200px] text-gray-400 text-xs font-normal'>
|
||||
{parameterRule?.tagPlaceholder?.[language]}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
numberInputWithSlide && (
|
||||
<div className='flex items-center'>
|
||||
<Slider
|
||||
className='w-[120px]'
|
||||
value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
|
||||
min={parameterRule.min}
|
||||
max={parameterRule.max}
|
||||
step={+`0.${parameterRule.precision || 0}`}
|
||||
onChange={handleSlideChange}
|
||||
/>
|
||||
<input
|
||||
className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
|
||||
type='number'
|
||||
max={parameterRule.max}
|
||||
min={parameterRule.min}
|
||||
step={+`0.${parameterRule.precision || 0}`}
|
||||
value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
|
||||
onChange={handleNumberInputChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
parameterRule.type === 'boolean' && (
|
||||
<Radio.Group
|
||||
className='w-[200px] flex items-center'
|
||||
value={isNullOrUndefined(renderValue) ? 1 : 0}
|
||||
onChange={handleRadioChange}
|
||||
>
|
||||
<Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
|
||||
<Radio value={0} className='w-[94px]'>False</Radio>
|
||||
</Radio.Group>
|
||||
)
|
||||
}
|
||||
{
|
||||
numberInput && (
|
||||
<input
|
||||
type='number'
|
||||
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
|
||||
value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
|
||||
onChange={handleNumberInputChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
parameterRule.type === 'string' && !parameterRule.options?.length && (
|
||||
<input
|
||||
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
|
||||
value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
|
||||
onChange={handleStringInputChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
parameterRule.type === 'string' && parameterRule?.options?.length && (
|
||||
<SimpleSelect
|
||||
className='!py-0'
|
||||
wrapperClassName='!w-[200px] !h-8'
|
||||
defaultValue={renderValue as string}
|
||||
onSelect={handleSelect}
|
||||
items={parameterRule.options.map(option => ({ value: option, name: option }))}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
parameterRule.type === 'tag' && (
|
||||
<div className='w-[200px]'>
|
||||
<TagInput
|
||||
items={isNullOrUndefined(renderValue) ? [] : (renderValue as string[])}
|
||||
onChange={handleTagChange}
|
||||
customizedConfirmKey='Tab'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ParameterItem
|
||||
Reference in New Issue
Block a user