Node.jsでAzure Face APIを使ってみる

-
Node.jsでAzure Face APIを使ってみる:

写真から顔を認識して、その人の性別や年齢、どういった感情なのか、などを抽出してみます。

せっかくの岩手県立大学アドベントカレンダーなので例の写真でも試してみます。



68747470733a2f2f692e6779617a6f2e636f6d2f


@isseiumさんのnoteは今年の岩手県立大学アドベントカレンダーのMVPに違いありません。

では、やっていき。


Microsoft Azure Face API

まず、今回はこのAPIを使ってます。

https://azure.microsoft.com/ja-jp/services/cognitive-services/face/





写真を送るとその写真の中に写ってる人の情報を教えてくれるAPIです。

結構色々な情報が分かります。

Face APIとは?


無料で試していく

トップページの試すから進みます。



68747470733a2f2f692e6779617a6f2e636f6d2f


とりまゲストで無料でやります。



68747470733a2f2f692e6779617a6f2e636f6d2f


進むとAPIキーを取得できます。



スクリーンショット 2018-12-22 15.55.16.png


このキーをメモっておいてください。そのままクイックスタートガイドに行くとこの画面見つけにくいので別タブで開いたりがいいかも。


サンプルを試す

サンプルを試す際にはrequestモジュールを利用するみたいなのでインストールします。

$ npm i request
app.js
'use strict'; 
 
const request = require('request'); 
const subscriptionKey = 'ここにキーを指定'; //キーを指定 
const uriBase = 'https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect'; 
 
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/37/Dagestani_man_and_woman.jpg'; 
 
// Request parameters. 
const params = { 
    'returnFaceId': 'true', 
    'returnFaceLandmarks': 'false', 
    'returnFaceAttributes': 'age,gender,headPose,smile,facialHair,glasses,' + 
    'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise' 
}; 
 
const options = { 
    uri: uriBase, 
    qs: params, 
    body: '{"url": ' + '"' + imageUrl + '"}', 
    headers: { 
        'Content-Type': 'application/json', 
        'Ocp-Apim-Subscription-Key' : subscriptionKey 
    } 
}; 
 
request.post(options, (error, response, body) => { 
  if (error) { 
    console.log('Error: ', error); 
    return; 
  } 
  let jsonResponse = JSON.stringify(JSON.parse(body), null, '  '); 
  console.log('JSON Response\n'); 
  console.log(jsonResponse); 
});
実行してみましょう。このサンプルコードは特定の画像のパスを渡すと顔情報を教えてくれるといった内容です。



68747470733a2f2f75706c6f61642e77696b696d


$ node app.js 
JSON Response 
 
[ 
  { 
    "faceId": "d39b53cb-a188-4c7c-a791-40e4158e4c97", 
    "faceRectangle": { 
      "top": 621, 
      "left": 616, 
      "width": 195, 
      "height": 195 
    }, 
    "faceAttributes": { 
      "smile": 0, 
      "headPose": { 
        "pitch": 0, 
        "roll": 6.8, 
        "yaw": 3.7 
      }, 
      "gender": "male", 
      "age": 37, 
      "facialHair": { 
        "moustache": 0.4, 
        "beard": 0.4, 
        "sideburns": 0.1 
      }, 
      "glasses": "NoGlasses", 
      "emotion": { 
        "anger": 0, 
        "contempt": 0, 
        "disgust": 0, 
        "fear": 0, 
        "happiness": 0, 
        "neutral": 0.999, 
        "sadness": 0.001, 
        "surprise": 0 
      }, 
      "blur": { 
        "blurLevel": "high", 
        "value": 0.89 
      }, 
      "exposure": { 
        "exposureLevel": "goodExposure", 
        "value": 0.51 
      }, 
      "noise": { 
        "noiseLevel": "medium", 
        "value": 0.59 
      }, 
      "makeup": { 
        "eyeMakeup": true, 
        "lipMakeup": false 
      }, 
      "accessories": [], 
      "occlusion": { 
        "foreheadOccluded": false, 
        "eyeOccluded": false, 
        "mouthOccluded": false 
      }, 
      "hair": { 
        "bald": 0.04, 
        "invisible": false, 
        "hairColor": [ 
          { 
            "color": "black", 
            "confidence": 0.98 
          }, 
          { 
            "color": "brown", 
            "confidence": 0.87 
          }, 
          { 
            "color": "gray", 
            "confidence": 0.85 
          }, 
          { 
            "color": "other", 
            "confidence": 0.25 
          }, 
          { 
            "color": "blond", 
            "confidence": 0.07 
          }, 
          { 
            "color": "red", 
            "confidence": 0.02 
          } 
        ] 
      } 
    } 
  }, 
  { 
    "faceId": "9ec32093-cb72-47d8-929d-aef5868f1b50", 
    "faceRectangle": { 
      "top": 693, 
      "left": 1503, 
      "width": 180, 
      "height": 180 
    }, 
    "faceAttributes": { 
      "smile": 0.003, 
      "headPose": { 
        "pitch": 0, 
        "roll": 2, 
        "yaw": -2.2 
      }, 
      "gender": "female", 
      "age": 56, 
      "facialHair": { 
        "moustache": 0, 
        "beard": 0, 
        "sideburns": 0 
      }, 
      "glasses": "NoGlasses", 
      "emotion": { 
        "anger": 0, 
        "contempt": 0.001, 
        "disgust": 0, 
        "fear": 0, 
        "happiness": 0.003, 
        "neutral": 0.984, 
        "sadness": 0.011, 
        "surprise": 0 
      }, 
      "blur": { 
        "blurLevel": "high", 
        "value": 0.83 
      }, 
      "exposure": { 
        "exposureLevel": "goodExposure", 
        "value": 0.41 
      }, 
      "noise": { 
        "noiseLevel": "high", 
        "value": 0.76 
      }, 
      "makeup": { 
        "eyeMakeup": false, 
        "lipMakeup": false 
      }, 
      "accessories": [], 
      "occlusion": { 
        "foreheadOccluded": false, 
        "eyeOccluded": false, 
        "mouthOccluded": false 
      }, 
      "hair": { 
        "bald": 0.06, 
        "invisible": false, 
        "hairColor": [ 
          { 
            "color": "black", 
            "confidence": 0.99 
          }, 
          { 
            "color": "gray", 
            "confidence": 0.89 
          }, 
          { 
            "color": "other", 
            "confidence": 0.64 
          }, 
          { 
            "color": "brown", 
            "confidence": 0.34 
          }, 
          { 
            "color": "blond", 
            "confidence": 0.07 
          }, 
          { 
            "color": "red", 
            "confidence": 0.03 
          } 
        ] 
      } 
    } 
  } 
]
REST APIで使えるの良いですね。


axiosで書き直してみる

axios派閥としてはこっちで試したいところですね。

npm i axios
app.js
'use strict'; 
 
const axios = require('axios'); 
const subscriptionKey = 'ここにキーを指定'; //キーを指定 
const uriBase = 'https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect'; 
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/37/Dagestani_man_and_woman.jpg'; 
 
// Request parameters. 
const params = { 
    'returnFaceId': 'true', 
    'returnFaceLandmarks': 'false', 
    'returnFaceAttributes': 'age,gender,headPose,smile,facialHair,glasses,' + 
    'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise' 
}; 
 
const config = { 
    baseURL: uriBase, 
    method: 'post', 
    headers: { 
        'Content-Type': 'application/json', 
        'Ocp-Apim-Subscription-Key': subscriptionKey 
    }, 
    data: '{"url": ' + '"' + imageUrl + '"}', 
    params: params, 
} 
 
axios.request(config) 
.then(res => { 
    const jsonResponse = JSON.stringify(res.data, null, '  '); 
    console.log('JSON Response\n'); 
    console.log(jsonResponse); 
}) 
 
.catch(error => console.log(error.response.data));


例の写真をAPIに食わせてみる

  • インプット


68747470733a2f2f692e6779617a6f2e636f6d2f


  • アウトプット
[ 
  { 
    "faceId": "3b0b0aa7-cc43-4f8f-9d8c-e143b89f1621", 
    "faceRectangle": { 
      "top": 142, 
      "left": 340, 
      "width": 77, 
      "height": 77 
    }, 
    "faceAttributes": { 
      "smile": 0.196, 
      "headPose": { 
        "pitch": 0, 
        "roll": 12.4, 
        "yaw": -25.8 
      }, 
      "gender": "male", 
      "age": 35, 
      "facialHair": { 
        "moustache": 0.1, 
        "beard": 0.1, 
        "sideburns": 0.1 
      }, 
      "glasses": "NoGlasses", 
      "emotion": { 
        "anger": 0, 
        "contempt": 0, 
        "disgust": 0, 
        "fear": 0, 
        "happiness": 0.196, 
        "neutral": 0.8, 
        "sadness": 0.004, 
        "surprise": 0 
      }, 
      "blur": { 
        "blurLevel": "low", 
        "value": 0 
      }, 
      "exposure": { 
        "exposureLevel": "goodExposure", 
        "value": 0.62 
      }, 
      "noise": { 
        "noiseLevel": "medium", 
        "value": 0.38 
      }, 
      "makeup": { 
        "eyeMakeup": false, 
        "lipMakeup": true 
      }, 
      "accessories": [], 
      "occlusion": { 
        "foreheadOccluded": false, 
        "eyeOccluded": false, 
        "mouthOccluded": false 
      }, 
      "hair": { 
        "bald": 0.12, 
        "invisible": false, 
        "hairColor": [ 
          { 
            "color": "black", 
            "confidence": 1 
          }, 
          { 
            "color": "brown", 
            "confidence": 0.85 
          }, 
          { 
            "color": "other", 
            "confidence": 0.42 
          }, 
          { 
            "color": "gray", 
            "confidence": 0.23 
          }, 
          { 
            "color": "red", 
            "confidence": 0.03 
          }, 
          { 
            "color": "blond", 
            "confidence": 0.03 
          } 
        ] 
      } 
    } 
  } 
]
この辺のパラメータの意味はこちらのサイトの解説が分かりやすいです。

  • 年齢: 35歳 ( faceAttributes.age -> 35 )
  • 性別: 男性 ( faceAttributes.gender -> "male" )
  • 感情: 無表情 ( faceAttributes.emotion.neutral -> 0.8 )
  • 笑顔: 笑顔ではない ( faceAttributes.smile -> 0.196 )
  • メガネ: メガネ無し　（ faceAttributes.glasses -> "NoGlasses" ）
  • 髪色: 茶髪っぽい（faceAttributes.hair.Color -> {"color": "brown","confidence": 0.85）
年齢はちょっと違いますが、それ以外はだいたい正確な気がしています。


所感

正面向いてるわけでもないこれくらいの画像でもちゃんと結果が返ってくるのは素晴らしいですね。

これをもっと面白いことに活用していく予定です！

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… ｢iOS 15｣の新機能の一部は｢iPhone XS｣以降でしか利用出来ないものも https://taisy0.com/2021/06/15/141888.html tomac 2021-06-15 13:11:47 IT ITmedia 総合記事一覧 [ITmedia Mobile] ソースネクストの「ポケトーク」に新機能　グループ翻訳とWeb会議への字幕付与に対応 https://www.itmedia.co.jp/mobile/articles/2106/15/news164.html itmediamobile 2021-06-15 22:10:00 AWS AWS Architecture Blog Field Notes: Benchmark...
続きを読む

投稿時間:2021-04-30 23:37:32 RSSフィード2021-04-30 23:00 分まとめ(42件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… Microsoft、Android向け｢Microsoft Edge｣のDevビルドをGoogle Play ストアで公開 https://taisy0.com/2021/04/30/139961.html android 2021-04-30 13:46:02 python Pythonタグが付けられた新着投稿 - Qiita Raspberrypi + Pythonで、今日のゴミの日を取得して、LINE通知とアレクサにお知らせしてもらう https://qiita.com/xxxyahho/items/e7b2552f8ff794d7bf07 cronで日回一ヶ月間動かしてみて様子見。 2021-04-30 22:27:31 python Pythonタグが付けられた新着投稿 - ...
続きを読む

投稿時間:2023-02-05 02:09:04 RSSフィード2023-02-05 02:00 分まとめ(9件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 python Pythonタグが付けられた新着投稿 - Qiita pythonの-mオプションの動作を調べる https://qiita.com/Ryku/items/d9cebcb9e0a9e36281c6 pythonmmym 2023-02-05 01:18:33 python Pythonタグが付けられた新着投稿 - Qiita 【Python】pythonでwifi接続をしてみた。【pywifi】 https://qiita.com/shinfx/items/f7250730c0d8dabb5962 pywifi 2023-02-05 01:10:24 js JavaScriptタグが付けられた新着投稿 - Qiita 【Julia】Electron.jlを使ってカウンタ...
続きを読む