LoginSignup
1

More than 5 years have passed since last update.

AI連携FW『シンプルエーアイ』を使ってみた(2):AIっぽい事をさせてみたい(その1)

Last updated at Posted at 2018-05-10

はじめに

AI連携フレームワーク『シンプルエーアイ』を使って遊ぶ、第2回目(その1)です。
この記事より、実際に作って動かします。環境等は、第1回目の記事をご覧下さい。
(1)準備編

公式サイトはこちら:https://smartaifw.com/simpleai-trial/

叱られました

ひとつ前の記事である『【改訂しました】(2):AIっぽい事をさせてみたい』を公開後、「複雑過ぎて分かり辛い」とご指摘がありました。
よって、より機能を絞り込んだサンプルプログラムを作成しましたので、そちらを元に改めて書いていきたいと思います。
前回記事をご覧下さった皆様、ありがとうございます。懲りずに、どうぞ今回もお付き合い下さい。

やりたい事

  • 起動したら、カメラを使って自分を写す。
  • 「人物判断」ボタンを押すと、写っている人物の性別と年齢をAIが答えてくれる。

新しいファイルを準備しよう(おさらい)

(1)準備編』では、APIキーを準備し、フレームワークを解凍して新しいファイルを作るところまで行いました。
この新しいファイルというのは、これからフレームワークを動かすコードを書く為のファイルです。
おさらいになりますが、ファイルのヘッダ部分には、jqueryおよびシンプルエーアイのJSファイルを設定しておいて下さい。
以下、あらためてソースの記述例を挙げておきます。

<!DOCTYPE html>
<html>
<head>
    <title>シンプルエーアイ デモ</title>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script src="simpleai-0.1.0.min.enc.js"></script>

起動したら、カメラを使って自分を映す

それでは、本記事で想定しているサンプルプログラムの動作を説明します。
サンプルプログラムをクリックして開くと、このようにカメラが起動し、画面に表示されるようにしたいと思います。
2-1.png

このような動作をする為には、起動時にカメラ等のセンサー制御を行う必要があります。
起動時処理は window.onload イベントにて行います。

//起動時処理
window.onload = function () {
    var SimpleAI = new denaripamSimpleAI(
        this,
        {},
        {
            initCamera:true,
        },
    );

シンプルエーアイ本体のオブジェクトを作成し、カメラを初期化しています。
これで、画面が開いた時からカメラが使えるようになります。

…と、言いたいところですが、まだ大事な設定が残っています。そう、APIキーですね。
(1)準備編』で取得しておいたキーを、ここで設定します。
本記事で利用するのはFace API のキーだけですが、後々の事を考え、3種類全て設定してしまいましょう。
設定するキーの種類と内容を間違えないよう、ご注意下さい。

なお、サンプルプログラムでは「initCamera:true,」の後に設定しています。

//-----uriBase、APIキーを設定してください START-----
            MicrosoftAzureFaceAPI:true,
            MicrosoftAzureFaceAPIuriBase:"",        //FaceAPIのエンドポイントを入力
            MicrosoftAzureFaceAPIsubscriptionKey:"",        //FaceAPIのキー②を入力

            MicrosoftBingSpeechAPIREST:true,
            MicrosoftBingSpeechAPIRESTuriBase:"https://speech.platform.bing.com/speech/recognition/<RECOGNITION_MODE>/cognitiveservices/v1?language=<LANGUAGE_TAG>&format=<OUTPUT_FORMAT>",     //※※※※変更不要※※※※
            MicrosoftBingSpeechAPIsubscriptionKey:"",       //BingSpeechAPIのキー②を入力

            MicrosoftAzureComputerVisionAPI:true,
            MicrosoftAzureComputerVisionAPIuriBase:"",      //ComputerVisionAPIのエンドポイントを入力

            MicrosoftAzureComputerVisionAPIsubscriptionKey:"",  //ComputerVisionAPIのキー①を入力

//-----uriBase、APIキーを設定してください END-----

ボタンを押すと、人物判断を行う

カメラが使えるようになったので、人物判断の処理を追加します。
サンプルプログラムでは、「人物判断」ボタンを押した時に撮影を行い、写っている人物全ての性別や年齢を表示しています。
人間の顔と判断した領域を白枠で囲い、その下に性別や年齢が、黄色背景の赤文字で表示するようになっています。
2-2.png

 
 

併せて、分析した詳細情報を撮影画像の下に表示します。
2-3.png
 

余談ですが、これ人によっては実年齢と結構違う結果が出たりします。日本人の情報は少ないのかもしれません。

これらの処理については、以下のように記述しています。
JavaScriptのボタンの処理はこちら。

//人物判断ボタン
var captureButton = document.getElementById('capture');
    captureButton.addEventListener('click', function() {
    SimpleAI.Personinformation();
  });

HTML側は、このようになっています。
上から順に、人物判断ボタン、カメラ画像表示区域(video)、画像撮影結果、分析結果です。

<body>
<button id="capture">人物判断</button><br>
<video id="denaripamControlSensor_video" width="800px" height="600px" controls autoplay></video>
<div id="denaripamSimpleAI_responseRect"></div><br>
<textarea id="denaripamSimpleAI_responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea><br>
</body>

そもそも『シンプルエーアイ』って何をやっているの?

『シンプルエーアイ』は、AIサービスとセンサーを結び付け、お互いの処理を簡単にやり取りできるようにするものです。
少々堅苦しい説明ですが、処理の流れを説明しているスライドを以下に置いておきますね。

thumbnail

サンプルコード全文

最後に、今回作成したサンプルプログラムの全文を記載しておきます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
    <title>シンプルエーアイ デモ</title>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script src="simpleai-0.1.0.min.enc.js"></script>
<script>
//------------------------------------------------------------------------------------------------------------------------
//起動時処理
window.onload = function () {
    var SimpleAI = new denaripamSimpleAI(
        this,
        {},
        {
            initCamera:true,

//-----uriBase、APIキーを設定してください START-----
            MicrosoftAzureFaceAPI:true,
            MicrosoftAzureFaceAPIuriBase:"",                    //FaceAPIのエンドポイントを入力
            MicrosoftAzureFaceAPIsubscriptionKey:"",                                    //FaceAPIのキー②を入力

            MicrosoftBingSpeechAPIREST:true,
            MicrosoftBingSpeechAPIRESTuriBase:"https://speech.platform.bing.com/speech/recognition/<RECOGNITION_MODE>/cognitiveservices/v1?language=<LANGUAGE_TAG>&format=<OUTPUT_FORMAT>",     //※※※※変更不要※※※※
            MicrosoftBingSpeechAPIsubscriptionKey:"",                                   //BingSpeechAPIのキー②を入力

            MicrosoftAzureComputerVisionAPI:true,
            MicrosoftAzureComputerVisionAPIuriBase:"",      //ComputerVisionAPIのエンドポイントを入力

            MicrosoftAzureComputerVisionAPIsubscriptionKey:"",                          //ComputerVisionAPIのキー①を入力

//-----uriBase、APIキーを設定してください END-----
        },
    );
//-----------------------------------------------
//人物判断ボタン
var captureButton = document.getElementById('capture');
    captureButton.addEventListener('click', function() {
    SimpleAI.Personinformation();
  });
//--------------------------------------------
};
//------------------------------------------------------------------------------------------------------------------------
</script>
</head>
<body>
<button id="capture">人物判断</button><br>
<video id="denaripamControlSensor_video" width="800px" height="600px" controls autoplay></video>
<div id="denaripamSimpleAI_responseRect"></div><br>
<textarea id="denaripamSimpleAI_responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea><br>
</body>
</html>

最後に

今回のプログラムについては、サーバにアップしなくても、ご自身のパソコンで動作させることができます。
※ただし、Microsoft Edgeではセキュリティ?の影響でか、動作しませんでした。
 対応策等詳しい方がいらっしゃいましたら、コメントいただければ幸いです。

今回はここまでです。お疲れ様でした。
次回の記事では、更に機能を追加していきます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1