- はじめに
- Node-REDパレット管理
- Node-REDフロー作成
- Visual-Recognition-API準備
- Node-REDへVisual Recognition組み込み
- 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 などのご認識されました。これは人の目には「カエル」と認識できても、一般的な「カエル」の特徴が無い為と思われます。
終わりに
ノードを接続するだけで、カメラの制御と写真のプレビュー、そして画像認識が簡単に試せることがわかりました。
画像をスマホから送ったり、別のアプリから送信できるようにすることも可能なので、自作アプリやサービスにも気軽に画像認識機能を組み込むことができます。
試してみてはいかがでしょうかっ！