intro to dialogflow(api.ai) / wit.ai / luis.ai

行動開發學院 MobileDev.TW

人工智慧語意分析工具Dialogflow(API.ai) / Wit.ai / Luis.ai

Ryan@iii.org.twIII IT Training Center

1

行動開發學院 MobileDev.TW

問題

• 如何讓機器人聽得懂人話？– 特定指令– 日常生活會說的句子

明天下午三點到北車集合

4月22日15:00在台北火車站碰面

明天下午三點整在北平西路3號會合

哈摟！我看明天我們就在台北車站碰面好了，下午三點，要記得哦

ㄟ，還記得明天的約會嗎？是下午三點，在火車站，別遲到！

提醒你一下，三點在北車碰頭，不見不散！

2

行動開發學院 MobileDev.TW

天氣機器人開發 1.0

• 目標– 輸入：時間、地點– 回傳：天氣概況、溫度

• 介面– 網頁

• 工具/技術– API.ai– AJAX

3

行動開發學院 MobileDev.TW

API.ai

4

行動開發學院 MobileDev.TW

Create New Agent

5

行動開發學院 MobileDev.TW

Create New Agent

6

行動開發學院 MobileDev.TW

語意分析常見名詞

• Intent 意圖– 使用者對談的目的

• Entity 關鍵資訊– 達成目的的必要輸入資訊

• Utterance 例句– 使用者常用的句型

7

行動開發學院 MobileDev.TW

Create Intent

8

行動開發學院 MobileDev.TW

標示必要資訊，並引導使用者輸入

9

行動開發學院 MobileDev.TW

追問出日期

10

行動開發學院 MobileDev.TW

追問出城市

11

行動開發學院 MobileDev.TW

設定確認取得查詢資訊的回應

AgentTrainedComplete

12

行動開發學院 MobileDev.TW

測試看看

13

行動開發學院 MobileDev.TW

整合至網頁

14

https://gist.github.com/Gugic/cfc008599fa9a82eeba4127648009132

行動開發學院 MobileDev.TW

修改網頁

• Client access token

15

行動開發學院 MobileDev.TW

開始有回應

16

行動開發學院 MobileDev.TW

修改顯示的回應內容• 只顯示想要給使用者看的內容

17

行動開發學院 MobileDev.TW

顯示出對話記錄

18

行動開發學院 MobileDev.TW

顯示出對話記錄

19

行動開發學院 MobileDev.TW

結合Open Weather Map

http://openweathermap.org/

20

行動開發學院 MobileDev.TW

Get API Key

https://openweathermap.org/appid

21

行動開發學院 MobileDev.TW

API - By city name

22

行動開發學院 MobileDev.TW

取得天氣資訊• 確定交談動作完成時，開始取得資料

23

行動開發學院 MobileDev.TW

取得天氣資訊• 依城市名稱進行天氣資訊查詢

24

行動開發學院 MobileDev.TW

jQuery.ajax()

25

http://api.jquery.com/jquery.ajax/

行動開發學院 MobileDev.TW

jQuery.getJSON()

26

http://api.jquery.com/jquery.getjson/

行動開發學院 MobileDev.TW

簡易版天氣機器人完成

27

行動開發學院 MobileDev.TW

回顧一下，我們串了什麼？

輸入查詢

HTML5網頁

雲端處理機制

語意分析判斷輸入

使用者介面網際網路資源

開放資料

天氣 API

28

行動開發學院 MobileDev.TW

輸入與輸出

How is the weather today in Taipei?

時間：Today地點：Taipei

取得當天氣溫天氣描述

29

行動開發學院 MobileDev.TW

延伸實作一• 如何查詢特定日期天氣？– 使用OpenWeatherMap的五日預測

30https://openweathermap.org/forecast5

行動開發學院 MobileDev.TW

五日預測會拿到什麼？• list– 陣列– 所有預測資料

• main["temp"]– 氣溫

• weather["description"]– 天氣描述

• dt_txt– 日期時間

31

行動開發學院 MobileDev.TW

修改程式碼• 更換呼叫的網址

32

• 找到對應的日期，回傳資料– 使用迴圈– 使用字串切割– 找到之後，跳離迴圈

行動開發學院 MobileDev.TW

延伸實作二• 如何在網頁上顯示天氣概況圖？– 回傳的weather陣列中的資料，有一個icon

34

行動開發學院 MobileDev.TW

icon值即為天氣圖的檔案名稱

• http://openweathermap.org/img/w/03n.png

35

行動開發學院 MobileDev.TW

練習

• 在網頁上增加一個顯示圖片的元件• 取得網址後，進行顯示

36

行動開發學院 MobileDev.TW

多國語系支援

38

• lang=zh_tw

行動開發學院 MobileDev.TW

練習：電影機器人開發 1.0• 目標– 輸入：電影名稱– 回傳：簡介、海報

• 介面– 網頁

• 工具/技術– API.ai– AJAX

• 資料– theMovieDB.org

39

行動開發學院 MobileDev.TW

Dialogflow – 自訂句型

• 你知道XXX在演什麼嗎？• 我想問XXX的劇情是什麼

40

Dialogflow – 自訂關鍵資訊

• 將XXX的部分設定成關鍵資訊會出現的地方

行動開發學院 MobileDev.TW

產品預期畫面

41

行動開發學院 MobileDev.TW

對話流程人 <-> 人 人 <-> Chatbot/VA

開啟對話 寒暄語Hello、你好、嗨

喚醒語 Invocation系統指定啟動語 Alexa, Hi Siri, OK Google

提出需求 台北的天氣如何？一般人均可直接理解對方的需求

釐清意圖 Intent透過語句解析，確定對方的意圖是什麼

訓練釐清意圖 N/A 由於同一意圖有多種表達方式

所以要多提供例句讓機器對應至特定意圖

取得關鍵資訊

若對方漏說了地方與時間持續問答取得資訊

取出關鍵資訊 Entity預先定義好滿足該意圖所需的關鍵資訊

持續與使用者對話取得所有需求關鍵資訊

確認條件滿足

跟對方確定取得必要資訊後開始進行查詢

依據關鍵資訊與意圖進行下一階段資料查詢(API 介接)

回應 回應查詢結果新聞說今天臺北在下雨，氣溫19度

依據查詢結果以文字、圖形或語音的方式回應

延伸問答 依據目前資訊的延伸問題那明天的狀況也一樣嗎？

須將既有輸入資訊暫存更新資料查詢並進行回應

43

行動開發學院 MobileDev.TW

DialogFlow 運作機制

44

Source:DialogFlow

行動開發學院 MobileDev.TW

Ideas to develop

Source : Dialogflow

45

行動開發學院 MobileDev.TW

鬧鐘管理

46

行動開發學院 MobileDev.TW

應用程式管理

47

行動開發學院 MobileDev.TW

車載資通訊整合

48

行動開發學院 MobileDev.TW

匯率轉換

49

行動開發學院 MobileDev.TW

日期與假日

50

行動開發學院 MobileDev.TW

裝置設定管理

51

行動開發學院 MobileDev.TW

常見問答集

52

行動開發學院 MobileDev.TW

航班預約

53

行動開發學院 MobileDev.TW

外送服務

54

行動開發學院 MobileDev.TW

訂房服務

55

行動開發學院 MobileDev.TW

地圖應用

56

行動開發學院 MobileDev.TW

音樂播放

57

行動開發學院 MobileDev.TW

導航

58

行動開發學院 MobileDev.TW

新聞

59

行動開發學院 MobileDev.TW

電台播放

60

行動開發學院 MobileDev.TW

餐廳預約

61

行動開發學院 MobileDev.TW

閒聊

62

行動開發學院 MobileDev.TW

智慧家庭

63

行動開發學院 MobileDev.TW

技術支援

64

行動開發學院 MobileDev.TW

電視控制

65

行動開發學院 MobileDev.TW

時間相關

66

行動開發學院 MobileDev.TW

小費計算

67

行動開發學院 MobileDev.TW

交通狀況查詢

68

行動開發學院 MobileDev.TW

翻譯

69

行動開發學院 MobileDev.TW

單位轉換

70

行動開發學院 MobileDev.TW

影片播放

71

行動開發學院 MobileDev.TW

音量控制

72

行動開發學院 MobileDev.TW

天氣相關

73

行動開發學院 MobileDev.TW

網路搜尋

74

行動開發學院 MobileDev.TW

練習：功能拆解

• 請挑選上述其中一個範例或自創一個– 列出意圖– 列出關鍵資訊– 列出會需要的資料或是介接的資源

• 也可自行加入其他的創意功能

75

行動開發學院 MobileDev.TW

延伸實作：Backend整合

• 用API.ai取代傳統餐廳預約表單輸入– 將餐廳預約需要的資訊整理至API.ai– 將API.ai產生的變數傳送至餐廳預約系統– 檢查是否有成功預約

• 用API.ai取代Google表單輸入– 將問卷中的問題移至API.ai– 將API.ai產生的變數傳送至Google表單系統– 檢查是否有成功輸入

76

行動開發學院 MobileDev.TW

Wit.ai

77

行動開發學院 MobileDev.TW

新增 APP

78

行動開發學院 MobileDev.TW

增加例句並設定entity

79

行動開發學院 MobileDev.TW

測試 (Settings)

80

onlinecurl.com

行動開發學院 MobileDev.TW

Start your curl• Check response body

81

行動開發學院 MobileDev.TW

Luis.ai

82

行動開發學院 MobileDev.TW

New App

83

行動開發學院 MobileDev.TW

餐廳預約

84

行動開發學院 MobileDev.TW

Create an intent

85

行動開發學院 MobileDev.TW

Intent : 進行餐廳預約

86

行動開發學院 MobileDev.TW

使用情形

• 中文斷詞判斷優於API.ai• 但以注音輸入中文時，按下Enter會被網頁判斷

成輸入完成

87