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

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

点击进入开发

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

登录你的ChatGPT账号:

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

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

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

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

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 替换为你的

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

继续点右上角发布按钮

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

然后运行命令如下:npm i

然后继续运行 npm run dev

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

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区
教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

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

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

能访问后成功!

教你如何使用Laf调用ChatGPT的 API,搭建一个ChatGPT网页版!-i3综合社区

总结

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