Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IBM Watson Visual Recognition で画像認識アプリを作ろう! / Watson Visual Recognition with Node-RED 2019

IBM Watson Visual Recognition で画像認識アプリを作ろう! / Watson Visual Recognition with Node-RED 2019

2019/11/16(土) 13:00 〜 16:30 「使おうWatson at 香川県」
「IBM Watson Visual Recognition で画像認識アプリを作ろう︕」
の資料です。

Kyoko Nishito

November 16, 2019
Tweet

More Decks by Kyoko Nishito

Other Decks in Programming

Transcript

  1. 必要なもの 8 • IBM CloudのID • 取得はこちら: https://ibm.biz/BdzLJK • 認識させたいもの2種類以上

    • ⾃分の顔、ボールペン、ケーブル等のその場で写真を撮って画像認識させられるものを推奨します。 • カメラ付きのスマートフォン • (必要な場合)スマートフォンからPCへ写真をコピーするための ケーブル[ない場合はお貸しします]
  2. 開発⼿順 9 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  3. 開発⼿順 10 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  4. 1.4. Cloud Foundry アプリの作成 15 アプリ名: ドメインでユニークになるよう、半⾓ 英数字で⽂字列を⼊れます。⾃分のIDや名前を⼊ れると他の⼈と重なる可能性が少ないです。⾃分 の⼊れた⽂字列がユニークでない場合は、エラー

    メーッセージが表⽰されますので、修正します。 また記号はハイフン-しか使えませんので注意。 ホスト名: アプリ名と同じものが⾃動で⼊ります。 ドメイン︓ ここではデフォルトのドメインus- south.cf.appdomain.cloudをそのまま使ってみ ます。 組織の選択: デフォルトのままでよいです。 スペースの選択: デフォルトのままでよいです。 選択済みプラン: 無料のプランを使いたい場合は、 それぞれライト、Liteが選択されていることを確 認してください。 全て記⼊・確認が終わったら「作成」ボタンをクリック してください。
  5. 1.4. Cloud Foundry アプリの作成 16 右のようなエラーが出た場合: ライトプランではCloud Foundryアプリが1つまで しか動作できません。以前作成したことがある場合 は

    ダッシュボードから停⽌しておきましょう。 Cloud Foundryアプリは停⽌しているのにこのエ ラーが出てしまう場合、Cloudantサービスを以前 作成してないでしょうか? Cloudantサービスも ライトプランでは1つしか作成できません。残念 ながらスターターキットではCloud Foundryアプ リとCloudantサービスを両⽅作るしかありませ ん。以前のCloudantサービスは削除するか、 PAYGプランにアップグレードしてください。
  6. 開発⼿順 18 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  7. 2.1. スマートフォンで写真撮影 19 • Watsonに学習させる写真を撮影します。 • 学習させたいもの2種類以上の写真を1種類につき最低10枚とってください 。 • iphoneの場合、横向き右側に丸ボタンの位置で写真をとると、PC移⾏後写真が横

    になりませんので、⼈の顔の場合はこの⽅向を推奨します。 • 写真がPCに転送できない⽅は https://ibm.box.com/v/kagawa20191116にある • 10_YEN.zip • 100_YEN.zip の2つのファイルをダウンロードお願いします。
  8. 2.3. ZIPファイル作成 21 • 撮影した物ごとにZIPファイルを作ります。 • ZIPファイルの名前が写真を認識した時、表⽰される名前になります ので、英数字でわかりやすい名前にします。 • ¥

    | * { } [ ] $ - / ' ` ". の⽂字は使⽤しないでください。 例 • ⾃分の写真︓ ⾃分の名前を英語にした名前 Taro.zip • ボールペン: Ballpen.zip • USBケーブル: USBCable.zip
  9. 開発⼿順 22 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  10. 開発⼿順 27 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  11. 開発⼿順 31 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  12. 開発⼿順 45 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  13. 49 6.4. 「Existing Service Instance」の「Select sevice from the list」をクリックすると、作成したVisual Recognitionの

    サービス名が表⽰されるので、クリックします。 作成したVisual Recognitionのサービス名がセットされたら、 「Select」をクリックします。
  14. 開発⼿順 51 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  15. 59 7.11. トレーニング開始 以下のイメージのように - アップロードしたファイルの名前になっている - 「Train Model」ボタンが⻘⾊でクリックできる状態になっている の2点を確認したら、「Train

    Model」をクリック。 尚、「Train Model」ボ タンが⻘⾊でクリックで きる状態 になっていな い場合は、写真の枚数が ⾜りない、写真の分類が 1種類しかない等が考え られますので、確認して みてください。
  16. 開発⼿順 61 1. Node-REDサービス作成 2. スマートフォンで写真撮影、 PCへ写真をコピー、ZIPファイル作成 3. Visual Recognitionサービス作成

    4. Node-RED Visual Recognitionサービス接続 5. Watson Studioサービス・プロジェクト作成 6. Watson StudioのProjectとVisual Recognitionサービスの関連付け 7. Visual Recognitionでカスタム画像のトレーニング 8. Node-REDでアプリケーション作成
  17. 8.4 Node RED flow editorを開く 65 1.「Go to your Node

    RED flow editor」をクリック 2.先ほど設定したユーザー名/パスワードを⼊⼒して「ログイン」をクリック
  18. 8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 73 1.ワークスペースに置いたtemplateノー ドをダブルクリックして編集画⾯を開き ます。 2. 名前にトップページと⼊⼒します。 3.

    http://ibm.biz/DevRdWatson から toppage.htmlを表⽰します。中⾝を全部 選択しクリップボードにコピーします(次 ページ参考)。 4. テンプレートの中⾝を削除し、3でコ ピーした内容を貼り付け後、完了をク リック
  19. 8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 参考: http://ibm.biz/DevRdWatson GitHubからのコピペ⽅法 74 1. 指定のファイル名をク リック

    2. [Raw] ボタンをクリック 3.表⽰された⽂字列を 全選択(CTRL+A or ⌘+A) →コピー(CTRL+C or ⌘+C)
  20. 8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 75 1.パレットを上にスクロールして、「ネッ トワーク」からhttp responseノードを ワークスペースにドラッグ&ドロップしま す。 2.

    先ほど作成したトップページノードと 接続します。トップページノードの右の 点をドラッグして、 http responseノー ドの左の点をクリックしてください。
  21. 8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 81 このフローは時間の関係で、あらかじめできたも のをコピーでして作成します。 1. http://ibm.biz/DevRdWatsonから watsonflow.jsonを表⽰します。中⾝を全部選択 しクリップボードにコピーします(コピー⽅法は

    次⾴参照)。 2. Node-REDメニューから「読み込み」→「ク リップボード」をクリック 3. 「JSON形式のデータを貼り付けてください」 とかいてある枠に、3でコピーした内容を貼り付 けし、「読み込み」をクリックする
  22. 8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 参考: http://ibm.biz/DevRdWatson GitHubからのコピペ⽅法 82 1. 指定のファイル名をクリッ ク

    2. [Raw] ボタンをクリック 3.表⽰された⽂字列を 全選択(CTRL+A or ⌘+A) →コピー(CTRL+C or ⌘+C)
  23. 8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 コード内 // XXにカスタムモデルのIDをセットします。 msg.params.classifier_ids = "food"; のfood部分を

    コピーしたclassifier IDで置き換えます。 置き換え例︓ msg.params.classifier_ids = " DefaultCustomModel_1812345678 "; その後「完了」をクリックします。
  24. 8.8. Node-REDでアプリ作成: 完成!!! 89 これで⻘いボタンも機能するようになりま した。 早速動作の確認をしましょう。 1. スマホで表⽰させた画⾯をリロードしま す(iphoneならURLの右のようなマーク

    をクリック)。 2. ファイルを選択をクリックします。 3.「写真を撮る」などカメラを使うメ ニューがでてきますので、それを選択し、 ⾃分の写真を撮影します。
  25. 補⾜: 94 ・ライトプランでアプリ作成された場合の注意点 以下の制限がありますので、ご注意ください。 - 10⽇間 開発なしでアプリを⾃動停⽌ - 30⽇間 活動なしでサービスの⾃動削除

    • 本資料は2019年11⽉現在に作成された内容となります。 実際の画⾯が予告なく変更される場合がございますが、ご了承ください。