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

2018年10月30日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