この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
コンバンハ、千葉(幸)です。
Amazon Lex で作成したボットをウェブサイトと統合する手段について、AWS ドキュメントでいくつか取り上げられています。
一番上のリンクで取り上げられているのは以下 AWS ブログで、そこでは aws-samples/aws-lex-web-ui で提供されている CloudFormation テンプレートをデプロイしています。
どういった使い心地か、最低限 Web UI を試すところまでやってみました。
aws-samples/aws-lex-web-ui で作成される構成
CloudFormation テンプレートによってデプロイされる構成は以下の通りです。(冒頭の AWS ブログより画像引用)
CodeBuild により Web UI の静的ページアーティファクトが生成され、S3 バケットに格納されます。クライアントは S3 バケットに CloudFront 経由でアクセスします。
Amazon Lex へのアクセス権限を付与するための Amazon Cognito リソースも併せてデプロイされます。これにより、任意のユーザーが Amazon Lex ボットの呼び出しが可能になります。
aws-samples/aws-lex-web-ui やってみた
早速やってみます。
aws-lex-web-ui では既存の Amazon Lex ボットを指定することも、テンプレートデプロイ時にサンプルのボットをデプロイすることもできます。
今回は以下のエントリで作成済みの東京リージョンのボットBankingBot
を指定します。
CloudFormation テンプレートのデプロイ
冒頭の AWS ブログに CloudFormation スタックの起動ボタンが用意されているため、そこから作成を試みます。使用されたテンプレートは v0.19.4 でした。
指定できるパラメータが数多く用意されているのですが、最低限必要なものとして Lex V2 ボットのボット ID、エイリアスIDを入力しました。(ここを割愛するとサンプルのボットがデプロイされます。)
最後の確認項目にチェックを入れ、スタックの作成を押下します。以下のテンプレートがネストされており、順次呼び出されます。
- CodeBuildDeploy
- CognitoIdentityPool
- CognitoIdentityPoolConfig
およそ 10 分ほどですべてのリソースの作成が完了しました。
Web App ページの確認
CloudFormation スタックの出力から、各種 URL が確認できます。まずはWebAppUrl
を確認してみます。
ボットとテキストと音声で対話できる Web ページが表示されました。
テンプレートデプロイ時のパラメータを変更していないため、「Order Flowers」というタイトルや最初のテキストがサンプルボットを想定したもののままになっています。
以降のテキストを入力するとテンプレートデプロイ時に指定した Lex ボット BankingBot が呼び出されていることがわかります。
親ページの確認
Amazon Lex ボットとの対話を埋め込みのウィジェットで行うこともできます。埋め込むためのスニペットを確認できる親ページにアクセスしてみます。
CloudFormation スタックの出力からParentPageUrl
キーの値にアクセスします。
画面右側にウィジェットが表示されており、そこで入力した内容に応じて呼び出されたインテントやスロットの情報が確認できます。
スニペットページの確認
CloudFormation スタックの出力からParentPageUrl
キーの値にアクセスします。
以下のようにスニペットや Config の情報が記載されたページが表示されます。
スニペットを試してみる
上記で確認したスニペットを埋め込んだ html ファイルを用意しました。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>サンプルページ</h1>
<p>サンプルです。</p>
<script src="https://xxxxxxxxxxag.cloudfront.net/lex-web-ui-loader.min.js"></script>
<script>
var loaderOpts = {
baseUrl: 'https://xxxxxxxxxxag.cloudfront.net/',
shouldLoadMinDeps: true
};
var loader = new ChatBotUiLoader.IframeLoader(loaderOpts);
var chatbotUiConfig = {
/* Example of setting session attributes on parent page
lex: {
sessionAttributes: {
userAgent: navigator.userAgent,
QNAClientFilter: ''
}
}
*/
};
loader.load(chatbotUiConfig)
.catch(function (error) { console.error(error); });
</script>
</body>
</html>
(横着してローカルから html ファイルを開いてウィジェットを確認できないかなと思ったのですが、もちろん無理でした。)
Web UI アーティファクトが格納された S3 バケットに 作成した html ファイルをアップロードし、CloudFront 経由でアクセスしてみると、ウイジェットが表示される様子を確認できました。
自前の Web サイトにスニペットを使用する場合は、CloudFormation テンプレートデプロイ時のパラメータWebAppParentOrigin
にオリジンの情報を指定するようにしてください。
コンフィグに手を加えてみる
スニペットページで確認したlex-web-ui-loader-config.json
を編集し、Web UI をカスタマイズできます。
以下のように、「最初のテキスト」「ツールバーのタイトル」「ツールバーのカラー」に変更を加えてみました。
lex-web-ui-loader-config.json
・・・・・略・・・・・
"lex": {
"v2BotId": "ZVAMMMXXE1",
"v2BotAliasId": "TSTALIASID",
"v2BotLocaleId": "en_US",
"botName": "ZVAMMMXXE1",
"botAlias": "$LATEST",
"initialText": "こんにちは",
"initialSpeechInstruction": "Say 'Buy Flowers' to get started.",
"initialUtterance": "",
"reInitSessionAttributesOnRestart": false,
"region": "ap-northeast-1",
"retryOnLexPostTextTimeout": "false",
"retryCountPostTextTimeout": "1"
},
"ui": {
"parentOrigin": "https://xxxxxxx1ag.cloudfront.net",
"toolbarTitle": "BankingBot",
"toolbarColor": "green",
"toolbarLogo": "",
"positiveFeedbackIntent": "Thumbs up",
"negativeFeedbackIntent": "Thumbs down",
"helpIntent": "Help",
"enableLogin": false,
"enableLiveChat": false,
"forceLogin": false,
"AllowSuperDangerousHTMLInMessage": true,
"shouldDisplayResponseCardTitle": false,
"saveHistory": false,
"helpContent": {},
"enableSFX": false,
"minButtonContent": "",
"hideInputFieldsForButtonResponse": false,
"pushInitialTextOnRestart": false,
"directFocusToBotInput": false,
"showDialogStateIcon": false,
"backButton": false,
"messageMenu": true,
"hideButtonMessageBubble": false
},
・・・・・略・・・・・
上記のコンフィグを S3 にアップロードし直し、再度 Web UI にアクセスしてみます。
以下の通り変更が反映されています。これはウィジェットでも Web ページでも同様です。
aws-lex-web-ui デプロイ後に Amazon Lex ボットに変更を加えてもいい?
やってみる前に疑問に思っていた点が「Amazon Lex の設定変更をするたびにaws-lex-web-uiのデプロイし直しが必要?」だったのですが、これは不要でした。
aws-lex-web-ui をデプロイ後にボットのインテントにサンプル発話を追加したのですが、特に追加設定不要でそのサンプル発話が解釈されていました。
終わりに
Amazon Lex ボットに Web UI を提供する aws-samples/aws-lex-web-ui を試してみました。
とりあえず動く、というところまでであれば取り立てて躓くことなく進められました。カスタマイズできる点が色々ありそうなので、作成されたアーティファクトや Cognito の ID プール/ユーザープールのチェックしがいがありそうです。
以上、 チバユキ (@batchicchi) がお送りしました。