Feat/provider add zhipuai (#1192)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/app/configuration/config-model/index.tsx

@@ -213,7 +213,7 @@ const ConfigModel: FC<IConfigModelProps> = ({
 
   const handleParamChange = (key: string, value: number) => {
     const currParamsRule = getAllParams()[provider]?.[modelId]
-    let notOutRangeValue = parseFloat(value.toFixed(2))
+    let notOutRangeValue = parseFloat((value || 0).toFixed(2))
     notOutRangeValue = Math.max(currParamsRule[key].min, notOutRangeValue)
     notOutRangeValue = Math.min(currParamsRule[key].max, notOutRangeValue)
 

web/app/components/app/configuration/config-model/param-item.tsx

@@ -1,9 +1,20 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'
 
+export const getFitPrecisionValue = (num: number, precision: number | null) => {
+  if (!precision || !(`${num}`).includes('.'))
+    return num
+
+  const currNumPrecision = (`${num}`).split('.')[1].length
+  if (currNumPrecision > precision)
+    return parseFloat(num.toFixed(precision))
+
+  return num
+}
+
 export type IParamIteProps = {
   id: string
   name: string
@@ -12,10 +23,26 @@ export type IParamIteProps = {
   step?: number
   min?: number
   max: number
+  precision: number | null
   onChange: (key: string, value: number) => void
 }
 
-const ParamIte: FC<IParamIteProps> = ({ id, name, tip, step = 0.1, min = 0, max, value, onChange }) => {
+const TIMES_TEMPLATE = '1000000000000'
+const ParamItem: FC<IParamIteProps> = ({ id, name, tip, step = 0.1, min = 0, max, precision, value, onChange }) => {
+  const getToIntTimes = (num: number) => {
+    if (precision)
+      return parseInt(TIMES_TEMPLATE.slice(0, precision + 1), 10)
+    if (num < 5)
+      return 10
+    return 1
+  }
+
+  const times = getToIntTimes(max)
+
+  useEffect(() => {
+    if (precision)
+      onChange(id, getFitPrecisionValue(value, precision))
+  }, [value, precision])
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center">
@@ -29,17 +56,21 @@ const ParamIte: FC<IParamIteProps> = ({ id, name, tip, step = 0.1, min = 0, max,
       </div>
       <div className="flex items-center">
         <div className="mr-4 w-[120px]">
-          <Slider value={max < 5 ? value * 10 : value} min={min < 0 ? min * 10 : min} max={max < 5 ? max * 10 : max} onChange={value => onChange(id, value / (max < 5 ? 10 : 1))} />
+          <Slider value={value * times} min={min * times} max={max * times} onChange={(value) => {
+            onChange(id, value / times)
+          }} />
         </div>
         <input type="number" min={min} max={max} step={step} className="block w-[64px] h-9 leading-9 rounded-lg border-0 pl-1 pl py-1.5 bg-gray-50 text-gray-900  placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600" value={value} onChange={(e) => {
-          const value = parseFloat(e.target.value)
-          if (value < min || value > max)
-            return
+          let value = getFitPrecisionValue(isNaN(parseFloat(e.target.value)) ? min : parseFloat(e.target.value), precision)
+          if (value < min)
+            value = min
 
+          if (value > max)
+            value = max
           onChange(id, value)
         }} />
       </div>
     </div>
   )
 }
-export default React.memo(ParamIte)
+export default React.memo(ParamItem)

web/app/components/base/icons/src/public/llm/Zhipuai.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Zhipuai.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Zhipuai'
+
+export default Icon

web/app/components/base/icons/src/public/llm/ZhipuaiText.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ZhipuaiText.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ZhipuaiText'
+
+export default Icon

web/app/components/base/icons/src/public/llm/ZhipuaiTextCn.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ZhipuaiTextCn.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ZhipuaiTextCn'
+
+export default Icon

web/app/components/base/icons/src/public/llm/index.ts

@@ -29,3 +29,6 @@ export { default as ReplicateText } from './ReplicateText'
 export { default as Replicate } from './Replicate'
 export { default as XorbitsInferenceText } from './XorbitsInferenceText'
 export { default as XorbitsInference } from './XorbitsInference'
+export { default as ZhipuaiTextCn } from './ZhipuaiTextCn'
+export { default as ZhipuaiText } from './ZhipuaiText'
+export { default as Zhipuai } from './Zhipuai'

web/app/components/header/account-setting/model-page/configs/index.ts

@@ -11,6 +11,7 @@ import chatglm from './chatglm'
 import xinference from './xinference'
 import openllm from './openllm'
 import localai from './localai'
+import zhipuai from './zhipuai'
 
 export default {
   openai,
@@ -26,4 +27,5 @@ export default {
   xinference,
   openllm,
   localai,
+  zhipuai,
 }

web/app/components/header/account-setting/model-page/configs/zhipuai.tsx

@@ -0,0 +1,55 @@
+import { ProviderEnum } from '../declarations'
+import type { ProviderConfig } from '../declarations'
+import { Zhipuai, ZhipuaiText, ZhipuaiTextCn } from '@/app/components/base/icons/src/public/llm'
+
+const config: ProviderConfig = {
+  selector: {
+    name: {
+      'en': 'ZHIPU AI',
+      'zh-Hans': '智谱 AI',
+    },
+    icon: <Zhipuai className='w-full h-full' />,
+  },
+  item: {
+    key: ProviderEnum.zhipuai,
+    titleIcon: {
+      'en': <ZhipuaiText className='-ml-1 h-7' />,
+      'zh-Hans': <ZhipuaiTextCn className='h-8' />,
+    },
+  },
+  modal: {
+    key: ProviderEnum.zhipuai,
+    title: {
+      'en': 'ZHIPU AI',
+      'zh-Hans': '智谱 AI',
+    },
+    icon: <Zhipuai className='w-6 h-6' />,
+    link: {
+      href: 'https://open.bigmodel.cn/usercenter/apikeys',
+      label: {
+        'en': 'Get your API key from ZHIPU AI',
+        'zh-Hans': '从智谱 AI 获取 API Key',
+      },
+    },
+    validateKeys: [
+      'api_key',
+    ],
+    fields: [
+      {
+        type: 'text',
+        key: 'api_key',
+        required: true,
+        label: {
+          'en': 'APIKey',
+          'zh-Hans': 'APIKey',
+        },
+        placeholder: {
+          'en': 'Enter your APIKey here',
+          'zh-Hans': '在此输入您的 APIKey',
+        },
+      },
+    ],
+  },
+}
+
+export default config

web/app/components/header/account-setting/model-page/declarations.ts

@@ -42,6 +42,7 @@ export enum ProviderEnum {
   'xinference' = 'xinference',
   'openllm' = 'openllm',
   'localai' = 'localai',
+  'zhipuai' = 'zhipuai',
 }
 
 export type ProviderConfigItem = {

web/app/components/header/account-setting/model-page/index.tsx

@@ -78,8 +78,9 @@ const ModelPage = () => {
       config.azure_openai,
       config.replicate,
       config.huggingface_hub,
-      config.minimax,
+      config.zhipuai,
       config.spark,
+      config.minimax,
       config.tongyi,
       config.wenxin,
       config.chatglm,
@@ -91,8 +92,9 @@ const ModelPage = () => {
   else {
     modelList = [
       config.huggingface_hub,
-      config.minimax,
+      config.zhipuai,
       config.spark,
+      config.minimax,
       config.azure_openai,
       config.replicate,
       config.tongyi,

web/app/components/header/account-setting/model-page/model-item/FreeQuota.tsx

@@ -19,6 +19,10 @@ const TIP_MAP: { [k: string]: TypeWithI18N } = {
     'en': 'Earn 3 million tokens for free',
     'zh-Hans': '免费获取 300 万个 token',
   },
+  [ProviderEnumValue.zhipuai]: {
+    'en': 'Earn 10 million tokens for free',
+    'zh-Hans': '免费获取 1000 万个 token',
+  },
 }
 type FreeQuotaProps = {
   modelItem: ProviderConfigItem

web/app/components/header/account-setting/model-page/model-item/Setting.tsx

@@ -34,7 +34,7 @@ const Setting: FC<SettingProps> = ({
   return (
     <div className='flex items-center'>
       {
-        (modelItem.key === ProviderEnum.minimax || modelItem.key === ProviderEnum.spark) && systemFree && !systemFree?.is_valid && !IS_CE_EDITION && locale === 'zh-Hans' && (
+        (modelItem.key === ProviderEnum.minimax || modelItem.key === ProviderEnum.spark || modelItem.key === ProviderEnum.zhipuai) && systemFree && !systemFree?.is_valid && !IS_CE_EDITION && locale === 'zh-Hans' && (
           <FreeQuota
             modelItem={modelItem}
             onUpdate={onUpdate}