「Custom Vision Service」と「Power Apps」でAIアプリを完成させる

2021年07月19日 11時00分更新

文● 池田英永、廣原花音／FIXER　編集● 大塚／TECH.ASCII.jp

4. Custom Vision ServiceとのAPI連携

　続いて、このアプリとCustom Vision ServiceをAPI連携させ、アプリで撮影した画像をCustom Vision Serviceに送信し、画像識別モデルによる判定結果などをCustom Vision Serviceから受け取る設定を行います。

①Custom Vision ServiceのAPIに連携するための前準備

　Custom Visionポータルにアクセスし、前回記事で作成したモデルの画面を開いて「PUBLISH」をクリックし、モデルを公開します。

　Power AppsとのAPI連携に必要な情報は、画面右上の歯車アイコンをクリックして表示される設定画面にある「Key」「Project Id」「Endpoint」と「Model name」です。このうち「Modal name」は、PUBLISHを行った後に入力画面が表示されます。

　なお、詳細については公式ドキュメント「Prediction API でモデルを使用する」に記載されています。こちらもぜひご参照ください！

必要な情報	説明
Key	このキーを知っている人だけが予測モデルのAPIを使用できる
Project Id	Custom Vision Serviceのどのプロジェクトを使うのか指定する
Endpoint	予測モデルにアクセスするためのURL
Model name	予測モデル名。PUBLISHしたあとに入力画面が表示される

②Power Appsとの連携（コネクタの設定）

　Power AppsにはCustom Vision ServiceとAPI連携するためのコネクタが用意されています。①で取得した情報を使用して、コネクタの設定を行います。

　まずはPower Appsの画面に戻り、メニューの「ビュー」→「データソース」→「データの追加」→「Custom Vison」を選択します。

　「＋データの追加」ボタンをクリックすると、以下のようなCustom Visonコネクタの設定画面が出てきます。Prediction Keyには先ほど取得したCustom Vision Serviceの「Key」の値を、同じくSite URLには「Endpoint」の値をコピー＆ペーストしてください。入力が完了したら「接続」をクリックします。

③ボタンに機能を設定

　「3. 画像挿入とボタンの追加」で作成したボタンの「OnSelect」プロパティとして、数式バーに以下の数式を入力します。なお「Project Id」「Model name」の部分には、それぞれCustom Vision Serviceで取得したテキストをコピー＆ペーストしてください。

プロパティ名	数式バー
On Select	Set(pic,Image1.Image); Set(predres,CustomVision.ClassifyImageV2("Project Id","Model name",pic).predictions)

　数式の意味を少し説明しておきましょう。ここでは2つの変数に「表示する画像」と「画像分類モデルによる分類結果」をそれぞれ格納しています。

　まず1つめのSet関数は、変数picの値として画像Image1.Imageを格納します。また、2つめのSet関数は、変数predresの値として、Custom Vision Serviceで作成した画像分類モデルの分類結果を格納しています。Custom Vision ServiceのClassifyImageV2関数は画像分類を実行するものですが、その実行時のパラメーターとして使用するプロジェクトのIDとモデル名、分類対象の画像（変数picに格納した画像）を指定しています。

　なお、詳細については公式ドキュメント「Custom Vision (Preview)」に記載されています。

④画像の分類結果を表示

　画像の分類結果を表示する「ラベル」を追加します。まず「挿入」メニュー→「ラベル」で、2つのラベルを画面に追加し、ラベルの「Text」プロパティの数式バーに、それぞれ以下の数式を入力します。

プロパティ名	数式バー
Text	"洋服の種類："& First(predres).tagName
Text	"識別精度："& First(predres).probability*100 & "%"

　ここも少し説明しておきましょう。まず、ダブルクォーテーション（""）で囲まれたテキスト（「洋服の種類：」「識別精度：」「%」）は、そのまま画面表示されます。

　続く「First(predres).tagName」では、分類結果のうち「最も確率が高いタグ名（衣服の分類）」を表示します。Custom Vision Serviceは、画像の識別結果を、確率の高い順に複数行の値として返します。First関数は、変数predresに格納された1番目（1行目）の値を取り出すので、最も確率が高い分類がラベルに表示されるわけです。同様に、「First(predres).probability*100」は1番目の識別精度を表示します（％表示に合わせるため100倍しています）。

　ここまでで出来たアプリを実行してみると、Custom Vision Serviceの識別結果をうまく表示することができました！

5. 洗い方の情報の表示

　この識別結果に基づいて、おすすめの洗い方を表示する部分も作りましょう。

　Power Appsのホーム画面を開き、メニューの「データ」→「テーブル」→「新しいテーブル」を選択してテーブルを追加します。今回はテーブル作成の詳しい説明は省きますので、前述した「画像識別AIを使って、アレルゲン特定アプリを作ってみた！」の記事を参考に作成してください。

　作成したテーブルには、以下の画像のように5種類（Tシャツ、シャツ、セーター、ジャケット、スウェット）の「衣服の種類」と、それに対応する「洗い方」、簡単な洗濯時の「一言POINT」を登録してあります。画像識別モデルが識別した衣類の種類によって、これらの情報も一緒に表示されるかたちです（なお、簡単なアプリなので衣類の生地などは考慮に入っていません。その点はご了解ください）。