人工知能パーツ Microsoft Cognitive Services で食べ物画像判定 BOT を作ろう！ [Custom Vision 編]

Cognitive Services の Custom Vision は、オリジナルの画像判定エンジンを作成して API で推定値を取得できるサービスです。機械学習などで画像判定ロジックを構築しなくても、画像をアップロードしてタグ付けを行うことで、画像判定エンジンを構築できます。
今回は画像を用意して、画像判定エンジンを作成して API でアクセスできるようにする方法を紹介します。

>**人工知能パーツ Microsoft Cognitive Services で食べ物画像判定 BOT を作ろう！**
>(1) Custom Vision 編 ※このページ
>(2) Bot Framework 編 : [C# 版](http://qiita.com/annie/items/bd232f67e06c83586ca5) / [Node.js 版](https://qiita.com/annie/items/41b60b90affe26925761)

Custom Vision 編、Bot Framework 編を通して作成できる食べ物画像判定 BOT↓
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170624_10-e1498284424569.png)

# 用意するもの
## Microsoft アカウント
持っていない場合は取得しておきます。
>[Microsoft アカウント登録手続き](https://www.microsoft.com/ja-jp/msaccount/signup/default.aspx)

## 画像判定エンジンを作成するための画像、テスト用画像
今回は、食べ物 (カレー、餃子、焼肉、ラーメン、ピザ、寿司) を判定するロジックを作成するため、学習データとしてそれぞれ 5 枚以上の画像を用意します。(1 つのタグにつき、5 枚以上の画像が必要です。) なお、画像は jpg / png / bmp、1 ファイルあたり 4 MB 未満までです。
また、あとで画像判定エンジンをテストするための画像も別に用意します。(取りあえず 2~3 枚)
>下記で使ったものと同じ画像(学習用、テスト用)を用意しました↓
[学習用＆テスト用画像サンプル](https://msdnshared.blob.core.windows.net/media/2017/06/CustomVision_photo_20170616.zip)

# Custom Vision API を利用した画像判定エンジンの作成
Custom Vision API はポータルが用意されており、画像のアップロードや画像判定エンジンの学習と管理を行うことができます。

## Custom Vision ポータルへのアクセス
ブラウザから Custom Vision ポータル ([https://customvision.ai/](https://customvision.ai/)) にアクセスします。画面中央の [SIGN IN] をクリックして、Microsoft アカウントでサインインします。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_01-e1497495316632.png)

初めてアクセスすると *アプリアクセス許可* 画面が表示されますので、[はい] をクリックします。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_02-e1497495340718.png)

Custom Vision の *Terms of Service* (サービス条件) にも ☑ をつけて [I agree] をクリックします。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_03-e1497495356671.png)

## 新規プロジェクトの作成と学習データ画像のアップロード
画像判定エンジンは *Project* と呼ばれています。
[New Project] をクリックして新規プロジェクトを作成します。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_04-e1497495456657.png)

*Name* (プロジェクト名) と *Description* (プロジェクトの説明) を入力し、*Domain* (ドメイン、画像のカテゴリ) を選択します。今回は食べ物なので *Food* を選択しています。[Create Project] をクリックしてプロジェクトを作成します。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_05-e1497495510340.png)

プロジェクト一覧画面に戻り、作成したプロジェクトを選択します。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_06-e1497495523933.png)

プロジェクトの Workspace 画面から画像をアップロードします。画面中央の [Add images] をクリックします。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_07-e1497495538985.png)

[Browse local files] をクリックして、ローカル(ご自分のPC環境) から写真をアップロードします。同じタグをつけたい画像を複数アップロード可能です。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_08-e1497495554373.png)

[Add some tags...] にタグを入力します。今回は画像が食べ物かどうかも判定したいので "food" タグを追加しています。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_09-e1497495569755.png)

タグ入力が終了したら、[Upload xx Files] をクリックしてアップロードします。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_10-e1497495583575.png)

*Images updated successfully* と表示されたらタグ付け完了です。[Done] をクリックします。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_11-e1497495600122.png)

タグが左列に、画像が中央部分に表示されます。上部の *Add images* をクリックして、他の画像も追加します。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_12-e1497495842837.png)

一度作成したタグは、他の画像のタグ入力時にも候補として表示されます。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_13-e1497495854421.png)

今回は curry,gyoza,meat,pizza,ramen,sushi の6種類の食べ物画像をアップロードしてタグ付けを行いました。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_14-e1497495869968.png)

## 学習データを使って画像判定エンジンを構成する
画面上の [Train] をクリックすると、画像判定エンジンを構築するための学習が始まります。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_15-e1497495883756.png)

終了すると、学習結果が表示されます。学習が完了すると、[Prediction URL]が表示されるようになります。
[Make Default] をクリックして、デフォルトの判定エンジンとして設定します。
[Quick Test] をクリックすると、画像判定エンジンのテストを行うことができます。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_16-e1497495899271.png)

## 画像判定エンジンをテストする
*Quick Test* の画面でオンライン画像のURLを入力、またはローカル環境のテスト用画像 (学習データに使用していないもの) をアップロードすると、判定されたタグ (Tag) と信頼度 (Probability) が表示されます。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_17-e1497495916479.png)

*Prediction URL* の画面では、API でアクセスするための情報が表示されます。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_18-e1497495934758.png)

*Prediction URL* の画面で表示された URL に、Content-type および Prediction-key を header にセット、Body に URL をバインドして、POST します。Quick Test と同様に、JSON の *Prediction* 部分に判定されたタグ (Tag) と信頼度 (Probability) が表示されます。
![](https://msdnshared.blob.core.windows.net/media/2017/06/bluesky_20170616_19-e1497495957759.png)