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
AI時代における最適なQA組織の作り方
ymty
3
330
AIDLC_ヤフーショッピングの取り組み
lycorptech_jp
PRO
0
400
組織における AI-DLC 実践
askul
0
270
水を運ぶ人としてのリーダーシップ
izumii19
4
1.2k
「勝手に広まる」人気 AI エージェントを爆速で作ろう!(AWS Summit Japan 2026講演資料)
minorun365
PRO
10
2.8k
RAGの精度向上とエージェント活用
kintotechdev
2
110
BPaaSで進むAIオペレーションの現在地 AI実装が効く領域とスケーラビリティの選定と実装
kentarofujii
0
250
product engineering with qa
nealle
0
130
Tech-Verse 2026_Keynote
lycorptech_jp
PRO
0
110
時期が悪い!それでもRaspberry Piを買って遊んで活用するには / 20260627-osc26do-rpi-jikigawarui
akkiesoft
1
960
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
laysakura
2
7.9k
“全部コピーしない”ファイルデータの活用 : — FSx for ONTAP × S3 Tables × Icebergで作るメタデータカタログ
yoshiki0705
0
230
Featured
See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.5k
GraphQLとの向き合い方2022年版
quramy
50
15k
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Rails Girls Zürich Keynote
gr2m
96
14k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
460
A designer walks into a library…
pauljervisheath
211
24k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
190
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
170
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
240
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
490
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 多種支援的語言 • 語句翻譯 – 嘗試不同語言輸入輸出