ブラウザだけで簡単に独自の画像認識モデルが作成できる、[ IBM Watson Visual Recognition ] と、ドラッグ&ドロップだけでサーバープログラムが作成できる[ Node-RED ]を使って画像認識のアプリを作ってみましょう。
というネタを2年くらい前からやってますが、
改めてqiita上でまとめます。
使い回すために。
ハンズオン用の流れになってます。
準備 画像を集める
今回は画像認識のモデルを作成するので、クラス分けしたい画像をGoogle検索やスマホのカメラの写真などで集めます。最低１０枚ずつになるようにしてください。
例）寿司認識機の場合
「とろ」と「サーモン」の認識をさせる場合は、
「toro」「salmon」のそれぞれのフォルダを作り、
フォルダの中に画像を入れます。
それぞれのフォルダをZIP圧縮してください。
IBM Cloud ライトアカウントの作成
IBM クラウド ライトアカウントページ
すでに作っている方はIBM CLoudにログインしてください。
小ネタ
ログインするページによって画面が違う？
https://console.bluemix.net/
からログインする場合
https://cloud.ibm.com/login
からログインする場合（旧 SoftLayer環境）
今回は bluemix.net 環境の画面で説明します。
Watson Studio から Visual Recognition Service を作成する
上部のメニューから「カタログ」を選択して、「AI」の中の「Watson Studio」を選びます。
地域とサービス名を選択して「作成」
Get Started でツールを機動します。
プロジェクトを作成します。
各種プロジェクトのテンプレートが選べますが、今回は「Visual Recognition」を選択
Visual Recognition の Regionを選択します。
Visual Recognition の GUIツールです。
画面右上の「Upload to Project」に準備しておいたZIPファイルをドラッグ&ドロップで渡します。
今回のデモは赤外線画像によるエアコン状態の取得モデルのために、エアコンがついている時と消えている時、および、エアコンの写っていない赤外線サーモグラフィーの画像を用意しました。
画像の準備ができると下の欄でファイル名の下にサイズが表示されるので、認識したい「On.zip」と「Off.zip」にチェックを入れて「Add to Model」をクリックします。
画像が展開されます。
（オプション）「その他の画像」も学習させるので、「Negative」をクリックして、negative.zipをドラッグ&ドロップで渡します。
上のメッセージが邪魔なので消してから、、、
わかりやすいようにモデル名を変更しておいてください。
ここまでくると学習準備完了。[Train Model]ボタンで学習をスタートします。
緑のメッセージが表示されたら学習完了です。「Click here」で、結果確認画面に移動します。
後ほど使うので、「Model ID」をコピーしておきます。（右側のアイコンをクリックするとクリップボードにコピーされます。）
Testをクリックして、検証画面に移動します。
学習に使っていない画像を使ってテストしてみます。
以上で、Visual Recognitionによる画像認識モデルの作成は完了です。
次は実際にWebアプリから使えるようにします。
Implementationのタブに各言語での実装方法が紹介されています。
iOSのCore MLへのエクスポートもできます。
Node-REDと接続
Node-REDはGUIでロジックを作成できる開発環境です。
カタログの「スターターキット」から Node-REDと検索し、Node-RED Starter を作成します。
「アプリ名」を決めると下の「ホスト名」が自動で決まります。サーバーのURLになるので、「世界にひーとーつだーけーの」名前をつけてください。地域を選んだら「作成」
画面に切り替わったら「アプリURLにアクセス」。。。の前に、Watson Visual Recognitionと接続します。左メニューの「接続」をクリックします。
「接続の作成」をクリック
表示される一覧から「watson-visual-combined-dsx」にカーソルを移動して「接続」ボタンをクリックします。
デフォルトのまま「接続」
アプリの再ステージをします。
気長に待つ
状態表示が「このアプリは稼働中です」になったら、「アプリURLにアクセス」をします。
Node-REDの初期設定をします。Next
ログインのためのユーザーパスワードを設定します。設定しないと誰でもエディターに入れちゃいます。
Next
Finish
[Go to your Node-RED flow editor]ボタンでフローエディターを起動します。
先ほどのユーザーパスワードでログインします。
Node-REDフローエディターが起動します。
Node-REDの使い方などについては、https://nodered.jp へ。
今回はアップロード画面などのソースが用意してありますので、https://github.com/birdtomita/WatsonVisualRecognition-Node-RED-DEMO/blob/master/Node-RED_flow.json から、JSONデータをコピーします。
Githubのレポジトリにアクセスして、Rawボタンをクリックします。って下にも貼っておきます。
[{"id":"6f00444.4f730bc","type":"http in","z":"6e66393b.949ab8","name":"","url":"/upload","method":"get","upload":false,"swaggerDoc":"","x":150,"y":120,"wires":[["4fc1dff2.c44ef"]]},{"id":"4fc1dff2.c44ef","type":"template","z":"6e66393b.949ab8","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n <title></title>\n\t<meta charset=\"utf-8\" />\n <script type=\"text/javascript\">\n\n function ExecUpload() {\n\n var upload1 = document.getElementById(\"upload1\");\n var file1 = upload1.files[0];\n var formData = new FormData();\n formData.append('file',file1);\n fetch('postImage', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json'\n },\n body: file1\n }).then(res => res.json()\n ).then(json => {\n document.getElementById(\"result\").innerHTML = JSON.stringify(json)\n })\n }\n\n var loadFile = function(event) {\n var reader = new FileReader();\n reader.onload = function(){\n var output = document.getElementById('preview');\n output.src = reader.result;\n };\n reader.readAsDataURL(event.target.files[0]);\n };\n </script>\n <style>\n #preview img{\n width: 100px;\n}\n</style>\n</head>\n<body>\n <div>File-01<input id=\"upload1\" type=\"file\" onchange=\"loadFile(event)\"/></div>\n <a href=\"javascript:void(0);\" onclick=\"ExecUpload();\">画像認識開始</a>\n <span id=\"result\" style=\"color:blue\"></span>\n <div>\n <img id=\"preview\">\n </div>\n</body>\n</html>","output":"str","x":300,"y":120,"wires":[["c31b967a.006248"]]},{"id":"c31b967a.006248","type":"http response","z":"6e66393b.949ab8","name":"","statusCode":"","headers":{},"x":470,"y":120,"wires":[]},{"id":"f260b141.08636","type":"http in","z":"6e66393b.949ab8","name":"","url":"/postImage","method":"post","upload":false,"swaggerDoc":"","x":150,"y":200,"wires":[["93c29154.828f6"]]},{"id":"73eb37fd.9e6c38","type":"http response","z":"6e66393b.949ab8","name":"","statusCode":"","headers":{},"x":810,"y":200,"wires":[]},{"id":"a472aaf2.e18758","type":"visual-recognition-v3","z":"6e66393b.949ab8","name":"","vr-service-endpoint":"https://gateway-a.watsonplatform.net/visual-recognition/api","image-feature":"classifyImage","lang":"en","x":510,"y":200,"wires":[["52cf4c61.b31fc4"]]},{"id":"93c29154.828f6","type":"change","z":"6e66393b.949ab8","name":"","rules":[{"t":"set","p":"params","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"params[\"classifier_ids\"]","pt":"msg","to":"AirCon_1101964590","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":200,"wires":[["a472aaf2.e18758"]]},{"id":"4252ee39.0a109","type":"debug","z":"6e66393b.949ab8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":260,"wires":[]},{"id":"52cf4c61.b31fc4","type":"function","z":"6e66393b.949ab8","name":"","func":"var result = msg[\"result\"];\nmsg.payload = [];\nif (\"images\" in result && result.images.length > 0){\n image = result.images[0]\n if (\"classifiers\" in image && image.classifiers.length > 0){\n classifier = image.classifiers[0]\n if (\"classes\" in classifier && classifier[\"classes\"].length > 0){\n msg.payload = classifier[\"classes\"][0]\n }\n }\n}\nreturn msg;","outputs":1,"noerr":0,"x":670,"y":200,"wires":[["73eb37fd.9e6c38","4252ee39.0a109"]]},{"id":"79fb6762.1f8f08","type":"comment","z":"6e66393b.949ab8","name":"html form","info":"","x":140,"y":80,"wires":[]},{"id":"5f0aafff.25a6a","type":"comment","z":"6e66393b.949ab8","name":"画像認識処理","info":"","x":150,"y":160,"wires":[]}]
Node-REDの右上のメニューから、読み込み→クリップボードを選択
入力欄に上記JSONを貼り付けて、「読み込み」
適当なところでクリックすると、フローが貼り付けられます。
[change 2 rules] とあるノードをダブルクリック。一番下の段 msg.params["classifier_ids"] の値「AirCon_1101964590」を、Visual Recognitionで作ったモデルのModel IDと置き換えて「完了」をクリック。
右上の「デプロイ」ボタンをクリックします。
デプロイが成功しました。
Node-REDフローエディターのURLを確認します。
フローエディターのURLが、
https://hogehoge.mybluemix.net/red/#flow/....
だった場合は、アクセスするアプリのURLは
https://hogehoge.mybluemix.net/upload
です。
（フロー、上の段の「http in」ノードで設定しています。）
上記URLにアクセスしてみましょう。
画像を選択して、プレビューを確認した後「画像認識開始」をクリック、認識結果が表示されたら成功です。
参考1 Core MLへのエクスポート
おまけ
Watson Visual Recognition ではなく、Watson StudioでApple の Turi Createを使って画像認識モデルを作成するチュートリアルも用意しました。おヒマな方はどうぞ。
https://github.com/birdtomita/TuriCreate-with-WatsonStudio/blob/master/notebook1.ipynb