駅すぱあと x Cognitive Services で 画像DE路線当てBOT を作ろう！ [Custom Vision 編]

[Microsoft Cognitive Services](https://azure.microsoft.com/ja-jp/services/cognitive-services/) の [Custom Vision Service](https://azure.microsoft.com/ja-jp/services/cognitive-services/custom-vision-service/) は、オリジナルの画像判定エンジンを作成して API で推定値を取得できるサービスです。また、[駅すぱあとwebサービス](https://ekiworld.net/service/lp/webservice/) は、国内初の乗換案内ソフト [駅すぱあと](https://ekiworld.net/about/index.html) がもつ様々な情報をWebAPIで提供しているサービスです。

今回は Custom Vision Service で作成した画像判定エンジンを利用して、
鉄道の路線を画像から判別し、 駅すぱあとwebサービス を利用して路線に含まれる駅を検索し、それを返す BOT を作成する方法を紹介します。

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

>[駅すぱあとwebサービス](https://ekiworld.net/service/lp/webservice/) は、国内初の乗換案内ソフト [駅すぱあと](https://ekiworld.net/about/index.html) がもつ様々な情報をWebAPIで提供しているサービスです。
経路探索はもちろん、駅データや時刻表などの情報を取得することができます。 
無料で使えるフリープランを用意しており、企業にかぎらず個人でもご利用いただけます。

この BOT アプリは Bot Framework Channel Emulator を使ってローカル環境で稼働確認することが可能です。また、Web 公開 & Bot Framework に登録すると、埋め込み可能な Web Chat が利用できます。

>**駅すぱあと x Cognitive Services で 画像DE路線当てBOT を作ろう！**
>(1) [Custom Vision 編](https://qiita.com/hmaruyama/items/fd28cdee19a55fb510b1)
>(2) BOT実装 編
>- **Node.js ver 編** ※このページ
>- [C# ver 編](https://qiita.com/annie/private/c4bcc3dff1fa17deea2b)


Custom Vision 編、Bot実装 編を通して作成できる 画像DE路線当てBOT↓

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f37393537372f61336531373839302d303262632d326137312d343462622d6338636261623833626631662e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/79577/20373aca-2ea7-30a3-e87f-099ae799d04d.png)

この資料では、受け取った画像から鉄道の路線を判定するエンジンを作成する部分を紹介します。

# 用意するもの

## Microsoft アカウント

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

## 画像判定エンジンを作成するための画像、テスト用画像

今回は、路線を判定するロジックを作成するため、学習データとして各路線につき5枚以上の画像を用意します。(1つのタグにつき、5枚以上の画像が必要です。)
なお、画像は jpg / png / bmp、1 ファイルあたり 4MB 未満までです。
また、あとで画像判定エンジンをテストするための画像も別に用意します。(取りあえず 2~3 枚)

>下記で使ったものと同じ画像(学習用、テスト用)を用意しました↓
>[学習用＆テスト用画像サンプル](https://drive.google.com/file/d/0B2PZARK4-C5aUHR4SmhnRlh3UnM/view)
>JB=JR総武線, JC=JR中央線, JK=JR京浜東北線, JO=JR横須賀線, JT=JR東海道線, JY=JR山手線

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

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

![スクリーンショット 2017-09-21 0.28.20.png](https://qiita-image-store.s3.amazonaws.com/0/79577/5d3218c2-376c-e6ac-1666-5b87773c406a.png)

## 新規プロジェクトの作成と学習データ画像のアップロード
画像判定エンジンは *Project* と呼ばれています。
[New Project] をクリックして新規プロジェクトを作成します。

*Name* (プロジェクト名) と *Description* (プロジェクトの説明) を入力し、*Domain* (ドメイン、画像のカテゴリ) を選択します。今回は鉄道の路線なので *General* を選択しています。[Create Project] をクリックしてプロジェクトを作成します。

![スクリーンショット 2017-09-21 0.36.27.png](https://qiita-image-store.s3.amazonaws.com/0/79577/d54db2fe-1d3f-ca12-a060-578ac6a4e092.png)

プロジェクトの Workspace 画面から画像をアップロードします。
画面中央の [Add images] をクリックします。

![スクリーンショット 2017-09-21 0.38.47.png](https://qiita-image-store.s3.amazonaws.com/0/79577/a32ae866-0b22-3d3d-00fc-dd58c346e926.png)

[Browse local files] をクリックして、ローカル(ご自分のPC環境) から写真をアップロードします。同じタグをつけたい画像を複数アップロード可能です。

![スクリーンショット 2017-09-21 0.39.26.png](https://qiita-image-store.s3.amazonaws.com/0/79577/38ec9cc4-f743-0845-8244-1bb463e1da84.png)

[Add some tags...] にタグを入力します。
タグ入力が終了したら、[Upload xx Files] をクリックしてアップロードします。

![スクリーンショット 2017-09-21 0.46.53.png](https://qiita-image-store.s3.amazonaws.com/0/79577/0002f698-b4ed-39e2-3cb9-dde0abc81db5.png)

*Images updated successfully* と表示されたらタグ付け完了です。[Done] をクリックします。

![スクリーンショット 2017-09-21 0.48.24.png](https://qiita-image-store.s3.amazonaws.com/0/79577/ac7b807e-eade-434d-f3b7-a94e04cb661d.png)

タグが左列に、画像が中央部分に表示されます。
上部の *Add images* をクリックして、他の画像も追加します。

![スクリーンショット 2017-09-21 1.08.58.png](https://qiita-image-store.s3.amazonaws.com/0/79577/77b98b17-1bae-3b0b-d00c-46f25aba1410.png)

次の工程で、エンジンに画像の学習をさせるのですが、その際には**1つの画像につき、タグが2個以上 または 1つのタグにつき、画像が5枚以上**である必要があるようです。
条件に気をつけて画像のアップロード、タグ付けを行ってください。

今回は JR中央線快速(Chuo-Ex), JR総武線(Chuo-Sobu), JR京浜東北線(Keihin-Tohoku), JR東海道本線(Tokaido), JR山手線(Yamanote), JR横須賀線(Yokosuka_SobuEx) の6種類の路線画像をアップロードしてタグ付けを行いました。

## 学習データを使って画像判定エンジンを構成する
画面上の [Train] をクリックすると、画像判定エンジンを構築するための学習が始まります。

![スクリーンショット 2017-09-21 1.15.47.png](https://qiita-image-store.s3.amazonaws.com/0/79577/7234e3ca-5126-0285-836c-ee2c27fe3ab9.png)

終了すると、学習結果が表示されます。
学習が完了すると、[Prediction URL]が表示されるようになります。
[Quick Test] をクリックすると、画像判定エンジンのテストを行うことができます。

![スクリーンショット 2017-09-21 1.16.27.png](https://qiita-image-store.s3.amazonaws.com/0/79577/8066726b-5113-0048-662f-442078e14991.png)

## 画像判定エンジンをテストする
*Quick Test* の画面でオンライン画像のURLを入力、またはローカル環境のテスト用画像 (学習データに使用していないもの) をアップロードすると、判定されたタグ (Tag) と信頼度 (Probability) が表示されます。

![スクリーンショット 2017-09-21 1.26.34.png](https://qiita-image-store.s3.amazonaws.com/0/79577/067714a2-7e36-13c4-6270-f86c65bdc221.png)

上のメニューの[PERFORMANCE]をクリックすると、画面上部に地球儀マークのリンクが表示されるので、それをクリックすると、APIでアクセスするための情報が表示されます。

![スクリーンショット 2017-09-21 1.27.41.png](https://qiita-image-store.s3.amazonaws.com/0/79577/c7513005-36a4-d2a2-66b9-0e4bc8176d31.png)

*Prediction URL*の画面で表示された URL に、 Content-type および Prediction-key を header にセット、Body に URL をバインドして、POST します。
Quick Test と同様に、JSON の *Prediction* 要素に判定されたタグ(Tag)と信頼度 (Probability)が表示されます。

以下の画像では、 [Postman](https://www.getpostman.com/) というツールを使ってPOSTリクエストを送っています。

![スクリーンショット 2017-09-21 1.48.43.png](https://qiita-image-store.s3.amazonaws.com/0/79577/dfba967b-cd7d-360c-2483-2b522116b29e.png)