記事一覧
　Dify ボットUI を探そう - 1（Open WebUI 導入）
　Dify ボットUI を探そう - 2（dify2openai 導入）

------------------------------------------------
Dify ボットアプリの標準UIは手軽に利用できる反面、いくつかの機能については不足を感じる点があります。

ユーザー認証機能の不足
アプリケーションのURLが知られると、第三者からの不正なアクセスを防ぐ手段がありません。そのため、社内利用など特定のユーザーに限定したい場合、情報セキュリティ上の懸念が生じます。
　
会話の共有・ダウンロード機能の欠如
チャットの会話内容をファイルとして出力したり、他のユーザーと直接共有する機能が提供されていません。手動でのコピー＆ペーストは可能ですが、これは手間であり、会話履歴の管理や情報共有の効率を低下させます。
　
定型プロンプト登録機能の不在
頻繁に利用する定型的なプロンプトを毎回手入力する必要があり、これは作業効率を著しく低下させます。

特に「1. ユーザー認証機能の不足」は、業務利用において致命的な制約となることがあります。Difyの開発環境へのアクセスが制限されている場合など、一般ユーザーへの安全なチャットボット公開が困難になるためです。

こうした課題を解決するため UI の自作も検討しましたが、本来の目的である「AIの活用」を見失う恐れがありました。

Open WebUI

Open WebUIは、人気のあるChatGPTライクなインターフェースを提供するオープンソースソフトウェアです。Difyの標準UIが抱える課題、特にユーザー認証機能を標準で備えており、セキュリティ面での懸念を解消する助けとなります。

公式サイト: https://docs.openwebui.com/
GitHub: https://github.com/open-webui/open-webui/

Dify と連携可能？

Open WebUI がサポートする API仕様は次の２種類です。

Ollama API
OpenAI 互換 API

一方、Difyで作成されるアプリケーションのAPIは独自仕様となっています。そのため、現在のところOpen WebUIからDifyのAPIへ直接接続することはできません。

対処方法

考えられる対処方法は次の３つです。

Dify アプリの API を「OpenAI 互換 API」に変換する。
Dify アプリの API を呼び出すプロキシサーバーを用意する。
Open WebUI に Dify API を呼び出す処理を追加する。

1. Dify アプリの API を「OpenAI 互換 API」に変換する

DifyのAPI形式をOpenAI互換API形式に変換し、Open WebUIからDifyのチャットボットを直接利用できるようにする方法です。
ただ、Dify 自体に手を加える必要がありますし、拡張機能（プラグイン）の「OpenAI Compatible Dify App」でも解決には至りませんでした。

OpenAI Compatible Dify App
説明には「DifyアプリのAPIをOpenAI互換APIに変換する」とありますが、Open WebUI から接続すると Not Found（見つかりません） エラーが発生します。
どうやら「利用可能なモデル一覧（/v1/models）」コマンドを実行しようとして失敗しているようです。

2. Dify アプリの API を呼び出すプロキシサーバーを用意する

Open WebUIとDifyの間にプロキシサーバーを配置し、OpenAI互換API と Difyの独自API形式を相互変換する方法です。
OSS製品として「dify2openai」が存在しますが、最終更新日が約1年前と、長期にわたって更新が停止しています（Latest v0.0.7 on May 4, 2024）。そのため、導入にあたっては十分な検証作業が不可欠です。

3. Open WebUI に Dify API を呼び出す処理を追加する

Open WebUI 自体に DifyのAPIを呼び出すためのモジュール、すなわち「Dify 用のモデルプロバイダー」を組み込む方法です。
Open WebUIの「Functions(Pipe Function)」機能を利用して「選択可能なモデルプロバイダー」を定義することは可能ですが、PythonとOpen WebUI双方に関する知識が必要となるため、未経験者にとっては難易度の高い作業と言えるでしょう。

　
現状では、すぐに導入・確認できる可能性がある選択肢は「dify2openai」ですが、その更新状況から安定性への懸念も残ります。今回はまずOpen WebUIの導入を優先し、次回以降で「dify2openai」の導入と検証を進めることにします。

インストール方法

ここでは、ミニPC「MINISFORUM UN150P」（OS: Ubuntu）に構築されたDocker環境へOpen WebUIを導入する手順を説明します。Difyとは独立した専用フォルダにOpen WebUIを構築する方針です。

Difyのdocker-compose.yamlファイルにOpen WebUIの定義を追加することも可能ですが、Difyのバージョンアップ時に当該ファイルの内容が初期状態に戻るリスクがあります。
その都度Open WebUIの定義を再追加する作業は予期せぬ問題を引き起こす可能性があるため、DifyとOpen WebUIは個別の環境で構築することをお勧めします。

① 導入先フォルダの準備

Difyの導入先フォルダと同じ階層にopen-webui-projectというフォルダを作成します。さらに、その直下にvolumesフォルダも作成しておきます。
このvolumesフォルダは、Open WebUIのデータを永続的に保存するために使用され、コンテナが削除されてもデータが失われることはありません。

~/docker
├── dify
└── open-webui-project
     └── volumes

② docker-compose.yaml の作成

Open WebUIはdocker runコマンドでの導入も推奨されていますが、ここではdocker-compose.yamlファイルを用いて各種設定を管理する方法を採用します。

open-webui-projectフォルダ直下にdocker-compose.yamlファイルを作成し、以下の内容を記述します。

services:
  open-webui:
    # Open WebUIのDockerイメージを指定。（':main'は最新版を意味する）
    image: ghcr.io/open-webui/open-webui:main
    # コンテナ名
    container_name: open-webui

    ports:
      # ホストPCのポート21080を、コンテナのポート8080にマッピング。
      - "21080:8080"

    volumes:
      # 「volumes/open-webui-data」フォルダを、コンテナ内の
      # 「/app/backend/data」にマウント。
      # 　※ Open WebUIのデータ（チャット履歴や設定）の保存先。
      - ./volumes/open-webui-data:/app/backend/data

    # コンテナが停止した場合に、常に自動的に再起動するように設定します。
    restart: always

ポート番号
既定の「8080」は利用される可能性の高いポート番号です。ホストOS上で衝突する可能性が高いので、マッピング先の番号を「21080」に変更しておきます。

Open WebUI の開発環境では、フロントエンド部（UI）とバックエンド部（API等）を異なるポート番号で動作させることがあります。
この場合の既定ポートはフロントエンド部が「5173」、バックエンド部が「8080」です。

volumes
volumes直下の open-webui-dataフォルダを、コンテナ内の/app/backend/dataフォルダにマウントします。
これにより、Open WebUIの各種データ（チャット履歴、設定など）がホスト管理下のフォルダ内で永続的に保持されます。

③ コンテナの起動

open-webui-projectフォルダへ移動し、docker compose up コマンドを実行してコンテナを起動します。

$ cd ~/docker/open-webui-project
$ docker compose up -d
[+] Running 16/16
   ✔ open-webui Pulled                283.0s 
   ✔ 61320b01ae5e Already exists      0.0s 
   ✔ 91e6593878cc Pull complete       1.5s 
   ✔ c229bae17638 Pull complete       6.3s 
   ✔ befce1679853 Pull complete       6.3s 
   ✔ 51aa85bb3162 Pull complete       6.3s 
   ✔ 4f4fb700ef54 Pull complete       6.4s 
   ✔ 98b439567ace Pull complete       6.4s 
   ✔ 1e16be39ab5b Pull complete       6.4s 
   ✔ 3194fccb9b31 Pull complete     133.9s 
   ✔ 27f5353b88f4 Pull complete     133.9s 
   ✔ 9aee9597c283 Pull complete     277.6s 
   ✔ f3e62f9a8c03 Pull complete     279.9s 
   ✔ 260a943eb957 Pull complete     280.1s 
   ✔ dd2cc218d29f Pull complete     280.1s 
   ✔ 60ebc239c70b Pull complete     280.6s 
[+] Running 2/2
   ✔ Network open-webui-dify_default  Created    0.1s 
   ✔ Container open-webui             Started    1.0s

④ Open WebUI 画面の表示確認

ミニPCのデスクトップ画面上でWebブラウザを開き、以下のURLにアクセスします。
　http://localhost:21080

以下の画面が表示されたら、導入成功です。

[開始] をクリックすると「管理者アカウントの作成」画面が表示されるので、この時点で管理者アカウントを作成しておきましょう。

更新方法

Open WebUI を最新バージョンに更新する手順は以下のとおりです。

公式サイト: https://docs.openwebui.com/getting-started/updating

① 現在のOpen WebUIコンテナを停止

現在稼働中の Open WebUI のコンテナを停止します。

$ cd ~/docker/open-webui-project
$ docker compose down

② 最新の Open WebUI イメージをダウンロード

最新バージョンのイメージをダウンロードします。

$ docker compose pull

③ 新しいバージョンの Open WebUI コンテナを起動

ダウンロードした最新のイメージを使用して Open WebUIのコンテナを再作成し、起動します。

$ docker compose up -d

補足

イメージを削除しても、格納済みのデータは削除されません
docker-compose.yamlファイルで、ホスト側の ./volumes/open-webui-data というフォルダを データ格納ボリューム としてマウントしています。
docker compose downでコンテナを削除しても、同ボリューム内のデータが失われることはありません。
　
必要に応じて、更新前にバックアップを実施可能（任意）
万が一の事態に備えたい場合は、./volumes/open-webui-dataフォルダの内容を別の場所にコピーしてバックアップを取っておくことをお勧めします。

終わりに

Open WebUIの導入作業はこれで完了です。Open WebUIを導入することで、Difyの標準UIが抱えていた、ユーザー認証機能の不在、会話の共有・ダウンロードの不便さ、定型プロンプト登録機能の欠如といった多くの課題を解決できる見込みです。

次回は、APIプロキシサーバー「dify2openai」の導入を試み、Difyで作成したチャットボットアプリケーションへの接続検証を行う予定です。