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

by 泰昌平@ShoheiTai

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

〜実践編〜

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

写真のリア充判定

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Viewの実装

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

ロジックの実装

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

テストデータの準備

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

実際に動かしてみる

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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