はじめに

こんにちは！株式会社WebCrewのデザイナー@wc-nakagomiです。

今回は、 「Open WebUI」に興味がある方 に向けて、 UIおよび機能について 全画面のスクリーンショットを交えながらざっくり解説します。（わかる範囲で補足説明をいれております🙇‍♂️ 詳しく知りたい方は公式ドキュメントをチェックしてみてください！）
※スクリーンショット画像は、クリックまたはタップで拡大表示が可能です（Qiitaの仕様上、別タブで表示されます）。細かい部分が見づらい場合は、ぜひご活用ください。

また、 「Open WebUI」の概要や特徴について は下記記事にまとめましたので併せてご覧いただけると幸いです。

本記事が何かの参考になれば幸いです！それではスタート！

全体構成

「Open WebUI」は、 左側にサイドバー、右側にチャットエリア を配置した、 LLM（大規模言語モデル）のUIとして一般的な構成 となっています。標準的な機能が既に搭載され、 UIも整備されているため、デザイナーやフロントエンド担当者が不在の場合でも問題なく利用できるレベル に仕上がっています。

LLMのUIとしてよく見られる構成のホーム画面です

各画面と機能や設定の構成

サインアップ・サインイン画面

シンプルな設計で、必要最低限の入力項目のみで構成されています。

サインアップ画面

サインイン画面

ホーム画面

ChatGptライクなUIで直感的に操作できるUIになっています。

サイドバー

標準的な機能が搭載され、以下の操作が可能です。
・サイドバーの開閉
・チャット履歴の表示
・チャットのピン留めや共有、削除など

サイドバー

チャット項目メニュー

サイドバーを閉じたホーム画面

チャットエリア

リアルタイムに自然な会話形式でのやり取りができるほか、以下の機能も備えています。
・モデル選択
・デフォルトプロンプト
・各種ファイルのアップロード
・音声入力　など

チャット画面

モデル選択：連携したモデルを選択できます（複数選択も可能）

デフォルトプロンプト：あらかじめ登録しておいたプロンプトを呼び出せます

ファイルのアップロード

音声入力

その他機能

ワークスペース

AIアシスタントのカスタマイズ、RAG用のナレッジ登録、各種ツールの追加などが可能です。ワークスペースのモデルでは GPTsやGem で出来るような特化型のモデルを構築できます。また、Open WebUIコミュニティからモデルやツールなどをダウンロードすることも可能です。

モデル：特化型モデルの構築ができます

ナレッジ：RAG用のPDFファイルなどをアップロードできます

プロンプト：繁に使用するプロンプトの登録ができます（メッセージ入力時に「/」を入力すると一覧表示）

ツール：Web検索などのツール登録ができます（メッセージ入力エリアの「+」からアクセス）

チャットコントロール

チャットに関する詳細な設定が可能です。

チャット記録

チャットのアーカイブ機能により、過去のやりとりを記録することができます。

プレイグラウンド

ベータ版。ライブチャット環境展開前に、サンドボックス環境でモデル機能やパラメータのテスト・検証が可能な機能です。公式ドキュメントより

チャット

Completions

ユーザー設定

多岐にわたる設定が可能です。中には翻訳されていない項目や用途が不明なものも見受けられます。（わかる範囲で補足説明をいれております🙇‍♂️）

一般

ダークモードや言語設定、システムプロンプトの追加・変更が可能です

インターフェース

ページの表示の仕方などの変更が可能です

接続

個人化

オーディオ

チャット

アカウント

プロフィール画像やパスワードを変更できます

概要

管理者設定

こちらも多岐にわたる設定が可能です。翻訳されていない項目や用途が不明なものも見受けられます。（わかる範囲で補足説明をいれております🙇‍♂️）

ユーザー

Overview：ユーザー管理ページ。管理者、一般ユーザー、保留中の役割設定が可能です

Groups：グループ分けが可能で、各項目のアクセス制限などの設定を行えます

Evaluations

Leaderboard

Feedbacks：AIの回答に対する評価が一覧表示されます

Functions

設定

一般

接続

モデル：連携したモデル一覧が表示されます

Evaluations

ドキュメント

ウェブ検索

Code Execution

インターフェイス：バナーではホーム画面に表示するデフォルトプロンプトの設定が可能です

オーディオ

画像

パイプライン

データベース

いかがでしたでしょうか?
実際に記事としてまとめると項目数が非常に多くなってしまいました💦 （それだけ「Open WebUI」が多機能ということですが）
このプラットフォーム活用することで、人的リソースや工数を削減しながらセキュアなLLMを構築することが可能となります。

なお、冒頭でもご案内させていただきましたが「Open WebUI」の概要や特徴、社内LLM用の構成についてを下記記事にまとめていますのでご興味ある方はぜひご覧ください。

「Open WebUI」をまずは試してみたい方へ

「どんなものか、ちょっと試してみたい！」という方は、以下の参考記事をチェックして、ご自身のPCにインストールしてみてください。難しいことはわからない私でもスムーズに導入できましたのでおすすめです！

アップデートも頻繁にされますが下記記事の魔法の言葉（スクリプト）を下記画像の場所に入れて少し待つと自動でアップデートしてくれます！

※インストールやアップデートは、ご自身の判断と責任で行うようお願いいたします。

以上となります！お読みいただきありがとうございました。

「Open WebUI」についての参考記事とサイト

「Open WebUI」の概要や、弊社の社内LLM作成時に参考にした記事・サイトです。以下のリンクよりご確認ください。