こんにちは、GMOメイクショップのコアグループエンジニア、大森です！

みなさん、AI触っていますか。 日々、リリースされる新技術、新サービスがあり、積極的に情報収集していても今ひとつ業務に活かしきれずに歯がゆい思いをしています。

今日はChatGPTsを利用した FAQボット の作成方法を紹介します。

FAQボットの作成自体は簡単で、2ステップ で作ることが出来ます。

• 1. gpt-crawlerというオープンソースのパッケージを利用してFAQデータを集める
• 2. ChatGPTのコンソール画面からGPTsを作成する

※2023年12月20日時点では GPTsを作成するために、Chat GPT Plus(有料プラン)のサブスクリプションが必要です。

• FAQデータ収集(gpt-crawler使用)
• • 準備
  • config設定
  • gpt-crawler実行
• ChatGPTsを作成する
• • ChatGPTsに質問する
• GPTsを改善する
• • コンフィグファイルを変更して再度クロールする
  • リポジトリーをforkしてコードを変更して再度クロールする
• まとめ

試しに makeshop のFAQボットを作成してみたいと思います。

FAQデータ収集(gpt-crawler使用)

まず初めに、FAQボットに makeshop の知識を与えるために、FAQの情報を収集します。

情報の収集には gpt-crawler を使います。

github.com

こちらのツールの利用はとても簡単です😁

url に検索を開始するURLを設定します。

sitemap.xml をURLに指定した場合、sitemapに記載されている全URLを対象にすることが出来ます。

match には サブリンクを設定します。ページをクロールする際に、そのページに含まれているリンクを続けてクロールするのですが、その対象となるURLを設定します。

maxPagesToCrawl にはページをクロールする最大件数を設定します。

gpt-crawler実行

gpt-crawler を起動します。以下のコマンドを実行して、クロールを開始します。このプロセスでは、FAQデータを集めてJSONファイルに保存します。

クロールが完了するとコンソールに Wrote $COUNT items to $FILE_NAME と表示されて JSONファイルが作成されます。

クロール途中で received 403 status code. と表示されている箇所がありますが、今の段階では気にしないでおきます。

ファイルサイズは 4580KB でした。

クロール結果のJSONファイルを確認します。

クロール処理は成功したようです🎉

FAQのコンテンツ一つ分を抽出すると以下の様なデータになっていました。

実際のFAQサイトと比較しても、画面に表示されている情報は取得できてそうです。

ChatGPTsを作成する

続いて、FAQボットの作成を行います。

ChatGPT の管理コンソールから GPTの作成画面に入ります。

Instructions にJSONファイルを利用して回答するように指示を設定します。

Knowledge にクロールして作成したJSONファイルをアップロードします。

ChatGPTsに質問する

作成したGPTsに質問してみます。

makeshop では管理画面から Google Analytics が設定できるので、こちらの設定方法を確認します。

「私の知識を検索中」と表示されており、アップロードしたJSONファイルを検索して回答を作成してくれていそうです👍🏻

　　　　　　　　　　　　　　　　　　　　　GPTsの回答 1

無事に回答することが出来ました。回答内容も問題ありません。このレベルで回答してくれるなら言うことありません🙆‍♂️

しかし、もう少し難しい問題をその後に続けてみたところ今ひとつ回答の精度はよくありませんでした。

特に 回答が見つからない、わからない場合にエラーになるケースが目立ちました。

私が愛した AI の力はこんなものでは無いと思うので、ここからはチャットボットの精度を 改善 していきたいと思います。

GPTsを改善する

コンフィグファイルを変更して再度クロールする

回答内容にメインの回答文以外の共通的な要素(バナー、サイドナビの情報)が含まれているため、main-content のIDが設定されているタグの情報のみを抽出するように selector を設定します。

また、HTML以外のコンテンツは取得する必要はないので、 resourceExlusions を設定して不要な拡張子の情報へはアクセスしないようにします。

この設定を入れることで、先程 403 エラーとなっていた箇所が解消されるようになります。

コンフィグファイルの変更点

上記の変更を加えて、再度クロールします。

変更後は JSONファイルのサイズが 2560KB まで削減できました。

4580KB -> 2560KB ですので、半分近くまでファイルを縮小することが出来ました。

JSONの中身もメインコンテンツ(html)部分がグッとスッキリしました。

GPTsにアップロードしているファイルを削除して、今回クロールして生成したファイルをアップロードします。

前回エラーとなった質問を投げてみます。

はじめに作成したGPTsではエラーとなった質問についても、無事に回答することが出来ました。

クロールする際に不要な部分を削った事で、ファイルの内容がよりFAQに関係する内容となったことで、回答精度と回答速度が向上したようです。

ただし、その後、思いつくがままに質問をしていたら、またエラーとなる問題に遭遇しました。

リポジトリーをforkしてコードを変更して再度クロールする

HTMLタグのIDにmain-contentが設定してある範囲のテキストを取得していますが、 main-contentの中にも実際の回答部分は .article-body のクラスの中なので、ここに限定した情報だけを取得できるようにしたいです。

ただ、クロールを開始するページには .article-body のクラスが含まれていないため、単純に selector で絞り込むとそもそもクロール自体が上手く行われませんでした。

※ selector で絞り込んだ範囲に存在する リンクを元に再帰的に検索するため。

そこで、以下の改修を行いました。

• 検索を開始するURLを複数設定できるようにする
• selectorで絞り込む範囲と 実際にテキストを抽出する selectorを分けられるようする

また、標準のままだと重複するURLについてもクロールされていたため、URLの重複は除外するようにしました。

他にも エスケープされた URLを decodeURIComponent で日本語として識別できる形にしたり、タイトルに共通して付与される不要な文字を除去するようにしたり、メイクショップのFAQサイトから取得するデータを最適化するための処理を組み込みました。

github.com

上記の変更を加えてクロールしたところ、ファイルサイズは 708KB まで削減することが出来ました。

4580KB -> 2560KB -> 708KB ですので、当初ファイルの20%以下まで圧縮しています。

初めに抽出したときと比べるとJSONファイルもだいぶスッキリして読みやすいものになりました。

2回目の時と同様に、プロンプトは変更しないでGPTsのJSONファイルを差し替えます。

2回目のGPTsでエラーとなった質問を行います。

無事に回答することが出来るようになりました🎉

その後もしばらく質問を続けてみましたが、「私の知識に含まれていないという」という回答はありましたが、エラーになることはありませんでした。

やはり、ファイルサイズが大きいと検索と回答作成に時間が掛かりタイムアウトエラーになっているのではと思います。

まとめ

GPTsは 現状では自社サービスに組み込んで表示させるような使い方ができないので、FAQボットも 社内利用しか出来ないですが、Open AI API などを使って自前で独自DBを用いたサービスを作る場合、データクレンジングはやはり重要になると感じました。

技術は常に進化していますが、それを追いかけることで、私たちはより良いサービスを提供できるようになると思います。

「常に変化し続ける」をモットーに、これからも新しいものを追い続けていきたいです。

Enjoy your AI life.

最後までお読みいただきありがとうございました。

◆ 他のBlogはこちらから⇒ https://tech.makeshop.co.jp/ ◆

ご応募お待ちしています！