Cognitive Service - Speaker Deck

Slide 1

Slide 1 text

微軟Azure認知服務實作電腦視覺、語言翻譯

Slide 2

Slide 2 text

微軟認知服務 https://azure.microsoft.com/zh-tw/try/cognitive-services/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

辨識服務 MS Cognitive Service • 電腦影像 – 分析圖像中的內容 • 圖像概觀 – 不同語言顯示 • 圖像中的文字 – 信用卡卡號辨識 • 文本翻譯 -檢測並翻譯 60 多種支援的語言 • 語句翻譯 – 嘗試不同語言輸入輸出

Slide 5

Slide 5 text

選擇電腦影像 -> 獲取 API 金鑰

Slide 6

Slide 6 text

選擇 7 天試用 ( 之後可建立免費Azure帳戶使用)

Slide 7

Slide 7 text

同意 -> 選擇國家/地區 -> 下一步

Slide 8

Slide 8 text

選擇任一種帳號進行登錄

Slide 9

Slide 9 text

一般Azure帳號取得API金鑰程式 https://portal.azure.com/

Slide 10

Slide 10 text

進入 Azure https://portal.azure.com/

Slide 11

Slide 11 text

建立服務

Slide 12

Slide 12 text

取得 API KEY

Slide 13

Slide 13 text

影像識別：圖片網址

Slide 14

Slide 14 text

測試

Slide 15

Slide 15 text

JSON 文件檢視器 http://jsonviewer.stack.hu/

Slide 16

Slide 16 text

練習一：在圖片下方顯示 AI 產生的圖說

Slide 17

Slide 17 text

電腦視覺API官方文件 – v2.1 https://westus.dev.cognitive.microsoft.com/docs/services/5cd27ec07268f6c679a3e641/operations/56f91f2e778daf14a499f21b

Slide 18

Slide 18 text

練習一：在圖片下方顯示 AI 產生的圖說 $("#picDescription").text(data.description.captions[0].text);

Slide 19

Slide 19 text

練習二：將AI 產生的圖說改成中文 var params = { "visualFeatures": "Categories,Description,Color", "details": "", "language": "zh", };

Slide 20

Slide 20 text

延伸練習：改成可以使用本地檔案上傳

Slide 21

Slide 21 text

延伸練習：改成可以使用本地檔案上傳 Image to analyze: $("document").ready(function(){ $("#inputImage").change(function(e){ processImage(e.target.files[0]); }); }); function processImage(imageObject) {

Slide 22

Slide 22 text

延伸練習：改成可以使用本地檔案上傳 //顯示分析的圖片 var sourceImageUrl = URL.createObjectURL(imageObject); document.querySelector("#sourceImage").src = sourceImageUrl; //送出分析 $.ajax({ url: uriBase + "?" + $.param(params), // Request header beforeSend: function(xhrObj){ xhrObj.setRequestHeader("Content-Type","application/octet-stream"); xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); }, type: "POST", processData:false, contentType:false, // Request body data: imageObject, })

Slide 23

Slide 23 text

影像文字內識別：信用卡號碼辨識

Slide 24

Slide 24 text

電腦視覺API – 2.1 – 批次讀檔 https://westus.dev.cognitive.microsoft.com/docs/services/5cd27ec07268f6c679a3e641/operations/2afb498089f74080d7e196fc

Slide 25

Slide 25 text

影像文字內識別：信用卡號碼辨識 let endpoint = "https://westcentralus.api.cognitive.microsoft.com/"; if (!subscriptionKey) { throw new Error('Set your environment variables for your subscrip tion key and endpoint.'); } var uriBase = endpoint + "vision/v2.1/read/core/asyncBatchAnalyze"; .done(function(data) { // Show formatted JSON on webpage. $("#responseTextArea").val(JSON.stringify(data, null, 2)); let recognitionArray = data.recognitionResults[0].lines; for(let x=0; x

Slide 26

Slide 26 text

微軟認知服務 – 語言 – 文本翻譯 (需Azure帳號) https://azure.microsoft.com/zh-tw/services/cognitive-services/translator/

Slide 27

Slide 27 text

Azure 入口 -> 認知服務 -> 建立資源 https://portal.azure.com/

Slide 28

Slide 28 text

按下 Create 建立資源

Slide 29

Slide 29 text

輸入基本資料後按下 Create HelloTranslator F0 可選既有的或是新增

Slide 30

Slide 30 text

取得金鑰

Slide 31

Slide 31 text

輸入Key與專案網域，執行範例

Slide 32

Slide 32 text

練習一：將翻譯結果顯示于右方 .done(function(data) { //顯示JSON內容 $("#responseTextArea").val(JSON.stringify(data, null, 2)); $("#translateResult").text(data[0].translations[0].text); })

Slide 33

Slide 33 text

語言支援 https://docs.microsoft.com/zh-tw/azure/cognitive-services/translator/language-support

Slide 34

Slide 34 text

練習二：修改翻譯來源與目的語言 https://docs.microsoft.com/zh-tw/azure/cognitive-services/translator/reference/v3-0-translate

Slide 35

Slide 35 text

練習二：修改翻譯來源與目的語言 let params = { "api-version": 3.0, "to": "en" //"from": "en", //"to": "zh-Hant", };