RAG(ラグ)を使ってWordPress製のサイトでチャットボットを作ってみた

まずは完成物

下記ホームページの右下にある💬をクリックするとチャットボットのダイアログが表示される

株式会社夢現堂 | 世界中に感動を与えるゲームを
夢現堂はソーシャルゲームの開発・保守・運用を中心に行っている、まだまだ新しい会社。いつも『みんなの感情を揺さぶるコンテンツを作りたい!!』という強い想いを持って、ゲームの開発を行っています。

技術要件

  • RAG(ラグ)
    • 質問と対象ドキュメントのベクトル化をして類似度をつけ、もっとも類似度の高い内容をプロンプトにしてOpenAIへ渡して、回答をレスポンスとして受け取る
    • 言語:python3
    • OpenAI
  • ライブラリ
    • Django
  • WordPress
    • css
    • javascript
    • html
  • Git(Github)
  • VPS
    • Djangoプロジェクトのデプロイ

概要

チャットボットで「質問」を入力して、その質問が「RAG」で処理されて、いい感じの答えが画面上に表示される。

チャットボットの画面の構成はhtml、CSS、javascriptで作成して、入力した「質問」はAjaxを使って送信し、Wordpressのfunctions.phpに定義した関数に渡す。その関数では、Djangoで作ったAPI(ラグの処理)を叩いて、処理結果(回答)をAjaxに通じて返却されて、画面上に表示される

予めRAG(ラグ)の処理をDjangoで作成し、VPS(自分はxserverVPS)にデプロイしておく。

WordPressでの実装

見た目の実装はHTML + CSS

CSSはassets/css/style.cssを編集する

動きの部分は(質問の入力など)javascriptが担当。「質問」を入力してEnterを押したらAjaxを通じてfunctions.phpで用意した関数へ送信。

functions.phpで用意した関数の中でVPSとの通信(APIを叩く)を行う。通信でレスポンスが返ってきたらjson_decodeしてAjaxへ返す。通信時間が長くなると、「cURL error 28: Resolving timed out」エラーが出る場合はある。そんな時はTime Out時間の調整を行う。参考になったサイト

successで返ってきた回答をまたjavascriptで画面上に表示させる

ローカルPC上でDjangoによるRAGプログラムを作成

詳細は省きますが、作成したプロジェクトをGithubへあげておく

VPSを借りて、作ったRAGプログラムをデプロイする

XServerVPSなどのVPSを借りて、Ubuntuなどのサーバーを立てて、sshでログインして、パッケージマネージャーの更新、Django、gunicorn、nginxなど必要なものをインストールして、仮想環境を作って、gunicorn service、gunicorn socket、nginx、それぞれの設定をして、最後にブラウザ上でAPIが動くかを試す

コメント

タイトルとURLをコピーしました