5. AI in Your Daily Life – Ryan@iii.org.tw
Alexa Everywhere!
5
6. AI in Your Daily Life – Ryan@iii.org.tw
echo dot & amazon tap
6
7. AI in Your Daily Life – Ryan@iii.org.tw
你的腦叫你一直買
7
8. AI in Your Daily Life – Ryan@iii.org.tw
Echo Show
8
9. AI in Your Daily Life – Ryan@iii.org.tw
amazon echo family
https://www.amazon.com/Amazon-Echo-And-Alexa-Devices/b?ie=UTF8&node=9818047011
9
10. AI in Your Daily Life – Ryan@iii.org.tw
常用情境
• 書房(Echo Show /
Tap)
– 聽音樂
– 問天氣
– 問時間
– 看電影預告
– 搜尋影片
– 拼單字
– 問單字
– 拍張照片
– 算數學
• 廚房(Echo Show)
– 聽音樂
– 問時間
– 設定倒數計時
– 查食譜
10
11. AI in Your Daily Life – Ryan@iii.org.tw
播放電影預告片
Show me some latest movies.
Play the trailer for number X.
https://www.youtube.com/watch?v=aKg85qEFMHs
11
12. AI in Your Daily Life – Ryan@iii.org.tw
播放音樂
• Just say, “Alexa!” and then…
– “Play [song name] by [artist]”.
– “Pause” pauses the currently playing track.
– “Play [Discover Weekly] playlist”.
– “Volume up/down” turns volume up or down.
– “Stop” stops the currently playing track.
12
13. AI in Your Daily Life – Ryan@iii.org.tw
Smart Home with Alexa
13
14. AI in Your Daily Life – Ryan@iii.org.tw
August 智慧門鎖
14
15. AI in Your Daily Life – Ryan@iii.org.tw
August 智慧門鎖
15
16. AI in Your Daily Life – Ryan@iii.org.tw
Smart Control Your Devices
狀態:開 / 關
Connect
近端
遠端
查看門鎖狀態
發送虛擬鑰匙
遠端解鎖
查詢記錄
16
17. AI in Your Daily Life – Ryan@iii.org.tw
Alexa - Smart Home Skill API
https://developer.amazon.com/docs/smarthome/understand-the-smart-home-skill-api.html
17
18. AI in Your Daily Life – Ryan@iii.org.tw
電燈開發模擬實作
我想要
開燈
Dialogflow
語意分析
電燈狀態
通關密語
Webhook
Host at Heroku
通關密語確認
設定電燈狀態Google Sheets
Web Page
顯示電燈狀態
SheetDB
18
19. AI in Your Daily Life – Ryan@iii.org.tw
課前可準備事項
• 申請Google帳號(有Gmail亦可)
• 申請Heroku帳號
https://signup.heroku.com/login
• 安裝Heroku CLI指令列工具
– Windows 64-bit
• https://cli-assets.heroku.com/heroku-x64.exe
– Mac
• https://cli-assets.heroku.com/heroku.pkg
19
20. AI in Your Daily Life – Ryan@iii.org.tw
將設備狀態記錄在Google 試算表
• 進入Google 雲端硬碟,建一個Google Sheets
• 第一列兩個欄位:light_name、light_switch
• 第二列兩個欄位:main、關
20
21. AI in Your Daily Life – Ryan@iii.org.tw
開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
– Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的
– Google Dialogflow Natural Language Processing
• 依據目的,取得要更新的狀態以及密碼
– Fulfillment Programming
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
21
22. AI in Your Daily Life – Ryan@iii.org.tw
開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
– Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的
– Google Dialogflow Natural Language Processing
• 依據目的,取得要更新的狀態以及密碼
– Fulfillment Programming
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
22
23. AI in Your Daily Life – Ryan@iii.org.tw
DialogFlow
• Agent:SmartHomeXXYY
• Language:zh-TW
• Intent :LightSwitch
• Entities:LightStatus
訓練例句
23
24. AI in Your Daily Life – Ryan@iii.org.tw
Dialogflow – 建立新的Agent
• 輸入Agent名稱
– SmartHomeXXYY
• 設定預設語言
– Chinese(Traditional) – zh-tw
• 設定時區
– (GMT+8:00) Asia/Hong_Kong
• 按下右上方CREATE按鈕
24
https://console.dialogflow.com/api-client/#/newAgent
25. AI in Your Daily Life – Ryan@iii.org.tw
Dialogflow – 建立新的Intent
• Intents -> CREATE INTENT
– 輸入Intent名稱為:LightSwitch
• Training phrases 輸入常見例句
– ADD TRAINING PHRASES
25
26. AI in Your Daily Life – Ryan@iii.org.tw
Dialogflow – 建立新的Entity
• Entities -> CREATE ENTITY
– 輸入Entity名稱為:LightStatus
• 輸入分類名稱以及同義字
26
27. AI in Your Daily Life – Ryan@iii.org.tw
Intents -> Action and parameters
• ADD PARAMETERS AND ACTION
• 設定Category變數、反問的提示句
27
28. AI in Your Daily Life – Ryan@iii.org.tw
Responses & Fulfillment
• 設定階段性完成回應
• 啟動Fulfillment -> ENABLE FULFILLMENT
28
29. AI in Your Daily Life – Ryan@iii.org.tw
標記例句中的關鍵資訊
• 選取例句中的狀態關鍵字
• 選擇 @LightStatus
• 做完記得按下右上角的SAVE
29
30. AI in Your Daily Life – Ryan@iii.org.tw
Intents -> Default Fallback & Welcome
• 兩個都設定相同的回應,引導使用者說出符合瀏覽
設定設備狀態意圖的例句
– 刪除其他預設回應句
– 改成如下的特定回應句
30
31. AI in Your Daily Life – Ryan@iii.org.tw
在右方測試區進行測試
31
32. AI in Your Daily Life – Ryan@iii.org.tw
Integrations -> Web Demo
• 打開Web Demo的開關
• 點擊跳出視窗中的網址
32
33. AI in Your Daily Life – Ryan@iii.org.tw
開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
– Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的
– Google Dialogflow Natural Language Processing
• 依據目的,取得要更新的狀態以及密碼
– Fulfillment Programming
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
33
34. AI in Your Daily Life – Ryan@iii.org.tw
開發前準備事項
• 安裝 VS Code
– https://code.visualstudio.com/
• 安裝Node
– https://nodejs.org/en/download/
• 安裝NPM
– https://github.com/nodejs-tw/nodejs-wiki-
book/blob/master/zh-tw/node_npm.rst
34
35. AI in Your Daily Life – Ryan@iii.org.tw
SheetDB.io
• 用同一個Google帳號登入SheetDB.io
• 將剛才試算表的網址貼到SheetDB.io網站
• 產生API URL
35
36. AI in Your Daily Life – Ryan@iii.org.tw
建立開發專案
• 專案資料夾:SmartHome
• 主要程式:index.js
• 終端機指令
npm init
• package.json
在scripts中增加
"start":"node index.js",
"debug":"node --inspect index.js"
36
37. AI in Your Daily Life – Ryan@iii.org.tw
index.js
• 記得新增config資料夾、裡面放default.json
{
"productinfo_id":"xxxx"
}
注意大小寫
37
38. AI in Your Daily Life – Ryan@iii.org.tw
index.js
38
• 依據密碼是否正確,決定要不要更新狀態
39. AI in Your Daily Life – Ryan@iii.org.tw
index.js
39
40. AI in Your Daily Life – Ryan@iii.org.tw
index.js
• 更新完成或是密碼驗證錯誤,都讓使用者知道
40
41. AI in Your Daily Life – Ryan@iii.org.tw
開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
– Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的
– Google Dialogflow Natural Language Processing
• 依據目的,取得要更新的狀態以及密碼
– Fulfillment Programming
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
41
42. AI in Your Daily Life – Ryan@iii.org.tw
套件安裝
• 終端機:
npm-install-all index.js
(如果沒有npm-install-all的話請先照下面步驟安裝)
npm install npm-install-all -g (Mac使用者前面加sudo)
• 增加 .gitignore 檔案
– 裡面寫:node_modules/
42
43. AI in Your Daily Life – Ryan@iii.org.tw
部署至Heroku
• 註冊帳號
• 右上角 New -> Create new app
• 設定App name:smart-home-XXYY
• 區域:美國
• Create App
https://www.heroku.com/
43
44. AI in Your Daily Life – Ryan@iii.org.tw
Deploy using Heroku Git
• 使用Heroku Git (Use Heroku CLI)
• 下載與安裝 Heroku CLI
• 終端機
heroku login
cd my-project-dic
git init
heroku git:remote –a YourProjectNameHere
https://devcenter.heroku.com/articles/heroku-command-line
是你在Heroku中的專案名稱哦!
通常長得像 smart-home-xxyyzz
44
45. AI in Your Daily Life – Ryan@iii.org.tw
開始部署上傳(每次更新步驟亦同)
• git add .
• git commit –am "make it better"
• git push heroku master
• heroku restart
雙引號這邊像是你的上傳筆記
在這裡寫上這次更新的內容
之後code更新時再加這一步
第一次不用
45
46. AI in Your Daily Life – Ryan@iii.org.tw
啟動網站
• heroku ps:scale web=1
非常非常關鍵的一步,一定要記得做
46
47. AI in Your Daily Life – Ryan@iii.org.tw
找到Heroku的網址
• Domains and certificates
https://dashboard.heroku.com/apps/YourAppName/settings
• 其實網址就是
https://YourAppName.herokuapp.com
47
48. AI in Your Daily Life – Ryan@iii.org.tw
回到DialogFlow設定Fulfillment
• Webhook Enabled
https://YourAppName.herokuapp.com/webhook
• 打完記得畫面拉至最下方,按下Save
48
49. AI in Your Daily Life – Ryan@iii.org.tw
開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
– Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的
– Google Dialogflow Natural Language Processing
• 依據目的,取得要更新的狀態以及密碼
– Fulfillment Programming
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
49
50. AI in Your Daily Life – Ryan@iii.org.tw
製作一個簡單網頁來模擬電燈狀態
• 在電腦中新增一個資料夾:SmartHomeWeb
• 在裡面新增一個index.html
• 撰寫以下內容
50
51. AI in Your Daily Life – Ryan@iii.org.tw
製作一個簡單網頁來模擬電燈狀態
• 在裡面新增一個main.js 撰寫以下內容
51
這邊放你的SheetDB API Key
52. AI in Your Daily Life – Ryan@iii.org.tw
製作一個簡單網頁來模擬電燈狀態
• 建立images資料夾,在裡面放兩張圖片
52
53. AI in Your Daily Life – Ryan@iii.org.tw
打開Dialogflow與剛才的網頁
• 輸入指令與通關密語,看看是否能正常更新
53
54. AI in Your Daily Life – Ryan@iii.org.tw
Gartner 預測
• 2018年,會有超過20億人會以對話的形式來與
虛擬個人助理、智慧型手機以及連網裝置進行
互動
• 2020年,40%的使用者會以對話的形式為主來
使用支援人工智慧應用程式
• 2020年,25%的家庭會有兩個甚至更多的智慧
語音助理喇叭
Source : http://iveybusinessreview.ca/
54
55. AI in Your Daily Life – Ryan@iii.org.tw
手機APP/網站 -> 語音助理/Chatbot
• 需求的存取將透過更多元的方式,如VPA、
Chatbot來實現
55
56. AI in Your Daily Life – Ryan@iii.org.tw
UX Trend
• AI、Chatbot、VR
Noam Alloush
語音辨識將會撼動整個UX產業。
我相信再過個五年,大家不在討論什麼前
端還是後端,而是語音端(Voice Side)
Ignas Rubezius
Conversational UI(對話式介面)將是近年
最有趣的趨勢,隨著快速成長的趨勢,這
將成為未來UX的重要角色
UX Trends 2017: Experts Bet On AI, Chatbots And VR - https://www.forbes.com
56
57. AI in Your Daily Life – Ryan@iii.org.tw
語音/聊天機器人 助理的運作方式
查詢
新增
修改
刪除
網際網路資源
公開資料
私有
資料庫
使用者介面 雲端處理機制
57
58. AI in Your Daily Life – Ryan@iii.org.tw
為什麼要透過
語音或是聊天的方式來輸入內容?
User Friendly
58
59. AI in Your Daily Life – Ryan@iii.org.tw
Web -> APP -> Chatbot/VPA
你好!請問需
要什麼協助?
59
60. AI in Your Daily Life – Ryan@iii.org.tw
Typeform - 用即時通來回答問卷
Source:http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html
60
61. AI in Your Daily Life – Ryan@iii.org.tw
Skyscanner - 用Chatbot查優惠機票
m.me/skyscanner
61
62. AI in Your Daily Life – Ryan@iii.org.tw
使用者通常拿語音助理來做什麼?
62
63. AI in Your Daily Life – Ryan@iii.org.tw
財務管理 語音助理
https://www.americanexpress.com/us/content/alexa/
63
64. AI in Your Daily Life – Ryan@iii.org.tw
Conversational UI 的時代來臨
64
65. AI in Your Daily Life – Ryan@iii.org.tw
這是不是肯德基
• 語意分析 + 聊天機器人+ 認知服務 + 部署上線
DialogFlow
• 意圖:判斷品牌
• 資料:品牌名稱
認知服務
Custom Vision
Service
• 圖片分類
MS Bot Framework
Bot Channels
Registration
65
67. AI in Your Daily Life – Ryan@iii.org.tw
人機互動腳本準則
• 以人們真正會說的話來設計,而不是那種文章上的口吻
• 不要假設使用者知道要怎麼做或是知道會發生什麼事
真實
• 避免使用有多重含義的詞句、片語
• 引導使用者提供必要的資訊
明確
• 清楚地把選項呈現出來
• 一般而言,一次不要丟出超過三個選項
• 一次向使用者要一個資訊
簡單
67
68. AI in Your Daily Life – Ryan@iii.org.tw
語音助理技能設計方向
• 讓人們更快達成目的
• 語音控制音樂播放Fast
• 讓人們更簡單地達成目的
• 語音控制電燈開關、語音設定倒數計時Easy
• 增添生活趣味
• 具有挑戰性的遊戲Fun
Source: Voice Design Guide – Amazon Alexa
68
69. AI in Your Daily Life – Ryan@iii.org.tw
語音助理/聊天機器人 學習地圖
雲端服務
Microsoft Azure Google CloudAWS
雲端應用
認知服務
電腦視覺
語音辨識
資料存取
Open Data
資料庫
語法基礎
Node.JS C#Python
聊天機器人 Chatbot
Microsoft Bot Framework
LineFacebook WeChat
Slack Skype Web
人工智慧語意分析應用服務
Dialogflow Wit.aiLuis.ai
語言翻譯
UI
對談介面
流程設計
語音助理 VA
Amazon Alexa
Microsoft Cortana
Google Home
69
70. AI in Your Daily Life – Ryan@iii.org.tw
Recap for Developer
• 新一代的開發者:Connector
• 使用者介面、處理機制與雲端資源
• Node.js 在潮流中倍受重視
• 語音助理/Chatbot 設計的第一步是釐清目標
Source : https://sijieand500words.com
70
71. AI in Your Daily Life – Ryan@iii.org.tw
Recap for All
• 自然語言交談介面裝置將大舉進入你的生活
• 語言和文化密不可分,跨領域合作優化服務
• 多元化的後端服務與資料,將產生殺手級應用
71
72. AI in Your Daily Life – Ryan@iii.org.tw
敬請指教
Ryan Chung
Senior Engineer
III Digital Education Institute
Ryan@iii.org.tw
72