chatgpt-web

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

• ChatGPT Web
  • Introduction
  • Roadmap
  • Prerequisites
    • Node
    • PNPM
    • Filling in the Key
  • Install Dependencies
    • Backend
    • Frontend
  • Run in Test Environment
    • Backend Service
    • Frontend Webpage
  • Environment Variables
  • Packaging
    • Use Docker
      • Docker Parameter Examples
      • Docker build & Run
      • Docker compose
      • Prevent Crawlers
    • Deploy with Railway
      • Railway Environment Variables
    • Deploy with Sealos
    • Package Manually
      • Backend Service
      • Frontend Webpage
  • FAQ
  • Contributing
  • Acknowledgements
  • Sponsors
  • License

Introduction

Supports dual models and provides two unofficial ChatGPT API methods

Method	Free?	Reliability	Quality
ChatGPTAPI(gpt-3.5-turbo-0301)	No	Reliable	Relatively stupid
ChatGPTUnofficialProxyAPI(web accessToken)	Yes	Relatively unreliable	Smart

Comparison:

1. ChatGPTAPI uses gpt-3.5-turbo through OpenAI official API to call ChatGPT
2. ChatGPTUnofficialProxyAPI uses unofficial proxy server to access ChatGPT's backend API, bypass Cloudflare (dependent on third-party servers, and has rate limits)

Warnings:

1. You should first use the API method
2. When using the API, if the network is not working, it is blocked in China, you need to build your own proxy, never use someone else's public proxy, which is dangerous.
3. When using the accessToken method, the reverse proxy will expose your access token to third parties. This should not have any adverse effects, but please consider the risks before using this method.
4. When using accessToken, whether you are a domestic or foreign machine, proxies will be used. The default proxy is pengzhile's https://ai.fakeopen.com/api/conversation. This is not a backdoor or monitoring unless you have the ability to flip over CF verification yourself. Use beforehand acknowledge. Community Proxy (Note: Only these two are recommended, other third-party sources, please identify for yourself)
5. When publishing the project to public network, you should set the AUTH_SECRET_KEY variable to add your password access, you should also modify the title in index. html to prevent it from being searched by keywords.

Switching methods:

1. Enter the service/.env.example file, copy the contents to the service/.env file
2. To use OpenAI API Key, fill in the OPENAI_API_KEY field (get apiKey)
3. To use Web API, fill in the OPENAI_ACCESS_TOKEN field (get accessToken)
4. OpenAI API Key takes precedence when both exist

Environment variables:

See all parameter variables here

Roadmap

[✓] Dual models

[✓] Multi-session storage and context logic

[✓] Formatting and beautification of code and other message types

[✓] Access control

[✓] Data import/export

[✓] Save messages as local images

[✓] Multilingual interface

[✓] Interface themes

[✗] More...

Prerequisites

Node

node requires version ^16 || ^18 || ^19 (node >= 14 needs fetch polyfill installation), use nvm to manage multiple local node versions

node -v

PNPM

If you haven't installed pnpm

npm install pnpm -g

Filling in the Key

Get Openai Api Key or accessToken and fill in the local environment variables Go to Introduction

# service/.env file

# 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=

Install Dependencies

For the convenience of "backend developers" to understand the burden, the front-end "workspace" mode is not adopted, but separate folders are used to store them. If you only need to do secondary development of the front-end page, delete the service folder.

Backend

Enter the folder /service and run the following commands

pnpm install

Frontend

Run the following commands at the root directory

pnpm bootstrap

Run in Test Environment

Backend Service

Enter the folder /service and run the following commands

pnpm start

Frontend Webpage

Run the following commands at the root directory

pnpm dev

Environment Variables

API available:

• OPENAI_API_KEY and OPENAI_ACCESS_TOKEN choose one
• OPENAI_API_MODEL Set model, optional, default: gpt-3.5-turbo
• OPENAI_API_BASE_URL Set interface address, optional, default: https://api.openai.com
• OPENAI_API_DISABLE_DEBUG Set interface to close debug logs, optional, default: empty does not close

ACCESS_TOKEN available:

• OPENAI_ACCESS_TOKEN and OPENAI_API_KEY choose one, OPENAI_API_KEY takes precedence when both exist
• API_REVERSE_PROXY Set reverse proxy, optional, default: https://ai.fakeopen.com/api/conversation, Community (Note: Only these two are recommended, other third party sources, please identify for yourself)

Common:

• AUTH_SECRET_KEY Access permission key, optional
• MAX_REQUEST_PER_HOUR Maximum number of requests per hour, optional, unlimited by default
• TIMEOUT_MS Timeout, unit milliseconds, optional
• SOCKS_PROXY_HOST and SOCKS_PROXY_PORT take effect together, optional
• SOCKS_PROXY_PORT and SOCKS_PROXY_HOST take effect together, optional
• HTTPS_PROXY Support http, https, socks5, optional
• ALL_PROXY Support http, https, socks5, optional

Prevent Crawlers

nginx

Fill in the following configuration in the nginx configuration file to prevent crawlers. You can refer to the docker-compose/nginx/nginx.conf file to add anti-crawler methods

    # Prevent crawlers
    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;
    }

Deploy with Railway

Railway Environment Variables

Environment variable name	Required	Remarks
PORT	Required	Default 3002
AUTH_SECRET_KEY	Optional	Access permission key
MAX_REQUEST_PER_HOUR	Optional	Maximum number of requests per hour, optional, unlimited by default
TIMEOUT_MS	Optional	Timeout, unit milliseconds
OPENAI_API_KEY	OpenAI API choose one	apiKey required for OpenAI API (get apiKey)
OPENAI_ACCESS_TOKEN	Web API choose one	accessToken required for Web API (get accessToken)
OPENAI_API_BASE_URL	Optional, available when OpenAI API	API interface address
OPENAI_API_MODEL	Optional, available when OpenAI API	API model
API_REVERSE_PROXY	Optional, available when Web API	Web API reverse proxy address Details
SOCKS_PROXY_HOST	Optional, take effect with SOCKS_PROXY_PORT	Socks proxy
SOCKS_PROXY_PORT	Optional, take effect with SOCKS_PROXY_HOST	Socks proxy port
SOCKS_PROXY_USERNAME	Optional, take effect with SOCKS_PROXY_HOST	Socks proxy username
SOCKS_PROXY_PASSWORD	Optional, take effect with SOCKS_PROXY_HOST	Socks proxy password
HTTPS_PROXY	Optional	HTTPS proxy, support http,https, socks5
ALL_PROXY	Optional	All proxies, support http,https, socks5

Note: Modifying environment variables on Railway will re-Deploy

Deploy with Sealos

Environment variables are consistent with Docker environment variables

Package Manually

Backend Service

If you don't need the node interface of this project, you can omit the following operations

Copy the service folder to the server where you have the node service environment.

# Install
pnpm install

# Pack
pnpm build

# Run
pnpm prod

PS: It is also okay to run pnpm start directly on the server without packing

Frontend Webpage

1. Modify the VITE_GLOB_API_URL field in the .env file at the root directory to your actual backend interface address

2. Run the following commands at the root directory, then copy the files in the dist folder to the root directory of your website service

[Reference](https://cn.vitejs.dev/guide/static -deploy.html#building-the-app)

pnpm build

FAQ

Q: Why does Git commit always report errors?

A: Because there is a commit message verification, please follow the Commit Guide

Q: Where to change the request interface if only the front-end page is used?

A: The VITE_GLOB_API_URL field in the .env file at the root directory.

Q: All files explode red when saving?

A: vscode please install the recommended plug-ins for the project, or manually install the Eslint plug-in.

Q: No typewriter effect on the front end?

A: One possible reason is that after Nginx reverse proxy, buffer is turned on, then Nginx will try to buffer some data from the backend before sending it to the browser. Please try adding proxy_buffering off; after the reverse proxy parameter, then reload Nginx. Other web server configurations are similar.

 from https://github.com/Chanzhaoyu/chatgpt-web

-----

 搭建 ChatGPT Web 版详细教程

前言

ChatGPT 是一款由 OpenAI 开发的语言模型，最近实在是太火了，还有国内百度的文言一心，但由于无法科学上网，很多人无法体验 ChatGPT，所以我自费买了国外的服务器，研究了一下如何搭建了 ChatGPT Web 版。

本文讲解 ChatGPT Web 版搭建的详细教程，您可以通过关注我的微信公众号 echeverra 发送 “ChatGPT”，获取网页链接进行体验。

由于是国外服务器且配置较低，可能会卡顿延迟，请见谅。

教程

API Keys

获取 OpenAI 的 API Keys，首先我们需要科学上网的环境注册一个 OpenAI: https://beta.openai.com/signup 账号。

注册的过程中会让你输入手机号接收验证码，注意不能使用国内的手机号，因为 OpenAI 限制了国内无法使用，我们可以通过 SMS-Activate: https://sms-activate.org 注册一个国外的虚拟电话号码进行短信接收。

SMS-Activate 是收费的需要先充值，可以使用支付宝，最低充值金额 2 美元。充值后在左侧 OpenAI 菜单中选择一个国家，我选择的是比较便宜的巴西，花费 30 卢布，收到验证码务必在 20 分钟内使用，否则会失效。

由于只使用了一次，还剩 120 多卢布，还可以使用 4 次虚拟号码接收验证码，有需要的小伙伴可以找我要哈～

注册成功后登录，访问 https://platform.openai.com/overview，在个人 View API keys 中创建一个 SECRET KEY，也就是我们最终想要得到的 API Keys。

国外服务器

如果你的服务器是国内的，那么需要一个反代，比较麻烦，所以我选择直接使用国外服务器。

国外的服务器并不便宜，大概每月 30 元左右的样子，不过经过我不懈的比对，终于找到一款经济实惠的服务器，UCloud 的美国洛杉矶的服务器，新用户 122 配置一年 180 多，每月也就 15 元左右，Nice（精打细算的微笑 ^.^）~

111 配置的服务器更便宜只要 70，但是无法 build 和运行项目，所以不推荐。

服务器使用的 CentOs 7.9 的系统，需要配置下防火墙，放开所有端口，否则最终网页无法访问。

搭建项目

安装 Node

SSH 连接服务器后，通过命令安装 Node v16 版本：

cd /usr/local

wget https://npmmirror.com/mirrors/node/v16.18.1/node-v16.18.1-linux-x64.tar.xz

解压重命名到 nodejs：

tar -xvf node-v16.18.1-linux-x64.tar.xz

mv node-v16.18.1-linux-x64 nodejs

rm -rf node-v16.18.1-linux-x64.tar.xz

创建软连接：

ln -s /usr/local/nodejs/bin/node /usr/bin

ln -s /usr/local/nodejs/bin/npm /usr/bin

ln -s /usr/local/nodejs/bin/npx /usr/bin

查看版本：

node -v  //v16.18.1

如果能正常打印版本号，说明 Node 安装成功。

安装 PNPM

安装 PNPM 并创建软连接：

npm install -g pnpm

ln -s /usr/local/nodejs/bin/pnpm /usr/bin

ln -s /usr/local/nodejs/bin/pnpx /usr/bin

查看版本：

pnpm -v  //v7.29.3

如果能正常打印版本号，说明 PNPM 安装成功。

安装 Docker

安装 yum-utils 包：

yum install -y yum-utils

设置镜像仓库（阿里镜像）：

yum-config-manager \

    --add-repo \

    http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

更新 yum 软件包索引：

yum makecache fast

安装 docker-ce（社区版）：

yum install docker-ce docker-ce-cli containerd.io

查看版本：

docker version

如果可以查看具体的版本信息，说明 Docker 安装成功。

最后将 Docker 启动：

systemctl start docker

下载项目

我找了一个比较火的 ChatGPT Web 开源项目（star 8k），链接：https://github.com/Chanzhaoyu/chatgpt-web。

首先安装 git：

yum install git

下载项目（默认安装在 /root/ 目录下）：

git clone https://github.com/Chanzhaoyu/chatgpt-web.git

填写秘钥

将 chatgpt-web/service/ 目录下文件.env.example 改名为.env，并修改文件中的 OPENAI_API_KEY 值，改为上文中获取的 API Keys，注意不需要加引号。

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

OPENAI_API_KEY=your_api_key

安装依赖

在 chatgpt-web/service/ 目录下安装后端依赖：

pnpm install

在 chatgpt-web/ 目录下安装前端依赖：

pnpm bootstrap

打包运行

在 chatgpt-web/ 目录下执行 build 操作：

docker build -t chatgpt-web .

build 时间会比较长而且会占用比较大的内存，所以 1G 内存的服务器无法 build 成功，贪便宜踩坑的教训...

build 成功后就可以运行项目啦，记得将 your_api_key 替换成你的 key：

docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web

运行成功后访问 https://ip:3002 就可以访问 ChatGPT Web 页面啦，Nice~

后续

信息定制

如果你想修改页面左下角的个人信息，你可以修改 chatgpt-web/src/store/modules/user/helper.ts 文件中的 defaultSetting() 内容，比如我修改的：

export function defaultSetting(): UserState {

  return {

    userInfo: {

      avatar: 'https://echeverra.cn/favicon.jpg',

      name: 'echeverra',

      description: '关注公众号 <a href="https://echeverra.cn/code.jpg" class="text-blue-500" target="_blank" >echeverra</a>',

    },

  }

}

修改完后记得重新进入 chatgpt-web/ 目录执行 build 操作才会生效：

docker build -t chatgpt-web .

使用限制

原本我以为我搭建完可以免费给大家体验没有什么限制，直到我发现了这个。

查阅资料才知道，OpanAI 在注册后会赠送 5 美元的体验资格，只要 API 调用就会花费余额，5 美元大概能回复 100 万字的内容，等余额用尽后就会提示服务器限流，无法继续使用，只能充值了。

而且现在还有封号的风险，所以大家且用且珍惜吧 - -。

续费充值

由于使用的人数较多，不到一天的时间体验额度 5 美元就用尽了 - -。

为了回馈支持我的粉丝，我又自费买了个额度 120 美元的 API key 供大家免费使用。

但由于花销比较大，自己没办法长期承担该费用，如果有需要使用的小伙伴可以打赏（文末）或转账（微信）支持我下（请注明 ChatGPT），打赏或转账的钱我会全部投入到 ChatGPT Web 的花费，再次感谢大家～

验证限流

好吧，又一周的时间，120 美元的额度也用尽了 - -。

为了防止有些人恶意滥用，方便有需要的人使用，这次我学聪明了～，我加入了验证与限流。

验证功能是需要访客输入验证码，验证通过后才能使用，在 chatgpt-web/service/.env 文件中，将 AUTH_SECRET_KEY 设置一个访问权限秘钥，效果如下：

限流功能是限制相同 IP 的访客每小时最大的请求次数，同样是在 chatgpt-web/service/.env 文件中，将 MAX_REQUEST_PER_HOUR 设置一个访问次数。当对话超过设置的次数后会提示限制，只能等待下一个小时继续使用。

设置完.env 文件记得重新 build 和 run 项目，注意执行 run 命令还需加上 AUTH_SECRET_KEY 和 MAX_REQUEST_PER_HOUR 两个参数：

docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key --env AUTH_SECRET_KEY=your_secret_key --env MAX_REQUEST_PER_HOUR=your_max_request chatgpt-web

记得将 your_api_key、your_secret_key 和 your_max_request 替换成你自己的，与.env 文件中的一致。如果不生效可能是由于你使用的 ChatGPT Web 项目不是最新的或者没有 build 成功。

希望这次买的 API Key 用的久一点 - -，价格涨了好多，感谢支持我的小伙伴。

还有很多 10 元 5 元的，我都记在心里，再次感谢大家～

账号被封

没错中招了，刚用一天账号被封了 - -，啧啧啧，我的 120 美元余额啊...

没关系，换个号继续...

好啦，以上就是搭建 ChatGPT Web 版详细教程的所有内容，希望对你有所帮助，如有问题可通过我的博客 https://echeverra.cn 或微信公众号 echeverra 联系我。

from http://web.archive.org/web/20240627220807/https://echeverra.cn/chatgpt

------------------------------------------------

https://github.com/missuo/FreeGPT35

• Forked From: https://github.com/skzhengkai/free-chatgpt-api
• Original Author: https://github.com/PawanOsman/ChatGPT