Slide 1
Slide 1 text
IBM Watson Visual Recognition で
画像認識アプリを作ろう︕
Kyoko Nishito
Developer Advocate
Tokyo City Team
Slide 2
Slide 2 text
Speaker
⻄⼾ 京⼦
Kyoko Nishito
IBM Developer Advocate
KyokoNishito
Slide 3
Slide 3 text
本⽇の資料
本⽇の資料はこちらからPCにダウンロードお願いし
ます。URLをクリックしたり、コマンドをコピペしたりでき
ますので、サイトでみるのではなく、ダウンロードをお願いし
ます。
http://ibm.biz/kagawa-watson02
ハンズオン資料
Slide 4
Slide 4 text
本⽇作成するWebアプリ
・スマートフォンで写した写真を、
Watson APIで画像認識し結果を表
⽰します。
・Watsonに⾃分のとった画像を学
習させて、分類器を作成し、
その分類器での認識結果を表⽰しま
す。
4
Slide 5
Slide 5 text
5
本⽇作成するWebアプリの構成イメージ
USER WEB UI NODE RED WATSON
VISUAL
RECOGNITION
IBM CLOUD
USER
Slide 6
Slide 6 text
6
• 画像認識「⼀般種別」(General Tagging):
• 事前学習済みの分類器の出⼒を返します
• 画像認識「カスタム」:
• 識別を⾏いたいクラスのイメージを事前学習させ、その分類器
の出⼒を返します。
Visual Recognition API
ビジュアル リコグニションAPI
(画像認識API)
Slide 7
Slide 7 text
今回使⽤するプログラミングツール
7
Node-RED (ノードレッド)
Node-REDはノード同⼠を
⽮印でつなげて
プログラムを作る
ビジュアルプログラミング
ツールです。
IoTアプリなどでよく使われます。
ドローンの制御などもできます。
Slide 8
Slide 8 text
必要なもの
8
• IBM CloudのID
• 取得はこちら: https://ibm.biz/BdzLJK
• 認識させたいもの2種類以上
• ⾃分の顔、ボールペン、ケーブル等のその場で写真を撮って画像認識させられるものを推奨します。
• カメラ付きのスマートフォン
• (必要な場合）スマートフォンからPCへ写真をコピーするための
ケーブル[ない場合はお貸しします]
Slide 9
Slide 9 text
開発⼿順
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でアプリケーション作成
Slide 10
Slide 10 text
開発⼿順
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でアプリケーション作成
Slide 11
Slide 11 text
1.1. IBM Cloudにログイン
11
まずは
https://ibm.biz/BdzLJq
にアクセスして
右上の「ログイン」から
ログインしてください
ハンズオン以外では
https://cloud.ibm.com/login
からログイン可能です
Slide 12
Slide 12 text
1.2. 「カタログ」をクリック （「リソースの作成」をクリッ
クでもOK）
12
ダッシュボードが表⽰されるので、上部のメニューにある「カタログ」をクリック
します。
Slide 13
Slide 13 text
1.3. カテゴリ 「スターターキット」 をクリックし、「Node-
RED Starter」をクリック
13
Slide 14
Slide 14 text
1.4. Cloud Foundry アプリの作成
14
地域の選択: ダラス にしておきます。
下にスクロールします。
Slide 15
Slide 15 text
1.4. Cloud Foundry アプリの作成
15
アプリ名: ドメインでユニークになるよう、半⾓
英数字で⽂字列を⼊れます。⾃分のIDや名前を⼊
れると他の⼈と重なる可能性が少ないです。⾃分
の⼊れた⽂字列がユニークでない場合は、エラー
メーッセージが表⽰されますので、修正します。
また記号はハイフン-しか使えませんので注意。
ホスト名: アプリ名と同じものが⾃動で⼊ります。
ドメイン︓ ここではデフォルトのドメインus-
south.cf.appdomain.cloudをそのまま使ってみ
ます。
組織の選択: デフォルトのままでよいです。
スペースの選択: デフォルトのままでよいです。
選択済みプラン: 無料のプランを使いたい場合は、
それぞれライト、Liteが選択されていることを確
認してください。
全て記⼊・確認が終わったら「作成」ボタンをクリック
してください。
Slide 16
Slide 16 text
1.4. Cloud Foundry アプリの作成
16
右のようなエラーが出た場合:
ライトプランではCloud Foundryアプリが1つまで
しか動作できません。以前作成したことがある場合
は ダッシュボードから停⽌しておきましょう。
Cloud Foundryアプリは停⽌しているのにこのエ
ラーが出てしまう場合、Cloudantサービスを以前
作成してないでしょうか? Cloudantサービスも
ライトプランでは1つしか作成できません。残念
ながらスターターキットではCloud Foundryアプ
リとCloudantサービスを両⽅作るしかありませ
ん。以前のCloudantサービスは削除するか、
PAYGプランにアップグレードしてください。
Slide 17
Slide 17 text
1.4. Cloud Foundry アプリの作成
17
作成が成功すると下のような画⾯になります。ここはこのままにして次に進みます。
Slide 18
Slide 18 text
開発⼿順
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でアプリケーション作成
Slide 19
Slide 19 text
2.1. スマートフォンで写真撮影
19
• Watsonに学習させる写真を撮影します。
• 学習させたいもの2種類以上の写真を1種類につき最低10枚とってください 。
• iphoneの場合、横向き右側に丸ボタンの位置で写真をとると、PC移⾏後写真が横
になりませんので、⼈の顔の場合はこの⽅向を推奨します。
• 写真がPCに転送できない⽅は
https://ibm.box.com/v/kagawa20191116にある
• 10_YEN.zip
• 100_YEN.zip
の2つのファイルをダウンロードお願いします。
Slide 20
Slide 20 text
2.2. PCに写真をコピー
20
• iPhone → Macの場合はAirDropでコピーが便利です。
• Android・iPhone→Windowsの場合はusbケーブル接続でコピーでき
ます。ケーブルがない場合は担当者に借りてください。
それ以外の場合:
• Bluetooth転送
• メールで送付
• DropBox, Googleドライブなどネットワークストレージを利⽤する
Slide 21
Slide 21 text
2.3. ZIPファイル作成
21
• 撮影した物ごとにZIPファイルを作ります。
• ZIPファイルの名前が写真を認識した時、表⽰される名前になります
ので、英数字でわかりやすい名前にします。
• ¥ | * { } [ ] $ - / ' ` ". の⽂字は使⽤しないでください。
例
• ⾃分の写真︓ ⾃分の名前を英語にした名前 Taro.zip
• ボールペン: Ballpen.zip
• USBケーブル: USBCable.zip
Slide 22
Slide 22 text
開発⼿順
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でアプリケーション作成
Slide 23
Slide 23 text
3.1. 新しいブラウザーのタブを開いて, IBM Cloud のダッシュ
ボードを表⽰
23
Node-REDサービスを作成したのと同じブラウザー上で、新しいタブを開きます。
https://cloud.ibm.com/ にアクセスして、ダッシュボードを開きます。
上部のメニューにある「カタログ」をクリックします。
Slide 24
Slide 24 text
3.2. Visual Recognitionサービスの選択
24
1. 左側のメニューから「AI」をクリック
2. 下にスクロールして表⽰された「Visual Recognition」をクリック
Slide 25
Slide 25 text
25
下にスクロールして、価格プランに「ライト」が選択されていることを確認して、
「作成」をクリック
3.3. Visual Recognitionサービスを作成する
Slide 26
Slide 26 text
3.4 Visual Recognitionサービスを作成確認
26
下の画⾯が出たら、作成完了です。
Slide 27
Slide 27 text
開発⼿順
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でアプリケーション作成
Slide 28
Slide 28 text
4.1 Visual Recognitionの右メニューから「接続」をクリック
し、「接続の作成」をクリック
28
Slide 29
Slide 29 text
4.2. CLOUD FOUNDRYアプリから、最初の[1. Node-RED
サービス作成]で作成したアプリ名にマウスを当てると表⽰され
る、「接続」をクリック
29
尚、本⽇初めてアプリを作成する⽅はさっき作成した１⾏しか表⽰されません。
Slide 30
Slide 30 text
4.3. 「 Cloud Foundry アプリケーションの接続」が表⽰され
るので、そのまま「アプリの接続および再ステージ」をクリッ
ク
30
その後、もう⼀度下の画⾯がでますので、
「再ステージ」をクリック
Slide 31
Slide 31 text
開発⼿順
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でアプリケーション作成
Slide 32
Slide 32 text
5.1. 画⾯そのまま、「カタログ」をクリック
32
上部のメニューにある「カタログ」をクリックします。
Slide 33
Slide 33 text
5.2. Watson Studioサービスの選択
33
1. 左側のメニューから「AI」をクリック
2. 表⽰された「Watson Studio」をクリック
Slide 34
Slide 34 text
5.3.地域の選択は「ダラス」を選択。LitePlanを確認して、右
側の「作成」をクリック。
34
Slide 35
Slide 35 text
5.4 Watson Studioを⽴ち上げる
35
「Get Started」をクリックしてください。
Slide 36
Slide 36 text
5.5 新しいタブでWatson Studioが表⽰されます
36
下記のウィンドウは「x」をクリックして消してください。
Slide 37
Slide 37 text
5.6 Projectの作成
37
1 「Create a Project」をクリックします。
2 「Create an empty project」をクリックします。
Slide 38
Slide 38 text
5.6 Projectの作成
38
3 Nameに任意のProject名を⼊れます。
4 「Define storage」が表⽰されてない場合は、下にスクロールして、「Define storage」を
表⽰させます(ブラウザー表⽰が横⻑の場合は右側に表⽰されています)。
Slide 39
Slide 39 text
5.6 Projectの作成
39
A Object Storage未作成の場合:
5A-1. Define Storage の①Select storage serviceから「Add」をクリックします。
Slide 40
Slide 40 text
5.6 Projectの作成
40
5A-2. Cloud Object Storageの画⾯が表⽰されるので下にスクロールします。
5A-3. Liteが選択されていることを確認して「Create」をクリックします。
5A-4. Confirm Creationのダイアログはそのまま「Confirm」をクリックします。
Slide 41
Slide 41 text
5.6 Projectの作成
41
5A-2. Cloud Object Storageの画⾯が表⽰されるので下にスクロールします。
5A-3. Liteが選択されていることを確認して「Create」をクリックします。
5A-4. Confirm Creationのダイアログはそのまま「Confirm」をクリックします。
Slide 42
Slide 42 text
5.6 Projectの作成
42
5A-5. New Projectの画⾯になるので、Define Storage の②Refreshをクリッ
クします。
5A-6. Storageが表⽰された後、[Create]をクリックします。
Slide 43
Slide 43 text
5.6 Projectの作成
43
B. Object Storage作成済の場合
5B-1. [Create]をクリック
ただしObject Storageを複数作成している場合は、使⽤したいObject Storageを選択後に
[Create]をクリック
Slide 44
Slide 44 text
5.6 Projectの作成
44
6 Projectの画⾯が表⽰されます
Slide 45
Slide 45 text
開発⼿順
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でアプリケーション作成
Slide 46
Slide 46 text
46
作成したProjectとVisual Recognitionサービスを関連付けます。
Watson Studioの画⾯で作成したProjectのOverviewが表⽰された状態だと思います。
もしWatson Studioの画⾯で作成したProjectが表⽰されてない場合は、ログイン後、作成済
Projectの表⽰⽅法を参照の上、Projectを表⽰させてください。
6.1. 上部メニューから「Settings」をクリックします。
Slide 47
Slide 47 text
47
6.2 下にスクロールして、「Associated services」の右上の
「Add service」をクリックし、表⽰されたリストから
「Watson」をクリックします。
Slide 48
Slide 48 text
48
6.3. 下にスクロールして、「Visual Recognition」の「Add」
をクリックします。
Slide 49
Slide 49 text
49
6.4. 「Existing Service Instance」の「Select sevice from
the list」をクリックすると、作成したVisual Recognitionの
サービス名が表⽰されるので、クリックします。
作成したVisual Recognitionのサービス名がセットされたら、
「Select」をクリックします。
Slide 50
Slide 50 text
50
6.5. Settingsの画⾯に戻るので、下にスクロールして、、
「Associated services」にセットしたVisual Recognitionの
サービス名が表⽰されていることを確認します。
これでWatson Studio関連のセットアップは完了しました︕
Slide 51
Slide 51 text
開発⼿順
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でアプリケーション作成
Slide 52
Slide 52 text
7.1 ダッシュボードを開く
52
別のタブにWatson Studioの画⾯が残っていますので、そのタブを開きます。
その後左上のIBM Cloudロゴをクリック
(⾒つからない⽅は https://cloud.ibm.com/にアクセス)
Slide 53
Slide 53 text
7.2. リソースの要約の「Services」をクリックし、表⽰された
リソースリストからからVisual Recognitionのサービス名をク
リック
53
Slide 54
Slide 54 text
7.3. Visual Recognitionサービスの管理画⾯に表⽰された
「Watson Studio」の起動をクリックします。
54
最終的に以下のような画⾯
が表⽰されます。
Slide 55
Slide 55 text
7.4. Classify Imagesの中にある「Create Model」をクリック
します。
55
Slide 56
Slide 56 text
56
7.5.カスタムモデル作成画⾯が表⽰されます。
尚、モデルの名前はDefault Custom
Modelとなるので、変更したい場合は、
名前をクリックして変更します。学習後
は変更できません。
Slide 57
Slide 57 text
57
7.9. 学習する写真のZIPファイルを、Cloud上にアップロード
準備した画像のZIPファイルCloud上にアップロードします。
右側のUpload to projectの点線の四⾓内に、作成したZIPファイルをドラッグ＆ドロップして
ください。
尚、ドラッグ後、Pendingの状態が⻑く続く場合は、
「Dismiss」をクリックして⼀旦アップロードを中⽌し、
再度ドラッグしてみてください。
Slide 58
Slide 58 text
58
7.10. 学習⽤写真をモデルに追加
アップロードが完了すると⾃動で左側のエリアにZIPファイル名をクラス名としてイメージが追
加されます。
もし⾃動で追加さ
れなかった場合
は、チェックボッ
クスをクリックし
てチェックしてく
ださい。
その後「Add to
model」クリック
してください。
Slide 59
Slide 59 text
59
7.11. トレーニング開始
以下のイメージのように
- アップロードしたファイルの名前になっている
- 「Train Model」ボタンが⻘⾊でクリックできる状態になっている
の２点を確認したら、「Train Model」をクリック。
尚、「Train Model」ボ
タンが⻘⾊でクリックで
きる状態 になっていな
い場合は、写真の枚数が
⾜りない、写真の分類が
１種類しかない等が考え
られますので、確認して
みてください。
Slide 60
Slide 60 text
60
7.12. 次のステップに進みます
学習には時間がかかりますので(データ量によりますが約10分以上かかります)、しばらくこの
ままにしておきます。そのままにできない場合は、ブラウザーを閉じてしまっても問題はあり
ません。
そのままにしておいた場合は、学習が終了すると上部に「Training successful」とメッセージ
が表⽰されます。
Slide 61
Slide 61 text
開発⼿順
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でアプリケーション作成
Slide 62
Slide 62 text
8.1.最初に作成しそのままにておいた「Node-RED Starter」
のタブに戻ります。
62
画⾯が⾏⽅不明の場合はこちらを参照して表⽰させてください。
「このアプリは稼働中です」と表⽰されているのを確認します。
Slide 63
Slide 63 text
8.2 「アプリURLにアクセス」をクリック
63
Node-REDフローエディタが開きます。
Slide 64
Slide 64 text
8.3. ユーザー名/パスワードを設定します。
64
ユーザー名/パスワードは次に使うので忘れないようどこかにメモしてください。
Slide 65
Slide 65 text
8.4 Node RED flow editorを開く
65
1.「Go to your Node RED flow editor」をクリック
2.先ほど設定したユーザー名/パスワードを⼊⼒して「ログイン」をクリック
Slide 66
Slide 66 text
8.5. Node RED flow editorが開きます
66
パレット
ワークスペース 情報ウィンドウ
デバッグウィンドウ
エディターの各名称
Slide 67
Slide 67 text
8.5. Node RED flow editorが開きます
67
ノード
デプロイ
メニュー
エディターの各名称
ヒント
Slide 68
Slide 68 text
8.5. Node-RED アプリ全体フロー確認
68
ここを最初に作ります
Slide 69
Slide 69 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
69
このフローを実際に作成し、画⾯表⽰をみてみます。
Slide 70
Slide 70 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
70
パレットを下にスクロールして
ネットワークから
「http in」ノードをワークスペースに
ドラッグ&ドロップします。
Slide 71
Slide 71 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
71
1.ワークスペースに置いたhttpノードをダ
ブルクリックして編集画⾯を開きます。
2. URLと名前に
/watsonvr
と⼊⼒し、完了をクリックします。
Slide 72
Slide 72 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
72
1.パレットをスクロールして、「機能」か
らtemplateノードをワークスペースにド
ラッグ&ドロップします。
2. 先ほど作成した/watsonvr ノードと接
続します。/watsonvrノードの右の点をド
ラッグして、templateノードの左の点を
クリックしてください。
Slide 73
Slide 73 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
73
1.ワークスペースに置いたtemplateノー
ドをダブルクリックして編集画⾯を開き
ます。
2. 名前にトップページと⼊⼒します。
3. http://ibm.biz/DevRdWatson から
toppage.htmlを表⽰します。中⾝を全部
選択しクリップボードにコピーします(次
ページ参考)。
4. テンプレートの中⾝を削除し、3でコ
ピーした内容を貼り付け後、完了をク
リック
Slide 74
Slide 74 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
参考: http://ibm.biz/DevRdWatson GitHubからのコピペ⽅法
74
1. 指定のファイル名をク
リック
2. [Raw] ボタンをクリック
3.表⽰された⽂字列を
全選択(CTRL+A or ⌘+A)
→コピー(CTRL+C or ⌘+C)
Slide 75
Slide 75 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
75
1.パレットを上にスクロールして、「ネッ
トワーク」からhttp responseノードを
ワークスペースにドラッグ&ドロップしま
す。
2. 先ほど作成したトップページノードと
接続します。トップページノードの右の
点をドラッグして、 http responseノー
ドの左の点をクリックしてください。
Slide 76
Slide 76 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
76
1.ワークスペースに置いたhttp response
ノードをダブルクリックして編集画⾯を
開きます。
2. 名前に
http response
と⼊⼒し、完了をクリックします。
これで画⾯表⽰部分の完成です︕
Slide 77
Slide 77 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
77
1. 「デプロイ」をクリックして、フローの変更を反映させます。
Slide 78
Slide 78 text
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アプリ名]です。⾃分のものを⼊れてください。
Slide 79
Slide 79 text
8.6. Node-REDでアプリ作成: 画⾯表⽰の部分の作成
79
表⽰は右のようになります。
スマホでも表⽰して⾒ましょう。
PCのブラウザに表⽰されたQRコードを読
み取り、スマホのブラウザーでも表⽰させ
ましょう︕
画像認識⽤の写真はスマホのカメラを使⽤
します。
⻘いボタンはまだ動作しません。
次にボタンの中⾝であるWatsonの画像認
識部分のフローを作成します。
Slide 80
Slide 80 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
80
次はこちらを作ります
Slide 81
Slide 81 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
81
このフローは時間の関係で、あらかじめできたも
のをコピーでして作成します。
1. http://ibm.biz/DevRdWatsonから
watsonflow.jsonを表⽰します。中⾝を全部選択
しクリップボードにコピーします(コピー⽅法は
次⾴参照)。
2. Node-REDメニューから「読み込み」→「ク
リップボード」をクリック
3. 「JSON形式のデータを貼り付けてください」
とかいてある枠に、３でコピーした内容を貼り付
けし、「読み込み」をクリックする
Slide 82
Slide 82 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
参考: http://ibm.biz/DevRdWatson GitHubからのコピペ⽅法
82
1. 指定のファイル名をクリッ
ク
2. [Raw] ボタンをクリック
3.表⽰された⽂字列を
全選択(CTRL+A or ⌘+A)
→コピー(CTRL+C or ⌘+C)
Slide 83
Slide 83 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
83
以下が読み込まれたことを確認してください。
Slide 84
Slide 84 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
この前に撮影した写真ををWatsonに学習させました。
もう学習完了しているはずなので、その学習モデルのIDを取得し、フローにセットします。
ブラウザのNode-REDとは別のタブで、下記のようなカスタムモデル作成画⾯が残っています
ので、「 Associated Service : 」の右側のプロジェクト名をクリックします。
Slide 85
Slide 85 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
作成したModel名の「 Copy classifier ID」をクリックし、classifier IDをコピーします
Slide 86
Slide 86 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
Node-REDのタブに戻り、「カスタム認識のパラメータ設定」ノードをダブルクリックして編
集画⾯を開きます。
Slide 87
Slide 87 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
コード内
// XXにカスタムモデルのIDをセットします。
msg.params.classifier_ids = "food";
のfood部分を
コピーしたclassifier IDで置き換えます。
置き換え例︓
msg.params.classifier_ids = "
DefaultCustomModel_1812345678 ";
その後「完了」をクリックします。
Slide 88
Slide 88 text
8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作成
88
1. 「デプロイ」をクリックして、フローの変更を反映させます。
Slide 89
Slide 89 text
8.8. Node-REDでアプリ作成: 完成!!!
89
これで⻘いボタンも機能するようになりま
した。
早速動作の確認をしましょう。
1. スマホで表⽰させた画⾯をリロードしま
す(iphoneならURLの右のようなマーク
をクリック)。
2. ファイルを選択をクリックします。
3.「写真を撮る」などカメラを使うメ
ニューがでてきますので、それを選択し、
⾃分の写真を撮影します。
Slide 90
Slide 90 text
8.8. Node-REDでアプリ作成: 完成!!!
90
写真を表⽰できたら⻘いボタンを押してみてくだ
さい。
Watsonで認識（Watson学習済みモデルを利⽤):
Watsonが写真を認識した内容を表⽰します。
Watsonで認識（カスタム学習モデルを利⽤):
学習させた写真から、認識した内容を表⽰します。
似てると思われる学習させたZIPファイルの名前が
表⽰されます。
Slide 91
Slide 91 text
8.8. Node-REDでアプリ作成: 完成!!!
91
認識結果サンプル
Slide 92
Slide 92 text
6. Node-REDでアプリ作成: 応⽤編
時間が余った時、帰宅後にお試しください
92
Foodという⾷べ物の画像の事前学習済みモデルがありますので、
ぜひ試してみてください。
「8.7. Node-REDでアプリ作成: Watsonの画像認識部分の作
成」の⼿順で、foodから⾃分のclassifier IDに置き換えていま
す。
これをまたfoodに戻し、デプロイしてみます。
Slide 93
Slide 93 text
いろいろな写真を認識させて試してみましょう!
Thank You!
93
Slide 94
Slide 94 text
補⾜:
94
・ライトプランでアプリ作成された場合の注意点
以下の制限がありますので、ご注意ください。
- 10⽇間 開発なしでアプリを⾃動停⽌
- 30⽇間 活動なしでサービスの⾃動削除
• 本資料は2019年11⽉現在に作成された内容となります。
実際の画⾯が予告なく変更される場合がございますが、ご了承ください。
Slide 95
Slide 95 text
95
twitter.com/KyokoNishito
developer.ibm.com/jp/patterns/
IBM Watson
Thank you
使い⽅でご質問あればDMください