Amazon LexとAmazon AlexaでQ&Aボットを作成する #reinvent

本記事は、AIM302-R - [REPEAT] Create a Q&A bot with Amazon Lex and Amazon Alexaのワークショップレポートになります。

音声アシスタント特集

#イベントレポート

#Amazon Alexa

#Amazon Lex

#AWS

にゃー

2019.12.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、中村です。12/1 - 12/6まで開催されているAWS re:Invent 2019に参加するためラスベガスに来ています。本記事は、AIM302-R - [REPEAT] Create a Q&A bot with Amazon Lex and Amazon Alexaのワークショップレポートになります。

概要

最近の調査では、44%の顧客が人間とのサポートよりチャットボットによる会話することを望んでいます。本ワークショップでは、2つのオープンソースプロジェクトであるQnABotとLex-Web-UIを使いQ&Aボットのデプロイの仕方をお見せします。Amazon Lex, Amazon AlexaそしてElasticsearch Serviceを使うことで迅速に会話チャットボットを提供できます。このソリューションはAmazon Lambda、Amazon Connectとの統合でより高められます。

A recent poll showed that 44 percent of customers would rather talk to a chatbot than to a human for customer support. In this workshop, we show you how to deploy a question-and-answer bot using two open-source projects: QnABot and Lex-Web-UI. You get started quickly using Amazon Lex, Amazon Alexa, and Amazon Elasticsearch Service (Amazon ES) to provide a conversational chatbot interface. You enhance this solution using AWS Lambda and integrate it with Amazon Connect.

Workshop

Full workshop material

https://github.com/aws-samples/aws-ai-qna-bot/blob/master/workshops/reinvent2019/readme.md

Information about QnA Bot

https://www.amazon.com/qnabot

Demo SLU web chat

Demo Alexa with Fire Tv

Overview

A room with many doors（複数インターフェース/データは統合）
- Amazon Alexa
- Amazon Connect
- Web chat
- SMS and so on...
Content Designer
- Cognitoベースログイン
- 質問/回答登録CMS
- データのエクスポート
- 簡単にボットの管理を行う

Architecture

マネージドサービスで構成されています。クライアント（Web chat, 管理画面）は、cognitoを使って認証しAPI Gateway・S3・Lambdaを使ってホスティングしています。

https://github.com/aws-samples/aws-ai-qna-bot/blob/master/workshops/reinvent2019/images/00-arch-b.png

Comprehendによるセンチメント分析やKinesis Data FirehoseとElasticsearch Serviceを使ったユーザーの利用データの収集も可能です。

Step1

まずは、CloudformationでベースとなるAWSリソースを作成していきます。AWSアカウントのリージョンをN-Virginiaに設定しCloudformation template を起動します。入力する項目は有効なメールアドレスのみです。作成には30分ほどかかります。

Cloud9を作成します。このワークショップとわかるような名称と説明をつけて他の設定はそのままでOKです。作成が完了したら、先ほど作成したcognitoのユーザープールを確認します。

$ aws cognito-idp list-user-pools --max-results 5

{
    "UserPools": [
        {
            "CreationDate": 1575321738.42, 
            "LastModifiedDate": 1575321738.42, 
            "LambdaConfig": {
                "CustomMessage": "arn:aws:lambda:us-east-1:xxxxxx:function:xxxxxxxx", 
                "PreSignUp": "arn:aws:lambda:us-east-1:xxxxxx:function:xxxxxxxx"
            }, 
            "Id": "xxxxxx", //メモしておく。
            "Name": "UserPool-QnABotWorkshop"
        }
    ]
}

ユーザープールのIDをメモしたらContent DesignerのAdminユーザーパスワードを変更します。

$ aws cognito-idp admin-set-user-password --user-pool-id [YourUserPoolIdFromJson] --username Admin --password MyPassword2019_

これでAdminのパスワードが、MyPassword2019_になりました。

Step2

Emailで仮パスワードが送信されます。スタックが作成完了になっていればURLへアクセスするとログイン画面が表示されますので先ほどのID, パスワードでログインします。

Hello Admin,

Welcome to QnABot! Your temporary password is:

ee,9Va1a

When the CloudFormation stack is COMPLETE, use the link below to log in to QnABot Content Designer, set your permanent password, and start building your bot!

https:/xxxxxxx.execute-api.us-east-1.amazonaws.com/prod/pages/designer

Good luck!

QnABot (www.amazon.com/qnabot)

ログインが正常に完了するとこのような画面になると思います。

手順に沿って、ADDをクリックしてQ&Aを追加していきます。

登録が完了したら、メニュー内のQnABot clientを開いてテストしてみてください。マイクがOnの場合は音声入力での入力も可能です。

動くことが確認できたら、他のQ&Aも先ほどと同様に追加していきます。追加が完了したらQUESTIONSの隣にあるTESTタブをクリックして追加した質問を入力してください。このページでは入力したテキストに対して登録してある質問のどれが一番適切かというのをScoreから確認することができます。（スコアは大きいほど質問の回答に適しているとお考えください。）

一部の質問では、Amazon LexのIntentに一致しないことがあります。"Sorry, I did not understand that"が通常のレスポンスになりますが、このようなエラーが発生した場合はContent Designerを使ってLexボットの再構築が必要になります。これによりLexは質問を正しく理解し、QnABotを呼び出すことができます。質問右側のメニューからLEX BUILDをクリックしてLexを再構成してください。別のエラーでは、"You stumped me! Sadly I don't know how to answer your question."があります。これはQnABotがもつElasticserach Serviceのナレッジベースで一致できる回答を見つけられなかったためです。このような場合はQ&Aの追加をする必要があります。

新しいバージョンのQnABotとLex-Web-Uiは、Thumbs Up（いいね）、Thumbs down（よくないね）、およびHelpのデフォルト実装をサポートしています。これらの質問はDesigner UIインポートメニュー内のQnABotにロードされます。"サンプル/拡張機能"をクリックし、QnaUttility横にLOADがあるのでクリックして起動します。質問リストに追加された"いいね"、"よくないね"、および"ヘルプ"を処理するいくつかの新しい質問が表示/追加されます。ここまででStep2は終了です。先に構築したCloud9を利用します。

Step3

さてLex-Web-Uiのデプロイを行います。仮想のSolar Associationサイトを作成し、Amazon S3へシンプルなページをデプロイします。まずはHTMLをgithubからクローンします。

$ git clone https://github.com/aws-samples/aws-ai-qna-bot.git

クローンが終わったら、下記コマンドを実行してCloudformationによるS3構築、ファイルのデプロイを行います。

$ cd ~/environment/aws-ai-qna-bot/workshops/reinvent2019/scripts
 ./setupwebsite.sh

成功するとアウトプットはこのようになります。

Waiting for changeset to be created..
 Waiting for stack create/update to complete
 Successfully created/updated stack - qnabotworkshop-website

 S3 Bucket: 
 qnabotworkshop-website-s3bucket-d83f7qqz91u5

 Website URI (Use this as the PARENT ORIGIN): 
 https://qnabotworkshop-website-s3bucket-d83f7qqz91u5.s3.amazonaws.com

 Website URL:
 https://dev.classmethod.jp/wp-content/uploads/2019/01/httpstls.oguri_.classmethod.infoindex.html-2019-01-25-06-37-20.png

 upload: ../web/index.html to s3://qnabotworkshop-website-s3bucket-d83f7qqz91u5/index.html
 upload: ../web/solar.png to s3://qnabotworkshop-website-s3bucket-d83f7qqz91u5/solar.png   upload: ../web/solar.png to s3://qnabotworkshop-website-s3bucket-1aty4rnkfi6x0/solar.png

Note the Website URI. You'll use this as input to the WebAppParentOrigin when

Website URIを後ほど利用するのでメモしておいてください。Output内のこちらです。これは、Lex-Web-UiのWebAppParentOriginの設定で利用します。

https://qnabotworkshop-website-s3bucket-d83f7qqz91u5.s3.amazonaws.com

下記コマンドを実行して、Step1で作成したLex bot名を取得します。Step1で利用したCloudformationの出力にも記載されています。

$ aws lex-models get-bots

確認が完了したら、Lex-Web-Uiをデプロイします。 Lex-Web-Uiのスタックを起動します。

様々なパラメータがありますが期待されるものはこちらです。

Parameter name	Description
Stack name	lex-web-ui-qnabot-workshop
CodeBuildName	lex-web-ui-qnabot-workshop
BotName	作成したLex bot名
WebAppParentOrigin	先ほどメモしたWebsite URI
WebAppConfBotInitialText	You can ask me for information on the Sun. Just type questions for me or click on the mic and ask me.
WebAppConfBotInitialSpeech	Ask me questions about the Sun
WebAppConfToolbarTitle	Sun Info

パラメータを入力し画面の通り進めていきます。スタックの作成が完了すると下記が出力されます。

WebAppUrl（チャットができる画面）
SnippetUrl（HTMLに反映するスニペットコード）

SnippetUrlをクリックして、コードをコピーします。

    <script src="[YOUR-HOSTNAME]/lex-web-ui-loader.min.js"></script>
    <script>
      var loaderOpts = {
        baseUrl: 'https://lex-web-ui-qna-workshop-codebuilddep-webappbucket-6x7u4dwjv673.s3.amazonaws.com/'
      };
      var loader = new ChatBotUiLoader.IframeLoader(loaderOpts);
      loader.load()
        .catch(function (error) { console.error(error); });
    </script>

Cloud9でHTMLを開いて、SnippetUrlのコードを反映します。

QnaBotWorkshop/aws-ai-qna-bot/workshops/reinvent2019/web/index.html

反映が完了したら、デプロイ用のプログラムを実行します。

$ cd ~/environment/aws-ai-qna-bot/workshops/reinvent2019/scripts
$ ./setupwebsite.sh

デプロイが完了後、qnabotworkshop-websiteスタックのS3BucketSecureURLでアクセスしてみましょう。 https://dev.classmethod.jp/wp-content/uploads/2019/01/httpstls.oguri_.classmethod.infoindex.html-2019-01-25-06-37-20.png

これでチャットのテストが可能になりました！先ほどContent Designerで登録した質問が確認できます。チャネルの追加については後述の記事でとりあげます。

まとめ

QnABotは簡単に導入ができ、コンテンツ管理者への画面を提供できるので簡単に修正やデプロイが行えます。現在は都度エンジニアが実行しているのでこの簡易的に管理できるのは強みと言えます。またセルフサーブなのでElasticsearch Serviceにためたデータを元に改善やLambda hooksによる外部API連携など拡張性も担保されているのですぐ取り入れられそうです。

またCloud9を初めて使ったのですが、ネットワークが安定していればこのようなワークショップにて導入すると機種依存に悩まされることなく実施できるなぁーと思いました。