Zenn
👍

BetterChatGPTの利用環境を構築する

2023/05/11に公開
環境構築
GPT
ChatGPT
Better ChatGPT
tech

今回はChatGPTのWebUIをローカル環境で実現できるだけでなく、本家WebUIには無い機能も利用できる「BetterChatGPT」の利用環境を構築したいと思います。

BetterChatGPTの特徴

BetterChatGPTの特徴としては以下が挙げられます。

  • プロキシを使用して、ChatGPTの地域制限を回避できる
  • プロンプトライブラリ
  • チャットをフォルダーで整理可能（色付き）
  • チャットやフォルダーのフィルタリング
  • トークンの数と価格を表示
  • ShareGPTとの統合
  • カスタムモデルパラメータ（presence_penaltyなど）
  • ユーザー/アシスタント/システムとしてチャット可能
  • どこでもメッセージを編集、並べ替え、挿入できる
  • チャットタイトルの生成
  • チャットを自動的にローカルストレージに保存できる
  • チャットのインポート/エクスポート
  • チャットをダウンロードできる（markdown / image / json）
  • Google Driveに同期できる
  • Azure OpenAIエンドポイントをサポート
  • 複数言語をサポート（18カ国）

事前準備

BetterChatGPTの利用環境構築に際し、事前に以下を準備する必要があります。

  • OpenAIのAPIキー
  • Node.jsとnpm
  • Git

OpenAIのAPIキー

BetterChatGPTはOpenAIまたはAzure OpenAIのAPI経由でGPTを利用することから、事前にAPIキーの発行が必要になります。

今回はOpenAIのAPIキーを利用しますが、取得がまだお済みでない方はこちらからご発行下さい。

Node.jsとnpm

BetterChatGPTのインストールはnpmコマンドを用いて行います。

したがって、Node.jsとnpmの用意がまだな方はご準備ください。

Node.jsのダウンロードは公式HPのインストーラーから実施することができます。

デフォルトの設定でnpmも一緒にインストールするようになっているので、特段の対応は不要です。
※もし一緒にインストールする項目で「npm」のチェックが外れていた場合、チェックをいれるようにしましょう。

インストール後、Macの場合はTerminal、Windowsの場合はPowerShellなどでnpm --versionコマンドでnpmのバージョンが確認できればインストールは完了しています。

$ npm --version
8.19.3

Gitのダウンロード

BetterChatGPTのリポジトリのクローンにGitを使うので、インストールがまだな方はこちらのページを参考にインストールしてください。

リポジトリは手動でDLすることもできるので必須ではないですが、Gitコマンドが使えると便利です。

環境構築

事前準備ができたら、いよいよ環境構築を行います。

まず、BetterChatGPTのリポジトリのクローンを行います。

$ git clone https://github.com/ztjhz/BetterChatGPT.git

クローンが完了したら、フォルダに移動します。

$ cd BetterChatGPT

次に、npm installを行います。

$ npm install

最後に、npm runコマンドを用いて起動します。

$ npm run dev

実行後、コンソールに以下の画面のような表示がされていれば起動成功です。

BetterChatGPTの使用

http://localhost:5173/ にアクセスすると、次のような画面が表示されるかと思います。

事前に準備した、sk-xxxxxで始まるご自身で発行したOpenAIのAPIキーを入力することでBetterChatGPTを利用することができます。

大体の使い方は本家のWebUIと同じですが、冒頭で述べた通り、より細かな設定や機能を利用することができます。

例えば、下記はシステムプロンプトで「ずんだもん」のように振る舞う指定をしている例です。

最後に

今回はBetterChatGPTの利用環境を構築してみました。

非常に簡単にセットアップできるので、是非試してみて頂ければと思います。

Discussion