利用Amazon Lex 與 AWS Amplify 實作無服務器虛擬助理應用程式

前言

AWS Amplify 於 2018年底新增了一項功能，可支援 Amazon Sumerian 的 3D 場景整合於 AWS Amplify 的專案之中，現在可透過 AWS Amplify 迅速的將 Amazon Sumerian 場景部署於你的應用程式當中。

AWS Amplify 是一個能輕鬆建立程式專案，並迅速部署 AWS 服務於專案之中，並提供簡單的架構將後端與常見的前端整合，作為一個全託管的服務，完全不需任何設定便可以讓應用程式後端可以隨需擴展。

Amazon Sumerian 是一個無須任何 3D 圖形的專業知識便可以輕鬆快速地打造虛擬實境 (VR)、擴增實境 (AR)、和 3D 應用程式，並可整合於各種常見的頭戴式裝置與行動裝置中。

Amazon Lex 是一個能部署在應用程式並使用語音或文字建立交談介面的服務，它提供自動語音辨識 (ASR) 的深度學習功能，將語音轉換為文字，再利用自然語言理解 (NLU) 來辨識文字的含義，讓使用者能夠體驗到逼真的交談與互動。

情境

我們可以根據不同情境設計 Amazon Lex 的對話主題並配合 AWS Amplify 可無限自動擴展的應用程式，我們可以完全不需要擔心後端程式與硬體的負載問題，只需要專注於主要程式碼的設計，便可迅速的將 Amazon Sumerian 擬真的人物場景部署於各項裝置中，適用於各項大型展場活動的互動式接待人員或各種模擬教學的教材。

使用環境

• 以 Windows 作業系統為例
• 地區請選擇 US East (N. Virginia)
• 建議使用 VScode，因為它能同時操作終端機與編輯專案。(或選用其他方式)

建置過程

利用 Amazon Lex 打造語音機器人

首先，我們為了簡化流程而選用 Amazon Lex 預設的 “BookTrip” 範本來打造這次語音機器人的主題。機器人會偵測設定好的關鍵語句來判斷使用者意圖，並回覆相關對話或做出對應行動，以此範本為例，機器人會不斷圍繞在 “BookTrip” 這個主題上詢問使用者，最後做出訂房或租車的動作。

• 在 Service 選單中，選擇 Amazon Lex 後，點選 Create 來創建一個語音機器人。

• 選擇 BookTrip 這個範本，輸入 Bot name : yourbotname 後選擇 Create。

  

• 點入剛剛創建的語音機器人，開啟 Settings 選項並選擇 Aliases。

  • 設定如下:

    • Alias name : test

    • Bot version : latest

      每次匯出機器人都需要設定 Alias name ，以區分的不同版本。

• 點選 PLUS 來增加一個新的版本。

  

• 選擇 Publish。

  • Choose an alias : test，並選擇 Publish。

  

等待匯出結束後便可關閉網頁。

設計 AWS Amplify 專案

接著我們開啟 VScode 的終端機，使用 command line 來安裝 AWS Amplify CLI。(你也可以使用 Windows 的 ” CMD命令提示字元 ” 或 MacOS 的 ” Terminal “來下安裝指令)

• AWS Amplify CLI 安裝流程

• 使用 npx create-react-app sumerian-amplify-app 創建一個應用程式專案，在此命名為 sumerian-amplify-app。

專案預設路徑 C:\Users\USER\sumerian-amplify-app。

• 輸入 cd sumerian-amplify-app 指令，會進入專案資料夾。

• 輸入 npm install aws-amplify aws-amplify-react --save 來安裝 aws-amplify 與 aws-amplify-react 這兩個套件。

• 使用 VScode 打開先前創好的 sumerian-amplify-app 專案。

• 參考附件，修改 App.js 中的程式碼。

  修改第 13 行的 your_scene_region。

  範例 : us-east-1。

  修改第 15 與 28 行的 your_scene_name。

• 在 Index.css 中加入以下程式碼，調整 Sumerian 場景的顯示大小。

  body { height: 600px; }

替應用程式建立身分驗證

我們使用 AWS Amplify 建立應用程式的身分驗證功能，這只是 AWS Amplify 內建模組中的其中一個功能，倘若你需要替應用程式新增更多功能，請參考 AWS Amplify。

• 輸入 cd sumerian-amplify-app 指令進入 sumerian-amplify-app 資料夾。

• 輸入 amplify add auth ，選擇 Yes 使用預設的 CloudFormation stack。

  

AWS Amplify 會自動於 AWS Cognito 中新增 Identity pool。

• 輸入 amplify push 在雲端上同步剛剛的設定。

同步需要花三至五分鐘。

• 開啟 sumerian-amplify-app專案中的 amplify 資料夾，打開 amplify-meta.jason。

  

• 記下 UnauthRoleName 、 AuthRoleName 與 IdentityPoolName，之後的步驟會使用到。

  

  

• 回到 AWS 主控台，選擇 Services，選擇 IAM。

• 選擇左側選單的 Roles，搜尋剛剛記下的 UnAuthRoleName 並點擊進入。

• 選擇 Add inline policy。

  

• 選擇使用 JSON，貼上附件程式碼。

• 選擇 Review policy，命名後選擇 Create policy.

  這個 IAM policy 能夠授權你的 Amazon Sumerian 場景能夠使用 Amazon Lex 的資源，並讓你的應用程式能夠讀取 Amazon Sumerian 場景。

• 對 AuthRolename 進行與 UnauthRolename 相同的新增步驟。

  新增 IAM policy。

• 回到 AWS 主控台選擇 Services ，選擇 Cognito。

• 選擇 Manage Identity Pools。

• 找尋剛剛複製的 IdentityPoolName 並點入，然後在右上角選擇 Edit identity pool 。

  Cognito 這邊的主控台沒有搜尋功能，只能用找的。

• 展開 Unauthenticated identities，勾選 Enable access to unauthenticated identities 。

  

• 複製 Identity pool ID，接下來的步驟會用到。

  

建立一個 Amazon Sumerian 場景

我們將新增一個場景，並加入用來說話的主持人(Maya)，再透過設定 Dialogue Component 與先前建立好的 Amazon Lex 語音機器人做連結，賦予主持人(Maya)擁有語音對話的功能，最後再匯出一個不公開的 Amazon Sumerian 場景以便我們應用程式使用。

• 開啟 AWS 主控台選擇 Service，選擇 Amazon Sumerian ，將會跳轉到 Amazon Sumerian Dashboard 的網頁。

• 選擇 Create new scene，並替場景取一個 Scene name。

• 在左上角的 Entities 列表中點選 yourscenename，然後展開右邊列表的 AWS Configuration。

  如果不先點選場景的話，可能不會看到右邊的列表。

  

• 展開 AWS Configuration 列表，貼上剛剛複製的 Cognito Identity Pool ID。

  此步驟是讓這個場景能夠使用剛剛在 Cognito 中所設定的權限。

  

• 選擇 Import Assets，點選 Maya 並點選右下角 Add。

  

• 需要將 Maya 拖曳進場景之中才可以看到 Maya。

  

注意 : 你可能需要放大才看的到。

• 在左上角 Entities 清單選擇 Maya，並於右方列表選擇 Add component 並選擇 Dialogue。

  

• 輸入先前創建的 Amazon Lex 語音機器人時的 Bot Name 與 Alias name。

Bot name 是自己取的 Amazon lex Bot 的名字，Alias name 則是 test。

此步驟是賦予 Maya 擁有 Amazon Lex 語音機器人的功能。

• 在左上角 Entities 清單選擇 Maya，並於右方點選 Add component 選擇 State Machine。

  

• 展開右方清單中的 State Machine，選按 PLUS 按鈕來新增一個新的動作元件。

  

• 替 name 重新命名為 : ChatBot。

  

接著我們要替這個動作元件新增不同的狀態(state)。

• 替 State 1 重新命名為 : Start，並選擇 Add Action。

  

• 搜尋 AWS SDK Ready 並選擇 Add 來新增動作。

  

• 點擊 Add State 5 次。

  

• 依序替新增的動作階段命名 :

  State 1 : Wait for Input

  State 2 : Start Recording

  State 3 : Stop Recording

  State 4 : Process with Lex

  State 5 : Play Response

  

• 選擇 Wait for Input，新增一個 Key Down 的動作。

  

• 更改觸發按鍵。

  可依照喜好或裝置差異而設定觸發按鍵。

  

• 選擇 Start Recording，新增 Start Microphone Recording 和 Key Up 這兩個動作。

  

• 選擇 Stop Recording，新增 Stop Microphone Recording 這個動作。

  可依照喜好或裝置差異而設定觸發按鍵。

  

• 選擇 Process with Lex，新增 Send Audio Input to Dialogue Bot 這個動作。

  

不要勾選 Log user input 和 Log bot respons。

• 選擇 Play Response，新增 Start Speech 並勾選 Use Lex Response。

  

• 透過 拖曳箭頭 的方式替階段新增順序。

  在 “Process With Lex” 這個階段的順序，請從 “On Response Ready output” 開始拖曳。

  

完成後如下圖。

注意 : Amazon Sumerian 會定期自動存檔，但仍建議定期點選左上角選單手動存檔。

• 點選右上角 Publish，選擇 Host privately 後，選擇 Publish。

  

如果已經是匯出的狀態，請先 Unpublish 然後再次 Publish。

• 不公開匯出會是一個 JSON 檔，請 Download JSON configuration。

• 將下載的 JSON 檔複製到我們專案的 src 資料夾中並改名 sumerian-exports.js。

  

• 修改 sumerian-export.js 如下圖。

  

匯出可讓頭戴式與行動裝置開啟的應用程式

• 輸入 amplify add hosting 指令，開始進行匯出設定。

• 選擇 DEV。

  

• 輸入你的 hosting bucket name，並選擇下圖之設定 :

  

設定完成後，AWS Amplify 可會自動建立一個 S3 Bucket。

• 輸入 amplify publish 指令，匯出應用程式。

  

匯出成一個 URL，可利用任何頭戴式裝置或行動裝置開啟，倘若沒有頭戴式裝置可以使用瀏覽器開啟。

• 進行 Create account 與 Login 後便會進入此頁面。

  

  

• 按著 觸發按鍵 便可與她對話。

  說出 “Book a hotel” 或 “Book a car” 這兩個關鍵字可以觸發回應。

  

  

結論

現在你學會了如何安裝與設定 AWS Amplify CLI 以及利用 AWS Amplify 創建應用程式。也學會如何建立 Amazon Sumerian 場景，並加入主持人與 Amazon Lex 的語音機器人做連結，並透過不公開的方式將 Amazon Sumerian 場景匯出，整合於你的應用程式或其他裝置中，創造出屬於自己的虛擬語音助理。

參考網址

• Using the Dialogue Component and Amazon Lex to Build a Chatbot

• AWS Amplify

• AWS Amplify Tutorial

• Amazon Lex Programming Model