xiamuguizhi/chatgpt-web

使用 express 和 vue3 搭建的 ChartGPT 演示网页

ChatGPT Web

中文 | English [DEMO]国内服务器镜像（仅境内可访问） [DEMO]cloudflare镜像（境内境外都可访问）

声明：此项目只发布于 Github，基于 MIT 协议，免费且作为开源学习使用。并且不会有任何形式的卖号、付费服务、讨论群、讨论组等行为。谨防受骗。

• ChatGPT Web
  • 介绍
  • 待实现路线
  • 前置要求
    • Node
    • PNPM
    • 填写密钥
  • 安装依赖
    • 后端
    • 前端
  • 测试环境运行
    • 后端服务
    • 前端网页
  • 打包
    • 使用 Docker
      • Docker 参数示例
      • Docker build & Run
      • Docker compose
    • 使用 Railway 部署
      • Railway 环境变量
    • 手动打包
      • 后端服务
      • 前端网页
  • 常见问题
  • 参与贡献
  • 赞助
  • License

介绍

支持双模型，提供了两种非官方 ChatGPT API 方法

方式	免费？	可靠性	质量
ChatGPTAPI(gpt-3.5-turbo-0301)	否	可靠	相对较笨
ChatGPTUnofficialProxyAPI(网页 accessToken)	是	相对不可靠	聪明

对比：

1. ChatGPTAPI 使用 gpt-3.5-turbo-0301 通过官方OpenAI补全API模拟ChatGPT（最稳健的方法，但它不是免费的，并且没有使用针对聊天进行微调的模型）
2. ChatGPTUnofficialProxyAPI 使用非官方代理服务器访问 ChatGPT 的后端API，绕过Cloudflare（使用真实的的ChatGPT，非常轻量级，但依赖于第三方服务器，并且有速率限制）

警告：

1. 你应该使用 API 方式并自建代理使你使用的风险降到最低。
2. 使用 accessToken 方式时反向代理将向第三方暴露您的访问令牌。这样做应该不会产生任何不良影响，但在使用这种方法之前请考虑风险，修改代理地址时也请使用公开的社区方案，不要不要不要使用来源不明的地址！
3. 因为国内 API 被墙，如果服务器不在国外，则需要代理才能请求到官方接口，也非常不建议使用别人发出来的代理地址，请自己搭建。
4. 人性是丑陋的，你永远不知道你相信的某些乐于分享的好人在用你的账号做什么！！！

注：强烈建议使用ChatGPTAPI，因为它使用 OpenAI 官方支持的API。并且可能会在将来的版本中删除对ChatGPTUnofficialProxyAPI的支持。

切换方式：

1. 进入 service/.env.example 文件，复制内容到 service/.env 文件
2. 使用 OpenAI API Key 请填写 OPENAI_API_KEY 字段 (获取 apiKey)
3. 使用 Web API 请填写 OPENAI_ACCESS_TOKEN 字段 (获取 accessToken)
4. 同时存在时以 OpenAI API Key 优先

反向代理：

ChatGPTUnofficialProxyAPI时可用，详情

# service/.env
API_REVERSE_PROXY=

环境变量：

全部参数变量请查看或这里

/service/.env

待实现路线

[✓] 双模型

[✓] 多会话储存和上下文逻辑

[✓] 对代码等消息类型的格式化美化处理

[✓] 访问权限控制

[✓] 数据导入、导出

[✓] 保存消息到本地图片

[✓] 界面多语言

[✓] 界面主题

[✗] More...

前置要求

Node

node 需要 ^16 || ^18 版本（node >= 14 需要安装 fetch polyfill），使用 nvm 可管理本地多个 node 版本

node -v

PNPM

如果你没有安装过 pnpm

npm install pnpm -g

填写密钥

获取 Openai Api Key 或 accessToken 并填写本地环境变量 跳转

# service/.env 文件

# OpenAI API Key - https://platform.openai.com/overview
OPENAI_API_KEY=

# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response
OPENAI_ACCESS_TOKEN=

安装依赖

为了简便 后端开发人员 的了解负担，所以并没有采用前端 workspace 模式，而是分文件夹存放。如果只需要前端页面做二次开发，删除 service 文件夹即可。

后端

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

pnpm install

前端

根目录下运行以下命令

pnpm bootstrap

测试环境运行

后端服务

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

pnpm start

前端网页

根目录下运行以下命令

pnpm dev

打包

使用 Docker

Docker 参数示例

• OPENAI_API_KEY 二选一
• OPENAI_ACCESS_TOKEN 二选一，同时存在时，OPENAI_API_KEY 优先
• OPENAI_API_BASE_URL 可选，设置 OPENAI_API_KEY 时可用
• OPENAI_API_MODEL 可选，设置 OPENAI_API_KEY 时可用
• API_REVERSE_PROXY 可选，设置 OPENAI_ACCESS_TOKEN 时可用 参考
• AUTH_SECRET_KEY 访问权限密钥，可选
• TIMEOUT_MS 超时，单位毫秒，可选
• SOCKS_PROXY_HOST 可选，和 SOCKS_PROXY_PORT 一起时生效
• SOCKS_PROXY_PORT 可选，和 SOCKS_PROXY_HOST 一起时生效

Docker build & Run

docker build -t chatgpt-web .

# 前台运行
docker run --name chatgpt-web --rm -it -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web

# 后台运行
docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web

# 运行地址
http://localhost:3002/

Docker compose

Hub 地址

version: '3'

services:
  app:
    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
    ports:
      - 3002:3002
    environment:
      # 二选一
      OPENAI_API_KEY: xxxxxx
      # 二选一
      OPENAI_ACCESS_TOKEN: xxxxxx
      # API接口地址，可选，设置 OPENAI_API_KEY 时可用
      OPENAI_API_BASE_URL: xxxx
      # API模型，可选，设置 OPENAI_API_KEY 时可用
      OPENAI_API_MODEL: xxxx
      # 反向代理，可选
      API_REVERSE_PROXY: xxx
      # 访问权限密钥，可选
      AUTH_SECRET_KEY: xxx
      # 超时，单位毫秒，可选
      TIMEOUT_MS: 60000
      # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效
      SOCKS_PROXY_HOST: xxxx
      # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
      SOCKS_PROXY_PORT: xxxx

• OPENAI_API_BASE_URL 可选，设置 OPENAI_API_KEY 时可用
• OPENAI_API_MODEL 可选，设置 OPENAI_API_KEY 时可用

使用 Railway 部署

Railway 环境变量

环境变量名称	必填	备注
PORT	必填	默认 3002
AUTH_SECRET_KEY	可选	访问权限密钥
TIMEOUT_MS	可选	超时时间，单位毫秒
OPENAI_API_KEY	OpenAI API 二选一	使用 OpenAI API 所需的 apiKey (获取 apiKey)
OPENAI_ACCESS_TOKEN	Web API 二选一	使用 Web API 所需的 accessToken (获取 accessToken)
OPENAI_API_BASE_URL	可选，OpenAI API 时可用	API接口地址
OPENAI_API_MODEL	可选，OpenAI API 时可用	API模型
API_REVERSE_PROXY	可选，Web API 时可用	Web API 反向代理地址 详情
SOCKS_PROXY_HOST	可选，和 SOCKS_PROXY_PORT 一起时生效	Socks代理
SOCKS_PROXY_PORT	可选，和 SOCKS_PROXY_HOST 一起时生效	Socks代理端口

注意: Railway 修改环境变量会重新 Deploy

手动打包

后端服务

如果你不需要本项目的 node 接口，可以省略如下操作

复制 service 文件夹到你有 node 服务环境的服务器上。

# 安装
pnpm install

# 打包
pnpm build

# 运行
pnpm prod

PS: 不进行打包，直接在服务器上运行 pnpm start 也可

前端网页

1、修改根目录下 .env 文件中的 VITE_APP_API_BASE_URL 为你的实际后端接口地址

2、根目录下运行以下命令，然后将 dist 文件夹内的文件复制到你网站服务的根目录下

参考信息

pnpm build

常见问题

Q: 为什么 Git 提交总是报错？

A: 因为有提交信息验证，请遵循 Commit 指南

Q: 如果只使用前端页面，在哪里改请求接口？

A: 根目录下 .env 文件中的 VITE_GLOB_API_URL 字段。

Q: 文件保存时全部爆红?

A: vscode 请安装项目推荐插件，或手动安装 Eslint 插件。

Q: 前端没有打字机效果？

A: 一种可能原因是经过 Nginx 反向代理，开启了 buffer，则 Nginx 会尝试从后端缓冲一定大小的数据再发送给浏览器。请尝试在反代参数后添加 proxy_buffering off;，然后重载 Nginx。其他 web server 配置同理。

参与贡献

贡献之前请先阅读 贡献指南

感谢所有做过贡献的人!

赞助

如果你觉得这个项目对你有帮助，并且情况允许的话，可以给我一点点支持，总之非常感谢支持～

WeChat Pay

Alipay

License

MIT © ChenZhaoYu