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

技術要件
- 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が動くかを試す
コメント