estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

frontend for model runtime (#1861)

Browse Source 
Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
zxhlyh
2024-01-03 00:05:08 +08:00
committed by GitHub
parent d069c668f8
commit d70d61b1cb
29 changed files with 1442 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
View File

@@ -1,5 +1,5 @@
import type { FC } from 'react'
import { useEffect, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import type {
@@ -7,10 +7,17 @@ import type {
FormValue,
ModelParameterRule,
} from '../declarations'
import {
MODEL_STATUS_TEXT,
ModelStatusEnum,
} from '../declarations'
import ModelIcon from '../model-icon'
import ModelName from '../model-name'
import ModelSelector from '../model-selector'
import { useTextGenerationCurrentProviderAndModelAndModelList } from '../hooks'
import {
useLanguage,
useTextGenerationCurrentProviderAndModelAndModelList,
} from '../hooks'
import ParameterItem from './parameter-item'
import type { ParameterValue } from './parameter-item'
import {
@@ -23,6 +30,8 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alert
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
import { fetchModelParameterRules } from '@/service/common'
import Loading from '@/app/components/base/loading'
import { useProviderContext } from '@/context/provider-context'
import TooltipPlus from '@/app/components/base/tooltip-plus'
type ModelParameterModalProps = {
isAdvancedMode: boolean
@@ -32,7 +41,6 @@ type ModelParameterModalProps = {
setModel: (model: { modelId: string; provider: string; mode?: string; features: string[] }) => void
completionParams: FormValue
onCompletionParamsChange: (newParams: FormValue) => void
disabled: boolean
}
const stopParameerRule: ModelParameterRule = {
default: [],
@@ -42,7 +50,7 @@ const stopParameerRule: ModelParameterRule = {
},
label: {
en_US: 'Stop sequences',
zh_Hans: '停止序列 stop_sequences',
zh_Hans: '停止序列',
},
name: 'stop',
required: false,
@@ -59,9 +67,10 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
setModel,
completionParams,
onCompletionParamsChange,
disabled,
}) => {
const { t } = useTranslation()
const language = useLanguage()
const { hasSettedApiKey, modelProviders } = useProviderContext()
const [open, setOpen] = useState(false)
const { data: parameterRulesData, isLoading } = useSWR(`/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`, fetchModelParameterRules)
const {
@@ -72,7 +81,13 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
{ provider, model: modelId },
)
const parameterRules = parameterRulesData?.data || []
const hasDeprecated = !currentProvider || !currentModel
const modelDisabled = currentModel?.status !== ModelStatusEnum.active
const disabled = !hasSettedApiKey || hasDeprecated || modelDisabled
const parameterRules = useMemo(() => {
return parameterRulesData?.data || []
}, [parameterRulesData])
const handleParamChange = (key: string, value: ParameterValue) => {
onCompletionParamsChange({
@@ -92,21 +107,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
})
}
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 }
@@ -122,6 +122,22 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
}
}
const handleInitialParams = () => {
if (parameterRules.length) {
const newCompletionParams = { ...completionParams }
Object.keys(newCompletionParams).forEach((key) => {
if (!parameterRules.find(item => item.name === key))
delete newCompletionParams[key]
})
onCompletionParamsChange(newCompletionParams)
}
}
useEffect(() => {
handleInitialParams()
}, [parameterRules])
return (
<PortalToFollowElem
open={open}
@@ -149,22 +165,48 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
/>
)
}
{
!currentProvider && (
<ModelIcon
className='mr-1.5 !w-5 !h-5'
provider={modelProviders.find(item => item.provider === provider)}
modelName={modelId}
/>
)
}
{
currentModel && (
<ModelName
className='mr-1.5 text-gray-900'
modelItem={currentModel}
showMode={isAdvancedMode}
showMode
modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
showFeatures={isAdvancedMode}
showFeatures
featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
/>
)
}
{
!currentModel && (
<div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
{modelId}
</div>
)
}
{
disabled
? (
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
<TooltipPlus
popupContent={
hasDeprecated
? t('common.modelProvider.deprecated')
: (modelDisabled && currentModel)
? MODEL_STATUS_TEXT[currentModel.status as string][language]
: ''
}
>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<SlidersH className='w-4 h-4 text-indigo-600' />
@@ -178,7 +220,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
<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='max-h-[480px] px-10 pt-4 pb-8 overflow-y-auto'>
<div className='flex items-center justify-between h-8'>
<div className='text-sm font-medium text-gray-900'>
{t('common.modelProvider.model')}
@@ -189,14 +231,18 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
onSelect={handleChangeModel}
/>
</div>
<div className='my-5 h-[1px] bg-gray-100' />
{
isLoading && (
<Loading />
!!parameterRules.length && (
<div className='my-5 h-[1px] bg-gray-100' />
)
}
{
!isLoading && (
isLoading && (
<div className='mt-5'><Loading /></div>
)
}
{
!isLoading && !!parameterRules.length && (
[
...parameterRules,
...(isAdvancedMode ? [stopParameerRule] : []),

64
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
View File

@@ -29,7 +29,37 @@ const ParameterItem: FC<ParameterItemProps> = ({
const language = useLanguage()
const [localValue, setLocalValue] = useState(value)
const mergedValue = isNullOrUndefined(value) ? localValue : value
const renderValue = mergedValue === undefined ? parameterRule.default : mergedValue
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')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
if (parameterRule.type === 'tag')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
return defaultValue
}
const renderValue = isNullOrUndefined(mergedValue) ? getDefaultValue() : mergedValue
const handleChange = (v: ParameterValue) => {
setLocalValue(v)
@@ -73,22 +103,8 @@ const ParameterItem: FC<ParameterItemProps> = ({
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 : []
}
if (isNullOrUndefined(localValue))
assignValue = getDefaultValue()
onSwitch(checked, assignValue)
}
@@ -145,7 +161,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
<div className='flex items-center'>
<Slider
className='w-[120px]'
value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
value={renderValue as number}
min={parameterRule.min}
max={parameterRule.max}
step={+`0.${parameterRule.precision || 0}`}
@@ -157,7 +173,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
max={parameterRule.max}
min={parameterRule.min}
step={+`0.${parameterRule.precision || 0}`}
value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
value={renderValue as string}
onChange={handleNumberInputChange}
/>
</div>
@@ -167,7 +183,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
parameterRule.type === 'boolean' && (
<Radio.Group
className='w-[200px] flex items-center'
value={isNullOrUndefined(renderValue) ? 1 : 0}
value={renderValue ? 1 : 0}
onChange={handleRadioChange}
>
<Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
@@ -180,7 +196,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
<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}
value={renderValue as string}
onChange={handleNumberInputChange}
/>
)
@@ -189,13 +205,13 @@ const ParameterItem: FC<ParameterItemProps> = ({
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}
value={renderValue as string}
onChange={handleStringInputChange}
/>
)
}
{
parameterRule.type === 'string' && parameterRule?.options?.length && (
parameterRule.type === 'string' && !!parameterRule?.options?.length && (
<SimpleSelect
className='!py-0'
wrapperClassName='!w-[200px] !h-8'
@@ -209,7 +225,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
parameterRule.type === 'tag' && (
<div className='w-[200px]'>
<TagInput
items={isNullOrUndefined(renderValue) ? [] : (renderValue as string[])}
items={renderValue as string[]}
onChange={handleTagChange}
customizedConfirmKey='Tab'
/>