Edited at

AI連携FW『シンプルエーアイ』を使ってみた(1):ブラウザでAIを動かすぞ(準備編)

More than 1 year has passed since last update.


はじめに

昨今流行りのAIサービス、巷には色々ありますね。

逆に色々あり過ぎて、じゃあ実際には何ができるの?と迷ってしまうのも事実。

そこで数回に分けて、AI連携フレームワーク『シンプルエーアイ』を使って遊んでみたいと思います。

AIに興味ある方、ちょっと試してみたい方、どうぞお付き合い下さい。


『シンプルエーアイ』って?

ブラウザでAIサービスを使えるフレームワークです。

動かすためには、JavaScriptの知識が多少あればOK。

フレームワークは公式サイトで配布しています。

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


必要なものと環境


  • カメラとマイク付きの、パソコンやタブレット

  • ブラウザ……記事内では、Google Chromeを使います。

  • APIのキー……記事内では、MicrosoftのAPIを使います。

  • 公式サイトからダウンロードしたフレームワーク「simpleai-trial」

  • JavaScriptの基本知識


まずは準備をしよう

『シンプルエーアイ』をAIサービスと連携させる為には、先にも触れましたが、APIのキーが必要です。

そこでまず事前準備として、APIキーを取得する手順を見ていきましょう。


準備1:MicrosoftのAPIキーを取得する


利用するAPIサービス

この記事では、Microsoftの以下のAPIサービスを利用します。


  • Microsoft Cognitive Services Face API

  • Microsoft Cognitive Services Bing Speech API

  • Microsoft Cognitive Services Computer Vision API


APIキーを取得する手順

1.公式サイトの「シンプルエーアイをためす」ページをクリックして下さい。

1-1.png

 

 

2.ページ中央付近にある「Microsoft Cognitive Services(無料で試用可能)」をクリックし、Microsoftのページを開きます。

1-2.png

 

 

3.Microsoftのページが開くので、「Cognitive Services を無料で試す」バナーをクリックします。

1-3.png

 


「Face API」を取得しよう

1.開いたページの中から「Face API」を探し、「API キーの取得」をクリックして下さい。

1-4.png

 

2.利用条件のポップアップが表示されるので、チェックボックス2か所にチェックを付けて「次へ」をクリックします。

1-5.png

 

 

3.お持ちのアカウントでログインして下さい。

1-6.png

 

4.「Face API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。

* エンドポイント(画像①のキー)

* APIキー(画像②のキー)

1-7.png

 


「Bing Speech API」を取得しよう

1.開いたページの中から「Bing Speech API」を探し、「API キーの取得」をクリックして下さい。

1-8.png

 

2.利用条件のポップアップが表示されたら、チェックボックス2か所にチェックを付けて「次へ」をクリックします。

 

3.再度サインイン画面が出てきた場合は、お持ちのアカウントでログインして下さい。

 

4.「Bing Speech API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。

* エンドポイント(画像①のキー)

* APIキー(画像②のキー)

1-9.png

 


「Computer Vision API」を取得しよう

1.開いたページの中から「Computer Vision API」を探し、「API キーの取得」をクリックして下さい。

1-10.png

 

2.利用条件のポップアップが表示されたら、チェックボックス2か所にチェックを付けて「次へ」をクリックします。

 

3.再度サインイン画面が出てきた場合は、お持ちのアカウントでログインして下さい。

 

4.「Computer Vision API」の以下の項目のキーをコピーし、メモ帳などに控えておいて下さい。

* エンドポイント(画像①のキー)

* APIキー(画像②のキー)

1-11.png

 


準備2:フレームワークをダウンロードする

キーが準備できたら、次はフレームワークです。

公式サイトの「ダウンロ-ド」ページから、フレームワークをダウンロードして下さい。

1-12.png

 


準備3:フレームワークを解凍し、新しいファイルを準備しよう

ダウンロードしたファイル「simpleai-trial.zip」を解凍して下さい。

解凍後は「simpleai-trial」というフォルダが作成されています。

解凍されたフォルダ「simpleai-trial」の中に、これからフレームワークを動かす為の新しいHTMLファイルを作成します。

ファイルのヘッダ部分には、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>

 


余談:公式サイトでAPIキーを入れてみよう

今回取得した3種類のAPIキーは、公式サイトの「シンプルエーアイをためす」で入力することで、簡単にAIの動作を見ることができます。

ぜひ一度、試してみて下さいね。

上段の項目:Face APIの エンドポイント を入力

下段の項目:Face APIの キー① を入力

1-13.png

 

上段の項目:Bing Speech APIの エンドポイント を入力

下段の項目:Bing Speech APIの キー① を入力

1-14.png

 

上段の項目:Computer Vision APIの エンドポイント を入力

下段の項目:Computer Vision APIの キー① を入力

1-15.png

 

 


最後に

今回はここまでです。お疲れ様でした。

結局、準備だけで終わってしまいましたので…

次回の記事では、実際にフレームワークを動かしてみたいと思います。