"人工知能 API" Microsoft Azure Cognitive Services を使うと、画像分析を行うエンジンをノーコーディングで利用、作成できます。
Custom Vision Service は、ご自分で用意した画像をアップロードしてタグ付け、学習させることで、画像の分類 (Classification) や 画像に写っているモノの抽出 (Object Detection) を行うエンジンを簡単に作成でき、Web API として利用できます。また TensorFlow / CoreML / ONNX、または Docker コンテナー向けに Export して利用することもできます。
ここでは、Custom Vision で画像識別エンジンを作成し、Web アプリ (C# または HTML&JavaScript) からアクセスして利用する方法を紹介します。
アプリの動作は、オンラインアプリサンプル でご確認ください。
- 準備
- Custom Vision で画像識別エンジンを作成
- Web アプリから Custom Vision にアクセス
-
Azure サブスクリプション & Custom Vision のサービス申込
- Azure サブスクリプション の申し込みには マイクロソフトアカウントが必要です。
- Azure 無償サブスクリプション準備 の手順で、Azure サブスクリプションと Custom Vision のサブスクリプション申込を行います(無償以外の有償アカウント等でも問題ありません)。
-
CogServicesVisionSamples_201906 のディレクトリをローカルにダウンロードしておきます。[Clone or download] をクリックして、ZIP でダウンロードできます。
ブラウザーから Custom Vision のポータル (https://www.customvision.ai) にアクセスします。 [SIGN IN] をクリックし、Azure & Custom Vision の サブスクリプションが紐づいたアカウントでサインインします。
[NEW PROJECT] をクリックし、画像識別エンジンを新規に作成するダイアログを開きます。
Create New Project ダイアログで、Name にお好きな名前を入力します。Project Type は Classification を選択し、Classification は Multiclass を選択します。[Create Project] をクリックして、新規プロジェクトを作成します。
プロジェクトが作成されると詳細画面が表示されます。 Add Images をクリックして、画像識別エンジンに学習させる画像をアップロードするダイアログを開きます。
ダウンロードしたコンテンツの training_images\Dog フォルダーにある画像を選択します。まずは beagle フォルダーにある画像をすべて選択して [開く] をクリックします。
My Tags に Beagle と入力し、[Upload Files] をクリックします。
これで *Beagle のタグが付いた画像がアップロードできました。[Done] をクリックしてダイアログを閉じます。
同様に、他の画像もタグをつけてアップロードします。
| 画像フォルダー名 | タグ (犬の品種名) |
|---|---|
| beagle | ビーグル |
| bernese-mountain-dog | バーニーズマウンテンドッグ |
| chihuahua | チワワ |
| eskimo-dog | エスキモードッグ |
| german-shepherd | ジャーマンシェパード |
| golden-retriever | ゴールデンレトリバー |
| maltese-dog | マルチーズ |
画像のアップロードが終了したら、上部バーの Train をクリックして、画像をエンジンに学習させます。
Training Type は Fast Training を選択し、Train をクリックして学習させます。
学習が終了すると、Performance のページに学習結果が表示されます。このエンジンをテストするには、上部バーから Quick Test をクリックします。
Browse local files をクリックして、ダウンロードしたコンテンツの test_images\Dog フォルダーにある画像をひとつ選択します。画像の犬種が正しく識別されたら OK です。
必要に応じて、画像の追加→学習→テスト を繰り返します
Performance の画面で、上部バーから Publish をクリックして、Web API から利用できるように発行を行います。
Publish Name のダイアログで Publish をクリックして発行します。
Publish が完了すると Prediction URL が表示されるので、クリックして作成した画像判別エンジンにアクセスする URL の情報を表示します。
If you have an image fIle の下に表示されている URL と Prediction-Key の横に表示されている Prediction Key をコピーして、ローカルに保存しておきます。
ダウンロードしておいたコンテンツの samples\JavaScript フォルダーにあるソースを編集します。
scripts\customvision_script.js をコードエディターで開きます。
18,19 行目の predictionKey と endpoint の設定箇所をローカルに保存しておいた URL と Prediction Key で書き換えます。
var predictionKey = "ローカルに保存しておいたPrediction Key";
var endpoint = "ローカルに保存しておいたURL";
customvision_script.js を保存し、ブラウザーで開きます。
[ファイルを選択] をクリックして、test_images\Yoga フォルダーにある画像をひとつ選択します。画像が識別されて犬種情報が表示されたら完了です。
ダウンロードしておいたコンテンツの samples\CSharp フォルダーにあるソースを編集します。
CogServicesVisionSamples_201906.sln を Visual Studio で開きます。
Pages\CustomVisionClassification.cshtml.cs をクリックして開きます。
26~29 行目の predictionKey と endpoint の設定箇所をローカルに保存しておいた URL と Prediction Key で書き換えます。
private const string cvPredictionKey = "YOUR_CUSTOMVISION_PREDICTION_KEY";
private const string cvEndpoint = "https://YOUR_LOCATION.api.cognitive.microsoft.com";
private const string cvProjectId = "YOUR_CUSTOMVISION_PROJECTID";
private const string cvPublishName = "YOUR_CUSTOMVISION_PROJECT_PUBLISHNAME";
保存しておいた URL が以下のようになっている場合、
https://southcentralus.api.cognitive.microsoft.com/customvision/v3.0/Prediction/a0000000-0000-0000-aaaa-000000000000/classify/iterations/Iteration1/image
- YOUR_LOCATION -> southcentralus
- YOUR_CUSTOMVISION_PROJECTID -> a0000000-0000-0000-aaaa-000000000000
- YOUR_CUSTOMVISION_PROJECT_PUBLISHNAME -> Iteration1
となります。
上部バーの ▶ をクリックして、ビルド＆アプリの起動を行います。
ブラウザーが起動して、Web アプリの画面が表示されます。上部バーから Custom Vision Classification をクリックします。
Custom Vision Classification の画面で、[ファイルを選択] をクリックして、test_images\Dog フォルダーにある画像をひとつ選択します。[Analyze] をクリックすると画像が識別されて犬種情報が表示されたら完了です。
