Windows11でChatbotUIを動かす

# はじめに
ChatGPTライクなUIを提供するOSSとして[Chatbot UI](https://github.com/mckaywrigley/chatbot-ui)があります。
本記事では、Chatbot UIを導入し、Azure OpenAIを利用するまでの手順を記録します。

## 方針
Windows11のWSL2(AlmaLinux 9)を使ってChatbot UIを使えるようにします。

## 前提
Azure Open AIに任意のモデルをがデプロイされていることを前提とします。

## 環境
Azure Virtual MachinesにWindows11 24H2をD4as_v3で構築して作業していきます。
ローカルWindowsでも手順変わりなく実施できると思います。

なお、私が行った検証だとD2as_v3ではスペック不足でした。
それなりにスペックを要求されるようです。

# 手順
## Azure OpenAIの設定値の取得
Chatbot UIの設定に利用するためメモしておきます。
Azure OpenAI Studioを開いてください。

### エンドポイントとAPIキーの取得
「チャット プレイグラウンド」の「デプロイ」にChatbot UIで利用するモデルを選択します。
そして「コードの表示」を選択します。

![ChatbotUI_1_Azure_Chat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/0b3b1fe4-ccd1-3b2b-50e7-45e18ac6519e.png)

「サンプル コード」で「キー認証」を選択します。

![ChatbotUI_1_Azure_Code1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/80b93815-eca1-f3d4-6f78-569870f0e4a7.png)

一番下までスクロールし、**エンドポイント**と**APIキー**をコピーします。
エンドポイントを①、APIキーを②とします。

![ChatbotUI_1_Azure_Code2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/ef8424e4-b343-20f6-9562-f9933d868299.png)

### 名前（deployment_name）の取得
「モデル デプロイ」のページからChatbot UIで利用するモデルの**名前**（deployment_name）を控えてください。
これを③として後ほど利用します。

![ChatbotUI_1_Azure_Deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/11bbcf26-d212-bff2-bd8d-748aa0fcdc37.png)

## WSL2のインストール
ここからは「ターミナル」でコマンドを実行していきます。
PowerShellでも問題ありません。管理者権限で実行してください。

### WSL2の有効化
```shell:コマンド
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart  
```

### 仮想マシンプラットフォームの機能を有効化
```shell:コマンド
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart 
```

### 再起動
```shell:コマンド
Restart-Computer
```

### WSLのアップデート
```shell:コマンド
wsl --update
```

### WSL2をデフォルトに設定
```shell:コマンド
wsl --set-default-version 2
```

## AlmaLinux 9のインストール

### ダウンロード
ご自身のアーキテクチャに合わせたappxをダウンロードしてください、
それなりに時間がかかります。
```shell:Intel/AMD (x86_64)
Invoke-WebRequest -Uri https://wsl.almalinux.org/9/AlmaLinuxOS-9_latest_x64.appx -OutFile AlmaLinuxOS-9.appx -UseBasicParsing
```
```shell:ARM64 (AArch64)
Invoke-WebRequest -Uri https://wsl.almalinux.org/9/AlmaLinuxOS-9_latest_ARM64.appx -OutFile AlmaLinuxOS-9.appx -UseBasicParsing
```

### ZIP化＆展開
```shell:コマンド
move .\AlmaLinuxOS-9.appx .\AlmaLinuxOS-9.zip; Expand-Archive .\AlmaLinuxOS-9.zip
```

### インストール
2箇所ある'C:\wsl\AlmaLinuxOS-9'はインストール先となります。
環境に応じて任意の場所を指定してください。
```shell:コマンド
cd AlmaLinuxOS-9; mkdir -p 'C:\wsl\AlmaLinuxOS-9'; wsl --import AlmaLinuxOS-9 'C:\wsl\AlmaLinuxOS-9' .\install.tar.gz
```

### 結果確認
```shell:コマンド
wsl -l -v
```
```shell:結果
  NAME             STATE           VERSION
* AlmaLinuxOS-9    Stopped         2
```

## AlmaLinux 9の初期設定
### WSLの起動
```shell:コマンド
wsl --distribution AlmaLinuxOS-9
```

### ユーザ、パスワード、グループ設定
各コマンドの`<USER>`は任意のユーザ名を指定してください。
```shell:コマンド
adduser <USER> && passwd <USER>
```

```shell:結果
Changing password for user <USER>.
New password:
Retype new password:
passwd: all authentication tokens updated successfully.
```

```shell:コマンド
usermod -G wheel <USER>
```

## 一般ユーザに変更
この後は作成したユーザで作業します。
```shell:コマンド
su <USER>
```

```shell:コマンド
cd ~
```

## systemdの有効化
### 設定ファイルの存在確認
ないことを確認します。
```shell:コマンド
ls -la /etc/wsl.conf
```
```shell:結果
ls: cannot access '/etc/wsl.conf': No such file or directory
```

### 設定ファイルの作成
```shell:コマンド
sudo sh -c 'echo -e "[boot]\nsystemd=true" > /etc/wsl.conf'
```

### 設定ファイルの確認
```shell:コマンド
cat /etc/wsl.conf
```
```shell:結果
[boot]
systemd=true
```

### WSLから切断
ユーザから抜けて、rootからも抜けて、ターミナルに戻ります。
```shell:コマンド
exit
```
```shell:コマンド
exit
```

### WSLの停止
```shell:コマンド
wsl --terminate AlmaLinuxOS-9
```

### WSLに再接続
```shell:コマンド
wsl --distribution AlmaLinuxOS-9
```
`<USER>`は任意のユーザ名を指定してください。
```shell:コマンド
su <USER>
```

```shell:コマンド
cd ~
```

## パッケージの更新とアップグレード
```shell:コマンド
sudo dnf update -y && sudo dnf upgrade -y 
```

## Dockerのインストール
### リポジトリの追加
```shell:コマンド
sudo dnf config-manager --add-repo=https://download.docker.com/linux/centos/docker-ce.repo
```

### インストール
```shell:コマンド
sudo dnf install docker-ce -y 
```

### バージョン確認
```shell:コマンド
docker --version
```
```shell:結果
Docker version 27.3.1, build ce12230
```

### 起動
```shell:コマンド
sudo systemctl start docker
```

### 自動起動設定
```shell:コマンド
sudo systemctl enable docker
```

### Dockerグループにユーザを追加
`$USER`はそのままでOKです。

```shell:コマンド
sudo gpasswd -a $USER docker
```

### WSLから切断
設定反映のため切断します。
```shell:コマンド
exit
```
```shell:コマンド
exit
```

### WSLに再接続
`<USER>`は作成したユーザ名を指定してください。

```shell:コマンド
wsl --distribution AlmaLinuxOS-9
```

```shell:コマンド
su <USER>
```

```shell:コマンド
cd ~
```

## Node.js 22のインストール
### リポジトリの追加
```shell:結果
curl -fsSL https://rpm.nodesource.com/setup_22.x | sudo bash -
```

### インストール
```shell:コマンド
sudo dnf install nodejs -y 
```

### バージョン確認
```shell:コマンド
node --version
```
```shell:結果
v22.11.0
```

## Gitのインストール
### インストール
```shell:コマンド
sudo dnf install git -y 
```

### バージョン確認
```shell:コマンド
git --version
```
```shell:結果
git version 2.43.5
```

<!--
## Homebrewのインストール
### インストール
途中でEnterを押す必要あり。
```shell:コマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

結果にNext stepsが表示され、次に実行すべきコマンドが表示されます。
コマンドは各環境に応じたものになるので、結果からコピーして実行してください。
```shell:結果
(略)
==> Next steps:
- Run these commands in your terminal to add Homebrew to your PATH:
    echo >> /home/<USER>/.bashrc
    echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/<USER>/.bashrc
    eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
(略)
```

下記は各環境に応じたものを実行してください。
```shell:コマンド
echo >> /home/<USER>/.bashrc
```
```shell:コマンド
echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/<USER>/.bashrc
```
```shell:コマンド
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
```
-->
## Chatbot UIのインストール
### ホームディレクトリに移動
```shell:コマンド
cd ~
```

### リポジトリのクローン
```shell:コマンド
git clone https://github.com/mckaywrigley/chatbot-ui.git
```

### Chatbot UIのディレクトリに移動
```shell:コマンド
cd ~/chatbot-ui
``` 

### 依存関係のインストール
```shell:コマンド
npm install
```

<!--
## gccのインストール
### インストール
```shell:コマンド
sudo dnf install gcc -y 
```

### バージョン確認
```shell:コマンド
gcc --version
```
```shell:結果
gcc (GCC) 11.4.1 20231218 (Red Hat 11.4.1-3)
Copyright (C) 2021 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
```
-->
## supabaseのインストール
### Chatbot UIのディレクトリに移動
```shell:コマンド
cd ~/chatbot-ui
``` 

### インストール
公式はHomebrewですが、本記事ではnpxでインストールします。
```shell:コマンド
npx npm install supabase --save-dev
``` 

<!--
### インストール
```shell:コマンド
brew install supabase/tap/supabase
``` 

### バージョン確認
```shell:コマンド
supabase --version
```
```shell:結果
1.219.2
```

## supabaseの起動
### Chatbot UIのディレクトリに移動
```shell:コマンド
cd ~/chatbot-ui
``` 
-->
### 起動
```shell:コマンド
npx supabase start
``` 

### 設定値の表示
④～⑥の値をメモしておいてください。
次の手順で利用します。
```shell:コマンド
npx supabase status
``` 
```shell:結果
(略)
Started supabase local development setup.

         API URL: http://127.0.0.1:54321　→　(４)
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: XXXXX　→　(５)
service_role key: XXXXX　→　(６)
   S3 Access Key: XXXXX
   S3 Secret Key: XXXXX
       S3 Region: local
``` 

## Chatbot UIの設定
### Chatbot UIのディレクトリに移動
```shell:コマンド
cd ~/chatbot-ui
``` 

### 環境変数ファイルのコピー
```shell:コマンド
cp .env.local.example .env.local
``` 

### 環境変数の設定
最初の手順と、1つ前の手順で控えた①～⑥を記入します。
③について、対応するモデルがない場合は、適当なIDに記載してください。

例えば、GPT-4oは環境変数にありませんが、`AZURE_GPT_35_TURBO_NAME`にGPT-4oの名前（deployment_name）を記載すると、
Chatbot UIのモデルで「GPT 3.5 Turbo」を選択した際に、GPT-4oが呼び出されるようになります。
```shell:コマンド
vi .env.local
``` 
```shell:.env.local
# Supabase Public
NEXT_PUBLIC_SUPABASE_URL=(４)
NEXT_PUBLIC_SUPABASE_ANON_KEY=(５)

# Supabase Private
SUPABASE_SERVICE_ROLE_KEY=(６)

(略)

# Azure API Information
AZURE_OPENAI_API_KEY=(２)
AZURE_OPENAI_ENDPOINT=(１)
AZURE_GPT_35_TURBO_NAME=(３)
AZURE_GPT_45_VISION_NAME=
AZURE_GPT_45_TURBO_NAME=
AZURE_EMBEDDINGS_NAME=

(略)
```

## Chatbot UIの起動
### Chatbot UIのディレクトリに移動
```shell:コマンド
cd ~/chatbot-ui
``` 

### 起動
```shell:コマンド
npm run chat
``` 

### ブラウザアクセス
FWなどの設定は適宜行ってください。
外部に公開する場合は接続元IP制限を掛けることを強く推奨します。
```shell:URL
http://localhost:3000
``` 

## Chatbot UIの初期設定

### トップページ
「Start Chatting」を選択してください。

![ChatbotUI_1_ChatbotUI_Login1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/e9e8f967-a27d-067f-d2a2-8785311667ae.png)

### ユーザ作成
適当なメールアドレスとパスワードを入力し、「Sign Up」を選択してください。
登録メールなどは飛ばないので何でも良いですが、忘れないものを設定してください。

![ChatbotUI_1_ChatbotUI_Login2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/e23b49a6-43e1-bc8d-cf1a-8bc056592a06.png)

### プロファイル作成1
スクリーンネームの類なので適当なユーザ名と表示名を入力してください。
デフォルトのままでもOKです。

![ChatbotUI_1_ChatbotUI_Setup1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/3c2bbf1b-4bd6-699c-7d9b-3b6b9b40f4b2.png)

### プロファイル作成2
環境変数で設定している事項なので、何もせず「Next」を選択してください。

![ChatbotUI_1_ChatbotUI_Setup2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/26922816-201b-cfed-bed0-0d042a5ab266.png)

### プロファイル作成3
「Next」を選択してください。

![ChatbotUI_1_ChatbotUI_Setup3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/13478917-b563-e19e-2d84-b302f7523117.png)

### APIキー設定
トップページが表示されたら、左下の「プロファイル設定」アイコンを選択してください。

![ChatbotUI_1_ChatbotUI_Top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/dd1472d1-a1f8-17ed-c987-4ebfc5c6c41c.png)

「API Keys」を選択し、Azure OpenAIの設定を開きます。
「Azure OpenAI API Key」に先に控えた②を入力し、保存してください。
これをしないと(なぜか)モデル選択ができません。

![ChatbotUI_1_ChatbotUI_Setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/56b9f096-0b9f-9fa4-8707-3baf842a5dcd.png)

## 動作確認
### モデルの選択
右上から利用するモデルを選択します。
環境変数にモデルの名前（deployment_name）を記載したもの選択してください。

![ChatbotUI_1_ChatbotUI_Top2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/76cd2edc-628d-4a10-ae4f-502368c1d333.png)

### 動作確認
設定に誤りがなければモデルと対話できます。
下記画像では「GPT-3.5 Turbo」となっていますが、中身は「GPT-4o」となります。

![ChatbotUI_1_ChatbotUI_Chat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402149/14707bff-79fd-3cdb-dfc1-19359e489976.png)

以上でChatbot UIの構築は完了です。
おつかれさまでした。


# 参考文献など
* [Github - mckaywrigley/chatbot-ui](https://github.com/mckaywrigley/chatbot-ui)
* [Qiita - Microsoft Store を使わず WSL を導入する](https://qiita.com/takelushi/items/fbe51a1a3a5ba993a6b8)
* [Qiita - AlmaLinuxにNode.js22をインストール](https://qiita.com/44dayo/items/519ef3a48f9aa52ed8e7)
* [Qiita - supabaseのローカル環境を整える](https://qiita.com/eno49conan/items/4596c1983ee5e3f9e324)
* [Learn - systemd を使用して WSL で Linux サービスを管理する](https://learn.microsoft.com/ja-jp/windows/wsl/systemd)