✨ feat: Support Cloudflare Workers AI

.env.example

@@ -112,6 +112,12 @@ OPENAI_API_KEY=sk-xxxxxxxxx
 
 # QWEN_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
+### Cloudflare Workers AI  ####
+
+# CLOUDFLARE_ACCOUNT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+# CLOUDFLARE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
 ########################################
 ############ Market Service ############
 ########################################

src/app/(main)/chat/(workspace)/_layout/Desktop/index.tsx

@@ -2,8 +2,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
-import Inspector from './Portal';
 import HotKeys from './HotKeys';
+import Inspector from './Portal';
 import TopicPanel from './TopicPanel';
 
 const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {

src/app/(main)/settings/llm/ProviderList/Cloudflare/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { CloudflareProviderCard } from '@/config/modelProviders';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import { KeyVaultsConfigKey } from '../../const';
+import { ProviderItem } from '../../type';
+import { CloudflareBrand } from '../providers';
+
+const providerKey: GlobalLLMProviderKey = 'cloudflare';
+
+export const useCloudflareProvider = (): ProviderItem => {
+  const { t } = useTranslation('modelProvider');
+
+  return {
+    ...CloudflareProviderCard,
+    apiKeyItems: [
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.apiKey.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.apiKey.desc`),
+        label: t(`${providerKey}.apiKey.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'apiKey'],
+      },
+      {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`${providerKey}.accountID.placeholder`)}
+          />
+        ),
+        desc: t(`${providerKey}.accountID.desc`),
+        label: t(`${providerKey}.accountID.title`),
+        name: [KeyVaultsConfigKey, providerKey, 'accountID'],
+      },
+    ],
+    title: <CloudflareBrand />,
+  };
+};

src/app/(main)/settings/llm/ProviderList/providers.tsx

@@ -2,6 +2,7 @@ import {
   Anthropic,
   Baichuan,
   Claude,
+  Cloudflare,
   DeepSeek,
   Gemini,
   Google,
@@ -14,6 +15,7 @@ import {
   Stepfun,
   Together,
   Tongyi,
+  WorkersAI,
   ZeroOne,
   Zhipu,
 } from '@lobehub/icons';
@@ -44,6 +46,7 @@ import {
 import { ProviderItem } from '../type';
 import { useAzureProvider } from './Azure';
 import { useBedrockProvider } from './Bedrock';
+import { useCloudflareProvider } from './Cloudflare';
 import { useOllamaProvider } from './Ollama';
 import { useOpenAIProvider } from './OpenAI';
 
@@ -78,11 +81,20 @@ const GoogleBrand = () => (
   </Flexbox>
 );
 
+export const CloudflareBrand = () => (
+  <Flexbox align={'center'} gap={8} horizontal>
+    <Cloudflare.Combine size={22} type={'color'} />
+    <Divider style={{ margin: '0 4px' }} type={'vertical'} />
+    <WorkersAI.Combine size={22} type={'color'} />
+  </Flexbox>
+);
+
 export const useProviderList = (): ProviderItem[] => {
   const azureProvider = useAzureProvider();
   const ollamaProvider = useOllamaProvider();
   const openAIProvider = useOpenAIProvider();
   const bedrockProvider = useBedrockProvider();
+  const cloudflareProvider = useCloudflareProvider();
 
   return useMemo(
     () => [
@@ -175,9 +187,13 @@ export const useProviderList = (): ProviderItem[] => {
       {
         ...BaichuanProviderCard,
         docUrl: urlJoin(BASE_DOC_URL, 'baichuan'),
-        title: <Baichuan.Combine size={ 20 } type={ 'color' } />,
+        title: <Baichuan.Combine size={20} type={'color'} />,
+      },
+      {
+        ...cloudflareProvider,
+        docUrl: urlJoin(BASE_DOC_URL, 'cloudflare'),
       },
     ],
-    [azureProvider, ollamaProvider, ollamaProvider, bedrockProvider],
+    [azureProvider, ollamaProvider, ollamaProvider, bedrockProvider, cloudflareProvider],
   );
 };

src/app/api/chat/agentRuntime.ts

@@ -179,6 +179,17 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
 
       return { apiKey };
     }
+    case ModelProvider.Cloudflare: {
+      const { CLOUDFLARE_API_KEY, CLOUDFLARE_ACCOUNT_ID } = getLLMConfig();
+
+      const apiKey = apiKeyManager.pick(payload?.apiKey || CLOUDFLARE_API_KEY);
+      const accountID =
+        payload.apiKey && payload.cloudflareAccountID
+          ? payload.cloudflareAccountID
+          : CLOUDFLARE_ACCOUNT_ID;
+
+      return { accountID, apiKey };
+    }
   }
 };
 

src/components/ModelProviderIcon/index.tsx

@@ -3,6 +3,7 @@ import {
   Azure,
   Baichuan,
   Bedrock,
+  Cloudflare,
   DeepSeek,
   Google,
   Groq,
@@ -119,6 +120,10 @@ const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
       return <Baichuan size={20} />;
     }
 
+    case ModelProvider.Cloudflare: {
+      return <Cloudflare size={20} />;
+    }
+
     default: {
       return null;
     }

src/config/llm.ts

@@ -85,6 +85,10 @@ export const getLLMConfig = () => {
 
       ENABLED_BAICHUAN: z.boolean(),
       BAICHUAN_API_KEY: z.string().optional(),
+
+      ENABLED_CLOUDFLARE: z.boolean(),
+      CLOUDFLARE_API_KEY: z.string().optional(),
+      CLOUDFLARE_ACCOUNT_ID: z.string().optional(),
     },
     runtimeEnv: {
       API_KEY_SELECT_MODE: process.env.API_KEY_SELECT_MODE,
@@ -161,6 +165,10 @@ export const getLLMConfig = () => {
 
       ENABLED_BAICHUAN: !!process.env.BAICHUAN_API_KEY,
       BAICHUAN_API_KEY: process.env.BAICHUAN_API_KEY,
+
+      ENABLED_CLOUDFLARE: !!process.env.CLOUDFLARE_API_KEY && !!process.env.CLOUDFLARE_ACCOUNT_ID,
+      CLOUDFLARE_API_KEY: process.env.CLOUDFLARE_API_KEY,
+      CLOUDFLARE_ACCOUNT_ID: process.env.CLOUDFLARE_ACCOUNT_ID,
     },
   });
 };

src/config/modelProviders/baichuan.ts

@@ -4,7 +4,8 @@ import { ModelProviderCard } from '@/types/llm';
 const Baichuan: ModelProviderCard = {
   chatModels: [
     {
-      description: '模型能力国内第一，在知识百科、长文本、生成创作等中文任务上超越国外主流模型。还具备行业领先的多模态能力，多项权威评测基准表现优异。',
+      description:
+        '模型能力国内第一，在知识百科、长文本、生成创作等中文任务上超越国外主流模型。还具备行业领先的多模态能力，多项权威评测基准表现优异。',
       displayName: 'Baichuan 4',
       enabled: true,
       functionCall: true,
@@ -13,7 +14,8 @@ const Baichuan: ModelProviderCard = {
       tokens: 32_768,
     },
     {
-      description: '针对企业高频场景优化，效果大幅提升，高性价比。相对于Baichuan2模型，内容创作提升20%，知识问答提升17%， 角色扮演能力提升40%。整体效果比GPT3.5更优。',
+      description:
+        '针对企业高频场景优化，效果大幅提升，高性价比。相对于Baichuan2模型，内容创作提升20%，知识问答提升17%， 角色扮演能力提升40%。整体效果比GPT3.5更优。',
       displayName: 'Baichuan 3 Turbo',
       enabled: true,
       functionCall: true,
@@ -22,23 +24,26 @@ const Baichuan: ModelProviderCard = {
       tokens: 32_768,
     },
     {
-      description: '具备 128K 超长上下文窗口，针对企业高频场景优化，效果大幅提升，高性价比。相对于Baichuan2模型，内容创作提升20%，知识问答提升17%， 角色扮演能力提升40%。整体效果比GPT3.5更优。',
+      description:
+        '具备 128K 超长上下文窗口，针对企业高频场景优化，效果大幅提升，高性价比。相对于Baichuan2模型，内容创作提升20%，知识问答提升17%， 角色扮演能力提升40%。整体效果比GPT3.5更优。',
       displayName: 'Baichuan 3 Turbo 128k',
       enabled: true,
       id: 'Baichuan3-Turbo-128k',
       maxOutput: 4096,
       tokens: 128_000,
     },
     {
-      description: '采用搜索增强技术实现大模型与领域知识、全网知识的全面链接。支持PDF、Word等多种文档上传及网址输入，信息获取及时、全面，输出结果准确、专业。',
+      description:
+        '采用搜索增强技术实现大模型与领域知识、全网知识的全面链接。支持PDF、Word等多种文档上传及网址输入，信息获取及时、全面，输出结果准确、专业。',
       displayName: 'Baichuan 2 Turbo',
       enabled: true,
       id: 'Baichuan2-Turbo',
       maxOutput: 8192,
       tokens: 32_768,
     },
     {
-      description: '具备 192K 超长上下文窗口，采用搜索增强技术实现大模型与领域知识、全网知识的全面链接。支持PDF、Word等多种文档上传及网址输入，信息获取及时、全面，输出结果准确、专业。',
+      description:
+        '具备 192K 超长上下文窗口，采用搜索增强技术实现大模型与领域知识、全网知识的全面链接。支持PDF、Word等多种文档上传及网址输入，信息获取及时、全面，输出结果准确、专业。',
       displayName: 'Baichuan 2 Turbo 192k',
       enabled: true,
       id: 'Baichuan2-Turbo-192k',

src/config/modelProviders/cloudflare.ts

@@ -0,0 +1,83 @@
+import { ModelProviderCard } from '@/types/llm';
+
+// ref https://developers.cloudflare.com/workers-ai/models/#text-generation
+// api https://developers.cloudflare.com/workers-ai/configuration/open-ai-compatibility
+const Cloudflare: ModelProviderCard = {
+  chatModels: [
+    {
+      displayName: 'deepseek-coder-6.7b-instruct-awq',
+      enabled: true,
+      id: '@hf/thebloke/deepseek-coder-6.7b-instruct-awq',
+      tokens: 16_384,
+    },
+    {
+      displayName: 'deepseek-math-7b-instruct',
+      enabled: true,
+      id: '@hf/thebloke/deepseek-math-7b-instruct',
+      tokens: 4096,
+    },
+    {
+      displayName: 'gemma-7b-it',
+      enabled: true,
+      id: '@hf/google/gemma-7b-it',
+      tokens: 2048,
+    },
+    {
+      displayName: 'hermes-2-pro-mistral-7b',
+      enabled: true,
+      // functionCall: true,
+      id: '@hf/nousresearch/hermes-2-pro-mistral-7b',
+      tokens: 4096,
+    },
+    {
+      displayName: 'llama-3-8b-instruct-awq',
+      id: '@cf/meta/llama-3-8b-instruct-awq',
+      tokens: 8192,
+    },
+    {
+      displayName: 'mistral-7b-instruct-v0.2',
+      id: '@hf/mistral/mistral-7b-instruct-v0.2',
+      tokens: 4096,
+    },
+    {
+      displayName: 'neural-chat-7b-v3-1-awq',
+      enabled: true,
+      id: '@hf/thebloke/neural-chat-7b-v3-1-awq',
+      tokens: 32_768,
+    },
+    {
+      displayName: 'openchat-3.5-0106',
+      id: '@cf/openchat/openchat-3.5-0106',
+      tokens: 8192,
+    },
+    {
+      displayName: 'openhermes-2.5-mistral-7b-awq',
+      enabled: true,
+      id: '@hf/thebloke/openhermes-2.5-mistral-7b-awq',
+      tokens: 32_768,
+    },
+    {
+      displayName: 'qwen1.5-14b-chat-awq',
+      enabled: true,
+      id: '@cf/qwen/qwen1.5-14b-chat-awq',
+      tokens: 32_768,
+    },
+    {
+      displayName: 'starling-lm-7b-beta',
+      enabled: true,
+      id: '@hf/nexusflow/starling-lm-7b-beta',
+      tokens: 4096,
+    },
+    {
+      displayName: 'zephyr-7b-beta-awq',
+      enabled: true,
+      id: '@hf/thebloke/zephyr-7b-beta-awq',
+      tokens: 32_768,
+    },
+  ],
+  checkModel: '@hf/thebloke/deepseek-coder-6.7b-instruct-awq',
+  id: 'cloudflare',
+  name: 'Cloudflare Workers AI',
+};
+
+export default Cloudflare;

src/config/modelProviders/google.ts

@@ -43,22 +43,25 @@ const Google: ModelProviderCard = {
       vision: true,
     },
     {
-      description: 'The best model for scaling across a wide range of tasks. This is the latest model.',
+      description:
+        'The best model for scaling across a wide range of tasks. This is the latest model.',
       displayName: 'Gemini 1.0 Pro',
       id: 'gemini-1.0-pro-latest',
       maxOutput: 2048,
       tokens: 30_720 + 2048,
     },
     {
-      description: 'The best model for scaling across a wide range of tasks. This is a stable model that supports tuning.',
+      description:
+        'The best model for scaling across a wide range of tasks. This is a stable model that supports tuning.',
       displayName: 'Gemini 1.0 Pro 001 (Tuning)',
       functionCall: true,
       id: 'gemini-1.0-pro-001',
       maxOutput: 2048,
       tokens: 30_720 + 2048,
     },
     {
-      description: 'The best model for scaling across a wide range of tasks. Released April 9, 2024.',
+      description:
+        'The best model for scaling across a wide range of tasks. Released April 9, 2024.',
       displayName: 'Gemini 1.0 Pro 002 (Tuning)',
       id: 'gemini-1.0-pro-002',
       maxOutput: 2048,
@@ -78,7 +81,7 @@ const Google: ModelProviderCard = {
       legacy: true,
       maxOutput: 1024,
       // tokens: 4096 + 1024, // none tokens test
-    }
+    },
   ],
   checkModel: 'gemini-1.5-flash',
   id: 'google',

src/config/modelProviders/index.ts

@@ -4,6 +4,7 @@ import AnthropicProvider from './anthropic';
 import AzureProvider from './azure';
 import BaichuanProvider from './baichuan';
 import BedrockProvider from './bedrock';
+import CloudflareProvider from './cloudflare';
 import DeepSeekProvider from './deepseek';
 import GoogleProvider from './google';
 import GroqProvider from './groq';
@@ -39,6 +40,7 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
   ZeroOneProvider.chatModels,
   StepfunProvider.chatModels,
   BaichuanProvider.chatModels,
+  CloudflareProvider.chatModels,
 ].flat();
 
 export const DEFAULT_MODEL_PROVIDER_LIST = [
@@ -61,6 +63,7 @@ export const DEFAULT_MODEL_PROVIDER_LIST = [
   ZhiPuProvider,
   StepfunProvider,
   BaichuanProvider,
+  CloudflareProvider,
 ];
 
 export const filterEnabledModels = (provider: ModelProviderCard) => {
@@ -71,6 +74,7 @@ export { default as AnthropicProviderCard } from './anthropic';
 export { default as AzureProviderCard } from './azure';
 export { default as BaichuanProviderCard } from './baichuan';
 export { default as BedrockProviderCard } from './bedrock';
+export { default as CloudflareProviderCard } from './cloudflare';
 export { default as DeepSeekProviderCard } from './deepseek';
 export { default as GoogleProviderCard } from './google';
 export { default as GroqProviderCard } from './groq';