三分钟搭建一个自己的 ChatGPT (从开发到上线)

sockstack / 283 / 2023-11-07 00:02:16

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。 <a href="https://ckai.xyz/?sockstack&section=detail" target="__blank">https://ckai.xyz</a> <article class="baidu_pl"><div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
<div id="content_views" class="markdown_views prism-atom-one-light">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg><blockquote> 原文链接：https://icloudnative.io/posts/build-chatgpt-web-using-laf/ 
</blockquote> 
OpenAI 已经公布了 ChatGPT 正式版 API，背后的新模型是 gpt-3.5-turbo，这是 OpenAI 目前最先进的模型，响应速度更快，价格更便宜。 
作为开发人员，我们还是希望通过 API 将 ChatGPT 和相关模型集成到自己的产品和应用中，尴尬的是，目前无法访问 ChatGPT API，原因大家都懂得。于是网上出现了各种各样的 API 反代服务，我们可以直接通过反代服务来变相访问 ChatGPT API。 
即使我们解决了 API 的访问问题，还要准备一个开发环境，比如对于 Node.js 客户端来说，需要准备一个 Node.js 环境。 
有没有一种简单快捷的方法来调用 ChatGPT API 呢？ 
那当然是用 Laf 了。 
Laf 是一个完全开源的一站式云开发平台，提供了开箱即用的云函数，云数据库，对象存储等能力，让你可以像写博客一样写代码。 
<blockquote> GitHub：https://github.com/labring/laf 
</blockquote> 
如果你希望快速了解 Laf 的用法，可以参考这篇文章：三分钟学会 Laf。 
言归正传，下面我们开始计时，三分钟时间用 Laf 实现一个自己的 ChatGPT！ 
<blockquote> 前提条件：你需要准备一个 ChatGPT 账号并且生成一个 API Key (这一步可以问 Google ) 
</blockquote> 
<h2 id="云函数教学">云函数教学</h2> 
首先需要登录 laf.dev，然后新建一个应用。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/3fae3bd9c3654c1390e1b92be060e027.png" alt=""> 
点击开发按钮进入开发页面。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/3d271330dcf145ee8aacf8b21f917612.png" alt=""> 
在 NPM 依赖面板中点击右上角的 <code>+</code>： 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/6e6379ebfbbc47ba96bbc7e950c3f722.png" alt=""> 
然后输入 chatgpt 并回车进行搜索，选择第一个搜索结果，保存并重启： 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/19ccebd07f0549b0ad33a61bd73b3212.png" alt=""> 
重启之后，自定义依赖项中便出现了 chatgpt。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d359c5b3872b4954aee8d1585adc2bc7.png" alt=""> 
然后就可以像我一样新建一个云函数名字叫 send，并写入以下内容： 
<pre><code class="language-typescript">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
}</code></pre> 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/3e1b78b332574f20bab9a6a94645b708.png" alt=""> 
API Key 是通过环境变量 <code>CHAT_GPT_API_KEY</code> 传入的，所以我们还需要创建一个环境变量。点击左下角的设置图标： 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/42423355a93049fba17cf38274048431.png" alt=""> 
依次选择「环境变量」--&gt; 「新增环境变量」，输入环境变量的名称和值，然后点击「确定」，再点击「更新」，便会重启应用。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d9f301258ae149e58097e710023d3576.png" alt=""> 
现在点击右上角的「运行」，即可调试运行。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2d69d2b107834bdc9bc1f5071beabb80.png" alt=""> 
Perfect！现在我们来试试添加追踪上下文的功能。其实也很简单，只需要在对话时传入上一次对话的 ID 即可，代码如下： 
<pre><code class="language-typescript">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
}</code></pre> 
运行一下看看： 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a0f92275417342d1ab8e27a9d99d84b8.png" alt=""> 
好厉害，竟然两次就答对了我的问题！ 
好了，现在才开始真的计时，因为刚刚是教学环节，不计入耗时😁 
<h2 id="云函数">云函数</h2> 
接下来我们就可以开始动手打造自己的 ChatGPT 了，首先把上一节的函数替换为下面的内容： 
<pre><code class="language-typescript">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
}</code></pre> 
现在应该很好理解这个函数了吧？ 
<h2 id="前端">前端</h2> 
我们要实现的是 Web 版 ChatGPT，所以还需要一个前端页面。首先需要安装 Laf 的 SDK： 
<pre><code class="language-bash">$ npm install laf-client-sdk</code></pre> 
接下来，需要创建一个 cloud 对象： 
<pre><code class="language-typescript">import { Cloud } from "laf-client-sdk"; // 创建 cloud 对象 这里需要将 &lt;appid&gt; 替换成自己的 App ID
const cloud = new Cloud({baseUrl: "https://&lt;appid&gt;.laf.dev",getAccessToken: () =&gt; "", // 这里不需要授权，先填空
});</code></pre> 
这里我们看一下前端的核心代码，非常的简单，就是把提问的内容和上下文 id 传入云函数就可以了。 
<pre><code class="language-typescript">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;
}</code></pre> 
到这一步 我们已经可以发信息给 ChatGPT 并且拿到回复的消息了。 
我们只要稍微加亿点点细节，就可以变成这样： 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d9bd16a98bdd4b949831d033782a6208.png" alt=""> 
加完这点细节之后，基本开发工作就完成了，接下来就是把项目上线分享给你的朋友，顺便装个杯。 
说到上线我们现在应该要去买一台服务器安装 Nginx，配置 Nginx，解析域名，绑定域名... 
NO NO NO 我不允许你浪费年轻而美好的生命，life is short, you need laf 😃 
<h2 id="上线">上线</h2> 
打开你的 Laf，点击存储界面 --&gt; 点击上方加号 --&gt; 创建一个权限为 readonly 的存储桶（名字随意）。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/7c8c7dee0def44b9b01f36251fba6f7c.png" alt=""> 
创建完之后，在你的前端项目中运行打包命令。我这里用的是 <code>npm run build</code>。 
打包完毕之后找到打包好的 <code>dist</code> 文件夹，像我一样把 <code>dist</code> 文件里面的所有东西都上传到我们刚刚创建的存储桶里面，记住是原封不动的上传哦，文件就是文件，文件夹就是文件夹。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/f28167983ee64f6da0f7c7acbba451a7.png" alt=""> 
上传完毕之后，发现右上角有一个 “开启网站托管”，点一下它！ 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/eb7b8bfd5f5b484f9e960e826336d061.png" alt=""> 
点完之后出来一个链接，我们点击一下访问看看是啥东西。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/5f02801ccdfa483f87a78dd7e953b05c.png" alt=""> 
哦！我的老天鹅呀 这不就是我刚刚开发的项目吗？？ 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/00324b6279ba48fbad0d08b0796aaa66.png" alt=""> 
恭喜，到这里你的项目已经上线了，快分享给你的好朋友吧！ 
<hr> 
<ul>
<li>项目源码：https://github.com/zuoFeng59556/chatGPT
</li>
<li>示例网站：https://jyf6wk-chat-gpt.site.laf.dev/
</li>
</ul>
</div>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-0407448025.css" rel="stylesheet">
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-bb308a51ed.css" rel="stylesheet">
</div>
<div id="treeSkill"></div>
</article>

作者

sockstack

许可协议

CC BY 4.0

发布于

2023-11-07

修改于

2024-12-23

上一篇：软件：常用 Linux 软件汇总，值得收藏下一篇：两种方式，轻松实现ChatGPT联网

尚未登录

三分钟搭建一个自己的 ChatGPT (从开发到上线)

文章分类

博客重构之路

Spring Boot简单入门

k8s 入门教程

MySQL 知识

NSQ 消息队列

ThinkPHP5 源码分析

使用 Docker 从零开始搭建私人代码仓库

日常开发汇总

标签列表

springboot

hyperf

swoole

webman

php

多线程

数据结构

docker

k8s

thinkphp

mysql

tailwindcss

flowbite

css

前端