Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

用 Express 和 Vue3 搭建的 ChatGPT 演示网页

License

NotificationsYou must be signed in to change notification settings

coderwpf/chatgpt-web

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

更多功能:chatgpt-web-plus

covercover2

介绍

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

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

对比:

  1. ChatGPTAPI 使用gpt-3.5-turbo 通过OpenAI 官方API 调用ChatGPT
  2. ChatGPTUnofficialProxyAPI 使用非官方代理服务器访问ChatGPT 的后端API,绕过Cloudflare(依赖于第三方服务器,并且有速率限制)

警告:

  1. 你应该首先使用API 方式
  2. 使用API 时,如果网络不通,那是国内被墙了,你需要自建代理,绝对不要使用别人的公开代理,那是危险的。
  3. 使用accessToken 方式时反向代理将向第三方暴露您的访问令牌,这样做应该不会产生任何不良影响,但在使用这种方法之前请考虑风险。
  4. 使用accessToken 时,不管你是国内还是国外的机器,都会使用代理。默认代理为pengzhile 大佬的https://ai.fakeopen.com/api/conversation,这不是后门也不是监听,除非你有能力自己翻过CF 验证,用前请知悉。社区代理(注意:只有这两个是推荐,其他第三方来源,请自行甄别)
  5. 把项目发布到公共网络时,你应该设置AUTH_SECRET_KEY 变量添加你的密码访问权限,你也应该修改index.html 中的title,防止被关键词搜索到。

切换方式:

  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 优先

环境变量:

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

/service/.env.example

待实现路线

[✓] 双模型

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

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

[✓] 访问权限控制

[✓] 数据导入、导出

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

[✓] 界面多语言

[✓] 界面主题

[✗] More...

前置要求

Node

node 需要^16 || ^18 || ^19 版本(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/overviewOPENAI_API_KEY=# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` responseOPENAI_ACCESS_TOKEN=

安装依赖

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

后端

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

pnpm install

前端

根目录下运行以下命令

pnpm bootstrap

测试环境运行

后端服务

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

pnpm start

前端网页

根目录下运行以下命令

pnpm dev

环境变量

API 可用:

  • OPENAI_API_KEYOPENAI_ACCESS_TOKEN 二选一
  • OPENAI_API_MODEL 设置模型,可选,默认:gpt-3.5-turbo
  • OPENAI_API_BASE_URL 设置接口地址,可选,默认:https://api.openai.com
  • OPENAI_API_DISABLE_DEBUG 设置接口关闭 debug 日志,可选,默认:empty 不关闭

ACCESS_TOKEN 可用:

  • OPENAI_ACCESS_TOKENOPENAI_API_KEY 二选一,同时存在时,OPENAI_API_KEY 优先
  • API_REVERSE_PROXY 设置反向代理,可选,默认:https://ai.fakeopen.com/api/conversation社区(注意:只有这两个是推荐,其他第三方来源,请自行甄别)

通用:

  • AUTH_SECRET_KEY 访问权限密钥,可选
  • MAX_REQUEST_PER_HOUR 每小时最大请求次数,可选,默认无限
  • TIMEOUT_MS 超时,单位毫秒,可选
  • SOCKS_PROXY_HOSTSOCKS_PROXY_PORT 一起时生效,可选
  • SOCKS_PROXY_PORTSOCKS_PROXY_HOST 一起时生效,可选
  • HTTPS_PROXY 支持httphttps,socks5,可选
  • ALL_PROXY 支持httphttps,socks5,可选

打包

使用 Docker

Docker 参数示例

docker

Docker build & Run

docker build -t chatgpt-web.# 前台运行docker run --name chatgpt-web --rm -it -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web# 后台运行docker run --name chatgpt-web -d -p 127.0.0.1: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:      -127.0.0.1:3002:3002environment:# 二选一OPENAI_API_KEY:sk-xxx# 二选一OPENAI_ACCESS_TOKEN:xxx# API接口地址,可选,设置 OPENAI_API_KEY 时可用OPENAI_API_BASE_URL:xxx# API模型,可选,设置 OPENAI_API_KEY 时可用,https://platform.openai.com/docs/models# gpt-4, gpt-4-0314, gpt-4-32k, gpt-4-32k-0314, gpt-3.5-turbo, gpt-3.5-turbo-0301, text-davinci-003, text-davinci-002, code-davinci-002OPENAI_API_MODEL:xxx# 反向代理,可选API_REVERSE_PROXY:xxx# 访问权限密钥,可选AUTH_SECRET_KEY:xxx# 每小时最大请求次数,可选,默认无限MAX_REQUEST_PER_HOUR:0# 超时,单位毫秒,可选TIMEOUT_MS:60000# Socks代理,可选,和 SOCKS_PROXY_PORT 一起时生效SOCKS_PROXY_HOST:xxx# Socks代理端口,可选,和 SOCKS_PROXY_HOST 一起时生效SOCKS_PROXY_PORT:xxx# HTTPS 代理,可选,支持 http,https,socks5HTTPS_PROXY:http://xxx:7890
  • OPENAI_API_BASE_URL 可选,设置OPENAI_API_KEY 时可用
  • OPENAI_API_MODEL 可选,设置OPENAI_API_KEY 时可用

防止爬虫抓取

nginx

将下面配置填入nginx配置文件中,可以参考docker-compose/nginx/nginx.conf 文件中添加反爬虫的方法

    # 防止爬虫抓取    if ($http_user_agent ~* "360Spider|JikeSpider|Spider|spider|bot|Bot|2345Explorer|curl|wget|webZIP|qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|NSPlayer|bingbot")    {      return 403;    }

使用 Railway 部署

Deploy on Railway

Railway 环境变量

环境变量名称必填备注
PORT必填默认3002
AUTH_SECRET_KEY可选访问权限密钥
MAX_REQUEST_PER_HOUR可选每小时最大请求次数,可选,默认无限
TIMEOUT_MS可选超时时间,单位毫秒
OPENAI_API_KEYOpenAI API 二选一使用OpenAI API 所需的apiKey(获取 apiKey)
OPENAI_ACCESS_TOKENWeb 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代理端口
SOCKS_PROXY_USERNAME可选,和SOCKS_PROXY_HOST 一起时生效Socks代理用户名
SOCKS_PROXY_PASSWORD可选,和SOCKS_PROXY_HOST 一起时生效Socks代理密码
HTTPS_PROXY可选HTTPS 代理,支持 http,https, socks5
ALL_PROXY可选所有代理 代理,支持 http,https, socks5

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

手动打包

后端服务

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

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

# 安装pnpm install# 打包pnpm build# 运行pnpm prod

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

前端网页

1、修改根目录下.env 文件中的VITE_GLOB_API_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

About

用 Express 和 Vue3 搭建的 ChatGPT 演示网页

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue56.6%
  • TypeScript28.8%
  • Less13.0%
  • HTML0.7%
  • Dockerfile0.4%
  • JavaScript0.3%
  • Other0.2%

[8]ページ先頭

©2009-2025 Movatter.jp