paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

JavaScriptで人工知能を活用した画像解析ができる「Kairos」で顔認識をやってみた!

f:id:paiza:20170719121045j:plain
どうも、まさとらん(@0310lan)です!

今回は、人工知能を活用した高度な画像解析を、簡単なJavaScriptコードで実現できるWebサービスをご紹介します!

画像に写っている「顔」を認識させて、その人物の「感情」を読み取ったり、顔の座標データを取得するようなことが簡単にできるのでオススメです。

Kairos

f:id:paiza:20170719121143j:plain

■「Kairos」の使い方!

それでは、実際に「Kairos」を使いながら、どのような画像解析ができるのかを見ていきましょう!

まず最初に、以下のリンクからユーザー登録を済ませておきます。

ユーザー登録ページ|Kairos
f:id:paiza:20170719121214j:plain
メルアドやパスワードなどを登録するだけで、誰でも利用可能です。(登録したメルアドにリンクが送られてくるので、それをクリックしてログインします)


ログインしたら、自分専用の「ダッシュボード」が表示されます。
f:id:paiza:20170719121231j:plain
画面下に、「App ID」と「Key」が発行されているので、これをコピーしておきましょう。

これで導入準備は完了です!

あとは、JavaScriptでプログラミングを行いながら「画像解析」を始めましょう!

■人物の「感情」を解析しよう!

Kairos」は、人工知能によって画像を解析するためのAPIが提供されており、これを利用することでJavaScriptから簡単に実行することができます。

今回は、画像に写った人物の「感情」や「顔」を認識させてみたいと思います!


そこで、まずは人物が写っている画像を1枚用意します。(今回はフリー画像を利用しています)
f:id:paiza:20170719121332j:plain
この画像を使って、まずは画像の「感情」を解析してみましょう。


最初に、画像を「Kairos」のサーバーへ送信する必要があるのですが、そのベースとなるURLが次のようになります。

https://api.kairos.com/v2/media?source=【画像のURL】


これを「XMLHttpRequest()」で送信する簡単なプログラムを組み立てればOKです!

var request = new XMLHttpRequest();


request.open('POST', 'https://api.kairos.com/v2/media?source=【画像のURL】');
request.setRequestHeader('app_id', '【自分のAppID】');
request.setRequestHeader('app_key', '【自分のKey】');


request.onreadystatechange = function () {


    //ここに処理を書く


};


request.send();

「AppID」と「Key」は、冒頭でコピーしておいたモノに差し替えておいてください。


あとは、画像を送信後に「Kairos」のサーバーからレスポンスが返ってくるので、「onreadystatechange()」内に内容を確認する処理を追記します。

request.onreadystatechange = function () {
    if (this.readyState === 4) {


        // レスポンスの内容をコンソールに出力する
        console.log( JSON.parse(this.responseText) );


  }
};

「responseText」に返ってきたレスポンスが文字列で格納されているので、読みやすいように「JSON.parse()」で解析してコンソールに出力するようにしています。

※ここまでの全ソースコードこちらから確認できます。


JavaScriptを実行するとコンソール画面に「id」が出力されるので、これをコピーしておきましょう!
f:id:paiza:20170719121504j:plain


この画像IDを使って、今度は次のようなURLを使うことで画像の「感情」を読み取ることができるようになります!

request.open('GET', 'https://api.kairos.com/v2/analytics/【画像のID】);

ソースコードこちらから確認できます。


コンソールを見ると、「average_emotion」の中に喜怒哀楽を数値化した情報が格納されており、この画像の場合は「喜び」の数値が大きいことが分かります。
f:id:paiza:20170719121540j:plain
他にも、「メガネの有無」「性別」「ネガティブ / ポジティブ」…など、さまざまな情報を取得することが可能になります。

これを活用すれば、ユニークな画像分類などが出来るようになり非常に便利です。

■人物の「顔」を認識しよう!

今度は、先ほどの画像を利用して「顔認識」に挑戦してみましょう!

ベースとなるURLは次のようになります。

https://api.kairos.com/detect?image=【画像のURL】


そして、先ほどと同じように「XMLHttpRequest()」を使ってプログラムを組み立てましょう!

var request = new XMLHttpRequest();


request.open('POST',  'https://api.kairos.com/detect?image=【画像のURL】');
request.setRequestHeader('app_id', '【自分のAppID】');
request.setRequestHeader('app_key', '【自分のKey】');
    
request.onreadystatechange = function () {
    if (this.readyState === 4) {


          console.log( JSON.parse(this.responseText) );
        
    }
};




var body = {
    'image': 【画像のURL】,
    'selector': 'ROLL'
};
  
request.send( JSON.stringify(body) );

基本的には「感情」を読み取った時のコードと同じなのですが、「request.send()」の引数として画像のURLと「selector」を指定するようにしてください。


そして、コンソール画面を確認すると、画像の顔を認識したデータが取得できているのが分かります!
f:id:paiza:20170719121637j:plain
このデータには、顔の位置座標や目の位置、アゴのラインまでいろんなデータが詰まっています。


そして、これらの座標データとcanvasをうまく活用すれば、こんな感じで「顔認識」させることができます!
f:id:paiza:20170719121649j:plain
このサンプルのソースコードコチラから確認できます。


さらに、座標データだけでなく、その人物の属性データも取得可能です!
f:id:paiza:20170719121703j:plain
得られるデータとしては、「年齢」「白人 / 黒人」「アジア系 / ヒスパニック系」「性別」…など、さまざまな情報が格納されているので便利です。

また、「verify」機能を活用すれば、1枚の画像データから「顔認証」システムを構築することもできるようになるので、活用範囲はとても広いと言えるでしょう。

JavaScript講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

詳しくはこちら


■まとめ

今回は、「Kairos」の画像解析による基本的な部分を駆け足でご紹介しました。

特に、「顔」の認識は優れており、自分の「顔」を登録しておけば他の写真から自分だけを収集するような機能も簡単に作れてしまいます。

JavaScriptから手軽に試せるので、ぜひみなさんも画像解析を楽しんでみてください!


<参考>



paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.