Node-RED で試す画像 認識 開志専門職大学 未来創造研究センター 西川 浩平 2021 年 7 月 6 日

p. 1 目次 Teachable Machine による画像認識..................................................................................................................................................... 2 概要 ....................................................................................................................................................................................................... 2 前提 ....................................................................................................................................................................................................... 2 Node-RED にノードを追加 .................................................................................................................................................................... 2 ノードの追加手順................................................................................................................................................................................ 2 Teachable Machine による画像認識モデルの作成 ............................................................................................................................ 4 画像の取得とクラス(Class)の作成..................................................................................................................................................... 5 クラス(Class)の削除や画像サンプルのダウンロード/削除 .................................................................................................................... 8 トレーニングの実行 .............................................................................................................................................................................. 9 プロジェクトの保存 ............................................................................................................................................................................. 10 プレビューの確認 ............................................................................................................................................................................... 12 モデルをエクスポート ........................................................................................................................................................................... 13 Node-RED : サンプルのインポート ...................................................................................................................................................... 15 Node-RED でフローファイルのインポート ........................................................................................................................................... 16 Node-RED：サンプル動作確認のための設定 .................................................................................................................................... 17 Teachable machine ノードの設定確認 ....................................................................................................................................... 17 cloudant out ノードの設定確認 .................................................................................................................................................... 17 動作確認 ............................................................................................................................................................................................. 18 Node-RED サンプル：各ノードの解説 ................................................................................................................................................ 22 ファイルアップロードフォーム ................................................................................................................................................................. 22 アップロードされた画像の認識/クラス分類 ......................................................................................................................................... 23 画像認識結果の表示 ...................................................................................................................................................................... 25 データベースに記録 ........................................................................................................................................................................... 26

p. 2 Teachable Machine による画像認識 2021 年 1 月時点の内容です。多くのクラウドサービスは日々アップデートしており、ご利用時点と画面や内容が異なることがありますので、 ご注意ください。 概要 Google が提供している機械学習サービス、「Teachable Machine」を使って画像認識モデルを作成します。その後、Node-RED から画 像認識モデルを呼び出し、動作を確認します。 前提 IBM Cloud 上で Node-RED 環境を有効にしているものとします。Web ブラウザは、Google Chrome または Firefox、最新の Microsoft Edge のいずれかを使用しているものとします。 Node-RED にノードを追加 演習にあたり、Node-RED に標準で入っていない 2 つのノードを追加します。上から順にインストールします。 ノード名  node-red-contrib-teachable-machine  node-red-node-base64 ノードの追加手順 Node-RED の画面右上の「三」 >> 「パレットの管理」の順にクリックします。 「ユーザー設定」の「パレット」が選ばれた状態で表示されます。

p. 3 「ノードを追加」タブをクリックし、下図のように前ページ記載の追加する各ノード名を入力することで検索されます。表示されたノードについて、 「ノードを追加」をクリックします。(node-red-contrib-teachable-machine で検索しました。) 下図のように、インストール確認画面が表示されます。「追加」をクリックします。 追加するノードによっては、IBM Cloud ライト・アカウントで使っている Node-RED の割り当てメモリが少ないことでエラーが出ることが あります。その場合は、追加できません。課金する必要があります。問題なくノードの追加が出来れば、「ノードをパレットに追加しました」と表 示され、成功です。「閉じる」をクリックします。 「ノードを追加」から「追加しました」に表示が変わります。 同様の手順で、「node-red-node-base64」のノードを追加します。追加後、「閉じる」をクリックして、ノードの追加は完了です。

p. 4 Teachable Machine による画像認識モデルの作成 Web ブラウザで、Google Chrome または Firefox、最新の Microsoft Edge のいずれかから、下記にアクセスします。 https://teachablemachine.withgoogle.com/ 「使ってみる」をクリックします。 機械学習モデルを作成します。本教材では「画像プロジェクト」をクリックします。

p. 5 画像の取得とクラス(Class)の作成 画像認識には、認識させたいものの画像を用意する必要があります。画像認識には、認識される物体あたり、少なくても 100 枚は欲しいと ころです。100 枚の画像を用意することは非常に難しいので、Teachable Machine では「ウェブカメラ」を用いることで、容易に画像を確保 できます。Zoom や Microsoft Teams、Google Meet のようなビデオチャットツールを使用中の場合は、ビデオチャットツールでビデオ(カメ ラ)を無効化してください。ここでは、例として、「ボールペン」と「ホッチキス」を認識するモデルを作ってみます。 Class1 の作成 「Class1」をクリックします。Class は画像認識させたときの分類名称のことです。 「ボールペン」に書き換え後、Enter キーを押します。「Class1」の表示が「ボールペン」に変わります。 画像を取得するために、「ウェブカメラ」をクリックします。下図のように表示されることがあります。表示された場合は「許可」をクリックします。 ウェブカメラの目の前に認識させたいものを映します。その状態で「長押しして録画」をクリックします。クリックし続けることで画像を取得します。

p. 6 「長押しして録画」をクリックし続けます。長押しすることで、画像が追加されます。様々な角度で、合計 100 枚前後取得します。 Class2 の作成 次は、「Class2」として、「ホッチキス」を追加します。「Class2」をクリックします。 「ホッチキス」に書き換え後、Enter キーを押します。「Class1」の表示が「ホッチキス」に変わります。 「長押しして録画」をクリックし続けます。長押しすることで、画像が追加されます。様々な角度で、合計 100 枚前後取得します。 角度などを変えて長押し

p. 7 ウェブカメラを使わずに、画像ファイルのアップロードを活用する場合 Zip 形式等でまとまっている画像データを持っている場合、Zip 形式のファイルを解凍し、中身の画像データを Class にアップロードすることが できます。「画像サンプルを追加する」で、ウェブカメラではなく、「アップロード」を選びます。 サンプル画像として、https://app.box.com/s/g7xojxoxnurbx8ujkqa6kknp5g4t13aj にアクセスし、Teachable Machine 画像サンプルフォルダ内の、「ボールペン-samples.zip」と「ホッチ キス-samples.zip」をダウンロードし、Zip ファイルを解凍することで使用可能です。 画像が入ったフォルダ内で画像ファイルを選び、下図のように「ファイルから画像を選択するか、ここにドラッグ&ドロップします」に、ドラッグ&ドロッ プします。 角度などを変えて長押し

p. 8 下図のようになれば、画像ファイルのアップロードによる Class 作成ができたことになります。あとは Class 名を変更します。 クラス(Class)の削除や画像サンプルのダウンロード/削除 作成したクラス(Class)を削除するには、下図のように各 Class で、枠部分の縦の三点リーダをクリックし、「クラスを削除」を実行します。 クラスに追加した画像は、Teachable Machine では「画像サンプル」あるいは「サンプル」と言い、ダウンロードや削除ができます。

p. 9 トレーニングの実行 画像を取得し Class を作成しました。画像と Class をもとにトレーニングを実行するには、「モデルをトレーニングする」をクリックします。 完了するまで、しばらく待ちます。トレーニングが完了すると、「トレーニング済みのモデル」と表示が変わり、プレビューが表示されます。

p. 10 プロジェクトの保存 Teachable Machine では、画像と Class の組み合わせを「プロジェクト」と表現 し、Google ドライブに保存するか、ファイルとしてダウンロードすることができます。画面 左上の「三」 をクリックした後、「ドライブにプロジェクトを保存」または、「プロジェクトをフ ァイルとしてダウンロード」のどちらかをクリックします。 ここでは「ドライブにプロジェクトを保存」の場合に動きを見ていきます。下記のメッセージが表示されたら、「ドライブにログイン」をクリックします。 ログイン中の Google アカウントもしくは、Google Workspace のアカウントを選びます。ログインしていない場合は、ログインを求められるこ とがあります。 次の作業が、消費者向けの Gmail と法人向けの Google Workspace で異なることがあります。「許可」をクリックすることは共通です。 表示されているアカウント をクリック

p. 11 「許可」をクリックします。(消費者向けの Gmail と法人向けの Google Workspace で異なることがあります。) 「許可」をクリックします。(消費者向けの Gmail と法人向けの Google Workspace で異なることがあります。) 「Teachable Machine を信頼できることを確認」と表示されますので、「許可」をクリックします。 「プロジェクトに名前を付けてください」と表示されますので、枠内にプロジェクト名を入力した後、「次へ」をクリックします。 次のように表示されれば、Google ドライブへの保存は完了です。

p. 12 プレビューの確認 「3.モデルをエクスポートする X」の「X」をクリックします。 実際にウェブカメラの前に、ボールペンやホッチキスを出して、認識できているか確認することができます。枠内のように、ウェブカム(Webcam) の入力が「オン」になっていないと、プレビューが使用できません。 また、「Webcam」を「ファイル」に切り替えることで、画像ファイルを用いて、画像認識をプレビューすることも可能です。

p. 13 モデルをエクスポート 共有可能なリンクの発行 画像認識モデルを、「共有可能なリンクで、Node-RED 等から利用できるようにします。「モデルをエクスポートする」をクリックします。 「モデルをエクスポートしてプロジェクトで使用する。」の表示が出たら、上図のように「アップロード(共有可能なリンク)」が選ばれている状態で、 「モデルをアップロード」をクリックします。 下図のように、「共有可能なリンク」が発行されますので、メモ帳などにコピーし、保存しておきます。 取得した「共有可能なリンク」の URL は、IBM Cloud 上で稼働する Node-RED で使用します。

p. 14 Web ブラウザで、Teachable Machine のタブを閉じる際には、画面左上の「三」 をクリックした後、「ドライブにプロジェクトを保存」を実行 します。 モデルのダウンロード モデルには画像データ等は含まれませんが、モデルが Google 上にオープンになりますので、モデルを外部に公開しない場合や病院等の施設 内ネットワークが外部と分離されている場合は、モデルを「ダウンロード」する必要があります。 Web アプリなら「Tensoflow.js」から「ダウンロード」を行い、スマホアプリや IoT 機器であれば「Tensorflow Lite」からダウンロードを行うと 良いでしょう。病院の内部ネットワークなど閉じた場所のサーバーに、Node-RED 環境を構築している場合は、「Tensorflow.js」でダウンロ ードしたモデルを使用すると良いでしょう。 取得した共有可能なリンクにアクセス 「共有可能なリンク」で発行した URL にアクセスすると、ウェブカメラや画像ファイルを用いて画像認識の動作確認を行うことができます。

p. 15 Google ドライブに保存したプロジェクトを開く https://teachablemachine.withgoogle.com/train にアクセスし、画面左上の「三」 をクリックした後、「ドライブからプロジェクトを開 く」をクリックします。 「.tm」で終わるファイルを選び、「Select」をクリックします。これで、Class の追加や既存 Class に画像を追加し、トレーニングを行うことがで きるようになりました。 画像の追加などを行い、トレーニングを実施、モデルのダウンロード等が可能です。 Node-RED : サンプルのインポート Teachable Machine で作成したモデルの「共有可能なリンク」の URL を用いて、IBM Cloud 上の Node-RED の次のようなフローを作 成します。すぐに試せるように、インポート可能なフローファイル(JSON 形式)を用意してあります。 下記にアクセスします。 https://app.box.com/s/vyeb960mer54pz6i6es5r2i0x0f965dz Node-RED サンプルフォルダ内の「flows_image_recognition.json」をクリックし、画面右上の「ダウンロード」をクリックします。

p. 16 Node-RED でフローファイルのインポート Node-RED の画面右上の「三」>>「読み込み」の順にクリックします。 「読み込むファイルを選択してください」をクリックします。 ダウンロードした「flows_image_recognition.json」を選び、「開く」をクリックします。「読み込み先」に「新規のタブ」が選ばれていることを 確認し、「読み込み」をクリックします。 「読み込みました」と表示されます。しばらく待つとメッセージが消えます。

p. 17 Node-RED に「Teachable Machine 画像認識」タブが追加されます。「Teachable Machine 画像認識」タブをクリックします。 Node-RED：サンプル動作確認のための設定 2 つのノードを設定することで、動作確認を行うことができます。 Teachable machine ノードの設定確認 Mode は、Online とします。「Url」の欄に記載の URL 消し、あなた Teachable Machine で作成したモデルの URL に書き換えます。 「Output」は、Best prediction とします。 「Image」はチェックを入れます。「完了」をクリックします。 cloudant out ノードの設定確認 ノードの名前が「save db」の「cloudant out ノード」では、IBM Cloud で Node-RED 環境を構築した際に一緒に作成された Cloudant を指定しています。Cloudant は、IBM がホストするクラウド型の NoSQL データベースです。

p. 18 「Service」の欄は自動で選択されます。何も選択されていない場合は、右端に表示されている▼をクリックし、有効な Cloudant 環境を選 びます。また、「Database」の欄で、任意のデータベース名を入力します。勿論、そのまま使っても構いません。「完了」をクリックします。 有効な Cloudant 環境は、IBM Cloud 「リソース・リスト(https://cloud.ibm.com/resources)」で、「オファリング」に cloudant と入 力することで、「Services」の区分で表示されます。リソース・リストに表示されている有効な Cloudant のサービス名と、cloudant out ノー ドの「Service」欄で選ばれている名前が一致しているはずです。 動作確認 デプロイを実行 画面右上の「デプロイ」(黄色枠部分)をクリックします。 Web アプリの URL にアクセス Web ブラウザで、Node-RED サーバーの URL を確認します。 Node-RED の URL は、人によって異なります。IBM Cloud で、無料で使える Node-RED の場合は、https://node-red-wxuap- 2020-12-23.mybluemix.net/ までが、Node-RED が動いているサーバーの URL です。

p. 19 Node-RED が動いているサーバーの URL をコピーし、Web ブラウザで、「＋」をクリックして新規にタブを作成します。 Web ブラウザ上の新しいタブに、Node-RED のサーバーの URL を貼り付け、/red 以降を削除し、/form を入力します。 <例> 前 https://node-red-wxuap-2020-12-23.mybluemix.net/ 後 https://node-red-wxuap-2020-12-23.mybluemix.net/form node-red-wxuap-2020-12-23.mybluemix.net の部分は各自で異なります。ご自分の Node-RED のサーバーの URL に置き換 えてください。書き換え後の URL で Enter キーを押してアクセスします。 Web アプリの動作確認 表示されたフォームで、「ファイルの選択」をクリックし、認識させたい JEPG 形式の画像データを選び、「アップロード」ボタンをクリックします。「ア ップロード」ボタンをクリック後、アップロードした画像に対する認識結果が表示されます。「Back」で戻ることができます。 <画像アップロード> ボールペンとホッチキスの画像認識の場合は下記があります。 サンプル画像として、https://app.box.com/s/g7xojxoxnurbx8ujkqa6kknp5g4t13aj にアクセスし、Teachable Machine 画像サンプルフォルダ内の、「ボールペン-samples.zip」と「ホッチキス-samples.zip」をダウンロード し、Zip ファイルを解凍することで使用可能です。 <認識結果>

p. 20 Cloudant の確認 有効な Cloudant 環境は、IBM Cloud 「リソース・リスト(https://cloud.ibm.com/resources)」の画面で、「名前」の「Services」に 表示されます。リソース・リストに表示されている有効な Cloudant のサービス名をクリックします。 「Dashboard」をクリックします。 「Cloudant Dashboard」が表示されます。Node-RED で指定したデータベース名をクリックします。下図の場合は、teachable- machine-recognition になります。Node-RED のサンプルふろーで 設定変更している場合は、データベース名が図とは異なります。

p. 21 データベースに記録された JSON データの一覧が表示されます。表示されたデータをクリックします。 格納された JSON データが表示されます。 「View Attachments」をクリックすることで表示されるファイルを選ぶことで、画像認識に使用した画像データを確認することができます。 Cloudant には、このようにテキストデータだけでなく、画像等のファイルを添付することができます。なお、JSON データに、データ登録日などの 日付を入れるには、Node-RED の「DB 保管データの生成」と表示されている「function」ノードで、日付の挿入を行う必要があります。

p. 22 Node-RED サンプル：各ノードの解説 ファイルアップロードフォーム 下図の 3 つのノードを用いて、ファイルアップロードを行うフォームを構成しています。 http in ノードで、アップロードフォームの URL を制御しています。メソッドは GET とし、URL を /form としてフォーム URL に使用します。 template ノードでは、アップロードフォームを定義しています。場所の都合ですべて表示できないので、実際に確認してください。

p. 23 http response ノードは、http in ノードなどを使用する際に終点として必須です。 アップロードされた画像の認識/クラス分類 アップロードされた画像を、Teachable Machine で画像認識を行い、Web ブラウザ上での結果表示やデータベースに記録するまでの前 処理を以下で実施しています。 アップロードフォーム内の処理、

p. 24 次の teachable machine ノードでは、msg.payload に画像のデータを格納して渡す必要があるので、functiion ノードで変換します。 teachable machine ノードでは、Teachable Machine で作成したモデルに画像データを渡して、認識結果を出力します。 Mode は、Online を指定しています。Online を使用する場合は、Url でモデルが存在する URL を指定しなければなりません。Online 以 外には、Local と言い、サーバー内にあるモデルを指定することができます。 Output は、Best prediction を指定しています。画像認識結果として、もっともスコアが高いものだけが出力されます。 base 64 ノードでは、画像認識に使用された画像を、後の処理でデータベースに添付するために、画像を Base64 にエンコードしています。

p. 25 下図の function ノードでは、この後の認識表示やデータベースに記録するための前処理を行って居ます。 画像認識結果の表示 こちらの template ノードでは、画像認識結果の表示を定義しています。場所の都合ですべて表示できないので、実際に確認してください。

p. 26 データベースに記録 Node-RED サンプルでは、データベースである IBM Cloudant にデータを格納するようにしています。 こちらの function ノードでは、Cloudant に画像データを添付して画像認識結果を格納できるように、データベースに記録するための JSON データを作成します。添付データは、Base64 形式でエンコードされている必要があります。 cloudant out ノード では、上記の function ノードで生成した JSON データを記録する処理を行っています。記録先のデータベース名を 変更したい場合は、Database の欄で、英数字でデータベース名を入力してください。