三分鐘搭建一個自己的 ChatGPT (從開發到上線)

原文鏈接：https://icloudnative.io/posts/build-chatgpt-web-using-laf/

OpenAI 已經公佈了 ChatGPT 正式版 API，背後的新模型是 gpt-3.5-turbo，這是 OpenAI 目前最先進的模型，響應速度更快，價格更便宜。

作爲開發人員，我們還是希望通過 API 將 ChatGPT 和相關模型集成到自己的產品和應用中，尷尬的是，目前無法訪問 ChatGPT API，原因大家都懂得。於是網上出現了各種各樣的 API 反代服務，我們可以直接通過反代服務來變相訪問 ChatGPT API。

即使我們解決了 API 的訪問問題，還要準備一個開發環境，比如對於 Node.js 客戶端來說，需要準備一個 Node.js 環境。

有沒有一種簡單快捷的方法來調用 ChatGPT API 呢？

那當然是用 Laf 了。

Laf 是一個完全開源的一站式雲開發平臺，提供了開箱即用的雲函數，雲數據庫，對象存儲等能力，讓你可以像寫博客一樣寫代碼。

GitHub：https://github.com/labring/laf

如果你希望快速瞭解 Laf 的用法，可以參考這篇文章：三分鐘學會 Laf。

言歸正傳，下面我們開始計時，三分鐘時間用 Laf 實現一個自己的 ChatGPT！

前提條件：你需要準備一個 ChatGPT 賬號並且生成一個 API Key (這一步可以問 Google )

雲函數教學

首先需要登錄 laf.dev，然後新建一個應用。

點擊開發按鈕進入開發頁面。

在 NPM 依賴面板中點擊右上角的 +：

然後輸入 chatgpt 並回車進行搜索，選擇第一個搜索結果，保存並重啓：

重啓之後，自定義依賴項中便出現了 chatgpt。

然後就可以像我一樣新建一個雲函數名字叫 send，並寫入以下內容：

import cloud from '@lafjs/cloud'
export async function main(ctx: FunctionContext) {
  const { ChatGPTAPI } = await import('chatgpt')
  const api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY })

  let res = await api.sendMessage('“雞你太美”指的是中國大陸哪位男藝人？給你個提示，他喜歡唱、跳、籃球、Rap')
  console.log(res.text)

  return res.text
}

API Key 是通過環境變量 CHAT_GPT_API_KEY 傳入的，所以我們還需要創建一個環境變量。點擊左下角的設置圖標：

依次選擇「環境變量」--> 「新增環境變量」，輸入環境變量的名稱和值，然後點擊「確定」，再點擊「更新」，便會重啓應用。

現在點擊右上角的「運行」，即可調試運行。

Perfect！現在我們來試試添加追蹤上下文的功能。其實也很簡單，只需要在對話時傳入上一次對話的 ID 即可，代碼如下：

import cloud from '@lafjs/cloud'
export async function main(ctx: FunctionContext) {
  const { ChatGPTAPI } = await import('chatgpt')
  const api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY })

  let res = await api.sendMessage('“雞你太美”指的是中國大陸哪位男藝人？給你個提示，他喜歡唱、跳、籃球、Rap')
  console.log(res.text)

  // 傳入 parentMessageId 追蹤上下文
  res = await api.sendMessage('不對，他姓蔡，請重新回答', {
    parentMessageId: res.id
  })
  console.log(res.text)

  return res.text
}

運行一下看看：

好厲害，竟然兩次就答對了我的問題！

好了，現在纔開始真的計時，因爲剛剛是教學環節，不計入耗時😁

雲函數

接下來我們就可以開始動手打造自己的 ChatGPT 了，首先把上一節的函數替換爲下面的內容：

import cloud from '@lafjs/cloud'

export async function main(ctx: FunctionContext) {
  const { ChatGPTAPI } = await import('chatgpt')
  const data = ctx.body

  // 這裏需要把 api 對象放入 cloud.shared 不然無法追蹤上下文
  let api = cloud.shared.get('api')
  if (!api) {
    api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY })
    cloud.shared.set('api', api)
  }

  let res
  // 這裏前端如果傳過來 parentMessageId 則代表需要追蹤上下文
  if (!data.parentMessageId) {
    res = await api.sendMessage(data.message)
  } else {
    res = await api.sendMessage(data.message, { parentMessageId: data.parentMessageId })
  }
  return res
}

現在應該很好理解這個函數了吧？

前端

我們要實現的是 Web 版 ChatGPT，所以還需要一個前端頁面。首先需要安裝 Laf 的 SDK：

$ npm install laf-client-sdk

接下來，需要創建一個 cloud 對象：

import { Cloud } from "laf-client-sdk"; 

// 創建 cloud 對象 這裏需要將 <appid> 替換成自己的 App ID
const cloud = new Cloud({
  baseUrl: "https://<appid>.laf.dev",
  getAccessToken: () => "", // 這裏不需要授權，先填空
});

這裏我們看一下前端的核心代碼，非常的簡單，就是把提問的內容和上下文 id 傳入雲函數就可以了。

async function send() {

// 我們提問的內容
const message = question.value;

let res;
// 與雲函數邏輯一樣，有上下文 id 就傳入
if (!parentMessageId.value) {
  res = await cloud.invoke("send", { message });
} else {
  res = await cloud.invoke("send", { message, parentMessageId: parentMessageId.value });
}

// 回覆我們的內容在 res.text 

// 這個是上下文 id
parentMessageId.value = res.id;
}

到這一步我們已經可以發信息給 ChatGPT 並且拿到回覆的消息了。

我們只要稍微加億點點細節，就可以變成這樣：