52
HTTP Input node
q
AlchemyAPIはRESTのGETメソッドでアクセスして画像を解析します。まずは左側のパレットのInputカテゴリ内のhttpのnode
をドラッグ&ドロップし、キャンバス内に配置します。 プロパティー内のURL欄にア クセスポイントを記載します。ここでは/callwatsonとしておきます。
q
Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任 意ですが、ここではHTTP Inputにしておきます。https://ibm.biz/Bd4NRZ
54
switch node
q
画像のURLをチェックするノードを準備します。 左側のリソースパレットのfunction カテゴリ内のswitchノード を フローエディタ中央のキャンバスにドラッグ&ドロップします。プロパティー内の左下にある+ruleをクリックして、分岐ロジックを 2つ⽤意します。 Propertyは以下の通りにimagurl属性に含まれるペイロードのnullチ ェックを⾏います。 nullであれば、“1”にそれ以外であれば“2”に値が渡されます。
https://ibm.biz/Bd4NRZ
template node (初期画⾯)
q
画⾯のHTMLを表⽰したり、Inputとなる画像を送信するためのメニューを提供するた めにHTMLを記述します。 templateノード をフローエディタ中央のキャ ンバスにドラッグ&ドロップします。プロパティを以下のように記述します。<h1>Welcome to the Alchemy Vision Face Detection Demo on Node-RED</h1>
<H2>Select an image</H2>
<form action="{{req._parsedUrl.pathname}}">
<img src="https://si.wsj.net/public/resources/images/MK-CK494_SELFIE_GR_20140303174816.jpg" height='100'/>
<img
src="https://upload.wikimedia.org/wikipedia/commons/f/f1/34th_G8_summit _member_20080707.jpg" height='100'/>
<img src="http://demo1.alchemyapi.com/images/vision/politicians.jpg"
height='100'/>
<br/>Copy above image location URL or enter any image URL:<br/>
Image URL: <input type="text" name="imageurl"/>
<input type="submit" value="Analyze"/>
</form>
56
change node
q
⼊⼒画⾯から画像URLを抽出するchangeノードを定義します。左側のリソースパレッ トのfunctionカテゴリ内のchangeノード をフロー・エディタ中央のキャ ンバスにドラッグ&ドロップします。 ここからpayload属性をimageurl属性に変換し ます。以下の通りにプロパティを設定します。https://ibm.biz/Bd4NRZ
Image Analysis
q
画像解析のためのImage Analysisノードを定義します。左側のリソースパレットの Watsonカテゴリ内のImage Analysisノード をフロー・エディタ中央のキャン バスにドラッグ&ドロップします。プロパティーでは顔認識を⾏うため、以下の通りに DetectをFaceに設定します。https://ibm.biz/Bd4NRZ
58
template node (結果)
q
WatsonのImage Analysisから返ってきた結果を表⽰させるためのHTMLを記載します。temlpalteノード をフローエディタ中央のキャンバスにドラッグ&ドロ ップします。プロパティを以下のように記述します。
https://ibm.biz/Bd4NRZ
<h1>Alchemy Image Analysis</h1>
<p>Analyzed image: {{payload}}<br/><img id="alchemy_image"
src="{{payload}}" height="50"/></p>
{{^result}}
<P>No Face detected</P>
{{/result}}
<table border='1'>
<thead><tr><th>Age
Range</th><th>Score</th><th>Gender</th><th>Score</th><th>Name</t h></tr></thead>
{{#result}}<tr>
<td><b>{{age.ageRange}}</b></td><td><i>{{age.score}}</i></td>
<td>{{gender.gender}}</td><td>{{gender.score}}</td>
{{#identity}}<td>{{identity.name}}
({{identity.score}})</td>{{/identity}}
</tr>{{/result}}
</table>
<form action="{{req._parsedUrl.pathname}}">
<input type="submit" value="Try again"/>
</form>
HTTP Response
q
アウトプットをHTML表⽰させるためのHTTP Responseノード をを追加60
フローをつなげる
q
出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!エラーが 出ていないことを確認してください。https://ibm.biz/Bd4NRZ
動作確認
q
ブラウザのURL欄にhttp://xxxx.mybluemix.net/callwatson をインプットして呼び 出してみましょう。 Image URLの⼊⼒欄にWatsonに読ませたい画像URLを⼊れてみ てください。顔の認識や⼈物名が出てきます！さすがWatson！https://ibm.biz/Bd4NRZ
62
ドキュメント内
【配布用】イノベート・ハブ九州_Bluemix勉強会_
(ページ 52-62)