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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
340
Design Voice-First Games for Alexa
ryan403
0
93
AI Teaching Talk
ryan403
0
150
jQuery & API Practices
ryan403
0
170
CSS Practices
ryan403
1
180
JavaScript Practices
ryan403
0
120
Web Programming - Lesson 6
ryan403
1
680
Web Programming - Lesson 7
ryan403
1
670
Web Programming - Lesson 5
ryan403
1
480
Other Decks in Technology
See All in Technology
AndroidでHDRメディアを「壊さずに」扱う
chigichan24
0
400
Autonomous AI Databaseサービス・アップデート(FY27)/ adb-service-update-jp-fy27
oracle4engineer
PRO
0
110
AIで仕事のやり方を変える
matsu7874
1
530
Nav2、Nav3 ... はたまた自作?〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
yanzm
0
230
少人数データチームのDevin活用実践事例
runandy16
2
440
20260906 「AWS運用入門」著者が教える、運用業務への生成AI活用入門
masaruogura
0
230
Bet AI Day 2026丨AIを「使う」から、AIが「働く」へ ― LayerXが進める「組織AI」の社会実装
layerx
PRO
3
2.2k
Benchmarking Vector Databases: pgvector vs. LanceDB
tsho
0
140
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
layerx
PRO
3
2.1k
Guerilla InnerSource in enterprises, during the AI hype
onenashev
PRO
0
150
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
0
190
スクラムで身についていた動き方を、XPで捉え直してみた
codmoninc
PRO
1
200
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
10k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
260
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
260
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
320
4 Signs Your Business is Dying
shpigford
187
23k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
190
Deep Space Network (abreviated)
tonyrice
0
290
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.3k
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 多種支援的語言 • 語句翻譯 – 嘗試不同語言輸入輸出