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
2. 自己紹介 泰昌平 スパイスファクトリー株式会社 ・平成生まれのWebエンジニア ・ペチパー。CakePHP, Phalcon, CMSなど ・でもフロントエンドの開発、最適化が好き ・趣味はダーツとバイク
3. 今日お話すること • IBM Bluemix + Node-REDを触ってみた • Node-REDの手軽さがすごい • Visual Recognitionで遊んでみた
4. Bluemixとは？ • IBMが提供するPaaS • 主要な言語や環境、APIなどが一括管理できる • 開発から実行までの環境が一通り揃っている • Watsonも利用可能 • Node-REDがすぐに使える
5. IBM Bluemix https://www.ibm.com/developerworks/jp/blue mix/
6. Watson Services https://www.ibm.com/watson/developercloud/ services-catalog.html
7. Visual Recognition https://www.ibm.com/smarterplanet/jp/ja/ibm watson/developercloud/visual-recognition.html
8. Visual Recognition • 画像に含まれている物体認識 • 画像から顔認識(face detection) • 画像の学習による独自の判別モデル作成
9. Visual Recognition • 画像に含まれている物体認識 • 画像から顔認識(face detection) • 画像の学習による独自の判別モデル作成
10. 顔認識(Face detection) • おおよその年齢 • 顔がある位置の座標 • 性別 • 著名人の場合は名前
11. Visual Recognition Demo https://visual-recognition-demo.mybluemix.net/
12. 〜 実践編 〜
14. 写真のリア充判定
15. Bluemix × Node-RED 簡単なWebアプリを作ってみる
16. 仕様 • Node-REDで画像URLの入力画面を作成 • 画像URLをsubmitしサーバで Face detectionを行う • Face detectionの返り値からリア充判定し、結果を 画面に描画
19. Node-REDでの実装 • 入出力やロジックをノードで記述 ◦ 基本はノードをポチポチ繋いでいく ◦ 複雑なロジックを組む場合はFunctionノードで javascript(nodejs)の実装 • APIへのリクエストはノードで対応可能 ◦ 今回はBluemix上なのでWatsonとの連携も容易
20. Viewの実装
23. ロジックの実装
25. リア充判定処理 • 写真に2人写っている • 2人は異性同士である • 女性が好みの年齢である
27. テストデータの準備
28. 弊社のシンガーソングライター 弊社のフロントエンドエンジニア
29. 実際に動かしてみる
30. 実装時に気になった点 • Functionノードにゴリゴリ処理を書き込むか、 ノードでフローを書いていくかの判断 • プログラムの規模が大きくなる場合は デザインパターンを意識しないと スパゲティノードが出来上がりそう
31. Node-REDを使ってみて • ほとんどコードを書かずに実装できる • 視覚的に分かりやすく、テストもしやすい • APIの作成や複数のAPIの繋ぎ込みに使えそう • JSON形式で処理全体をエクスポートできる • Bluemix上ではwatsonのノードが使えて便利！
32. Node-REDで お手軽プログラミング！
33. THANKS! Any questions? You can find me at ✘ facebook: shouhei.tai ✘ Twtter: @ShoheiTai