<Azure> QnA Maker+Bot ServiceでAIチャットボットを作る

#はじめに
AzureのCognitive Servicesに興味を持ち、本当にノーコーディングでAPIやチャットボットが簡単に作れるか、実際に手を動かして検証してみようと思います。

####作るもの
※雑誌の定期購読社向けのQAチャットボットサービス
![img0.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/f056c6a6-cae1-a30b-7384-ef3867a1e969.jpeg)
####参考資料
・書籍:「さわってわかるクラウドAI Microsoft Cognitive Services 実践ガイド」
・Qiita：https://qiita.com/annie/items/1b4a232c2614d05baeda

####対象者読者
・「Azure Cognitive Servicesを何でも良いので触れてみたい」
・「チャットボットサービスを作ってみたい」

ひとまず動くものを作ることを目的としているので、こまかな用語の説明は割愛しております。完成したものに触れ、そこから深堀りできればと思います。

#Cognitive Servicesとは
>Azure Cognitive Services は、開発者が直接的な人工知能 (AI) またはデータ サイエンスのスキルや知識がなくてもコグニティブかつインテリジェントなアプリケーションを構築できる、REST API シリーズとクライアント ライブラリ SDK を含むクラウド サービスです。 Azure Cognitive Services によって、開発者は簡単にアプリケーションに Cognitive 機能を追加できます。 Azure Cognitive Services の目標は、開発者が、聞いたり、話したり、理解したり、推論し始めたりできるアプリケーションの作成を支援することです。 Azure Cognitive Services 内のサービス カタログは、5 つの主要な柱として、視覚、音声、言語、Web 検索、および意思決定に分類できます。
https://docs.microsoft.com/ja-jp/azure/cognitive-services/welcome#:~:text=Azure%20Cognitive%20Services%20%E3%81%AF%E3%80%81%E9%96%8B%E7%99%BA,%E3%80%81SDK%E3%80%81%E3%81%8A%E3%82%88%E3%81%B3%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%99%E3%80%82
を参照

#事前準備
・Microsoftのアカウントを持っていること。
・Azureアカウントの基本情報の登録が済んでいること。　※要クレジットカード登録
（Azureアカウントの作成は無料版(30日期限)あり。＋無料試用版で使える22,500JPYのクレジット付き）

※事前に上記２点の登録は済ませておいてください。

#目次
１．knowledge base + Cognitive Services QnAMakerの作成
２．QnAMakerを利用するAzure Web App Botを作成
３．チャットボットのテスト、APIの確認

#１．knowledge base + Cognitive Services QnAMakerの作成
Azureのポータル画面が表示できる状態で、まずは、Knowledge baseの登録から進めていきます。
###1-1. Knowledge baseとは
パブリックURLとファイルで取り込まれる質問と回答のペアで構成されるサービス。詳細なフォーマットは以下のドキュメントを参照
https://docs.microsoft.com/ja-jp/azure/cognitive-services/qnamaker/concepts/knowledge-base#:~:text=%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%20%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AF%E3%80%81%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%AF%20URL,by%20public%20URLs%20and%20files.
###1-2. QnAMakerとは
質問文を渡したとき、それに対応する回答を返すAPIサービスを作る機能です。詳細は以下を参照。
https://azure.microsoft.com/ja-jp/services/cognitive-services/qna-maker/

###1-3. knowledge baseへのアクセス
下記にアクセス。
https://www.qnamaker.ai/ 
![img3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/981ca5ea-368c-e253-6b79-61f5487f934b.jpeg)
「Get Started」をクリック。
![img1-1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/0710988a-ee69-13aa-478e-253162c261dc.jpeg)
「Create Knowledge base」をクリック。
![img4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/3912c5b3-c390-d471-63d5-3badfaddfbec.jpeg)
###1-4. knowledge baseの作成（STEP1～5）
####■STEP1の設定
QnAMakerの作成。「Create a QnA service」をクリックし、
Cognitive Services QnAMakerでQ&A回答エンジンを作成する。
![img1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/0b4ee722-8785-a548-28b9-83b6749b5ef5.jpeg)
・プロジェクトの詳細
サブスクリプション：Azure サブスクリプション　※無料プランの場合は「Free Trial」
リソースグループ：任意の名前で新規作成
名前：任意
価格レベル：任意　※無料プランの場合は無料のものを選択
・Azure Searchの詳細-データ
Azure Searchの場所：任意
価格レベル：任意　※無料プランの場合は無料のものを選択

・App Serviceの詳細-ランタイム用
アプリ名：任意
Webサイトの場所：Azure Searchの場所と同じ

※App Insightsは無効とします。

「確認および作成」ボタンをクリックし、確認画面で項目を確認後、「作成」ボタンをクリック。
デプロイが進行し、暫く待ち、完了が表示されればOK.
![img1-2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/e6861c51-1303-6b62-010c-c94441d530da.jpeg)

####■STEP2の設定
![img5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/f26ed3ab-cc95-8713-cc85-af2cb4f56bc6.jpeg)
Microsoft Azure Directory ID：既定のディレクトリ
Azure subscription name：Azure サブスクリプション　※無料プランの場合は「Free Trial」
Azure QnA service：作成したQnA名を選択
Language：Japanese　

####■STEP3～4の設定
![img6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/9ba12161-b55d-31f1-09f0-d2247587a1c3.jpeg)
![img6_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/b05f421c-14ee-4cc2-fbb5-5035933f75b7.jpeg)

Name：任意　※STEP3
Chit-chat：任意　※STEP4　ナレッジベースの話し方任意のものを設定　今回はNoneを選択
その他は必須項目でないのでデフォルト設定　

####■STEP5の設定
設定無し。

「Create your BK」をクリックすると、作成したKnowledge base画面が表示されます。

#２．QnAMakerを利用するAzure Web App Botを作成
###2-1. Azure Bot Serviceとは
Q&A ボットから独自のブランドの仮想アシスタントまで、あらゆる種類のボットをビルドして、ユーザーを必要な答えにすばやく結び付けるサービス。詳細は以下を参照。
https://azure.microsoft.com/ja-jp/services/bot-service/
###2-2. Azure Bot Serviceの作成
Azureのポータル画面での検索窓に「Bot Service」と入力し、Bot Serviceを選択。
「Web App Bot」→ 「作成」をクリック。
![img2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/d4bbf904-d379-aef0-dc67-315183bee123.jpeg)

ボットハンドル：任意の名前
サブスクリプション：Azure サブスクリプション　※無料プランの場合は「Free Trial」
リソースグループ：QnAMaker作成時に作ったグループ
場所：QnAMakerと同じリージョン　※自動入力
価格レベル：任意　※無料プランの場合はF0（10K premiam メッセージ）を選択
アプリ名：自動入力

※App Insightsは無効とします。

「作成」ボタンをクリックして、Bot Serviceの作成は完了。

#３．チャットボットのテスト、APIの確認
###3-1. knowledge baseへの再アクセス
もう一度、右のリンクにアクセス。https://www.qnamaker.ai/
![img7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/2e5fa958-bb55-f483-b2b7-937cbaf5b49e.jpeg)
画面上部、「My Knowledge base」をクリックし、作成したknowledge base nameをクリック。
###3-2. 任意のQ&A作成
試しにQ&Aを作成してみます。
「Add QnA pair」をクリックし、QAを作成し、「Save and train」をクリック。
![img1-6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/d2a418de-9c4e-1435-5890-2a3c0d138698.jpeg)
続いて、「Test」をクリックすると、チャットボットの感覚でやり取りができます。
![img1-7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/ff3c17fc-34b4-c0d1-4be6-4869c412da04.jpeg)

※色々なワードを登録して、実際にお試しください。
###3-3. 雑誌購読者向けQ&Aデータの登録
今回取り込む雑誌購読者向けQ&Aデータがあるので以下をダウンロードし、読み込ませます。
・http://itpro.nikkeibp.co.jp/data/books/2017/SampleData.zip
※SampleDataフォルダ内にある「Cognitive Business FAQ Data.docx」を開いて内容を確認。
![img1-5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/9c39af81-2e95-5832-658f-d70a7f5cfc06.jpeg)
取り込み方法は、タブ：Settingsの中央「Manage Knowledge base」→「Add file」→「Cognitive Business FAQ Data.docx」を選択し、「Save and train」をクリック。
![img1-8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/3c9739d0-9919-1df0-3054-3c9a0abc561e.jpeg)
###3-4. インポートしたQ&Aデータの確認
Q&Aを取り込んだデータ完了のイメージ（タブ：Editeをクリックして表示）。
![img4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/babb42b4-9172-7dc2-d64f-d12644bfd231.jpeg)
画面右上の「Test」を実行すると以下のようにテスト実行できます。
![img5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/700bc4ca-0850-0d71-e397-20b2ac6fbba3.jpeg)
※回答に変更がある場合はここで修正します。
###3-5. Q&AデータをAPI化
APIが作成できているか確認↓
画面上部のタブ「PULISH」をクリックし、更にボタン「Publish」をクリック。
![img5-1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/0c603ad3-6396-50c9-e29b-a7f6e04b4eff.jpeg)「Publish」ボタンをクリックすると、URLが自動生成されます。
![img6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/4e773fec-7d2b-caa0-1a76-d91da075bdde.jpeg)
URL窓には先程作成したPOSTのURLを入力。（REST APIツールを使用）
REST api ツールでPOST送信。しっかり回答が帰ってきます。
![img8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/4221c13f-3694-ece5-df1e-7e6853097d96.jpeg)
WEBなどに埋め込む為のHTMLも作成できますので、先程テストしたようなチャットボットを表示することができます。
###3-6. ボットの埋め込みコード生成

ポータル画面からWeb アプリボットを選択し、作成したボットサービスを表示します。
サイドバーに「チャネル」があるのでそれを表示。　※実行中のWeb Chatがあるのが確認できます。
![img1-9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/7332969f-656f-822b-be70-8ab3698b340b.jpeg)
「ボットの埋め込みコードを取得」のリンクをクリックし、「Web Chat の構成ページを開くには、ここをクリックします」のリンクをクリック。
![img1-10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367782/fb0004dc-86bb-cf32-0e26-b29886e3268e.jpeg)
表示したページの中央に、埋め込みコードが表示されていますので、ご自分のシークレットキーをはりつければ、埋め込みコードの完成です。

#まとめ＆ディスカッション
手順は多いですが、確かにノーコーディングでボットのAPIを作成することができました。
この辺の登録作業はクラウドサービスを使う上では必ず出てくるようです。もう少しこのサービスの理解を深め、どのような事例で使えるか。拡張性はあるかをディスカッションし、深堀りしていきましょう。

※ディスカッション