/watson-vr-node

node.js sample code for IBM Watson Visual Recognition

Primary LanguageHTMLApache License 2.0Apache-2.0

watson-vr-node

IBM Watson Visual Recognitionを使ったnode.jsの画像認識Webアプリです。

2019/09/13: Detect Faces のメソッドが削除されたため、取り急ぎ顔認証部分のUIはコメントアウトして表示しないように変更しました。

1. 事前準備

1. IBM Cloudのアカウントを取得

お持ちでないかたは こちらから取得お願いします。

取得方法の動画はこちらです: https://youtu.be/Krn1jQ4iy_s

2. IBM CloudのCLIをインストール

2-1) 

https://cloud.ibm.com/docs/cli/reference/ibmcloud?topic=cloud-cli-install-ibmcloud-cli にアクセスし、"インストーラーを使用したインストール" または"シェルからのインストール" をご利用されているOSに合わせて実行してください。

2-2)  以下のコマンドを実行し、必要なツールのインストールが完了しているか検証を行ってください。

出力例のようにバージョン情報が出力されればOKです

ibmcloud --version

出力例：

ibmcloud version 0.7.1+8a6d40e-2018-06-07T07:13:39+00:00

2-3) CLIでIBM Cloudにログインできるか確認

ターミナルやコマンドプロンプトを利用し以下のコマンドを実行しログインできることを確認します。

ibmcloud login -r us-south

作成したアカウントのメールアドレスやパスワードを入力しログインしてください ログインが正常に行えればOkです。

出力例：

API endpoint:       https://api.ng.bluemix.net
Region:                  us-south
User:                      XXXXXX@hoge.com
Account:                XXXXX's Account (xxxxxxxxxxxxxxxxxxxxx)
Resource group:    default
CF API endpoint:   https://api.ng.bluemix.net (API version: 2.92.0)
Org:                        XXXXXX@hoge.com
Space:                    dev
OK

2. Visual Recognition サービスの作成

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

Visual Recognition サービスを作成していない場合は、作成します。既に作成済みであれば、作成済みのものを使用できます。

画面イメージのある手順を参照したい場合はWatson APIを使うための前準備: サービスの作成と資格情報の取得の1. Watson サービスの作成を参照して下さい (2. サービスの資格情報取得は実施不要です)。以下の6. (オプション) カスタム分類クラスの作成 はその後に実施ください。

  1. https://cloud.ibm.com/login よりIBM Cloudにログイン

  2. 表示された「ダッシュボード」の上部のメニュー「カタログ」をクリック

  3. 表示された「カタログ」の上部の検索フィールドにVisual Recognitionと入力し、「Enter」キーをクリック。

  4. 表示された サービス・AIカテゴリのVisual Recognitionをクリック。

  5. Visual Recognitionサービス作成の画面が表示されるので、有料でもOKであれば、右側のの'作成'をクリックして、サービスを作成する。

2020/10/21追記: Visual Recognitionサービスは2020/10/16より使用料金のかからないLite Planでの新規利用ができなくなりました。新規は有料のStandard Planのみとなりました。そのまま作成すると有料プランの利用となりますのでご注意ください。 Lite Planが選択可能なサービスのみ無料で使用可能ですので、作成をクリックする前に利用プランを確認するようにしてください。

  1. (オプション) カスタム分類クラスの作成

自分の写真で分類クラスを作成したい場合は実施してください。

こちらは省略可能です。省略した場合はIBMが提供する食品に特化した分類クラスfoodを使用します。

Watson Visual Recognition カスタムクラスを作ろう!を参照してカスタム分類クラスの作成を行ってください。 10. トレーニング開始まで実施お願いします。

3. アプリケーションのClone

下記のコマンドを実行しアプリケーションのコードをGitHubのリポジトリからクローンします。

git clone https://github.com/kyokonishito/watson-vr-node.git

クローンが完了したら以下のコマンドを入力してください。

cd watson-vr-node

4. アプリケーションのIBM Cloudへのデプロイ

Local PCで動作させる方法は後日記載予定です。

1. manifest.ymlの編集

watson-vr-nodeフォルダにあるmanifest.ymlを2箇所変更して保存します。

1-1) 3行目

ご自分のアプリケーション名に変更します。アプリケーション名はURLの先頭部分となるため、bluemix.net内でユニークな値である必要があります。 自分のIBM CloudのID等と組みわせて、ユニークになるような名前にしてください。前後の<>は不要です。
例:

- name: myid-watson-vr

1-2) 8行目

Visual RecognitionのカスタムクラスのIDを記入します。

2でWatson Visual Recognition カスタムクラスを作ろう!を参照してカスタムクラスを作成した場合は、 11. モデルの表示 と12. Classifier IDの取得の手順に従い、Classifier IDをコピーしペーストします。

カスタムクラスを作成していない場合は、IBMが提供している食物に特化したカスタムクラスのid,foodを記入します。前後の<>は不要です。
例 カスタムクラスを作成した場合:

env:
    CLASSIFIER_ID: DefaultCustomModel_1941703287

例 カスタムクラスを作成していない場合:

env:
    CLASSIFIER_ID: food

全体例:

---
applications:
- name: myid-watson-vr
  buildpacks:
    - nodejs_buildpack
  command: node -max_old_space_size=2048 app.js
  env:
    CLASSIFIER_ID: food
  memory: 256M

2. IBM Cloudへの ログイン

以下のコマンドを入力してください。

ibmcloud login -r us-south

作成したアカウントのメールアドレスやパスワードを入力しログインしてください。

次に以下のコマンドを入力してください。

ibmcloud target --cf

3. IBM Cloudへの アプリケーションのアップロード

アプリケーションをIBM Cloudへアップロードします。以下のコマンドを入力してください。

ibmcloud cf push

Visual Recognitionとのバインドが済んでいないため、開始は失敗となりますが、ここでは問題ありません。

５のバインド実施後に再プッシュする場合(CLASSIFIER_IDを変更する場合など）は正常に開始されます。

5. Visual Recognition サービスのバインドとアプリケーションの開始

IBM CloudのCloud Foundry アプリケーションと IBM Cloud上のサービスを接続(bind)すると、資格情報や接続情報が連携され、個別に設定する必要がなくなります。

画面イメージのある手順を参照したい場合はIBM Cloud: Cloud Foundry アプリケーションとサービスの接続を参照して下さい

  1. https://cloud.ibm.com/login よりIBM Cloudにログイン

  2. 表示されたダッシュボードの[リソースの要約]から全て表示をクリックする。

  3. Cloud Foundry アプリの先頭のvをクリックする。

  4. 4. アプリケーションのIBM Cloudへのデプロイの 1. manifest.ymlの編集で設定したアプリケーション名が表示されているので、そのアプリケーション名をクリックする。

  5. 左のメニューから接続をクリックする。

  6. 「接続の作成」ボタンをクリックする。

  7. 表示された Visual Recognitionのサービスの行にマウスポインターを乗せると、右側に「接続」ボタンが表示される。表示された「接続」をクリックする。

  8. IAM対応サービスのの接続というウィンドウが表示されるので、デフォルト値ののまま、「接続」ボタンをクリックする。

  9. アプリの再ステージというウィンドウが表示されるので、「再ステージ」ボタンをクリックする。

IAM対応サービスの接続というウィンドウが表示されたままの場合は、「キャンセル」ボタンをクリックし閉じでください。

6. アプリケーションの動作確認

  1. アプリケーションが稼働中(実行中)になったら、アプリ URL にアクセスをクリックする。 アプリケーションの画面が表示されます。 「ファイルの選択」から写真を選んだ後、各青ボタンをクリックして、Visual Recognitionの結果を確認します。

  • Watsonで認識（Watson学習済みモデルを利用): -Watsonが写真を認識した内容を表示します。

  • Watsonで認識（カスタムモデルを利用):

    • カスタムモデル認識したクラスを表示します。

2. スマートフォンでの確認 一番下にQRコードが表示されているので、それをスマートフォンのカメラで読んでUアプリケーションのRLにアクセすると、スマートフォンでも結果を確認できます。スマートフォンでは「ファイルの選択」ボタンでその場で撮った写真も認識可能です。

URLは ＜アプリケーション名＞.mybluemix.net となります。

もし後からカスタムクラスのidを変更したい場合は、「4. アプリケーションのIBM Cloudへのデプロイ」を再度実施してください。