change language #245 (#246)

### What problem does this PR solve?

change language

Issue link: #245



- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/user-setting/setting-model/api-key-modal/index.tsx

@@ -1,4 +1,5 @@
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { useTranslate } from '@/hooks/commonHooks';
 import { Form, Input, Modal } from 'antd';
 import { useEffect } from 'react';
 
@@ -24,6 +25,7 @@ const ApiKeyModal = ({
   onOk,
 }: IProps) => {
   const [form] = Form.useForm();
+  const { t } = useTranslate('setting');
 
   const handleOk = async () => {
     const ret = await form.validateFields();
@@ -49,7 +51,7 @@ const ApiKeyModal = ({
 
   return (
     <Modal
-      title="Modify"
+      title={t('modify')}
       open={visible}
       onOk={handleOk}
       onCancel={handleCancel}
@@ -67,18 +69,18 @@ const ApiKeyModal = ({
         form={form}
       >
         <Form.Item<FieldType>
-          label="Api-Key"
+          label={t('apiKey')}
           name="api_key"
-          tooltip="The API key can be obtained by registering the corresponding LLM supplier."
-          rules={[{ required: true, message: 'Please input api key!' }]}
+          tooltip={t('apiKeyTip')}
+          rules={[{ required: true, message: t('apiKeyMessage') }]}
         >
           <Input />
         </Form.Item>
         {llmFactory === 'OpenAI' && (
           <Form.Item<FieldType>
-            label="Base-Url"
+            label={t('baseUrl')}
             name="base_url"
-            tooltip="If your API key is from OpenAI, just ignore it. Any other intermediate providers will give this base url with the API key."
+            tooltip={t('baseUrlTip')}
           >
             <Input placeholder="https://api.openai.com/v1" />
           </Form.Item>

web/src/pages/user-setting/setting-model/index.tsx

@@ -1,5 +1,5 @@
 import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
-import { useSetModalState } from '@/hooks/commonHooks';
+import { useSetModalState, useTranslate } from '@/hooks/commonHooks';
 import {
   LlmItem,
   useFetchLlmFactoryListOnMount,
@@ -64,6 +64,7 @@ interface IModelCardProps {
 
 const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
   const { visible, switchVisible } = useSetModalState();
+  const { t } = useTranslate('setting');
 
   const handleApiKeyClick = () => {
     clickApiKey(item.name);
@@ -94,7 +95,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
               </Button>
               <Button onClick={handleShowMoreClick}>
                 <Flex gap={'small'}>
-                  Show more models
+                  {t('showMoreModels')}
                   <MoreModelIcon />
                 </Flex>
               </Button>
@@ -140,6 +141,7 @@ const UserSettingModel = () => {
     hideSystemSettingModal,
     showSystemSettingModal,
   } = useSubmitSystemModelSetting();
+  const { t } = useTranslate('setting');
 
   const handleApiKeyClick = useCallback(
     (llmFactory: string) => {
@@ -155,7 +157,7 @@ const UserSettingModel = () => {
   const items: CollapseProps['items'] = [
     {
       key: '1',
-      label: 'Added models',
+      label: t('addedModels'),
       children: (
         <List
           grid={{ gutter: 16, column: 1 }}
@@ -168,7 +170,7 @@ const UserSettingModel = () => {
     },
     {
       key: '2',
-      label: 'Models to be added',
+      label: t('modelsToBeAdded'),
       children: (
         <List
           grid={{
@@ -193,7 +195,7 @@ const UserSettingModel = () => {
                 </Flex>
                 <Divider></Divider>
                 <Button type="link" onClick={handleAddModel(item.name)}>
-                  Add the model
+                  {t('addTheModel')}
                 </Button>
               </Card>
             </List.Item>
@@ -208,8 +210,8 @@ const UserSettingModel = () => {
       <Spin spinning={loading}>
         <section className={styles.modelWrapper}>
           <SettingTitle
-            title="Model Setting"
-            description="Manage your account settings and preferences here."
+            title={t('model')}
+            description={t('profileDescription')}
             showRightButton
             clickButton={showSystemSettingModal}
           ></SettingTitle>

web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx

@@ -1,5 +1,6 @@
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
 import { LlmModelType } from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/commonHooks';
 import { ISystemModelSettingSavingParams } from '@/hooks/llmHooks';
 import { Form, Modal, Select } from 'antd';
 import { useEffect } from 'react';
@@ -21,6 +22,7 @@ const SystemModelSettingModal = ({
   const [form] = Form.useForm();
   const { systemSetting: initialValues, allOptions } =
     useFetchSystemModelSettingOnMount(visible);
+  const { t } = useTranslate('setting');
 
   const handleOk = async () => {
     const values = await form.validateFields();
@@ -35,7 +37,7 @@ const SystemModelSettingModal = ({
 
   return (
     <Modal
-      title="System Model Settings"
+      title={t('systemModelSettings')}
       open={visible}
       onOk={handleOk}
       onCancel={hideModal}
@@ -43,25 +45,32 @@ const SystemModelSettingModal = ({
       confirmLoading={loading}
     >
       <Form form={form} onValuesChange={onFormLayoutChange} layout={'vertical'}>
-        
-      <Form.Item label="Chat model" name="llm_id" tooltip="The default chat LLM all the newly created knowledgebase will use.">
+        <Form.Item
+          label={t('chatModel')}
+          name="llm_id"
+          tooltip={t('chatModelTip')}
+        >
           <Select options={allOptions[LlmModelType.Chat]} />
         </Form.Item>
-        <Form.Item label="Embedding model" name="embd_id" tooltip="The default embedding model all the newly created knowledgebase will use.">
+        <Form.Item
+          label={t('embeddingModel')}
+          name="embd_id"
+          tooltip={t('embeddingModelTip')}
+        >
           <Select options={allOptions[LlmModelType.Embedding]} />
         </Form.Item>
         <Form.Item
-          label="Img2txt model"
+          label={t('img2txtModel')}
           name="img2txt_id"
-          tooltip="The default multi-module model all the newly created knowledgebase will use. It can describe a picture or video."
+          tooltip={t('img2txtModelTip')}
         >
           <Select options={allOptions[LlmModelType.Image2text]} />
         </Form.Item>
-        
+
         <Form.Item
-          label="Sequence2txt model"
+          label={t('sequence2txtModel')}
           name="asr_id"
-          tooltip="The default ASR model all the newly created knowledgebase will use. Use this model to translate voices to corresponding text."
+          tooltip={t('sequence2txtModelTip')}
         >
           <Select options={allOptions[LlmModelType.Speech2text]} />
         </Form.Item>