|
| 1 | +# ChatGPT Web |
| 2 | + |
| 3 | +<div style="font-size: 1.5rem;"> |
| 4 | + <a href="./README.md">中文</a> | |
| 5 | + <a href="./README.en.md">English</a> |
| 6 | +</div> |
| 7 | +</br> |
| 8 | + |
| 9 | +> Disclaimer: This project is only released on GitHub, under the MIT License, free and for open-source learning purposes. There will be no account selling, paid services, discussion groups, or forums. Beware of fraud. |
| 10 | +
|
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +- [ChatGPT Web](#chatgpt-web) |
| 15 | + - [Introduction](#introduction) |
| 16 | + - [Roadmap](#roadmap) |
| 17 | + - [Prerequisites](#prerequisites) |
| 18 | + - [Node](#node) |
| 19 | + - [PNPM](#pnpm) |
| 20 | + - [Fill in the Keys](#fill-in-the-keys) |
| 21 | + - [Install Dependencies](#install-dependencies) |
| 22 | + - [Backend](#backend) |
| 23 | + - [Frontend](#frontend) |
| 24 | + - [Run in Test Environment](#run-in-test-environment) |
| 25 | + - [Backend Service](#backend-service) |
| 26 | + - [Frontend Webpage](#frontend-webpage) |
| 27 | + - [Packaging](#packaging) |
| 28 | + - [Using Docker](#using-docker) |
| 29 | + - [Docker Parameter Example](#docker-parameter-example) |
| 30 | + - [Docker Build & Run](#docker-build--run) |
| 31 | + - [Docker Compose](#docker-compose) |
| 32 | + - [Deploying with Railway](#deploying-with-railway) |
| 33 | + - [Railway Environment Variables](#railway-environment-variables) |
| 34 | + - [Manual Packaging](#manual-packaging) |
| 35 | + - [Backend Service](#backend-service-1) |
| 36 | + - [Frontend Webpage](#frontend-webpage-1) |
| 37 | + - [FAQ](#faq) |
| 38 | + - [Contributing](#contributing) |
| 39 | + - [Sponsor](#sponsor) |
| 40 | + - [License](#license) |
| 41 | + |
| 42 | +## Introduction |
| 43 | + |
| 44 | +Supports dual models, provides two unofficial `ChatGPT API` methods: |
| 45 | + |
| 46 | +| Method | Free? | Reliability | Quality | |
| 47 | +| --------------------------------------------- | ------ | ----------- | ------- | |
| 48 | +| `ChatGPTAPI(gpt-3.5-turbo-0301)` | No | Reliable | Relatively clumsy | |
| 49 | +| `ChatGPTUnofficialProxyAPI(Web accessToken)` | Yes | Relatively unreliable | Smart | |
| 50 | + |
| 51 | +Comparison: |
| 52 | +1. `ChatGPTAPI` uses `gpt-3.5-turbo-0301` to simulate `ChatGPT` through the official `OpenAI` completion `API` (the most reliable method, but it is not free and does not use models specifically tuned for chat). |
| 53 | +2. `ChatGPTUnofficialProxyAPI` accesses `ChatGPT`'s backend `API` via an unofficial proxy server to bypass `Cloudflare` (uses the real `ChatGPT`, is very lightweight, but depends on third-party servers and has rate limits). |
| 54 | + |
| 55 | +[Details](https://github.com/Chanzhaoyu/chatgpt-web/issues/138) |
| 56 | + |
| 57 | +Switching Methods: |
| 58 | +1. Go to the `service/.env` file. |
| 59 | +2. For `OpenAI API Key`, fill in the `OPENAI_API_KEY` field [(Get apiKey)](https://platform.openai.com/overview). |
| 60 | +3. For `Web API`, fill in the `OPENAI_ACCESS_TOKEN` field [(Get accessToken)](https://chat.openai.com/api/auth/session). |
| 61 | +4. When both are present, `OpenAI API Key` takes precedence. |
| 62 | + |
| 63 | +Reverse Proxy: |
| 64 | + |
| 65 | +Available when using `ChatGPTUnofficialProxyAPI`. |
| 66 | + |
| 67 | +```shell |
| 68 | +# service/.env |
| 69 | +API_REVERSE_PROXY= |
| 70 | +``` |
| 71 | + |
| 72 | +Environment Variables: |
| 73 | + |
| 74 | +For all parameter variables, check [here](#docker-parameter-example) or see: |
| 75 | + |
| 76 | +``` |
| 77 | +/service/.env |
| 78 | +``` |
| 79 | + |
| 80 | +## Roadmap |
| 81 | +[✓] Dual models |
| 82 | + |
| 83 | +[✓] Multiple session storage and context logic |
| 84 | + |
| 85 | +[✓] Formatting and beautifying code-like message types |
| 86 | + |
| 87 | +[✓] Multilingual interface |
| 88 | + |
| 89 | +[✓] Interface themes |
| 90 | + |
| 91 | +[✗] More... |
| 92 | + |
| 93 | +## Prerequisites |
| 94 | + |
| 95 | +### Node |
| 96 | + |
| 97 | +`node` requires version `^16 || ^18` (`node >= 14` requires installation of [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)), and multiple local `node` versions can be managed using [nvm](https://github.com/nvm-sh/nvm). |
| 98 | + |
| 99 | +```shell |
| 100 | +node -v |
| 101 | +``` |
| 102 | + |
| 103 | +### PNPM |
| 104 | +If you have not installed `pnpm` before: |
| 105 | +```shell |
| 106 | +npm install pnpm -g |
| 107 | +``` |
| 108 | + |
| 109 | +### Fill in the Keys |
| 110 | + |
| 111 | +Get `Openai Api Key` or `accessToken` and fill in the local environment variables [jump](#introduction) |
| 112 | + |
| 113 | +``` |
| 114 | +# service/.env file |
| 115 | +
|
| 116 | +# OpenAI API Key - https://platform.openai.com/overview |
| 117 | +OPENAI_API_KEY= |
| 118 | +
|
| 119 | +# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response |
| 120 | +OPENAI_ACCESS_TOKEN= |
| 121 | +``` |
| 122 | + |
| 123 | +## Install Dependencies |
| 124 | + |
| 125 | +> To make it easier for `backend developers` to understand, we did not use the front-end `workspace` mode, but stored it in different folders. If you only need to do secondary development of the front-end page, delete the `service` folder. |
| 126 | +
|
| 127 | +### Backend |
| 128 | + |
| 129 | +Enter the `/service` folder and run the following command |
| 130 | + |
| 131 | +```shell |
| 132 | +pnpm install |
| 133 | +``` |
| 134 | + |
| 135 | +### Frontend |
| 136 | +Run the following command in the root directory |
| 137 | +```shell |
| 138 | +pnpm bootstrap |
| 139 | +``` |
| 140 | + |
| 141 | +## Run in Test Environment |
| 142 | +### Backend Service |
| 143 | + |
| 144 | +Enter the `/service` folder and run the following command |
| 145 | + |
| 146 | +```shell |
| 147 | +pnpm start |
| 148 | +``` |
| 149 | + |
| 150 | +### Frontend Webpage |
| 151 | +Run the following command in the root directory |
| 152 | +```shell |
| 153 | +pnpm dev |
| 154 | +``` |
| 155 | + |
| 156 | +## Packaging |
| 157 | + |
| 158 | +### Using Docker |
| 159 | + |
| 160 | +#### Docker Parameter Example |
| 161 | + |
| 162 | +- `OPENAI_API_KEY` one of two |
| 163 | +- `OPENAI_ACCESS_TOKEN` one of two, `OPENAI_API_KEY` takes precedence when both are present |
| 164 | +- `OPENAI_API_BASE_URL` optional, available when `OPENAI_API_KEY` is set |
| 165 | +- `API_REVERSE_PROXY` optional, available when `OPENAI_ACCESS_TOKEN` is set [Reference](#introduction) |
| 166 | +- `TIMEOUT_MS` timeout, in milliseconds, optional |
| 167 | +- `SOCKS_PROXY_HOST` optional, effective with SOCKS_PROXY_PORT |
| 168 | +- `SOCKS_PROXY_PORT` optional, effective with SOCKS_PROXY_HOST |
| 169 | + |
| 170 | + |
| 171 | + |
| 172 | +#### Docker Build & Run |
| 173 | + |
| 174 | +```bash |
| 175 | +docker build -t chatgpt-web . |
| 176 | + |
| 177 | +# foreground operation |
| 178 | +docker run --name chatgpt-web --rm -it -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web |
| 179 | + |
| 180 | +# background operation |
| 181 | +docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web |
| 182 | + |
| 183 | +# running address |
| 184 | +http://localhost:3002/ |
| 185 | +``` |
| 186 | + |
| 187 | +#### Docker Compose |
| 188 | + |
| 189 | +[Hub Address](https://hub.docker.com/repository/docker/chenzhaoyu94/chatgpt-web/general) |
| 190 | + |
| 191 | +```yml |
| 192 | +version: '3' |
| 193 | + |
| 194 | +services: |
| 195 | + app: |
| 196 | + image: chenzhaoyu94/chatgpt-web # always use latest, pull the tag image again when updating |
| 197 | + ports: |
| 198 | + - 3002:3002 |
| 199 | + environment: |
| 200 | + # one of two |
| 201 | + OPENAI_API_KEY: xxxxxx |
| 202 | + # one of two |
| 203 | + OPENAI_ACCESS_TOKEN: xxxxxx |
| 204 | + # api interface url, optional, available when OPENAI_API_KEY is set |
| 205 | + OPENAI_API_BASE_URL: xxxx |
| 206 | + # reverse proxy, optional |
| 207 | + API_REVERSE_PROXY: xxx |
| 208 | + # timeout, in milliseconds, optional |
| 209 | + TIMEOUT_MS: 60000 |
| 210 | + # socks proxy, optional, effective with SOCKS_PROXY_PORT |
| 211 | + SOCKS_PROXY_HOST: xxxx |
| 212 | + # socks proxy port, optional, effective with SOCKS_PROXY_HOST |
| 213 | + SOCKS_PROXY_PORT: xxxx |
| 214 | +``` |
| 215 | +The `OPENAI_API_BASE_URL` is optional and only used when setting the `OPENAI_API_KEY`. |
| 216 | + |
| 217 | +### Deployment with Railway |
| 218 | + |
| 219 | +[](https://railway.app/new/template/yytmgc) |
| 220 | + |
| 221 | +#### Railway Environment Variables |
| 222 | + |
| 223 | +| Environment Variable | Required | Description | |
| 224 | +| -------------------- | -------- | ------------------------------------------------------------------------------------------------- | |
| 225 | +| `PORT` | Required | Default: `3002` | |
| 226 | +| `TIMEOUT_MS` | Optional | Timeout in milliseconds. | |
| 227 | +| `OPENAI_API_KEY` | Optional | Required for `OpenAI API`. `apiKey` can be obtained from [here](https://platform.openai.com/overview). | |
| 228 | +| `OPENAI_ACCESS_TOKEN`| Optional | Required for `Web API`. `accessToken` can be obtained from [here](https://chat.openai.com/api/auth/session).| |
| 229 | +| `OPENAI_API_BASE_URL` | Optional, only for `OpenAI API` | API endpoint. | |
| 230 | +| `API_REVERSE_PROXY` | Optional, only for `Web API` | Reverse proxy address for `Web API`. [Details](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy) | |
| 231 | +| `SOCKS_PROXY_HOST` | Optional, effective with `SOCKS_PROXY_PORT` | Socks proxy. | |
| 232 | +| `SOCKS_PROXY_PORT` | Optional, effective with `SOCKS_PROXY_HOST` | Socks proxy port. | |
| 233 | + |
| 234 | +> Note: Changing environment variables in Railway will cause re-deployment. |
| 235 | + |
| 236 | +### Manual packaging |
| 237 | + |
| 238 | +#### Backend service |
| 239 | + |
| 240 | +> If you don't need the `node` interface of this project, you can skip the following steps. |
| 241 | + |
| 242 | +Copy the `service` folder to a server that has a `node` service environment. |
| 243 | + |
| 244 | +```shell |
| 245 | +# Install |
| 246 | +pnpm install |
| 247 | +
|
| 248 | +# Build |
| 249 | +pnpm build |
| 250 | +
|
| 251 | +# Run |
| 252 | +pnpm prod |
| 253 | +``` |
| 254 | + |
| 255 | +PS: You can also run `pnpm start` directly on the server without packaging. |
| 256 | + |
| 257 | +#### Frontend webpage |
| 258 | + |
| 259 | +1. Modify `VITE_APP_API_BASE_URL` in `.env` at the root directory to your actual backend interface address. |
| 260 | +2. Run the following command in the root directory and then copy the files in the `dist` folder to the root directory of your website service. |
| 261 | + |
| 262 | +[Reference information](https://cn.vitejs.dev/guide/static-deploy.html#building-the-app) |
| 263 | + |
| 264 | +```shell |
| 265 | +pnpm build |
| 266 | +``` |
| 267 | + |
| 268 | +## Frequently Asked Questions |
| 269 | + |
| 270 | +Q: Why does Git always report an error when committing? |
| 271 | + |
| 272 | +A: Because there is submission information verification, please follow the [Commit Guidelines](./CONTRIBUTING.en.md). |
| 273 | + |
| 274 | +Q: Where to change the request interface if only the frontend page is used? |
| 275 | + |
| 276 | +A: The `VITE_GLOB_API_URL` field in the `.env` file at the root directory. |
| 277 | + |
| 278 | +Q: All red when saving the file? |
| 279 | + |
| 280 | +A: For `vscode`, please install the recommended plug-in of the project or manually install the `Eslint` plug-in. |
| 281 | + |
| 282 | +Q: Why doesn't the frontend have a typewriter effect? |
| 283 | + |
| 284 | +A: One possible reason is that after Nginx reverse proxying, buffering is turned on, and Nginx will try to buffer a certain amount of data from the backend before sending it to the browser. Please try adding `proxy_buffering off;` after the reverse proxy parameter and then reloading Nginx. Other web server configurations are similar. |
| 285 | + |
| 286 | +## Contributing |
| 287 | + |
| 288 | +Please read the [Contributing Guidelines](./CONTRIBUTING.en.md) before contributing. |
| 289 | + |
| 290 | +Thanks to all the contributors! |
| 291 | + |
| 292 | +<a href="https://github.com/Chanzhaoyu/chatgpt-web/graphs/contributors"> |
| 293 | + <img src="https://contrib.rocks/image?repo=Chanzhaoyu/chatgpt-web" /> |
| 294 | +</a> |
| 295 | + |
| 296 | +## Sponsorship |
| 297 | + |
| 298 | +If you find this project helpful and circumstances permit, you can give me a little support. Thank you very much for your support~ |
| 299 | + |
| 300 | +<div style="display: flex; gap: 20px;"> |
| 301 | + <div style="text-align: center"> |
| 302 | + <img style="max-width: 100%" src="./docs/wechat.png" alt="WeChat" /> |
| 303 | + <p>WeChat Pay</p> |
| 304 | + </div> |
| 305 | + <div style="text-align: center"> |
| 306 | + <img style="max-width: 100%" src="./docs/alipay.png" alt="Alipay" /> |
| 307 | + <p>Alipay</p> |
| 308 | + </div> |
| 309 | +</div> |
| 310 | + |
| 311 | +## License |
| 312 | +MIT © [ChenZhaoYu](./license) |
0 commit comments