Watson Visual Recognition カスタムクラスを作ろう!

(2020/10/21追記: Visual Recognitionサービスは2020/10/16より使用料金のかからないLite Planでの新規利用ができなくなりました。新規は有料のStandard Planのみとなりました)

IBM CloudのVisual Recognitionは自分の写真を学習させてカスタムクラスを作成することができます。たとえば複数の猫を飼っていたら、それぞれの猫の写真を学習させて、写真による名前当てなんてこともできるのです。

ここでは、Visual RecognitionのWebからのカスタムクラスの作成方法を解説します。尚Web画面やその操作はコロコロ変わりますので、ある時点で操作方法が変わってしまっているかもしれないのでご了承くさい。
こちらは 以下の時点の情報です:

- 2020年5月13日 

コマンドの操作であれば、時間が経ってもほぼ変わっていませんので、コマンドがお得意な方は、公式の[こちら](https://cloud.ibm.com/docs/services/visual-recognition?topic=visual-recognition-tutorial-custom-classifier)を参照ください。

#0. 前提はIBM Cloudのアカウントがあること
前提は有効なIBM Cloudのアカウントがあることです。
お持ちでないかたは [こちら](https://cloud.ibm.com/registration?cm_mmc=Email_Events-_-Developer_Innovation-_-WW_WW-_-nishito\tokyo\japan&cm_mmca1=000019RS&cm_mmca2=10004805&cm_mmca3=M99938765&cvosrc=email.Events.M99938765&cvo_campaign=000019RS
) から取得お願いします。
取得方法の動画はこちらです: https://youtu.be/Krn1jQ4iy_s

#1. 学習用写真ファイルの準備
分類させたいもの２種類以上、それぞれ10枚以上のイメージファイルを準備してください。画像のフォーマットは`.gif, .jpg, .png, .tif`のどれかで準備お願いします。

このサンプルでは１０円硬貨と１００円硬貨の写真を使います。
１０円硬貨の写真１０枚以上、１００円硬貨の写真１０枚以上を準備することになります。


それぞれ種類ごとに、「半角英数字」のファイル名をつけて、ZIPファイルにしておきます。ファイル名はのちのち分類クラス名となりますので、「半角英数字」でわかりやすい名前をつけてください。
記号も一部使用できますが、``\ | * { } [ ] $ - / ' ` ". ``の文字は使用しないでください。

- 例: `100_YEN.ZIP`, `10_YEN.ZIP`など

尚、ZIPしなくともカスタムクラス作成はできますが、手順を簡単にするためZIPファイルが作成済みの手順としています。

写真を取るのは面倒だけどカスタムクラスは作ってみたい！　という方は[公式チュートリアル](https://cloud.ibm.com/docs/services/visual-recognition?topic=visual-recognition-tutorial-custom-classifier#create)のサンプルファイルを使ってみてください:

 -  ビーグル犬 [beagle.zip](https://watson-developer-cloud.github.io/doc-tutorial-downloads/visual-recognition/beagle.zip)
 - ハスキー犬 [husky.zip](https://watson-developer-cloud.github.io/doc-tutorial-downloads/visual-recognition/husky.zip)
 - ゴールデンレトリバー [golden-retriever.zip](https://watson-developer-cloud.github.io/doc-tutorial-downloads/visual-recognition/golden-retriever.zip)
 - テスト用の犬の画像 [dogs.jpg](https://github.com/watson-developer-cloud/doc-tutorial-downloads/raw/master/visual-recognition/dogs.jpg)
 


#2. Watson Visual Recognitionサービスの作成
(2020/10/21追記: Visual Recognitionサービスは2020/10/16より使用料金のかからないLite Planでの新規利用ができなくなりました。新規は有料のStandard Planのみとなりました。)


まずは使いたいWatson Visual RecognitionサービスをIBM Cloudから作成しましょう!
既に作成済みの方はここは飛ばしてください。
[Watson APIを使うための前準備: サービスの作成と資格情報の取得](https://qiita.com/nishikyon/items/9b8f697db7ad0a693839)を参照して、 Visual Recognitionサービスを作成してください。
#3. Watson StudioサービスとProjectの作成
カスタムモデルはWatson StudioというIBM Cloud上のツールで作成します。そのためWatson Studioのセットアップが必要です。
表示された「Watson Studio」の起動をクリックします。
既に作成済みの方はここは飛ばしてください。
[Watson Studio サービスとProjectの作成](https://qiita.com/nishikyon/items/ba698b638300848b746e)を参照して、  Watson StudioサービスとProjectを作成してください。「Watson Studio サービス」作成の際はロケーションは`ダラス`を選択し作成お願いします。


#4. Watson StudioのProjectとVisual Recognitionサービスの関連付け
3で作成したProjectと2で作成したVisual Recognitionサービスを関連付けます。
3が終わった状態の場合は、Watson Studioの画面で作成したProjectのOverviewが表示された状態だと思います。
もしWatson Studioの画面で作成したProjectが表示されてない場合は、[ログイン後、作成済Projectの表示方法](https://qiita.com/nishikyon/items/ba698b638300848b746e#4-%E3%81%8A%E3%81%BE%E3%81%91%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E5%BE%8C%E4%BD%9C%E6%88%90%E6%B8%88project%E3%81%AE%E8%A1%A8%E7%A4%BA%E6%96%B9%E6%B3%95)を参照の上、Projectを表示させてください。



4-1: 上部メニューから「Settings」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/38459850-e398-f26c-20ba-a54fe54dabab.png)

4-2: 下にスクロールして、「Associated services」の右上の「Add service」をクリックし、表示されたリストから「Watson」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c062e670-1a4a-8245-886d-e44e130c0a66.png)

4-3: 下にスクロールして、「Visual Recognition」の「Add」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/1bb63063-aef9-feec-0338-589fd0ad0959.png)

4-4: 「Existing Service Instance」の「Select seevice from the list」をクリックすると、２で作成したVisual Recognitionのサービス名が表示されるので、クリックします。
２で作成したVisual Recognitionのサービス名がセットされたら、「Select」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3d71a2aa-8e8a-d200-2817-3590a6a56006.png)

4-5: Settingsの画面に戻るので、下にスクロールして、、「Associated services」にセットしたVisual Recognitionのサービス名が表示されていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/ab015d07-2d19-dbc4-34ad-ae54ab18ca7b.png)

これでWatson　Studio関連のセットアップは完了しました！

#5. Visual Recognitionサービスの管理画面の表示
カスタムモデルはWatson Studioで作成します。カスタムモデル作成画面の表示方法は3通り[^1]ありますが、ここではIBM CloudのVisual Recognitionサービスから開く方法を紹介します。

[^1]: ちなみにあと2つは以下です。1. Watson Studioのログイン時に表示されるダッシュボードのWatson Serviceから「Launch Tool」をクリック。　2. Watson StudioのProjectに入って、「Add to project」から「Image Classification　Model」をクリック

https://cloud.ibm.com よりIBM Cloudにログイン後、
[こちら]
(https://qiita.com/nishikyon/items/9b8f697db7ad0a693839#2-%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E8%B3%87%E6%A0%BC%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97)を参考に、作成した Visual Recognitionサービスの管理画面の表示をしてください。

#6. Watson Studioの起動
Visual Recognitionサービスの管理画面に表示された「Watson Studio」の起動をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/bb67c7ef-c260-6a99-43c3-5fe99626ecfb.png)



最終的に以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/6afc5052-f01d-10bb-3fbc-a8aa793f0568.png)


#7. モデル作成画面の表示
Classify Imagesの中にある「Create Model +」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/a3ee5b0a-8ee4-ae0f-3a59-c65d8323efd6.png)




#8. カスタムモデル作成画面 & モデル名変更（変更はオプション）
カスタムモデル作成画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/399e740e-de0b-9d67-bd1c-48b9f0291735.png)


尚、モデルの名前は`Default Custom Model`となるので、変更したい場合は、名前をクリックして変更します。学習後は変更できません。モデルを表すわかりやすい名前に変更するとよいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/e272df68-1a24-8822-50a3-b2de2e6943b9.png)
変更後:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/72412241-ad36-99ca-f03e-a55cffcf1ac8.png)





#9. 学習する写真のZIPファイルを、Cloud上にアップロード
[「1. 学習用写真ファイルの準備」](#1-学習用写真ファイルの準備)で作成したファイルCloud上にアップロードします。
右側のUpload to projectの点線の四角内に、作成したZIPファイルをドラッグ＆ドロップしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/13d4664e-bb34-c498-ced4-5f2468bffc4f.png)



尚、ドラッグ後、Pendingの状態が長く続く場合は、「Dismiss」をクリックして一旦アップロードを中止し、再度ドラッグしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/29fe3d37-b4d3-ea2a-154a-d054a04c0ef5.png)


#10. 学習用写真をモデルに追加
アップロードが完了すると自動で左側のエリアにZIPファイル名をクラス名としてイメージが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/57c77d7f-55f8-4a7e-d771-77dd66ae08e2.png)




もし自動で追加されなかった場合は、チェックボックスをクリックしてチェックしてください。
その後「Add to model」クリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/653610ad-0daf-15a0-d4c8-82b7268cc156.png)

#11. トレーニング開始
以下のイメージのように
- アップロードしたファイルの名前になっている
- 「Train Model」ボタンが青色でクリックできる状態になっている
の２点を確認したら、「Train Model」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/93db3b0c-f820-ddfb-e3bf-f4d9d0d9a349.png)


尚、`「Train Model」ボタンが青色でクリックできる状態`　になっていない場合は、写真の枚数が足りない、写真の分類が１種類しかない等が考えられますので、確認してみてください。

学習には時間がかかりますので(データ量によりますが約10分以上かかります)、しばらくこのままにしておきます。そのままにできない場合は、ブラウザーを閉じてしまっても問題はありません。

そのままにしておいた場合は、学習が終了すると上部に「Training successful」とメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/24d52db7-8d35-b0fc-99e9-5d3500427b7b.png)


これで学習が完了してカスタムモデルが使える状態になりました。
画面を閉じてしまった場合は、次のステップでStatusが確認できます。

#12. モデルの表示
[「5. Visual Recognitionサービスの管理画面の表示」](#5-visual-recognitionサービスの管理画面の表示)と[「6. Watson Studioの起動」](#6-watson-studioの起動)の手順でモデルを表示します。

あるいは　画面を閉じてなかった場合は、「Training successful」とメッセージを「X」をクリックして閉じ、`Associated Service`の横のVisual Recognitionのサービス名のリンクをクリックしてもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/9fcf9b00-b959-a7b8-d59f-51b3f70fee47.png)


`Custom Models`の下に先ほど学習させたモデルが表示されています。
Statusが`Ready`の場合は学習が完了しています。　`Training`の場合はまだ学習中ですので、`Ready`になるまで待つようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/16fde2f6-13dd-9fb0-6041-17af4d3237b0.png)



#13. Classifier IDの取得
既にAPIを使用したモデルがテストできるアプリケーション等がある場合は、「Copy classifier ID」をクリックしてClassifier IDを取得し、アプリケーションにセットして使用してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/6e323fea-8c4e-211e-73f9-2cbe7cb213f1.png)



またアプリケーションがなくとも、Watson Studio上でモデルのテストができます。次のステップに進んでください。

#14. 作成したカスタムモデルのテスト

14-1: 「Test」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d8412201-b2d6-d9ae-6198-462b9a47f2f2.png)

14−2: ModelのOverviewが表示されるので。「Test」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/15b91c3b-f73a-c1af-ae4e-13878d399b8b.png)


14−3:　「Drop image files here to let the classifier analyze them or browse to select files.」　と書いてあるエリアに認識させたい写真ファイルをドラッグ&ドロップします。または「browse」をクリックしてファイルダイアログから選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/4b15de4a-56be-7f89-7fa1-539bac8e3b7b.png)


14-4: 認識結果を確認します。認識されたクラスが、確信度と共に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/6fe72211-fee5-dd1d-8c0b-b57e7cd869ad.png)


再度ドラッグ&ドロップすれば何枚でも認識テストが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/4c6c370f-4385-ae6d-1b89-c7e840f76107.png)


#15. （オプション）作成したカスタムモデルを使ったアプリケーションの作成
「Implementation」をクリックすると、代表的な言語でのCode snipetが表示されますので、アプリケーションの作成の参考にしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/7b85493e-cbec-1a05-2cbf-c7d8b62c8d00.png)

またAPIリファレンスは以下にあるので参考にしてください：
https://cloud.ibm.com/apidocs/visual-recognition

以上です。

#16. おまけ
以下にカスタムクラスが使えるサンプルコードがありますので、お試しください。

- nodejsのサンプルアプリ： https://github.com/kyokonishito/watson-vr-node
- pythonのnotebookサンプルコード： https://github.com/kyokonishito/python_watson のLab3
- python flaskのサンプルコード: https://github.com/kyokonishito/watson-vr-flask のserverフォルダ
  -  `/server/app.py`の`def classifyCustomImages():`内の`classifier_ids=["food"]`の`food`をClassifier IDに変更してください。

- Node-REDのサンプルアプリ： https://github.com/kyokonishito/watson-vr-nodered