【QnA Maker + Azure Bot Service】AIサービスを利用して簡単にFAQ Botを作成

Azure Bot Service, Azure Cognitive Services, Microsoft Azure, QnA Maker

こんにちは。ソリューション開発部 情報発信分科会の飯出(いいで)です。

今回は、QnA Maker で作成した FAQ データベースを「Azure Bot Service」を使って Web チャットとして公開してみます。QnA Maker を使った FAQ データベースの作成方法については、前回までの記事をご覧ください。

QnA Maker の API を公開する

FAQ データベースの内容を Web チャットに接続するには、まず QnA Maker の API を外部に公開します。

作成済みの FAQ データベースを選ぶ

まず、QnA Maker のコンソール画面を開きましょう。また URL を忘れた?こちらです。

[My knowledge bases] をクリックして、サービスの一覧画面を開きます。

[My knowledge bases] をクリックして、サービスの一覧画面を開きます。

サービスの一覧画面にて、前回までの記事で作成した FAQ データベース「TrialFAQ」をクリックして開きます。

サービスの一覧画面にて、前回の記事で作成した FAQ データベースの名前をクリックします。

前回までに作成した FAQ データベースの中身を見ることができました。

質問と回答が全く漏れなく反映されています。

API を公開する

QnA Maker で作成した FAQ データベースを、HTTP エンドポイントとして公開します。画面上部のメニューにある [PUBLISH] をクリックします。

PUBLISHをクリックします。

以下のような画面表示となります。ここで [Publish] をクリックすると、 FAQ データベースを公開できます。

Publish をクリックするとFAQデータベースを公開することができます。

HTTP リクエストのサンプルが表示されれば成功です!ここに表示された内容は、別途テキストエディタなどに保存しておいてください。あとで使います。

HTTPリクエストのサンプルが表示されれば成功です。

Azure Bot Service と連携する

今回は Azure Bot Service の Web App Bot を使って、QnA Maker と連携します。

Bot Service を作成する

Azure 上に Bot Service 用の領域を作成します。Azure Portal から [リソースの作成] をクリックし、[すべて表示] をクリックします。

Azure上にBot Service用の領域を作成します。

その後、[AI + Machine Leaning] → [Web App Bot] の順番でクリックします。[Web App Bot] をクリックした後に、画面右側が更に展開し、 [作成] ボタンが表示されたらクリックしてください。

Azure上にBot Service用の領域を作成します。

続いて、Web アプリ ボットの各項目を入力・選択していきます。

  • ボット名: TrialFAQ-Bot
  • ボット テンプレート: Question and Answer (C#)

として進めます。

場所や価格レベルについては、利用状況にあった項目を選択してください。入力し終わったら、[作成]ボタンをクリックしましょう。

Azure上にBot Service用の領域を作成します。

[作成] ボタンをクリックした後、デプロイが完了するまで少々時間が掛かります。

QnA Maker に接続する

たった今作成した Azure Web App と FAQ データベースを格納している QnA Maker をここで接続します。

[リソースグループ] をクリックし、表示された一覧から [TrialFAQ-Bot] をクリックします。

Azure Web App と QnA Maker を接続する。

もう一度、[TrialFAQ-Bot] をクリック。

Azure Web App と QnA Maker を接続する。

[アプリケーション設定] をクリック。

Azure Web App と QnA Maker を接続する。

設定する項目は以下の3つです。画面を下方向にスクロールすると、当該項目が見えてきます。

  • QnAAuthKey
  • QnAEndpointHostName
  • QnAKnowledgebaseId

QnA Maker を公開した際に表示された HTTP エンドポイントの Sample HTTP request 欄を見ながら設定します。

POST /knowledgebases/{QnAKnowledgebaseId}/generateAnswer
Host: {QnAEndpointHostName}
Authorization: EndpointKey {QnAAuthKey}
Content-Type: application/json
{"question":"<Your question>"}

設定したら、[保存] してください。

Azure Web App と QnA Maker を接続する。

これで繋がる。はずです(笑)

テストをする

[Web チャットでテスト] をクリックすると、以下の画面が表示されます。ここから、動作確認ができます。

作成したチャットのテストをします。

では、前回の記事で質問として用いた「事業内容は?」と、質問してみます。

Webチャットのテストをします。

ちゃんと回答していますね!

Web サイトへの埋め込み

作成した Web チャットを、実際の Web サイトに埋め込んでみます。

準備

[チャンネル] → [ボットの埋め込みコードを取得] の順にクリックします。

作成した Web チャットを、実際の Web サイトに埋め込む。

[Web Chat の構成ページを開くには、ここをクリックします >] をクリック。

作成した Web チャットを、実際の Web サイトに埋め込む。

シークレットキーと埋め込みコードを取得します。[表示] をクリックしてシークレットキーを表示し、コピーしてください。埋め込みコードも一緒にコピーしましょう。

作成した Web チャットを、実際の Web サイトに埋め込む。

Web ページの作成と表示

今回はシンプルな Web ページを作成し、その中で Web チャットを動かします。埋め込みコードにシークレットキーを反映したタグを、HTML 内に含めます。幅、高さの調整はお好みでどうぞ。

HTML サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Web チャットのサンプル</title>
</head>
<body>
    <iframe width="600px" height="800px" src='https://webchat.botframework.com/embed/TrialFAQ-Bot?s=シークレットを入力'></iframe>
</body>
</html>

完成しました!

完成したWebチャット画面

まとめ

ここまで早い人で30分、時間が掛かっても1時間あればたどり着けるのではないでしょうか。

事前に FAQ サイトなどが準備できていれば、ノンプログラミングかつ簡単に AI サービスを使ったチャット Bot が作成できてしまいます。今回は紹介しませんが、Skype や Slack を使った形でも同じくらいの手間で構築できると思います。

実運用に耐える FAQ Bot に仕上げるには、ここからが本番です。質問に対する回答の精度向上、チャット上での質問の選択肢提供やデザインの洗練化など、まだまだやる事がたくさんありますね。

機会がありましたら、今後はこのような内容にも触れていきたいと思います。ありがとうございました。

  • 株式会社アークシステムの来訪管理・会議室予約システム BRoomHubs
  • 低コスト・短納期で提供するまるごとおまかせZabbix