原文链接：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 IDconst 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 // 这个是上下文 idparentMessageId.value = res.id;}

到这一步 咱们曾经能够发信息给 ChatGPT 并且拿到回复的音讯了。

咱们只有略微加亿点点细节，就能够变成这样：

加完这点细节之后，根本开发工作就实现了，接下来就是把我的项目上线分享给你的敌人，顺便装个杯。

说到上线咱们当初应该要去买一台服务器装置 Nginx，配置 Nginx，解析域名，绑定域名...

NO NO NO 我不容许你节约年老而美妙的生命，life is short, you need laf

上线

关上你的 Laf，点击存储界面 --> 点击上方加号 --> 创立一个权限为 readonly 的存储桶（名字随便）。

创立完之后，在你的前端我的项目中运行打包命令。我这里用的是 npm run build。

打包结束之后找到打包好的 dist 文件夹，像我一样把 dist 文件外面的所有货色都上传到咱们刚刚创立的存储桶外面，记住是一成不变的上传哦，文件就是文件，文件夹就是文件夹。

上传完毕之后，发现右上角有一个 “开启网站托管”，点一下它！

点完之后进去一个链接，咱们点击一下拜访看看是啥货色。

哦！我的老天鹅呀 这不就是我刚刚开发的我的项目吗？？

祝贺，到这里你的我的项目曾经上线了，快分享给你的好敌人吧！

  • 我的项目源码：https://github.com/zuoFeng59556/chatGPT
  • 示例网站：https://jyf6wk-chat-gpt.site.laf.dev/