前回、Amazon Lexで作ったチャットボットにAWS Amplifyを使ってWebチャットを作りました。
https://kun432.hatenablog.com/entry/amazon-lex-web-bot-using-aws-amplify
Lexのチャットボットを先に作ったので少しひねった手順になってしまいましたが、本来はAmplify CLIでLexのチャットボットも作れてしまいます。
今回はそれを試してみたいと思います。
前提条件
- Amplify CLIやvue-cliはインストール済みとします
- Amplify CLIはインストール済みとします
プロジェクトの作成＆Amplify CLIの組み込み
このあたりは前回説明したので詳細は割愛します。基本全部デフォルトで。
$ vue create lex-bot-sample
$ cd lex-bot-sample
$ amplify init
ライブラリとUIコンポーネントを追加します。
$ npm install aws-amplify @aws-amplify/ui-components
src/main.jsを修正します。
import { createApp } from 'vue' import App from './App.vue' //ここから追加 import Amplify from 'aws-amplify'; import awsconfig from './aws-exports'; import { applyPolyfills, defineCustomElements, } from '@aws-amplify/ui-components/loader'; applyPolyfills().then(() => { defineCustomElements(window); }); Amplify.configure(awsconfig); //ここまで createApp(App).mount('#app')
これで準備OKです。
Amplify CLIからLexチャットボットを追加する（その1: サンプルから作成）
今日の本題はここです。amplify add でカテゴリを追加することで、バックエンドのリソースを作成、アプリケーションに機能を追加することできます。Lexのチャットボットを追加する場合はamplify interactions addです
$ amplify interactions add Using service: Lex, provided by: awscloudformation Successfully added auth resource locally.
CloudformationでLexのリソースが作成されるようですね（この時点では作成されていないはず）。そして認証もデフォルトで追加されるようです。
で、ここからLexのチャットボット作成が対話形式でスタートします。
Welcome to the Amazon Lex chatbot wizard
You will be asked a series of questions to help determine how to best construct your chatbot.
最初にリソース名です。ここはまあデフォルトで。
? Provide a friendly resource name that will be used to label this category in the project: (lexf4599dee)
サンプルで始めるか、イチから作るかを聞かれます。まずはサンプルでやってみましょう。
? Would you like to start with a sample chatbot or start from scratch? (Use ar row keys) ❯ Start with a sample Start from scratch
サンプルを選択します。これLexで用意されているサンプルのボットですね。どれでも良いですが、前回も使ったBookTripにします。
? Choose a sample chatbot: (Use arrow keys) ❯ BookTrip OrderFlowers ScheduleAppointment
アメリカの児童保護的なやつですね。関係ないのでNで。
? Please indicate if your use of this bot is subject to the Children's Online Privacy Protection Act (COPPA). Learn more: https://www.ftc.gov/tips-advice/business-center/guidance/complying -coppa-frequently-asked-questions (y/N)
はい、これでOKです。
Successfully added resource
ではデプロイしましょう
$ amplify push
次にアプリケーションにチャットボットコンポーネントを追加します。src/App.vueを以下でまるっと上書きします。
<template>
<amplify-chatbot
bot-title="Chatbot Lex"
bot-name="BookTrip_dev"
welcome-message="Hello, how can I help you?"
voice-enabled="true"
/>
</template>
ローカルのテストサーバを上げてみましょう。
$ npm run serve
ブラウザでアクセスしてみます。
はい、サクッとできました！
・・・が、英語になっていますね・・・
前回のブログでもお伝えしたとおり、Amplify CLIからのチャットボット作成は現状、日本語に対応していないようです。
Amplify CLIからLexチャットボットを追加する（その2: イチから作成）
先程はサンプルから作成しましたが、イチから作成する方もやってみましょう。
一旦カテゴリから削除します。
$ amplify interactions remove $ amplify auth remove
再度追加します。
$ amplify interactions add
スクラッチから作成を選択します。
? Would you like to start with a sample chatbot or start from scratch? Start with a sample ❯ Start from scratch
ボット名を入力します。今回はBookTripDemoにしました。
? Enter a name for your bot: BookTripDemo
音声を、男性・女性・テキストのみから選択します。とりあえず男性を選択してみましょう。
? Choose an output voice: (Use arrow keys) None. This is only a text based application. ❯ Male Female
セッションタイムアウトを選択します。デフォルトの5分にしておきましょう。
? After how long should the session timeout (in minutes)? (5)
児童保護のやつは先ほどと同じです。
? Please indicate if your use of this bot is subject to the Children's Online Privacy Protection Act (COPPA). Learn more: https://www.ftc.gov/tips-advice/business-center/guidance/complying -coppa-frequently-asked-questions (y/N)
インテントを作成していきます。まずインテント名。"BookTrip"のサンプルと同じように、"BookHotel"にしてみます。
First create an intent for your new chatbot. An intent represents an action that the user wants to perform. ? Give a unique name for the new intent: BookHotel
サンプル発話を入力します。とりあえず、"book a hotel"と入れてみます。
? Enter a sample utterance (spoken or typed phrase that invokes your intent. e .g. Book a hotel) book a hotel
サンプル発話をさらに追加するか聞かれますこれを繰り返していけば良さそうですね。
? Would you like to add another utterance? (Y/n) Yes
こんな感じでいくつか追加しました。
? Enter a sample utterance (spoken or typed phrase that invokes your intent. e .g. Book a hotel) i want to book a hotel ? Would you like to add another utterance? Yes ? Enter a sample utterance (spoken or typed phrase that invokes your intent. e .g. Book a hotel) could you book a hotel ? Would you like to add another utterance? No
次にスロットです。Lexのインテントはダイアログモデル的な感じになっているので、少なくともAmplify CLIからの作成ではスロットの設定は必須のようですね。とりあえず"location"にしておきましょう。
Now, add a slot to your intent. A slot is data the user must provide to fulfill the intent. ? Enter a name for your slot (e.g. Location) location
スロットのスロットタイプを聞かれます。location なので場所や都市名のビルトインスロットのがよさそうです。"Amazon built-in slot type"を選択します。おそらく、カスタムだとここで設定するとスロット値を入力する感じになるんでしょうね。
? Would you like to choose an Amazon built-in slot type, a slot type you've al ready made, or create a new slot type? (Use arrow keys) ❯ Amazon built-in slot type Slot type I've already made Create a new slot type
ということで、スロットタイプの選択になります。AMAZON.US_CITYにしましょう。
? Choose a slot type: AMAZON.TVSeason AMAZON.TVSeries ❯ AMAZON.US_CITY AMAZON.US_FIRST_NAME AMAZON.US_LAST_NAME AMAZON.US_STATE AMAZON.VideoGame
このスロットを収集するためのプロンプトを入力します。このまま"What City"にしておきましょう。
? Enter a prompt for your slot (e.g. What city?) What city?
スロットが必須かどうかを聞いてきます。とりあえず必須にします。
? Should this slot be required? (Y/n) Y
更にスロットを追加するかを聞いてきます。今回はlocationだけにしておきましょう。nで。
? Would you like to add another slot? (Y/n) n
確認用のプロンプトを設定します。今回はなしにしておきましょう。
? Would you like to add a confirmation prompt to your intent? (y/N) ? N
インテントのフルフィルメント、つまり、バックエンドですね。今回はそのままパラメータを返すようにしましょう。
? How would you like the intent to be fulfilled? (Use arrow keys) AWS Lambda Function ❯ Return parameters to client
インテントをさらに追加するか聞かれますが、とりあえずこの一つだけにします。
? Would you like to create another intent? (y/N) N
追加されました。
Successfully added resource
デプロイします。
$ amplify push
デプロイされました。
✔ All resources are updated in the cloud
ローカルでも立ち上げてみましょう。その前に、ボット名が違うので、src/App.vueを修正します。
<template>
<amplify-chatbot
bot-title="Chatbot Lex"
bot-name="BookTripDemo_dev"
welcome-message="Hello, how can I help you?"
voice-enabled="true"
/>
</template>
テストサーバをあげます。
$ npm run serve
動きました。
まとめ
ということで、Amplify CLIからLexノボットを作成できることがわかりました。ただ、
- 現状日本語には対応していない
- 対話モデルを対話形式で設定していくのはかなり辛い
というところでちょっと使い所は難しいです。
また、前回気づいてなかったのですが、一度作成したボットの言語をあとから変更するのはできなさそうです・・・
日本語のLexボットをAmplifyのフロントエンドと組み合わせて作りたい場合は、前回のようにやるしかなさそうですね・・・今後に期待したいところです
