#はじめに
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>
#起動したら、カメラを使って自分を映す
それでは、本記事で想定しているサンプルプログラムの動作を説明します。
サンプルプログラムをクリックして開くと、このようにカメラが起動し、画面に表示されるようにしたいと思います。
このような動作をする為には、起動時にカメラ等のセンサー制御を行う必要があります。
起動時処理は 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-----
#ボタンを押すと、人物判断を行う
カメラが使えるようになったので、人物判断の処理を追加します。
サンプルプログラムでは、「人物判断」ボタンを押した時に撮影を行い、写っている人物全ての性別や年齢を表示しています。
人間の顔と判断した領域を白枠で囲い、その下に性別や年齢が、黄色背景の赤文字で表示するようになっています。
併せて、分析した詳細情報を撮影画像の下に表示します。
余談ですが、これ人によっては実年齢と結構違う結果が出たりします。日本人の情報は少ないのかもしれません。
これらの処理については、以下のように記述しています。
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サービスとセンサーを結び付け、お互いの処理を簡単にやり取りできるようにするものです。
少々堅苦しい説明ですが、処理の流れを説明しているスライドを以下に置いておきますね。
#サンプルコード全文
最後に、今回作成したサンプルプログラムの全文を記載しておきます。
サンプルコード
<!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ではセキュリティ？の影響でか、動作しませんでした。
対応策等詳しい方がいらっしゃいましたら、コメントいただければ幸いです。
今回はここまでです。お疲れ様でした。
次回の記事では、更に機能を追加していきます。