上傳照片到微軟認知服務Computer Vision API,使用 Makeblock CamVision

本範例可將所拍攝的照片上傳到微軟認知服務Computer Vision API,經辨識之後可取得以下資料 (English version please click me):

  • 照片說明(a cat laying on a bed)
  • 前景主色(灰色)
  • 背景主色(灰色)
  • 相片標籤(indoor, cat, wall, laying)

使用 Makeblock 所開發的 CamVision extension 檔,另外也有控制其 mBot 機器人平台的 extension,我們也在測試中喔

注意:

  1. 點選 Prepare 按鍵時,會把相機開起來(這時並沒有跳到拍攝預覽畫面,但的確已經開啟),因此其他會用到相機的程式,例如條碼掃描程式(下載 apk 用) 會無法使用。請先關閉本程式再使用其他相機程式。

使用的照片:

img20160917130103

辨識結果如下圖:

  • 照片說明(a cat laying on a bed)
  • 前景主色(灰色)
  • 背景主色(灰色)
  • 相片標籤(indoor, cat, wall, laying)

screenshot_2016-09-17-13-47-41-29


申請微軟認知服務 API 金鑰

請用您的微軟帳號(@msn.com,哇哈哈我的還可以用,@hotmail.com) 登入微軟認知服務。請點選 APIs -> Computer Vision ,最後點選 Getting Started for free。

ms07

請勾選 Computer Vision,可以看到免費方案的限制為每個月5,000次呼叫,每分鐘20次(應該夠用)

ms01

申請成功之後,可以看到在 Computer Vision 下有兩把金鑰,請點選 Show 之後將該金鑰內容複製到 App Inventor 程式中。

ms02

您也可點選 Show Quota 看一下已用掉幾次呼叫

ms06






程式說明

請先匯入 Makeblock 的 CamVision aix檔(建議另外存檔起來以免哪一天不見了)

延伸閱讀:如何匯入 .aix 擴充元件到 App Inventor 測試伺服器

Designer 頁面

  1. Button_Prepare:開啟照相機、設定API Key
  2. Button_Photo:照相
  3. Label:顯示 Microsoft Computer Vision API 辨識結果 - 相片描述、前景主色、背景主色
  4. ListView:顯示 Microsoft Computer Vision API 辨識結果 - 標籤
  5. CamVision:負責上傳照片到 Microsoft Computer Vision API 並取得回傳結果。

ms05

Blocks 頁面

Step1:

宣告變數。點選 Button_Prepare之後會打開照相機(此時其他會用到相機的程式已不可用),設定 API Key,如果順利打開照相機的話,會在 Screen Title 上顯示 true 字樣。

接著再點選 Button_Photo,這時會拍攝一張照片 (本範例沒有將照片顯示在畫面中)。如果順利拍攝照片話,會在 Screen Title 上顯示 true 字樣。

ms03

STEP2:

照相完成之後,會自動呼叫 CamVision.AfterPictureTaken事件,將照片上傳到雲端。

接著會呼叫 CamVision.AfterComputerVisionResult事件,將相關結果都顯示出來。在此我們想知道的資訊有:辨識結果(DescriptionFromCV)、前景主色(ForegroundColorNameFromCV)、背景主色(BackgroundColorNameFromCV)與標籤(TagsFromCV)。

請注意如果API錯誤的話,將無法取得結果。

ms04

ċ
MS_CognitiveService.aia
(69k)
曾吉弘,
2016年9月16日 下午11:16
ċ
MS_CognitiveService.apk
(1525k)
曾吉弘,
2016年9月16日 下午11:16
ċ
com.makeblock.appinventor.CamVision.aix
(20k)
曾吉弘,
2016年9月16日 下午11:20
Comments