Watson Visual Recognition と Node-RED で 顔認識アプリを簡単に作成する

こちらは、2017年5月29日BMXUG名古屋での講演資料になります

Transcript

1. © 2016 IBM Corporation 1 IBM Bluemix www.bluemix.net Watson Visual Recognition と Node-RED で 顔認識アプリを簡単に作成する Taiji HAGINO IBM BlueHub
2. © 2016 IBM Corporation 2 IBM Bluemix www.bluemix.net 1. Profile
3. © 2016 IBM Corporation 3 IBM Bluemix www.bluemix.net Taiji HAGINO Developer Advocate IBM Japan BlueHub taiponrock • スタートアップ⽀援 • 技術サポート • イベント・コミュニティ • パートナー連携
4. © 2016 IBM Corporation 4 IBM Bluemix www.bluemix.net IBM BlueHubのご紹介
5. IBM BlueHubは、 テクノロジー活⽤とオープン・イノベーション による新事業の創造を⽀援しています。 • イノベーションを実現するテクノロジーの提供 • 事業⽴上げに向けたスタートアップの育成 • ⼤⼿企業とスタートアップとの協業促進
6. 6 BlueHub推進の⽬的 IBMテクノロジーの 活⽤事例の拡⼤ 企業間の コラボレーション 機会の創出 新事業創造 のための エコシステム形成
7. 7 IBM BlueHub パートナーラインナップ Investment Partners Media Partners Evangelist Partners Operation Partners
8. テクノロジーを活⽤した スタートアップの事業育成 (Incubation Program) ー 8 IBM BlueHubの活動 オープン・イノベーション による新事業の創出 (Open Innovation Program) ⼤⼿企業 ⼤⼿企業 スタート アップ スタート アップ スタート アップ オープン イノベーション テクノロジー提供 ⼤⼿企業 [テーマ] •Automotive •Healthcare •Inbound Travel … スタート アップ スタート アップ スタート アップ テクノロジー提供 ー BlueHub パートナー [テクノロジー] •Analytics •IoT •Blockchain •Mobile •Security •Watson, etc. メンタリング 1 2
9. 9 テクノロジーのご紹介 – Cognitive Computing n t - x ao W p x sl p x E R E O E d x a E e OS s f Ts r n
10. 10 テクノロジーのご紹介 - IBM Bluemix 様々なアプ リケーショ ンを構築・管理・実⾏ するための、クラウド ベースのオープン・ス タンダ ード なPaaS環境
11. © 2016 IBM Corporation 11 IBM Bluemix www.bluemix.net 1. Overview
12. © 2016 IBM Corporation 12 IBM Bluemix www.bluemix.net 1.Webアプリケーションを作成する 2.そのアプリ上で、ある⼈物の画像を指定する 3.その画像を解析する 4.解析結果をWebアプリケーションの画⾯に表⽰する •年齢 •性別 •有名⼈かどうか 本⽇やること
13. © 2016 IBM Corporation 13 IBM Bluemix www.bluemix.net Node-RED アプリ実⾏環境 Cloudant データベース Watson Visual Recognition 画像解析
14. © 2016 IBM Corporation 14 IBM Bluemix www.bluemix.net 2. Watson Visual Recognition API
15. © 2016 IBM Corporation 15 IBM Bluemix www.bluemix.net IBM Bluemix上で Watson Visual Recognition APIを サービスとして作成しましょう！
16. © 2016 IBM Corporation 16 IBM Bluemix www.bluemix.net サービスの作成 (or カタログ) ↓ Visualで検索 ↓ Visual Recognitionを選択
17. © 2016 IBM Corporation 17 IBM Bluemix www.bluemix.net 価格プランを選択し、作成をクリック
18. © 2016 IBM Corporation 18 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます
19. © 2016 IBM Corporation 19 IBM Bluemix www.bluemix.net 少し待つとサービスが作成されます (参考) 最近、VR Toolが使いやすくなりました
20. © 2016 IBM Corporation 20 IBM Bluemix www.bluemix.net 例えばこんな感じで使えます
21. © 2016 IBM Corporation 21 IBM Bluemix www.bluemix.net サービス資格情報を表⽰します 前のページのToolもこれからの⾃作アプリも api key が必要なので控えておいてください
22. © 2016 IBM Corporation 22 IBM Bluemix www.bluemix.net 3. Web Application with Node-RED
23. © 2016 IBM Corporation 23 IBM Bluemix www.bluemix.net IBM Bluemix上で Node-REDを使いましょう！
24. © 2016 IBM Corporation 24 IBM Bluemix www.bluemix.net カタログを選択
25. © 2016 IBM Corporation 25 IBM Bluemix www.bluemix.net Node-RED Starterを選択
26. © 2016 IBM Corporation 26 IBM Bluemix www.bluemix.net アプリを作成
27. © 2016 IBM Corporation 27 IBM Bluemix www.bluemix.net ⾃動でステージング
28. © 2016 IBM Corporation 28 IBM Bluemix www.bluemix.net エディタへのログインユーザーと パスワードを設定
29. © 2016 IBM Corporation 29 IBM Bluemix www.bluemix.net ．．．してました、今までは
30. © 2016 IBM Corporation 30 IBM Bluemix www.bluemix.net 仕様が変わり今は初期起動時に設定します
31. © 2016 IBM Corporation 31 IBM Bluemix www.bluemix.net Node-RED flow editor を開く
32. © 2016 IBM Corporation 32 IBM Bluemix www.bluemix.net 仕上がりはこんな感じです ⼊⼒httpノード 分岐ノード テンプレートノード 1つ⽬ テンプレートノード 2つ⽬ 変換ノード Visual Recognitionノード デバッグノード httpレスポンスノード
33. © 2016 IBM Corporation 33 IBM Bluemix www.bluemix.net ⼊⼒httpノード
34. © 2016 IBM Corporation 34 IBM Bluemix www.bluemix.net 分岐ノード
35. © 2016 IBM Corporation 35 IBM Bluemix www.bluemix.net テンプレートノード（1つ⽬） https://github.com/taijihagino/faceapp_nodered/blob/master/htmlpage_node.html
36. © 2016 IBM Corporation 36 IBM Bluemix www.bluemix.net 変換ノード
37. © 2016 IBM Corporation 37 IBM Bluemix www.bluemix.net Visual Recognitionノード ここで、先ほど控えておいた api key を⼊⼒してください
38. © 2016 IBM Corporation 38 IBM Bluemix www.bluemix.net テンプレートノード（2つ⽬） https://github.com/taijihagino/faceapp_nodered/blob/master/reporthtml_node.html
39. © 2016 IBM Corporation 39 IBM Bluemix www.bluemix.net httpレスポンスノード
40. © 2016 IBM Corporation 40 IBM Bluemix www.bluemix.net フローのDefinitionは、 JSON形式でこちらから取得できます https://github.com/taijihagino/faceapp_nodered
41. © 2016 IBM Corporation 41 IBM Bluemix www.bluemix.net 4. Use Application!!
42. © 2016 IBM Corporation 42 IBM Bluemix www.bluemix.net Node-REDで作成したWebアプリのURLは、 https://<Node-RED経路>/<入力httpノードで指定した文字列> 例） https://taipon-noderedapp01.mybluemix.net/face
43. © 2016 IBM Corporation 43 IBM Bluemix www.bluemix.net こんな感じです
44. © 2016 IBM Corporation 44 IBM Bluemix www.bluemix.net こんな感じです
45. © 2016 IBM Corporation 45 IBM Bluemix www.bluemix.net おつかれさまでした！
46. For more information IBM BlueHub official website www.ibm.com/ibm/jp/bluehub/ IBM BlueHub official Facebook www.facebook.com/IBMBlueHub