"人工知能 API" Microsoft Azure Cognitive Services や Microsoft Azure Applied AI Services を使うと、画像分析を行うエンジンをノーコーディングで利用、作成できます。
Form Recognizer は帳票、IDなどの定型フォーム画像を読み取るエンジンを作成、すぐに Web API で利用できるサービスです。
ここでは、Form Recognizer を Web アプリ (C# または HTML&JavaScript) からアクセスして、Id カード画像から情報を読み取る方法を紹介します。
アプリの動作は、オンラインアプリサンプル (運転免許証読み取り) でご確認ください。
- Azure サブスクリプション & Face API のサービス申込
- Azure サブスクリプション の申し込みには マイクロソフトアカウントが必要です。
- Azure 無償サブスクリプション準備 の手順で、Azure サブスクリプション申込を行います(無償以外の有償アカウント等でも問題ありません)。
- Cognitive Services サブスクリプション準備 の手順で、Form Recognizer および Azure Storage のサービス作成を行います。
- Form Recognizer のエンドポイント(Rest API アクセス URL)と、アクセスキー をローカルに保存しておきます。
- Azure Storage に BLOB コンテナーを作成し、SAS URL をローカルに保存しておきます。
- CogServicesVisionSamples のディレクトリをローカルにダウンロードしておきます。[Clone or download] をクリックして、ZIP でダウンロードできます。
Form Recognizer には、カスタムモデル作成やテストを行う GUI ツールである Form OCR Test Tool が用意されています。これを用いてプリセットモデルのテスト、およびカスタムモデルの作成とテストを行います。
Form OCR Test Tool (https://fott-2-1.azurewebsites.net/) をブラウザーで開きます。Use prebuilt model をクリックします。
プリセットモデルのテスト画面が表示されます。右列に分析したい画像や Form Recognizer のサービス情報を設定します。
先に 2.Get Prediction の欄にForm Recognizer のサービス情報を以下の通り入力します。
- Form recognizer service endpoint: ローカルに保存しておいた Form Recognizer のエンドポイント
- API Key: ローカルに保存しておいた Form Recognizer のサービスキー
- Form Type: 今回は Id を選択
1.Choose file for analysis の欄で分析する画像を選択します。 ローカルにダウンロードしておいたディレクトリーから test_images\Form\US_driverslicense_test.jpg を選択すると、画面に表示されます。[Run Analysis] をクリックします。
画像をプリセットモデルで分析した読み取り結果が表示されることを確認してください。
Azure Storage (BLOB コンテナー) に学習データをアップロードします。 Azure Portal をブラウザーで開き、予め作成しておいた Azure Storage を開きます。左列メニューバーから Storage Explorer をクリックします。
作成済みの BLOB コンテナー (ここでは form-training) を選択します。アップロード をクリックします。
画面右側に表示される BLOB のアップロード ペインの ファイルの選択 をクリックして、ローカルに保存したディレクトリーから training_images\Form 配下の画像ファイルを全て選択し、アップロードします。
Form OCR Test Tool (https://fott-2-1.azurewebsites.net/) をブラウザーで開きます。左端のメニューから Connections (コンセントのマーク) をクリックします。
Connections バーにある ＋ をクリックして、Blob コンテナーへの接続を追加しします。
以下の項目を入力し、[Save Connection] をクリックして保存します。
- Display name: ご自身で判別しやすい名前を入力
- Provider: Azure blob container (デフォルト)
- SAS URL: ローカルに保存しておいた BLOB コンテナーの SAS URL
Connection が保存されたら、左端のメニューから Home (家のマーク) をクリックしてトップページに戻ります。
Form OCR Test Tool のトップ画面で、今度は Use Custom ... をクリックします。
New Project をクリックして、新規にカスタムモデルを作成します。
カスタムモデルの作成に必要な以下の情報を選択 & 入力し、[Save Project] をクリックして保存します。
- Display name: ご自身で判別しやすい名前を入力
- Security token: Generate New Security Token (デフォルト)
- Source connection: 前の手順で作成した connection
- Form Recognizer Service URI: ローカルに保存しておいた Form Recognizer のエンドポイント
- API key: ローカルに保存しておいた Form Recognizer のサービスキー
Tag Editor の画面に遷移します。Blob コンテナーにアップロードしておいた学習データが読み込まれます。画面右側の Tags ペインから検出したい情報のタグ付けを行います。
add new tag に name と入力します。
中央に表示されている画像から名前の文字をクリックして選択し (選択済みは緑色で表示、再度クリックすると選択解除)、タグ一覧の name をクリックします。
画像上で選択した文字がタグの下に表示されていれば OK です。
同様に、add new tag に birthday と入力してタグを追加します。画像から生年月日の文字を選択して、birtyday をクリック、情報を紐づけます。
address と expiration というタグも追加し、住所や有効期限の文字情報を紐付けます。
他の画像も同じ手順で情報をタグ付けします。1枚目の画像のときに作成したタグが表示されるので、該当する文字情報を選択して紐付けます。
カスタムモデルを作成うするためには 5 枚以上の同一のフォーム画像が必要です。
画像のタグ付けが終了したら、データを学習させます。左端のメニューから Train (上から 3 つ目) をクリックして開きます。右側に表示される Train a new model ペインで、Model name に識別しやすいお好きな名前 (ここでは Iteration1) を入力し、[Train] をクリックして学習させます。
しばらくして Train Result が表示されたら学習は完了です。 表示される Model ID をコピーしてローカルに保存しておきます。
左端のメニューから Analyze (上から 5 つ目) をクリックして開きます。 右側のペインで 1.Choose an image for analyze with の欄で分析する画像を選択します。 ローカルにダウンロードしておいたディレクトリーから test_images\Form\JP_driverslicense_test.jpg を選択します。
[Run Analysis] をクリックすると、学習させたカスタムモデルで分析した読み取り結果が表示されます。
ダウンロードしておいたコンテンツの samples\JavaScript フォルダーにあるソースを編集します。
scripts\formrecognizer_script.js をコードエディターで開きます。
18~19, 23 行目の frKey と frEndpoint、frModelId の設定箇所をローカルに保存しておいた API Key と URL、Model Id で書き換えます。
// Form Recognizer の Subscription Key と URL をセット
// Azure Portal 画面に表示される URL および Key をコピーしてください
var subscriptionKey = "YOUR_SUBSCRIPTION_KEY";
var endpoint = "https://YOUR_LOCATION.api.cognitive.microsoft.com/";
// Form Recognizer の Model Id をセット
// FOTT ツールに表示される Model Id をコピーしてください
var modelId = "YOUR_MODEL_ID";formrecognizer_script.js を保存し、FormRecognizer.html をブラウザーで開きます。
[ファイルを選択] をクリックして、test_images\Form フォルダーにある画像をひとつ選択します。[Analyze] をクリックすると読み取り結果が表示されたら完了です。
ダウンロードしておいたコンテンツの samples\CSharp フォルダーにあるソースを編集します。
CogServicesVisionSamples_202107.sln を Visual Studio で開きます。
Pages\FormRecognition.cshtml.cs をクリックして開きます。
26~28 行目の frKey と frEndpoint、frModelId の設定箇所をローカルに保存しておいた API Key と URL、Model Id で書き換えます。
// Setting for using FormRecognizer
private const string frKey = "YOUR_FORMRECOGNIZER_KEY";
private const string frEndpoint = "https://YOUR_LOCATION.api.cognitive.microsoft.com";
private const string frModelId = "YOUR_FORMRECOGNIZER_MODELID";上部バーの ▶ をクリックして、ビルド＆アプリの起動を行います。
ブラウザーが起動して、Web アプリの画面が表示されます。上部バーから Form Recognizer (ID) をクリックします。
Form Recognizer の画面で、[ファイルを選択] をクリックして、test_images\Form フォルダーにある画像をひとつ選択します。[Analyze] をクリックすると読み取り結果が表示されたら完了です。
