このチュートリアルでは、ウェブブラウザ向けの独自のチャットボットを作成する方法について説明します。PyMuPDF を含むさまざまな Python ライブラリと、お使いの ChatGPT APIキーを使用して、ユーザーがアップロードしたPDFドキュメントに対して入力された質問に答えることができる、グラフィカルユーザーインターフェース（GUI）を作成します。バックエンドとフロントエンドの技術を組み合わせて、Web向けの効果的なソリューションを提供する方法を実証します。

はじめに

当社のソリューションは、次の3つのキーとなるライブラリに依存しています。

LangChain（LLMを利用したアプリケーションを構築するためのフレームワーク - チャットボットのI/Oを管理するために使用されます）
Gradio（WebブラウザでチャットボットのGUIを作成して提供するために使用されます）
PyMuPDF（チャットボット用にアップロードされたドキュメントを読み込み、レンダリングするために使用されます）
基本的に、バックエンドにLangChain、フロントエンドにGradioを使用し、その間の重要なインターフェースとしてPyMuPDFを使用しています。

依存関係のインストール

両方のために必要なものを確実に持っているために、次のようにpip を使用してこれらの依存関係をインストールする必要があります：

pip install -U langchain

pip install -U langchain-community

pip install -U langchain-openai

pip install -U gradio

pip install -U pymupdf

ソースコードのダウンロード

以下のURLからサンプルコードをクローンまたはダウンロードしてください：github.com/pymupdf/RAG。ローカルにコピーができたら、Pythonのソースコードは「GUI」フォルダの内容を参照してください。

デモの実行

コンソールを開き、「GUI」フォルダから次のコマンドを実行してください：

python browser-app.py

デモはローカルホスト環境で実行され、以下のようなGUIが表示されるはずです：

デモの動作方法

このデモでは、以下の操作が可能です：

チャットセッションで使用するためのOpenAI APIキーを入力する *
PDFドキュメントをアップロードする
ドキュメントに対してクエリを送信し、継続的なQ&Aセッションを提供します

ドキュメントをアップロードして、ボットに「これは何ですか？」と尋ねてみてください。その結果として、ドキュメントのトピックの要約が返されるはずです。たとえば：

* 注意：OpenAI APIキーがない場合、必要なサービスへのアクセス権が必要なため、セッションから情報を取得することができません。まだAPIキーをお持ちでない場合は、OpenAIから取得してください。

バックエンドコードの説明

デモのバックエンドの動作を説明するために、Pythonコードの主な領域を見てみましょう。これは理解を深めるためのものです - スクリプトを調整する必要はありません。

APIキーの設定

最初に、APIキーの入力を処理するための関数を提供します。

def set_apikey(api_key: str):

    print("API Key set")

    app.OPENAI_API_KEY = api_key

    return disable_box

注意：後でこれをGradio GUIに接続します。

アプリケーションクラス

「my_app」という単一のクラスがあり、次のようにインスタンス化されます：

app = my_app()

ここには、コンストラクタと呼び出し可能なメソッド以外に、主要なメソッドが次のようにあります：

process_file

これは、ユーザーが提供したPDFドキュメントをロードするためにLangChainのPyMuPDFLoaderを使用します。

build_chain

これは、会話ダイアログのためにLangChainでチェーンを構築します。

本体メソッド

Pythonコードのメインボディ（ "my_app"クラスの外）には、いくつかの他の重要なメソッドがあります。

get_response

これは、クエリとチャット履歴をチェーンに送信し、最も関連性の高い回答を持つページ番号を取得し、その回答をフロントエンドに提供します。

render_file

これは、ユーザーがさまざまなクエリを送信すると呼び出されます。チャットボットからの成功した応答がある場合、特定のドキュメントページを参照する場合、コードはユーザーに対して興味のあるページをレンダリングするためにPyMuPDFを使用します。

purge_chat_and_render_first

これは実際には、ユーザーがドキュメントをアップロードした後に最初に呼び出されるメソッドであり、以前のチャット履歴を削除し、次にドキュメントの最初のページをユーザーにレンダリングして、ドキュメントが準備されたことを知らせます。注意：これらの行は以前のセッションを削除するために重要です：

app.chat_history = []
app.count = 0

これがないと、チャットセッションが前のドキュメントの「知識」を持ち、関連のない情報を返そうとする可能性があるため、混乱することがあります。

##フロントエンドコードの説明

フロントエンドコードは、PythonコードのGradio部分です。

with gr.Blocks() as demo:

    with gr.Column():

        with gr.Row():

            with gr.Column(scale=1):

                api_key = gr.Textbox(

                  . . .

このコードは、GUIのグリッドレイアウトを記述しています。これは、入力テキストフィールドの領域、チャットボットの結果やクエリの送信、そしてドキュメントの領域を整理します。ここではGradioに関する別のチュートリアルには触れず、Gradioガイドで詳細を調べることをお勧めします。

Gradioコードの重要な部分の1つは、関数や変数をUIコントロールに割り当てる部分です。たとえば、APIフィールドは次のように割り当てられます：

api_key.submit(

        fn=set_apikey,

        inputs=[api_key],

        outputs=[

            api_key,

        ],

    )

これにより、提出された際に使用する関数がset_apikeyに設定され、関連する入力と出力が使用する変数が宣言されます。

もう1つの重要な関数は、アップロードボタンにpurge_chat_and_render_firstが割り当てられています。この関数は、前のチャットセッションを削除し、その後、PyMuPDFを使用してドキュメントの最初のページをGUIにレンダリングします。

最後に、デモを起動してWebアプリケーションを開始します。

結論

既存のPythonテクノロジーを活用して比較的簡単にインタラクティブなチャットボットを作成する方法を示せたかどうかを願っています。バグに遭遇した場合や提案がある場合、またはさらなる改善点を考えついた場合は、GitHubでお知らせください。

ソースコード

github.com/pymupdf/RAG を参照してください。