用 Express 和 Vue3 搭建的 ChatGPT 演示网页
Go to file
闫冰 808ae600c2
chore: 新增 Railway 部署模版! (#85)
* 新增使用 Railway 免费 一键部署模版!

* 修改描述

* 修改模版的必填项以及新增超时时间参数

* 移除推广code

* Update README.md

---------

Co-authored-by: Redon <790348264@qq.com>
2023-02-22 10:36:11 +08:00
.github/workflows chore: build_docker repositories 2023-02-16 20:30:49 +08:00
.husky fix: 修复代码提交前验证流程 2023-02-13 20:55:26 +08:00
.vscode feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
docs feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
public chore: initialize 2023-02-09 11:21:33 +08:00
service feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
src feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
.commitlintrc.json chore: 添加 lint-staged 2023-02-13 11:03:10 +08:00
.dockerignore Add Dockerfile (#33) 2023-02-16 13:39:07 +08:00
.editorconfig chore: initialize 2023-02-09 11:21:33 +08:00
.env feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
.eslintrc.cjs chore: initialize 2023-02-09 11:21:33 +08:00
.gitattributes chore: initialize 2023-02-09 11:21:33 +08:00
.gitignore chore: gitignore file 2023-02-16 12:00:03 +08:00
.npmrc chore: 添加 lint-staged 2023-02-13 11:03:10 +08:00
CHANGELOG.md feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
CONTRIBUTING.md chore: # CONTRIBUTING 2023-02-15 16:18:20 +08:00
Dockerfile 优化 docker 构建的镜像文件大小,添加自动化构建 (#42) 2023-02-16 20:25:29 +08:00
README.md chore: 新增 Railway 部署模版! (#85) 2023-02-22 10:36:11 +08:00
index.html feat: 阻止移动端缩放 2023-02-15 14:43:23 +08:00
license pref: 优化部份内容 2023-02-09 15:48:27 +08:00
package.json feat: 支持 accessToken 请求 web api 调用 (#80) 2023-02-21 15:26:23 +08:00
pnpm-lock.yaml feat: 支持 markdown 格式 (#77) 2023-02-21 11:57:29 +08:00
postcss.config.js chore: initialize 2023-02-09 11:21:33 +08:00
start.sh Add Dockerfile (#33) 2023-02-16 13:39:07 +08:00
tailwind.config.js chore: v2.5.0 整体优化 (#70) 2023-02-20 14:10:51 +08:00
tsconfig.json feat: 响应式支持移动端 (#49) 2023-02-17 10:57:06 +08:00
vite.config.ts fix: 修复部分多会话逻辑 2023-02-15 22:31:55 +08:00

README.md

ChatGPT Web

使用 expressvue3 搭建的支持 ChatGPT 双模型演示网页

cover cover2

介绍

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

方式 免费? 可靠性 质量
ChatGPTAPI(GPT-3) 可靠 较笨
ChatGPTUnofficialProxyAPI(网页 accessToken) 不可靠 聪明

Note: 网页 accessToken 存在大约 8 小时,而且国内地区网络问题更推荐使用 GPT-3 的方式

对比:

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

切换方式:

  1. 进入 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=

待实现路线

[✓] 双模型

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

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

[✗] 界面多语言

[✗] 界面主题

[✗] More...

前置要求

Node

node 需要 ^16 || ^18 版本(或者 node >= 14 需要安装 fetch polyfill),使用 nvm 可管理本地多个 node 版本

node -v

PNPM

如果你没有安装过 pnpm

npm install pnpm -g

填写密钥

获取 Openai Api KeyaccessToken 并填写本地环境变量 跳转

# 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 优先
  • API_REVERSE_PROXY 可选,设置 OPENAI_ACCESS_TOKEN 时可用 参考
  • TIMEOUT_MS 超时,单位毫秒,可选

docker

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:main
    ports:
      - 3002:3002
    environment:
      # 二选一
      OPENAI_API_KEY: xxxxxx
      # 二选一
      OPENAI_ACCESS_TOKEN: xxxxxx
      # 反向代理,可选
      API_REVERSE_PROXY: xxx
      # 超时,单位毫秒,可选
      TIMEOUT_MS: 60000

手动打包

后端服务

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

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

# 安装
pnpm install

# 打包
pnpm build

# 运行
pnpm prod

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

前端网页

1、修改根目录下 .envVITE_APP_API_BASE_URL 为你的实际后端接口地址

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

参考信息

pnpm build

使用 Railway 部署

Deploy on Railway

Railway 环境变量
环境变量名称 必填 备注
PORT 必填 默认 3002
TIMEOUT_MS 可选 超时时间,单位毫秒,
OPENAI_API_KEY OpenAI API 二选一 使用 OpenAI API 所需的 apiKey (获取 apiKey)
OPENAI_ACCESS_TOKEN Web API 二选一 使用 Web API 所需的 accessToken (获取 accessToken)
API_REVERSE_PROXY 可选,Web API 时可用 Web API 反向代理地址 详情

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

常见问题

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

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

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

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

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

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

参与贡献

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

感谢所有做过贡献的人!

License

MIT © ChenZhaoYu