add stepfun models

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

@@ -7,6 +7,7 @@ import { handle as anthropicHandler } from "../../anthropic";
 import { handle as baiduHandler } from "../../baidu";
 import { handle as bytedanceHandler } from "../../bytedance";
 import { handle as alibabaHandler } from "../../alibaba";
+import { handle as stepfunHandler } from "../../stepfun";
 import { handle as moonshotHandler } from "../../moonshot";
 import { handle as stabilityHandler } from "../../stability";
 import { handle as iflytekHandler } from "../../iflytek";
@@ -30,6 +31,8 @@ async function handle(
     case ApiPath.Alibaba:
       return alibabaHandler(req, { params });
     // case ApiPath.Tencent: using "/api/tencent"
+    case ApiPath.Stepfun:
+      return stepfunHandler(req, { params });
     case ApiPath.Moonshot:
       return moonshotHandler(req, { params });
     case ApiPath.Stability:

app/api/auth.ts

@@ -85,6 +85,9 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
       case ModelProvider.Qwen:
         systemApiKey = serverConfig.alibabaApiKey;
         break;
+      case ModelProvider.Stepfun:
+        systemApiKey = serverConfig.stepfunApiKey;
+        break;
       case ModelProvider.Moonshot:
         systemApiKey = serverConfig.moonshotApiKey;
         break;

app/api/stepfun.ts

@@ -0,0 +1,131 @@
+import { getServerSideConfig } from "@/app/config/server";
+import {
+  Stepfun,
+  STEPFUN_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();
+
+export async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[Stepfun Route] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const authResult = auth(req, ModelProvider.Stepfun);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  try {
+    const response = await request(req);
+    return response;
+  } catch (e) {
+    console.error("[Stepfun] ", e);
+    return NextResponse.json(prettyObject(e));
+  }
+}
+
+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.Stepfun, "");
+
+  let baseUrl = serverConfig.stepfunUrl || STEPFUN_BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `https://${baseUrl}`;
+  }
+
+  if (baseUrl.endsWith("/")) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  console.log("[Proxy] ", path);
+  console.log("[BaseUrl]", baseUrl);
+  console.log("[Headers]", req.headers.get("Authorization"));
+
+  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.Stepfun as string,
+        )
+      ) {
+        return NextResponse.json(
+          {
+            error: true,
+            message: `you are not allowed to use ${jsonBody?.model} model`,
+          },
+          {
+            status: 403,
+          },
+        );
+      }
+    } catch (e) {
+      console.error(`[Stepfun] 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/client/api.ts

@@ -13,6 +13,7 @@ import { ErnieApi } from "./platforms/baidu";
 import { DoubaoApi } from "./platforms/bytedance";
 import { QwenApi } from "./platforms/alibaba";
 import { HunyuanApi } from "./platforms/tencent";
+import { StepfunApi } from "./platforms/stepfun";
 import { MoonshotApi } from "./platforms/moonshot";
 import { SparkApi } from "./platforms/iflytek";
 
@@ -128,6 +129,9 @@ export class ClientApi {
       case ModelProvider.Hunyuan:
         this.llm = new HunyuanApi();
         break;
+      case ModelProvider.Stepfun:
+        this.llm = new StepfunApi();
+        break;
       case ModelProvider.Moonshot:
         this.llm = new MoonshotApi();
         break;
@@ -216,6 +220,7 @@ export function getHeaders() {
     const isBaidu = modelConfig.providerName == ServiceProvider.Baidu;
     const isByteDance = modelConfig.providerName === ServiceProvider.ByteDance;
     const isAlibaba = modelConfig.providerName === ServiceProvider.Alibaba;
+    const isStepfun = modelConfig.providerName === ServiceProvider.Stepfun;
     const isMoonshot = modelConfig.providerName === ServiceProvider.Moonshot;
     const isIflytek = modelConfig.providerName === ServiceProvider.Iflytek;
     const isEnabledAccessControl = accessStore.enabledAccessControl();
@@ -229,6 +234,8 @@ export function getHeaders() {
       ? accessStore.bytedanceApiKey
       : isAlibaba
       ? accessStore.alibabaApiKey
+      : isStepfun
+      ? accessStore.stepfunApiKey
       : isMoonshot
       ? accessStore.moonshotApiKey
       : isIflytek
@@ -296,6 +303,8 @@ export function getClientApi(provider: ServiceProvider): ClientApi {
       return new ClientApi(ModelProvider.Qwen);
     case ServiceProvider.Tencent:
       return new ClientApi(ModelProvider.Hunyuan);
+    case ServiceProvider.Stepfun:
+      return new ClientApi(ModelProvider.Stepfun);
     case ServiceProvider.Moonshot:
       return new ClientApi(ModelProvider.Moonshot);
     case ServiceProvider.Iflytek:

app/client/platforms/stepfun.ts

@@ -0,0 +1,251 @@
+"use client";
+// azure and openai, using same models. so using same LLMApi.
+import {
+  ApiPath,
+  DEFAULT_API_HOST,
+  DEFAULT_MODELS,
+  Stepfun,
+  REQUEST_TIMEOUT_MS,
+  ServiceProvider,
+} from "@/app/constant";
+import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
+import { collectModelsWithDefaultModel } from "@/app/utils/model";
+import { preProcessImageContent } from "@/app/utils/chat";
+import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
+
+import {
+  ChatOptions,
+  getHeaders,
+  LLMApi,
+  LLMModel,
+  LLMUsage,
+  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";
+
+import { OpenAIListModelResponse, RequestPayload } from "./openai";
+
+export class StepfunApi implements LLMApi {
+  private disableListModels = true;
+
+  path(path: string): string {
+    const accessStore = useAccessStore.getState();
+
+    let baseUrl = "";
+
+    if (accessStore.useCustomConfig) {
+      baseUrl = accessStore.stepfunUrl;
+    }
+
+    if (baseUrl.length === 0) {
+      const isApp = !!getClientConfig()?.isApp;
+      const apiPath = ApiPath.Stepfun;
+      baseUrl = isApp ? DEFAULT_API_HOST + "/proxy" + apiPath : apiPath;
+    }
+
+    if (baseUrl.endsWith("/")) {
+      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
+    }
+    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Stepfun)) {
+      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: ChatOptions["messages"] = [];
+    for (const v of options.messages) {
+      const content = getMessageTextContent(v);
+      messages.push({ role: v.role, content });
+    }
+
+    const modelConfig = {
+      ...useAppConfig.getState().modelConfig,
+      ...useChatStore.getState().currentSession().mask.modelConfig,
+      ...{
+        model: options.config.model,
+        providerName: options.config.providerName,
+      },
+    };
+
+    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,
+      // max_tokens: Math.max(modelConfig.max_tokens, 1024),
+      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
+    };
+
+    console.log("[Request] openai payload: ", requestPayload);
+
+    const shouldStream = !!options.config.stream;
+    const controller = new AbortController();
+    options.onController?.(controller);
+
+    try {
+      const chatPath = this.path(Stepfun.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(
+              "[OpenAI] 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;
+              const textmoderation = json?.prompt_filter_results;
+
+              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 [];
+  }
+}

app/components/settings.tsx

@@ -55,6 +55,7 @@ import {
   Azure,
   Baidu,
   Tencent,
+  Stepfun,
   ByteDance,
   Alibaba,
   Moonshot,
@@ -1043,6 +1044,47 @@ export function Settings() {
     </>
   );
 
+  const stepfunConfigComponent = accessStore.provider ===
+    ServiceProvider.Stepfun && (
+    <>
+      <ListItem
+        title={Locale.Settings.Access.Stepfun.Endpoint.Title}
+        subTitle={
+          Locale.Settings.Access.Stepfun.Endpoint.SubTitle +
+          Stepfun.ExampleEndpoint
+        }
+      >
+        <input
+          aria-label={Locale.Settings.Access.Stepfun.Endpoint.Title}
+          type="text"
+          value={accessStore.stepfunUrl}
+          placeholder={Stepfun.ExampleEndpoint}
+          onChange={(e) =>
+            accessStore.update(
+              (access) => (access.stepfunUrl = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Access.Stepfun.ApiKey.Title}
+        subTitle={Locale.Settings.Access.Stepfun.ApiKey.SubTitle}
+      >
+        <PasswordInput
+          aria-label={Locale.Settings.Access.Stepfun.ApiKey.Title}
+          value={accessStore.stepfunApiKey}
+          type="text"
+          placeholder={Locale.Settings.Access.Stepfun.ApiKey.Placeholder}
+          onChange={(e) => {
+            accessStore.update(
+              (access) => (access.stepfunApiKey = e.currentTarget.value),
+            );
+          }}
+        />
+      </ListItem>
+    </>
+  );
+
   const byteDanceConfigComponent = accessStore.provider ===
     ServiceProvider.ByteDance && (
     <>
@@ -1579,6 +1621,7 @@ export function Settings() {
                   {byteDanceConfigComponent}
                   {alibabaConfigComponent}
                   {tencentConfigComponent}
+                  {stepfunConfigComponent}
                   {moonshotConfigComponent}
                   {stabilityConfigComponent}
                   {lflytekConfigComponent}

app/config/server.ts

@@ -62,6 +62,10 @@ declare global {
       TENCENT_SECRET_KEY?: string;
       TENCENT_SECRET_ID?: string;
 
+      // stepfun only
+      STEPFUN_URL?: string;
+      STEPFUN_API_KEY?: string;
+
       // moonshot only
       MOONSHOT_URL?: string;
       MOONSHOT_API_KEY?: string;
@@ -137,6 +141,7 @@ export const getServerSideConfig = () => {
   const isGoogle = !!process.env.GOOGLE_API_KEY;
   const isAnthropic = !!process.env.ANTHROPIC_API_KEY;
   const isTencent = !!process.env.TENCENT_API_KEY;
+  const isStepfun = !!process.env.STEPFUN_API_KEY;
 
   const isBaidu = !!process.env.BAIDU_API_KEY;
   const isBytedance = !!process.env.BYTEDANCE_API_KEY;
@@ -196,6 +201,10 @@ export const getServerSideConfig = () => {
     tencentSecretKey: getApiKey(process.env.TENCENT_SECRET_KEY),
     tencentSecretId: process.env.TENCENT_SECRET_ID,
 
+    isStepfun,
+    stepfunUrl: process.env.STEPFUN_URL,
+    stepfunApiKey: getApiKey(process.env.STEPFUN_API_KEY),
+
     isMoonshot,
     moonshotUrl: process.env.MOONSHOT_URL,
     moonshotApiKey: getApiKey(process.env.MOONSHOT_API_KEY),

app/constant.ts

@@ -25,7 +25,10 @@ export const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/api/";
 
 export const TENCENT_BASE_URL = "https://hunyuan.tencentcloudapi.com";
 
+export const STEPFUN_BASE_URL = "https://api.stepfun.com";
+
 export const MOONSHOT_BASE_URL = "https://api.moonshot.cn";
+
 export const IFLYTEK_BASE_URL = "https://spark-api-open.xf-yun.com";
 
 export const CACHE_URL_PREFIX = "/api/cache";
@@ -53,6 +56,7 @@ export enum ApiPath {
   ByteDance = "/api/bytedance",
   Alibaba = "/api/alibaba",
   Tencent = "/api/tencent",
+  Stepfun = "/api/stepfun",
   Moonshot = "/api/moonshot",
   Iflytek = "/api/iflytek",
   Stability = "/api/stability",
@@ -109,6 +113,7 @@ export enum ServiceProvider {
   ByteDance = "ByteDance",
   Alibaba = "Alibaba",
   Tencent = "Tencent",
+  Stepfun = "Stepfun",
   Moonshot = "Moonshot",
   Stability = "Stability",
   Iflytek = "Iflytek",
@@ -132,6 +137,7 @@ export enum ModelProvider {
   Doubao = "Doubao",
   Qwen = "Qwen",
   Hunyuan = "Hunyuan",
+  Stepfun = "Stepfun",
   Moonshot = "Moonshot",
   Iflytek = "Iflytek",
 }
@@ -205,6 +211,11 @@ export const Tencent = {
   ExampleEndpoint: TENCENT_BASE_URL,
 };
 
+export const Stepfun = {
+  ExampleEndpoint: STEPFUN_BASE_URL,
+  ChatPath: "v1/chat/completions",
+};
+
 export const Moonshot = {
   ExampleEndpoint: MOONSHOT_BASE_URL,
   ChatPath: "v1/chat/completions",
@@ -334,6 +345,17 @@ const tencentModels = [
   "hunyuan-vision",
 ];
 
+const stepfunModels = [
+  "step-1-8k",
+  "step-1-32k",
+  "step-1v-8k",
+  "step-1v-32k",
+  "step-1-128k",
+  "step-1-256k",
+  "step-1-flash",
+  "step-2-16k",
+];
+
 const moonshotModes = ["moonshot-v1-8k", "moonshot-v1-32k", "moonshot-v1-128k"];
 
 const iflytekModels = [
@@ -434,6 +456,17 @@ export const DEFAULT_MODELS = [
       sorted: 8,
     },
   })),
+  ...stepfunModels.map((name) => ({
+    name,
+    available: true,
+    sorted: seq++,
+    provider: {
+      id: "stepfun",
+      providerName: "Stepfun",
+      providerType: "stepfun",
+      sorted: 9,
+    },
+  })),
   ...moonshotModes.map((name) => ({
     name,
     available: true,
@@ -442,7 +475,7 @@ export const DEFAULT_MODELS = [
       id: "moonshot",
       providerName: "Moonshot",
       providerType: "moonshot",
-      sorted: 9,
+      sorted: 10,
     },
   })),
   ...iflytekModels.map((name) => ({
@@ -453,7 +486,7 @@ export const DEFAULT_MODELS = [
       id: "iflytek",
       providerName: "Iflytek",
       providerType: "iflytek",
-      sorted: 10,
+      sorted: 11,
     },
   })),
 ] as const;

app/locales/cn.ts

@@ -394,6 +394,17 @@ const cn = {
           SubTitle: "不支持自定义前往.env配置",
         },
       },
+      Stepfun: {
+        ApiKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义阶跃星辰API Key",
+          Placeholder: "Stepfun API Key",
+        },
+        Endpoint: {
+          Title: "接口地址",
+          SubTitle: "样例：",
+        },
+      },
       ByteDance: {
         ApiKey: {
           Title: "接口密钥",

app/locales/en.ts

@@ -378,6 +378,17 @@ const en: LocaleType = {
           SubTitle: "not supported, configure in .env",
         },
       },
+      Stepfun: {
+        ApiKey: {
+          Title: "Stepfun API Key",
+          SubTitle: "Use a custom Stepfun API Key",
+          Placeholder: "Stepfun API Key",
+        },
+        Endpoint: {
+          Title: "Endpoint Address",
+          SubTitle: "Example: ",
+        },
+      },
       ByteDance: {
         ApiKey: {
           Title: "ByteDance API Key",

app/store/access.ts

@@ -43,6 +43,10 @@ const DEFAULT_TENCENT_URL = isApp
   ? DEFAULT_API_HOST + "/api/proxy/tencent"
   : ApiPath.Tencent;
 
+const DEFAULT_STEPFUN_URL = isApp
+  ? DEFAULT_API_HOST + "/api/proxy/stepfun"
+  : ApiPath.Stepfun;
+
 const DEFAULT_MOONSHOT_URL = isApp
   ? DEFAULT_API_HOST + "/api/proxy/moonshot"
   : ApiPath.Moonshot;
@@ -107,6 +111,10 @@ const DEFAULT_ACCESS_STATE = {
   tencentSecretKey: "",
   tencentSecretId: "",
 
+  // stepfun
+  stepfunUrl: DEFAULT_STEPFUN_URL,
+  stepfunApiKey: "",
+
   // iflytek
   iflytekUrl: DEFAULT_IFLYTEK_URL,
   iflytekApiKey: "",
@@ -164,9 +172,14 @@ export const useAccessStore = createPersistStore(
       return ensure(get(), ["tencentSecretKey", "tencentSecretId"]);
     },
 
+    isValidStepfun() {
+      return ensure(get(), ["stepfunApiKey"]);
+    },
+
     isValidMoonshot() {
       return ensure(get(), ["moonshotApiKey"]);
     },
+
     isValidIflytek() {
       return ensure(get(), ["iflytekApiKey"]);
     },
@@ -183,7 +196,8 @@ export const useAccessStore = createPersistStore(
         this.isValidBaidu() ||
         this.isValidByteDance() ||
         this.isValidAlibaba() ||
-        this.isValidTencent ||
+        this.isValidTencent() ||
+        this.isValidStepfun() ||
         this.isValidMoonshot() ||
         this.isValidIflytek() ||
         !this.enabledAccessControl() ||