原文链接:https://icloudnative.io/posts/build-chatgpt-web-using-laf/
视频教程:https://www.bilibili.com/video/BV1cx4y1K7B2/前提条件:你需要准备一个 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://.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 并且拿到回复的消息了。
项目源码:https://github.com/zuoFeng59556/chatGPT
示例网站:https://jyf6wk-chat-gpt.site.laf.dev/