Merge remote-tracking branch 'upstream/main'

# Conflicts:
#	app/api/auth.ts
#	app/api/common.ts
#	app/azure.ts
#	app/client/api.ts
#	app/client/platforms/openai.ts
#	app/components/chat.tsx
#	app/components/settings.tsx
#	app/constant.ts
#	app/layout.tsx
#	app/masks/index.ts
#	app/store/chat.ts
#	app/store/config.ts
#	app/utils/hooks.ts
#	app/utils/model.ts
#	package.json
#	yarn.lock

Dockerfile

@@ -74,7 +74,7 @@ EXPOSE 23001
 ENV KEEP_ALIVE_TIMEOUT=30
 
 CMD if [ -n "$PROXY_URL" ]; then \
-    export HOSTNAME="127.0.0.1"; \
+    export HOSTNAME="0.0.0.0"; \
     protocol=$(echo $PROXY_URL | cut -d: -f1); \
     host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
     port=$(echo $PROXY_URL | cut -d: -f3); \
@@ -89,7 +89,7 @@ CMD if [ -n "$PROXY_URL" ]; then \
     echo "[ProxyList]" >> $conf; \
     echo "$protocol $host $port" >> $conf; \
     cat /etc/proxychains.conf; \
-    proxychains -f $conf node server.js --host 0.0.0.0; \
+    proxychains -f $conf node server.js; \
     else \
     node server.js; \
     fi

README.md

@@ -18,7 +18,7 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 
 [网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues)
 
-[web-url]: https://chatgpt.nextweb.fun
+[web-url]: https://app.nextchat.dev/
 [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
 [Web-image]: https://img.shields.io/badge/Web-PWA-orange?logo=microsoftedge
 [Windows-image]: https://img.shields.io/badge/-Windows-blue?logo=windows
@@ -181,6 +181,7 @@ Specify OpenAI organization ID.
 ### `AZURE_URL` (optional)
 
 > Example: https://{azure-resource-url}/openai/deployments/{deploy-name}
+> if you config deployment name in `CUSTOM_MODELS`, you can remove `{deploy-name}` in `AZURE_URL`
 
 Azure deploy url.
 
@@ -212,6 +213,34 @@ anthropic claude Api version.
 
 anthropic claude Api Url.
 
+### `BAIDU_API_KEY` (optional)
+
+Baidu Api Key.
+
+### `BAIDU_SECRET_KEY` (optional)
+
+Baidu Secret Key.
+
+### `BAIDU_URL` (optional)
+
+Baidu Api Url.
+
+### `BYTEDANCE_API_KEY` (optional)
+
+ByteDance Api Key.
+
+### `BYTEDANCE_URL` (optional)
+
+ByteDance Api Url.
+
+### `ALIBABA_API_KEY` (optional)
+
+Alibaba Cloud Api Key.
+
+### `ALIBABA_URL` (optional)
+
+Alibaba Cloud Api Url.
+
 ### `HIDE_USER_API_KEY` (optional)
 
 > Default: Empty
@@ -245,6 +274,16 @@ To control custom models, use `+` to add a custom model, use `-` to hide a model
 
 User `-all` to disable all default models, `+all` to enable all default models.
 
+For Azure: use `modelName@azure=deploymentName` to customize model name and deployment name.
+> Example: `+gpt-3.5-turbo@azure=gpt35` will show option `gpt35(Azure)` in model list.
+
+For ByteDance: use `modelName@bytedance=deploymentName` to customize model name and deployment name.
+> Example: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx` will show option `Doubao-lite-4k(ByteDance)` in model list.
+
+### `DEFAULT_MODEL` （optional）
+
+Change default model
+
 ### `WHITE_WEBDEV_ENDPOINTS` (optional)
 
 You can use this option if you want to increase the number of webdav service addresses you are allowed to access, as required by the format：

README_CN.md

@@ -95,6 +95,7 @@ OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填
 ### `AZURE_URL` （可选）
 
 > 形如：https://{azure-resource-url}/openai/deployments/{deploy-name}
+> 如果你已经在`CUSTOM_MODELS`中参考`displayName`的方式配置了{deploy-name}，那么可以从`AZURE_URL`中移除`{deploy-name}`
 
 Azure 部署地址。
 
@@ -106,26 +107,54 @@ Azure 密钥。
 
 Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)。
 
-### `GOOGLE_API_KEY` (optional)
+### `GOOGLE_API_KEY` (可选)
 
 Google Gemini Pro 密钥.
 
-### `GOOGLE_URL` (optional)
+### `GOOGLE_URL` (可选)
 
 Google Gemini Pro Api Url.
 
-### `ANTHROPIC_API_KEY` (optional)
+### `ANTHROPIC_API_KEY` (可选)
 
 anthropic claude Api Key.
 
-### `ANTHROPIC_API_VERSION` (optional)
+### `ANTHROPIC_API_VERSION` (可选)
 
 anthropic claude Api version.
 
-### `ANTHROPIC_URL` (optional)
+### `ANTHROPIC_URL` (可选)
 
 anthropic claude Api Url.
 
+### `BAIDU_API_KEY` (可选)
+
+Baidu Api Key.
+
+### `BAIDU_SECRET_KEY` (可选)
+
+Baidu Secret Key.
+
+### `BAIDU_URL` (可选)
+
+Baidu Api Url.
+
+### `BYTEDANCE_API_KEY` (可选)
+
+ByteDance Api Key.
+
+### `BYTEDANCE_URL` (可选)
+
+ByteDance Api Url.
+
+### `ALIBABA_API_KEY` (可选)
+
+阿里云（千问）Api Key.
+
+### `ALIBABA_URL` (可选)
+
+阿里云（千问）Api Url.
+
 ### `HIDE_USER_API_KEY` （可选）
 
 如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。
@@ -156,7 +185,19 @@ anthropic claude Api Url.
 
 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
 
+在Azure的模式下，支持使用`modelName@azure=deploymentName`的方式配置模型名称和部署名称(deploy-name)
+> 示例：`+gpt-3.5-turbo@azure=gpt35`这个配置会在模型列表显示一个`gpt35(Azure)`的选项
+
+在ByteDance的模式下，支持使用`modelName@bytedance=deploymentName`的方式配置模型名称和部署名称(deploy-name)
+> 示例: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx`这个配置会在模型列表显示一个`Doubao-lite-4k(ByteDance)`的选项
+
+
+### `DEFAULT_MODEL` （可选）
+
+更改默认模型
+
 ### `DEFAULT_INPUT_TEMPLATE` （可选）
+
 自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项
 
 ## 开发

app/api/alibaba/[...path]/route.ts

@@ -0,0 +1,170 @@
+import { getServerSideConfig } from "@/app/config/server";
+import {
+  Alibaba,
+  ALIBABA_BASE_URL,
+  ApiPath,
+  ModelProvider,
+  ServiceProvider,
+} from "@/app/constant";
+import { prettyObject } from "@/app/utils/format";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/app/api/auth";
+import { isModelAvailableInServer } from "@/app/utils/model";
+import type { RequestPayload } from "@/app/client/platforms/openai";
+
+const serverConfig = getServerSideConfig();
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[Alibaba Route] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const authResult = auth(req, ModelProvider.Qwen);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  try {
+    const response = await request(req);
+    return response;
+  } catch (e) {
+    console.error("[Alibaba] ", e);
+    return NextResponse.json(prettyObject(e));
+  }
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";
+export const preferredRegion = [
+  "arn1",
+  "bom1",
+  "cdg1",
+  "cle1",
+  "cpt1",
+  "dub1",
+  "fra1",
+  "gru1",
+  "hnd1",
+  "iad1",
+  "icn1",
+  "kix1",
+  "lhr1",
+  "pdx1",
+  "sfo1",
+  "sin1",
+  "syd1",
+];
+
+async function request(req: NextRequest) {
+  const controller = new AbortController();
+
+  // alibaba use base url or just remove the path
+  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Alibaba, "");
+
+  let baseUrl = serverConfig.alibabaUrl || ALIBABA_BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `https://${baseUrl}`;
+  }
+
+  if (baseUrl.endsWith("/")) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  console.log("[Proxy] ", path);
+  console.log("[Base Url]", baseUrl);
+
+  const timeoutId = setTimeout(
+    () => {
+      controller.abort();
+    },
+    10 * 60 * 1000,
+  );
+
+  const fetchUrl = `${baseUrl}${path}`;
+
+  const clonedBody = await req.text();
+
+  const { messages, model, stream, top_p, ...rest } = JSON.parse(
+    clonedBody,
+  ) as RequestPayload;
+
+  const requestBody = {
+    model,
+    input: {
+      messages,
+    },
+    parameters: {
+      ...rest,
+      top_p: top_p === 1 ? 0.99 : top_p, // qwen top_p is should be < 1
+      result_format: "message",
+      incremental_output: true,
+    },
+  };
+
+  const fetchOptions: RequestInit = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: req.headers.get("Authorization") ?? "",
+      "X-DashScope-SSE": stream ? "enable" : "disable",
+    },
+    method: req.method,
+    body: JSON.stringify(requestBody),
+    redirect: "manual",
+    // @ts-ignore
+    duplex: "half",
+    signal: controller.signal,
+  };
+
+  // #1815 try to refuse some request to some models
+  if (serverConfig.customModels && req.body) {
+    try {
+      // not undefined and is false
+      if (
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          model as string,
+          ServiceProvider.Alibaba as string,
+        )
+      ) {
+        return NextResponse.json(
+          {
+            error: true,
+            message: `you are not allowed to use ${model} model`,
+          },
+          {
+            status: 403,
+          },
+        );
+      }
+    } catch (e) {
+      console.error(`[Alibaba] filter`, e);
+    }
+  }
+  try {
+    const res = await fetch(fetchUrl, fetchOptions);
+
+    // to prevent browser prompt for credentials
+    const newHeaders = new Headers(res.headers);
+    newHeaders.delete("www-authenticate");
+    // to disable nginx buffering
+    newHeaders.set("X-Accel-Buffering", "no");
+
+    return new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: newHeaders,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

app/api/anthropic/[...path]/route.ts

@@ -4,12 +4,13 @@ import {
   Anthropic,
   ApiPath,
   DEFAULT_MODELS,
+  ServiceProvider,
   ModelProvider,
 } from "@/app/constant";
 import { prettyObject } from "@/app/utils/format";
 import { NextRequest, NextResponse } from "next/server";
 import { auth } from "../../auth";
-import { collectModelTable } from "@/app/utils/model";
+import { isModelAvailableInServer } from "@/app/utils/model";
 
 const ALLOWD_PATH = new Set([Anthropic.ChatPath, Anthropic.ChatPath1]);
 
@@ -136,17 +137,19 @@ async function request(req: NextRequest) {
   // #1815 try to refuse some request to some models
   if (serverConfig.customModels && req.body) {
     try {
-      const modelTable = collectModelTable(
-        DEFAULT_MODELS,
-        serverConfig.customModels,
-      );
       const clonedBody = await req.text();
       fetchOptions.body = clonedBody;
 
       const jsonBody = JSON.parse(clonedBody) as { model?: string };
 
       // not undefined and is false
-      if (modelTable[jsonBody?.model ?? ""].available === false) {
+      if (
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          jsonBody?.model as string,
+          ServiceProvider.Anthropic as string,
+        )
+      ) {
         return NextResponse.json(
           {
             error: true,

app/api/auth.ts

@@ -78,9 +78,19 @@ export function auth(
       case ModelProvider.Claude:
         systemApiKey = serverConfig.anthropicApiKey;
         break;
+      case ModelProvider.Doubao:
+        systemApiKey = serverConfig.bytedanceApiKey;
+        break;
+      case ModelProvider.Ernie:
+        systemApiKey = serverConfig.baiduApiKey;
+        break;
+      case ModelProvider.Qwen:
+        systemApiKey = serverConfig.alibabaApiKey;
+        break;
       case ModelProvider.GPT:
       default:
-        if (isAzure) {
+        // isAzure
+        if (req.nextUrl.pathname.includes("azure/deployments")) {
           systemApiKey = serverConfig.azureApiKey;
         } else {
           systemApiKey = serverConfig.apiKey;

app/api/azure/[...path]/route.ts

@@ -0,0 +1,57 @@
+import { getServerSideConfig } from "@/app/config/server";
+import { ModelProvider } from "@/app/constant";
+import { prettyObject } from "@/app/utils/format";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "../../auth";
+import { requestOpenai } from "../../common";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[Azure Route] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const subpath = params.path.join("/");
+
+  const authResult = auth(req, ModelProvider.GPT);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  try {
+    return await requestOpenai(req);
+  } catch (e) {
+    console.error("[Azure] ", e);
+    return NextResponse.json(prettyObject(e));
+  }
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";
+export const preferredRegion = [
+  "arn1",
+  "bom1",
+  "cdg1",
+  "cle1",
+  "cpt1",
+  "dub1",
+  "fra1",
+  "gru1",
+  "hnd1",
+  "iad1",
+  "icn1",
+  "kix1",
+  "lhr1",
+  "pdx1",
+  "sfo1",
+  "sin1",
+  "syd1",
+];

app/api/baidu/[...path]/route.ts

@@ -0,0 +1,169 @@
+import { getServerSideConfig } from "@/app/config/server";
+import {
+  BAIDU_BASE_URL,
+  ApiPath,
+  ModelProvider,
+  BAIDU_OATUH_URL,
+  ServiceProvider,
+} from "@/app/constant";
+import { prettyObject } from "@/app/utils/format";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/app/api/auth";
+import { isModelAvailableInServer } from "@/app/utils/model";
+import { getAccessToken } from "@/app/utils/baidu";
+
+const serverConfig = getServerSideConfig();
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[Baidu Route] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const authResult = auth(req, ModelProvider.Ernie);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  if (!serverConfig.baiduApiKey || !serverConfig.baiduSecretKey) {
+    return NextResponse.json(
+      {
+        error: true,
+        message: `missing BAIDU_API_KEY or BAIDU_SECRET_KEY in server env vars`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  try {
+    const response = await request(req);
+    return response;
+  } catch (e) {
+    console.error("[Baidu] ", e);
+    return NextResponse.json(prettyObject(e));
+  }
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";
+export const preferredRegion = [
+  "arn1",
+  "bom1",
+  "cdg1",
+  "cle1",
+  "cpt1",
+  "dub1",
+  "fra1",
+  "gru1",
+  "hnd1",
+  "iad1",
+  "icn1",
+  "kix1",
+  "lhr1",
+  "pdx1",
+  "sfo1",
+  "sin1",
+  "syd1",
+];
+
+async function request(req: NextRequest) {
+  const controller = new AbortController();
+
+  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Baidu, "");
+
+  let baseUrl = serverConfig.baiduUrl || BAIDU_BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `https://${baseUrl}`;
+  }
+
+  if (baseUrl.endsWith("/")) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  console.log("[Proxy] ", path);
+  console.log("[Base Url]", baseUrl);
+
+  const timeoutId = setTimeout(
+    () => {
+      controller.abort();
+    },
+    10 * 60 * 1000,
+  );
+
+  const { access_token } = await getAccessToken(
+    serverConfig.baiduApiKey as string,
+    serverConfig.baiduSecretKey as string,
+  );
+  const fetchUrl = `${baseUrl}${path}?access_token=${access_token}`;
+
+  const fetchOptions: RequestInit = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: req.method,
+    body: req.body,
+    redirect: "manual",
+    // @ts-ignore
+    duplex: "half",
+    signal: controller.signal,
+  };
+
+  // #1815 try to refuse some request to some models
+  if (serverConfig.customModels && req.body) {
+    try {
+      const clonedBody = await req.text();
+      fetchOptions.body = clonedBody;
+
+      const jsonBody = JSON.parse(clonedBody) as { model?: string };
+
+      // not undefined and is false
+      if (
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          jsonBody?.model as string,
+          ServiceProvider.Baidu as string,
+        )
+      ) {
+        return NextResponse.json(
+          {
+            error: true,
+            message: `you are not allowed to use ${jsonBody?.model} model`,
+          },
+          {
+            status: 403,
+          },
+        );
+      }
+    } catch (e) {
+      console.error(`[Baidu] filter`, e);
+    }
+  }
+  try {
+    const res = await fetch(fetchUrl, fetchOptions);
+
+    // to prevent browser prompt for credentials
+    const newHeaders = new Headers(res.headers);
+    newHeaders.delete("www-authenticate");
+    // to disable nginx buffering
+    newHeaders.set("X-Accel-Buffering", "no");
+
+    return new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: newHeaders,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

app/api/bytedance/[...path]/route.ts

@@ -0,0 +1,153 @@
+import { getServerSideConfig } from "@/app/config/server";
+import {
+  BYTEDANCE_BASE_URL,
+  ApiPath,
+  ModelProvider,
+  ServiceProvider,
+} from "@/app/constant";
+import { prettyObject } from "@/app/utils/format";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/app/api/auth";
+import { isModelAvailableInServer } from "@/app/utils/model";
+
+const serverConfig = getServerSideConfig();
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[ByteDance Route] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const authResult = auth(req, ModelProvider.Doubao);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  try {
+    const response = await request(req);
+    return response;
+  } catch (e) {
+    console.error("[ByteDance] ", e);
+    return NextResponse.json(prettyObject(e));
+  }
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";
+export const preferredRegion = [
+  "arn1",
+  "bom1",
+  "cdg1",
+  "cle1",
+  "cpt1",
+  "dub1",
+  "fra1",
+  "gru1",
+  "hnd1",
+  "iad1",
+  "icn1",
+  "kix1",
+  "lhr1",
+  "pdx1",
+  "sfo1",
+  "sin1",
+  "syd1",
+];
+
+async function request(req: NextRequest) {
+  const controller = new AbortController();
+
+  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.ByteDance, "");
+
+  let baseUrl = serverConfig.bytedanceUrl || BYTEDANCE_BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `https://${baseUrl}`;
+  }
+
+  if (baseUrl.endsWith("/")) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  console.log("[Proxy] ", path);
+  console.log("[Base Url]", baseUrl);
+
+  const timeoutId = setTimeout(
+    () => {
+      controller.abort();
+    },
+    10 * 60 * 1000,
+  );
+
+  const fetchUrl = `${baseUrl}${path}`;
+
+  const fetchOptions: RequestInit = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: req.headers.get("Authorization") ?? "",
+    },
+    method: req.method,
+    body: req.body,
+    redirect: "manual",
+    // @ts-ignore
+    duplex: "half",
+    signal: controller.signal,
+  };
+
+  // #1815 try to refuse some request to some models
+  if (serverConfig.customModels && req.body) {
+    try {
+      const clonedBody = await req.text();
+      fetchOptions.body = clonedBody;
+
+      const jsonBody = JSON.parse(clonedBody) as { model?: string };
+
+      // not undefined and is false
+      if (
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          jsonBody?.model as string,
+          ServiceProvider.ByteDance as string,
+        )
+      ) {
+        return NextResponse.json(
+          {
+            error: true,
+            message: `you are not allowed to use ${jsonBody?.model} model`,
+          },
+          {
+            status: 403,
+          },
+        );
+      }
+    } catch (e) {
+      console.error(`[ByteDance] filter`, e);
+    }
+  }
+
+  try {
+    const res = await fetch(fetchUrl, fetchOptions);
+
+    // to prevent browser prompt for credentials
+    const newHeaders = new Headers(res.headers);
+    newHeaders.delete("www-authenticate");
+    // to disable nginx buffering
+    newHeaders.set("X-Accel-Buffering", "no");
+
+    return new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: newHeaders,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

app/api/common.ts

@@ -1,13 +1,20 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getServerSideConfig } from "../config/server";
-import { DEFAULT_MODELS, OPENAI_BASE_URL, GEMINI_BASE_URL } from "../constant";
+import {
-import { collectModelTable } from "../utils/model";
+  DEFAULT_MODELS,
-import { makeAzurePath } from "../azure";
+  OPENAI_BASE_URL,
+  GEMINI_BASE_URL,
+  ServiceProvider,
+} from "../constant";
+
+// import { makeAzurePath } from "../azure";
 import { getIP } from "@/app/api/auth";
 import { getSessionName } from "@/lib/auth";
 import prisma from "@/lib/prisma";
 import { getTokenLength } from "@/lib/utils";
 
+import { isModelAvailableInServer } from "../utils/model";
+
 const serverConfig = getServerSideConfig();
 
 export async function requestOpenai(
@@ -18,6 +25,8 @@ export async function requestOpenai(
 ) {
   const controller = new AbortController();
 
+  const isAzure = req.nextUrl.pathname.includes("azure/deployments");
+
   var authValue,
     authHeaderName = "";
   if (isAzure) {
@@ -62,6 +71,44 @@ export async function requestOpenai(
     10 * 60 * 1000,
   );
 
+  if (isAzure) {
+    const azureApiVersion =
+      req?.nextUrl?.searchParams?.get("api-version") ||
+      serverConfig.azureApiVersion;
+    baseUrl = baseUrl.split("/deployments").shift() as string;
+    path = `${req.nextUrl.pathname.replaceAll(
+      "/api/azure/",
+      "",
+    )}?api-version=${azureApiVersion}`;
+
+    // Forward compatibility:
+    // if display_name(deployment_name) not set, and '{deploy-id}' in AZURE_URL
+    // then using default '{deploy-id}'
+    if (serverConfig.customModels && serverConfig.azureUrl) {
+      const modelName = path.split("/")[1];
+      let realDeployName = "";
+      serverConfig.customModels
+        .split(",")
+        .filter((v) => !!v && !v.startsWith("-") && v.includes(modelName))
+        .forEach((m) => {
+          const [fullName, displayName] = m.split("=");
+          const [_, providerName] = fullName.split("@");
+          if (providerName === "azure" && !displayName) {
+            const [_, deployId] = (serverConfig?.azureUrl ?? "").split(
+              "deployments/",
+            );
+            if (deployId) {
+              realDeployName = deployId;
+            }
+          }
+        });
+      if (realDeployName) {
+        console.log("[Replace with DeployId", realDeployName);
+        path = path.replaceAll(modelName, realDeployName);
+      }
+    }
+  }
+
   const fetchUrl = `${baseUrl}/${path}`;
   const fetchOptions: RequestInit = {
     headers: {
@@ -84,13 +131,24 @@ export async function requestOpenai(
   // #1815 try to refuse some model request
   if (current_model) {
     try {
-      const modelTable = collectModelTable(
+      const clonedBody = await req.text();
-        DEFAULT_MODELS,
+      fetchOptions.body = clonedBody;
-        serverConfig.customModels,
+
-      );
+      const jsonBody = JSON.parse(clonedBody) as { model?: string };
 
       // not undefined and is false
-      if (!modelTable[current_model ?? ""].available) {
+      if (
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          jsonBody?.model as string,
+          ServiceProvider.OpenAI as string,
+        ) ||
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          jsonBody?.model as string,
+          ServiceProvider.Azure as string,
+        )
+      ) {
         return NextResponse.json(
           {
             error: true,

app/api/google/[...path]/route.ts

@@ -63,7 +63,9 @@ async function handle(
     );
   }
 
-  const fetchUrl = `${baseUrl}/${path}?key=${key}`;
+  const fetchUrl = `${baseUrl}/${path}?key=${key}${
+    req?.nextUrl?.searchParams?.get("alt") == "sse" ? "&alt=sse" : ""
+  }`;
   const fetchOptions: RequestInit = {
     headers: {
       "Content-Type": "application/json",

app/azure.ts

@@ -1,16 +0,0 @@
-export function makeAzurePath(
-  path: string,
-  apiVersion: string,
-  azureModel?: string,
-) {
-  // should omit /v1 prefix
-  // path = path.replaceAll("v1/", "");
-  path = path.replaceAll(
-    "v1/chat/completions",
-    `openai/deployments/${azureModel}/chat/completions`,
-  );
-  // should add api-key to query string
-  path += `${path.includes("?") ? "&" : "?"}api-version=${apiVersion}`;
-
-  return path;
-}

app/client/api.ts

@@ -10,6 +10,10 @@ import { ChatMessage, ModelType, useAccessStore, useChatStore } from "../store";
 import { ChatGPTApi } from "./platforms/openai";
 import { GeminiProApi } from "./platforms/google";
 import { ClaudeApi } from "./platforms/anthropic";
+import { ErnieApi } from "./platforms/baidu";
+import { DoubaoApi } from "./platforms/bytedance";
+import { QwenApi } from "./platforms/alibaba";
+
 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
 
@@ -37,6 +41,7 @@ export interface RequestMessage {
 
 export interface LLMConfig {
   model: string;
+  providerName?: string;
   temperature?: number;
   top_p?: number;
   stream?: boolean;
@@ -61,6 +66,7 @@ export interface LLMUsage {
 
 export interface LLMModel {
   name: string;
+  displayName?: string;
   describe: string;
   available: boolean;
   provider: LLMModelProvider;
@@ -110,6 +116,15 @@ export class ClientApi {
       case ModelProvider.Claude:
         this.llm = new ClaudeApi();
         break;
+      case ModelProvider.Ernie:
+        this.llm = new ErnieApi();
+        break;
+      case ModelProvider.Doubao:
+        this.llm = new DoubaoApi();
+        break;
+      case ModelProvider.Qwen:
+        this.llm = new QwenApi();
+        break;
       default:
         this.llm = new ChatGPTApi();
     }
@@ -163,36 +178,82 @@ export class ClientApi {
 
 export function getHeaders(isAzure?: boolean) {
   const accessStore = useAccessStore.getState();
+  const chatStore = useChatStore.getState();
   const headers: Record<string, string> = {
     "Content-Type": "application/json",
     Accept: "application/json",
   };
-  const modelConfig = useChatStore.getState().currentSession().mask.modelConfig;
-  const isGoogle = modelConfig.model.startsWith("gemini");
-  // const isAzure = accessStore.provider === ServiceProvider.Azure;
-  const authHeader = isAzure ? "api-key" : "Authorization";
-  const apiKey = isGoogle
-    ? accessStore.googleApiKey
-    : isAzure
-      ? accessStore.azureApiKey
-      : accessStore.openaiApiKey;
-  const clientConfig = getClientConfig();
-  const makeBearer = (s: string) => `${isAzure ? "" : "Bearer "}${s.trim()}`;
-  const validString = (x: string) => x && x.length > 0;
 
+  const clientConfig = getClientConfig();
+
+  function getConfig() {
+    const modelConfig = chatStore.currentSession().mask.modelConfig;
+    const isGoogle = modelConfig.providerName == ServiceProvider.Google;
+    // const isAzure = modelConfig.providerName === ServiceProvider.Azure;
+    const isAnthropic = modelConfig.providerName === ServiceProvider.Anthropic;
+    const isBaidu = modelConfig.providerName == ServiceProvider.Baidu;
+    const isByteDance = modelConfig.providerName === ServiceProvider.ByteDance;
+    const isAlibaba = modelConfig.providerName === ServiceProvider.Alibaba;
+    const isEnabledAccessControl = accessStore.enabledAccessControl();
+    const apiKey = isGoogle
+      ? accessStore.googleApiKey
+      : isAzure
+        ? accessStore.azureApiKey
+        : isAnthropic
+          ? accessStore.anthropicApiKey
+          : isByteDance
+            ? accessStore.bytedanceApiKey
+            : isAlibaba
+              ? accessStore.alibabaApiKey
+              : accessStore.openaiApiKey;
+    return {
+      isGoogle,
+      isAzure,
+      isAnthropic,
+      isBaidu,
+      isByteDance,
+      isAlibaba,
+      apiKey,
+      isEnabledAccessControl,
+    };
+  }
+
+  function getAuthHeader(): string {
+    return isAzure ? "api-key" : isAnthropic ? "x-api-key" : "Authorization";
+  }
+
+  function getBearerToken(apiKey: string, noBearer: boolean = false): string {
+    return validString(apiKey)
+      ? `${noBearer ? "" : "Bearer "}${apiKey.trim()}`
+      : "";
+  }
+
+  function validString(x: string): boolean {
+    return x?.length > 0;
+  }
+  const {
+    isGoogle,
+    // isAzure,
+    isAnthropic,
+    isBaidu,
+    apiKey,
+    isEnabledAccessControl,
+  } = getConfig();
   // when using google api in app, not set auth header
-  if (!(isGoogle && clientConfig?.isApp)) {
+  if (isGoogle && clientConfig?.isApp) return headers;
-    // use user's api key first
+  // when using baidu api in app, not set auth header
-    if (validString(apiKey)) {
+  if (isBaidu && clientConfig?.isApp) return headers;
-      headers[authHeader] = makeBearer(apiKey);
+
-    } else if (
+  const authHeader = getAuthHeader();
-      accessStore.enabledAccessControl() &&
+
-      validString(accessStore.accessCode)
+  const bearerToken = getBearerToken(apiKey, isAzure || isAnthropic);
-    ) {
+
-      headers[authHeader] = makeBearer(
+  if (bearerToken) {
-        ACCESS_CODE_PREFIX + accessStore.accessCode,
+    headers[authHeader] = bearerToken;
-      );
+  } else if (isEnabledAccessControl && validString(accessStore.accessCode)) {
-    }
+    headers["Authorization"] = getBearerToken(
+      ACCESS_CODE_PREFIX + accessStore.accessCode,
+    );
   }
 
   if (validString(accessStore.midjourneyProxyUrl)) {
@@ -201,6 +262,23 @@ export function getHeaders(isAzure?: boolean) {
   return headers;
 }
 
+export function getClientApi(provider: ServiceProvider): ClientApi {
+  switch (provider) {
+    case ServiceProvider.Google:
+      return new ClientApi(ModelProvider.GeminiPro);
+    case ServiceProvider.Anthropic:
+      return new ClientApi(ModelProvider.Claude);
+    case ServiceProvider.Baidu:
+      return new ClientApi(ModelProvider.Ernie);
+    case ServiceProvider.ByteDance:
+      return new ClientApi(ModelProvider.Doubao);
+    case ServiceProvider.Alibaba:
+      return new ClientApi(ModelProvider.Qwen);
+    default:
+      return new ClientApi(ModelProvider.GPT);
+  }
+}
+
 export function useGetMidjourneySelfProxyUrl(url: string) {
   const accessStore = useAccessStore.getState();
   console.log("useMjImgSelfProxy", accessStore.useMjImgSelfProxy);

app/client/platforms/alibaba.ts

@@ -0,0 +1,255 @@
+"use client";
+import {
+  ApiPath,
+  Alibaba,
+  ALIBABA_BASE_URL,
+  REQUEST_TIMEOUT_MS,
+} from "@/app/constant";
+import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
+
+import {
+  ChatOptions,
+  getHeaders,
+  LLMApi,
+  LLMModel,
+  MultimodalContent,
+} from "../api";
+import Locale from "../../locales";
+import {
+  EventStreamContentType,
+  fetchEventSource,
+} from "@fortaine/fetch-event-source";
+import { prettyObject } from "@/app/utils/format";
+import { getClientConfig } from "@/app/config/client";
+import { getMessageTextContent, isVisionModel } from "@/app/utils";
+
+export interface OpenAIListModelResponse {
+  object: string;
+  data: Array<{
+    id: string;
+    object: string;
+    root: string;
+  }>;
+}
+
+interface RequestPayload {
+  messages: {
+    role: "system" | "user" | "assistant";
+    content: string | MultimodalContent[];
+  }[];
+  stream?: boolean;
+  model: string;
+  temperature: number;
+  presence_penalty: number;
+  frequency_penalty: number;
+  top_p: number;
+  max_tokens?: number;
+}
+
+export class QwenApi implements LLMApi {
+  path(path: string): string {
+    const accessStore = useAccessStore.getState();
+
+    let baseUrl = "";
+
+    if (accessStore.useCustomConfig) {
+      baseUrl = accessStore.alibabaUrl;
+    }
+
+    if (baseUrl.length === 0) {
+      const isApp = !!getClientConfig()?.isApp;
+      baseUrl = isApp ? ALIBABA_BASE_URL : ApiPath.Alibaba;
+    }
+
+    if (baseUrl.endsWith("/")) {
+      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
+    }
+    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Alibaba)) {
+      baseUrl = "https://" + baseUrl;
+    }
+
+    console.log("[Proxy Endpoint] ", baseUrl, path);
+
+    return [baseUrl, path].join("/");
+  }
+
+  extractMessage(res: any) {
+    return res?.output?.choices?.at(0)?.message?.content ?? "";
+  }
+
+  async chat(options: ChatOptions) {
+    const messages = options.messages.map((v) => ({
+      role: v.role,
+      content: getMessageTextContent(v),
+    }));
+
+    const modelConfig = {
+      ...useAppConfig.getState().modelConfig,
+      ...useChatStore.getState().currentSession().mask.modelConfig,
+      ...{
+        model: options.config.model,
+      },
+    };
+
+    const requestPayload: RequestPayload = {
+      messages,
+      stream: options.config.stream,
+      model: modelConfig.model,
+      temperature: modelConfig.temperature,
+      presence_penalty: modelConfig.presence_penalty,
+      frequency_penalty: modelConfig.frequency_penalty,
+      top_p: modelConfig.top_p,
+    };
+
+    const shouldStream = !!options.config.stream;
+    const controller = new AbortController();
+    options.onController?.(controller);
+
+    try {
+      const chatPath = this.path(Alibaba.ChatPath);
+      const chatPayload = {
+        method: "POST",
+        body: JSON.stringify(requestPayload),
+        signal: controller.signal,
+        headers: getHeaders(),
+      };
+
+      // make a fetch request
+      const requestTimeoutId = setTimeout(
+        () => controller.abort(),
+        REQUEST_TIMEOUT_MS,
+      );
+
+      if (shouldStream) {
+        let responseText = "";
+        let remainText = "";
+        let finished = false;
+
+        // animate response to make it looks smooth
+        function animateResponseText() {
+          if (finished || controller.signal.aborted) {
+            responseText += remainText;
+            console.log("[Response Animation] finished");
+            if (responseText?.length === 0) {
+              options.onError?.(new Error("empty response from server"));
+            }
+            return;
+          }
+
+          if (remainText.length > 0) {
+            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
+            const fetchText = remainText.slice(0, fetchCount);
+            responseText += fetchText;
+            remainText = remainText.slice(fetchCount);
+            options.onUpdate?.(responseText, fetchText);
+          }
+
+          requestAnimationFrame(animateResponseText);
+        }
+
+        // start animaion
+        animateResponseText();
+
+        const finish = () => {
+          if (!finished) {
+            finished = true;
+            options.onFinish(responseText + remainText);
+          }
+        };
+
+        controller.signal.onabort = finish;
+
+        fetchEventSource(chatPath, {
+          ...chatPayload,
+          async onopen(res) {
+            clearTimeout(requestTimeoutId);
+            const contentType = res.headers.get("content-type");
+            console.log(
+              "[Alibaba] request response content type: ",
+              contentType,
+            );
+
+            if (contentType?.startsWith("text/plain")) {
+              responseText = await res.clone().text();
+              return finish();
+            }
+
+            if (
+              !res.ok ||
+              !res.headers
+                .get("content-type")
+                ?.startsWith(EventStreamContentType) ||
+              res.status !== 200
+            ) {
+              const responseTexts = [responseText];
+              let extraInfo = await res.clone().text();
+              try {
+                const resJson = await res.clone().json();
+                extraInfo = prettyObject(resJson);
+              } catch {}
+
+              if (res.status === 401) {
+                responseTexts.push(Locale.Error.Unauthorized);
+              }
+
+              if (extraInfo) {
+                responseTexts.push(extraInfo);
+              }
+
+              responseText = responseTexts.join("\n\n");
+
+              return finish();
+            }
+          },
+          onmessage(msg) {
+            if (msg.data === "[DONE]" || finished) {
+              return finish();
+            }
+            const text = msg.data;
+            try {
+              const json = JSON.parse(text);
+              const choices = json.output.choices as Array<{
+                message: { content: string };
+              }>;
+              const delta = choices[0]?.message?.content;
+              if (delta) {
+                remainText += delta;
+              }
+            } catch (e) {
+              console.error("[Request] parse error", text, msg);
+            }
+          },
+          onclose() {
+            finish();
+          },
+          onerror(e) {
+            options.onError?.(e);
+            throw e;
+          },
+          openWhenHidden: true,
+        });
+      } else {
+        const res = await fetch(chatPath, chatPayload);
+        clearTimeout(requestTimeoutId);
+
+        const resJson = await res.json();
+        const message = this.extractMessage(resJson);
+        options.onFinish(message);
+      }
+    } catch (e) {
+      console.log("[Request] failed to make a chat request", e);
+      options.onError?.(e as Error);
+    }
+  }
+  async usage() {
+    return {
+      used: 0,
+      total: 0,
+    };
+  }
+
+  async models(): Promise<LLMModel[]> {
+    return [];
+  }
+}
+export { Alibaba };

app/client/platforms/anthropic.ts

@@ -1,5 +1,5 @@
 import { ACCESS_CODE_PREFIX, Anthropic, ApiPath } from "@/app/constant";
-import { ChatOptions, LLMApi, MultimodalContent } from "../api";
+import { ChatOptions, getHeaders, LLMApi, MultimodalContent } from "../api";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
 import { getClientConfig } from "@/app/config/client";
 import { DEFAULT_API_HOST } from "@/app/constant";
@@ -190,11 +190,10 @@ export class ClaudeApi implements LLMApi {
       body: JSON.stringify(requestBody),
       signal: controller.signal,
       headers: {
-        "Content-Type": "application/json",
+        ...getHeaders(), // get common headers
-        Accept: "application/json",
-        "x-api-key": accessStore.anthropicApiKey,
         "anthropic-version": accessStore.anthropicApiVersion,
-        Authorization: getAuthKey(accessStore.anthropicApiKey),
+        // do not send `anthropicApiKey` in browser!!!
+        // Authorization: getAuthKey(accessStore.anthropicApiKey),
       },
     };
 
@@ -389,27 +388,3 @@ function trimEnd(s: string, end = " ") {
 
   return s;
 }
-
-function bearer(value: string) {
-  return `Bearer ${value.trim()}`;
-}
-
-function getAuthKey(apiKey = "") {
-  const accessStore = useAccessStore.getState();
-  const isApp = !!getClientConfig()?.isApp;
-  let authKey = "";
-
-  if (apiKey) {
-    // use user's api key first
-    authKey = bearer(apiKey);
-  } else if (
-    accessStore.enabledAccessControl() &&
-    !isApp &&
-    !!accessStore.accessCode
-  ) {
-    // or use access code
-    authKey = bearer(ACCESS_CODE_PREFIX + accessStore.accessCode);
-  }
-
-  return authKey;
-}

app/client/platforms/baidu.ts

@@ -0,0 +1,273 @@
+"use client";
+import {
+  ApiPath,
+  Baidu,
+  BAIDU_BASE_URL,
+  REQUEST_TIMEOUT_MS,
+} from "@/app/constant";
+import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
+import { getAccessToken } from "@/app/utils/baidu";
+
+import {
+  ChatOptions,
+  getHeaders,
+  LLMApi,
+  LLMModel,
+  MultimodalContent,
+} from "../api";
+import Locale from "../../locales";
+import {
+  EventStreamContentType,
+  fetchEventSource,
+} from "@fortaine/fetch-event-source";
+import { prettyObject } from "@/app/utils/format";
+import { getClientConfig } from "@/app/config/client";
+import { getMessageTextContent } from "@/app/utils";
+
+export interface OpenAIListModelResponse {
+  object: string;
+  data: Array<{
+    id: string;
+    object: string;
+    root: string;
+  }>;
+}
+
+interface RequestPayload {
+  messages: {
+    role: "system" | "user" | "assistant";
+    content: string | MultimodalContent[];
+  }[];
+  stream?: boolean;
+  model: string;
+  temperature: number;
+  presence_penalty: number;
+  frequency_penalty: number;
+  top_p: number;
+  max_tokens?: number;
+}
+
+export class ErnieApi implements LLMApi {
+  path(path: string): string {
+    const accessStore = useAccessStore.getState();
+
+    let baseUrl = "";
+
+    if (accessStore.useCustomConfig) {
+      baseUrl = accessStore.baiduUrl;
+    }
+
+    if (baseUrl.length === 0) {
+      const isApp = !!getClientConfig()?.isApp;
+      // do not use proxy for baidubce api
+      baseUrl = isApp ? BAIDU_BASE_URL : ApiPath.Baidu;
+    }
+
+    if (baseUrl.endsWith("/")) {
+      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
+    }
+    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Baidu)) {
+      baseUrl = "https://" + baseUrl;
+    }
+
+    console.log("[Proxy Endpoint] ", baseUrl, path);
+
+    return [baseUrl, path].join("/");
+  }
+
+  async chat(options: ChatOptions) {
+    const messages = options.messages.map((v) => ({
+      role: v.role,
+      content: getMessageTextContent(v),
+    }));
+
+    // "error_code": 336006, "error_msg": "the length of messages must be an odd number",
+    if (messages.length % 2 === 0) {
+      messages.unshift({
+        role: "user",
+        content: " ",
+      });
+    }
+
+    const modelConfig = {
+      ...useAppConfig.getState().modelConfig,
+      ...useChatStore.getState().currentSession().mask.modelConfig,
+      ...{
+        model: options.config.model,
+      },
+    };
+
+    const shouldStream = !!options.config.stream;
+    const requestPayload: RequestPayload = {
+      messages,
+      stream: shouldStream,
+      model: modelConfig.model,
+      temperature: modelConfig.temperature,
+      presence_penalty: modelConfig.presence_penalty,
+      frequency_penalty: modelConfig.frequency_penalty,
+      top_p: modelConfig.top_p,
+    };
+
+    console.log("[Request] Baidu payload: ", requestPayload);
+
+    const controller = new AbortController();
+    options.onController?.(controller);
+
+    try {
+      let chatPath = this.path(Baidu.ChatPath(modelConfig.model));
+
+      // getAccessToken can not run in browser, because cors error
+      if (!!getClientConfig()?.isApp) {
+        const accessStore = useAccessStore.getState();
+        if (accessStore.useCustomConfig) {
+          if (accessStore.isValidBaidu()) {
+            const { access_token } = await getAccessToken(
+              accessStore.baiduApiKey,
+              accessStore.baiduSecretKey,
+            );
+            chatPath = `${chatPath}${
+              chatPath.includes("?") ? "&" : "?"
+            }access_token=${access_token}`;
+          }
+        }
+      }
+      const chatPayload = {
+        method: "POST",
+        body: JSON.stringify(requestPayload),
+        signal: controller.signal,
+        headers: getHeaders(),
+      };
+
+      // make a fetch request
+      const requestTimeoutId = setTimeout(
+        () => controller.abort(),
+        REQUEST_TIMEOUT_MS,
+      );
+
+      if (shouldStream) {
+        let responseText = "";
+        let remainText = "";
+        let finished = false;
+
+        // animate response to make it looks smooth
+        function animateResponseText() {
+          if (finished || controller.signal.aborted) {
+            responseText += remainText;
+            console.log("[Response Animation] finished");
+            if (responseText?.length === 0) {
+              options.onError?.(new Error("empty response from server"));
+            }
+            return;
+          }
+
+          if (remainText.length > 0) {
+            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
+            const fetchText = remainText.slice(0, fetchCount);
+            responseText += fetchText;
+            remainText = remainText.slice(fetchCount);
+            options.onUpdate?.(responseText, fetchText);
+          }
+
+          requestAnimationFrame(animateResponseText);
+        }
+
+        // start animaion
+        animateResponseText();
+
+        const finish = () => {
+          if (!finished) {
+            finished = true;
+            options.onFinish(responseText + remainText);
+          }
+        };
+
+        controller.signal.onabort = finish;
+
+        fetchEventSource(chatPath, {
+          ...chatPayload,
+          async onopen(res) {
+            clearTimeout(requestTimeoutId);
+            const contentType = res.headers.get("content-type");
+            console.log("[Baidu] request response content type: ", contentType);
+
+            if (contentType?.startsWith("text/plain")) {
+              responseText = await res.clone().text();
+              return finish();
+            }
+
+            if (
+              !res.ok ||
+              !res.headers
+                .get("content-type")
+                ?.startsWith(EventStreamContentType) ||
+              res.status !== 200
+            ) {
+              const responseTexts = [responseText];
+              let extraInfo = await res.clone().text();
+              try {
+                const resJson = await res.clone().json();
+                extraInfo = prettyObject(resJson);
+              } catch {}
+
+              if (res.status === 401) {
+                responseTexts.push(Locale.Error.Unauthorized);
+              }
+
+              if (extraInfo) {
+                responseTexts.push(extraInfo);
+              }
+
+              responseText = responseTexts.join("\n\n");
+
+              return finish();
+            }
+          },
+          onmessage(msg) {
+            if (msg.data === "[DONE]" || finished) {
+              return finish();
+            }
+            const text = msg.data;
+            try {
+              const json = JSON.parse(text);
+              const delta = json?.result;
+              if (delta) {
+                remainText += delta;
+              }
+            } catch (e) {
+              console.error("[Request] parse error", text, msg);
+            }
+          },
+          onclose() {
+            finish();
+          },
+          onerror(e) {
+            options.onError?.(e);
+            throw e;
+          },
+          openWhenHidden: true,
+        });
+      } else {
+        const res = await fetch(chatPath, chatPayload);
+        clearTimeout(requestTimeoutId);
+
+        const resJson = await res.json();
+        const message = resJson?.result;
+        options.onFinish(message);
+      }
+    } catch (e) {
+      console.log("[Request] failed to make a chat request", e);
+      options.onError?.(e as Error);
+    }
+  }
+  async usage() {
+    return {
+      used: 0,
+      total: 0,
+    };
+  }
+
+  async models(): Promise<LLMModel[]> {
+    return [];
+  }
+}
+export { Baidu };

app/client/platforms/bytedance.ts

@@ -0,0 +1,255 @@
+"use client";
+import {
+  ApiPath,
+  ByteDance,
+  BYTEDANCE_BASE_URL,
+  REQUEST_TIMEOUT_MS,
+} from "@/app/constant";
+import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
+
+import {
+  ChatOptions,
+  getHeaders,
+  LLMApi,
+  LLMModel,
+  MultimodalContent,
+} from "../api";
+import Locale from "../../locales";
+import {
+  EventStreamContentType,
+  fetchEventSource,
+} from "@fortaine/fetch-event-source";
+import { prettyObject } from "@/app/utils/format";
+import { getClientConfig } from "@/app/config/client";
+import { getMessageTextContent } from "@/app/utils";
+
+export interface OpenAIListModelResponse {
+  object: string;
+  data: Array<{
+    id: string;
+    object: string;
+    root: string;
+  }>;
+}
+
+interface RequestPayload {
+  messages: {
+    role: "system" | "user" | "assistant";
+    content: string | MultimodalContent[];
+  }[];
+  stream?: boolean;
+  model: string;
+  temperature: number;
+  presence_penalty: number;
+  frequency_penalty: number;
+  top_p: number;
+  max_tokens?: number;
+}
+
+export class DoubaoApi implements LLMApi {
+  path(path: string): string {
+    const accessStore = useAccessStore.getState();
+
+    let baseUrl = "";
+
+    if (accessStore.useCustomConfig) {
+      baseUrl = accessStore.bytedanceUrl;
+    }
+
+    if (baseUrl.length === 0) {
+      const isApp = !!getClientConfig()?.isApp;
+      baseUrl = isApp ? BYTEDANCE_BASE_URL : ApiPath.ByteDance;
+    }
+
+    if (baseUrl.endsWith("/")) {
+      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
+    }
+    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.ByteDance)) {
+      baseUrl = "https://" + baseUrl;
+    }
+
+    console.log("[Proxy Endpoint] ", baseUrl, path);
+
+    return [baseUrl, path].join("/");
+  }
+
+  extractMessage(res: any) {
+    return res.choices?.at(0)?.message?.content ?? "";
+  }
+
+  async chat(options: ChatOptions) {
+    const messages = options.messages.map((v) => ({
+      role: v.role,
+      content: getMessageTextContent(v),
+    }));
+
+    const modelConfig = {
+      ...useAppConfig.getState().modelConfig,
+      ...useChatStore.getState().currentSession().mask.modelConfig,
+      ...{
+        model: options.config.model,
+      },
+    };
+
+    const shouldStream = !!options.config.stream;
+    const requestPayload: RequestPayload = {
+      messages,
+      stream: shouldStream,
+      model: modelConfig.model,
+      temperature: modelConfig.temperature,
+      presence_penalty: modelConfig.presence_penalty,
+      frequency_penalty: modelConfig.frequency_penalty,
+      top_p: modelConfig.top_p,
+    };
+
+    const controller = new AbortController();
+    options.onController?.(controller);
+
+    try {
+      const chatPath = this.path(ByteDance.ChatPath);
+      const chatPayload = {
+        method: "POST",
+        body: JSON.stringify(requestPayload),
+        signal: controller.signal,
+        headers: getHeaders(),
+      };
+
+      // make a fetch request
+      const requestTimeoutId = setTimeout(
+        () => controller.abort(),
+        REQUEST_TIMEOUT_MS,
+      );
+
+      if (shouldStream) {
+        let responseText = "";
+        let remainText = "";
+        let finished = false;
+
+        // animate response to make it looks smooth
+        function animateResponseText() {
+          if (finished || controller.signal.aborted) {
+            responseText += remainText;
+            console.log("[Response Animation] finished");
+            if (responseText?.length === 0) {
+              options.onError?.(new Error("empty response from server"));
+            }
+            return;
+          }
+
+          if (remainText.length > 0) {
+            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
+            const fetchText = remainText.slice(0, fetchCount);
+            responseText += fetchText;
+            remainText = remainText.slice(fetchCount);
+            options.onUpdate?.(responseText, fetchText);
+          }
+
+          requestAnimationFrame(animateResponseText);
+        }
+
+        // start animaion
+        animateResponseText();
+
+        const finish = () => {
+          if (!finished) {
+            finished = true;
+            options.onFinish(responseText + remainText);
+          }
+        };
+
+        controller.signal.onabort = finish;
+
+        fetchEventSource(chatPath, {
+          ...chatPayload,
+          async onopen(res) {
+            clearTimeout(requestTimeoutId);
+            const contentType = res.headers.get("content-type");
+            console.log(
+              "[ByteDance] request response content type: ",
+              contentType,
+            );
+
+            if (contentType?.startsWith("text/plain")) {
+              responseText = await res.clone().text();
+              return finish();
+            }
+
+            if (
+              !res.ok ||
+              !res.headers
+                .get("content-type")
+                ?.startsWith(EventStreamContentType) ||
+              res.status !== 200
+            ) {
+              const responseTexts = [responseText];
+              let extraInfo = await res.clone().text();
+              try {
+                const resJson = await res.clone().json();
+                extraInfo = prettyObject(resJson);
+              } catch {}
+
+              if (res.status === 401) {
+                responseTexts.push(Locale.Error.Unauthorized);
+              }
+
+              if (extraInfo) {
+                responseTexts.push(extraInfo);
+              }
+
+              responseText = responseTexts.join("\n\n");
+
+              return finish();
+            }
+          },
+          onmessage(msg) {
+            if (msg.data === "[DONE]" || finished) {
+              return finish();
+            }
+            const text = msg.data;
+            try {
+              const json = JSON.parse(text);
+              const choices = json.choices as Array<{
+                delta: { content: string };
+              }>;
+              const delta = choices[0]?.delta?.content;
+              if (delta) {
+                remainText += delta;
+              }
+            } catch (e) {
+              console.error("[Request] parse error", text, msg);
+            }
+          },
+          onclose() {
+            finish();
+          },
+          onerror(e) {
+            options.onError?.(e);
+            throw e;
+          },
+          openWhenHidden: true,
+        });
+      } else {
+        const res = await fetch(chatPath, chatPayload);
+        clearTimeout(requestTimeoutId);
+
+        const resJson = await res.json();
+        const message = this.extractMessage(resJson);
+        options.onFinish(message);
+      }
+    } catch (e) {
+      console.log("[Request] failed to make a chat request", e);
+      options.onError?.(e as Error);
+    }
+  }
+  async usage() {
+    return {
+      used: 0,
+      total: 0,
+    };
+  }
+
+  async models(): Promise<LLMModel[]> {
+    return [];
+  }
+}
+export { ByteDance };

app/client/platforms/google.ts

@@ -3,6 +3,12 @@ import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
 import { getClientConfig } from "@/app/config/client";
 import { DEFAULT_API_HOST } from "@/app/constant";
+import Locale from "../../locales";
+import {
+  EventStreamContentType,
+  fetchEventSource,
+} from "@fortaine/fetch-event-source";
+import { prettyObject } from "@/app/utils/format";
 import {
   getMessageTextContent,
   getMessageImages,
@@ -20,7 +26,7 @@ export class GeminiProApi implements LLMApi {
     );
   }
   async chat(options: ChatOptions): Promise<void> {
-    // const apiClient = this;
+    const apiClient = this;
     let multimodal = false;
     const messages = options.messages.map((v) => {
       let parts: any[] = [{ text: getMessageTextContent(v) }];
@@ -147,10 +153,11 @@ export class GeminiProApi implements LLMApi {
         let remainText = "";
         let finished = false;
 
-        let existingTexts: string[] = [];
         const finish = () => {
-          finished = true;
+          if (!finished) {
-          options.onFinish(existingTexts.join(""));
+            finished = true;
+            options.onFinish(responseText + remainText);
+          }
         };
 
         // animate response to make it looks smooth
@@ -175,72 +182,85 @@ export class GeminiProApi implements LLMApi {
         // start animaion
         animateResponseText();
 
-        fetch(
+        controller.signal.onabort = finish;
-          baseUrl.replace("generateContent", "streamGenerateContent"),
-          chatPayload,
-        )
-          .then((response) => {
-            const reader = response?.body?.getReader();
-            const decoder = new TextDecoder();
-            let partialData = "";
 
-            return reader?.read().then(function processText({
+        // https://github.com/google-gemini/cookbook/blob/main/quickstarts/rest/Streaming_REST.ipynb
-              done,
+        const chatPath =
-              value,
+          baseUrl.replace("generateContent", "streamGenerateContent") +
-            }): Promise<any> {
+          (baseUrl.indexOf("?") > -1 ? "&alt=sse" : "?alt=sse");
-              if (done) {
+        fetchEventSource(chatPath, {
-                if (response.status !== 200) {
+          ...chatPayload,
-                  try {
+          async onopen(res) {
-                    let data = JSON.parse(ensureProperEnding(partialData));
+            clearTimeout(requestTimeoutId);
-                    if (data && data[0].error) {
+            const contentType = res.headers.get("content-type");
-                      options.onError?.(new Error(data[0].error.message));
+            console.log(
-                    } else {
+              "[Gemini] request response content type: ",
-                      options.onError?.(new Error("Request failed"));
+              contentType,
-                    }
+            );
-                  } catch (_) {
-                    options.onError?.(new Error("Request failed"));
-                  }
-                }
 
-                console.log("Stream complete");
+            if (contentType?.startsWith("text/plain")) {
-                // options.onFinish(responseText + remainText);
+              responseText = await res.clone().text();
-                finished = true;
+              return finish();
-                return Promise.resolve();
+            }
-              }
-
-              partialData += decoder.decode(value, { stream: true });
 
+            if (
+              !res.ok ||
+              !res.headers
+                .get("content-type")
+                ?.startsWith(EventStreamContentType) ||
+              res.status !== 200
+            ) {
+              const responseTexts = [responseText];
+              let extraInfo = await res.clone().text();
               try {
-                let data = JSON.parse(ensureProperEnding(partialData));
+                const resJson = await res.clone().json();
+                extraInfo = prettyObject(resJson);
+              } catch {}
 
-                const textArray = data.reduce(
+              if (res.status === 401) {
-                  (acc: string[], item: { candidates: any[] }) => {
+                responseTexts.push(Locale.Error.Unauthorized);
-                    const texts = item.candidates.map((candidate) =>
-                      candidate.content.parts
-                        .map((part: { text: any }) => part.text)
-                        .join(""),
-                    );
-                    return acc.concat(texts);
-                  },
-                  [],
-                );
-
-                if (textArray.length > existingTexts.length) {
-                  const deltaArray = textArray.slice(existingTexts.length);
-                  existingTexts = textArray;
-                  remainText += deltaArray.join("");
-                }
-              } catch (error) {
-                // console.log("[Response Animation] error: ", error,partialData);
-                // skip error message when parsing json
               }
 
-              return reader.read().then(processText);
+              if (extraInfo) {
-            });
+                responseTexts.push(extraInfo);
-          })
+              }
-          .catch((error) => {
+
-            console.error("Error:", error);
+              responseText = responseTexts.join("\n\n");
-          });
+
+              return finish();
+            }
+          },
+          onmessage(msg) {
+            if (msg.data === "[DONE]" || finished) {
+              return finish();
+            }
+            const text = msg.data;
+            try {
+              const json = JSON.parse(text);
+              const delta = apiClient.extractMessage(json);
+
+              if (delta) {
+                remainText += delta;
+              }
+
+              const blockReason = json?.promptFeedback?.blockReason;
+              if (blockReason) {
+                // being blocked
+                console.log(`[Google] [Safety Ratings] result:`, blockReason);
+              }
+            } catch (e) {
+              console.error("[Request] parse error", text, msg);
+            }
+          },
+          onclose() {
+            finish();
+          },
+          onerror(e) {
+            options.onError?.(e);
+            throw e;
+          },
+          openWhenHidden: true,
+        });
       } else {
         const res = await fetch(baseUrl, chatPayload);
         clearTimeout(requestTimeoutId);
@@ -254,7 +274,7 @@ export class GeminiProApi implements LLMApi {
             ),
           );
         }
-        const message = this.extractMessage(resJson);
+        const message = apiClient.extractMessage(resJson);
         options.onFinish(message);
       }
     } catch (e) {

app/client/platforms/openai.ts

@@ -1,14 +1,17 @@
 "use client";
+// azure and openai, using same models. so using same LLMApi.
 import {
   ApiPath,
   AZURE_MODELS,
   DEFAULT_API_HOST,
   DEFAULT_MODELS,
   OpenaiPath,
+  Azure,
   REQUEST_TIMEOUT_MS,
   ServiceProvider,
 } from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
+import { collectModelsWithDefaultModel } from "@/app/utils/model";
 
 import {
   ChatOptions,
@@ -25,7 +28,6 @@ import {
 } from "@fortaine/fetch-event-source";
 import { prettyObject } from "@/app/utils/format";
 import { getClientConfig } from "@/app/config/client";
-import { makeAzurePath } from "@/app/azure";
 import {
   getMessageTextContent,
   getMessageImages,
@@ -41,7 +43,7 @@ export interface OpenAIListModelResponse {
   }>;
 }
 
-interface RequestPayload {
+export interface RequestPayload {
   messages: {
     role: "system" | "user" | "assistant";
     content: string | MultimodalContent[];
@@ -63,33 +65,31 @@ export class ChatGPTApi implements LLMApi {
 
     let baseUrl = "";
 
+    // const isAzure = path.includes("deployments");
     if (accessStore.useCustomConfig) {
-      // const isAzure = accessStore.provider === ServiceProvider.Azure;
-
       if (isAzure && !accessStore.isValidAzure()) {
         throw Error(
           "incomplete azure config, please check it in your settings page",
         );
       }
 
-      if (isAzure) {
-        path = makeAzurePath(path, accessStore.azureApiVersion);
-      }
-
       baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
     }
 
     if (baseUrl.length === 0) {
       const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp
+      const apiPath = isAzure ? ApiPath.Azure : ApiPath.OpenAI;
-        ? DEFAULT_API_HOST + "/proxy" + ApiPath.OpenAI
+      baseUrl = isApp ? DEFAULT_API_HOST + "/proxy" + apiPath : apiPath;
-        : ApiPath.OpenAI;
     }
 
     if (baseUrl.endsWith("/")) {
       baseUrl = baseUrl.slice(0, baseUrl.length - 1);
     }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.OpenAI)) {
+    if (
+      !baseUrl.startsWith("http") &&
+      !isAzure &&
+      !baseUrl.startsWith(ApiPath.OpenAI)
+    ) {
       baseUrl = "https://" + baseUrl;
     }
 
@@ -118,6 +118,7 @@ export class ChatGPTApi implements LLMApi {
       ...useChatStore.getState().currentSession().mask.modelConfig,
       ...{
         model: options.config.model,
+        providerName: options.config.providerName,
       },
     };
     const is_azure = AZURE_MODELS.includes(modelConfig.model);
@@ -146,11 +147,37 @@ export class ChatGPTApi implements LLMApi {
     options.onController?.(controller);
 
     try {
-      let chatPath = this.path(
+      let chatPath = "";
-        OpenaiPath.ChatPath,
+      if (modelConfig.providerName === ServiceProvider.Azure) {
-        is_azure,
+        // find model, and get displayName as deployName
-        modelConfig.model,
+        const { models: configModels, customModels: configCustomModels } =
-      );
+          useAppConfig.getState();
+        const {
+          defaultModel,
+          customModels: accessCustomModels,
+          useCustomConfig,
+        } = useAccessStore.getState();
+        const models = collectModelsWithDefaultModel(
+          configModels,
+          [configCustomModels, accessCustomModels].join(","),
+          defaultModel,
+        );
+        const model = models.find(
+          (model) =>
+            model.name === modelConfig.model &&
+            model?.provider?.providerName === ServiceProvider.Azure,
+        );
+        chatPath = this.path(
+          Azure.ChatPath(
+            (model?.displayName ?? model?.name) as string,
+            useCustomConfig ? useAccessStore.getState().azureApiVersion : "",
+          ),
+          is_azure,
+          modelConfig.model,
+        );
+      } else {
+        chatPath = this.path(OpenaiPath.ChatPath);
+      }
       const chatPayload = {
         method: "POST",
         body: JSON.stringify(requestPayload),

app/components/chat.tsx

@@ -92,6 +92,7 @@ import {
   Path,
   REQUEST_TIMEOUT_MS,
   UNFINISHED_INPUT,
+  ServiceProvider,
 } from "../constant";
 import { Avatar } from "./emoji";
 // import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
@@ -471,6 +472,9 @@ export function ChatActions(props: {
 
   // switch model
   const currentModel = chatStore.currentSession().mask.modelConfig.model;
+  const currentProviderName =
+    chatStore.currentSession().mask.modelConfig?.providerName ||
+    ServiceProvider.OpenAI;
   const allModels = useAllModels();
   const models = useMemo(() => {
     const filteredModels = allModels.filter((m) => m.available);
@@ -486,6 +490,14 @@ export function ChatActions(props: {
       return filteredModels;
     }
   }, [allModels]);
+  const currentModelName = useMemo(() => {
+    const model = models.find(
+      (m) =>
+        m.name == currentModel &&
+        m?.provider?.providerName == currentProviderName,
+    );
+    return model?.displayName ?? "";
+  }, [models, currentModel, currentProviderName]);
   const [showModelSelector, setShowModelSelector] = useState(false);
   const [showUploadImage, setShowUploadImage] = useState(false);
   const current_day_token = localStorage.getItem("current_day_token") ?? "";
@@ -503,13 +515,17 @@ export function ChatActions(props: {
     const isUnavaliableModel = !models.some((m) => m.name === currentModel);
     if (isUnavaliableModel && models.length > 0) {
       // show next model to default model if exist
-      let nextModel: ModelType = (
+      let nextModel = models.find((model) => model.isDefault) || models[0];
-        models.find((model) => model.isDefault) || models[0]
+      chatStore.updateCurrentSession((session) => {
-      ).name as ModelType;
+        session.mask.modelConfig.model = nextModel.name;
-      chatStore.updateCurrentSession(
+        session.mask.modelConfig.providerName = nextModel?.provider
-        (session) => (session.mask.modelConfig.model = nextModel),
+          ?.providerName as ServiceProvider;
+      });
+      showToast(
+        nextModel?.provider?.providerName == "ByteDance"
+          ? nextModel.displayName
+          : nextModel.name,
       );
-      showToast(nextModel);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chatStore, currentModel, models]);
@@ -592,7 +608,7 @@ export function ChatActions(props: {
 
       <ChatAction
         onClick={() => setShowModelSelector(true)}
-        text={currentModel}
+        text={currentModelName}
         icon={<RobotIcon />}
       />
 
@@ -610,21 +626,36 @@ export function ChatActions(props: {
       {/*/>*/}
 
       {showModelSelector && (
-        <ModalSelector
+        <Selector
-          defaultSelectedValue={currentModel}
+          defaultSelectedValue={`${currentModel}@${currentProviderName}`}
           items={models.map((m) => ({
-            title: m.displayName,
+            title: `${m.displayName}${
+              m?.provider?.providerName
+                ? "(" + m?.provider?.providerName + ")"
+                : ""
+            }`,
             subTitle: m.describe,
-            value: m.name,
+            value: `${m.name}@${m?.provider?.providerName}`,
           }))}
           onClose={() => setShowModelSelector(false)}
           onSelection={(s) => {
             if (s.length === 0) return;
+            const [model, providerName] = s[0].split("@");
             chatStore.updateCurrentSession((session) => {
-              session.mask.modelConfig.model = s[0] as ModelType;
+              session.mask.modelConfig.model = model as ModelType;
+              session.mask.modelConfig.providerName =
+                providerName as ServiceProvider;
               session.mask.syncGlobalConfig = false;
             });
-            showToast(s[0]);
+            if (providerName == "ByteDance") {
+              const selectedModel = models.find(
+                (m) =>
+                  m.name == model && m?.provider?.providerName == providerName,
+              );
+              showToast(selectedModel?.displayName ?? "");
+            } else {
+              showToast(model);
+            }
           }}
         />
       )}

app/components/exporter.tsx

@@ -36,11 +36,10 @@ import { toBlob, toPng } from "html-to-image";
 import { DEFAULT_MASK_AVATAR } from "../store/mask";
 
 import { prettyObject } from "../utils/format";
-import { EXPORT_MESSAGE_CLASS_NAME, ModelProvider } from "../constant";
+import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
+import { type ClientApi, getClientApi } from "../client/api";
 import { getMessageTextContent } from "../utils";
-import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -313,14 +312,7 @@ export function PreviewActions(props: {
   const onRenderMsgs = (msgs: ChatMessage[]) => {
     setShouldExport(false);
 
-    var api: ClientApi;
+    const api: ClientApi = getClientApi(config.modelConfig.providerName);
-    if (config.modelConfig.model.startsWith("gemini")) {
-      api = new ClientApi(ModelProvider.GeminiPro);
-    } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-      api = new ClientApi(ModelProvider.Claude);
-    } else {
-      api = new ClientApi(ModelProvider.GPT);
-    }
 
     api
       .share(msgs)

app/components/home.tsx

@@ -12,7 +12,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { ModelProvider, Path, SlotID } from "../constant";
+import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
 import { getISOLang, getLang } from "../locales";
@@ -27,9 +27,8 @@ import { SideBar } from "./sidebar";
 import { useAppConfig } from "@/app/store";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
+import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
-import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -174,14 +173,8 @@ function Screen() {
 export function useLoadData() {
   const config = useAppConfig();
 
-  var api: ClientApi;
+  const api: ClientApi = getClientApi(config.modelConfig.providerName);
-  if (config.modelConfig.model.startsWith("gemini")) {
+
-    api = new ClientApi(ModelProvider.GeminiPro);
-  } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-    api = new ClientApi(ModelProvider.Claude);
-  } else {
-    api = new ClientApi(ModelProvider.GPT);
-  }
   useEffect(() => {
     (async () => {
       const models = await api.llm.models();

app/components/model-config.tsx

@@ -1,3 +1,4 @@
+import { ServiceProvider } from "@/app/constant";
 import { ModalConfigValidator, ModelConfig } from "../store";
 
 import Locale from "../locales";
@@ -10,25 +11,25 @@ export function ModelConfigList(props: {
   updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
   const allModels = useAllModels();
+  const value = `${props.modelConfig.model}@${props.modelConfig?.providerName}`;
 
   return (
     <>
       <ListItem title={Locale.Settings.Model}>
         <Select
-          value={props.modelConfig.model}
+          value={value}
           onChange={(e) => {
-            props.updateConfig(
+            const [model, providerName] = e.currentTarget.value.split("@");
-              (config) =>
+            props.updateConfig((config) => {
-                (config.model = ModalConfigValidator.model(
+              config.model = ModalConfigValidator.model(model);
-                  e.currentTarget.value,
+              config.providerName = providerName as ServiceProvider;
-                )),
+            });
-            );
           }}
         >
           {allModels
             .filter((v) => v.available)
             .map((v, i) => (
-              <option value={v.name} key={i}>
+              <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
                 {v.displayName}({v.provider?.providerName})
               </option>
             ))}
@@ -92,7 +93,7 @@ export function ModelConfigList(props: {
         ></input>
       </ListItem>
 
-      {props.modelConfig.model.startsWith("gemini") ? null : (
+      {props.modelConfig?.providerName == ServiceProvider.Google ? null : (
         <>
           <ListItem
             title={Locale.Settings.PresencePenalty.Title}

app/components/settings.tsx

@@ -53,6 +53,9 @@ import Link from "next/link";
 import {
   Anthropic,
   Azure,
+  Baidu,
+  ByteDance,
+  Alibaba,
   Google,
   OPENAI_BASE_URL,
   Path,
@@ -1187,6 +1190,156 @@ export function Settings() {
         {/*            </ListItem>*/}
         {/*          </>*/}
         {/*        )}*/}
+        {/*        {accessStore.provider === ServiceProvider.Baidu && (*/}
+        {/*          <>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.Baidu.Endpoint.Title}*/}
+        {/*              subTitle={*/}
+        {/*                Locale.Settings.Access.Anthropic.Endpoint.SubTitle +*/}
+        {/*                Baidu.ExampleEndpoint*/}
+        {/*              }*/}
+        {/*            >*/}
+        {/*              <input*/}
+        {/*                type="text"*/}
+        {/*                value={accessStore.baiduUrl}*/}
+        {/*                placeholder={Baidu.ExampleEndpoint}*/}
+        {/*                onChange={(e) =>*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.baiduUrl = e.currentTarget.value),*/}
+        {/*                  )*/}
+        {/*                }*/}
+        {/*              ></input>*/}
+        {/*            </ListItem>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.Baidu.ApiKey.Title}*/}
+        {/*              subTitle={Locale.Settings.Access.Baidu.ApiKey.SubTitle}*/}
+        {/*            >*/}
+        {/*              <PasswordInput*/}
+        {/*                value={accessStore.baiduApiKey}*/}
+        {/*                type="text"*/}
+        {/*                placeholder={*/}
+        {/*                  Locale.Settings.Access.Baidu.ApiKey.Placeholder*/}
+        {/*                }*/}
+        {/*                onChange={(e) => {*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.baiduApiKey = e.currentTarget.value),*/}
+        {/*                  );*/}
+        {/*                }}*/}
+        {/*              />*/}
+        {/*            </ListItem>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.Baidu.SecretKey.Title}*/}
+        {/*              subTitle={*/}
+        {/*                Locale.Settings.Access.Baidu.SecretKey.SubTitle*/}
+        {/*              }*/}
+        {/*            >*/}
+        {/*              <PasswordInput*/}
+        {/*                value={accessStore.baiduSecretKey}*/}
+        {/*                type="text"*/}
+        {/*                placeholder={*/}
+        {/*                  Locale.Settings.Access.Baidu.SecretKey.Placeholder*/}
+        {/*                }*/}
+        {/*                onChange={(e) => {*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.baiduSecretKey = e.currentTarget.value),*/}
+        {/*                  );*/}
+        {/*                }}*/}
+        {/*              />*/}
+        {/*            </ListItem>*/}
+        {/*          </>*/}
+        {/*        )}*/}
+
+        {/*        {accessStore.provider === ServiceProvider.ByteDance && (*/}
+        {/*          <>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.ByteDance.Endpoint.Title}*/}
+        {/*              subTitle={*/}
+        {/*                Locale.Settings.Access.ByteDance.Endpoint.SubTitle +*/}
+        {/*                ByteDance.ExampleEndpoint*/}
+        {/*              }*/}
+        {/*            >*/}
+        {/*              <input*/}
+        {/*                type="text"*/}
+        {/*                value={accessStore.bytedanceUrl}*/}
+        {/*                placeholder={ByteDance.ExampleEndpoint}*/}
+        {/*                onChange={(e) =>*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.bytedanceUrl = e.currentTarget.value),*/}
+        {/*                  )*/}
+        {/*                }*/}
+        {/*              ></input>*/}
+        {/*            </ListItem>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.ByteDance.ApiKey.Title}*/}
+        {/*              subTitle={*/}
+        {/*                Locale.Settings.Access.ByteDance.ApiKey.SubTitle*/}
+        {/*              }*/}
+        {/*            >*/}
+        {/*              <PasswordInput*/}
+        {/*                value={accessStore.bytedanceApiKey}*/}
+        {/*                type="text"*/}
+        {/*                placeholder={*/}
+        {/*                  Locale.Settings.Access.ByteDance.ApiKey.Placeholder*/}
+        {/*                }*/}
+        {/*                onChange={(e) => {*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.bytedanceApiKey =*/}
+        {/*                        e.currentTarget.value),*/}
+        {/*                  );*/}
+        {/*                }}*/}
+        {/*              />*/}
+        {/*            </ListItem>*/}
+        {/*          </>*/}
+        {/*        )}*/}
+
+        {/*        {accessStore.provider === ServiceProvider.Alibaba && (*/}
+        {/*          <>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.Alibaba.Endpoint.Title}*/}
+        {/*              subTitle={*/}
+        {/*                Locale.Settings.Access.Alibaba.Endpoint.SubTitle +*/}
+        {/*                Alibaba.ExampleEndpoint*/}
+        {/*              }*/}
+        {/*            >*/}
+        {/*              <input*/}
+        {/*                type="text"*/}
+        {/*                value={accessStore.alibabaUrl}*/}
+        {/*                placeholder={Alibaba.ExampleEndpoint}*/}
+        {/*                onChange={(e) =>*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.alibabaUrl = e.currentTarget.value),*/}
+        {/*                  )*/}
+        {/*                }*/}
+        {/*              ></input>*/}
+        {/*            </ListItem>*/}
+        {/*            <ListItem*/}
+        {/*              title={Locale.Settings.Access.Alibaba.ApiKey.Title}*/}
+        {/*              subTitle={*/}
+        {/*                Locale.Settings.Access.Alibaba.ApiKey.SubTitle*/}
+        {/*              }*/}
+        {/*            >*/}
+        {/*              <PasswordInput*/}
+        {/*                value={accessStore.alibabaApiKey}*/}
+        {/*                type="text"*/}
+        {/*                placeholder={*/}
+        {/*                  Locale.Settings.Access.Alibaba.ApiKey.Placeholder*/}
+        {/*                }*/}
+        {/*                onChange={(e) => {*/}
+        {/*                  accessStore.update(*/}
+        {/*                    (access) =>*/}
+        {/*                      (access.alibabaApiKey = e.currentTarget.value),*/}
+        {/*                  );*/}
+        {/*                }}*/}
+        {/*              />*/}
+        {/*            </ListItem>*/}
+        {/*          </>*/}
+        {/*        )}*/}
         {/*      </>*/}
         {/*    )}*/}
         {/*  </>*/}

app/config/server.ts

@@ -37,6 +37,24 @@ declare global {
       // google tag manager
       GTM_ID?: string;
 
+      // anthropic only
+      ANTHROPIC_URL?: string;
+      ANTHROPIC_API_KEY?: string;
+      ANTHROPIC_API_VERSION?: string;
+
+      // baidu only
+      BAIDU_URL?: string;
+      BAIDU_API_KEY?: string;
+      BAIDU_SECRET_KEY?: string;
+
+      // bytedance only
+      BYTEDANCE_URL?: string;
+      BYTEDANCE_API_KEY?: string;
+
+      // alibaba only
+      ALIBABA_URL?: string;
+      ALIBABA_API_KEY?: string;
+
       // custom template for preprocessing user input
       DEFAULT_INPUT_TEMPLATE?: string;
     }
@@ -99,6 +117,9 @@ export const getServerSideConfig = () => {
   // const isAzure = !!process.env.AZURE_URL;
   const hasAzure = !!process.env.AZURE_URL;
 
+  const isBaidu = !!process.env.BAIDU_API_KEY;
+  const isBytedance = !!process.env.BYTEDANCE_API_KEY;
+  const isAlibaba = !!process.env.ALIBABA_API_KEY;
   // const apiKeyEnvVar = process.env.OPENAI_API_KEY ?? "";
   // const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
   // const randomIndex = Math.floor(Math.random() * apiKeys.length);
@@ -131,6 +152,19 @@ export const getServerSideConfig = () => {
     anthropicApiVersion: process.env.ANTHROPIC_API_VERSION,
     anthropicUrl: process.env.ANTHROPIC_URL,
 
+    isBaidu,
+    baiduUrl: process.env.BAIDU_URL,
+    baiduApiKey: getApiKey(process.env.BAIDU_API_KEY),
+    baiduSecretKey: process.env.BAIDU_SECRET_KEY,
+
+    isBytedance,
+    bytedanceApiKey: getApiKey(process.env.BYTEDANCE_API_KEY),
+    bytedanceUrl: process.env.BYTEDANCE_URL,
+
+    isAlibaba,
+    alibabaUrl: process.env.ALIBABA_URL,
+    alibabaApiKey: getApiKey(process.env.ALIBABA_API_KEY),
+
     gtmId: process.env.GTM_ID,
 
     needCode: ACCESS_CODES.size > 0,

app/constant.ts

@@ -14,6 +14,13 @@ export const ANTHROPIC_BASE_URL = "https://api.anthropic.com";
 
 export const GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/";
 
+export const BAIDU_BASE_URL = "https://aip.baidubce.com";
+export const BAIDU_OATUH_URL = `${BAIDU_BASE_URL}/oauth/2.0/token`;
+
+export const BYTEDANCE_BASE_URL = "https://ark.cn-beijing.volces.com";
+
+export const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/api/";
+
 export enum Path {
   Home = "/",
   Chat = "/chat",
@@ -26,8 +33,12 @@ export enum Path {
 
 export enum ApiPath {
   Cors = "",
+  Azure = "/api/azure",
   OpenAI = "/api/openai",
   Anthropic = "/api/anthropic",
+  Baidu = "/api/baidu",
+  ByteDance = "/api/bytedance",
+  Alibaba = "/api/alibaba",
 }
 
 export enum SlotID {
@@ -71,12 +82,18 @@ export enum ServiceProvider {
   Azure = "Azure",
   Google = "Google",
   Anthropic = "Anthropic",
+  Baidu = "Baidu",
+  ByteDance = "ByteDance",
+  Alibaba = "Alibaba",
 }
 
 export enum ModelProvider {
   GPT = "GPT",
   GeminiPro = "GeminiPro",
   Claude = "Claude",
+  Ernie = "Ernie",
+  Doubao = "Doubao",
+  Qwen = "Qwen",
 }
 
 export const Anthropic = {
@@ -97,6 +114,8 @@ export const OpenaiPath = {
 };
 
 export const Azure = {
+  ChatPath: (deployName: string, apiVersion: string) =>
+    `deployments/${deployName}/chat/completions?api-version=${apiVersion}`,
   ExampleEndpoint: "https://{resource-url}/openai/deployments/{deploy-id}",
 };
 
@@ -107,6 +126,33 @@ export const Google = {
   //   `v1beta/models/${modelName}:generateContent`,
 };
 
+export const Baidu = {
+  ExampleEndpoint: BAIDU_BASE_URL,
+  ChatPath: (modelName: string) => {
+    let endpoint = modelName;
+    if (modelName === "ernie-4.0-8k") {
+      endpoint = "completions_pro";
+    }
+    if (modelName === "ernie-4.0-8k-preview-0518") {
+      endpoint = "completions_adv_pro";
+    }
+    if (modelName === "ernie-3.5-8k") {
+      endpoint = "completions";
+    }
+    return `rpc/2.0/ai_custom/v1/wenxinworkshop/chat/${endpoint}`;
+  },
+};
+
+export const ByteDance = {
+  ExampleEndpoint: "https://ark.cn-beijing.volces.com/api/",
+  ChatPath: "api/v3/chat/completions",
+};
+
+export const Alibaba = {
+  ExampleEndpoint: ALIBABA_BASE_URL,
+  ChatPath: "v1/services/aigc/text-generation/generation",
+};
+
 export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
 // export const DEFAULT_SYSTEM_TEMPLATE = `
 // You are ChatGPT, a large language model trained by {{ServiceProvider}}.
@@ -156,6 +202,7 @@ const openaiModels = [
   "gpt-4o-2024-05-13",
   "gpt-4-vision-preview",
   "gpt-4-turbo-2024-04-09",
+  "gpt-4-1106-preview",
 ];
 
 const googleModels = [
@@ -175,35 +222,34 @@ const anthropicModels = [
   "claude-3-5-sonnet-20240620",
 ];
 
-// export const DEFAULT_MODELS = [
+const baiduModels = [
-//   ...openaiModels.map((name) => ({
+  "ernie-4.0-turbo-8k",
-//     name,
+  "ernie-4.0-8k",
-//     available: true,
+  "ernie-4.0-8k-preview",
-//     provider: {
+  "ernie-4.0-8k-preview-0518",
-//       id: "openai",
+  "ernie-4.0-8k-latest",
-//       providerName: "OpenAI",
+  "ernie-3.5-8k",
-//       providerType: "openai",
+  "ernie-3.5-8k-0205",
-//     },
+];
-//   })),
+
-//   ...googleModels.map((name) => ({
+const bytedanceModels = [
-//     name,
+  "Doubao-lite-4k",
-//     available: true,
+  "Doubao-lite-32k",
-//     provider: {
+  "Doubao-lite-128k",
-//       id: "google",
+  "Doubao-pro-4k",
-//       providerName: "Google",
+  "Doubao-pro-32k",
-//       providerType: "google",
+  "Doubao-pro-128k",
-//     },
+];
-//   })),
+
-//   ...anthropicModels.map((name) => ({
+const alibabaModes = [
-//     name,
+  "qwen-turbo",
-//     available: true,
+  "qwen-plus",
-//     provider: {
+  "qwen-max",
-//       id: "anthropic",
+  "qwen-max-0428",
-//       providerName: "Anthropic",
+  "qwen-max-0403",
-//       providerType: "anthropic",
+  "qwen-max-0107",
-//     },
+  "qwen-max-longcontext",
-//   })),
+];
-// ] as const;
 
 export const DEFAULT_MODELS = [
   {
@@ -236,16 +282,6 @@ export const DEFAULT_MODELS = [
       providerType: "openai",
     },
   },
-  // {
-  //   name: "gpt-35-turbo-0125",
-  //   describe: "GPT-3,微软,备用",
-  //   available: true,
-  //   provider: {
-  //     id: "openai",
-  //     providerName: "OpenAI",
-  //     providerType: "openai",
-  //   },
-  // },
   {
     name: "claude-3-5-sonnet-20240620",
     describe: "claude第三代模型最强版",
@@ -256,16 +292,6 @@ export const DEFAULT_MODELS = [
       providerType: "openai",
     },
   },
-  // {
-  //   name: "gpt-4o-2024-05-13",
-  //   available: true,
-  //   describe: "GPT-4多模态,原生代理",
-  //   provider: {
-  //     id: "openai",
-  //     providerName: "OpenAI",
-  //     providerType: "openai",
-  //   },
-  // },
   {
     name: "gemini-1.5-pro-latest",
     available: true,
@@ -286,26 +312,6 @@ export const DEFAULT_MODELS = [
       providerType: "openai",
     },
   },
-  // {
-  //   name: "gpt-4-32k",
-  //   describe: "GPT-4,聪明,慢,但是白嫖",
-  //   available: false,
-  // },
-  // {
-  //   name: "gpt-4-all",
-  //   describe: "GPT-4全能版,联网绘图多模态,又慢又贵",
-  //   available: false,
-  // },
-  // {
-  //   name: "gpt-4v",
-  //   describe: "GPT-4,官方网页版,最聪明,贵且慢",
-  //   available: true,
-  // },
-  // {
-  //   name: "net-gpt-4",
-  //   describe: "GPT-4,联网版,最慢",
-  //   available: true,
-  // },
   {
     name: "midjourney",
     describe: "绘图用,不用选",

app/layout.tsx

@@ -3,13 +3,32 @@ import "./styles/globals.scss";
 import "./styles/markdown.scss";
 import "./styles/highlight.scss";
 import { getClientConfig } from "./config/client";
-import { type Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { getServerSideConfig } from "./config/server";
 import { GoogleTagManager } from "@next/third-parties/google";
 const serverConfig = getServerSideConfig();
 import { Providers } from "@/app/providers";
-import { Viewport } from "next";
+// import { Viewport } from "next";
+
+// export const metadata: Metadata = {
+//     title: "NextChat",
+//     description: "Your personal ChatGPT Chat Bot.",
+//     appleWebApp: {
+//         title: "NextChat",
+//         statusBarStyle: "default",
+//     },
+// };
+//
+// export const viewport: Viewport = {
+//     width: "device-width",
+//     initialScale: 1,
+//     maximumScale: 1,
+//     themeColor: [
+//         { media: "(prefers-color-scheme: light)", color: "#fafafa" },
+//         { media: "(prefers-color-scheme: dark)", color: "#151515" },
+//     ],
+// };
 
 export const viewport: Viewport = {
   themeColor: [
@@ -29,7 +48,6 @@ export const metadata: Metadata = {
     statusBarStyle: "default",
   },
 };
-
 export default function RootLayout({
   children,
 }: {
@@ -44,14 +62,19 @@ export default function RootLayout({
           type="image/x-icon"
           href="https://oss.xiaosi.cc/chat/public/favicon.ico"
         />
-        <link
+        {/*<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />*/}
-          rel="manifest"
+
-          href="https://oss.xiaosi.cc/chat/public/site.webmanifest"
+        {/*<link*/}
-        ></link>
+        {/*  rel="manifest"*/}
-        <script
+        {/*  href="https://oss.xiaosi.cc/chat/public/site.webmanifest"*/}
-          src="https://oss.xiaosi.cc/chat/public/serviceWorkerRegister.js"
+        {/*></link>*/}
-          defer
+        <link rel="manifest" href="/site.webmanifest"></link>
-        ></script>
+        <script src="/serviceWorkerRegister.js" defer></script>
+
+        {/*  <script*/}
+        {/*  src="https://oss.xiaosi.cc/chat/public/serviceWorkerRegister.js"*/}
+        {/*  defer*/}
+        {/*></script>*/}
       </head>
       <body>
         <Providers>{children}</Providers>

app/locales/cn.ts

@@ -387,6 +387,44 @@ const cn = {
           SubTitle: "选择一个特定的 API 版本",
         },
       },
+      Baidu: {
+        ApiKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义 Baidu API Key",
+          Placeholder: "Baidu API Key",
+        },
+        SecretKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义 Baidu Secret Key",
+          Placeholder: "Baidu Secret Key",
+        },
+        Endpoint: {
+          Title: "接口地址",
+          SubTitle: "样例：",
+        },
+      },
+      ByteDance: {
+        ApiKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义 ByteDance API Key",
+          Placeholder: "ByteDance API Key",
+        },
+        Endpoint: {
+          Title: "接口地址",
+          SubTitle: "样例：",
+        },
+      },
+      Alibaba: {
+        ApiKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义阿里云API Key",
+          Placeholder: "Alibaba Cloud API Key",
+        },
+        Endpoint: {
+          Title: "接口地址",
+          SubTitle: "样例：",
+        },
+      },
       CustomModel: {
         Title: "自定义模型名",
         SubTitle: "增加自定义模型可选项，使用英文逗号隔开",

app/locales/en.ts

@@ -374,6 +374,44 @@ const en: LocaleType = {
           SubTitle: "Select and input a specific API version",
         },
       },
+      Baidu: {
+        ApiKey: {
+          Title: "Baidu API Key",
+          SubTitle: "Use a custom Baidu API Key",
+          Placeholder: "Baidu API Key",
+        },
+        SecretKey: {
+          Title: "Baidu Secret Key",
+          SubTitle: "Use a custom Baidu Secret Key",
+          Placeholder: "Baidu Secret Key",
+        },
+        Endpoint: {
+          Title: "Endpoint Address",
+          SubTitle: "Example:",
+        },
+      },
+      ByteDance: {
+        ApiKey: {
+          Title: "ByteDance API Key",
+          SubTitle: "Use a custom ByteDance API Key",
+          Placeholder: "ByteDance API Key",
+        },
+        Endpoint: {
+          Title: "Endpoint Address",
+          SubTitle: "Example:",
+        },
+      },
+      Alibaba: {
+        ApiKey: {
+          Title: "Alibaba API Key",
+          SubTitle: "Use a custom Alibaba Cloud API Key",
+          Placeholder: "Alibaba Cloud API Key",
+        },
+        Endpoint: {
+          Title: "Endpoint Address",
+          SubTitle: "Example:",
+        },
+      },
       CustomModel: {
         Title: "Custom Models",
         SubTitle: "Custom model options, seperated by comma",

app/locales/index.ts

@@ -97,7 +97,17 @@ function setItem(key: string, value: string) {
 
 function getLanguage() {
   try {
-    return navigator.language.toLowerCase();
+    const locale = new Intl.Locale(navigator.language).maximize();
+    const region = locale?.region?.toLowerCase();
+    // 1. check region code in ALL_LANGS
+    if (AllLangs.includes(region as Lang)) {
+      return region as Lang;
+    }
+    // 2. check language code in ALL_LANGS
+    if (AllLangs.includes(locale.language as Lang)) {
+      return locale.language as Lang;
+    }
+    return DEFAULT_LANG;
   } catch {
     return DEFAULT_LANG;
   }
@@ -110,15 +120,7 @@ export function getLang(): Lang {
     return savedLang as Lang;
   }
 
-  const lang = getLanguage();
+  return getLanguage();
-
-  for (const option of AllLangs) {
-    if (lang.includes(option)) {
-      return option;
-    }
-  }
-
-  return DEFAULT_LANG;
 }
 
 export function changeLang(lang: Lang) {

app/masks/build.ts

@@ -0,0 +1,25 @@
+import fs from "fs";
+import path from "path";
+import { CN_MASKS } from "./cn";
+import { TW_MASKS } from "./tw";
+import { EN_MASKS } from "./en";
+
+import { type BuiltinMask } from "./typing";
+
+const BUILTIN_MASKS: Record<string, BuiltinMask[]> = {
+  cn: CN_MASKS,
+  tw: TW_MASKS,
+  en: EN_MASKS,
+};
+
+const dirname = path.dirname(__filename);
+
+fs.writeFile(
+  dirname + "/../../public/masks.json",
+  JSON.stringify(BUILTIN_MASKS, null, 4),
+  function (error) {
+    if (error) {
+      console.error("[Build] failed to build masks", error);
+    }
+  },
+);

app/masks/index.ts

@@ -21,6 +21,20 @@ export const BUILTIN_MASK_STORE = {
   },
 };
 
-export const BUILTIN_MASKS: BuiltinMask[] = [...CN_MASKS, ...EN_MASKS].map(
+export const BUILTIN_MASKS: BuiltinMask[] = [];
-  (m) => BUILTIN_MASK_STORE.add(m),
+
-);
+if (typeof window != "undefined") {
+  // run in browser skip in next server
+  fetch("/masks.json")
+    .then((res) => res.json())
+    .catch((error) => {
+      console.error("[Fetch] failed to fetch masks", error);
+      return { cn: [], tw: [], en: [] };
+    })
+    .then((masks) => {
+      const { cn = [], tw = [], en = [] } = masks;
+      return [...cn, ...tw, ...en].map((m) => {
+        BUILTIN_MASKS.push(BUILTIN_MASK_STORE.add(m));
+      });
+    });
+}

app/store/access.ts

@@ -17,6 +17,11 @@ const DEFAULT_OPENAI_URL =
     ? DEFAULT_API_HOST + "/api/proxy/openai"
     : ApiPath.OpenAI;
 
+const DEFAULT_AZURE_URL =
+  getClientConfig()?.buildMode === "export"
+    ? DEFAULT_API_HOST + "/api/proxy/azure/{resource_name}"
+    : ApiPath.Azure;
+
 const DEFAULT_ACCESS_STATE = {
   accessCode: "",
   useCustomConfig: false,
@@ -28,7 +33,7 @@ const DEFAULT_ACCESS_STATE = {
   openaiApiKey: "",
 
   // azure
-  azureUrl: "",
+  azureUrl: DEFAULT_AZURE_URL,
   azureApiKey: "",
   azureApiVersion: "2023-05-15",
   azureVoiceKey: "",
@@ -43,6 +48,19 @@ const DEFAULT_ACCESS_STATE = {
   anthropicApiVersion: "2023-06-01",
   anthropicUrl: "",
 
+  // baidu
+  baiduUrl: "",
+  baiduApiKey: "",
+  baiduSecretKey: "",
+
+  // bytedance
+  bytedanceApiKey: "",
+  bytedanceUrl: "",
+
+  // alibaba
+  alibabaUrl: "",
+  alibabaApiKey: "",
+
   // server config
   needCode: true,
   hideUserApiKey: false,
@@ -82,6 +100,18 @@ export const useAccessStore = createPersistStore(
       return ensure(get(), ["anthropicApiKey"]);
     },
 
+    isValidBaidu() {
+      return ensure(get(), ["baiduApiKey", "baiduSecretKey"]);
+    },
+
+    isValidByteDance() {
+      return ensure(get(), ["bytedanceApiKey"]);
+    },
+
+    isValidAlibaba() {
+      return ensure(get(), ["alibabaApiKey"]);
+    },
+
     isAuthorized() {
       this.fetch();
 
@@ -91,6 +121,9 @@ export const useAccessStore = createPersistStore(
         this.isValidAzure() ||
         this.isValidGoogle() ||
         this.isValidAnthropic() ||
+        this.isValidBaidu() ||
+        this.isValidByteDance() ||
+        this.isValidAlibaba() ||
         !this.enabledAccessControl() ||
         (this.enabledAccessControl() && ensure(get(), ["accessCode"]))
       );

app/store/chat.ts

@@ -9,12 +9,14 @@ import {
   DEFAULT_MODELS,
   DEFAULT_SYSTEM_TEMPLATE,
   KnowledgeCutOffDate,
+  ServiceProvider,
   ModelProvider,
   StoreKey,
   SUMMARIZE_MODEL,
   GEMINI_SUMMARIZE_MODEL,
 } from "../constant";
-import {
+import { getClientApi } from "../client/api";
+import type {
   getHeaders,
   useGetMidjourneySelfProxyUrl,
   ClientApi,
@@ -26,7 +28,6 @@ import { prettyObject } from "../utils/format";
 import { estimateTokenLength } from "../utils/token";
 import { nanoid } from "nanoid";
 import { createPersistStore } from "../utils/store";
-import { identifyDefaultClaudeModel } from "../utils/checkers";
 import { collectModelsWithDefaultModel } from "../utils/model";
 import { useAccessStore } from "./access";
 
@@ -695,15 +696,7 @@ export const useChatStore = createPersistStore(
           set(() => ({}));
           extAttr?.setAutoScroll(true);
         } else {
-          var api: ClientApi;
+          const api: ClientApi = getClientApi(modelConfig.providerName);
-          if (modelConfig.model.startsWith("gemini")) {
-            api = new ClientApi(ModelProvider.GeminiPro);
-          } else if (identifyDefaultClaudeModel(modelConfig.model)) {
-            api = new ClientApi(ModelProvider.Claude);
-          } else {
-            api = new ClientApi(ModelProvider.GPT);
-          }
-
           // make request
           api.llm.chat({
             messages: sendMessages,
@@ -880,14 +873,7 @@ export const useChatStore = createPersistStore(
         const session = get().currentSession();
         const modelConfig = session.mask.modelConfig;
 
-        var api: ClientApi;
+        const api: ClientApi = getClientApi(modelConfig.providerName);
-        if (modelConfig.model.startsWith("gemini")) {
-          api = new ClientApi(ModelProvider.GeminiPro);
-        } else if (identifyDefaultClaudeModel(modelConfig.model)) {
-          api = new ClientApi(ModelProvider.Claude);
-        } else {
-          api = new ClientApi(ModelProvider.GPT);
-        }
 
         // remove error messages if any
         const messages = session.messages;

app/store/config.ts

@@ -6,6 +6,7 @@ import {
   DEFAULT_SIDEBAR_WIDTH,
   DISABLE_MODELS,
   StoreKey,
+  ServiceProvider,
 } from "../constant";
 import { createPersistStore } from "../utils/store";
 import { get } from "immutable";
@@ -53,6 +54,7 @@ export const DEFAULT_CONFIG = {
 
   modelConfig: {
     model: "gpt-3.5-turbo-0125" as ModelType,
+    providerName: "OpenAI" as ServiceProvider,
     temperature: 0.8,
     top_p: 1,
     max_tokens: 2000,
@@ -121,12 +123,12 @@ export const useAppConfig = createPersistStore(
 
       for (const model of oldModels) {
         model.available = false;
-        modelMap[model.name] = model;
+        modelMap[`${model.name}@${model?.provider?.id}`] = model;
       }
 
       for (const model of newModels) {
         model.available = true;
-        modelMap[model.name] = model;
+        modelMap[`${model.name}@${model?.provider?.id}`] = model;
       }
 
       set(() => ({

app/utils/baidu.ts

@@ -0,0 +1,23 @@
+import { BAIDU_OATUH_URL } from "../constant";
+/**
+ * 使用 AK，SK 生成鉴权签名（Access Token）
+ * @return 鉴权签名信息
+ */
+export async function getAccessToken(
+  clientId: string,
+  clientSecret: string,
+): Promise<{
+  access_token: string;
+  expires_in: number;
+  error?: number;
+}> {
+  const res = await fetch(
+    `${BAIDU_OATUH_URL}?grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
+    {
+      method: "POST",
+      mode: "cors",
+    },
+  );
+  const resJson = await res.json();
+  return resJson;
+}

app/utils/checkers.ts

@@ -1,21 +0,0 @@
-import { useAccessStore } from "../store/access";
-import { useAppConfig } from "../store/config";
-import { collectModels } from "./model";
-
-export function identifyDefaultClaudeModel(modelName: string) {
-  const accessStore = useAccessStore.getState();
-  const configStore = useAppConfig.getState();
-
-  const allModals = collectModels(
-    configStore.models,
-    [configStore.customModels, accessStore.customModels].join(","),
-  );
-
-  const modelMeta = allModals.find((m) => m.name === modelName);
-
-  return (
-    modelName.startsWith("claude") &&
-    modelMeta &&
-    modelMeta.provider?.providerType === "anthropic"
-  );
-}

app/utils/hooks.ts

@@ -14,9 +14,9 @@ export function useAllModels() {
       [configStore.customModels, accessStore.customModels].join(","),
       accessStore.defaultModel,
     ).filter((m) => !configStore.dontUseModel.includes(m.name as any));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     accessStore.customModels,
+    accessStore.defaultModel,
     configStore.customModels,
     configStore.models,
     configStore.dontUseModel,

app/utils/model.ts

@@ -1,8 +1,9 @@
+import { DEFAULT_MODELS } from "../constant";
 import { LLMModel } from "../client/api";
 
 const customProvider = (modelName: string) => ({
   id: modelName,
-  providerName: "",
+  providerName: "Custom",
   providerType: "custom",
 });
 
@@ -24,7 +25,8 @@ export function collectModelTable(
 
   // default models
   models.forEach((m) => {
-    modelTable[m.name] = {
+    // using <modelName>@<providerId> as fullName
+    modelTable[`${m.name}@${m?.provider?.id}`] = {
       ...m,
       displayName: m.name, // 'provider' is copied over if it exists
     };
@@ -38,7 +40,7 @@ export function collectModelTable(
       const available = !m.startsWith("-");
       const nameConfig =
         m.startsWith("+") || m.startsWith("-") ? m.slice(1) : m;
-      const [name, displayName] = nameConfig.split("=");
+      let [name, displayName] = nameConfig.split("=");
 
       // enable or disable all models
       if (name === "all") {
@@ -46,13 +48,39 @@ export function collectModelTable(
           (model) => (model.available = available),
         );
       } else {
-        modelTable[name] = {
+        // 1. find model by name, and set available value
-          name,
+        const [customModelName, customProviderName] = name.split("@");
-          displayName: displayName || name,
+        let count = 0;
-          available,
+        for (const fullName in modelTable) {
-          describe: "",
+          const [modelName, providerName] = fullName.split("@");
-          provider: modelTable[name]?.provider ?? customProvider(name), // Use optional chaining
+          if (
-        };
+            customModelName == modelName &&
+            (customProviderName === undefined ||
+              customProviderName === providerName)
+          ) {
+            count += 1;
+            modelTable[fullName]["available"] = available;
+            // swap name and displayName for bytedance
+            if (providerName === "bytedance") {
+              [name, displayName] = [displayName, name];
+              modelTable[fullName]["name"] = name;
+            }
+            if (displayName) {
+              modelTable[fullName]["displayName"] = displayName;
+            }
+          }
+        }
+        // 2. if model not exists, create new model with available value
+        if (count === 0) {
+          const provider = customProvider(name);
+          modelTable[`${name}@${provider?.id}`] = {
+            name,
+            displayName: displayName || name,
+            available,
+            describe: "",
+            provider, // Use optional chaining
+          };
+        }
       }
     });
 
@@ -105,3 +133,13 @@ export function collectModelsWithDefaultModel(
   const allModels = Object.values(modelTable);
   return allModels;
 }
+
+export function isModelAvailableInServer(
+  customModels: string,
+  modelName: string,
+  providerName: string,
+) {
+  const fullName = `${modelName}@${providerName}`;
+  const modelTable = collectModelTable(DEFAULT_MODELS, customModels);
+  return modelTable[fullName]?.available === false;
+}

next.config.mjs

@@ -151,6 +151,11 @@ if (mode !== "export") {
         source: "/api/proxy/v1/:path*",
         destination: "https://api.openai.com/v1/:path*",
       },
+      {
+        // https://{resource_name}.openai.azure.com/openai/deployments/{deploy_name}/chat/completions
+        source: "/api/proxy/azure/:resource_name/deployments/:deploy_name/:path*",
+        destination: "https://:resource_name.openai.azure.com/openai/deployments/:deploy_name/:path*",
+      },
       {
         source: "/api/proxy/google/:path*",
         destination: "https://generativelanguage.googleapis.com/:path*",

package.json

@@ -1,16 +1,18 @@
 {
   "name": "nextchat",
   "private": false,
-  "license": "MIT",
+  "license": "mit",
   "scripts": {
-    "dev": "npx prisma generate && npx prisma db push && next dev --hostname 0.0.0.0 --port 23000",
+    "mask": "npx tsx app/masks/build.ts",
-    "build": "npx next telemetry disable && npx prisma generate && cross-env BUILD_MODE=standalone next build",
+    "mask:watch": "npx watch 'yarn mask' app/masks",
+    "dev": "yarn run mask:watch && npx prisma generate && npx prisma db push && next dev --hostname 0.0.0.0 --port 23000",
+    "build": "yarn mask && npx next telemetry disable && npx prisma generate && cross-env BUILD_MODE=standalone next build",
     "start": "next start",
     "lint": "next lint",
-    "export": "cross-env BUILD_MODE=export BUILD_APP=1 next build",
+    "export": "yarn mask && cross-env BUILD_MODE=export BUILD_APP=1 next build",
-    "export:dev": "cross-env BUILD_MODE=export BUILD_APP=1 next dev",
+    "export:dev": "yarn mask:watch & cross-env BUILD_MODE=export BUILD_APP=1 next dev",
-    "app:dev": "yarn tauri dev",
+    "app:dev": "yarn mask:watch & yarn tauri dev",
-    "app:build": "yarn tauri build",
+    "app:build": "yarn mask && yarn tauri build",
     "prompts": "node ./scripts/fetch-prompts.mjs",
     "prepare": "husky install",
     "proxy-dev": "sh ./scripts/init-proxy.sh && proxychains -f ./scripts/proxychains.conf yarn dev"
@@ -21,11 +23,11 @@
     "@fortaine/fetch-event-source": "^3.0.6",
     "@hello-pangea/dnd": "^16.5.0",
     "@next-auth/prisma-adapter": "^1.0.7",
-    "@next/third-parties": "14.2.3",
     "@prisma/client": "^5.13.0",
-    "@svgr/webpack": "^8.1.0",
+    "@next/third-parties": "^14.1.0",
-    "@vercel/analytics": "^1.1.2",
+    "@svgr/webpack": "^6.5.1",
-    "@vercel/speed-insights": "^1.0.9",
+    "@vercel/analytics": "^0.1.11",
+    "@vercel/speed-insights": "^1.0.2",
     "antd": "^5.15.1",
     "bcryptjs": "^2.4.3",
     "cron": "^3.1.6",
@@ -77,6 +79,13 @@
     "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.2.2",
+    "prettier": "^3.0.2",
+    "tsx": "^4.16.0",
+    "typescript": "5.2.2",
+    "watch": "^1.0.2",
+    "webpack": "^5.88.1",
     "husky": "^9.0.7",
     "lint-staged": "^15.2.0",
     "postcss": "^8.4.33",