無料の「IBM Cloud ライトアカウント」を用いた画像判定アプリハンズオン資料
•
0 likes•477 views
Webブラウザで画像をアップロードし、判定するサンプルアプリケーションを通じて、画像判定・分類アプリの仕組みについて、Node-REDを用いて体験します。
Recommended
More Related Content
Similar to 無料の「IBM Cloud ライトアカウント」を用いた画像判定アプリハンズオン資料
Similar to 無料の「IBM Cloud ライトアカウント」を用いた画像判定アプリハンズオン資料 (20)
More from Kohei Nishikawa
More from Kohei Nishikawa (20)
無料の「IBM Cloud ライトアカウント」を用いた画像判定アプリハンズオン資料
- 1. 2019-07-11 Code and Response Day Tokyo #2 Hand-on material Node-RED・IBM Cloudant・Watson Visual Recognition 1
- 2. 作るもの 目的 • 机の片付け具合を判定するカスタム画像分類モデルを用いた、判定アプリを実装する。 ロジック 1. Node-REDに実装したWebフォームにアクセス。 2. 対象物の識別名を入力 3. 画像分類モデルを選択 4. 写真を選択。 5. アップロード 6. Watson Visual Recognitionが判定。 7. 判定結果とスコアが表示される。 8. IBM Cloudantに、識別名や判定結果、スコア、画像データが添付され、記録として参照できる。 令和1年7月10日 2
- 3. 準備するもの IBM Cloud ライトアカウント • https://ibm.biz/BdzMNG << ここから登録。要メールアドレス Watson Studioを用いて、Watson Visual Recognitionのカスタム画像分類モデルを用意。 • 前セッションの内容です。 セッションを見てない方向けの参考資料 https://www.slideshare.net/kolinz/watson-visual-recognition-nodered Node-RED Starter 1. IBM Cloud ライトアカウント取得後、ログイン。https://cloud.ibm.com 2. IBM Cloud ダッシュボード、画面右上の「カタログ」をクリック。 3. 画面左下の「スターター・キット」をクリック。 4. 「Node-RED Starter」をクリック。 5. 英数字でアプリ名を入力。ホスト名も自動入力される。 6. 画面右下の「作成」ボタンをクリック。 7. 「このアプリは稼働中です。」または「実行中」と表示されるまで待機します。5～10分くらい必要。 8. 「アプリURLにアクセス」をクリックし、Node-REDにアクセスします。 令和1年7月10日 3
- 5. Node-RED初期設定.2 令和1年7月10日 5 Node-REDで使用できるサンプルや追記機能等の説明が 表示されます。特に追加しなくても良いので、今回は、画面 下の「Next」をクリックします。 「Finish the install」の画面が表示されましたら、 「Finish」ボタンをクリックして終了です。
- 6. Node-REDログイン 令和1年7月10日 6 「Go to your Node-RED flow editor」をクリックし、先ほど設定した 「Username」と「Password」でログイン します。
- 11. サンプルフロー 令和1年7月10日 11 読み込み(インポート) により、下図のように Node-RED上に表示 されます。とりあえず 動かすために、枠部分 のノードを設定する必 要があります。
- 12. 設定：Select Custome Model ID 令和1年7月10日 12 この設定は、カスタム画像モデルを作成している場合に有効です。「Select Custome Model ID」をダブル クリックし、「functionノードを編集」画面を表示します。 画面内の「Model ID」をカスタム画像分類モデルの「Model ID」に置き換えます。
- 13. 設定：Visual Recognition 令和1年7月10日 13 この設定は、カスタム画像分類モデルの作成済みの有無にかからず必須です。「visual recognition」をダブ ルクリックし、「visual recognitionノードを編集」画面を表示します。 画面内の「API Key」の入力と、「Service Endpoint」を選択します。
- 14. 設定：Insert to Cloudant 令和1年7月10日 14 この設定は、カスタム画像分類モデルの作成済みの有無にかからず必須です。「Insert to Cloudant」をダブ ルクリックし、「cloudant outノードを編集」画面を表示します。 画面内の「Service」と「Database」で、画像分類結果を保管する先のデータベースを設定します。 「Only store msg.payload object?」にチェックが入っていることを確認します。
- 15. 動作確認 令和1年7月10日 15 設定後、画面右上の「デプロイ」をクリックし、画像アップロードフォームにアクセスします。 画像アップロードフォームのURLは、下記のようになります。 Node-REDのURLが、 https://courceapp1808.mybluemix.net/red/ のとき、redの箇所を uploadに書き換え、 https://courceapp1808.mybluemix.net/upload となります。 ベーシック認証のユーザー名とパスワードは、と もに「user」になっています。Node-REDの 「http auth」ノードで変更することが可能です。
- 16. カスタマイズ例：Cloudantに画像データを保存 令和1年7月10日 16 判別結果と画像データをCloudantに格納できる ようにしてみましょう。 たとえば、functionノードの「Output Save Recognition data」を開き、 recogdate: dateの後に、カンマを入れ、続けて 下記のように追記します。 これで、Cloudantに、画像データが保存されるよ うになります。 attachments: { A001: { content_type: imagefiletype, data: msg.payload.toString('base64') } }
- 17. その他カスタマイズ 令和1年7月10日 17 全体的にカスタマイズしても良いですが、触りやすい箇所をいくつか紹介します。 1. 「switch」ノードの前後 • 画像アップロードフォーム画面で「標準」と「カスタム」で、Visual Recognitionにおける画像分類モデルを切り替え ています。 • Visual Recognitionのカスタム画像分類モデルを増やしたり、Visual Recognition以外の、Microsoft AzureやGoogle GCPなどの画像分類サービスを組み合わせることが考えられます。 2. 「class & score」ノードの前後 • 画像分類結果から、エンドユーザー側の結果表示画面に表示する項目を制御しています。 3. 「template」ノード • 2つあり、エンドユーザー側で、画像ファイルのアップロードフォームや画像分類結果を表示するためのHTMLを定義 しています。 • 画像アップロード時に画像サイズを圧縮し、容量を小さくする処理を、javascriptなどで書き、機能を追加すると使 いやすくなります。Visual Recognitionでは2MB未満の画像であることが望ましいです。 4. 判定結果を、「Atlassian Jira」や「Trello」、「Redmine」などのタスク管理ツールにREST APIでPOSTし、セキュリ ティ担当者に要注意社員のIDと証拠画像を転送、記録する。
- 18. 書いた人 令和1年7月10日 18 2019 IBM Champions 勤務先：リックソフト株式会社 Twitter： kolinz Facebook： kohei.nishikawa その他 • NPO法人広域連携医療福祉システム 支援機構 研究員 • 可視化情報学会などに参加。 • WatsonやNode-REDを用いて、医 療機関と連携した研究プロジェクトを 進行中。