Skip to content

DNET_LLMChatTools

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

LLMチャット系ツール

概要

LLMチャット系ツール：ローカルまたはWeb上でLLM（大規模言語モデル）やAIアプリのインターフェースを作る用途に使われる。

詳細

Gradio UI

  • NoteBook の 1セルからUIを作成して起動できる（NoteBookではない通常のPythonでも良い）。

  • DSが「モデルのデモを作る」「プロトタイプ・PoCを共有する」「内部レビューやユーザテストを行う」などの用途に最適

  • アーキテクチャ

    • Python関数を画面全体の再描画の無いSPA風UI化する。
    • Pythonコードはクライアントではなくサーバーで動作する。
    • ...が、何れもローカルで動く（共有時はProxy経由になる）

  • 本番・商用環境では、
    以下のようなパッケージに置き換えられることが多い。

    • SPA系UI（Next.js/React/Vue）＋Python系WebAPIフレームワーク（FastAPI/Flask/Django）
    • SPA系を使用しない場合、Streamlit（CLIでも実装可能なチャットUIをWeb化するなどの目的で使用）

  • 参考

インストール（Gradio UI）

パッケージのインストール

pip install gradio

動作確認（Gradio UI）

  • Gradioによる画面定義

    import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch(inbrowser=True)

  • Session的な概念を加えたGradioによる画面定義

    import gradio as gr

# greet関数に state を追加
def greet(name, session_state):
    if session_state is None:
        session_state = []  # 初回は空リスト
    session_state.append(name)  # 入力された名前をセッションに追加
    greeting = "Hello " + name + "!"
    history = "Session History: " + ", ".join(session_state)
    return greeting, session_state, history

with gr.Blocks() as demo:
    session_state = gr.State([])  # セッション状態の初期化
    name_input = gr.Textbox(label="Your Name")
    output_text = gr.Textbox(label="Greeting")
    history_text = gr.Textbox(label="Session History")

    greet_btn = gr.Button("Greet")
    greet_btn.click(
        greet,
        inputs=[name_input, session_state],
        outputs=[output_text, session_state, history_text]
    )

demo.launch(inbrowser=True)

  • 更に、チャットUIを表示させてみる（履歴の考慮もアリ）。

    import os
import gradio as gr
from openai import OpenAI

client = OpenAI()

def chat_fn(message, history):
    # history は [{role: "...", content: "..."}, ...] の配列
    messages = history + [{"role": "user", "content": message}]
    print(messages)
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=messages,
    )

    # message は dict なので .content を使う
    reply = response.choices[0].message.content

    return reply

demo = gr.ChatInterface(
    chat_fn,
    title="Gradio × OpenAI 2.8.1 Chat UI",
)

demo.launch(inbrowser=True)

  • 更に、チャットにRAGを追加してみる（LlamaIndexでindexを構築済みである前提）。

    import os
import gradio as gr
from openai import OpenAI

client = OpenAI()

def chat_fn(message, history, use_option):

    if use_option:
        print("RAG")

        retriever = index.as_retriever(similarity_top_k=2)
        nodes = retriever.retrieve(message)

        temp = ""
        for node in nodes:
            temp += node.text
            temp += f"\n--------------------------------------------------\n"

        message += f"\n検索で取得した参考情報:\n" + temp

    else:
        print("NORMAL")

    # history は [{role: "...", content: "..."}, ...] の配列
    messages = history + [{"role": "user", "content": message}]
    print(messages)
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=messages,
    )

    # message は dict なので .content を使う
    reply = response.choices[0].message.content

    return reply

checkbox = gr.Checkbox(label="RAGモード", value=False)

demo = gr.ChatInterface(
    chat_fn,
    additional_inputs=[checkbox],
    title="Gradio × OpenAI 2.8.1 Chat UI",
)

demo.launch(inbrowser=True)

Streamlit

参考はStreamlit（参考）。

Gradio UIに次いでプロトタイプ向きだが、本番向きでもある（大規模な商用からは一段落ちる）。

  • Pythonスクリプトに「画面全体の再描画が無いSPA風UI」を追加する。

  • Pythonスクリプトにst.xxxレイヤを追加、

    • スクリプト全体が再実行されるが、UIは（エンジンが実行結果を解釈し）部分更新。
    • 結果、JSP/ASPとは異なり、画面全体の再描画の無いSPA風UIが実現される。

  • 「Stream」litである理由はデータストリームとの親和性。

    • アプリの状態をストリームとし、UIをリアクティブに再構築
    • UIコンポーネントにはダッシュボードを構成するグラフ出力なども含む。

  • CLI互換性は派生的メリット

    • 標準出力をst.xxxに置き換えれば、CLIを迅速にWeb化できる。
    • LLMに限定したものではないが、CLIのLLMとは相性が良い。

※ 参考：https://github.com/OpenTouryoProject/DxCommon/blob/master/Notebook/path/LLM_Streamlit.py

インストール（Streamlit）

パッケージのインストール

pip install streamlit

動作確認（Streamlit）

  • 実行する。

    streamlit run LLM_Streamlit.py

  • UIにアクセスする。

    http://localhost:8501/

Open WebUI

参考はOpen WebUI（参考）。

OSSの代表格っぽい名称のChatUIプロダクト

  • Pythonで実装されたChatGPT風のUIで、モデル設定のURLからサーバサイドで実行されている事が解る。
  • LLMはサーバー・サイド、クライントはSPAっぽいので、サーバー + クライアント・サイド
  • 主に Ollama やローカル LLM をチャット形式で操作するために使われ、多くのモデル（LLaMA, Mistral, etc）と互換性あり。

インストール（Open WebUI）

  • WSL2からDockerを起動するには...

  • WSL2からDockerでOpen WebUIを起動して、

    docker run -d -p 5955:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

動作確認（Open WebUI）

  • 以下のURLにアクセスすると（何故か）WLS2上のOllamaにアクセスできる。

    http://127.0.0.1:5955/

  • 設定を確認すると、モデルは以下のように設定されており、
    コンテナからホスト上のサービスにアクセスしているらしい。

    http://host.docker.internal:11434

Chainlit

参考はChainlit（参考）。

LLMエージェントとの対話に特化したチャットアプリやツールを素早く構築するためのフレームワーク

  • その名称から、LangChain、DataStream（≒Streamlit）と相性がいい。
  • ただし、Streamlitと異なり、Pythonスクリプト全体ではなくイベント駆動で動作するとのこと。

Ollama-ui

参考はOllama-ui（参考）。

「OllamaならWebUI提供するよね」と言う感じ。

ChatKit

参考はChatKit（参考）。

  • 「OpenAIならWebUI提供するよね」と思い探ってみたらあったものの、
  • 古くからあるツールと見せかけて、最新のツールでAgentKitの一部らしい。

参考

Gradio UI（参考）

Streamlit（参考）

Open WebUI（参考）

Chainlit（参考）

Ollama-ui（参考）

ChatKit（参考）

https://www.eesel.ai/ja/blog/chatkit

移行メモ

  • 「LI互換性は派生的メリット」は、続く「標準出力をst.xxxに置き換えれば、 CLIを迅速にWeb化できる。」から「CLI互換性」の誤記と判断して修正した。
  • RAG を追加したサンプル・コードの return reply のインデントが 1 段ずれていたため揃えた。
  • 同名の見出し（「インストール」「動作確認」「Gradio UI」「Streamlit」 「Open WebUI」「Chainlit」「Ollama-ui」「ChatKit」）が詳細と参考で重複し GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替えた。

Tags: 移行, LLMチャット系ツール, Gradio, Streamlit, Open WebUI, Chainlit, Ollama-ui, ChatKit, ChatUI

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally