こんにちは。
近年生成AIが注目されていますよね。マルチモーダルへの対応などもあって、一層世間の期待が高まっている印象です。
モデルについても、GPTだけでなくGeminiやClaude3など様々なLLMが登場していています。簡単にモデルを比較したい、使い分けが大変、一つのサイトにまとまっていてほしい、そう思いませんか？
そこで今回は、いろんなモデルを一つのサイトで使える「ChatBot UI」をローカルで構築する方法をご紹介します。
ちなみに完成図はこんな感じです。
もちろんパラメータ編集やプロンプトの保存などいろんな機能も使えちゃいます。
環境
Windows(WSL), node(v20.11.1), npm(v10.2.4)
導入手順
Local QuickStartに従って導入していきます。
ChatBot UIのダウンロード
作業ブランチ下にgit cloneしてきます。
git clone https://github.com/mckaywrigley/chatbot-ui
必要パッケージのインストール
node(v20.11.1)でインストールできました。
npm install
huskyのインストールに失敗する場合
Permission Deniedされてインストールに失敗する場合、以下のコードを実行すると動作するかもしれません。（自分は解決しました）
chmod +x ./node_modules/husky/lib/bin.js
Docker環境の構築
本来Docker for Windowsでインストールしてしまえばいいのですが、WSL環境でDockerを動かしたかったので、WSL(Ubuntu)にDocker環境を構築するを参考にしました。（ほぼそのままです）
- パッケージの最新化
sudo apt update
sudo apt upgrade -y
- 必要パッケージのインストール
sudo apt install ca-certificates curl gnupg
- GPGキーの登録
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
- aptの参照リポジトリを追加し、Dockerをインストール
echo \
"deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
"$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
- ユーザの追加
sudo usermod -aG docker $USER
Supabase CLIの開始
公式サイトによれば、npxコマンドが使えるので使います。
もしかしたら、rootでないと動かないかも。
npx supabase start
このとき表示される、API URL, anon key, service_role keyをコピーしておきましょう。
シークレット情報の設定
APIキー等のシークレット情報は、.env.localに設定します。
.env.localの例が.env.local.exampleですのでコピーして開きます。
cp .env.local.example .env.local
vi .env.local
コピーした値を貼り付けます。
NEXT_PUBLIC_SUPABASE_URL=***API URLの値***
NEXT_PUBLIC_SUPABASE_ANON_KEY=***anon keyの値***
SUPABASE_SERVICE_ROLE_KEY=***service_role keyの値***
アプリの起動
npm run chat
起動したらhttp://localhost:3000からアクセスできます。
アプリの終了
Ctrl+Zでnpm run chatを終了し、supabaseもstopします。
npx supabase stop
初期セットアップ
まずこんな画面が表示されるかと思います。
自分のEmailとPasswordを入力してSign Upをクリックしましょう。
適当なアドレスとパスワードでいいと思います。（が、脆弱なパスワードだと弾かれます）
次に、ユーザ名と表示名を設定します。
次に、API Keyを設定します。
GPTをはじめ、いろんなAPIに対応してます。
完了画面です、Nextを押してアプリ画面に進みましょう。
無事アプリが表示されました。
触ってみれば使い方は分かると思います。
