support vertex ai with api key

Author: arvinxx

src/app/(backend)/webapi/chat/vertexai/route.ts

@@ -1,15 +1,26 @@
+import { checkAuth } from '@/app/(backend)/middleware/auth';
 import { AgentRuntime, ModelProvider } from '@/libs/agent-runtime';
 import { LobeVertexAI } from '@/libs/agent-runtime/vertexai';
 import { safeParseJSON } from '@/utils/safeParseJSON';
 
 import { POST as UniverseRoute } from '../[provider]/route';
 
-export const POST = async (req: Request) =>
+// due to the Chinese region does not support accessing Google
+// we need to use proxy to access it
+// refs: https://github.com/google/generative-ai-js/issues/29#issuecomment-1866246513
+// if (process.env.HTTP_PROXY_URL) {
+//   const { setGlobalDispatcher, ProxyAgent } = require('undici');
+//
+//   setGlobalDispatcher(new ProxyAgent({ uri: process.env.HTTP_PROXY_URL }));
+// }
+
+export const POST = checkAuth(async (req: Request, { jwtPayload }) =>
   UniverseRoute(req, {
     createRuntime: () => {
       const credentialsContent = process.env.VERTEXAI_CREDENTIALS ?? undefined;
 
-      const googleAuthOptions = credentialsContent ? safeParseJSON(credentialsContent) : {};
+      const googleAuthOptions =
+        jwtPayload.apiKey ?? (credentialsContent ? safeParseJSON(credentialsContent) : {});
 
       const instance = LobeVertexAI.initFromVertexAI({
         googleAuthOptions: googleAuthOptions,
@@ -20,4 +31,5 @@ export const POST = async (req: Request) =>
       return new AgentRuntime(instance);
     },
     params: Promise.resolve({ provider: ModelProvider.VertexAI }),
-  });
+  }),
+);

src/app/[variants]/(main)/settings/provider/(detail)/huggingface/page.tsx

@@ -43,15 +43,15 @@ const useProviderCard = (): ProviderItem => {
         ) : (
           <FormPassword
             autoComplete={'new-password'}
-            placeholder={t(`huggingface.accessToken.placeholder`)}
+            placeholder={t('huggingface.accessToken.placeholder')}
           />
         ),
         desc: (
           <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
-            {t(`huggingface.accessToken.desc`)}
+            {t('huggingface.accessToken.desc')}
           </Markdown>
         ),
-        label: t(`huggingface.accessToken.title`),
+        label: t('huggingface.accessToken.title'),
         name: [KeyVaultsConfigKey, LLMProviderApiTokenKey],
       },
     ],

src/app/[variants]/(main)/settings/provider/(detail)/vertexai/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Markdown } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+
+import { FormPassword } from '@/components/FormInput';
+import { VertexAIProviderCard } from '@/config/modelProviders';
+import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../../const';
+import { SkeletonInput } from '../../features/ProviderConfig';
+import { ProviderItem } from '../../type';
+import ProviderDetail from '../[id]';
+
+const useStyles = createStyles(({ css, token }) => ({
+  markdown: css`
+    p {
+      color: ${token.colorTextDescription} !important;
+    }
+  `,
+  tip: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const providerKey: GlobalLLMProviderKey = 'vertexai';
+
+// Same as OpenAIProvider, but replace API Key with HuggingFace Access Token
+const useProviderCard = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+  const { styles } = useStyles();
+  const isLoading = useAiInfraStore(aiProviderSelectors.isAiProviderConfigLoading(providerKey));
+
+  return {
+    ...VertexAIProviderCard,
+    apiKeyItems: [
+      {
+        children: isLoading ? (
+          <SkeletonInput />
+        ) : (
+          <FormPassword
+            autoComplete={'new-password'}
+            placeholder={t('vertexai.apiKey.placeholder')}
+          />
+        ),
+        desc: (
+          <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
+            {t('vertexai.apiKey.desc')}
+          </Markdown>
+        ),
+        label: t('vertexai.apiKey.title'),
+        name: [KeyVaultsConfigKey, LLMProviderApiTokenKey],
+      },
+    ],
+  };
+};
+
+const Page = () => {
+  const card = useProviderCard();
+
+  return <ProviderDetail {...card} />;
+};
+
+export default Page;

src/config/modelProviders/vertexai.ts

@@ -7,11 +7,10 @@ const VertexAI: ModelProviderCard = {
   description:
     'Google 的 Gemini 系列是其最先进、通用的 AI模型，由 Google DeepMind 打造，专为多模态设计，支持文本、代码、图像、音频和视频的无缝理解与处理。适用于从数据中心到移动设备的多种环境，极大提升了AI模型的效率与应用广泛性。',
   id: 'vertexai',
-  modelsUrl: 'https://cloud.google.com/vertex-ai/generative-ai/docs/learn/model-versioning',
+  modelsUrl: 'https://console.cloud.google.com/vertex-ai/model-garden',
   name: 'VertexAI',
   settings: {
-    showApiKey: false,
-    // showChecker: false,
+    disableBrowserRequest: true,
     smoothing: {
       speed: 2,
       text: true,

src/locales/default/modelProvider.ts

@@ -325,6 +325,13 @@ export default {
     tooltip: '更新服务商基础配置',
     updateSuccess: '更新成功',
   },
+  vertexai: {
+    apiKey: {
+      desc: '填入你的 Vertex Ai Keys',
+      placeholder: `{ "type": "service_account", "project_id": "xxx", "private_key_id": ... }`,
+      title: 'Vertex AI Keys',
+    },
+  },
   zeroone: {
     title: '01.AI 零一万物',
   },

src/types/user/settings/keyVaults.ts

@@ -68,10 +68,10 @@ export interface UserKeyVaults {
   tencentcloud?: OpenAICompatibleKeyVault;
   togetherai?: OpenAICompatibleKeyVault;
   upstage?: OpenAICompatibleKeyVault;
+  vertexai?: OpenAICompatibleKeyVault;
   vllm?: OpenAICompatibleKeyVault;
   volcengine?: OpenAICompatibleKeyVault;
   wenxin?: OpenAICompatibleKeyVault;
-  vertexai?: undefined;
   xai?: OpenAICompatibleKeyVault;
   zeroone?: OpenAICompatibleKeyVault;
   zhipu?: OpenAICompatibleKeyVault;