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

2018.11.22

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)は、以下のとおりです。formonsubmitが発行されたタイミングに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>

6 最後に

今回は、AWS SDK for JavaScriptを利用して、Lexのクライアントを作成してみました。こうしてHTML+JavaScriptで作成することで、何処にでも軽易にチャットボットを配置できます。

次回は、ブラウザからマイクを初期化し、音声入力でLexを使ってみたいと思います。

弊社では、音声を利用した各種ソリューションの導入支援を行っております。お気軽にお問い合わせください。

チャットボット開発支援

クラウド型コンタクトセンターサービス導入支援

7 参考リンク

Amazon Lex ドキュメント

ブラウザ内の AWS SDK for JavaScript