chatgpt-web - Express と Vue3 に組み込まれた ChatGPT デモウェブページ

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

Created at: 2023-02-09 11:21:37
Language: Vue
License: MIT

チャットGPTウェブ

免責事項:このプロジェクトはGithubでのみ公開されており、MITライセンスに基づいており、無料で、オープンソースの学習として使用されています。 また、販売番号、有料サービス、ディスカッショングループ、ディスカッショングループなどの形式はありません。 だまされないように注意してください。

覆う カバー2

紹介

デュアルモデルがサポートされており、2つの非公式な方法を提供します

ChatGPT API

方法 無料。 確実 品質
ChatGPTAPI(gpt-3.5-turbo-0301)
じゃない 頼もしい 比較的愚か
ChatGPTUnofficialProxyAPI(网页 accessToken)
いる 比較的信頼性が低い 賢い

対照:

  1. ChatGPTAPI
    公式の完了シミュレーションを通じて使用します(最も堅牢な方法ですが、無料ではなく、チャット用に微調整されたモデルは使用しません)
    gpt-3.5-turbo-0301
    OpenAI
    API
    ChatGPT
  2. ChatGPTUnofficialProxyAPI
    非公式のプロキシサーバーを使用してバックエンドにアクセスし、バイパスします(実際の、非常に軽量ですが、サードパーティのサーバーに依存し、レートが制限されています)
    ChatGPT
    API
    Cloudflare
    ChatGPT

詳細を見る

スイッチモード:

  1. ファイルに移動
    service/.env
  2. [入力してください] フィールド (Get apiKey ) を使用します。
    OpenAI API Key
    OPENAI_API_KEY
  3. [入力してください] フィールド (アクセス トークンの取得) を使用します。
    Web API
    OPENAI_ACCESS_TOKEN
  4. 共存の場合は優先
    OpenAI API Key

リバースプロキシ:

ChatGPTUnofficialProxyAPI
利用可能な場合、詳細

# service/.env
API_REVERSE_PROXY=

環境変数:

すべてのパラメータ変数については、こちらまたはこちらをご覧ください

/service/.env

実現するルート

[✓]デュアルモデル

[✓]マルチセッションストレージとコンテキストロジック

[✓]コードなどのメッセージタイプのフォーマット美化

[✓]多言語インターフェース

[✓]インターフェーステーマ

[✗] もっと...

前提条件

ノード

node
バージョンが必要(フェッチポリフィルをインストールする必要があります)、NVMを使用すると複数のバージョンをローカルで管理できます
^16 || ^18
node >= 14
node

node -v

ティッカー

インストールしていない場合

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

パック

ドッカーを使用する

ドッカー パラメーターの例

  • OPENAI_API_KEY
    2つのいずれかを選択してください
  • OPENAI_ACCESS_TOKEN
    2つのうちの1つを選択し、両方がある場合はそれが優先されます
    OPENAI_API_KEY
  • OPENAI_API_BASE_URL
    オプション、設定時に使用可能
    OPENAI_API_KEY
  • API_REVERSE_PROXY
    オプション、使用可能な参照で参照されるときにセットアップ
    OPENAI_ACCESS_TOKEN
  • TIMEOUT_MS
    タイムアウト (ミリ秒単位)、オプション
  • SOCKS_PROXY_HOST
    オプション、SOCKS_PROXY_PORTと組み合わせると効果的
  • SOCKS_PROXY_PORT
    オプション、SOCKS_PROXY_HOSTと組み合わせると効果的

港湾労働者

Docker build & Run

docker build -t chatgpt-web .

# 前台运行
docker run --name chatgpt-web --rm -it -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web

# 后台运行
docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web

# 运行地址
http://localhost:3002/

Docker compose

ハブ アドレス

version: '3'

services:
  app:
    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
    ports:
      - 3002:3002
    environment:
      # 二选一
      OPENAI_API_KEY: xxxxxx
      # 二选一
      OPENAI_ACCESS_TOKEN: xxxxxx
      # API接口地址,可选,设置 OPENAI_API_KEY 时可用
      OPENAI_API_BASE_URL: xxxx
      # 反向代理,可选
      API_REVERSE_PROXY: xxx
      # 超时,单位毫秒,可选
      TIMEOUT_MS: 60000
      # Socks代理,可选,和 SOCKS_PROXY_PORT 一起时生效
      SOCKS_PROXY_HOST: xxxx
      # Socks代理端口,可选,和 SOCKS_PROXY_HOST 一起时生效
      SOCKS_PROXY_PORT: xxxx
  • OPENAI_API_BASE_URL
    オプション、設定時に使用可能
    OPENAI_API_KEY

鉄道を使用したデプロイ

鉄道への展開

鉄道環境変数

環境変数名 必須 所見
PORT
必須 デフォルト
3002
TIMEOUT_MS
随意 タイムアウト (ミリ秒単位)、
OPENAI_API_KEY
OpenAI API
2つのいずれかを選択してください
必須の (apiKey の取得) を使用します。
OpenAI API
apiKey
OPENAI_ACCESS_TOKEN
Web API
2つのいずれかを選択してください
必須 (アクセス トークンの取得) を使用します。
Web API
accessToken
OPENAI_API_BASE_URL
オプション (使用可能な場合)
OpenAI API
API
インターフェイス アドレス
API_REVERSE_PROXY
オプション (使用可能な場合)
Web API
Web API
リバース プロキシ アドレスの詳細
SOCKS_PROXY_HOST
可选,和 一起时生效
SOCKS_PROXY_PORT
Socks代理
SOCKS_PROXY_PORT
可选,和 一起时生效
SOCKS_PROXY_HOST
Socks代理端口

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

Railway
Deploy

手动打包

后端服务

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

node

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

service
node

# 安装
pnpm install

# 打包
pnpm build

# 运行
pnpm prod

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

pnpm start

前端网页

1、修改根目录下 内 为你的实际后端接口地址

.env
VITE_APP_API_BASE_URL

2、根目录下运行以下命令,然后将 文件夹内的文件复制到你网站服务的根目录下

dist

参考信息

pnpm build

常见问题

Q: 为什么 提交总是报错?

Git

A: 因为有提交信息验证,请遵循 Commit 指南

Q: 如果只使用前端页面,在哪里改请求接口?

A: 根目录下 文件中的 字段。

.env
VITE_GLOB_API_URL

Q: 文件保存时全部爆红?

A: 请安装项目推荐插件,或手动安装 插件。

vscode
Eslint

Q:フロントエンドにタイプライターの効果はありませんか?

A:考えられる理由の1つは、Nginxリバースプロキシを介してバッファが有効になっている場合、Nginxがバックエンドから特定のサイズのデータをバッファリングしてブラウザに送信しようとすることです。 反転パラメータの後に追加してから、Nginxをオーバーロードしてみてください。 他の Web サーバー構成についても同様です。

proxy_buffering off;

貢献に参加する

投稿する前に投稿ガイドラインをお読みください

貢献してくれたすべての人に感謝します!

スポンサー

このプロジェクトがお役に立てば、状況が許せば、少しでも応援していただければ、要するに、ご支援ありがとうございました~

微信

ウィーチャットペイ

アリペイ

アリペイ

ライセンス

MIT © チェンジャオユ