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

歡迎大家多多交流😝