Ethan LIU

项目背景#

Chat GPT 也火了这么久了，各种类型和规模的产品层出不穷。作为一个 Web developer，在看了那么多前端相关的开源项目之后也不禁手痒🤣🤣考虑几天，决定自己也上手撸一个试试。初衷本着以下几个目的：

• 技术学习：之前没有怎么写过 next.js 相关的项目，在推上关注了一大波大佬之后发现 next.js 貌似在国外非常火，所以也来试试学习一下。
• 拓宽视野：看好多 GPT 相关的前端项目用了不少之前没怎么了解过的前端技术和框架，自己实现一遍了解之后感觉又是赚了🤩🤩
• 跟上潮流：github 上看了很多可以一键部署的开源项目（不乏有很多醒得早的大佬甚至已经用这些项目挣了不少🤡），配上自己的 API key 就能用。用人家的不如自己来，“我觉得我也可以🥶🥶”，肝就完了。

相关地址#

• Demo 地址 (目前暂时支持免费使用): https://gpt.ltopx.com
• Github (求星星✨): https://github.com/Peek-A-Booo/L-GPT
• Bento 首页: https://bento.me/peek
• Twitter: https://twitter.com/peekbomb

项目简介#

L-GPT 是一款开源项目，通过提供不同的 AI 模型来帮助你提高学习、工作、生活的效率。后续还会不断迭代添加更多新的功能。

项目特性#

• 支持一键免费部署到 Vercel
• 支持响应式，暗黑模式
• 安全、开源，所有数据均基于本地存储
• 支持 i18n
• 支持 Azure OpenAI Service
• 支持配置和使用自定义 prompt

技术栈#

• 主体框架：next.js
• UI 框架：radix-ui
• CSS：tailwindcss
• 状态管理：zustand
• 错误收集：Sentry

干货分享#

1. API 账号申请#

首先至少需要拥有相关账号和 api 权限才能进行下一步。以下是几个平台的账号注册和排队申请地址以及攻略：

• OpenAI：注册地址
• Azure OpenAI：申请教程
• Claude AI：申请地址

2. 服务接入#

以下以 OpenAI 官方的服务为例子，大致有两种方案。个人项目采用的是第二种，自由度更高，而且使用代理也更方便。

• 接入官方库：openai-node

  • 安装
  Copy

  pip install openai
  

  • 使用
  Copy

  import { Configuration, OpenAIApi } from 'openai';
  
  // 配置你个人的OpenAI API Key
  const configuration = new Configuration({ apiKey });
  const openai = new OpenAIApi(configuration);
  const completion: any = await openai.createChatCompletion(
    {
      // 想要达到官方流式输出打字机效果必须使用stream
      stream: true,
      // 选择相应的gpt模型。账号注册成功之后可以免费使用gpt-3.5，gpt-4则需要排队申请
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'system',
          content: "Content",
        },
        // 聊天列表内容
        ...msg_list,
      ],
    },
    { responseType: 'stream' },
  );
  
  

• 直接通过域名调用：https://api.openai.com/v1/chat/completions

const response = 
  await fetch("https://api.openai.com/v1/chat/completions", {
    headers: {
      "Content-Type": "application/json",
      // 配置你自己的OpenAI API Key
      "Authorization": `Bearer ${API Key}`,
    },
    method: "POST",
    body: JSON.stringify({
      stream: true,
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: "system",
          content: "Content"
        },
        // 聊天列表内容
        ...chat_list,
      ],
    }),
  });

3. 流信息处理#

Chat GPT 返回结果的形式有两种。一种是等全部回答完成之后一次性返回，这样会让用户等待太久，体验不太好；还有一种通过流信息返回，能够实现类似打字机的效果。

let decoderDone = false;

const handleFragment = (fragment: string) => {
  const lines = fragment.split("\n").filter((item) => item.trim());
  for (const line of lines) {
    const message = line.replace(/^data: /, "");
    if (message === "[DONE]") decoderDone = true;
    try {
      const content = JSON.parse(message).choices[0].delta.content;
      if (content) {
          console.log(content, "接收到的流信息")
      }
    } catch {}
  }
};

return new Promise(async (resolve) => {
  while (!decoderDone) {
    const { done, value } = await reader.read();
    decoderDone = done;
    const fragment = textDecoder.decode(value);
    handleFragment(fragment);
    if (decoderDone) resolve(true);
  }
});

4. 服务代理#

因为一些原因，无法通过国内 ip 正常访问 api.openai.com 的服务。虽然可以通过一些其他方法正常使用，但是比较麻烦，而且会有一定的封号风险。对于大多数人来说如果有能够用国内网络即可正常访问的服务那是最好不过了。项目里采用的是CloudFlare来代理 openai 的服务接口使之能够正常访问。

具体流程可以参考：https://github.com/noobnooc/noobnooc/discussions/9

5. 错误上报#

项目里集成了Sentry，可以快速的收集同步和异步的错误日志并上报到后台，便于及时的解决问题。

只需要在环境变量配置处填写你的 sentry DSN 即可。

项目部署#

如果你想拥有自己的 chat gpt 服务，你可以通过 Vercel 快速一键部署该项目。配置上自己的 api key 和代理地址，就可以自己快捷的使用或者分享给亲戚朋友使用。

一键部署。该项目支持配置如下环境变量（参数）：

更多#

更多详情的了解可前往项目 README.md 食用

引用链接：#

• https://atlassc.net/2023/04/25/azure-openai-service
• https://github.com/noobnooc/noobnooc/discussions/9

欢迎大家多多交流😝