技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

PWAで顔認証アプリを作る

2018-07-04 勉強会
以前の勉強会で菊田さんが作っていた、WebAssembly技術をつかてブラウザ上でOpenCVを動かしてカメラ画像から顔認識を行う発表を見て、これは面白いなーと思い、勉強会のネタとしてこれで役目を終わってしまうのはもったいない、ということで、この技術をベースに新しいサービスを作ってみることにしました。

何を作るか

顔認識で何を作りたいか考えたとき、接客業などでの顧客カルテを、顧客を顔で自動認識する顔認識カルテを作ったら未来的で面白そうじゃないかと考え、「顔認証顧客カルテ」を作ることにしました。
これが完成すると、例えばVIPのお客さんが来店したときに新人スタッフが受付をしていたとしても、名前を聞く前に”ようこそVIP様!”と特別な対応ができるようになります。
また以前に出禁になったちょっとやばい客が来店したときも「今日は予約で満席でしてー・・・」みたいな水際で入店をブロックすることなんかもできるかもしれません。

更にこれはクラウドサービスになるので、複数の支店間でリアルタイムに顧客情報を共有できるので、どの店舗にVIPが来店しても安定したVIP対応が可能になります。

飲食店等での利用を考えたとき、顧客管理をするために毎回名前を聞いて顧客登録することはあまり現実的ではないと思いますが、このサービスなら、名前や会員番号等がわからなくても、来店するたびに記録が残るため、「今月5回も来店しているお客さん」とか、「2年ぶりに来店したお客さん」「以前5人前の焼き肉を一人で食べたお客さん」といったことがわかるようになり、接客の質を高めることができるようになります。

顔認証顧客カルテという名前はちょっと露骨すぎるので、サービス名はシンプルに「Face-Karte」と名付けます。運良くface-karte.comドメインも空いていたので早速GET!

基本機能

・来店客をカメラで捉えてデータベースから照合する
・データベースに合致する顔情報がある場合は、名前や類似度といった情報をカメラ画像に反映する
・更に、過去の来店履歴や顧客の詳細情報を画面に呼び出し、マウスやキーボード操作なしに顧客情報を参照できるようにする
・データベースに登録のない新規の顔は顔分析AIを使い、年齢・性別・眼鏡、ひげ有無などの顔の特徴情報を取得し新たにデータベースに記録する

早速作ってみよう

顔認識や顔分析はAWSのAmazon Rekognition APIを利用して処理をします。
Rekognition APIはかなり高度なAI処理を非常に安価で高速に利用できるので、今後の活用範囲はどんどん増えていくと思われます。
まずは、こういった勉強会という形で色々触ってみて勘所を掴んでいくことは大事な工程です。

ワイヤーフレームを作成する

まずどんなサービスになるのかワイヤーフレームベースで設計していきます。
私がWEBアプリを設計する際、要件定義とかよりもまずはワイヤーフレームを作成しながら要件を積み上げていく作り方をすることが多いので、今回もそんな流れで作っていきます。
基本的に画面遷移のない1画面アプリになるので、全画面表示にした最必要な情報がシンプルにまとまるように設計しました。

基本的な構成

左カラムは本日認識した顔の一覧が表示されるエリアになります。
カレンダーで別の日に切り替えることができます。
中央カラムはカメラ画像を表示するエリアにあります。
右カラムは顧客の属性情報を表示するグラフを配置しています。
画面下部は認識した顔から取り出した顧客情報を表示するエリアです。

まずは、受け取った顔画像をデータベースと照合する部分です


my $Response = $rekognition->SearchFacesByImage(
FaceMatchThreshold => 90,
CollectionId => 'CollectionId',
MaxFaces => 5,
Image => {
S3Object => {
Bucket => 'bucket_name',
Name => 'target_file'
}
}
);
my $FaceMatches = $Response->FaceMatches;
# 信頼度
my $Confidence = $Response->SearchedFaceConfidence;
# 顔座標
my $BoundingBox = $Response->SearchedFaceBoundingBox;
事前に顔情報をプールしておく”コレクション”という箱を用意します。
次に受け取った顔画像はS3に保存し、そのファイルを使ってコレクション内から検索を行います。

一致する顔がコレクション内に登録されていない場合は、新規登録を行います


my $IndexFacesResponse = $rekognition->IndexFaces(
DetectionAttributes => [
DEFAULT
],
CollectionId => 'CollectionId',
Image => {
S3Object => {
Bucket =>'bucket_name',
Name =>'target_file'
}
}
);

# 画像の向き
my $OrientationCorrection = $IndexFacesResponse->OrientationCorrection;
my $FaceRecords = $IndexFacesResponse->FaceRecords;
my $FaceRecord = @{$FaceRecords}[0];
# 顔発見
my $Confidence = $FaceRecord->{Face}->{Confidence};
# イメージID
my $ImageId = $FaceRecord->{Face}->{ImageId};
# フェイスID
my $FaceId = $FaceRecord->{Face}->{FaceId};
コレクションに顔が登録されると、イメージIDとフェイスIDが払い出されます。
これらをデータベースに登録しておくことで、次回訪問した際、データベースから顧客情報を検索できるようになります

新しい顔は顔の分析を行います。年令や性別・笑顔かどうかなど様々な情報を取り出せます。


my $DetectFacesResponse = $rekognition->DetectFaces(
Image => {
S3Object => {
Bucket =>'bucket_name',
Name =>'target_file'
}
},
Attributes => [
"ALL"
]
);
my $FaceDetails = $DetectFacesResponse->FaceDetails;
$FaceDetails = shift @{$FaceDetails};
# 年齢層
$AgeRangeLow = $FaceDetails->{'AgeRange'}->{'Low'};
$AgeRangeHigh = $FaceDetails->{'AgeRange'}->{'High'};
# 性別
$Gender = $FaceDetails->{'Gender'}->{'Value'};
# メガネ
$Eyeglasses = $FaceDetails->{'Eyeglasses'}->{'Value'};
それ以外にも、口ひげ・あごひげの有無・サングラスを掛けているか、表情が幸せそうか悲しそうかと行った感情情報なども取得できます。

せっかくなのでPWA対応にする

PWA(Progressive Web Apps)とは、端的に言うとHTMLとCSSとJavaScriptなどのWebアプリを作成する技術で、スマホのネイティブアプリにしかない機能を実現できる技術です。
主に下記のようなものです。

・キャッシュを利用してオフライン時でも操作できる。
・ブラウザデフォルトのUI(上部のメニューバー)を非表示できる
・ホームに追加されたページはインストールされたアプリのように扱える
・起動時のスプラッシュ画面が設定できる
・ネイティブアプリのようなプッシュ通知。
・App StoreやGoogle Playを通さず、Web経由でのアプリ配布が可能。

サービスの特性上オフライン動作はできないのですが、ネイティブアプリっぽいUIにすることで差別化はできると思います。

完成!

まだ不完全なところは多々ありますが、ひとまず完成です。
PC及びiPadで動きます。

今後これが正式リリースされるかは未定ですが、ご興味のある方はご連絡ください。

記事一覧へ