読者です 読者をやめる 読者になる 読者になる

順次、選択、そして繰り返し

プログラミングのことやITのこと、たまに演劇のことも書きます。

AWS Amazon Rekognitionを使ってみた

Amazon RekognitionはAWSが提供しているサービスの1つで
深層学習に基づく画像分析を行ってくれるサービス。

このサービスを用いることで元の画像と比較対象の画像を
照らし合わせて同一人物がいるか探すことも可能である。

今回は複数の画像を用いた顔比較(同一人物かどうかを判定)を
試してみた。

大まかな流れは以下の感じ

①S3のバケットに事前に画像を格納する
②S3のバケットから画像を取得し、Collectionに格納する
③S3のバケットから1枚、比較対象の画像を取得して比較する
④顔比較の結果と画像を表示する

まず①の準備。
S3のバケットに適当な画像を格納しておく。
f:id:sndstudy:20170226224823p:plain

次は②
「rekognition.createCollection」でCollectionを作成する。
パラメータとして、「CollectionId(コレクションを識別するID)」が必要
Class: AWS.Rekognition — AWS SDK for JavaScript

「rekognition.indexFaces」でCollectionに画像を追加する。
Class: AWS.Rekognition — AWS SDK for JavaScript

普通に「rekognition.indexFaces」をループさせて画像を追加しようとしたが、非同期処理のため
Collectionに全ての画像が追加される前に次の処理に行ってしまう問題があったため
JavaScriptの「yield」を用いて処理を制御した。(コールバック地獄回避のため)
yield - JavaScript リダイレクト 1 | MDN

/********************************************/
//Rekognitionテスト処理
/********************************************/
var addFunction;

function rekognitionTest() {

    //Collection作成
    var paramsCreate = {
        CollectionId: "photos"
    };

    rekognition.createCollection(paramsCreate, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            addFunction = addImage();
            addFunction.next();
        }
    });

}

/********************************/
//Collectionに画像を追加する処理
/********************************/
function* addImage() {

    for (var cnt = 2; cnt <= 6; cnt++) {
        var paramsAdd = {
            CollectionId: "photos",
            Image: {
                S3Object: {
                    Bucket: "storage-keya-us",
                    Name: 'yone_san_' + cnt + '.jpg'
                }
            },
            ExternalImageId: 'yone_san_' + cnt + '.jpg'
        };

        rekognition.indexFaces(paramsAdd, function (err, data) {
            if (err) {
                console.log(err, err.stack);
            } else {
                console.log(data);
                addFunction.next();
            }
        });

        yield;
    }

    searchImg();
}

次は③
「rekognition.searchFacesByImage」で顔検索を行う。
Class: AWS.Rekognition — AWS SDK for JavaScript
「MaxFaces」は確か、似ている画像上位10枚までを表示するみたいな設定だったと思う。

/********************************/
//画像認識(元画像と似ている画像を探す)
/********************************/
var searchImg = function () {
    var params = {
        CollectionId: 'photos',

        Image: {
            S3Object: {
                Bucket: 'storage-keya-us',
                Name: 'yone_san_1.jpg'
            }
        },
        FaceMatchThreshold: 0.0,
        MaxFaces: 10
    };
    rekognition.searchFacesByImage(params, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
            showImgs(data);
            deleteCollectiom();

        }
    });
}

最後は④
ここはS3から画像のURL取得と
画像の似ている度合いを表示する処理

/********************************/
//画像表示処理(画像認識結果)
/********************************/
function showImgs(data) {
    var s3 = new AWS.S3({
        params: {
            Bucket: 'storage-keya-us',
            Region: s3RegionName
        }
    });
    var htmlImg ="";
    for (var i = 0; i < data.FaceMatches.length;i++) {
        //URL取得
        var paramsSource = {
            Bucket: 'storage-keya-us',
            Key: data.FaceMatches[i].Face.ExternalImageId
        };

        var sourceUrl = s3.getSignedUrl('getObject', paramsSource);

        htmlImg += "<img src='" + sourceUrl + "'/><br/>" + "<span>" + "Similarity:" + data.FaceMatches[i].Similarity + "%" + "</span><br/>";
    }

    $("#imgList2").html(htmlImg);
    
    $('img').css('width','150px');
}

全体のソースコードはこんな感じ

$("#rekognitionButton").on("click", rekognitionTest);

var s3BucketName = 'translator-app-bucket';
var s3RegionName = 'us-east-1';

AWS.config.update({
    accessKeyId: 'your_accessKeyId',
    secretAccessKey: 'your_secretAccessKey'
});

var rekognition = new AWS.Rekognition({
    region: 'us-east-1'
});

/********************************************/
//Rekognitionテスト処理
/********************************************/
var addFunction;

function rekognitionTest() {

    //Collection作成
    var paramsCreate = {
        CollectionId: "photos"
    };

    rekognition.createCollection(paramsCreate, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            addFunction = addImage();
            addFunction.next();
        }
    });

}

/********************************/
//Collectionに画像を追加する処理
/********************************/
function* addImage() {

    for (var cnt = 2; cnt <= 6; cnt++) {
        var paramsAdd = {
            CollectionId: "photos",
            Image: {
                S3Object: {
                    Bucket: "storage-keya-us",
                    Name: 'yone_san_' + cnt + '.jpg'
                }
            },
            ExternalImageId: 'yone_san_' + cnt + '.jpg'
        };

        rekognition.indexFaces(paramsAdd, function (err, data) {
            if (err) {
                console.log(err, err.stack);
            } else {
                console.log(data);
                addFunction.next();
            }
        });

        yield;
    }

    searchImg();
}

/********************************/
//Collection削除処理
/********************************/
var deleteCollectiom = function () {
    var paramsDelete = {
        CollectionId: "photos"
    };
    rekognition.deleteCollection(paramsDelete, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
        }
    });
}

/********************************/
//画像認識(元画像と似ている画像を探す)
/********************************/
var searchImg = function () {
    var params = {
        CollectionId: 'photos',

        Image: {
            S3Object: {
                Bucket: 'storage-keya-us',
                Name: 'yone_san_1.jpg'
            }
        },
        FaceMatchThreshold: 0.0,
        MaxFaces: 10
    };
    rekognition.searchFacesByImage(params, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
            showImgs(data);
            deleteCollectiom();

        }
    });
}

/********************************/
//画像表示処理(画像認識結果)
/********************************/
function showImgs(data) {
    var s3 = new AWS.S3({
        params: {
            Bucket: 'storage-keya-us',
            Region: s3RegionName
        }
    });
    var htmlImg ="";
    for (var i = 0; i < data.FaceMatches.length;i++) {
        //URL取得
        var paramsSource = {
            Bucket: 'storage-keya-us',
            Key: data.FaceMatches[i].Face.ExternalImageId
        };

        var sourceUrl = s3.getSignedUrl('getObject', paramsSource);

        htmlImg += "<img src='" + sourceUrl + "'/><br/>" + "<span>" + "Similarity:" + data.FaceMatches[i].Similarity + "%" + "</span><br/>";
    }

    $("#imgList2").html(htmlImg);
    
    $('img').css('width','150px');
}

htmlファイルはこんな感じ

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!-- jQueryCDN -->
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

    <!-- AWS SDK for JavaScript -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.27.min.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>

</head>

<body>

    <h3>Rekognitionテスト</h3>
    <img src="https://s3.amazonaws.com/storage-keya-us/yone_san_1.jpg" style="width:150px"/>
    <br>
    <input type="button" value="searchFaces" id="rekognitionButton">

    <div id="imgList2"></div>

    <script type="text/javascript" src="./js/main.js"></script>

</body>

</html>


表示画面はこんな感じ
f:id:sndstudy:20170226231050p:plain

ボタンを押下すると画像と似ている度合いを表示してくれる
f:id:sndstudy:20170226231211p:plain

※一応同一人物だけどSimilarity(信頼度)にもの凄い差がある……。
 ちなみに二人セゾン時のアー写もS3に格納したはずが、
 似てなさ過ぎて表示されないらしい。
 まぁ成長したと捉えればいいのか。

今回はブラウザのJavaScriptで実装してみたけど、意外と簡単に
実装することができた。
これぐらい簡単なら画像認識系の機能は自分で実装せず、
クラウドサービスに任せるのもアリかもしれない。

他の値とかを取得したければ、自分で画像認識の機能を
実装するしかないんだけどね……。

■参考サイト
Class: AWS.Rekognition — AWS SDK for JavaScript
yield - JavaScript リダイレクト 1 | MDN
米谷奈々未 - エケペディア
→画像を拝借

AWSIoT httpを用いてのpublish(メモ)

console.log('start');

$("#button").on("click", test);

var iotdata = new AWS.IotData({
    endpoint: 'endpoint',
    accessKeyId: 'accessKeyId',
    secretAccessKey: 'secretAccessKey',
    region: 'region'
});

function test() {

    console.log('click');

    var params = {
        topic: 'testTopic',
        payload: JSON.stringify({
            message: "hello"
        }),
        qos: 1
    };


    //メッセージをpublishする
    iotdata.publish(params, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
        }
    });

}

APIGatewayからAWSLambdaを叩く(POST送信)

『サーバーレスアーキテクチャ』という言葉にひかれて、
APIGatewayからAWSLambdaを叩いてみた。
そして、色々詰まったのでメモとして残しておく。


まずはAPIGatewayの設定。

メソッドリクエストの設定。
f:id:sndstudy:20170118005347p:plain

リクエスト本文のコンテンツタイプに
application/x-www-form-urlencoded を設定する。
これを設定することFormの値をPOSTメソッドでも送信することができる。

統合リクエストの設定。
f:id:sndstudy:20170118005833p:plain
f:id:sndstudy:20170118005856p:plain

本文マッピングテンプレートのコンテンツタイプは
メソッドリクエストと合わせる。
また、ここでリクエストボディに詰められた
Formの値を取り出すためにマッピングテンプレートを設定する。

マッピングテンプレートはVTLで記述する。
Velocityの文法 - Javaについて

{
    "headers" : {
        #foreach( $key in $input.params().header.keySet() )
            "$key" : "$input.params().header.get($key)"#if( $foreach.hasNext ),#end
        #end
    },
    "queryParameters" : {
        #set( $tmpstr = $input.body )
        #foreach( $keyandvaluestr in $tmpstr.split( '&' ) )
        #set( $keyandvaluearray = $keyandvaluestr.split( '=' ) )
            "$keyandvaluearray[0]" : "$keyandvaluearray[1]"#if( $foreach.hasNext ),#end
        #end
    },
    "stage" : "$context.stage",
    "sourceIp" : "$context.identity.sourceIp",
    "userAgent" : "$context.identity.userAgent"
}

特にこの部分でFormで送信したkeyとvalueを取り出している。

    "queryParameters" : {
        #set( $tmpstr = $input.body )
        #foreach( $keyandvaluestr in $tmpstr.split( '&' ) )
        #set( $keyandvaluearray = $keyandvaluestr.split( '=' ) )
            "$keyandvaluearray[0]" : "$keyandvaluearray[1]"#if( $foreach.hasNext ),#end
        #end

統合レスポンスの設定。
今回はFormで2つの値を送信し、足し算を行った結果を
htmlで表示するためコンテンツタイプを
text/htmlに設定する。

f:id:sndstudy:20170118010532p:plain

本文テンプレートは以下のように、計算結果を表示するように記述。

<html>
    <head>
        <title>title</title>    
    </head>
    <body>
        <span>$input.path('ans')</span>
    </body>
    
</html>


メソッドレスポンスでは、
統合レスポンスと同様にtext/htmlを設定する。
f:id:sndstudy:20170118010941p:plain

次はLambdaの作成。
今回はNode.jsで作成。

f:id:sndstudy:20170118011146p:plain

exports.handler = (event, context, callback) => {
    
    //値を取得する
    var num1 = parseInt(event.queryParameters.param1);
    var num2 = parseInt(event.queryParameters.param2);
    var answer = num1 + num2;
    
    //レスポンス
    context.done(null, {"ans": answer});
    
};

最後はFormを送信するhtmlを作成。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>LambdaTest</title>

</head>
<body>
    
    <form action="create api url" method="post">
        
        値1:<input type="text" name="param1"><br>
        値2:<input type="text" name="param2">
        
        <input type="submit" name="test">
    </form>

</body>
</html>

実行結果はこんな感じ。
f:id:sndstudy:20170118011543p:plain
f:id:sndstudy:20170118011701p:plain

特に詰まったのは統合リクエストのマッピングテンプレートだった。
VLTは初めてだったので、処理を書くのに時間がかかった。

あと、今回APIを作成したおかげでGETとPOSTのリクエストの中身を
細かく知ることができてよかった。(POSTはリクエストボディがあるなど)


■参考サイト
API Gateway + Lambda にFormからPOSTする時のマッピングテンプレートを作成しました | Developers.IO
[Web] HTTPリクエストの中身を学んでみた。GETやPOSTの違いなど - YoheiM .NET
HTTP入門
Amazon API Gatewayをブラウザから呼んでみた | Developers.IO
パーセントエンコーディング - Wikipedia
application/x-www-form-urlencoded ‐ 通信用語の基礎知識
node.jsのcontext.succeedで気をつけること | hacknote
docs.aws.amazon.com

GoogleMapsAPI リクエスト メモ

var directionsService;
var directionsDisplay = [];
/*緯度*/
var longitude = 35.7102849;

/*経度*/
var latitude = 139.77714030000004;

var map;

var allCount = 1;

var i = 0;

function initMap() {
    var mapdiv = document.getElementById('map');
    
    directionsService = new google.maps.DirectionsService();

    //オプション設定
    var myOptions = {
        zoom: 17,
        center: new google.maps.LatLng(longitude, latitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };

    //マップを描画
    map = new google.maps.Map(mapdiv, myOptions);

    //マップ上に線を描く
    drawLine();

}

function drawLine() {
    
    var divisor = 100000;
    
    if(i == 500){
        return;
    }

    var originLatLng;
    // 経由地点を設定 
    var wayPoints = [];

    if (allCount != 1) {
        originLatLng = new google.maps.LatLng(longitude + allCount / divisor, latitude + allCount / divisor);
    } else {
        originLatLng = new google.maps.LatLng(longitude, latitude);
    }

    //waypoints作成
    for (var count = 1; count <= 20; count++) {

        wayPoints.push({
            location: new google.maps.LatLng(longitude + allCount / divisor, latitude + allCount / divisor)
        });

        allCount++;

    }

    var request = {
        origin: originLatLng, //入力地点の緯度、経度
        destination: new google.maps.LatLng(longitude + allCount / divisor, latitude + allCount / divisor), //到着地点の緯度、経度
        travelMode: google.maps.DirectionsTravelMode.WALKING, //ルートの種類
        waypoints: wayPoints
    }

    /* 描画 */
    directionsService.route(request, function (result, status) {
        directionsDisplay.push(new google.maps.DirectionsRenderer());
        directionsDisplay[directionsDisplay.length - 1].setDirections(result); //取得した情報をset
        directionsDisplay[directionsDisplay.length - 1].setMap(map); //マップに描画
    });
    
    i++;
    
    $("#count").empty();
    $("#count").append(i);
    
    setTimeout(function(){ 
        drawLine();
    }, 1000);
    


}

JavaScript bindメモ

aタグに対するbindのメモ

JavaScript

$(function () {
    $("#jump").bind('click', function (event) {
        alert("hoge");
    });
});

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScript ClickTest</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="click.js"></script>
</head>

<body>

    <a href="https://www.google.co.jp" id="jump">
        <img src="duke.jpg">
    </a>

</body>

</html>

Mavenメモ(主にpom.xml)

Maven2のpom.xmlの構成 - tanamonの日記

Maven – POM Reference

MavenプロジェクトをTomcatで動かす方法 - Qiita

Maven 2 で Tomcat 7 にデプロイする - エンジニアきまぐれTips

kakakikikekeのブログ: eclipseでmavenプロジェクトとTomcat7を連携する方法(デプロイ)

環境構築2「動的Webプロジェクト in Eclipse + Maven 編」 - grachroのブログ

Selenium について(メモ)

簡単・便利、ブラウザの自動操作!~Selenium WebDriver~ : アシアルブログ

Selenium WebDriverでWebアプリのテストが変わる(前編):iPhone/Android含むブラウザ自動テストの最終兵器Selenium WebDriverとは (2/2) - @IT

Java+SeleniumなWebアプリケーションの自動テストプロジェクト構築 - Qiita

windows7+eclipse+Selenium WebDriverその0007(mavenプロジェクトとして環境構築をやり直してみる) - MOTOMICHI WORKS BLOG

自動テストはじめませんか?#1 | Developers.IO

Seleniumを使用して、テストの自動化に挑む。基本編 | 株式会社Seekcloud 長野県 上田市 ホームページ制作・Webサイト システム開発::長野県上田市

Selenium WebDriverのインストール~動かしてみる - hifive