add support for Google Cloud (#2175)

### What problem does this PR solve?

#1853 add support for Google Cloud

### Type of change


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

---------

Co-authored-by: Zhedong Cen <cenzhedong2@126.com>

web/src/locales/en.ts

@@ -499,6 +499,7 @@ The above is the content you need to summarize.`,
       upgrade: 'Upgrade',
       addLlmTitle: 'Add LLM',
       modelName: 'Model name',
+      modelID: 'Model ID',
       modelUid: 'Model UID',
       modelNameMessage: 'Please input your model name!',
       modelType: 'Model type',
@@ -551,6 +552,15 @@ The above is the content you need to summarize.`,
       addFishAudioRefID: 'FishAudio Refrence ID',
       addFishAudioRefIDMessage:
         'Please input the Reference ID (leave blank to use the default model).',
+      GoogleModelIDMessage: 'Please input your model ID!',
+      addGoogleProjectID: 'Project ID',
+      GoogleProjectIDMessage: 'Please input your Project ID',
+      addGoogleServiceAccountKey:
+        'Service Account Key(Leave blank if you use Application Default Credentials)',
+      GoogleServiceAccountKeyMessage:
+        'Please input Google Cloud Service Account Key in base64 format',
+      addGoogleRegion: 'Google Cloud Region',
+      GoogleRegionMessage: 'Please input Google Cloud Region',
     },
     message: {
       registered: 'Registered!',

web/src/locales/zh-traditional.ts

@@ -461,6 +461,7 @@ export default {
       upgrade: '升級',
       addLlmTitle: '添加Llm',
       modelName: '模型名稱',
+      modelID: '模型ID',
       modelUid: '模型uid',
       modelType: '模型類型',
       addLlmBaseUrl: '基礎 Url',
@@ -511,6 +512,15 @@ export default {
       addFishAudioAKMessage: '請輸入 API KEY',
       addFishAudioRefID: 'FishAudio Refrence ID',
       addFishAudioRefIDMessage: '請輸入引用模型的ID（留空表示使用默認模型）',
+      GoogleModelIDMessage: '請輸入 model ID!',
+      addGoogleProjectID: 'Project ID',
+      GoogleProjectIDMessage: '請輸入 Project ID',
+      addGoogleServiceAccountKey:
+        'Service Account Key(Leave blank if you use Application Default Credentials)',
+      GoogleServiceAccountKeyMessage:
+        '請輸入 Google Cloud Service Account Key in base64 format',
+      addGoogleRegion: 'Google Cloud 區域',
+      GoogleRegionMessage: '請輸入 Google Cloud 區域',
     },
     message: {
       registered: '註冊成功',

web/src/locales/zh.ts

@@ -478,6 +478,7 @@ export default {
       upgrade: '升级',
       addLlmTitle: '添加 LLM',
       modelName: '模型名称',
+      modelID: '模型ID',
       modelUid: '模型UID',
       modelType: '模型类型',
       addLlmBaseUrl: '基础 Url',
@@ -528,6 +529,15 @@ export default {
       FishAudioAKMessage: '请输入 API KEY',
       addFishAudioRefID: 'FishAudio Refrence ID',
       FishAudioRefIDMessage: '请输入引用模型的ID（留空表示使用默认模型）',
+      GoogleModelIDMessage: '请输入 model ID!',
+      addGoogleProjectID: 'Project ID',
+      GoogleProjectIDMessage: '请输入 Project ID',
+      addGoogleServiceAccountKey:
+        'Service Account Key(Leave blank if you use Application Default Credentials)',
+      GoogleServiceAccountKeyMessage:
+        '请输入 Google Cloud Service Account Key in base64 format',
+      addGoogleRegion: 'Google Cloud 区域',
+      GoogleRegionMessage: '请输入 Google Cloud 区域',
     },
     message: {
       registered: '注册成功',

web/src/pages/user-setting/setting-model/constant.ts

@@ -39,6 +39,7 @@ export const IconMap = {
   'Tencent Cloud': 'tencent-cloud',
   Anthropic: 'anthropic',
   'Voyage AI': 'voyage',
+  'Google Cloud': 'google-cloud',
 };
 
 export const BedrockRegionList = [

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

@@ -0,0 +1,95 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { IAddLlmRequestBody } from '@/interfaces/request/llm';
+import { Form, Input, Modal, Select } from 'antd';
+
+type FieldType = IAddLlmRequestBody & {
+  google_project_id: string;
+  google_region: string;
+  google_service_account_key: string;
+};
+
+const { Option } = Select;
+
+const GoogleModal = ({
+  visible,
+  hideModal,
+  onOk,
+  loading,
+  llmFactory,
+}: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
+  const [form] = Form.useForm<FieldType>();
+
+  const { t } = useTranslate('setting');
+  const handleOk = async () => {
+    const values = await form.validateFields();
+
+    const data = {
+      ...values,
+      llm_factory: llmFactory,
+    };
+
+    onOk?.(data);
+  };
+
+  return (
+    <Modal
+      title={t('addLlmTitle', { name: llmFactory })}
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      okButtonProps={{ loading }}
+    >
+      <Form
+        name="basic"
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+        layout={'vertical'}
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label={t('modelType')}
+          name="model_type"
+          initialValue={'chat'}
+          rules={[{ required: true, message: t('modelTypeMessage') }]}
+        >
+          <Select placeholder={t('modelTypeMessage')}>
+            <Option value="chat">chat</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('modelID')}
+          name="llm_name"
+          rules={[{ required: true, message: t('GoogleModelIDMessage') }]}
+        >
+          <Input placeholder={t('GoogleModelIDMessage')} />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('addGoogleProjectID')}
+          name="google_project_id"
+          rules={[{ required: true, message: t('GoogleProjectIDMessage') }]}
+        >
+          <Input placeholder={t('GoogleProjectIDMessage')} />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('addGoogleRegion')}
+          name="google_region"
+          rules={[{ required: true, message: t('GoogleRegionMessage') }]}
+        >
+          <Input placeholder={t('GoogleRegionMessage')} />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('addGoogleServiceAccountKey')}
+          name="google_service_account_key"
+          rules={[
+            { required: true, message: t('GoogleServiceAccountKeyMessage') },
+          ]}
+        >
+          <Input placeholder={t('GoogleServiceAccountKeyMessage')} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default GoogleModal;

web/src/pages/user-setting/setting-model/hooks.ts

@@ -298,6 +298,33 @@ export const useSubmitFishAudio = () => {
   };
 };
 
+export const useSubmitGoogle = () => {
+  const { addLlm, loading } = useAddLlm();
+  const {
+    visible: GoogleAddingVisible,
+    hideModal: hideGoogleAddingModal,
+    showModal: showGoogleAddingModal,
+  } = useSetModalState();
+
+  const onGoogleAddingOk = useCallback(
+    async (payload: IAddLlmRequestBody) => {
+      const ret = await addLlm(payload);
+      if (ret === 0) {
+        hideGoogleAddingModal();
+      }
+    },
+    [hideGoogleAddingModal, addLlm],
+  );
+
+  return {
+    GoogleAddingLoading: loading,
+    onGoogleAddingOk,
+    GoogleAddingVisible,
+    hideGoogleAddingModal,
+    showGoogleAddingModal,
+  };
+};
+
 export const useSubmitBedrock = () => {
   const { addLlm, loading } = useAddLlm();
   const {

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

@@ -32,11 +32,13 @@ import ApiKeyModal from './api-key-modal';
 import BedrockModal from './bedrock-modal';
 import { IconMap } from './constant';
 import FishAudioModal from './fish-audio-modal';
+import GoogleModal from './google-modal';
 import {
   useHandleDeleteLlm,
   useSubmitApiKey,
   useSubmitBedrock,
   useSubmitFishAudio,
+  useSubmitGoogle,
   useSubmitHunyuan,
   useSubmitOllama,
   useSubmitSpark,
@@ -104,7 +106,8 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
                 item.name === 'XunFei Spark' ||
                 item.name === 'BaiduYiyan' ||
                 item.name === 'Fish Audio' ||
-                item.name === 'Tencent Cloud'
+                item.name === 'Tencent Cloud' ||
+                item.name === 'Google Cloud'
                   ? t('addTheModel')
                   : 'API-Key'}
                 <SettingOutlined />
@@ -186,6 +189,14 @@ const UserSettingModel = () => {
     HunyuanAddingLoading,
   } = useSubmitHunyuan();
 
+  const {
+    GoogleAddingVisible,
+    hideGoogleAddingModal,
+    showGoogleAddingModal,
+    onGoogleAddingOk,
+    GoogleAddingLoading,
+  } = useSubmitGoogle();
+
   const {
     TencentCloudAddingVisible,
     hideTencentCloudAddingModal,
@@ -235,6 +246,7 @@ const UserSettingModel = () => {
       BaiduYiyan: showyiyanAddingModal,
       'Fish Audio': showFishAudioAddingModal,
       'Tencent Cloud': showTencentCloudAddingModal,
+      'Google Cloud': showGoogleAddingModal,
     }),
     [
       showBedrockAddingModal,
@@ -244,6 +256,7 @@ const UserSettingModel = () => {
       showSparkAddingModal,
       showyiyanAddingModal,
       showFishAudioAddingModal,
+      showGoogleAddingModal,
     ],
   );
 
@@ -364,6 +377,13 @@ const UserSettingModel = () => {
         loading={HunyuanAddingLoading}
         llmFactory={'Tencent Hunyuan'}
       ></HunyuanModal>
+      <GoogleModal
+        visible={GoogleAddingVisible}
+        hideModal={hideGoogleAddingModal}
+        onOk={onGoogleAddingOk}
+        loading={GoogleAddingLoading}
+        llmFactory={'Google Cloud'}
+      ></GoogleModal>
       <TencentCloudModal
         visible={TencentCloudAddingVisible}
         hideModal={hideTencentCloudAddingModal}