Skip to content

Commit

Permalink
fix: model-parameter
Browse files Browse the repository at this point in the history
  • Loading branch information
@zxhlyh
zxhlyh committed Jan 2, 2024
1 parent 4212eee commit 871c0c0
Show file tree
Hide file tree
Showing 12 changed files with 176 additions and 57 deletions.
1 change: 0 additions & 1 deletion web/app/components/app/configuration/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,7 +657,6 @@ const Configuration: FC = () => {
onCompletionParamsChange={(newParams: FormValue) => {
setCompletionParams(newParams)
}}
disabled={!hasSettedApiKey}
/>
<div className='w-[1px] h-[14px] bg-gray-200'></div>
<Button onClick={() => setShowConfirm(true)} className='shrink-0 mr-2 w-[70px] !h-8 !text-[13px] font-medium'>{t('appDebug.operation.resetConfig')}</Button>
Expand Down
8 changes: 4 additions & 4 deletions web/app/components/header/account-setting/model-provider-page/declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,16 @@ export enum ModelStatusEnum {
noPermission = 'no-permission',
}

export const MODEL_STATUS_TEXT = {
[ModelStatusEnum.noConfigure]: {
export const MODEL_STATUS_TEXT: { [k: string]: TypeWithI18N } = {
'no-configure': {
en_US: 'No Configure',
zh_Hans: '未配置凭据',
},
[ModelStatusEnum.quotaExceeded]: {
'quota-exceeded': {
en_US: 'Quota Exceeded',
zh_Hans: '额度不足',
},
[ModelStatusEnum.noPermission]: {
'no-permission': {
en_US: 'No Permission',
zh_Hans: '无使用权限',
},
Expand Down
Empty file added web/app/components/header/account-setting/model-provider-page/model-display/index.tsx
View file
Empty file.
4 changes: 2 additions & 2 deletions web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ const ModelName: FC<ModelNameProps> = ({
`}
>
<div
className='mr-2 truncate'
className='mr-1 truncate'
title={modelItem.label[language]}
>
{modelItem.label[language]}
</div>
{
showModelType && (
showModelType && modelItem.model_type && (
<ModelBadge className={`mr-0.5 ${modelTypeClassName}`}>
{modelTypeFormat(modelItem.model_type)}
</ModelBadge>
Expand Down
61 changes: 52 additions & 9 deletions ...app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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: [],
Expand All @@ -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 {
Expand All @@ -72,6 +81,10 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
{ provider, model: modelId },
)

const hasDeprecated = !currentProvider || !currentModel
const modelDisabled = currentModel?.status !== ModelStatusEnum.active
const disabled = !hasSettedApiKey || hasDeprecated || modelDisabled

const parameterRules = useMemo(() => {
return parameterRulesData?.data || []
}, [parameterRulesData])
Expand Down Expand Up @@ -136,22 +149,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' />
Expand All @@ -165,7 +204,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')}
Expand All @@ -176,14 +215,18 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
onSelect={handleChangeModel}
/>
</div>
<div className='my-5 h-[1px] bg-gray-100' />
{
!!parameterRules.length && (
<div className='my-5 h-[1px] bg-gray-100' />
)
}
{
isLoading && (
<Loading />
)
}
{
!isLoading && (
!isLoading && !!parameterRules.length && (
[
...parameterRules,
...(isAdvancedMode ? [stopParameerRule] : []),
Expand Down
46 changes: 46 additions & 0 deletions ...ts/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import ModelIcon from '../model-icon'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { useProviderContext } from '@/context/provider-context'
import TooltipPlus from '@/app/components/base/tooltip-plus'

type ModelTriggerProps = {
modelName: string
providerName: string
className?: string
}
const ModelTrigger: FC<ModelTriggerProps> = ({
modelName,
providerName,
className,
}) => {
const { t } = useTranslation()
const { modelProviders } = useProviderContext()
const currentProvider = modelProviders.find(provider => provider.provider === providerName)

return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
${className}
`}
>
<ModelIcon
className='shrink-0 mr-1.5'
provider={currentProvider}
modelName={modelName}
/>
<div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
{modelName}
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<TooltipPlus popupContent={t('common.modelProvider.deprecated')}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
</div>
</div>
)
}

export default ModelTrigger
72 changes: 36 additions & 36 deletions ...app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import {
ModelFeatureTextEnum,
} from '../declarations'
import {
MagicBox,
// MagicBox,
MagicEyes,
MagicWand,
Robot,
// MagicWand,
// Robot,
} from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
import TooltipPlus from '@/app/components/base/tooltip-plus'

Expand All @@ -23,41 +23,41 @@ const FeatureIcon: FC<FeatureIconProps> = ({
}) => {
const { t } = useTranslation()

if (feature === ModelFeatureEnum.agentThought) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<Robot className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.agentThought) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <Robot className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }

if (feature === ModelFeatureEnum.toolCall) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<MagicWand className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.toolCall) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <MagicWand className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }

if (feature === ModelFeatureEnum.multiToolCall) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<MagicBox className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.multiToolCall) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <MagicBox className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }

if (feature === ModelFeatureEnum.vision) {
return (
Expand Down
10 changes: 10 additions & 0 deletions web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type {
import { useCurrentProviderAndModel } from '../hooks'
import ModelTrigger from './model-trigger'
import EmptyTrigger from './empty-trigger'
import DeprecatedModelTrigger from './deprecated-model-trigger'
import Popup from './popup'
import {
PortalToFollowElem,
Expand Down Expand Up @@ -78,6 +79,15 @@ const ModelSelector: FC<ModelSelectorProps> = ({
}
{
!currentModel && (
<DeprecatedModelTrigger
modelName={defaultModel?.model || ''}
providerName={defaultModel?.provider || ''}
className={triggerClassName}
/>
)
}
{
!defaultModel && (
<EmptyTrigger
open={open}
className={triggerClassName}
Expand Down
Loading

0 comments on commit 871c0c0

Please sign in to comment.