【JavaScript】Node.js で画像中に含まれる要素を検出する Google の API を色々を試す

　Google が提供するサービスに Cloud Vision API というものがあります。これは画像中に含まれる様々な要素を検出する API です。Google が持つ機械学習の結果を利用していろいろできるわけです。

Cloud Vision を使用すると、開発するアプリケーションの中で簡単に画像検出機能を統合できます。この機能の例としては、画像ラベリング、顔やランドマークの検出、光学式文字認識（OCR）、不適切なコンテンツへのタグ付けがあります。

Cloud Vision のドキュメント ｜ Cloud Vision API ｜ Google Cloud
　料金は一月あたり1000回までなら無料です。それ以降は有料です。無料範囲は商用には心もとない量ですが個人でちょこちょこ使う分には十分です。
料金 ｜ Cloud Vision API ｜ Google Cloud

　Vision API を使う準備までは Google のチュートリアルが優秀です。
クイックスタート： Vision API を設定する ｜ Google Cloud
　↑の Vision API の設定の手順がある程度進むとサービスアカウントキーの発行までたどり着きます。サービスアカウントキーは次の様な json ファイルです。

{
  "type": "service_account",
  "project_id": "xxxx-xxxx-000000",
  "private_key_id": "0000000000000000000000000000000000000000",
  "private_key": "-----BEGIN PRIVATE KEY-----\nxx長い文字列xx==\n-----END PRIVATE KEY-----\n",
  "client_email": "image-detect@xxxxxx-xxxxxx-000000.iam.gserviceaccount.com",
  "client_id": "000000000000000000000",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/image-detect%40xxxx.iam.gserviceaccount.com"
}

　Node.js で Vision API を試すにはここまであれば十分で、環境変数への設定等は実はなくても使用できます（後述しますがサービスアカウントキーを環境変数以外から参照させる方法を取ります）。

　ついで Vision API を使う予定のディレクトリで npm install を実行して Vision API のクライアントを準備します。実行コマンドは次です。

npm install --save @google-cloud/vision

　ここまで来たら各入門ガイドから API を叩けます。
入門ガイド ｜ Cloud Vision API ｜ Google Cloud
　例えば、よく知られている自然のランドマークや人工建造物を画像から検出できるランドマーク検出では次の様にできます。
ランドマークを検出する ｜ Cloud Vision API ｜ Google Cloud

/** detect.js */
/* 先ほど用意したサービスアカウントファイルをこのファイルと同ディレクトリに置き、読み込みます。*/

// JSON は JavaScript Object Notation の略であり、JavaScript のオブジェクトとしてそのまま読み込めます
const credentials = require('./credentials.json');
// npm install した Google Vision API を JavaScript 様にラッピングしたライブラリ
const vision = require('@google-cloud/vision');

/**
 * Google Vision API のランドマーク検出を実行
 * @param {String} filePath 検出対象のローカルファイルのフルパス
 * @returns {Promise<google.cloud.vision.v1.IEntityAnnotation[]>}
 */
async function quickstartLandmark(filePath) {
  // Google Client API のクライアントを生成
  // ↑で読み込んだサービスアカウントキーをオプションとして引数にします。
  // これで環境変数経由でデフォルト読み込みせずともサービスアカウントキーを使えます
  const client = new vision.ImageAnnotatorClient({
    credentials,
  });

  // landmarkDetection でランドマーク検出を実行
  // 他にも顔検出の faceDetection, 色々検出する labelDetection 等ここから呼び出せます
  const [result] = await client.landmarkDetection(filePath);

  // 検出結果のランドマークについての部分だけを返します
  return result.landmarkAnnotations;
}

// 画像ファイルを渡して結果をコンソールに表示
quickstartLandmark('./mt-fuji-423908_960_720.jpg')
  .then(landmarkAnnotations => console.log(landmarkAnnotations));

　使用した画像は次の富士山の画像です。
富士山 航空写真 雲 – Pixabayの無料写真
　これをnode detect.jsと実行すると、

[
  {
    locations: [ [Object] ],
    properties: [],
    mid: '/m/05pp84',
    locale: '',
    description: 'Fuji River',
    score: 0.7883589267730713,
    confidence: 0,
    topicality: 0,
    boundingPoly: { vertices: [Array], normalizedVertices: [] }
  },
  {
    locations: [ [Object] ],
    properties: [],
    mid: '/m/0cks0',
    locale: '',
    description: 'Mount Fuji',
    score: 0.6932380199432373,
    confidence: 0,
    topicality: 0,
    boundingPoly: { vertices: [Array], normalizedVertices: [] }
  },
  {
    locations: [ [Object] ],
    properties: [],
    mid: '/m/05pp84',
    locale: '',
    description: 'Fuji River',
    score: 0.6602094173431396,
    confidence: 0,
    topicality: 0,
    boundingPoly: { vertices: [Array], normalizedVertices: [] }
  }
]

　の様に富士山であると認識され、 Mount Fuji を含む結果が返ってきます。ちなみに検出能力は悪くないのですが、赤富士を富士山として認識できない、富士山ではなく富士山を見ている場所の地名（写真を取った場所）をピンポイントで返してくるなど、まあまあ思い通りに行きませんでした。きっちりあるものとそれ以外を検出する、の様なピンポイントな目的があるならば Google の提供する既製品そのものよりも自分で定義を作れる AutoML Vision の方が良さそうです。
AutoML Vision のドキュメント ｜ Google Cloud

　こんな感じで Node.js と Google のチュートリアルを使うと簡易に画像検出を試せます。