天天看點
傳回

[開源]MIT開源協定，一款用 Express 和 Vue3 搭建的 ChatGPT 示範網頁

作者：一飛開源
一飛開源，介紹創意、新奇、有趣、實用的開源應用、系統、軟體、硬體及技術，一個探索、發現、分享、使用與互動交流的開源技術社群平台。緻力于打造活力開源社群，共建開源新生态！

一、開源項目簡介

用 Express 和 Vue3 搭建的 ChatGPT 示範網頁。

二、開源協定

使用MIT開源協定

三、界面展示

[開源]MIT開源協定，一款用 Express 和 Vue3 搭建的 ChatGPT 示範網頁
[開源]MIT開源協定，一款用 Express 和 Vue3 搭建的 ChatGPT 示範網頁

四、功能概述

支援雙模型，提供了兩種非官方 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 Key 或 accessToken 并填寫本地環境變量 跳轉

# 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

環境變量

API 可用：

  • OPENAI_API_KEY 和 OPENAI_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_TOKEN 和 OPENAI_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_HOST 和 SOCKS_PROXY_PORT 一起時生效，可選
  • SOCKS_PROXY_PORT 和 SOCKS_PROXY_HOST 一起時生效，可選
  • HTTPS_PROXY 支援 http，https, socks5，可選
  • ALL_PROXY 支援 http，https, socks5，可選

打包

使用 Docker

Docker 參數示例

[開源]MIT開源協定，一款用 Express 和 Vue3 搭建的 ChatGPT 示範網頁

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:3002
    environment:
      # 二選一
      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-0613, gpt-4-32k, gpt-4-32k-0314, gpt-4-32k-0613, gpt-3.5-turbo-16k, gpt-3.5-turbo-16k-0613, gpt-3.5-turbo, gpt-3.5-turbo-0301, gpt-3.5-turbo-0613, text-davinci-003, text-davinci-002, code-davinci-002
      OPENAI_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，socks5
      HTTPS_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 部署

[開源]MIT開源協定，一款用 Express 和 Vue3 搭建的 ChatGPT 示範網頁

Railway 環境變量

環境變量名稱 必填 備注
PORT 必填 預設 3002
AUTH_SECRET_KEY 可選 通路權限密鑰
MAX_REQUEST_PER_HOUR 可選 每小時最大請求次數，可選，預設無限
TIMEOUT_MS 可選 逾時時間，機關毫秒
OPENAI_API_KEY OpenAI API 二選一 使用 OpenAI API 所需的 apiKey (擷取 apiKey)
OPENAI_ACCESS_TOKEN Web 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 配置同理。

六、源碼位址

通路一飛開源：https://code.exmay.com/

開源協定 Press
上一篇: 文獻閱讀打卡day12綜述：Multi-scalesynergicoptimizationstrategyfordiel
下一篇: SpringBoot整合Mybatis-Plus源碼分析(六) 代理對象生成分析

繼續閱讀