paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

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など、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

↓詳しくはこちら
paiza.jp

■まとめ

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

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

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


<参考>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

現在、普段有料公開しているPHP、DB/SQL、Webアプリ開発入門(PHP+MySQL編)のレッスンを、期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編