如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路

作者:FancyPig | 发布时间: | 更新时间:

相关阅读

data-postsbox="{"id":34544,"title":"一键拥有你自己的 ChatGPT 网页服务。| 界面非常好看的ChatGPT网页版","author":"Sec-Labs","author_id":10015,"cover_image":"","cover_video":"","views":1339,"comment_count":2,"category":"","is_forum_post":true}">{"id":34544,"title":"一键拥有你自己的 ChatGPT 网页服务。| 界面非常好看的ChatGPT网页版","author":"Sec-Labs","author_id":10015,"cover_image":"","cover_video":"","views":1339,"comment_count":2,"category":"","is_forum_post":true}
data-postsbox="{"id":32445,"title":"如何制作一个ChatGPT聊天页面 | ChatGPT国产化思路","author":"FancyPig","author_id":1,"cover_image":"https://static.pigsec.cn/wp-content/uploads/2023/02/20230216014624643.png","cover_video":"","views":92244,"comment_count":16,"category":"knowledge","is_forum_post":false}">{"id":32445,"title":"如何制作一个ChatGPT聊天页面 | ChatGPT国产化思路","author":"FancyPig","author_id":1,"cover_image":"https://static.pigsec.cn/wp-content/uploads/2023/02/20230216014624643.png","cover_video":"","views":92244,"comment_count":16,"category":"knowledge","is_forum_post":false}

图文讲解

源码下载

当然,你也可以直接使用下面命令,将其下载到服务器上

git clone https://github.com/Yidadaa/ChatGPT-Next-Web.git

添加站点

添加SSL

反向代理设置为127.0.0.1:3000

配置文件

你需要创建一个.env文件,其中需要包含你的OpenAI ApiKey,譬如

OPENAI_API_KEY=sk-xxxxxxxxxxxx

上述sk-xxxxxxxxxxxx替换成您的key

除此之外,如果你还需要使用自己的镜像代理URL,则还需要配置BASE_URL

OPENAI_API_KEY=sk-xxxxxxxxxxxx
BASE_URL=https://openai.nooc.ink/

https://openai.nooc.ink/要改成你自己的OpenAI API镜像代理

镜像代理URL可以使用cloudflare workers搭建,参考👇

参考链接:https://github.com/noobnooc/noobnooc/discussions/9

🆕 将域名 NS 转到 Cloudflare

如果域名已经托管在 Cloudflare 的忽略这一步即可。

⚠️ 经评论区指出,Cloudflare Workers 的域名绑定仅支持托管在 Cloudflare 上的域名。由于本人常年是把域名托管在 Cloudflare 的没有注意到这一点,所以得先将域名的 NS 转到 Cloudflare,如果介意将域名转到 Cloudflare 的话,可以考虑使用 nginx 反代、Docker 容器等其他方法 🥲。

没有 Cloudflare 账号的话可以注册一个,具体注册细节就不多说了。注册或登录到 Cloudflare 的管理界面后,点击侧边栏的 “Websites” ,然后点击 “Add a Site” 按钮准备将域名转到 Cloudflare:

在 “Enter your site (example.com)” 处输入要转入的域名后,点击 “Add Site”:

根据 Cloudflare 的提示,在域名注册商处将 NS 修改到 Cloudflare 指定的地址,等待域名解析成功后,即可进行后续操作。

创建一个 Cloudflare Worker

登录到 Cloudflare 的管理界面后,点击侧边栏的 “Workers” 选项,然后点击 “Create a Service” 创建一个 Worker。

然后在创建界面中输入 “Service name” 后点击 “Create Service” 按钮新建 Worker。“Select a starter” 项先不用管。

至此 Cloudflare 的 Worker 便创建好了,下面开始修改 Worker 的代码,使其能代理 OpenAI 的 API。

修改 Cloudflare Worker 的代码

在 Worker 的管理界面,点击右上角的 “Quick Edit” 按钮编辑代码 Worker 的代码。

在左侧的代码编辑器中,删除现有的所有代码,然后复制粘贴以下内容到代码编辑器:

export default {
  async fetch(request) {
    const url = new URL(request.url);
    url.host = 'api.openai.com';
    return fetch(url, { headers: request.headers, method: request.method, body: request.body });
  },
};

最后点击编辑器右下角的 “Save and deploy” 按钮部署该代码,在弹出的对话框中继续选择 “Save and deploy” 确认部署。

至此,便可以使用该 worker 的地址来代替 OpenAI 的 API 地址了。比如想要请求 ChatGPT 的 API 时,把官方文档中的 https://api.openai.com/v1/chat/completions 替换成 https://openai.workers.dev 即可(注意这个地址并不存在,是需要换成自己刚刚创建的 Worker 的地址)。

但是你可能会发现,这样做了依然还是没有解决问题,因为 Cloudflare Workers 的 workers.dev 域名也是被 GFW 认证过的🥲。但是好在只是认证了 workers.dev 域名,而 ip 还是幸存的状态,所以我们可以给 Worker 绑定一个自己的域名。

绑定域名

在 Cloudflare Workers 的管理界面中,点击 “Triggers” 选项卡,然后点击 “Custom Domians” 中的 “Add Custom Domain” 按钮以绑定域名。

输入域名后点击 “Add Custom Domain”,根据提示修改域名的 DNS 记录。因为我的域名是托管在 Cloudflare 上的,所以无需手动更改 DNS 记录,如果域名没有托管在 Cloudfalre 上,可以根据相关提示自行配置。 ⚠️ 据评论区提示,目前只支持 NS 托管在 Cloudflare 上的域名,如果不介意,可以点击 Cloudflare 侧边栏的 “Websites”,然后点击 “Add a Site” 按钮,根据提示将域名的 NS 记录指定到 Cloudflare。

至此便大功告成。等待片刻,应该就可以通过你自己的域名来代替 OpenAI 的 API 地址了,比如在本文的例子中,想要请求 ChatGPT 的 API ,即是把官方 API 地址 https://api.openai.com/v1/chat/completions 换为我自己的域名 https://openai.nooc.ink/v1/chat/completions ,其他参数均参照官方示例即可。由于 Cloudflare 有每天免费 10 万次的请求额度,所以轻度使用基本是零成本的。⚠️ 注意请不要使用我这里的 openai.nooc.ink,因为随时可能会被我关闭🤪

安装依赖

data-postsbox="{"id":36280,"title":"如何安装nvm | 使用nvm安装npm、yarn、pnpm等环境","author":"FancyPig","author_id":1,"cover_image":"https://static.pigsec.cn/wp-content/uploads/2023/05/20230506044203444.png","cover_video":"","views":1725,"comment_count":4,"category":"project","is_forum_post":false}">{"id":36280,"title":"如何安装nvm | 使用nvm安装npm、yarn、pnpm等环境","author":"FancyPig","author_id":1,"cover_image":"https://static.pigsec.cn/wp-content/uploads/2023/05/20230506044203444.png","cover_video":"","views":1725,"comment_count":4,"category":"project","is_forum_post":false}

点击终端,在项目的目录下运行下面命令

yarn install

启动服务

同样地,在项目目录下运行下面的命令来启动服务

yarn dev

如果你需要后台运行,则可以使用screen后台运行,譬如启动一块屏幕名字叫做ChatGPT

screen -R ChatGPT

然后在后台运行

yarn dev

效果演示

标签:chatgpt官网, chatgpt国内能用吗, chatgpt下载, chatgpt怎么用, ChatGPT网页版怎么聊天, CHATGPT网页版跟手机版的区别, chatgpt网页版源码, chatgpt源码, chatgpt在线, ChatGPT在线 公众号, ChatGPT在线问答, ChatGPT体验网址, 部署chatgpt, ChatGPT本地化部署, chatgpt本地化, chatGPT页面白板, chatGPT页面图片, chatGPT页面介绍