会社情報プロダクトサービス採用情報ブログTECH BLOGお問い合わせ
会社情報プロダクトサービス採用情報ブログTECH BLOGお問い合わせ
page icon

社内用 ChatGPT UI の構築手順書(BetterChatGPT)

はじめに

ChatGPTをより安全に使うため

これからChatGPTを社内に導入したいという場合があると思います。ChatGPTを導入する際に考慮が必要なのは、入力した情報が流出しないなどのセキュリティ対策です。セキュリティ対策をするために独自UIを構築するユースケースがあります。独自UIを構築するのにOSSのライブラリを使うと便利です。
OSSのライブラリは、例えば下記があります。
  • BetterChatGPT
  • ChatbotUI
今回は、GCPとBetterChatGPT を使用して、セキュリティ対策を考慮した、社内用 ChatGPT UI の構築手順を紹介したいと思います。

必要技術

  • Docker
  • Cloud Run
  • Cloud Load Balancing
  • IAP(Identity-Aware Proxy)
  • Cloud Amor(オプション)

ChatGPT UIシステムの概要

  • BetterChatGPTからいらない機能を除き、Cloud Runで動かします
  • Cloud Load BalancingとIAPによりログイン管理をします
  • 必要であれば、Cloud Amorにより、アクセス元のIPアドレスを制限します

手順書

✅
ChatGPT UIの作成手順
  1. リポジトリのクローン
  1. APIの埋め込み
    1. .envファイルにAPIを設定
  1. アイコンの変更
  1. UI画面にアイコンを表示
  1. いらない機能の削除
    1. 概要＆スポンサー
    2. Jing Hua作
    3. API
    4. ShareGPT
  1. Cloud Run上で構築
  1. Cloud Load Balancingの設定
  1. IAPの設定
  1. IAPがCloud Run サービスに対して認証できるようにする
  1. 確認
 

1. リポジトリをクローン

BetterChatGPTのリポジトリをクローンする。

2. APIの埋め込み

ファイルがあります。このファイルをコピーし、にリネームします。
ファイルは以下のようになります。
 
に自身のOpenAI APIを入力します。

3. アイコンの変更

ディレクトリにアイコンを決めている画像があります。
この中のを変えたい画像に変更します。
同じ名前でファイルを置き換えれば完了です。

4. UI上にアイコンを表示

UI上のサイドメニュー部分にアイコンを表示させます。
  1. 内に表示させたいアイコンのファイルを置きます。
      2. ファイル名は任意で良いですが、というファイルを置いています。
  1. ファイルを以下のように変更します。

5. いらない機能の削除

5.1. 概要 & スポンサー , Jing Hua作, APIの削除

でメニューのオプションを表示させています。
このファイルの, , が以下の機能を表示させています。
  • 概要 & スポンサー()
  • Jing Hua作()
  • API()
そのため、この部分をコメントアウトすることで削除します。
具体的には、以下のようにファイルを変更します。

5.2. ShareGPTの機能削除

ファイルでのボタン表示させています。
このファイルのにより、を表示させています。
そのため、この部分をコメントアウトすることで削除します。
具体的には、以下のようにファイルを変更します。

6. Cloud Run上で構築

  1. Artifact Registry にリポジトリを作成する
      • [REPOSITORY_NAME]: 適切な名前
  1. クローンした リポジトリ内のDocker ファイルをイメージにビルドする
      • [DIRECTORY_NAME]: 1. リポジトリのクローンで作成したディレクトリ名
      • [PROJECT_ID]: GCPのPROJECT_ID
      • [REPOSITORY_NAME]: 先ほど作成したリポジトリ名
      • [IMAGE_NAME]: 適切な名前
  1. Artifact Registry の認証をする
    1. Artifact Registry のリポジトリにイメージをプッシュする
        • [PROJECT_ID]: GCPのPROJECT_ID
        • [REPOSITORY_NAME]: 先ほど作成したリポジトリ名
        • [IMAGE_NAME]: 先ほど作成したIMAGE_NAME
    1. Cloud Run上で、ChatGPT UIを作成する
        • [UI_NAME]: 適切な名前
        ログイン管理をする必要のない場合は、--ingress=allに変更してください。
        この変更を行えば、ChatGPT UIをすぐに利用できます。
    1. IPアドレスの確保
        • [IPADDRESS_NAME]: 適切な名前

    7. Cloud Load Balancingの設定

    7.1. Cloud Load Balancingの設定

    1. ロードバランサの作成画面で HTTP(S) ロードバランシングを選択
    1. 次の画面ではインターネットから VM またはサーバーレス サービスへとグローバル HTTP(S) ロードバランサにチェック

    7.2. フロントエンドを構成

    1. プロトコル 項目にHTTPS（HTTP/2 を含む)を選択
    1. 先ほど確保した IP アドレスを設定して、証明書を新規作成
    1. Google マネージドの証明書を作成するを選択し、ドメイン 1 項目 に今回使用するドメイン名を入力します。

    7.3. バックエンドを構成

    1. バックエンドタイプ項目でサーバーレス ネットワーク エンドポイントグループを選択
    1. 新しいバックエンド 項目でサーバーレス ネットワーク エンドポイントグループを作成
    1. Cloud Runを選択し、始めに作成した Cloud Run サービスを選択
    1. サーバーレス ネットワーク エンドポイントグループを作成したらバックエンドサービスとして設定し、ロードバランサを作成
    ❗
    IAPを使う場合は、Cloud CDN オフにする

    7.4. 証明書のプロビジョニング状態を確認する

    1. 作成されたロードバランサの詳細画面から、証明書のステータスを確認
    1. ロードバランサの作成からしばらく待つと、以下のように証明書のステータスが ACTIVE になる

    8. IAPの設定

    ロードバランサに対して IAP を設定し、組織内のユーザーのみがサービスにアクセスできるようにします。
    以下のサイトを参考にIAPを設定します。
    ❗
    以下の部分はユーザーに対して IAP 経由のアクセスを許可するの項目の操作を行ってください。
    1. IAM によるアクセス制御の手順に沿って、IAP がトラフィックを Cloud Run バックエンド サービスに送信することを承認します。
        • プリンシパル: 
        • ロール: Cloud Run 起動元

    ユーザーに対して IAP 経由のアクセスを許可する

    IAP 経由のアクセスができるように、サービスにアクセスする組織内ユーザーに対してIAP-secured Web App User ロールを設定します。
    1. IAPでプリンシパルを追加をクリック
    1. サービスにアクセスする組織内ユーザーに対してIAP-secured Web App User ロールを設定

    9. IAPがCloud Run サービスに対して認証できるようにする

    プロジェクトごとに存在する IAP のサービスアカウントに対して、Cloud Run サービスを呼び出す権限を付与します。
    IAP のサービスアカウントのプリンシパル名は以下のような形式になっています。
    上記のプリンシパルに対して「Cloud Run 起動元」ロールを付与します。

    10. 確認

    以下のチェック項目をすべて満たしているか確認してください。
    • ログイン画面が表示されている
    • ファビコンが変更されている
    • いらない機能が削除されている
      • API
      • 概要＆スポンサー
      • Jing Hua作
      • ShareGPT
    • UI上にアイコンが表示されている
     
    以下のような状態になっているか確認してください。

    まとめ

    今回は、社内用ChatGPT UIの構築手順を紹介しました。詳しく手順を説明しているので参考にしてみてください。BetterChatGPTのファイルを書き換えることで、さらにカスタマイズすることができるので試してみてください！

    参考