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
330
Design Voice-First Games for Alexa
ryan403
0
88
AI Teaching Talk
ryan403
0
150
jQuery & API Practices
ryan403
0
160
CSS Practices
ryan403
1
180
JavaScript Practices
ryan403
0
110
Web Programming - Lesson 6
ryan403
1
670
Web Programming - Lesson 7
ryan403
1
660
Web Programming - Lesson 5
ryan403
1
470
Other Decks in Technology
See All in Technology
MySQL & MySQL HeatWave Report - June 2026
freshdaz
0
270
WebGIS AI Agentの紹介
_shimizu
0
610
デジタル・デザイン:次の50年を描く「進化する青写真」
y150saya
0
750
#エンジニアBooks 30分でわかる 「技術記事を書く技術」 / engineer-books 2026-06-30
jnchito
1
160
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
saorimurooka
1
450
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
shift_evolve
PRO
4
1.6k
IaC コードを資産へ:AWS CDK 社内ライブラリと横断展開 / aws-summit-japan-2026
gotok365
10
1.7k
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
taddy_919
1
310
クラウドファンディング版StackChan 3体(4体)をインタラクティブな体験型作品にして展示もした話 / スタックチャンお誕生日会2026
you
PRO
0
270
スタートアップにおけるアジャイルの実践について #shibuyagile
murabayashi
3
1.9k
5分でわかるDuckDB Quack
chanyou0311
4
290
ご挨拶「10周年を迎える共創ラボのこれまでとこれから」
iotcomjpadmin
0
170
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
2
280
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
880
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Into the Great Unknown - MozCon
thekraken
41
2.6k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
750
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
430
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 多種支援的語言 • 語句翻譯 – 嘗試不同語言輸入輸出