Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Building a Chatbot with Python (Frontend)

2025年09月16日に「Dev.to」が公開したITニュース「Building a Chatbot with Python (Frontend)」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

PythonとStreamlitでRAGチャットボットのフロントエンドを構築する。これは、ユーザーの質問をFAISSで検索した関連情報とGroq LLMで回答生成し、モダンなUIで表示するものだ。履歴クリア機能も持つ。

出典: Building a Chatbot with Python (Frontend) | Dev.to公開日:

ITニュース解説

このニュース記事では、Pythonというプログラミング言語を使って、チャットボットの「フロントエンド」、つまりユーザーが直接見て操作する部分をどのように構築するかについて解説している。具体的には、「Indaba Retrieval-Augmented Generation (RAG) チャットボット」という種類のチャットボットの画面側を作る方法だ。このチャットボットは、ユーザーからの質問を受け取り、関連する情報を探し出し、その情報に基づいて大規模言語モデル(LLM)が回答を生成する、という高度な機能を備えている。

まず、このチャットボットのフロントエンドが持つ主な役割を説明する。それは、ユーザーが質問を入力するための画面を提供すること、入力された質問を管理すること、質問に関連する情報を見つけ出すこと、Groqというサービスが提供するLLMを使って回答を生成すること、そして、見栄えの良いユーザーインターフェース(UI)を提供することだ。さらに、チャットの履歴をクリアするボタンも用意されている。

実際の構築手順は以下の通りに進む。

最初のステップは「必要なツールの読み込みと準備」だ。ここには、いくつかの重要なライブラリ(Pythonで使える便利な機能の集まり)が登場する。

  • streamlitは、Pythonだけで簡単にWebアプリケーションのユーザーインターフェースを作成するためのフレームワークである。チャットボットの画面はこのstreamlitを使って作られている。
  • pickleは、Pythonのオブジェクト(データやプログラムで扱われる情報)をファイルに保存したり、ファイルから読み込んだりするためのものだ。ここでは、事前に処理されたテキストの断片(知識の元となる情報)を読み込むのに使われる。
  • faissは、大量のデータの中から、特定のデータと似ているものを高速で探し出すためのライブラリだ。このチャットボットでは、「埋め込み」(後述)という方法で数値に変換されたテキストデータの中から、質問に最も関連する情報を瞬時に見つけるために使われる。これをベクトルデータベースと呼ぶこともある。
  • SentenceTransformerは、文章の意味を数値のベクトル(多次元の座標のようなもの)に変換する「埋め込みモデル」を提供している。これにより、コンピュータが文章の意味的な類似性を計算できるようになる。
  • groqは、大規模言語モデル(LLM)のAPI(アプリケーション・プログラミング・インターフェース、つまり他のソフトウェアと通信するための窓口)を利用するためのクライアントだ。このチャットボットでは、GroqのLLMを使って回答を生成する。
  • osは、オペレーティングシステム(WindowsやmacOSなど)の機能を利用するためのもので、ここでは環境変数(システムが利用する設定情報)にアクセスするために使われるが、APIキーのような機密情報は、st.secretsというStreamlitの安全な仕組みから取得するように設計されているため、通常の方法での環境変数読み込みはコメントアウトされている。

次に、「FAISSインデックスと知識の断片の読み込み」を行う。チャットボットが質問に答えるための知識は、事前に「faiss_index.bin」というファイルと「chunks.pkl」というファイルに保存されている。FAISSインデックスは、知識の断片が数値データとして効率的に検索できるように整理された「検索用の辞書」のようなものだ。そして、「chunks.pkl」には、元のテキストデータが小さな意味のあるかたまり(チャンク)に分割されて保存されている。ここで使われるSentenceTransformerのモデルは、インデックスが作成された時と同じものを使用することで、検索の精度を保証する。

その次は、「Groqクライアントの初期化」だ。これは、GroqのLLMと通信するための準備であり、st.secretsから取得したAPIキーを使って、LLMにアクセスできるように設定する。APIキーは、サービスを利用するための「鍵」であり、外部に漏れないように慎重に扱う必要がある。

重要な機能の一つが、「セマンティック検索機能」だ。ユーザーが質問を入力すると、この機能がまず質問をSentenceTransformerで数値のベクトルに変換する。この数値化された質問ベクトルを、faissを使ってFAISSインデックスの中から最も関連性の高い知識の断片(トップk個)を高速で探し出す。これを「意味に基づいた検索」という意味で「セマンティック検索」と呼ぶ。これにより、キーワードだけでなく、質問の意図や意味を理解して関連情報を取得できる。

続いて、「LLMによる回答生成」が行われる。検索で得られた関連性の高い知識の断片(コンテキスト)とユーザーの質問を組み合わせて、「プロンプト」と呼ばれる指示文を作成する。このプロンプトは、「与えられた文脈に基づいて質問に答えなさい。もし質問が文脈と全く関係ない場合は、回答しようとせず、『私の知識ベースにはこの情報がありません。技術チームにお問い合わせください。』と厳密に答えてください。」という具体的な指示を含んでいる。このプロンプトをGroqのLLM(例えばllama-3.3-70b-versatileというモデル)に送信し、LLMがその指示に従って回答を生成する。もし関連情報が見つからない場合でも、LLMがでたらめな回答をしないように、この安全対策の指示が非常に重要となる。

チャットボットの見た目を良くするために、「カスタムチャットUI(CSS)」が適用されている。st.markdownを使ってカスタムCSSコードを埋め込むことで、ダークテーマにネオンブルーのハイライトを加えるなど、モダンで洗練されたデザインを実現している。これにより、入力ボックスやボタン、回答の表示など、チャットボット全体の視覚的な魅力と使いやすさが向上する。

ユーザーインターフェースの構築では、「Streamlit UI: タイトルと説明」として、チャットボットのタイトル「🤖 Indaba」と、「離散数学に基づいて質問してください。」といった簡単な使用説明が表示される。

そして、「質問入力フォーム」が用意される。これはst.formを使って作成され、ユーザーが質問を入力するためのテキストボックスと、「送信」ボタンが含まれている。質問が送信されると、テキストボックスは自動的にクリアされる。

チャットボットの「主要なチャットロジック」は、ユーザーが「送信」ボタンを押し、かつ質問が入力されている場合に実行される。このロジックでは、まず入力された質問に基づいて「セマンティック検索機能」が呼び出され、関連する知識の断片が取得される。次に、その知識の断片と質問を使って「LLMによる回答生成機能」が呼び出され、回答が作成される。最後に、「🤖 Answer」という見出しの下に生成された回答が表示される。

さらに、会話の履歴をリセットしたい時のために、「チャットクリアボタン」が提供されている。このボタンを押すと、現在のチャットセッションの状態がリセットされ、アプリケーションが再実行されて、新しいきれいな会話画面に戻る。

まとめると、このチャットボットのフロントエンドは、ユーザーが質問をすると、その質問が数値に変換されて既存の知識ベースから関連情報が検索される。検索された情報と元の質問が大規模言語モデルに渡され、関連情報のみに基づいて回答が生成される。最終的に、生成された回答は美しくデザインされた画面に表示される、という一連のワークフローで動いている。

最後にいくつかの補足事項がある。このフロントエンドは、事前に「index_docs.py」というバックエンドの処理が実行され、知識ベース(FAISSインデックスとチャンクファイル)が作成されていることを前提としている。フロントエンド自体が知識ベースを構築することはない。また、チャットの会話履歴は現在のセッション内にのみ保存されるため、ブラウザを更新すると履歴は消えてしまう。そして、GroqのAPIキーは、ローカルで実行する場合は.envファイルに、デプロイ(公開)する場合はStreamlitのst.secretsに安全に設定する必要がある。

関連コンテンツ

関連IT用語