[Amazon Lex] HTML+JavaScriptでLexクライアントを作ってみました

音声アシスタント特集

#IA

#Amazon Lex

#AWS

SIN

2018.11.22

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

1 はじめに

こんにちは、AIソリューション部の平内（SIN）です。

Amazon Lex(以下、Lex)のクライアントは、AWS SDK for JavaScriptを利用して、簡単に作成することができます。今回は、HTML+JavaScriptでLexクライアントを作ってみました。

最初に、動作しているようすです。

2 AWS SDK for JavaScript

AWS SDK for JavaScriptをブラウザで使用する場合、下記のようにscriptタグで利用可能です。

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>

後は、Cognitoで作成したプールID（後述）で初期化します。

AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
});

3 Lex

Lexの利用要領は、概ね以下のとおりです。

const lexruntime = new AWS.LexRuntime();

const params = {
botAlias: botAlias, // エリアス
botName: botName, // ボット名
inputText: message, // 送信するテキスト
userId: userId, // セッションのID
sessionAttributes: sessionAttributes // 属性情報
};

// テキストの送信
lexruntime.postText(params, function(err, data) {
if (err) {
//エラー
}
if (data) {
// Lexからのレスポンス
}
});

4 Cognito

ブラウザでAWS SDK for JavaScriptを利用する場合、Cognitoで作成したプールIDが必要になります。この際、IDは、認証されていない場合も利用可能にしておきます。

プールIDには、下記のように、特定のボットにだけアクセスできる最低限のアクセス権を設定しました。

{
"Version": "2012-10-17",
"Statement": [
{
"Action": [
"lex:PostContent",
"lex:PostText"
],
"Effect": "Allow",
"Resource": "arn:aws:lex:us-east-1:*:bot:OrderFlowers:$LATEST"
},
{
"Effect": "Allow",
"Action": [
"mobileanalytics:PutEvents",
"cognito-sync:*"
],
"Resource": [
"*"
]
}
]
}

5 HTML+JavaScript

実装したHTML（JavaScript)は、以下のとおりです。formでonsubmitが発行されたタイミングにLexに対してテキストを送信し、レスポンスをログビューに追加表示しているだけです。

<br /><script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style language="text/css">
<p>div#logView {<br />
    background-color:darkturquoise;<br />
    border: 1px solid #ccc;<br />
    padding: 4px;<br />
    width: 400px;<br />
    height: 500px;<br />
    overflow: scroll;<br />
}</p>
<p>input#message {<br />
    padding: 4px;<br />
    font-size: 1em;<br />
    width: 400px<br />
}</p>
<p>log {<br />
    margin: 4px;<br />
    padding: 4px;<br />
    border-radius: 4px;<br />
    min-width: 50%;<br />
    max-width: 85%;<br />
}</p>
<p>log.req {<br />
    float: left;<br />
    background-color:white;<br />
}</p>
<p>log.res {<br />
    text-align: right;<br />
    float: right;<br />
    background-color:beige;<br />
}<br />
log.err {<br />
    text-align: right;<br />
    float: right;<br />
    color: #f77;<br />
}<br />
</style>


<script>

    $('#message').focus();

    AWS.config.region = 'us-east-1';
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
    });

    const lexruntime = new AWS.LexRuntime();
    let sessionAttributes = {};


    const botAlias = '$LATEST';
    const botName = 'OrderFlowers';
    const userId = 'id-' + Date.now();

    function postText() {

        const message = $('#message').val().trim();
        if(message.length > 0) {

            $('#message').val('');

            const params = {
                botAlias: botAlias,
                botName: botName,
                inputText: message,
                userId: userId,
                sessionAttributes: sessionAttributes
            };

            appendLog(message, 'req');

            lexruntime.postText(params, function(err, data) {
                if (err) {
                    console.log(err, err.stack);
                    appendLog(err.message, 'err');
                }
                if (data) {
                    sessionAttributes = data.sessionAttributes;
                    appendLog(data.message, 'res');
                }
            });
        }

        return false;
    }

    function appendLog(message, className) {
      $('<log>', { class:className, text:message }).appendTo('#logView');
      $('#logView').scrollTop(self.innerHeight);
    }

</script>

<center>Order Flowers</center>
<div id="logView"></div>
<form><input id="message" size="80" type="text" value="" /></form>