Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cognitive Service
Search
Ryan Chung
May 29, 2020
Technology
120
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Cognitive Service
Ryan Chung
May 29, 2020
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
320
Design Voice-First Games for Alexa
ryan403
0
87
AI Teaching Talk
ryan403
0
150
jQuery & API Practices
ryan403
0
150
CSS Practices
ryan403
1
180
JavaScript Practices
ryan403
0
110
Web Programming - Lesson 6
ryan403
1
660
Web Programming - Lesson 7
ryan403
1
660
Web Programming - Lesson 5
ryan403
1
460
Other Decks in Technology
See All in Technology
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
iwashi86
3
350
いまさら聞けない人のためのAIコーディング入門
devops_vtj
0
130
AI フレンドリーなエラー監視を TypeScript で実現する
shinyaigeek
2
270
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development with AI-DLC
yoshidashingo
0
150
そのPoC、何を検証したつもりでしたか? AIプロダクトの価値検証で陥った落とし穴
techtekt
PRO
0
150
サイバーセキュリティ概論 / Introduction to Cybersecurity
ks91
PRO
0
170
新しいVibe Codingと”自走”について
watany
4
110
AI活用を推進するために ファインディが下した、一つの小さな決断
starfish719
0
270
Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話
kamekyame
0
170
あなたの AI ワークスペースに、 専門コーダーを連れてくる - Amazon Quick Desktop 最新情報
kawaji_scratch
1
110
地元にいないローカルオーガナイザーの立ち回り
uvb_76
2
1.1k
React、まだ楽しくて草
uhyo
7
4.2k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
Scaling GitHub
holman
464
140k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
220
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
130
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
520
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.3k
ラッコキーワード サービス紹介資料
rakko
1
3.6M
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
530
Skip the Path - Find Your Career Trail
mkilby
1
140
Transcript
微軟Azure認知服務實作 電腦視覺、語言翻譯
微軟認知服務 https://azure.microsoft.com/zh-tw/try/cognitive-services/
辨識服務 MS Cognitive Service • 可聰明地識別、標示及 控管圖片的影像處理演算法。 • 對應複雜資訊和資料,以解決 智慧建議和語意搜尋等工作。
• 讓您的應用程式能夠透過預先建置的指令碼處理自然語言、 評估情感,以及瞭解 如何辨識使用者想要的項目。 • 將語音轉換成文字、使用語音來驗證,或將說話者 辨識新增至您的應用程式。 • 將 Bing 搜尋 API 新增至您的應用程式,並充分利用 以單一 API 呼叫合併數十億個 網頁、影像、影片和新聞的能力。
辨識服務 MS Cognitive Service • 電腦影像 – 分析圖像中的內容 • 圖像概觀
– 不同語言顯示 • 圖像中的文字 – 信用卡卡號辨識 • 文本翻譯 -檢測並翻譯 60 多種支援的語言 • 語句翻譯 – 嘗試不同語言輸入輸出
選擇電腦影像 -> 獲取 API 金鑰
選擇 7 天試用 ( 之後可建立免費Azure帳戶使用)
同意 -> 選擇國家/地區 -> 下一步
選擇任一種帳號進行登錄
一般Azure帳號取得API金鑰程式 https://portal.azure.com/
進入 Azure https://portal.azure.com/
建立服務
取得 API KEY
影像識別:圖片網址
測試
JSON 文件檢視器 http://jsonviewer.stack.hu/
練習一:在圖片下方顯示 AI 產生的圖說
電腦視覺API官方文件 – v2.1 https://westus.dev.cognitive.microsoft.com/docs/services/5cd27ec07268f6c679a3e641/operations/56f91f2e778daf14a499f21b
練習一:在圖片下方顯示 AI 產生的圖說 $("#picDescription").text(data.description.captions[0].text);
練習二:將AI 產生的圖說改成中文 var params = { "visualFeatures": "Categories,Description,Color", "details": "",
"language": "zh", };
延伸練習:改成可以使用本地檔案上傳
延伸練習:改成可以使用本地檔案上傳 Image to analyze: <input type="file" name="inputImage" id="inputImage" data-target="file- uploader"
accept="image/*" /> <!--<button onclick="processImage()">分析圖片</button>--> $("document").ready(function(){ $("#inputImage").change(function(e){ processImage(e.target.files[0]); }); }); function processImage(imageObject) {
延伸練習:改成可以使用本地檔案上傳 //顯示分析的圖片 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, })
影像文字內識別:信用卡號碼辨識
電腦視覺API – 2.1 – 批次讀檔 https://westus.dev.cognitive.microsoft.com/docs/services/5cd27ec07268f6c679a3e641/operations/2afb498089f74080d7e196fc
影像文字內識別:信用卡號碼辨識 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<recognitionArray.length;x++){ if(recognitionArray[x].text.length==19){ $("#RecognitionCardNumber").text(recognitionArray[x].text); } } })
微軟認知服務 – 語言 – 文本翻譯 (需Azure帳號) https://azure.microsoft.com/zh-tw/services/cognitive-services/translator/
Azure 入口 -> 認知服務 -> 建立資源 https://portal.azure.com/
按下 Create 建立資源
輸入基本資料後按下 Create HelloTranslator F0 可選既有的或是新增
取得金鑰
輸入Key與專案網域,執行範例
練習一:將翻譯結果顯示于右方 .done(function(data) { //顯示JSON內容 $("#responseTextArea").val(JSON.stringify(data, null, 2)); $("#translateResult").text(data[0].translations[0].text); })
語言支援 https://docs.microsoft.com/zh-tw/azure/cognitive-services/translator/language-support
練習二:修改翻譯來源與目的語言 https://docs.microsoft.com/zh-tw/azure/cognitive-services/translator/reference/v3-0-translate
練習二:修改翻譯來源與目的語言 let params = { "api-version": 3.0, "to": "en" //"from":
"en", //"to": "zh-Hant", };
辨識服務 MS Cognitive Service • 電腦影像 – 分析圖像中的內容 • 圖像概觀
– 不同語言顯示 • 圖像中的文字 – 信用卡卡號辨識 • 文本翻譯 -檢測並翻譯 60 多種支援的語言 • 語句翻譯 – 嘗試不同語言輸入輸出