Amazon Sumerian Tutorial 35：Using the Dialogue Component and Amazon Lex to Build a Chatbot

こんにちは、ナレコム前川です。

今回は、Amazon Sumerian の公式チュートリアルの
Using the Dialogue Component and Amazon Lex to Build a Chatbot を進めていきたいと思います。

ここでは、以下のことについて学んでいきます。

・AWS configuration
・Amazon Cognito identity pool ID
・Dialogue component
・State Machine

それでは、進めていきましょう。

1. Amazon Cognito Identity Pool ID の作成

シーンを作成する前に、Pool ID を作成していきます。

① AWS アカウントにサインインし、AWS CloudFormation stack template にアクセス。
② リージョンを US East (N. Virginia) もしくは EU (Ireland) に設定。
※ 私がアクセスした際には、既に US East（バージニア北部）になっていました。
③ スタック名を更新し、確認項目にチェックを入れたら作成。

④ 作成が完了したことを確認。

⑤ 出力から Pool ID を確認。

2. Amazon Lex Bot の作成

ここでは、チュートリアルで必要となる Amazon Lex Bot の作成を行っていきます。
今回は、AWS CloudFormation stack template に既に含まれている Lex Bot を使用します。
このサンプルボットを使用すると、Bot と会話してホテルやレンタカーの予約ができます。

① Amazon Lex にアクセスし、Create から BookTrip を選択し、作成。

作成できたら以下のような画面が開くと思います。

② Setting から Alias を Test に設定。
③ 設定したら、Publish をクリックして公開。

Bot をカスタマイズしたい場合には、コチラをご覧ください。

3. Chat Bot の作成

これから Chat Bot の作成を行っていきます。

シーンのセットアップ

① ダッシュボードから Default Lighting を選択。
② シーン名を「Chat Bot Tutorial」にし、シーンを作成。

※ シーン名は自由に決めて作成してください。

③ Entities パネルのシーン名を選択し、AWS configuration から Pool ID を設定。

④ Import Assets から Cristine を追加。

⑤ Assets パネルから Cristine をキャンバスに追加。

Dialogue Component の追加

① Cristine を選択し、Add Component から Dialogue Component を追加。

② Name に BookTrip、Alias に Test を入力。

4. State Machine の設定

ここでは、Chat Bot の振る舞いを作成するためにステートマシンの設定を行っていきます。

① Cristine を選択し、State Machine コンポーネントの +ボタンをクリック。

② 名前を「ChatBot」に変更。

③ State1 の名前を「Start」に変更し、AWS SDK Ready アクションを追加。

この設定によってシーン開始時に AWS サービスと接続を行います。

ステートの追加

ここでは、5つのステートを追加し、設定していきます。

State : Wait for Input
① Add State から新しいステートの追加。
② ステート名を「Wait for Input」に設定。
③ Key Down アクションを追加し、Key に Space を設定。

State : Start Recording
① ステートを追加。
② ステート名を「Start Recording」に設定。
③ Start Microphone Recording と Key Up アクションを追加。
④ Key Up の Key に Space を設定。

State : Stop Recording
① ステートを追加。
② ステート名を「Stop Recording」に設定。
③ Stop Microphone Recording アクションを追加。

State : Process with Lex
① ステートを追加。
② ステート名を「Process with Lex」に設定。
③ Send Audio Input to Dialogue Bot アクションを追加。
※ Log user input と Log bot response にはチェックを入れないでください。

State : Play Response
① ステートを追加。
② ステート名を「Play Response」に設定。
③ Start Speech アクションを追加。
④ Use Lex Response にチェックを入れる。

最後にステート同士を以下のように矢印で繋いでください。

また、Start ステートが Set As Initial State になっていることを確認してください。

それでは、試しにシーンを実行してみましょう。
マイク使用の許可を求められるのでそちらを許可してください。

「Book a hotel」とマイクに向かって言うと返事が返ってきます。
スペースキーを押しながら発話を行います。
返答が返ってくる質問項目があらかじめ決まっているので、コチラ を参考にしてください。
また、新たに質問項目や回答を追加したい場合は、Amazon Lex から設定できます。

実行動画は以下です。

5. TextBot Behavior の作成

ここでは、文章を入力するとアバターが応答してくれるように設定していきます。

① Create Entity から </> を追加。

② Inspector パネルの HTML を展開し、Open in Editor をクリック。

③ 以下のプログラムと置き換える。

キャンバスの下にテキストボックスがあるのを確認してください。

Behavior の複製

① Assets パネルから ChatBot を選択し、複製。

② Cristine を選択し、State Machine コンポーネントに ChatBot 2 を追加。
③ 先程作成した ChatBot を削除。

ChatBot 2 の修正

① ChatBot 2 を編集モードにし、名前を「TypeBot」に変更。

② Start Recording と Stop Recording のステートを削除。

③ Key Down ステートを削除して、DOM Event Listen を追加。
④ 以下のように設定。

⑤ 新しいステートを追加し、名前を「Get Text Input」にして Get Html Text アクションを追加。
⑥ Entity (optional) に HTML entity をドラッグ＆ドロップ。

⑦ Html element selector が input になっていることを確認。

⑧ Process with Lex を選択し、Send Audio Input to Dialogue Bot を削除。
⑨ Send Text Input to Dialogue Bot を追加。

⑩ 以下のように矢印を繋ぐ。

最後にシーンを実行します。
「Book a hotel」や「Book a car」と入力すると返答があります。
入力してどのような返答があるのか確認してみましょう。

今回のチュートリアルは以上です。
お疲れ様でした。