教你如何使用Laf调用ChatGPT的 API，搭建一个ChatGPT网页版！

OpenAI 已经公布了 ChatGPT 的API,因为某些原因,我们是直接无法使用API的,但是可以直接通过反代服务来变相访问 ChatGPT API.

今天教大家如何使用 Laf 调用ChatGPT 的 API,并且自己拥有一个稳定的ChatGPT网站,再也不用受到官网的各种限制了.

准备工作

1. 一个ChatGPT账号(需要调ChatGPT 的API key)
2. 一个Laf 账号(部署使用)
3. Node.js 环境(前端页面使用)

Laf 介绍

Laf 是一个完全开源的一站式云开发平台，一个开箱即用的云函数，云数据库，对象存储等能力，让你可以像写博客一样写代码。

使用Laf构建ChatGPT应用

首先注册一个自己的账号并且登录

新注册网址: https://login.laf.dev/signup/laf

登录成功之后点新建一个应用

然后新建一个应用名称为ChatGPT.

点击进入开发

点NPM 依赖面板中点击右上角的加号

然后输入 chatgpt 并回车进行搜索，选择第一个搜索结果，保存并重启：

登录你的ChatGPT账号:

网址: https://chat.openai.com/auth/login

然后去ChatGPT官网生成一个API Key

网址: https://platform.openai.com/account/api-keys

点击页面新增一个key，并且复制保存到记事本。

然后新建一个云函数名字叫 send，

新建完成后写入以下内容：

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: "你的 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
}

将代码中的API key 替换为你的

继续点右上角发布按钮

然后打开如下地址,下载前端页面:

地址 :https://github.com/zuoFeng59556/chatGPT

然后解压文件,继续编辑view—>index.vue文件

打开地址: https://laf.dev/ ,然后复制你的云函数ID

将下面的index.vue文件里面的ID替换为你的ID

然后运行命令如下:npm i

然后继续运行 npm run dev

注意: 这里需要node环境的支持, 没有node 环境的可以去bing.com搜下 node 安装教程

执行上面的命令后,打开访问地址: http://127.0.0.1:5173/

对话框中测试是否可以正常使用

最后我们我们把页面打包一下并且部署上去,执行如下命令:npm run build

然后继续打开你的 Laf，点击存储界面 –> 点击上方加号 –> 创建一个权限为 readonly 的存储桶（名字随意）。

我这里创建了一个ChatGPT-Web 的桶,将权限一定要设置为公共读

继续上传刚刚打包生成的文件夹`ChatGPT-main/dist ,将文件和文件夹挨个上传.

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

然后打开右上角域名就好了,

能访问后成功!

总结

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

以上参考与如下视频，还不会的去看下面的视频：
https://pan.quark.cn/s/8773745fc58d
https://pan.xunlei.com/s/VNQT6d_vvla5oP5LvMV_vU0LA1?pwd=q3bn