Node-RED+Visual Recognitionで画像の顔認識をやってみた #noderedjp

Node-RED UG勉強会 Vol.4 「Node-RED x つかってみた！」：15分
https://node-red.connpass.com/event/51105/

Node-REDとWatsonのVisual Recognitionを使用して画像のリア充判定処理を作った話です。リア充ネタはブログにも掲載しております。
http://wp.tech-style.info/archives/1081

Transcript

1. Node-RED + Visual Recognitionで
   画像の顔認識をやってみた
   泰昌平 @ShoheiTai
   

   View Slide

2. 自己紹介
   泰昌平
   スパイスファクトリー株式会社
   ・平成生まれのWebエンジニア
   ・ペチパー。CakePHP, Phalcon, CMSなど
   ・でもフロントエンドの開発、最適化が好き
   ・趣味はダーツとバイク
   

   View Slide

3. 今日お話すること
   ● IBM Bluemix + Node-REDを触ってみた
   ● Node-REDの手軽さがすごい
   ● Visual Recognitionで遊んでみた
   

   View Slide

4. Bluemixとは？
   ● IBMが提供するPaaS
   ● 主要な言語や環境、APIなどが一括管理できる
   ● 開発から実行までの環境が一通り揃っている
   ● Watsonも利用可能
   ● Node-REDがすぐに使える
   

   View Slide

5. IBM Bluemix
   https://www.ibm.com/developerworks/jp/blue
   mix/
   

   View Slide

6. Watson Services
   https://www.ibm.com/watson/developercloud/
   services-catalog.html
   

   View Slide

7. Visual Recognition
   https://www.ibm.com/smarterplanet/jp/ja/ibm
   watson/developercloud/visual-recognition.html
   

   View Slide

8. Visual Recognition
   ● 画像に含まれている物体認識
   ● 画像から顔認識(face detection)
   ● 画像の学習による独自の判別モデル作成
   

   View Slide

9. Visual Recognition
   ● 画像に含まれている物体認識
   ● 画像から顔認識(face detection)
   ● 画像の学習による独自の判別モデル作成
   

   View Slide

10. 顔認識(Face detection)
    ● おおよその年齢
    ● 顔がある位置の座標
    ● 性別
    ● 著名人の場合は名前
    

    View Slide

11. Visual Recognition Demo
    https://visual-recognition-demo.mybluemix.net/
    

    View Slide

12. 〜 実践編 〜
    

    View Slide

13. View Slide

14. 写真のリア充判定
    

    View Slide

15. Bluemix × Node-RED
    簡単なWebアプリを作ってみる
    

    View Slide

16. 仕様
    ● Node-REDで画像URLの入力画面を作成
    ● 画像URLをsubmitしサーバで
    Face detectionを行う
    ● Face detectionの返り値からリア充判定し、結果を
    画面に描画
    

    View Slide

17. View Slide

18. View Slide

19. Node-REDでの実装
    ● 入出力やロジックをノードで記述
    ○ 基本はノードをポチポチ繋いでいく
    ○ 複雑なロジックを組む場合はFunctionノードで
    javascript(nodejs)の実装
    ● APIへのリクエストはノードで対応可能
    ○ 今回はBluemix上なのでWatsonとの連携も容易
    

    View Slide

20. Viewの実装
    

    View Slide

21. View Slide

22. View Slide

23. ロジックの実装
    

    View Slide

24. View Slide

25. リア充判定処理
    ● 写真に2人写っている
    ● 2人は異性同士である
    ● 女性が好みの年齢である
    

    View Slide

26. View Slide

27. テストデータの準備
    

    View Slide

28. 弊社のシンガーソングライター 弊社のフロントエンドエンジニア
    

    View Slide

29. 実際に動かしてみる
    

    View Slide

30. 実装時に気になった点
    ● Functionノードにゴリゴリ処理を書き込むか、
    ノードでフローを書いていくかの判断
    ● プログラムの規模が大きくなる場合は
    デザインパターンを意識しないと
    スパゲティノードが出来上がりそう
    

    View Slide

31. Node-REDを使ってみて
    ● ほとんどコードを書かずに実装できる
    ● 視覚的に分かりやすく、テストもしやすい
    ● APIの作成や複数のAPIの繋ぎ込みに使えそう
    ● JSON形式で処理全体をエクスポートできる
    ● Bluemix上ではwatsonのノードが使えて便利！
    

    View Slide

32. Node-REDで
    お手軽プログラミング！
    

    View Slide

33. THANKS!
    Any questions?
    You can find me at
    ✘ facebook: shouhei.tai
    ✘ Twtter: @ShoheiTai
    

    View Slide