Integration with SiliconFlow (#1)

.github/workflows/auto-rebase.yml

@@ -0,0 +1,38 @@
+name: Auto Rebase
+
+on:
+  schedule:
+    - cron: '0 * * * *'  # This will run every hour
+  push:
+    branches:
+      - main  # Change this to the branch you want to watch for updates
+  workflow_dispatch:  # Allows manual triggering of the action
+
+permissions:
+  id-token: write
+  contents: write
+
+jobs:
+  rebase:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # Fetch all history for all branches and tags
+
+      - name: Add upstream remote
+        run: git remote add upstream https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
+
+      - name: Fetch upstream changes
+        run: git fetch upstream
+
+      - name: Rebase branch
+        run: |
+          git config --global user.email [email protected]
+          git config --global user.name tsai
+          git checkout main
+          git rebase upstream/main
+
+      - name: Push changes
+        run: git push origin main --force

.github/workflows/docker.yml

@@ -4,7 +4,18 @@ on:
   workflow_dispatch:
   release:
     types: [published]
+  push:
+    branches:
+      - main
+env:
+  REGION_ID: cn-beijing
+  REGISTRY: registry.cn-beijing.aliyuncs.com
+  NAMESPACE: oneflow
 
+concurrency:
+  group: sf-next-chat-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
@@ -13,23 +24,13 @@ jobs:
       -
         name: Check out the repo
         uses: actions/checkout@v3
-      -
-        name: Log in to Docker Hub
-        uses: docker/login-action@v2
+      - name: Login to ACR with the AccessKey pair
+        uses: aliyun/acr-login@v1
         with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - 
-        name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          images: yidadaa/chatgpt-next-web
-          tags: |
-            type=raw,value=latest
-            type=ref,event=tag
-      
+          login-server: https://registry.${{env.REGION_ID}}.aliyuncs.com
+          username: "${{ secrets.ACR_USERNAME }}"
+          password: "${{ secrets.ACR_PASSWORD }}"
+
       - 
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
@@ -45,8 +46,9 @@ jobs:
           context: .
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            NEXT_PUBLIC_SF_NEXT_CHAT_CLIENT_ID=${{ vars.NEXT_PUBLIC_SF_NEXT_CHAT_CLIENT_ID }}
+          tags: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/next-chat-sf
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

Dockerfile

@@ -12,6 +12,7 @@ RUN yarn config set registry 'https://registry.npmmirror.com/'
 RUN yarn install
 
 FROM base AS builder
+ARG NEXT_PUBLIC_SF_NEXT_CHAT_CLIENT_ID
 
 RUN apk update && apk add --no-cache git
 

README.md

@@ -88,7 +88,7 @@ For enterprise inquiries, please contact: **[email protected]**
 - I18n: English, 简体中文, 繁体中文, 日本語, Français, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština, 한국어, Indonesia
 
 <div align="center">
-   
+
 ![主界面](./docs/images/cover.png)
 
 </div>
@@ -111,7 +111,7 @@ For enterprise inquiries, please contact: **[email protected]**
 - 🚀 v2.15.8 Now supports Realtime Chat [#5672](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5672)
 - 🚀 v2.15.4 The Application supports using Tauri fetch LLM API, MORE SECURITY! [#5379](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/issues/5379)
 - 🚀 v2.15.0 Now supports Plugins! Read this: [NextChat-Awesome-Plugins](https://github.com/ChatGPTNextWeb/NextChat-Awesome-Plugins)
-- 🚀 v2.14.0 Now supports  Artifacts & SD 
+- 🚀 v2.14.0 Now supports  Artifacts & SD
 - 🚀 v2.10.1 support Google Gemini Pro model.
 - 🚀 v2.9.11 you can use azure endpoint now.
 - 🚀 v2.8 now we have a client that runs across all platforms!
@@ -122,7 +122,7 @@ For enterprise inquiries, please contact: **[email protected]**
 
 1. Get [OpenAI API Key](https://platform.openai.com/account/api-keys);
 2. Click
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.jparrowsec.cn%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web), remember that `CODE` is your page password;
+   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.jparrowsec.cn%2Fsiliconflow%2FChatGPT-Next-Web&env=NEXT_PUBLIC_SF_NEXT_CHAT_CLIENT_ID&env=SF_NEXT_CHAT_SECRET&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web), remember that `CODE` is your page password;
 3. Enjoy :)
 
 ## FAQ
@@ -331,7 +331,7 @@ Add additional models to have vision capabilities, beyond the default pattern ma
 ### `WHITE_WEBDAV_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：
-- Each address must be a complete endpoint 
+- Each address must be a complete endpoint
 > `https://xxxx/yyy`
 - Multiple addresses are connected by ', '
 

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

@@ -1,3 +1,4 @@
+import { handle as oauthHandler } from "../../oauth_callback";
 import { ApiPath } from "@/app/constant";
 import { NextRequest } from "next/server";
 import { handle as openaiHandler } from "../../openai";
@@ -23,6 +24,8 @@ async function handle(
   const apiPath = `/api/${params.provider}`;
   console.log(`[${params.provider} Route] params `, params);
   switch (apiPath) {
+    case ApiPath.OAuth:
+      return oauthHandler(req, { params });
     case ApiPath.Azure:
       return azureHandler(req, { params });
     case ApiPath.Google:

app/api/oauth_callback.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from "next/server";
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+
+export async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[SF] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+  const url = new URL(req.url);
+  const queryParams = new URLSearchParams(url.search);
+  const code = queryParams.get("code");
+  let sfak = "";
+  console.log("[SF] code ", code);
+  try {
+    const tokenFetch = await fetch(
+      `${
+        process.env.NEXT_PUBLIC_SF_NEXT_CHAT_SF_ACCOUNT_ENDPOINT ||
+        "https://account.siliconflow.cn"
+      }/api/open/oauth`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          clientId: process.env.NEXT_PUBLIC_SF_NEXT_CHAT_CLIENT_ID,
+          secret: process.env.SF_NEXT_CHAT_SECRET,
+          code,
+        }),
+      },
+    );
+    if (!tokenFetch.ok)
+      return Response.json(
+        { status: false, message: "fetch error" },
+        { status: 500 },
+      );
+    const tokenJson = await tokenFetch.json();
+    const access_token = tokenJson.status ? tokenJson.data?.access_token : null;
+    console.log("access_token", access_token);
+    const apiKey = await fetch(
+      `${
+        process.env.NEXT_PUBLIC_SF_NEXT_CHAT_SF_CLOUD_ENDPOINT ||
+        "https://cloud.siliconflow.cn"
+      }/api/oauth/apikeys`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `token ${access_token}`,
+        },
+      },
+    );
+    const apiKeysData = await apiKey.json();
+    console.log("apiKeysData", apiKeysData);
+    sfak = apiKeysData.data[0].secretKey;
+  } catch (error) {
+    console.log("error", error);
+    return Response.json(
+      { status: false, message: "fetch error" },
+      { status: 500 },
+    );
+  }
+  cookies().set("sfak", sfak);
+  redirect(`/#chat`);
+}

app/client/api.ts

@@ -11,7 +11,7 @@ import {
   useAccessStore,
   useChatStore,
 } from "../store";
-import { ChatGPTApi, DalleRequestPayload } from "./platforms/openai";
+import { DalleRequestPayload } from "./platforms/openai";
 import { GeminiProApi } from "./platforms/google";
 import { ClaudeApi } from "./platforms/anthropic";
 import { ErnieApi } from "./platforms/baidu";
@@ -169,7 +169,8 @@ export class ClientApi {
         this.llm = new SiliconflowApi();
         break;
       default:
-        this.llm = new ChatGPTApi();
+        this.llm = new SiliconflowApi();
+      // this.llm = new ChatGPTApi();
     }
   }
 

app/client/platforms/siliconflow.ts

@@ -5,6 +5,7 @@ import {
   SILICONFLOW_BASE_URL,
   SiliconFlow,
   REQUEST_TIMEOUT_MS_FOR_THINKING,
+  DEFAULT_MODELS,
 } from "@/app/constant";
 import {
   useAccessStore,
@@ -13,7 +14,7 @@ import {
   ChatMessageTool,
   usePluginStore,
 } from "@/app/store";
-import { streamWithThink } from "@/app/utils/chat";
+import { preProcessImageContent, streamWithThink } from "@/app/utils/chat";
 import {
   ChatOptions,
   getHeaders,
@@ -25,12 +26,22 @@ import { getClientConfig } from "@/app/config/client";
 import {
   getMessageTextContent,
   getMessageTextContentWithoutThinking,
+  isVisionModel,
 } from "@/app/utils";
 import { RequestPayload } from "./openai";
+
 import { fetch } from "@/app/utils/stream";
+export interface SiliconFlowListModelResponse {
+  object: string;
+  data: Array<{
+    id: string;
+    object: string;
+    root: string;
+  }>;
+}
 
 export class SiliconflowApi implements LLMApi {
-  private disableListModels = true;
+  private disableListModels = false;
 
   path(path: string): string {
     const accessStore = useAccessStore.getState();
@@ -71,13 +82,16 @@ export class SiliconflowApi implements LLMApi {
   }
 
   async chat(options: ChatOptions) {
+    const visionModel = isVisionModel(options.config.model);
     const messages: ChatOptions["messages"] = [];
     for (const v of options.messages) {
       if (v.role === "assistant") {
         const content = getMessageTextContentWithoutThinking(v);
         messages.push({ role: v.role, content });
       } else {
-        const content = getMessageTextContent(v);
+        const content = visionModel
+          ? await preProcessImageContent(v.content)
+          : getMessageTextContent(v);
         messages.push({ role: v.role, content });
       }
     }
@@ -238,6 +252,36 @@ export class SiliconflowApi implements LLMApi {
   }
 
   async models(): Promise<LLMModel[]> {
-    return [];
+    if (this.disableListModels) {
+      return DEFAULT_MODELS.slice();
+    }
+
+    const res = await fetch(this.path(SiliconFlow.ListModelPath), {
+      method: "GET",
+      headers: {
+        ...getHeaders(),
+      },
+    });
+
+    const resJson = (await res.json()) as SiliconFlowListModelResponse;
+    const chatModels = resJson.data;
+    console.log("[Models]", chatModels);
+
+    if (!chatModels) {
+      return [];
+    }
+
+    let seq = 1000; //同 Constant.ts 中的排序保持一致
+    return chatModels.map((m) => ({
+      name: m.id,
+      available: true,
+      sorted: seq++,
+      provider: {
+        id: "siliconflow",
+        providerName: "SiliconFlow",
+        providerType: "siliconflow",
+        sorted: 14,
+      },
+    }));
   }
 }

app/components/auth.module.scss

@@ -77,6 +77,8 @@
 
   .auth-tips {
     font-size: 14px;
+    margin-top: 1vh;
+    margin-bottom: 1vh;
   }
 
   .auth-input {