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

相关阅读

图文讲解

源码下载

图片[1]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

git clone https://github.com/Yidadaa/ChatGPT-Next-Web.git
图片[2]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

添加站点

图片[3]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

添加SSL

图片[4]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog
图片[5]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

反向代理设置为127.0.0.1:3000

图片[6]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

配置文件

你需要创建一个.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:

图片[7]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

图片[8]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

创建一个 Cloudflare Worker

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

图片[9]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

图片[10]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

修改 Cloudflare Worker 的代码

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

图片[11]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

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” 确认部署。

图片[12]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

至此,便可以使用该 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” 按钮以绑定域名。

图片[13]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

图片[14]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

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

图片[15]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

安装依赖

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

yarn install
图片[16]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

启动服务

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

yarn dev

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

screen -R ChatGPT
图片[17]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

然后在后台运行

yarn dev
图片[18]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog

效果演示

© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 共6条

请登录后发表评论