Cloud Annotationsを使って簡単にカスタム物体検出モデルを作成する


# はじめに
この記事では、Cloud Annotationsを使って画像のアノテーション、物体検出モデルを作成する手順を紹介します。コーディングすることなく、簡単に物体検出モデルの作成が出来ます。
また、ダウンロードしたモデルを動かすサンプルアプリも提供されており、そのモデルをアプリケーションのディレクトリに配置するだけで試すことができます。
以下はサンプルアプリを動かした時のイメージです。
![temp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/66d5e2c7-895e-0ac2-f2a4-e123c6d55ce1.gif)


# Cloud Annotationsとは？
Cloud Annotationsはオンラインで利用できるアノテーションツールです。
画像の物体検出と分類のアノテーションが可能です。
バックエンドにIBM CloudのObject StorageとMachine Learningのサービスを利用します。
以下のような構成になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/966267ce-6234-6884-8738-ba0db4e59a5f.png)
画像：https://github.com/cloud-annotations/training

動画をアップロードすることも可能です。この場合には動画は自動的に画像にスライスされ、この画像にアノテーションを行います。
作成したモデルは、CoreML、TensorflowLite、Tensorflow.jsのモデルとしてダウンロード出来ます。



# 手順概要

1. データ作成
2. モデル作成
3. サンプルアプリケーション実行

# 1. データ作成
今回は動画を学習データとして使います。
任意の方法で検出対象物が写った動画を作成します。
ここではQuickTime Playerを使って動画を作成します。
QuickTime Playerを起動して、「ファイル」→「新規ムービー収録」で撮影を開始します。
20-30秒程度撮影を行います。
「ファイル」→「書き出す」→「480p」で書き出します。

# 2. 物体検出モデル作成

## 2-1. Object StorageとMachine Learningのインスタンスを作成

https://www.ibm.com/cloud にログインして、Object StorageとMachine Learningのインスタンスを作成します。
Lite（無料）プランのインスタンスで大丈夫です。

## 2-2. Cloud Annotationsにログイン

ブラウザーで https://cloud.annotations.ai/ を開いて、右上の「Log in」ボタンからCloud Annotationsにログインします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/2444de62-d196-1d42-2114-776ec80d9b59.png)


ログイン後、以下の画面の右上のリストでデータを格納するObject Storageのインスタンスを選択します。
「Start a new project」ボタンを押してデータを格納するBucketを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/9bda9ba4-a021-062b-7568-49e5b0889de7.png)

任意のバケット名をつけて「Confirm」ボタンを押します。ここでは「tsota-megane」としています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/fcf90749-d2d9-b6b5-a527-70c49aa6123b.png)

Annotation typeの選択では、「Localization」（ペンギンが3匹いる方）を選択して、「Confirm」ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/01d29c8c-52a5-764f-f7a8-5ecdda2f6303.png)

## 2-3. 動画のアップロード

次のような画面が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/45e53c23-1dec-e457-2760-5272c599b51f.png)

「File」→「Upload media」から準備した動画をアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/3d66eb77-9853-2383-3e91-08b01bc0e9ae.png)

動画のアップロードが終わると動画がスライスされ以下のような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/f13594af-20ff-f048-365e-3ee4a2768b03.png)

## 2-4. アノテーション

左上の「Untitled Label」となっている部分をクリックして、任意のラベル名に変更します。ここでは「megane」としています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/4bcb57b6-2d9e-3440-55a8-f2fdafd70084.png)

アノテーションをしていきます。アノテーションが完了したら「Train model」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/82756ff1-b78d-25fe-353e-947c51521b74.png)

## 2-5. モデル作成

IBM CloudのMachine Learningのインスタンスが選択されていることを確認し、「Train」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/a7bb118c-d901-ab59-947d-2698feb6814b.png)

学習の様子が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/8437ddd0-557a-dd56-5311-47bfe61c6b82.png)

ステータスが「Complete」になると完了です。今回は15分ぐらいで完了しました。
「Download model」ボタンを押すとModelをダウンロードできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/d4c200b1-9365-b5eb-0a49-8feae97a0352.png)

ダウンロードしたファイルには、TensorFlow Lite、CoreML、TensorFlow.jsのモデルが含まれています。このあとのステップでTensorFlow.jsのモデルを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/8ee20260-99be-fd30-96c9-78b99b787409.png)


# 3.サンプルアプリケーション実行

# 3-1. サンプルアプリケーションをダウンロード
以下のリポジトリのコードをダウンロードします。
https://github.com/cloud-annotations/object-detection-react

以下のコマンドを実行します。

```bash
$ git clone https://github.com/cloud-annotations/object-detection-react.git
```

# 3-2. モデルのコピー
先程ダウンロードしたモデルの中のmodel_webディレクトリを、publicディレクトリの下に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/635fc6d1-39b3-97cf-e021-4ed9bbd30a12.png)

# 3-3. アプリケーション起動
以下のコマンドを実行してアプリケーションを起動します。
v8.10.0以上のNode.jsが必要になります。

```bash
$ cd object-detection-react
$ npm install
$ npm start
```

ブラウザーでlocalhost:3000にアクセスして、カメラにアノテーションした物体を写すと検出が行われます。
![temp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103795/66d5e2c7-895e-0ac2-f2a4-e123c6d55ce1.gif)


# まとめ

Cloud Annotationsで簡単に画像をアノテーションして物体検出のモデルを作成することが出来ました。また、サンプルアプリケーションを使ってモデルを試すことも出来ました。

# 参考

URL
https://cloud.annotations.ai/

github
https://github.com/cloud-annotations/training

Document
https://cloud.annotations.ai/docs