[Amazon Rekognition] Custom Labelsのデータセットを高速に作成するアプリを作ってみました

2020.03.13

1 はじめに

CX事業本部の平内(SIN)です。

Amazon Rekognition の Custom Labelsでは、少数の画像セットで、ビジネスシーンに合せた独自のオブジェクトの検出が可能です。

そして、データセットの作成(ラベルの付加)には、独自に準備されたエディタや、SageMaker Ground Truth が利用可能です。どちらも、非常に優れたUIで、簡単にアノテーション作業が可能です。

しかし、大量のデータセットを生成するとなると、やはり手間がかかることは否定できません。

今回は、このデータセットの作成(写真撮影とアノテーション付与)が少しでも楽にならないかと言う事で、アプリを作成して見ました。

2 動作の様子

最初に、作成したアプリを使用している様子です。

Chromeでindex.htmlを開くと、下記のような画面になります。カメラは、USB接続されたWebカメラ(Logitech C920)を使用しています。

カメラで撮影した画像は、OpenCVで処理して リアルタイムで矩形を検出します。表示された矩形がいい感じとなった時、「SAVE」ボタンを押すだけで、撮影とアノテーションの終わったManifestが生成されS3に送信されます。

S3に保存された画像と、マニフェストを指定して、Create Datasetすると、データセットの作成は完了です。

3 構成

構成は、以下のとおりです。

  • ① 撮影したデータから、画像(jpeg)とManifestを生成します。
  • ② SAVEボタンで、上記のデータが、S3に送信されます。
  • ③ 上記S3バケットを指定してデータセットが作成できます。
  • ④ S3バケットへのパーミッションは、Cognitoで付与されています。

4 環境構築

アプリの環境構築要領は、以下のとおりです。

(1) Github

コードは、Githubに置かれていますので、cloneして下さい。以降の作業が完了した時点で、index.htmlをchromeで開くことで利用可能です。

$ git clone https://github.com/furuya02/DataSetCreater.git
$ cd DataSetCreater

(2) S3

送信先として、バージニアのバケットが必要です。準備したバケット名をindex.htmlに設定して下さい。

index.html

const bucketName = "my-bucket-name";
const s3 = new S3(bucketName);

バケットには、CORSの設定が必要です。

CORSの例

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

また、バケットに、Rakognitionからアクセスできるようにパーミッションの設定が必要です。以下は、一例ですが、バケット名を編集する必要があります。

Permitionの一例

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AWSRekognitionS3AclBucketRead20191011",
            "Effect": "Allow",
            "Principal": {
                "Service": "rekognition.amazonaws.com"
            },
            "Action": [
                "s3:GetBucketAcl",
                "s3:GetBucketLocation"
            ],
            "Resource": "arn:aws:s3:::my-bucket-name"
        },
        {
            "Sid": "AWSRekognitionS3GetBucket20191011",
            "Effect": "Allow",
            "Principal": {
                "Service": "rekognition.amazonaws.com"
            },
            "Action": [
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:GetObjectVersion",
                "s3:GetObjectTagging"
            ],
            "Resource": "arn:aws:s3:::my-bucket-name/*"
        },
        {
            "Sid": "AWSRekognitionS3ACLBucketWrite20191011",
            "Effect": "Allow",
            "Principal": {
                "Service": "rekognition.amazonaws.com"
            },
            "Action": "s3:GetBucketAcl",
            "Resource": "arn:aws:s3:::my-bucket-name"
        },
        {
            "Sid": "AWSRekognitionS3PutObject20191011",
            "Effect": "Allow",
            "Principal": {
                "Service": "rekognition.amazonaws.com"
            },
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::my-bucket-name/*",
            "Condition": {
                "StringEquals": {
                    "s3:x-amz-acl": "bucket-owner-full-control"
                }
            }
        }
    ]
}

なお、データセットを作成する際に、パーミッションの例が、コンソールに表示されますので、それをコピーして設定することも出来ます。

(3) Cognito

Cognitoで未認証でも利用可能なIdentityPoolIdを作成します。

作成したIdentityPoolIds3.jsに設定して下さい。

s3.js

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
});

Roleには、S3バケットへのアクセス権を付与します。

※リソース名を作成したバケットに合わせてください。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "mobileanalytics:PutEvents",
                "cognito-sync:*"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::my-bucket-name",
                "arn:aws:s3:::my-bucket-name/*"
            ]
        }
    ]
}

5 利用方法

(1) カメラの利用許可

index.htmlを開くと、最初にカメラ使用の許可を求めるポップアップが表示されますでの、「許可」して下さい。

(2) 敷居値の設定

矩形検出のため、内部で、グレースケール -> 2値化 -> 白黒反転 の処理が行われています。

背景や、光の当たり具合等によって、矩形検出に差が生じますので、思い通りの矩形が取れるように、環境に合せて設定を変更して見て下さい。

(3) ラベル名

アノテーションするラベル名を設定して下さい。1枚の画像に対して1つのラベルのみが設定可能です。

(4) 保存

思い通りの矩形が検出されたタイミングで「SAVE」ボタンを押して下さい。 画像及び、矩形から作成したマニュフェストがS3に送信され、サムネイルが追加されます。

(5) 削除

必要ないデータは、サムネイルをクリックして、削除することが可能です。

(6) マニュフェストのパス

生成されたマニューフェストのパスをこコピーして下さい。

(7) データセット作成

Rekognition Custom Labelsのコンソールで、CreateDatasetをクリックして下さい。

以下を設定して、Submitを押して下さい。

  • Dataser name:適当な名前を指定
  • image location : import images labeled by SageMaker Ground Rruth
  • .manifest file localtion : 上記でブラウザからコピーしたマニュフェストのパスを設定

(7) 作業完了

問題なければ、データセットが生成されます。

6 その他

(1) フォルダ設定

index.html?folder=folderNameのようにパラメータを指定して利用する事でバケット内の特定のフォルダを作業領域にすることが可能です。 ※フォルダは、予め作成しておく必要があります。

上記のように利用する場合、 下記のようにフォルダ内で作業されます。

(2) 再起動

データは、全てS3に保存されています。いつでも、作業を中断したり、ブラウザを再起動することが可能です。

(3) メモリエラー

すいません、現在、バグにより長時間使用しているとメモリエラーが発生してしまいます。この場合は、ブラウザをリロードすることで回避して下さい。 なお、リロードすると、S3に保存されているデータを読み込んで立ち上がるので、データが失われる事はありませんが、ラベル名の設定だけは、改めて指定が必要になります。

7 最後に

今回は、Amazon Rekognition Custom Labels用のデータセットを、できるだけ簡単に作成できるようにとアプリ作成に挑戦してみました。 まだまだ、機能不十分で安定しないところも有るかと思いますが、使い込んでいくことで安定できればと考えております。

試しに、画像20枚、ラベル20枚のデータセットの作成に要した時間は、約10分でした。なれれば、もっと早く作業できそうな気もします。トレーニングには、それなりの時間がかかりますが、下記が、作成完了したモデルです。それなりのスコアになっているのが凄いと思いました。

頑張って、データセットを作成して、色々試してみたいと思います。