Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IBM Watson Visual Recognition で画像認識アプリを作ろう! / W...
Search
Kyoko Nishito
November 16, 2019
Programming
0
720
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
Share
More Decks by Kyoko Nishito
See All by Kyoko Nishito
RDS for Db2 はじめの一歩・バックアップ編 / 20240725 First RDS for Db2 backup
kyokonishito
0
180
RDS for Db2 はじめの一歩・HA(高可用性)編 #2/ 20240712 First RDS for Db2 HA
kyokonishito
0
240
RDS for Db2 はじめの一歩・作り方編 #2/ 20240628 First RDS for Db2 creation
kyokonishito
0
370
watsonx.dataとも連携・オブジェクトストレージの大量データをデータウエアハウス(Db2 Warehouse)でらくらく分析 / IBMTechXchangeJP-2023-DM02
kyokonishito
0
99
Db2 REST APIを使ってみよう! 〜Db2 on Cloud編〜 / 20230727 Db2 REST API
kyokonishito
0
440
1時間でわかる&魅せる! Db2 LUW 11.5.8の最新情報: デモ資料 / 20230627 Db2 Demo
kyokonishito
0
360
Db2でシェアサイクルポートの地理情報分析をやってみよう! / 20220928-Db2-Spatial
kyokonishito
0
210
Jupyter NotebookからDb2へらくらくアクセス - Db2 Magic コマンドを使おう! - / 20220421 Jupyter Notebooks with Db2
kyokonishito
0
380
IBMの考えるデータ戦略を徹底解説&デモ / 20220405-Db2-Demo
kyokonishito
0
480
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
630
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
受け取る人から提供する人になるということ
little_rubyist
0
230
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
920
Contemporary Test Cases
maaretp
0
140
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
920
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
Jakarta EE meets AI
ivargrimstad
0
560
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Practical Orchestrator
shlominoach
186
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
GitHub's CSS Performance
jonrohan
1030
460k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Done Done
chrislema
181
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Transcript
IBM Watson Visual Recognition で 画像認識アプリを作ろう︕ Kyoko Nishito Developer Advocate
Tokyo City Team
Speaker ⻄⼾ 京⼦ Kyoko Nishito IBM Developer Advocate KyokoNishito
本⽇の資料 本⽇の資料はこちらからPCにダウンロードお願いし ます。URLをクリックしたり、コマンドをコピペしたりでき ますので、サイトでみるのではなく、ダウンロードをお願いし ます。 http://ibm.biz/kagawa-watson02 ハンズオン資料
本⽇作成するWebアプリ ・スマートフォンで写した写真を、 Watson APIで画像認識し結果を表 ⽰します。 ・Watsonに⾃分のとった画像を学 習させて、分類器を作成し、 その分類器での認識結果を表⽰しま す。 4
5 本⽇作成するWebアプリの構成イメージ USER WEB UI NODE RED WATSON VISUAL RECOGNITION
IBM CLOUD USER
6 • 画像認識「⼀般種別」(General Tagging): • 事前学習済みの分類器の出⼒を返します • 画像認識「カスタム」: • 識別を⾏いたいクラスのイメージを事前学習させ、その分類器
の出⼒を返します。 Visual Recognition API ビジュアル リコグニションAPI (画像認識API)
今回使⽤するプログラミングツール 7 Node-RED (ノードレッド) Node-REDはノード同⼠を ⽮印でつなげて プログラムを作る ビジュアルプログラミング ツールです。 IoTアプリなどでよく使われます。
ドローンの制御などもできます。
必要なもの 8 • IBM CloudのID • 取得はこちら: https://ibm.biz/BdzLJK • 認識させたいもの2種類以上
• ⾃分の顔、ボールペン、ケーブル等のその場で写真を撮って画像認識させられるものを推奨します。 • カメラ付きのスマートフォン • (必要な場合)スマートフォンからPCへ写真をコピーするための ケーブル[ない場合はお貸しします]
開発⼿順 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でアプリケーション作成
開発⼿順 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でアプリケーション作成
1.1. IBM Cloudにログイン 11 まずは https://ibm.biz/BdzLJq にアクセスして 右上の「ログイン」から ログインしてください ハンズオン以外では
https://cloud.ibm.com/login からログイン可能です
1.2. 「カタログ」をクリック (「リソースの作成」をクリッ クでもOK) 12 ダッシュボードが表⽰されるので、上部のメニューにある「カタログ」をクリック します。
1.3. カテゴリ 「スターターキット」 をクリックし、「Node- RED Starter」をクリック 13
1.4. Cloud Foundry アプリの作成 14 地域の選択: ダラス にしておきます。 下にスクロールします。
1.4. Cloud Foundry アプリの作成 15 アプリ名: ドメインでユニークになるよう、半⾓ 英数字で⽂字列を⼊れます。⾃分のIDや名前を⼊ れると他の⼈と重なる可能性が少ないです。⾃分 の⼊れた⽂字列がユニークでない場合は、エラー
メーッセージが表⽰されますので、修正します。 また記号はハイフン-しか使えませんので注意。 ホスト名: アプリ名と同じものが⾃動で⼊ります。 ドメイン︓ ここではデフォルトのドメインus- south.cf.appdomain.cloudをそのまま使ってみ ます。 組織の選択: デフォルトのままでよいです。 スペースの選択: デフォルトのままでよいです。 選択済みプラン: 無料のプランを使いたい場合は、 それぞれライト、Liteが選択されていることを確 認してください。 全て記⼊・確認が終わったら「作成」ボタンをクリック してください。
1.4. Cloud Foundry アプリの作成 16 右のようなエラーが出た場合: ライトプランではCloud Foundryアプリが1つまで しか動作できません。以前作成したことがある場合 は
ダッシュボードから停⽌しておきましょう。 Cloud Foundryアプリは停⽌しているのにこのエ ラーが出てしまう場合、Cloudantサービスを以前 作成してないでしょうか? Cloudantサービスも ライトプランでは1つしか作成できません。残念 ながらスターターキットではCloud Foundryアプ リとCloudantサービスを両⽅作るしかありませ ん。以前のCloudantサービスは削除するか、 PAYGプランにアップグレードしてください。
1.4. Cloud Foundry アプリの作成 17 作成が成功すると下のような画⾯になります。ここはこのままにして次に進みます。
開発⼿順 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でアプリケーション作成
2.1. スマートフォンで写真撮影 19 • Watsonに学習させる写真を撮影します。 • 学習させたいもの2種類以上の写真を1種類につき最低10枚とってください 。 • iphoneの場合、横向き右側に丸ボタンの位置で写真をとると、PC移⾏後写真が横
になりませんので、⼈の顔の場合はこの⽅向を推奨します。 • 写真がPCに転送できない⽅は https://ibm.box.com/v/kagawa20191116にある • 10_YEN.zip • 100_YEN.zip の2つのファイルをダウンロードお願いします。
2.2. PCに写真をコピー 20 • iPhone → Macの場合はAirDropでコピーが便利です。 • Android・iPhone→Windowsの場合はusbケーブル接続でコピーでき ます。ケーブルがない場合は担当者に借りてください。
それ以外の場合: • Bluetooth転送 • メールで送付 • DropBox, Googleドライブなどネットワークストレージを利⽤する
2.3. ZIPファイル作成 21 • 撮影した物ごとにZIPファイルを作ります。 • ZIPファイルの名前が写真を認識した時、表⽰される名前になります ので、英数字でわかりやすい名前にします。 • ¥
| * { } [ ] $ - / ' ` ". の⽂字は使⽤しないでください。 例 • ⾃分の写真︓ ⾃分の名前を英語にした名前 Taro.zip • ボールペン: Ballpen.zip • USBケーブル: USBCable.zip
開発⼿順 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でアプリケーション作成
3.1. 新しいブラウザーのタブを開いて, IBM Cloud のダッシュ ボードを表⽰ 23 Node-REDサービスを作成したのと同じブラウザー上で、新しいタブを開きます。 https://cloud.ibm.com/ にアクセスして、ダッシュボードを開きます。
上部のメニューにある「カタログ」をクリックします。
3.2. Visual Recognitionサービスの選択 24 1. 左側のメニューから「AI」をクリック 2. 下にスクロールして表⽰された「Visual Recognition」をクリック
25 下にスクロールして、価格プランに「ライト」が選択されていることを確認して、 「作成」をクリック 3.3. Visual Recognitionサービスを作成する
3.4 Visual Recognitionサービスを作成確認 26 下の画⾯が出たら、作成完了です。
開発⼿順 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でアプリケーション作成
4.1 Visual Recognitionの右メニューから「接続」をクリック し、「接続の作成」をクリック 28
4.2. CLOUD FOUNDRYアプリから、最初の[1. Node-RED サービス作成]で作成したアプリ名にマウスを当てると表⽰され る、「接続」をクリック 29 尚、本⽇初めてアプリを作成する⽅はさっき作成した1⾏しか表⽰されません。
4.3. 「 Cloud Foundry アプリケーションの接続」が表⽰され るので、そのまま「アプリの接続および再ステージ」をクリッ ク 30 その後、もう⼀度下の画⾯がでますので、 「再ステージ」をクリック
開発⼿順 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でアプリケーション作成
5.1. 画⾯そのまま、「カタログ」をクリック 32 上部のメニューにある「カタログ」をクリックします。
5.2. Watson Studioサービスの選択 33 1. 左側のメニューから「AI」をクリック 2. 表⽰された「Watson Studio」をクリック
5.3.地域の選択は「ダラス」を選択。LitePlanを確認して、右 側の「作成」をクリック。 34
5.4 Watson Studioを⽴ち上げる 35 「Get Started」をクリックしてください。
5.5 新しいタブでWatson Studioが表⽰されます 36 下記のウィンドウは「x」をクリックして消してください。
5.6 Projectの作成 37 1 「Create a Project」をクリックします。 2 「Create an
empty project」をクリックします。
5.6 Projectの作成 38 3 Nameに任意のProject名を⼊れます。 4 「Define storage」が表⽰されてない場合は、下にスクロールして、「Define storage」を 表⽰させます(ブラウザー表⽰が横⻑の場合は右側に表⽰されています)。
5.6 Projectの作成 39 A Object Storage未作成の場合: 5A-1. Define Storage の①Select
storage serviceから「Add」をクリックします。
5.6 Projectの作成 40 5A-2. Cloud Object Storageの画⾯が表⽰されるので下にスクロールします。 5A-3. Liteが選択されていることを確認して「Create」をクリックします。 5A-4.
Confirm Creationのダイアログはそのまま「Confirm」をクリックします。
5.6 Projectの作成 41 5A-2. Cloud Object Storageの画⾯が表⽰されるので下にスクロールします。 5A-3. Liteが選択されていることを確認して「Create」をクリックします。 5A-4.
Confirm Creationのダイアログはそのまま「Confirm」をクリックします。
5.6 Projectの作成 42 5A-5. New Projectの画⾯になるので、Define Storage の②Refreshをクリッ クします。 5A-6.
Storageが表⽰された後、[Create]をクリックします。
5.6 Projectの作成 43 B. Object Storage作成済の場合 5B-1. [Create]をクリック ただしObject Storageを複数作成している場合は、使⽤したいObject
Storageを選択後に [Create]をクリック
5.6 Projectの作成 44 6 Projectの画⾯が表⽰されます
開発⼿順 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でアプリケーション作成
46 作成したProjectとVisual Recognitionサービスを関連付けます。 Watson Studioの画⾯で作成したProjectのOverviewが表⽰された状態だと思います。 もしWatson Studioの画⾯で作成したProjectが表⽰されてない場合は、ログイン後、作成済 Projectの表⽰⽅法を参照の上、Projectを表⽰させてください。 6.1. 上部メニューから「Settings」をクリックします。
47 6.2 下にスクロールして、「Associated services」の右上の 「Add service」をクリックし、表⽰されたリストから 「Watson」をクリックします。
48 6.3. 下にスクロールして、「Visual Recognition」の「Add」 をクリックします。
49 6.4. 「Existing Service Instance」の「Select sevice from the list」をクリックすると、作成したVisual Recognitionの
サービス名が表⽰されるので、クリックします。 作成したVisual Recognitionのサービス名がセットされたら、 「Select」をクリックします。
50 6.5. Settingsの画⾯に戻るので、下にスクロールして、、 「Associated services」にセットしたVisual Recognitionの サービス名が表⽰されていることを確認します。 これでWatson Studio関連のセットアップは完了しました︕
開発⼿順 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でアプリケーション作成
7.1 ダッシュボードを開く 52 別のタブにWatson Studioの画⾯が残っていますので、そのタブを開きます。 その後左上のIBM Cloudロゴをクリック (⾒つからない⽅は https://cloud.ibm.com/にアクセス)
7.2. リソースの要約の「Services」をクリックし、表⽰された リソースリストからからVisual Recognitionのサービス名をク リック 53
7.3. Visual Recognitionサービスの管理画⾯に表⽰された 「Watson Studio」の起動をクリックします。 54 最終的に以下のような画⾯ が表⽰されます。
7.4. Classify Imagesの中にある「Create Model」をクリック します。 55
56 7.5.カスタムモデル作成画⾯が表⽰されます。 尚、モデルの名前はDefault Custom Modelとなるので、変更したい場合は、 名前をクリックして変更します。学習後 は変更できません。
57 7.9. 学習する写真のZIPファイルを、Cloud上にアップロード 準備した画像のZIPファイルCloud上にアップロードします。 右側のUpload to projectの点線の四⾓内に、作成したZIPファイルをドラッグ&ドロップして ください。 尚、ドラッグ後、Pendingの状態が⻑く続く場合は、 「Dismiss」をクリックして⼀旦アップロードを中⽌し、
再度ドラッグしてみてください。
58 7.10. 学習⽤写真をモデルに追加 アップロードが完了すると⾃動で左側のエリアにZIPファイル名をクラス名としてイメージが追 加されます。 もし⾃動で追加さ れなかった場合 は、チェックボッ クスをクリックし てチェックしてく
ださい。 その後「Add to model」クリック してください。
59 7.11. トレーニング開始 以下のイメージのように - アップロードしたファイルの名前になっている - 「Train Model」ボタンが⻘⾊でクリックできる状態になっている の2点を確認したら、「Train
Model」をクリック。 尚、「Train Model」ボ タンが⻘⾊でクリックで きる状態 になっていな い場合は、写真の枚数が ⾜りない、写真の分類が 1種類しかない等が考え られますので、確認して みてください。
60 7.12. 次のステップに進みます 学習には時間がかかりますので(データ量によりますが約10分以上かかります)、しばらくこの ままにしておきます。そのままにできない場合は、ブラウザーを閉じてしまっても問題はあり ません。 そのままにしておいた場合は、学習が終了すると上部に「Training successful」とメッセージ が表⽰されます。
開発⼿順 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でアプリケーション作成
8.1.最初に作成しそのままにておいた「Node-RED Starter」 のタブに戻ります。 62 画⾯が⾏⽅不明の場合はこちらを参照して表⽰させてください。 「このアプリは稼働中です」と表⽰されているのを確認します。
8.2 「アプリURLにアクセス」をクリック 63 Node-REDフローエディタが開きます。
8.3. ユーザー名/パスワードを設定します。 64 ユーザー名/パスワードは次に使うので忘れないようどこかにメモしてください。
8.4 Node RED flow editorを開く 65 1.「Go to your Node
RED flow editor」をクリック 2.先ほど設定したユーザー名/パスワードを⼊⼒して「ログイン」をクリック
8.5. Node RED flow editorが開きます 66 パレット ワークスペース 情報ウィンドウ デバッグウィンドウ
エディターの各名称
8.5. Node RED flow editorが開きます 67 ノード デプロイ メニュー エディターの各名称
ヒント
8.5. Node-RED アプリ全体フロー確認 68 ここを最初に作ります
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 69 このフローを実際に作成し、画⾯表⽰をみてみます。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 70 パレットを下にスクロールして ネットワークから 「http in」ノードをワークスペースに ドラッグ&ドロップします。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 71 1.ワークスペースに置いたhttpノードをダ ブルクリックして編集画⾯を開きます。 2. URLと名前に /watsonvr と⼊⼒し、完了をクリックします。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 72 1.パレットをスクロールして、「機能」か らtemplateノードをワークスペースにド ラッグ&ドロップします。 2. 先ほど作成した/watsonvr ノードと接
続します。/watsonvrノードの右の点をド ラッグして、templateノードの左の点を クリックしてください。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 73 1.ワークスペースに置いたtemplateノー ドをダブルクリックして編集画⾯を開き ます。 2. 名前にトップページと⼊⼒します。 3.
http://ibm.biz/DevRdWatson から toppage.htmlを表⽰します。中⾝を全部 選択しクリップボードにコピーします(次 ページ参考)。 4. テンプレートの中⾝を削除し、3でコ ピーした内容を貼り付け後、完了をク リック
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 参考: http://ibm.biz/DevRdWatson GitHubからのコピペ⽅法 74 1. 指定のファイル名をク リック
2. [Raw] ボタンをクリック 3.表⽰された⽂字列を 全選択(CTRL+A or ⌘+A) →コピー(CTRL+C or ⌘+C)
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 75 1.パレットを上にスクロールして、「ネッ トワーク」からhttp responseノードを ワークスペースにドラッグ&ドロップしま す。 2.
先ほど作成したトップページノードと 接続します。トップページノードの右の 点をドラッグして、 http responseノー ドの左の点をクリックしてください。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 76 1.ワークスペースに置いたhttp response ノードをダブルクリックして編集画⾯を 開きます。 2. 名前に
http response と⼊⼒し、完了をクリックします。 これで画⾯表⽰部分の完成です︕
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 77 1. 「デプロイ」をクリックして、フローの変更を反映させます。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 78 では早速Webブラウザーで表⽰させて⾒ましょう︕ https://[Node-REDアプリ名].us-south.cf.appdomain.cloud/watsonvr にWebブラウ ザーでアクセスします。[Node-REDアプリ名]は15ページで設定しています。 または今開いているNode-REDエディターのURLの先頭部分の⽂字列です。 例:
https://nishito-kagawa-vr.us-south.cf.appdomain.cloud/watsonvr ⾚⽂字部分が[Node-REDアプリ名]です。⾃分のものを⼊れてください。
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成 79 表⽰は右のようになります。 スマホでも表⽰して⾒ましょう。 PCのブラウザに表⽰されたQRコードを読 み取り、スマホのブラウザーでも表⽰させ ましょう︕ 画像認識⽤の写真はスマホのカメラを使⽤
します。 ⻘いボタンはまだ動作しません。 次にボタンの中⾝であるWatsonの画像認 識部分のフローを作成します。
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 80 次はこちらを作ります
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 81 このフローは時間の関係で、あらかじめできたも のをコピーでして作成します。 1. http://ibm.biz/DevRdWatsonから watsonflow.jsonを表⽰します。中⾝を全部選択 しクリップボードにコピーします(コピー⽅法は
次⾴参照)。 2. Node-REDメニューから「読み込み」→「ク リップボード」をクリック 3. 「JSON形式のデータを貼り付けてください」 とかいてある枠に、3でコピーした内容を貼り付 けし、「読み込み」をクリックする
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 参考: http://ibm.biz/DevRdWatson GitHubからのコピペ⽅法 82 1. 指定のファイル名をクリッ ク
2. [Raw] ボタンをクリック 3.表⽰された⽂字列を 全選択(CTRL+A or ⌘+A) →コピー(CTRL+C or ⌘+C)
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 83 以下が読み込まれたことを確認してください。
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 この前に撮影した写真ををWatsonに学習させました。 もう学習完了しているはずなので、その学習モデルのIDを取得し、フローにセットします。 ブラウザのNode-REDとは別のタブで、下記のようなカスタムモデル作成画⾯が残っています ので、「 Associated Service :
」の右側のプロジェクト名をクリックします。
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 作成したModel名の「 Copy classifier ID」をクリックし、classifier IDをコピーします
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 Node-REDのタブに戻り、「カスタム認識のパラメータ設定」ノードをダブルクリックして編 集画⾯を開きます。
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 コード内 // XXにカスタムモデルのIDをセットします。 msg.params.classifier_ids = "food"; のfood部分を
コピーしたclassifier IDで置き換えます。 置き換え例︓ msg.params.classifier_ids = " DefaultCustomModel_1812345678 "; その後「完了」をクリックします。
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成 88 1. 「デプロイ」をクリックして、フローの変更を反映させます。
8.8. Node-REDでアプリ作成: 完成!!! 89 これで⻘いボタンも機能するようになりま した。 早速動作の確認をしましょう。 1. スマホで表⽰させた画⾯をリロードしま す(iphoneならURLの右のようなマーク
をクリック)。 2. ファイルを選択をクリックします。 3.「写真を撮る」などカメラを使うメ ニューがでてきますので、それを選択し、 ⾃分の写真を撮影します。
8.8. Node-REDでアプリ作成: 完成!!! 90 写真を表⽰できたら⻘いボタンを押してみてくだ さい。 Watsonで認識(Watson学習済みモデルを利⽤): Watsonが写真を認識した内容を表⽰します。 Watsonで認識(カスタム学習モデルを利⽤): 学習させた写真から、認識した内容を表⽰します。
似てると思われる学習させたZIPファイルの名前が 表⽰されます。
8.8. Node-REDでアプリ作成: 完成!!! 91 認識結果サンプル
6. Node-REDでアプリ作成: 応⽤編 時間が余った時、帰宅後にお試しください 92 Foodという⾷べ物の画像の事前学習済みモデルがありますので、 ぜひ試してみてください。 「8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作
成」の⼿順で、foodから⾃分のclassifier IDに置き換えていま す。 これをまたfoodに戻し、デプロイしてみます。
いろいろな写真を認識させて試してみましょう! Thank You! 93
補⾜: 94 ・ライトプランでアプリ作成された場合の注意点 以下の制限がありますので、ご注意ください。 - 10⽇間 開発なしでアプリを⾃動停⽌ - 30⽇間 活動なしでサービスの⾃動削除
• 本資料は2019年11⽉現在に作成された内容となります。 実際の画⾯が予告なく変更される場合がございますが、ご了承ください。
95 twitter.com/KyokoNishito developer.ibm.com/jp/patterns/ IBM Watson Thank you 使い⽅でご質問あればDMください