🪄 フィルタ関数: 入力と出力を変更する

Open WebUIにおけるフィルタ機能の包括的なガイドへようこそ！フィルタは、プラグインシステムとして柔軟かつ強力なものであり、大規模言語モデル（LLM）へ送信される前の入力データやLLMから返される後の出力データを変更することが可能です。コンテキストを向上させるために入力を変換したり、可読性を改善するために出力を整理したりする際に、フィルタ関数がすべてを実現します。

このガイドでは、フィルタとは何かその仕組み、その構造、そして自分だけの強力で使いやすいフィルタを構築するために必要なすべてを詳しく説明します。それでは始めましょう！比喩や例、ヒントを使ってわかりやすく説明しますので心配いりません 🌟

---

🌊 Open WebUIにおけるフィルタとは？

Open WebUIを水が流れるパイプラインとイメージしてください：

• ユーザー入力とLLMの出力が水です。
• フィルタは、目的地に到達する前に、流れを浄化し修正し適応させる水処理ステージです。

フィルタは流れの中間に座り、チェックポイントのように、調整が必要な部分を決定します。

以下はフィルタの役割の概要です：

1. ユーザー入力の変更（Inlet関数）：AIモデルに届く前に入力データを調整します。これにより、明確さを高めたり、コンテキストを追加したり、テキストを整理したり、特定の要件に合わせてメッセージを再フォーマットすることができます。
2. モデル出力のストリームをインターセプトする（Stream関数）：モデルによって生成されたAIのレスポンスをリアルタイムで調整します。これは、機密情報のフィルタリングや、出力をより読みやすくフォーマットするのに役立ちます。
3. モデル出力の変更（Outlet関数）：AIのレスポンスが処理された後、ユーザーに表示する前に調整します。これにより、データを洗練させたり、ログを取ったり、ユーザー体験を向上させるために適応させることができます。

重要な概念: フィルタは独立したモデルではなく、モデルに送信されるデータやモデルから返されるデータを強化または変換するツールです。

フィルタは、AIワークフローの中で翻訳者や編集者のような役割を果たし、流れを妨げることなく会話をインターセプトして変更できます。

---

🗺️ フィルタ関数の構造: 骨組み

フィルタ関数の最も簡単な表現から始めましょう。一部が最初に技術的に感じられるかもしれませんが、問題ありません—それらを一歩一歩分解して説明します！

🦴 フィルタの基本的な骨組み

from pydantic import BaseModel
from typing import Optional

class Filter:
    # バルブ: フィルタの設定オプション
    class Valves(BaseModel):  
        pass

    def __init__(self):
        # バルブを初期化 (フィルタ用のオプション設定)
        self.valves = self.Valves()

    def inlet(self, body: dict) -> dict:
        # ユーザー入力を操作する場所です。
        print(f"inlet 呼び出し: {body}")
        return body  

    def stream(self, event: dict) -> dict:
        # モデル出力の分割されたチャンクを操作する場所です。
        print(f"stream イベント: {event}")
        return event

    def outlet(self, body: dict) -> None:
        # モデル出力を操作する場所です。
        print(f"outlet 呼び出し: {body}")

---

🆕 🧲 トグルフィルタの例: インタラクティブ性とアイコンの追加 (Open WebUI 0.6.10で新登場)

フィルタは単にテキストを変更する以上のことが可能です—UIトグルを公開したり、カスタムアイコンを表示したりできます。たとえば、フィルタをUIのボタンでオン/オフできるようにし、Open WebUIのメッセージ入力UIに特別なアイコンを表示することができます。

以下はそのようなトグルフィルタを作成する方法です:

from pydantic import BaseModel, Field
from typing import Optional

class Filter:
    class Valves(BaseModel):
        pass

    def __init__(self):
        self.valves = self.Valves()
        self.toggle = True # 重要: これによりOpen WebUIでスイッチUIが作成されます
        # ヒント: SVGデータURIを使用！
        self.icon = """data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiAxOHYtNS4yNW0wIDBhNi4wMSA2LjAxIDAgMCAwIDEuNS0uMTg5bS0xLjUuMTg5YTYuMDEgNi4wMSAwIDAgMS0xLjUtLjE4OW0zLjc1IDcuNDc4YTEyLjA2IDEyLjA2IDAgMCAxLTQuNSAwbTMuNzUgMi4zODNhMTQuNDA2IDE0LjQwNiAwIDAgMS0zIDBNMTQuMjUgMTh2LS4xOTJjMC0uOTgzLjY1OC0xLjgyMyAxLjUwOC0yLjMxNmE3LjUgNy41IDAgMSAwLTcuNTE3IDBjLjg1LjQ5MyAxLjUwOSAxLjMzMyAxLjUwOSAyLjMxNlYxOCIgLz4KPC9zdmc+Cg=="""
        pass

    async def inlet(
        self, body: dict, __event_emitter__, __user__: Optional[dict] = None
    ) -> dict:
        await __event_emitter__(
            {
                "type": "status",
                "data": {
                    "description": "トグル済み！",
                    "done": True,
                    "hidden": False,
                },
            }
        )
        return body

🖼️ 何が起こっている？

• toggle = True は、Open WebUI にスイッチ UI を作成し、ユーザーがフィルターをリアルタイムで手動でオンまたはオフに切り替えることを可能にします。
• icon (Data URI を使用) は、フィルター名の隣に小さな画像として表示されます。SVG を Data URI エンコード形式で使用することができます。
• inlet 関数 は、__event_emitter__ 特別な引数を使用して、UI にフィードバック/ステータスを放送します。例えば「切り替えました！」という通知やトーストのように表示されます。

これらのメカニズムを使用して、フィルターを動的、インタラクティブ、視覚的にユニークなものにし、Open WebUI のプラグインエコシステム内で活用できます。

---

🎯 主要コンポーネントの説明

1️⃣ Valves クラス (オプション設定)

Valves をフィルターのノブやスライダーと考えてください。フィルターの動作を調整するために、ユーザーに設定可能なオプションを提供したい場合、ここで定義します。

class Valves(BaseModel):
    OPTION_NAME: str = "Default Value"

例えば： レスポンスを大文字に変換するフィルターを作成している場合、すべての出力が完全に大文字化されるかどうかを設定するために TRANSFORM_UPPERCASE: bool = True/False のようなバルブを提供することができます。

---

2️⃣ inlet 関数 (入力事前処理)

inlet 関数は、調理前の食材準備のようなものです。料理人だと想像してください。材料がレシピに入る前に（この場合 LLM に送られる前に）、野菜を洗ったり、玉ねぎを刻んだり、肉に下味をつけたりするかもしれません。このステップがなければ、最終的な料理が味気ない、生野菜を含む、または単に一貫性がないものになる可能性があります。

Open WebUI の世界では、inlet 関数は、ユーザー入力 をモデルに送信する前に重要な準備作業を行います。この準備により、AI が処理するための入力が可能な限りクリーンで、コンテキストに基づいて役に立つものとなります。

📥 入力:

• body: Open WebUI からモデルへの生の入力。通常、チャット完了リクエストの形式で（会話のメッセージやモデル設定、その他のメタデータなどのフィールドを含む辞書）。これはレシピの材料のようなものです。

🚀 あなたのタスク: body を修正して返す。この修正された body が LLM に送られるものであり、これによって入力に明確さ、構造、コンテキストを加える機会が得られます。

🍳 inlet を使用する理由

1. コンテキストの追加: 特にユーザーのテキストが曖昧または不完全な場合に重要な情報を自動的に追加します。例えば「あなたはフレンドリーなアシスタントです」や「このユーザーがソフトウェアのバグを解決するのを助けてください」など。

2. データのフォーマッティング: 入力が JSON や Markdown など特定の形式を必要とする場合、モデルに送信する前に変換します。

3. 入力のサニタイズ: 不要な文字を削除したり、過剰な空白や絵文字などの潜在的に有害または混乱を招く可能性のある記号を削除します。敏感な情報を置き換えることもあります。

4. ユーザー入力の簡素化: モデルの出力が追加のガイダンスによって改善される場合、inlet を使用して自動的に明確な指示を挿入することができます。

💡 例：食材準備をベースにしたユースケース

🥗 例1: システムコンテキストの追加

LLM がイタリア料理の調理を準備しているシェフであると仮定してください。しかし、ユーザーが「これはイタリア料理の調理のためです」と明言していない場合、データをモデルに送信する前にこのコンテキストを追加することで、メッセージが明確になります。

def inlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
    # 会話内でイタリア料理のコンテキストを追加
    context_message = {
        "role": "system",
        "content": "ユーザーがイタリア料理の準備をしているのを助けます。"
    }
    # チャット履歴の最初にコンテキストを挿入
    body.setdefault("messages", []).insert(0, context_message)
    return body

📖 何が起こる？

• ユーザーの入力「おすすめの夕食のアイデアは？」にイタリアのテーマが追加されます。そして、システムコンテキストのおかげでチーズケーキではなくパスタが回答に表示される可能性が高くなります。

🔪 例2: 入力のクリーニング (不要な文字の削除)

ユーザー入力が乱雑で、!!! などの不要な記号が含まれている場合、モデルが解析しにくく効率が低下します。この内容を整理しつつ、主な内容は保持します。

def inlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
    # ユーザーの最後のメッセージをクリーニング (メッセージリストの最後から取得)
    last_message = body["messages"][-1]["content"]
    body["messages"][-1]["content"] = last_message.replace("!!!", "").strip()
    return body

📖 何が起こる？

• 変換前: "この問題をどうやってデバッグするの!!!" ➡️ モデルに送られる内容: "この問題をどうやってデバッグするの"

注意: ユーザーの感じ方は変わりませんが、モデルにはよりクリーンで理解しやすいクエリが処理されます。

📊 inletがLLMの入力最適化に役立つ方法:

• 曖昧なクエリを明確にすることで精度を向上させます。
• 絵文字やHTMLタグ、余分な句読点などの不要なノイズを取り除くことでAIをより効率的にします。
• ユーザー入力をモデルが期待する形式やスキーマ（例えば特定の利用ケースにおけるJSONなど）にフォーマットすることで一貫性を確保します。

💭 inletをキッチンの副料理人と考えてみてください — モデル（AIの"レシピ"）に入るものすべてが準備され、清掃され、完璧に調理されていることを保証します。入力が良ければアウトプットも良くなります！

---

🆕 3️⃣ streamフック (Open WebUI 0.5.17の新機能)

🔄 streamフックとは何ですか？

stream関数は、Open WebUI 0.5.17で導入された新機能で、モデルからストリーミングされるレスポンスをリアルタイムで傍受および修正できる機能を提供します。

outletが完成したレスポンス全体を処理するのに対し、streamはモデルから受信した個々のチャンクに対して動作します。

🛠️ Streamフックを使用するタイミング

• ユーザーに表示される前にストリーミングレスポンスを修正する。
• リアルタイムな検閲やクリーンアップを実装する。
• ストリーミングデータのモニタリングやログ/デバッグを行う。

📜 例: ストリーミングチャンクのロギング

次のようにして、ストリーミングされるLLMレスポンスを検査および修正できます:

def stream(self, event: dict) -> dict:
    print(event)  # 各受信チャンクを検査するために印刷
    return event

例: ストリーミングイベント:

{"id": "chatcmpl-B4l99MMaP3QLGU5uV7BaBM0eDS0jb","choices": [{"delta": {"content": "Hi"}}]}
{"id": "chatcmpl-B4l99MMaP3QLGU5uV7BaBM0eDS0jb","choices": [{"delta": {"content": "!"}}]}
{"id": "chatcmpl-B4l99MMaP3QLGU5uV7BaBM0eDS0jb","choices": [{"delta": {"content": " 😊"}}]}

📖 どうなるのか？

• 各行はモデルからストリーミングされたレスポンスの小さな断片を表しています。
• delta.contentフィールドには逐次生成されたテキストが含まれます。

🔄 例: ストリーミングデータから絵文字をフィルタリング

def stream(self, event: dict) -> dict:
    for choice in event.get("choices", []):
        delta = choice.get("delta", {})
        if "content" in delta:
            delta["content"] = delta["content"].replace("😊", "")  # 絵文字を除去
    return event

📖 変更前: "Hi 😊"
📖 変更後: "Hi"

---

4️⃣ outlet関数 (出力後処理)

outlet関数は、AIのレスポンスを整理（または最終的な変更を加える）する校正者のような役割を果たします。 LLMによる処理が完了した後に対応します。

📤 入力:

• body: これには、チャット内の現在のすべてのメッセージ（ユーザー履歴 + LLM応答）が含まれます。

🚀 あなたのタスク: このbodyを修正します。クリーンアップ、追加、変更のログ記録が可能ですが、各調整がユーザー体験に与える影響には注意が必要です。

💡 ベストプラクティス:

• ロギングを優先し、アウトレットでの直接編集を控える（例: デバッグや分析向け）。
• 出力のフォーマットなどの大幅な変更が必要な場合は、pipe関数の使用を検討してください。

💡 ユースケース例: ユーザーに見せたくない機密APIレスポンスを除去する:

def outlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
    for message in body["messages"]:
        message["content"] = message["content"].replace("<API_KEY>", "[REDACTED]")
    return body 

---

🌟 フィルターの実践:実例の構築

フィルターの使用方法を理解するために、実際の例をいくつか構築してみましょう！

📚 例 #1: ユーザー入力に常にコンテキストを追加

LLMに対し、常にソフトウェアのバグ解決を支援することを伝えるには、「あなたはソフトウェアトラブルシューティングのアシスタントです」といった指示を各ユーザークエリに追加できます。

class Filter:
    def inlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
        context_message = {
            "role": "system", 
            "content": "あなたはソフトウェアトラブルシューティングのアシスタントです。"
        }
        body.setdefault("messages", []).insert(0, context_message)
        return body

---

📚 例 #2: 読みやすさのために出力を強調

Markdownやその他のフォーマットされたスタイルで出力を返す場合は、outlet関数を使用します！

class Filter:
    def outlet(self, body: dict, __user__: Optional[dict] = None) -> dict:
        # 各レスポンスに「強調」マークダウンを追加
        for message in body["messages"]:
            if message["role"] == "assistant":  # モデル応答を対象
                message["content"] = f"**{message['content']}**"  # マークダウンで強調表示
        return body

---

🚧 混乱を防ぐ: FAQ 🛑

Q: フィルターはPipe関数とどう違うのか？

フィルターは、モデルに送信されるデータやモデルから返されるデータを修正しますが、これらの段階外のロジックに大きく干渉することはありません。一方、Pipe関数は次のことができます:

• 外部APIを統合する、またはバックエンドでの操作の方法を大幅に変形。
• 完全に新しい「モデル」としてカスタムロジックを公開。

Q: outlet内で重たい後処理を行えますか？

できますが、最善の方法ではありません。:

• フィルターは軽量な変更やログ記録を行うために設計されています。
• 大幅な修正が必要な場合は、代わりにパイプ関数を検討してください。

---

🎉 まとめ: フィルター関数を構築する理由

これまでにあなたが学んだこと:

1. インレットはユーザー入力を操作します（事前処理）。
2. ストリームはストリームされたモデル出力に介入し変更を加えます（リアルタイム）。
3. アウトレットはAI出力を微調整します（後処理）。
4. フィルターはデータフローへの軽量でリアルタイムな変更に最適です。
5. バルブを使用すれば、フィルターを動的に設定することでユーザーに合わせた挙動を可能にする力を与えることができます。

---

🚀 あなたの番です: さあ実験を始めましょう！小さな変更やコンテキストの追加でOpen WebUI体験を向上させるにはどうすれば良いでしょうか？フィルター構築は楽しく、柔軟に活用でき、あなたのモデルを次のレベルへ引き上げます！

ハッピーコーディング！✨