SE の雑記

件名の通りですが、PowerApps の「画像の追加」のコントロールで PowerApps に読み込ませた画像を、Computer Visoin API で解析して、解析の結果の英語を Microsoft Translator で翻訳して表示してみようかと。

カメラの画像とは少し異なる処理を実装する必要がありそうでしたので。

カメラで撮った画像については、Data URI の形式で Flow に渡すことができたのですが、「画像の追加」で追加したイメージについては、次の画像のような、内部的なリソースの URI となるようで、これをそのまま、Computer Vision API に渡す方法がわからなかったのでちょっと細工しています。
(イメージコントロールのイメージの保持形式がこれなのでしょうね)

今回は次のような 3 種類のデータソースを使っています。

Azure BLOB Storage のリソースを追加しているのは、Flow から Computer Vision API をコールする際に、BLOB Storage にアップロードされたコンテンツとして渡すためです。
これらのデータソースを使用して、ボタンのアクションとしては、次のような内容を登録しています。

UpdateContext({FileName:GUID()});
AzureBlobStorage.CreateFile("/ocr", FileName, UploadedImage1.Image);
ClearCollect(ret, 'PowerAppsボタン-3'.Run(Concatenate("/ocr/", FileName)));
UpdateContext({Translate:MicrosoftTranslator.Translate(Text(First(First(ret).captions).text), "ja")})

 
PowerApps で GUID が生成できるようになったとのことだったので、BLOB にアップロードするファイル名のユニーク性に GUID を使っています。

GUID()関数で #PowerApps 上にGUIDを生成出来るようになりました https://t.co/0CYVSfPsWm

— よしだたいき | 高卒で????GAFAMエンジニア (@TaikiYoshidaJP) August 29, 2018

BLOB には「ocr」というコンテナーが作成されており、ボタンを押したタイミングで、BLOB にファイルがアップロードされます。

このファイルを Flow ないで Computer Vision API にかけるため、Flow にはコンテナーとファイルの名称を連結したものを渡しています。
Flow は次のようなものを作成しています。

最初に「Azure Blob Storage」の「パスによる BLOB コンテンツの取得」を使用して、BLOB にアップロードしたファイルを Flow 内で取得しています。

このアクションの BLOB パスについては「PowerApps から確認」を使用して、PowerApps から渡されたコンテナー名とファイル名が連結された文字列を使用しています。
次に「Computer Vision API」の「Describe Image」を使用して、BLOB から取得したイメージを解析します。

アップロードしたイメージを取得した内容を解析しますので「Image Source」は「Image Content」とし、「Image Content」は「ファイル コンテンツ」を指定します。
最後に「要求」の「応答」を使用して、PowerApps にデータを返します。

「本文」までの設定については、次のような内容とします。

Computer Vision API で解析された内容を本文としてつけるシンプルなものですね。


JSON スキーマについては次のような内容を指定しておきます。

{
    "type": "object",
    "properties": {
        "tags": {
            "type": "array"
        },
        "captions": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "text": {
                        "type": "string"
                    },
                    "confidence": {
                        "type": "number"
                    }
                },
                "required": [
                    "text",
                    "confidence"
                ]
            }
        }
    }
}

これで、Flow と PowerApps の連携は終わりです。
Flow の実行結果については、「ret」というコレクションに取得しているのですが、Computer Vision API の結果は英語になっているのですよね。
今回は、その結果を、Microsoft Translator にかけて、日本語に翻訳しています。

コレクションが多段になっている結果として受け取ったものを、ばらして「Translate」という変数に格納しています。
今回はテキストをキャンバスに貼り付けて、「モード:複数行」「表示モード:ビュー」のコントロールに「Translate 変数の内容を表示するようにしてみました。
これで、作業は完了です。
「画像の追加」コントロールで適当な画像を選択し、アクションを指定したボタンを押すことで、Flow と連携して画像を解析し、解析した結果を日本語訳した結果を表示させることができます。
8GB と解析してもらいたかった気がしないでもないですが、選択した画像が解析されて、結果は日本語で表示されていますね。

今回は「画像の追加」+「Describe Image」で実施していますが、「カメラ」+「OCR」で同じ仕組みを作ると、カメラで取得した画像を OCR にかけて、それを指定した言語に翻訳するというアプリもできるかと。