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

#はじめに

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

**公式サイトはこちら：[https://smartaifw.com/simpleai-trial/](https://smartaifw.com/simpleai-trial/)**


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


#やりたい事

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


#新しいファイルを準備しよう（おさらい）

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

```html
<!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](https://qiita-image-store.s3.amazonaws.com/0/255412/7697b37d-61c2-835b-0da2-c7653574836d.png)

 
 


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

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

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

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

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

```js
//-----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](https://qiita-image-store.s3.amazonaws.com/0/255412/1d73153c-9f95-ceb2-71ab-c64f922b86fe.png)

　
　

併せて、分析した詳細情報を撮影画像の下に表示します。
![2-3.png](https://qiita-image-store.s3.amazonaws.com/0/255412/9a2c4180-3089-f28b-a4ef-639478653899.png)
　

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

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

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


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

```html
<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](http://image.slidesharecdn.com/denaripam20171130171107simpleaiconceptslideshare-180427021022/95/slide-2-1024.jpg)](https://www.slideshare.net/informationdenaripam/ai-ai-95171101/)


#サンプルコード全文

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

<details><summary>サンプルコード</summary><div>

```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>
<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>
```

</div></details>



#最後に

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



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