Feat/model providers (#951)

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

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import type {
   BackendModel,
   FormValue,
@@ -30,23 +31,13 @@ import { ModelType } from '@/app/components/header/account-setting/model-page/de
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
+import I18n from '@/context/i18n'
 
 const MODEL_CARD_LIST = [
   config.openai,
   config.anthropic,
 ]
 
-const MODEL_LIST = [
-  config.azure_openai,
-  config.replicate,
-  config.huggingface_hub,
-  config.minimax,
-  config.spark,
-  config.tongyi,
-  config.wenxin,
-  config.chatglm,
-]
-
 const titleClassName = `
 flex items-center h-9 text-sm font-medium text-gray-900
 `
@@ -61,6 +52,7 @@ type DeleteModel = {
 
 const ModelPage = () => {
   const { t } = useTranslation()
+  const { locale } = useContext(I18n)
   const {
     updateModelList,
     embeddingsDefaultModel,
@@ -79,6 +71,33 @@ const ModelPage = () => {
   const [deleteModel, setDeleteModel] = useState<DeleteModel & { providerKey: ProviderEnum }>()
   const [modalMode, setModalMode] = useState('add')
 
+  let modelList = []
+
+  if (locale === 'en') {
+    modelList = [
+      config.azure_openai,
+      config.replicate,
+      config.huggingface_hub,
+      config.minimax,
+      config.spark,
+      config.tongyi,
+      config.wenxin,
+      config.chatglm,
+    ]
+  }
+  else {
+    modelList = [
+      config.huggingface_hub,
+      config.minimax,
+      config.spark,
+      config.azure_openai,
+      config.replicate,
+      config.tongyi,
+      config.wenxin,
+      config.chatglm,
+    ]
+  }
+
   const handleOpenModal = (newModelModalConfig: ProviderConfigModal | undefined, editValue?: FormValue) => {
     if (newModelModalConfig) {
       setShowModal(true)
@@ -284,7 +303,7 @@ const ModelPage = () => {
         }
       </div>
       {
-        MODEL_LIST.slice(0, showMoreModel ? MODEL_LIST.length : 3).map((model, index) => (
+        modelList.slice(0, showMoreModel ? modelList.length : 3).map((model, index) => (
           <ModelItem
             key={index}
             modelItem={model.item}

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

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { formatNumber } from '@/utils/format'
 
 type QuotaCardProps = {
   remainTokens: number
@@ -17,7 +18,7 @@ const QuotaCard: FC<QuotaCardProps> = ({
           {t('common.modelProvider.item.freeQuota')}
         </div>
         <div className='flex items-center h-5 text-sm font-medium text-gray-700'>
-          {remainTokens}
+          {formatNumber(remainTokens)}
           <div className='ml-1 font-normal'>Tokens</div>
         </div>
       </div>