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

2018年10月30日2019年11月3日Azure Bot Service, Azure Cognitive Services, Microsoft Azure, QnA Maker

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

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

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

既存の FAQ コンテンツから簡単に FAQ Bot を作成できると定評の AI サービス「QnA Maker」を使って、 ...

https://devlog.arksystems.co.jp/2018/08/29/5606/

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

簡単に FAQ Bot が作成できると定評の AI サービスである QnA Maker で作成した FAQ データベースに質 ...

https://devlog.arksystems.co.jp/2018/09/11/5654/

Contents

1. QnA Maker の API を公開する
- 1.1. 作成済みの FAQ データベースを選ぶ
- 1.2. API を公開する
2. Azure Bot Service と連携する
3. Web サイトへの埋め込み
- 3.1. 準備
- 3.2. Web ページの作成と表示
4. まとめ

QnA Maker の API を公開する

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

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

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

QnA Maker

QnA Maker is a no code way to build bots. QnA Maker extracts questions and answers from FAQ page ...

https://www.qnamaker.ai/

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

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

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

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

API を公開する

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

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

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

Azure Bot Service と連携する

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

Bot Service を作成する

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

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

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

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

として進めます。

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

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

QnA Maker に接続する

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

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

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

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

設定する項目は以下の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>"}

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

これで繋がる。はずです（笑）

テストをする

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

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

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

Web サイトへの埋め込み

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

準備

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

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

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

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>