当前位置:网站首页 > 更多 > 玩软件 > 正文

[AI产品] ChatGPT接入到web网站保姆级教程

作者:CC下载站 日期:2023-03-23 13:00:51 浏览:20 分类:玩软件

我之前做了怎么注册ChatGPT以及把ChatGPT接入微信、公众号、电报telegram等平台的教程。

今天我就来把ChatGPT接入Web网站,供粉丝免费使用,这个网站不需要魔法上网,也不需要注册,打开就可以使用。我做这个网站的主要目的是为了让没有精力或者条件去注册ChatGPT的小伙伴也能免费体验到ChatGPT。

同时我会公布我完整的搭建教程,让每一个人都能轻轻松松搭建自己的ChatGPT网站并分享给朋友使用。

我先来展示一下我搭建的网站,既可以在电脑上使用,也可以在手机上使用。它接入了ChatGPT3.5的API,如果GPT 4.0的API申请通过,我也会公布4.0的网站给大家体验。喜欢的给个一键三连吧。

这是我的ChatGPT web服务器在电脑和手机上的展示效果。 [AI产品] ChatGPT接入到web网站保姆级教程

我先教大家怎么自己搭建ChatGPT web网站,博客最后会公布我的网站给大家免费使用。

你也可以直接拉到最后获取我的ChatGPT web网站使用。

搭建ChatGPT web网站

API key

需要一个chatGPT账号并生成一个API Key,这个API secret Key是为了验证你的身份。

这个非常简单,我们打开openai的平台地址:https://platform.openai.com/

登录之后点击右上角的头像,点击Manage Account->API Keys->Create New Secret Key, 然后复制下来保存备用。

[AI产品] ChatGPT接入到web网站保姆级教程

云服务器

云服务器需要在境外。

VPS/云服务器

如果你还没有云服务器或者VPS,可以点此地址购买:http://bit.ly/3GlfucW

它们的VPS非常便宜,可以用来搭建科学上网,搭建个人网站,也可以用来接入ChatGPT。如果你的预算充足,也可以直接购买云服务器

[AI产品] ChatGPT接入到web网站保姆级教程

云服务器建议使用Linux Ubuntu系统

如果有了云服务器我们先切换到root账户sudo su

然后执行以下命令来复制一份网站的模版:

git clone https://github.com/techxiaofei/chatgpt-web.git
cd chatgpt-web

安装依赖

安装Node

node 需要 18或以上的版本

执行以下命令:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
# 安装nodejs
apt install nodejs

# 安装node包管理器
apt install npm

# 升级包管理工具upgrade
npm install -g n

# 升级到node.js最新稳定版
n stable # latest

hash -r

# 查看版本,如果是 18及以上就可以了
node -v

安装PNPM

如果你没有安装过 pnpm,这是npm的替代品

1
npm install pnpm -g

填写密钥

# 进入 service目录
cd service
# 打开 .env 文件
vim .env

# 填写你之前复制的API srecet key
OPENAI_API_KEY=abcdefgh

安装服务

后端

我们在文件夹 service 运行以下命令

1
pnpm install

前端

根目录chatgpt-web下运行以下命令

1
pnpm bootstrap

运行

后端服务

进入文件夹 service 运行以下命令

1
2
touch nohup.out
nohup pnpm start & tail -f nohup.out

前端网页

默认是1002端口,记得修改云服务器的防火墙允许你使用的端口被外网访问。

如果需要修改端口请打开这个文件修改。

1
vim vite.config.ts

我这里把端口改成80,因为http的默认端口是80,为了方便我绑定域名到这个ip上。如果你的80端口被占用,那请选择另外的端口。

根目录下运行以下命令

1
2
touch nohup.out
nohup pnpm dev & tail -f nohup.out

绑定域名

如果你有域名,可以直接绑定到你的公网IP上,既可以绑定`顶级域名也可以绑定到二级域名。

只需要加一条A记录即可。

顶级域名

使用 http://example.com 就可以访问了。 [AI产品] ChatGPT接入到web网站保姆级教程

二级域名

使用 http://chat.example.com 就可以访问了。 [AI产品] ChatGPT接入到web网站保姆级教程

杀进程

如果需要重启,需要执行以下命令查到所有的进程ID,然后杀掉所有进程

1
2
3
4
ps -ef | grep -v grep | grep -E 'pnpm|node'

# 所有的进程都需要kill掉
kill -9 PID

[AI产品] ChatGPT接入到web网站保姆级教程

修改个人信息

如果你想修改你的个人信息:

[AI产品] ChatGPT接入到web网站保姆级教程

打开helper.ts文件,vim src/store/modules/user/helper.ts

export function defaultSetting(): UserState {
  return {
    userInfo: {
      avatar: 'https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg',
      name: '小编',
      description: 'Youtube频道 <a href="https://www.youtube.com/@techxiaofei" class="text-blue-500" target="_blank" >小编</a>',
    },
  }
}

userInfo的信息都可以修改。

密码访问

如果需要添加密码访问: [AI产品] ChatGPT接入到web网站保姆级教程

打开.env文件,vim service/.env

这个等号后面填上你的密码即可。

AUTH_SECRET_KEY=

如果想修改提示文本:

vim src/locales/zh-CN.ts

搜索:unauthorizedTips并修改文本即可。 [AI产品] ChatGPT接入到web网站保姆级教程

每小时访问限制

打开service目录下的.env文件,vim service/.env

# Rate Limit
MAX_REQUEST_PER_HOUR=3600

我的web网站

更新:由于使用太过火爆,我会不定期加上密码访问,关注我的公众号小编回复chatgpt就可获得最新密码。

您需要 登录账户 后才能发表评论

取消回复欢迎 发表评论:

关灯