Successfully reported this slideshow.
Your SlideShare is downloading. ×

Intro to DialogFlow(API.ai) / Wit.ai / Luis.ai

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Voice-First Games for Alexa
Voice-First Games for Alexa
Loading in …3
×

Check these out next

1 of 84 Ad

More Related Content

More from Ryan Chung (20)

Recently uploaded (20)

Advertisement

Intro to DialogFlow(API.ai) / Wit.ai / Luis.ai

  1. 1. 行動開發學院 MobileDev.TW 人工智慧語意分析工具 Dialogflow(API.ai) / Wit.ai / Luis.ai Ryan@iii.org.tw III IT Training Center 1
  2. 2. 行動開發學院 MobileDev.TW 問題 • 如何讓機器人聽得懂人話? – 特定指令 – 日常生活會說的句子 明天下午三點 到北車集合 4月22日15:00在 台北火車站碰面 明天下午三點整在 北平西路3號會合 哈摟!我看明天我們 就在台北車站碰面好 了,下午三點,要記 得哦 ㄟ,還記得明天的約 會嗎?是下午三點, 在火車站,別遲到! 提醒你一下,三點在 北車碰頭,不見不散 ! 2
  3. 3. 行動開發學院 MobileDev.TW 天氣機器人開發 1.0 • 目標 – 輸入:時間、地點 – 回傳:天氣概況、溫度 • 介面 – 網頁 • 工具/技術 – API.ai – AJAX 3
  4. 4. 行動開發學院 MobileDev.TW API.ai 4
  5. 5. 行動開發學院 MobileDev.TW Create New Agent 5
  6. 6. 行動開發學院 MobileDev.TW Create New Agent 6
  7. 7. 行動開發學院 MobileDev.TW 語意分析常見名詞 • Intent 意圖 – 使用者對談的目的 • Entity 關鍵資訊 – 達成目的的必要輸入資訊 • Utterance 例句 – 使用者常用的句型 7
  8. 8. 行動開發學院 MobileDev.TW Create Intent 8
  9. 9. 行動開發學院 MobileDev.TW 標示必要資訊,並引導使用者輸入 9
  10. 10. 行動開發學院 MobileDev.TW 追問出日期 10
  11. 11. 行動開發學院 MobileDev.TW 追問出城市 11
  12. 12. 行動開發學院 MobileDev.TW 設定確認取得查詢資訊的回應 Agent Trained Complete 12
  13. 13. 行動開發學院 MobileDev.TW 測試看看 13
  14. 14. 行動開發學院 MobileDev.TW 整合至網頁 14 https://gist.github.com/Gugic/cfc008599fa9a82eeba4127648009132
  15. 15. 行動開發學院 MobileDev.TW 修改網頁 • Client access token 15
  16. 16. 行動開發學院 MobileDev.TW 開始有回應 16
  17. 17. 行動開發學院 MobileDev.TW 修改顯示的回應內容 • 只顯示想要給使用者看的內容 17
  18. 18. 行動開發學院 MobileDev.TW 顯示出對話記錄 18
  19. 19. 行動開發學院 MobileDev.TW 顯示出對話記錄 19
  20. 20. 行動開發學院 MobileDev.TW 結合Open Weather Map http://openweathermap.org/ 20
  21. 21. 行動開發學院 MobileDev.TW Get API Key https://openweathermap.org/appid 21
  22. 22. 行動開發學院 MobileDev.TW API - By city name 22
  23. 23. 行動開發學院 MobileDev.TW 取得天氣資訊 • 確定交談動作完成時,開始取得資料 23
  24. 24. 行動開發學院 MobileDev.TW 取得天氣資訊 • 依城市名稱進行天氣資訊查詢 24
  25. 25. 行動開發學院 MobileDev.TW jQuery.ajax() 25 http://api.jquery.com/jquery.ajax/
  26. 26. 行動開發學院 MobileDev.TW jQuery.getJSON() 26 http://api.jquery.com/jquery.getjson/
  27. 27. 行動開發學院 MobileDev.TW 簡易版天氣機器人完成 27
  28. 28. 行動開發學院 MobileDev.TW 回顧一下,我們串了什麼? 輸入 查詢 HTML5 網頁 雲端處理機制 語意分析 判斷輸入 使用者介面網際網路資源 開放資料 天氣 API 28
  29. 29. 行動開發學院 MobileDev.TW 輸入與輸出 How is the weather today in Taipei? 時間:Today 地點:Taipei 取得 當天氣溫 天氣描述 29
  30. 30. 行動開發學院 MobileDev.TW 延伸實作一 • 如何查詢特定日期天氣? – 使用OpenWeatherMap的五日預測 30 https://openweathermap.org/forecast5
  31. 31. 行動開發學院 MobileDev.TW 五日預測會拿到什麼? • list – 陣列 – 所有預測資料 • main["temp"] – 氣溫 • weather["description"] – 天氣描述 • dt_txt – 日期時間 31
  32. 32. 行動開發學院 MobileDev.TW 修改程式碼 • 更換呼叫的網址 32 • 找到對應的日期,回傳資料 – 使用迴圈 – 使用字串切割 – 找到之後,跳離迴圈
  33. 33. 行動開發學院 MobileDev.TW 延伸實作二 • 如何在網頁上顯示天氣概況圖? – 回傳的weather陣列中的資料,有一個icon 34
  34. 34. 行動開發學院 MobileDev.TW icon值即為天氣圖的檔案名稱 • http://openweathermap.org/img/w/03n.png 35
  35. 35. 行動開發學院 MobileDev.TW 練習 • 在網頁上增加一個顯示圖片的元件 • 取得網址後,進行顯示 36
  36. 36. 行動開發學院 MobileDev.TW 多國語系支援 38 • lang=zh_tw
  37. 37. 行動開發學院 MobileDev.TW 練習:電影機器人開發 1.0 • 目標 – 輸入:電影名稱 – 回傳:簡介、海報 • 介面 – 網頁 • 工具/技術 – API.ai – AJAX • 資料 – theMovieDB.org 39
  38. 38. 行動開發學院 MobileDev.TW Dialogflow – 自訂句型 • 你知道XXX在演什麼嗎? • 我想問XXX的劇情是什麼 40 Dialogflow – 自訂關鍵資訊 • 將XXX的部分設定成關鍵資訊會出現的地方
  39. 39. 行動開發學院 MobileDev.TW 產品預期畫面 41
  40. 40. 行動開發學院 MobileDev.TW 對話流程 人 <-> 人 人 <-> Chatbot/VA 開啟對話 寒暄語 Hello、你好、嗨 喚醒語 Invocation 系統指定啟動語 Alexa, Hi Siri, OK Google 提出需求 台北的天氣如何? 一般人均可直接理解對方的需求 釐清意圖 Intent 透過語句解析,確定對方的意圖是什麼 訓練 釐清意圖 N/A 由於同一意圖有多種表達方式 所以要多提供例句讓機器對應至特定意圖 取得 關鍵資訊 若對方漏說了地方與時間 持續問答取得資訊 取出關鍵資訊 Entity 預先定義好滿足該意圖所需的關鍵資訊 持續與使用者對話取得所有需求關鍵資訊 確認 條件滿足 跟對方確定取得必要資訊後 開始進行查詢 依據關鍵資訊與意圖 進行下一階段資料查詢(API 介接) 回應 回應查詢結果 新聞說今天臺北在下雨,氣溫19度 依據查詢結果 以文字、圖形或語音的方式回應 延伸問答 依據目前資訊的延伸問題 那明天的狀況也一樣嗎? 須將既有輸入資訊暫存 更新資料查詢並進行回應 43
  41. 41. 行動開發學院 MobileDev.TW DialogFlow 運作機制 44 Source: Dialog Flow
  42. 42. 行動開發學院 MobileDev.TW Ideas to develop Source : Dialogflow 45
  43. 43. 行動開發學院 MobileDev.TW 鬧鐘管理 46
  44. 44. 行動開發學院 MobileDev.TW 應用程式管理 47
  45. 45. 行動開發學院 MobileDev.TW 車載資通訊整合 48
  46. 46. 行動開發學院 MobileDev.TW 匯率轉換 49
  47. 47. 行動開發學院 MobileDev.TW 日期與假日 50
  48. 48. 行動開發學院 MobileDev.TW 裝置設定管理 51
  49. 49. 行動開發學院 MobileDev.TW 常見問答集 52
  50. 50. 行動開發學院 MobileDev.TW 航班預約 53
  51. 51. 行動開發學院 MobileDev.TW 外送服務 54
  52. 52. 行動開發學院 MobileDev.TW 訂房服務 55
  53. 53. 行動開發學院 MobileDev.TW 地圖應用 56
  54. 54. 行動開發學院 MobileDev.TW 音樂播放 57
  55. 55. 行動開發學院 MobileDev.TW 導航 58
  56. 56. 行動開發學院 MobileDev.TW 新聞 59
  57. 57. 行動開發學院 MobileDev.TW 電台播放 60
  58. 58. 行動開發學院 MobileDev.TW 餐廳預約 61
  59. 59. 行動開發學院 MobileDev.TW 閒聊 62
  60. 60. 行動開發學院 MobileDev.TW 智慧家庭 63
  61. 61. 行動開發學院 MobileDev.TW 技術支援 64
  62. 62. 行動開發學院 MobileDev.TW 電視控制 65
  63. 63. 行動開發學院 MobileDev.TW 時間相關 66
  64. 64. 行動開發學院 MobileDev.TW 小費計算 67
  65. 65. 行動開發學院 MobileDev.TW 交通狀況查詢 68
  66. 66. 行動開發學院 MobileDev.TW 翻譯 69
  67. 67. 行動開發學院 MobileDev.TW 單位轉換 70
  68. 68. 行動開發學院 MobileDev.TW 影片播放 71
  69. 69. 行動開發學院 MobileDev.TW 音量控制 72
  70. 70. 行動開發學院 MobileDev.TW 天氣相關 73
  71. 71. 行動開發學院 MobileDev.TW 網路搜尋 74
  72. 72. 行動開發學院 MobileDev.TW 練習:功能拆解 • 請挑選上述其中一個範例或自創一個 – 列出意圖 – 列出關鍵資訊 – 列出會需要的資料或是介接的資源 • 也可自行加入其他的創意功能 75
  73. 73. 行動開發學院 MobileDev.TW 延伸實作:Backend整合 • 用API.ai取代傳統餐廳預約表單輸入 – 將餐廳預約需要的資訊整理至API.ai – 將API.ai產生的變數傳送至餐廳預約系統 – 檢查是否有成功預約 • 用API.ai取代Google表單輸入 – 將問卷中的問題移至API.ai – 將API.ai產生的變數傳送至Google表單系統 – 檢查是否有成功輸入 76
  74. 74. 行動開發學院 MobileDev.TW Wit.ai 77
  75. 75. 行動開發學院 MobileDev.TW 新增 APP 78
  76. 76. 行動開發學院 MobileDev.TW 增加例句並設定entity 79
  77. 77. 行動開發學院 MobileDev.TW 測試 (Settings) 80 onlinecurl.com
  78. 78. 行動開發學院 MobileDev.TW Start your curl • Check response body 81
  79. 79. 行動開發學院 MobileDev.TW Luis.ai 82
  80. 80. 行動開發學院 MobileDev.TW New App 83
  81. 81. 行動開發學院 MobileDev.TW 餐廳預約 84
  82. 82. 行動開發學院 MobileDev.TW Create an intent 85
  83. 83. 行動開發學院 MobileDev.TW Intent : 進行餐廳預約 86
  84. 84. 行動開發學院 MobileDev.TW 使用情形 • 中文斷詞判斷優於API.ai • 但以注音輸入中文時,按下Enter會被網頁判斷 成輸入完成 87

×