WordPressブログに設置したチャットボットの構築プロセスを紹介する。OpenAIのChatGPT APIを使用し、ユーザーの問い合わせに対して適切に応答し、さらにブログ内の関連投稿を提示するChatBot「パグ蔵」を公開した。プログラムに詳しい方向けではあるが、記事の一番下のgithubでソースコードを公開している。
今回構築したのは画面の右下にあるパグ（パグ蔵）とチャットボットである。
ブログの記事の内容への質問であれば、ブログ記事の内容を踏まえた回答をすることができる。また、ブログ記事ではなくサイト自体への質問であれば、それに対応した回答をすることができる。
システムの構築の際にChatGPTの助けを大いに得たのは言うまでもない。
RAGとは…
RAGとは、Retrieval-Augmented Generationの略称である。これは、外部の情報ソースを検索・取得し、それを活用して生成的な回答を行うAIの仕組みを指す。通常の生成モデルが内部に保持する知識のみを使用するのに対し、RAGは外部データベースやドキュメントからリアルタイムで情報を取得するため、より具体的で正確な応答を提供できる。
RAGのプロセスは以下のように進む。
- クエリ処理: ユーザーからの質問や要求を受け取り、適切な形に処理する。具体的には質問や要求をベクトル化して類似度を計算できるようにする。
- 検索フェーズ: クエリを基に関連性の高い情報を外部データベースや検索エンジンから取得。1でベクトル化したものをデータベースに格納してある、既にベクトル化しているブログの文章と類似度を計算して、類似のブログ記事を抽出する。
- 生成フェーズ: 検索で得られた情報を基に、ChatGPTのAPIが回答を生成。
この仕組みを活用することで、例えばブログ記事やFAQデータベースなどの情報を検索しながら、ユーザーにカスタマイズされた回答を提供することが可能になる。
チャットボットの構成
このチャットボットは以下の要素で構成されている。
- JavaScriptによるチャットUIの構築
- DOM操作でチャットインターフェースを作成。
- ユーザーが問い合わせを送信すると、処理中は”Loading…”と表示。処理待ちの間はGIFを表示し、ユーザーに処理中であることを明確に伝える。
- PHP APIエンドポイントの構築
- PHPでエンドポイントを実装し、ChatBotからの質問を受け取る。
- Pythonで作成した「5.文章をベクトル化するPythonプログラム」を使い、質問をベクトル化。
- 記事を見ている状態での問い合わせについては記事のURL、内容をChatGPTへ送付。そうでない場合（TOP画面や固定ページなどを閲覧中）はPythonプログラムでユーザの質問をベクトル化し、MySqlに作成した質問の類似度を判定するストアドプロシージャへ問い合わせを行い、関連度の高いブログ記事をを取得する。
- OpenAIのChatGPT APIにユーザの質問と関連するブログ記事を渡して回答を作成。
- 新規投稿のベクトル化を行う夜間バッチ処理
- 新規投稿が追加された際に、その文章をベクトル化しデータベースに保存。あらかじめブログ記事をベクトル化しておくことで類似度の計算を可能にする。
- 文章をベクトル化するPythonプログラム
- 豊富なライブラリを利用してPythonでベクトル化を実装。機械学習やAIに関連する処理は今やPythonに頼らざるを得ません。
- 類似度を判定するMySQLストアドプロシージャ
- 類似度の判定はデータベース内で実行。MySQLを使用しているが、PostgreSQLなどを利用する方がさらに柔軟性が高い。できればPythonプログラムでやる方がよいと思う。
実装ステップ
ここでは、実装の主要なポイントを整理する。
1.要件を決める。
何がしたいのかを明確にする。まずは作業を開始できる程度の粒度で要件定義をする。今回の場合はRAGを使ったAIChatBotを作成する、ということを決めた。必要最低限の機能（MVP）で動くシステムを構築し、優先順位の高い機能から順に開発を進める手法を採用している。
2.システム構成を考える
今回はワードプレスへAI ChatBotを載せるということで画面UIがまずは必要。RAGを使用するため、サーバー側にAPIが必要。画面側から直接ChatGTPのAPIへ通信させようとすると、ChatGPTのAPIキーをユーザに渡さないといけないのでそれはNG。
文章の類似度を計算するMySQLのストアドプロシージャを作成する必要がある。よって最低限の構成は以下の３つ。
•ChatBotの画面UI
•類似度を計算し、ChatGPTのAPIへ問い合わせを行い回答を得るサーバー側プログラム。
•ベクトル化された大量のブログ記事とユーザの質問の類似度を瞬時に判定するためのMySQLのストアドプロシージャ。
3.JavaScriptの実装
- チャットウィンドウのデザイン。
- ユーザーからの入力を受け付け、送信後にChatGPT APIへリクエストを送信。
- 処理中はローディング表示を行い、応答を受け取るとチャット画面に結果を追加。（ChatGPTがほとんど一瞬で作成してくれました。Canvasの機能を使いながら、色々な調整を行って作成。）
4.PHPの実装
- APIエンドポイントを設計。
- ChatGPT APIへのリクエスト処理を実装。
- MySQLのストアドプロシージャでWordPressの投稿情報を取得し、関連投稿を検索。（ベースはChatGPTに作成してもらい、あとはChatGPTのCanvasなどを使いながらデバッグ、調整）
5.文章をベクトル化するPythonのプログラム実装
- PHPから呼び出されて、ベクトルを返すシンプルなPythonのプログラムPythonプログラムはChatGPTが作成してくれたものをそのまま使用。関連するライブラリのインストールや、インストール時に各種エラーが出たためそれの解決方法もChatGPTに質問をしながら解決。サクラサーバーのメモリ2Gの安い契約のためPythonのプログラムをインストールして実行するには色々工夫が必要だった。今後もし、AI関連の機能をサーバーで動かす機会があれば今のサクラサーバーのコースではきついかもしれない、、、
6.MySQLにストアドプロシージャを実装
- MySQLのストアドプロシージャもChatGPTに作ってもらった内容をそのまま使用した。MySQLはDocker上に構築しており、その点でPHPからの接続時やCLIからの接続で一般的な接続方法とは少し異なっていた。
このシステムの効果
主な活用場面
- ブログの読者が記事に関する質問を行える環境を提供。
- 関連する投稿を提示することで読者の満足度を向上。
現時点での課題
- ベクトルの類似度を計算するストアドプロシージャの改良が必要。
- 処理速度の最適化が必要。特にベクトル機能が関わる処理は改善の余地あり。
- 応答の質をさらに向上させるためのスクリプトエンジニアリングが必要。
- 画面UIは訪問者がさらに楽しめるような改善が可能。（問い合わせのたびに表示するGIF画像をランダムに変える等）
まとめと構築した感想
ChatGPTとWordPressを連携したチャットボットの構築プロセスを紹介した。
構築するのに要した時間は10数時間？くらい。nginxの設定でJavaScriptとPHPのエンドポイントのプログラムを通信させるに苦労した。
このシステムは、ブログ訪問者とのインタラクションを深め、読者の疑問を解決する一助となる、また訪問者が飽きず楽しみながら記事を嚙み砕いて理解できると良いと思い作成した。Pythonでベクトル化する処理時間が長いため、サーバースペックが高くない環境では不向き。
とはいえ、パグ蔵という愛らしいキャラクターを持たせることにより、多少とんちんかんな回答で、回答に時間がかかっても許容されやすいようにした。
問い合わせのたびにパグが走るGIFを見ることができてパグ好きの方はきっと許してくれるはず。
ブログ訪問してくれている皆様からの要望があれば、より改善していくと思います。
何かあればお気軽にコメントをくださいね！
今やChatGPTの登場により、個人でもAIChatBotの開発などは簡単にできるようになってきた。あとは発想力によっては個人でも大きく稼げるようなチャンスの時期なのではないだろうか。
多くの社会課題についてもAIの助けを得て解決していけると思う。
ブログのチャットボット程度であれば、RAGである必要はなく、現在表示しているページの内容をAPIに投げればおおむね事足りそう。会話の履歴も３回分程度残しておけば会話はできるという話なので、今k後履歴を残して会話ができるようにするかも。（今回公開しているものは会話の履歴は残していない。）
シンプル化してワードプレスのプラグインとして公開するかもしれません。
以下のgithubにてソースコードをMITライセンスにて公開しています。
https://github.com/high-tech-r/wp_rag
また、現在「GPT-4o audio」という音声でやり取りできるというAPIがすでに公開されているためRAGではないが、会話のコンテキストとなる情報（FAQのページや、ブログ、教育で使っているのであれば勉強中の教科書の該当ページ等。。。）を渡すことで音声ベースで教育、ユーザからの問い合わせ対応などが可能なのではないか。。。
今後、ChatBot[パグ蔵]にも音声ベースでやり取りする機能を追加するかもしれません。
2024/12/21 ブログの内容について音声でChatできる機能を追加しました。ソースコードも公開中です。