ChatGPT-Plus
ChatGPT-Plus 是使用官方 ChatGPT API 的应用程序。
演示 Demo / 反馈 Issues / 开发 Gitpod / 部署 Vercel
喜欢这个项目吗?请帮忙点个 Star ⭐️
或者分享给您的朋友,以帮助它得到改善!
Features
📖介绍
ChatGPT-Plus 客户端是官方 ChatGPT API 的应用程序。该应用程序是对 OpenAI 的ChatGPT的官方 API 的封装应用。
✨特性
- 📦 一个完整的 ChatGPT 客户端。
- 🚀 使用 Nextjs & Nestjs 构建,快速启动。
- 📱 响应式设计,支持移动端访问。
- 🌈 支持多种主题, 白天/夜间模式。
- 🌍 国际化支持,目前支持中文和英文。
- 📦 支持自定义提示词,查看在线推荐提示词
- 🎨 使用 CSS-in-JS 技术,支持主题定制。
- 📦 支持 Docker & Vercel 部署。
🔬原理
提供两种方式进行访问,要在 Node.js 中使用此模块,您需要在两种方法之间选择:
方法 | 免费? | 健壮? | 质量? |
---|---|---|---|
ChatGPTAPI | ❌ 否 | ✅ 是 | ✅️ 真实的 ChatGPT 模型 |
ChatGPTUnofficialProxyAPI | ✅ 是 | ☑️ 可能 | ✅ 真实的 ChatGPT |
-
ChatGPTAPI
- 使用带有官方 OpenAI 聊天完成 API(官方、强大的方法,但不免费)的gpt-3.5-turbo-0301
模型。您可以覆盖模型、完成参数和系统消息,以完全自定义您的助手。 -
ChatGPTUnofficialProxyAPI
- 使用非官方代理服务器以绕过 Cloudflare 的方式访问 ChatGPT 的后端 API(使用真实的 ChatGPT,比较轻量级,但依赖第三方服务器且有速率限制)。
这两种方法具有非常相似的 API,因此在它们之间切换应该很简单。
注意:我们强烈建议使用ChatGPTAPI
,因为它使用 OpenAI 官方支持的 API。在未来的发布版本中,我们可能会停止对ChatGPTUnofficialProxyAPI
的支持。
该请求原理采用的是 chatgpt-api提供的功能模块.
💻在线开发
你可以使用 Gitpod 进行在线开发:
或者克隆到本地开发,按照以下步骤进行:
🚀安装运行
克隆项目
# clone the project
git clone https://github.com/zhpd/chatgpt-plus.git
如果没有 git 环境,可以直接下载 zip 包,解压后进入项目目录
环境配置
Node v14+
本项目基于 Node.js 进行开发,需要 Node.js 14.0+ 环境。请确保使用
node >= 18
以便fetch
可用(或使用node >= 14
并安装 fetch polyfill)。
Api Key / AccessToken
本项目使用的是 OpenAI 官方提供的 API,需要申请 Api Key 和 AccessToken
- OpenAI 官方注册申请地址:https://platform.openai.com/,需要科学上网
- 通过其他方式获取
ApiKey
或AccessToken
点击查看
申请成功后,将 APIKey 和 AccessToken 填写到 chatgpt-plus/service/.env
文件中
可选 VSCode
推荐使用 VSCode 编辑器进行开发,安装插件
ESLint
和Prettier
,并在设置中开启Format On Save
前端网页
环境变量-前端
配置端口和接口请求地址在根目录.env 里。 可直接复制根目录下的.env.example 文件进行修改,文件名修改为.env)
环境变量名 | 默认值 | 说明 |
---|---|---|
PORT | 3000 | 端口 |
NEXT_PUBLIC_API_URL | http://localhost:3002 | 接口地址 |
配置文件
可直接复制根目录下的.env.example 文件进行修改,文件名修改为.env
# port
PORT=3000
# api url
NEXT_PUBLIC_API_URL=http://localhost:3002
运行代码
# enter the project directory
cd chatgpt-plus
# install dependency
npm install
# develop
npm run dev
运行启动成功后,可在浏览器打开 http://localhost:3000 查看效果
后端服务
环境变量-后端
配置端口和 ApiKey、AccessToken 在 service 目录下.env 里
环境变量名 | 默认值 | 说明 |
---|---|---|
PORT | 3002 | 端口 |
OPENAI_API_KEY | - | API_KEY |
OPENAI_ACCESS_TOKEN | - | ACCESS_TOKEN |
`API_REVERSE_PROXY |
- Code Packaging
- Enter the
service
folder - Run
npm install
to install dependencies - Run
npm run build
to package the code
- Enter the
- Deployment
- Copy the files from the
service/dist
folder to the backend service directory of your website - Enter the
service/dist
folder - Run
npm run start
to start the service
- Copy the files from the
Note: If you don't want to package, you can directly copy the
service
folder to the server, runnpm install
andnpm run start
to start the service.
ℹ️ Additional Information
Obtaining the API Key
Configuration File
You can access the backend service by configuring the OPENAI_API_KEY
key in the .env file:
# R OpenAI API Key
OPENAI_API_KEY =
This project uses the API provided by OpenAI. You need to first apply for an OpenAI account.
- OpenAI official registration address: https://platform.openai.com/, requires a VPN
- After successful registration, you can obtain the API Key from https://platform.openai.com/account/api-keys, requires a VPN
Obtaining the Access Token
Configuration File
You can access the backend service by configuring the OPENAI_ACCESS_TOKEN
access token in the .env file:
# Change this to an `accessToken` extracted from the ChatGPT
OPENAI_ACCESS_TOKEN =
You need to obtain an OpenAI access token from the ChatGPT web application. You can use one of the following methods, which require an email
and password
, and will return an access token:
-
- Python libraries:
- acheong08/OpenAIAuth
These libraries work with accounts authenticated using email and password (for example, they do not support accounts authenticated via Microsoft/Google).
Alternatively, you can manually obtain an accessToken
by logging into the ChatGPT web application and opening https://chat.openai.com/api/auth/session
. This link will return a JSON object containing your accessToken
string.
The access token is valid for several days.
Note: Using a reverse proxy will expose your access token to third parties. This doesn't cause any negative effects, but consider the risks before using this method.
Reverse Proxy
Configuration File
You can override the reverse proxy address by configuring the API_REVERSE_PROXY
in the .env file for the backend service:
# Reverse Proxy
API_REVERSE_PROXY =
Known reverse proxies run by community members include:
Reverse Proxy URL | Author | Rate Limit | Last Checked Date |
---|---|---|---|
https://bypass.churchless.tech/api/conversation | @acheong08 | 5 req / 10 seconds by IP | 3/24/2023 |
https://api.pawan.krd/backend-api/conversation | @PawanOsman | 50 req / 15 seconds (~3 r/s) | 3/23/2023 |
Note: Currently, no information is disclosed on how reverse proxies work to prevent OpenAI from disabling access.
❓ FAQs
Q: If I only use the frontend page, where do I change the request interface?
A: The API_URL
field in the .env
file in the root directory.
Q: The frontend doesn't have the typewriter effect?
A: One possible reason is that after being reverse-proxied by Nginx, buffering is enabled, so Nginx tries to buffer a certain amount of data from the backend before sending it to the browser. Try adding proxy_buffering off;
after the proxy settings, and then reload Nginx. Other web server configurations are similar.
🤝 Contributing
Thanks to all who have contributed!
Star History
🙏 Acknowledgements
- A big thank you to the project supporters and all other contributors 💪
- Thanks to the reference projects @transitive-bullshit chatgpt-api and @Chanzhaoyu chatgpt-web for their ideas. 👍
- A big thank you to OpenAI for creating ChatGPT 🔥
💰 Sponsorship
If you find this project helpful, please give it a Star ⭐️ or share it with your friends. Your support is my greatest motivation!
📜 License
MIT © zhpd