はじめに
Node-REDパレット管理
- ノード追加
  - node-red-contrib-browser-utils
  - node-red-contrib-image-output
Node-REDフロー作成
Visual-Recognition-API準備
- リソースの作成
- API情報表示
Node-REDへVisual Recognition組み込み
- API鍵の組み込み
- EndPoint-URLの組み込み
Node-REDでWatson Visual Recognition体験
- 画像認識結果の言語設定
- デプロイ
実行
終わりに

はじめに

このドキュメントは Node-RED を利用して、IBM Watson Visual Recognition の 画像認識 を体験するための手順を示しています。
ここで利用する Node-RED は、IBM Cloud にデプロイされたものを想定しています。

Node-REDパレット管理

下記のノードを追加します。

[node-red-contrib-browser-utils]
ブラウザでカメラを利用するためのノード
[node-red-contrib-image-output]
Node-RED のフローを流れるイメージを表示するノード

ノード追加

右上の「ハンバーガーメニュー」をクリックし、「パレット管理」 をクリックします。

パレット設定画面で 「ノードを追加」 タブをクリックします。

node-red-contrib-browser-utils

ノードを検索 テキストボックスに browser と入力すると候補が表示されます。
node-red-contrib-browser-utils の 「ノードを追加」 ボタンをクリックします。

確認ダイアログが表示されるので、「追加」 ボタンをクリックします。

しばらくするとノードが追加されたことを表すメッセージが表示されます。

node-red-contrib-image-output

ノードを検索 テキストボックスに image-out と入力すると候補が表示されます。
node-red-contrib-image-output の 「ノードを追加」 ボタンをクリックします。

確認ダイアログが表示されるので、「追加」 ボタンをクリックします。

しばらくするとノードが追加されたことを表すメッセージが表示されます。

Node-REDフロー作成

Watson の画像認識機能を確認してみます。

cameraノード

パレット中段の「入力タブ」から camera ノードをワークスペースにドラッグします。

imageノード

パレット中段の「出力タブ」から image ノードをワークスペースにドラッグします。

visual recognitionノード

パレット下部の「IBM Watson タブ」から visual recognition ノードをワークスペースにドラッグします。

debugノード

パレット上部の「共通タブ」から debug ノードをワークスペースにドラッグします。

デバッグ設定

画像認識結果をデバッグサイドバーに表示するために、debug ノードの設定を変更します。
debug ノードをダブルクリックし、デバッグの 対象を msg.result になるように設定します

ノード接続

[camera]⇒[image]
[camera]⇒[visual recognition]⇒[debug] の順にノードを接続します。

Visual-Recognition-API準備

いったん Node-RED から離れて、IBM Cloud の GUI から Visual Recognition API を準備します。

リソースの作成

IBM Cloud のダッシュボード、もしくはリソース・リストにある 「リソースの作成」ボタンをクリックします。

検索テキストボックスに visual と入力すると、[Visual Recognition] の候補が表示されるのでクリックします。

サービスの設定画面で ライト無料 となっていることを確認して、「作成」ボタンをクリックします。

API情報表示

作成された API の詳細画面が表示されるので、左メニュの 「管理」 をクリックします。

Node-REDへVisual Recognition組み込み

Node-RED と Watson API を連携させる方法はいくつかあります。

API 鍵による連携
Cloud Foundry アプリケーションの接続

今回は「API 鍵による連携」で Node-RED と Watson API を連携します。

API鍵の組み込み

Watson API の管理画面から 資格情報 の 「API 鍵」 をコピーします。

Node-RED フローエディタを表示し、ワークスペースに配置してある[visual recognition]ノードをダブルクリックします。
API key を入力する欄があるので、貼り付けます。

EndPoint-URLの組み込み

Watson API の管理画面から 資格情報 の 「URL」 をコピーします。

Node-RED フローエディタを表示し、ワークスペースに配置してある[visual recognition]ノードをダブルクリックします。
Service Endpoint を入力する欄があるので、貼り付けます。

Node-REDでWatson Visual Recognition体験

Node-RED と Visual Recognition の連携は完了したので、Watson の機能を試してみます。

画像認識結果の言語設定

引き続き [Visual Recognition]ノードの設定画面で下記設定をします。

Language を English

デプロイ

いままで設置してきたフローやコーディングを確定して、実際に動作するようにします。画面上部の 「デプロイ」ボタンをクリックします。

Node-RED のサイドバー(右側エリア)上部のデバッグアイコンをクリックし、デバッグサイドバーを表示します。

実行

ワークスペースに配置してある camera ノードの左側のボタンをクリックして、フローを実行します。
するとパソコンのカメラが撮影した写真が imageノード下部に表示されます。また、デバッグサイドバーに画像認識の結果が出力されます。
下の例では、「バナナ」を撮影して画像認識させた結果、banana、fruit などの文字列が表示されていることが確認できます。
score は、Watson の回答の自信度を表しています。

カエルのぬいぐるみを撮影して画像認識させたところ、headress などのご認識されました。これは人の目には「カエル」と認識できても、一般的な「カエル」の特徴が無い為と思われます。

終わりに

ノードを接続するだけで、カメラの制御と写真のプレビュー、そして画像認識が簡単に試せることがわかりました。
画像をスマホから送ったり、別のアプリから送信できるようにすることも可能なので、自作アプリやサービスにも気軽に画像認識機能を組み込むことができます。
試してみてはいかがでしょうかっ！