#13 PowerApps アプリ で撮影した画像を FaceAPI で感情分析してみました（累積分析）

概要

PowerApps のカメラで撮影した画像を API Management 経由で FaceAPI に転送し、その画像の分析結果「感情、性別、年齢」を PoweApps に表示するアプリの実装手順を数回に分け記載しています。また、並行して、その分析結果を CosmosDB に保存しておき、PowerApps からの累積情報取得リクエストにより累積クエリ結果「感情分布、性別分布」を PowerApps に返し、円グラフ表示する機能の実装手順も複数回に分け記載します。なお、PowerApp の画面作成については省略し、APIコール部分とその戻り値の部分に焦点をあてて記載しています。
本アプリの全体構成は下図となります。

最終回（第13回目）の構成箇所は下図の部分となります。

最終回である第13回目は、第６回 と同様に、PowerAppsアプリケーション から 前回 作成した Flow -> PowerAppsカスタムコネクタ -> API Management（以下、APIM） -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を取得し、円グラフ表示できることを確認します。

---

実行環境

macOS Big Sur 11.3
Python 3.8.3

---

PowerAppsアプリケーション構成

画面構成とそれぞれのオブジェクトは以下となります。

分析情報の感情毎の件数は、コレクション「Emotion2021」に保存され、性別毎の件数は、コレクション「Gender2021」に保存されます。

---

PowerAppsアプリケーションの仕様

PowerAppsアプリケーションの簡単な仕様は以下となります。
最新情報「Button5」を押すと、Flowがコールされ、その結果の感情毎の件数がコレクション「Emotion2021」に、性別毎の件数がコレクション「Gender2021」に保存されます。
コレクション「Emotion2021」は、円グラフ「CompositePieChat2.PieChat2.Items」に紐付けされ、「Labels」に「感」、「Series」に「値」として表示されます。
コレクション「Gender2021」は、円グラフ「CompositePieChat3.PieChat3.Items」に紐付けされ、「Labels」に「性」、「Series」に「値」として表示されます。

ボタン「Button5（最新情報）」の「OnSelect」には以下の設定をおこないます。

Clear(Emotion2021);
Clear(Gender2021);
UpdateContext({flow_res: iTuruFlowFaceCosmos.Run()});
Collect(Emotion2021, flow_res.emo_graph);
Collect(Gender2021, flow_res.gen_graph)

---

Flowコール

前述の

UpdateContext({flow_res: iTuruFlowFaceCosmos.Run()});

において、「iTuruFlowFaceCosmos.Run()」により Flow がコールされます。　Flowの戻り値は「flow_res」に返されます。

Collect(Emotion2021, flow_res.emo_graph);
Collect(Gender2021, flow_res.gen_graph)

戻り値の「flow_res」はArray型のJSON形式ですので、コレクション「Emotion2021」へは「flow_res.emo_graph」、「Gender2021」へは「flow_res.gen_graph」としてその結果を反映させます。

---

PowerAppsアプリケーションのテスト

親画面の「累積情報」ボタンを押すことにより「感情分析 累積情報」画面に切り替わります。画面下部にある「最新情報」ボタンを押すと、感情毎の件数 と 性別毎の件数の円グラフが表示されます。

---

最後に

全13回にわたった「PowerApps アプリ で撮影した画像を FaceAPI で感情分析してみました」の実装手順のサマリは以下となります。

• 第１回
  • PowerAppアプリでのカメラ画像の書式確認と、その画像書式によるFaceAPIの感情分析をローカルプログラムで確認
• 第２回
  • Azure Functions -> FaceAPI での感情分析
• 第３回
  • API Management -> Azure Functions -> FaceAPI での感情分析
• 第４回
  • PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析
• 第５回
  • Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析
• 第６回
  • PowerAppsアプリ -> Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析、その結果をPowerAppsアプリに表示
• 第７回
  • 感情分析結果を CosmosDB への登録と累積されている感情分析の取得をローカルプログラムで確認
• 第８回
  • 第２回で作成した Azure Function に CosmosDBへのデータ登録機能を追加
• 第９回
  • 新たに Azure Functions を作成し、Azure Functions -> ConmosDB での感情分析の取得
• 第10回
  • API Management -> Azure Functions -> ConmosDB での感情分析の取得
• 第11回
  • PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得
• 第12回
  • Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得
• 第13回
  • PowerAppsアプリ -> Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得、その取得結果をPowerAppsアプリに円グラフ表示
    

---

参考情報

以下の情報を参考にさせていただきました。感謝申し上げます。
Microsoft (Office365) PowerAppsからFlowに、マップデータを渡して、配列データを受け取る方法
PowerAppsとflowで入力チェック処理
#PowerApps のJSON関数を使ったFlowへのパラメータ渡し
PowerApps から Flow を呼び出して応答をコレクションとして受け取る際の注意点