Service Integration Workshop

Slide 1

Slide 1 text

Service Integration – [email protected] Service Integration – Chatbot & Custom Vision AI III Digital Education Institute Source : https://sijieand500words.com Ryan Chung 未來之星 – 菁英培育計畫 1

Slide 2

Slide 2 text

Service Integration – [email protected] 資策會數位教育研究所 ² 最新科技進修 Ø 在職夜間假日進修 Ø 轉職全天養成班 ² 資訊技術充電站 Ø 國際技術趨勢 Ø 職場必備能力 Ø 基本資訊技能 http://taipei.iiiedu.org.tw/ 2

Slide 3

Slide 3 text

Service Integration – [email protected] Ryan Chung ² 主要教授科目 Ø 語音助理應用開發 Ø Chatbot應用開發 Ø Web / App 應用 ² 資策會數位教育研究所 Ø 課程經理 / 養成班導師 Ø 企業包班 / 政府專案經理 Ø 課程專任講師 /專題輔導 http://mobiledev.tw/ryan 3

Slide 4

Slide 4 text

Service Integration – [email protected] AWS AI https://aws.amazon.com/tw/amazon-ai/ 4

Slide 5

Slide 5 text

Service Integration – [email protected] AWS機器學習服務種類 • 架構 Framework & Infrastructure –Apache MXNet、Caffe & Caffe 2、Tensorflow • 平台 Machine Learning platform –Apache Spark on Amazon EMR、SparkML • 服務 API-driven service –影像辨識 Rekognition、文字轉語音 Polly –聊天機器人 Lex • 模型 Model • 實體 Optimized Instance & Machine Image 5

Slide 6

Slide 6 text

Service Integration – [email protected] AWS ML Stack 6

Slide 7

Slide 7 text

Service Integration – [email protected] Amazon AI 應用服務 • 推薦系統 –Two Decades of Recommender Systems at Amazon.com • 語音助理 –Amazon Alexa • 無人商店 7 Source:The Verge

Slide 8

Slide 8 text

Service Integration – [email protected] Amazon Comprehend • 語言識別、關鍵資訊擷取、理解正面負面 https://aws.amazon.com/tw/comprehend/ 8

Slide 9

Slide 9 text

Service Integration – [email protected] Amazon Polly • 文字 -> 語音 • 接近真人語音 • 52種聲音、25國語言 • 速度快、準確度高 • 可重複播放使用 9

Slide 10

Slide 10 text

Service Integration – [email protected] SSML • say-as –一個字一個字念 • prosody –可調整速度、大小聲 • lang –可以穿插別國語言 https://developer.amazon.com/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html 10

Slide 11

Slide 11 text

Service Integration – [email protected] 使用案例 • This app allows you to easily convert any publicly available RSS content into audio Podcasts, so you can listen to your favorite blogs on mobile devices instead of reading them. https://github.com/aws-samples/amazon-polly-sample Source: meccanismocomplesso.org 11

Slide 12

Slide 12 text

Service Integration – [email protected] 微軟認知服務 https://azure.microsoft.com/zh-tw/services/cognitive-services/ 12

Slide 13

Slide 13 text

Service Integration – [email protected] 辨識服務 MS Cognitive Service • 辨識 – 可聰明地識別、標示及控管圖片的影像處理演算法。 • 知識 – 對應複雜資訊和資料，以解決智慧建議和語意搜尋等工作。 • 語言 – 讓您的應用程式能夠透過預先建置的指令碼處理自然語言、評估情感，以及了解如何辨識使用者想要的項目。 • 語音 – 將語音轉換成文字、使用語音來驗證，或將說話者辨識新增至您的應用程式。 • 搜尋 – 將 Bing 搜尋 API 新增至您的應用程式，並充分利用以單一 API 呼叫合併數十億個網頁、影像、影片和新聞的能力。 13

Slide 14

Slide 14 text

Service Integration – [email protected] 影像識別：圖片網址 • 輸入圖片網址，可回傳圖片資訊 14

Slide 15

Slide 15 text

Service Integration – [email protected] 選取 Computer Vision API https://azure.microsoft.com/zh-tw/services/cognitive-services/computer-vision/ 15

Slide 16

Slide 16 text

Service Integration – [email protected] 同意條款並登入帳號 16

Slide 17

Slide 17 text

Service Integration – [email protected] 進入 Azure • 左下角 More services -> Cognitive Services https://portal.azure.com 17

Slide 18

Slide 18 text

Service Integration – [email protected] 建立服務 18

Slide 19

Slide 19 text

Service Integration – [email protected] 取得 API KEY 19

Slide 20

Slide 20 text

Service Integration – [email protected] 測試 • 下載範例 https://ppt.cc/fxtPvx • 填上API KEY，開始測試 20

Slide 21

Slide 21 text

Service Integration – [email protected] Custom Vision https://www.customvision.ai 21

Slide 22

Slide 22 text

Service Integration – [email protected] 建立專案 • New Project -> Add images • 標記Tag，至少5張照片 –In Classroom • 訓練 • Quick Test 22

Slide 23

Slide 23 text

Service Integration – [email protected] In Classroom 23

Slide 24

Slide 24 text

Service Integration – [email protected] Quick Test 24

Slide 25

Slide 25 text

Service Integration – [email protected] Face API https://azure.microsoft.com/zh-tw/services/cognitive-services/face/ 25

Slide 26

Slide 26 text

Service Integration – [email protected] 臉部驗證 • 檢查兩張臉部是屬於同一個人的可能性。API 會傳回信心分數，顯示兩張臉部是屬於同一個人的可能性。 26

Slide 27

Slide 27 text

Service Integration – [email protected] Microsoft Case – Baby Come Home https://www.youtube.com/watch?v=AuXnVF_nFws 27

Slide 28

Slide 28 text

Service Integration – [email protected] 臉部偵測 • 偵測影像中的一或多張人臉，並取得影像臉部位置所在的臉部矩形及臉部屬性，該屬性內含以機器學習為基礎的臉部特徵預測。可用的臉部屬性功能包括：年齡、表情、性別、姿勢、微笑及鬍子，以及影像中每張臉部的 27 個地標。 28

Slide 29

Slide 29 text

Service Integration – [email protected] 其他服務 29

Slide 30

Slide 30 text

Service Integration – [email protected] 整合案例實作 Source: https://www.jiuwa.net 30

Slide 31

Slide 31 text

Service Integration – [email protected] 這是不是肯德基 • 語意分析 + 聊天機器人+ 認知服務 + 部署上線 DialogFlow • 意圖：判斷品牌 • 資料：品牌名稱認知服務 Custom Vision Service • 圖片分類 MS Bot Framework Bot Channels Registration 31

Slide 32

Slide 32 text

Service Integration – [email protected] DialogFlow • Agent：tellKFCbot • 語言：zh-TW • Intent：Is it KFC 訓練例句 32

Slide 33

Slide 33 text

Service Integration – [email protected] Action and parameters 33

Slide 34

Slide 34 text

Service Integration – [email protected] Response 34

Slide 35

Slide 35 text

Service Integration – [email protected] Setting • V1 API 35

Slide 36

Slide 36 text

Service Integration – [email protected] 建立開發專案 • 專案資料夾：tellKFCBot • 主要程式：index.js • 終端機指令 npm init • package.json 在scripts中增加 "start":"node index.js", "debug":"node --inspect index.js" 36

Slide 37

Slide 37 text

Service Integration – [email protected] index.js 37

Slide 38

Slide 38 text

Service Integration – [email protected] index.js 38

Slide 39

Slide 39 text

Service Integration – [email protected] index.js 39

Slide 40

Slide 40 text

Service Integration – [email protected] index.js 40 https://ppt.cc/fpq6vx

Slide 41

Slide 41 text

Service Integration – [email protected] Custom Vision • Name：tell-KFC • Project Type：Classification • Domains：Food • Create Project https://www.customvision.ai/projects 41

Slide 42

Slide 42 text

Service Integration – [email protected] 上傳KFC照片，按下Train開始訓練 42

Slide 43

Slide 43 text

Service Integration – [email protected] Performance -> Prediction URL 43

Slide 44

Slide 44 text

Service Integration – [email protected] 套件安裝 • 終端機： npm-install-all index.js • 新增 .gitignore 檔案 –裡面寫：node_modules/ • Bot Framework版本 – 範例為v3 npm i -S [email protected] 44

Slide 45

Slide 45 text

Service Integration – [email protected] 部署至Heroku • 右上角 New -> Create new app • 設定App name：tell-kfc-bot • 區域：美國 • Create App 45

Slide 46

Slide 46 text

Service Integration – [email protected] 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中的專案名稱哦！通常長得像 tell-kfc-bot-xxyyzz 46

Slide 47

Slide 47 text

Service Integration – [email protected] 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記在這裡寫上這次更新的內容之後code更新時再加這一步第一次不用 47

Slide 48

Slide 48 text

Service Integration – [email protected] 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 48

Slide 49

Slide 49 text

Service Integration – [email protected] 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 49

Slide 50

Slide 50 text

Service Integration – [email protected] 使用Azure Bot頻道訂閱服務 • 進入 portal.azure.com • 上方搜尋Bot Channels Registration • Bot name：tellKFCBotMMDD • Pricing tier：F0 • Messaging endpoint：heroku網址/api/messages • Application Insights：Off • 點擊App ID and password – Create New – Create App ID in the App Registration Portal – 產生完後，記下來，貼回Azure與程式碼中 • Create 50

Slide 51

Slide 51 text

Service Integration – [email protected] 設定EndPoint • Settings -> 設定Messaging endpoint https://your-project-name.herokuapp.com/api/messages • 完成後按下上方Save 51

Slide 52

Slide 52 text

Service Integration – [email protected] Test in Web Chat • 在Azure雲端上的Web Chat進行測試 52

Slide 53

Slide 53 text

Service Integration – [email protected] 測試 53

Slide 54

Slide 54 text

Service Integration – [email protected] Channels • 依需求再開通哪些頻道可使用服務 54

Slide 55

Slide 55 text

Service Integration – [email protected] Recap for Developer • 新一代的開發者：Connector • 使用者介面、處理機制與雲端資源 • Node.js 在潮流中倍受重視 • 語音助理/Chatbot 設計的第一步是釐清目標 Source : https://sijieand500words.com

Slide 56

Slide 56 text

Service Integration – [email protected] Recap for All • 自然語言交談介面裝置將大舉進入你的生活 • 語言和文化密不可分，跨領域合作優化服務 • 多元化的後端服務與資料，將產生殺手級應用

Slide 57

Slide 57 text

Service Integration – [email protected] 敬請指教 Ryan Chung Senior Engineer III Digital Education Institute [email protected] 57