生成AI × Power Appsアプリを高速で開発する_画像処理シナリオ編

はじめに

みなさん、こんにちは。日本マイクロソフトの佐々木です。

少し期間が空いてしまいましたが、最近お客様と会話していく中で、人気のソリューションについてお話したいと思います。

AI BuilderでGPT4oの画像処理が間もなく利用できる予定です。
そちらもGA次第紹介したいと思います！

生成AIアプリを高速で開発したい

Copilot for Microsoft365が登場したことで、エンドユーザーが身近に生成AIを活用する機会は増えてきたかと思います。

一方で、個別具体的な業務に適用するための最適なソリューションがPower Apps×生成AIです。
市民開発・ローコードで実現する業務特化生成AIアプリを開発・活用することが可能となります。

紹介するシナリオ

本日の記事で紹介するのは、GPT4oを利用した画像処理シナリオになります。

GPT4oはマルチモーダルのため、様々な入力形式（画像、音声、テキスト）に対応可能となります。

GPT4oを利用した画像処理シナリオ例

GPT4oを利用することでプロンプト次第では、あらゆる画像処理シナリオに対応可能となります。
これまではAI OCRソリューションを利用して、シナリオ・帳票ごとに事前学習や定義づけを大量にしていたところ、GPT4oでは画像入力とプロンプトで簡単に対応できるようになりました。

検証してみる

いくつかシナリオごとに帳票を用意して検証してみました。
これらはほとんどプロンプトの変更のみで正確に読み取り可能でしたので、1つ開発できればプロンプトの変更のみで横展開は容易かと思います。

画像処理の定番である、名刺、請求書、領収書、契約書などはもちろん正確に読み取り可能です。

他には生産現場（工場）で活用できる画像処理の適用例もいくつか紹介します。
ちょっと応用系ですと、生産管理システム（サンプル）のUIを写メでパシャリととって、それを生成AIに入力とし、特定の項目のみ抽出させることも可能です。
画面下部にある、計画台数、実績台数、進捗台数、稼働率などGPT4oが正確に抽出していることが分かります。

ほかにも、手書きの作業日報などにも応用できます。

活用例

生産現場などでの活用を例にしてイメージしたいと思います。
現場にある出力機能のないレガシーシステムやアナログ計器、作業日報やホワイトボードの情報などを生成AIでデータ化し、データとしてDataverseに格納し、データ利活用を図るようなソリューションとして最適かと思います。

Power Platformで開発する

Azure OpenAIのリソースを用意する

GPT4oはAzure OpenAI上に用意します。
こちらのステップは割愛しますが、慣れた方であればすぐにモデルのデプロイができると思います。

エンドポイントの情報やAPIキーなどPower Platformから呼び出すための情報をメモしておきます。

Power Automateからテストコールする

試しにPower AutomateからGPT4oのAPIをコールしてみます。
まずはレスポンスが返ってくるかだけテストしてみます。
※Azure側で閉域設定をしているなどネットワーク起因でこちらのコールが正常に完了しない場合があります。

HTTPリクエストの本文

{
  "messages": [
    {
      "role": "system",
      "content": "あなたはAIアシスタントです。"
    },
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "@{triggerBody()['text']}"
        }
      ]
    }
  ],
  "max_tokens": 800,
  "temperature": 0.7
}

問題なくレスポンスが返ってきました。

応答

{
  "choices": [
  ・・・
      "message": {
        "content": "こんにちは！今日はどのようなお手伝いをしましょうか？",
        "role": "assistant"
      }
・・・

Power Automateフローを作成する

正常にテストできましたら、画像処理用のプロンプトに書き換えてあげたいと思います。
画像を送付するには、messagesプロパティを以下の様に指定します。

また、Power AppsアプリからPower Automateのフローを呼び出したいため、トリガーはPower Apps（V2）に変更し、画像説明用のTextと画像用の引数を設定します。

画像説明用のAPI

{
  "messages": [
    {
      "role": "system",
      "content": "画像について説明するアシスタントです。"
    },
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "@{triggerBody()['text']}"
        },
        {
          "type": "image_url",
          "image_url": {
            "url": "@{triggerBody()['text_1']}",
            "detail": "high"
          }
        }
      ]
    }
  ],
  "max_tokens": 800,
  "temperature": 0.7
}

下記のGPT4oの画像処理用のAPIの説明にある通り、入力される画像はHTTP または HTTPS URL、または base-64 でエンコードされた画像である必要があります。

Power Apps側の処理で検討したいのですが、アプリ内でBase64形式にエンコードする方法はいくつかあります。
・カメラコントロールで撮影
・画像アップロードコントロールで撮影
これらの画像をBase64形式にエンコードして、引数としてGPT4o側に渡す

また、Blobストレージなどを利用してパブリックにアクセスできるURLを作成してもいいかと思います。

最後にPower Appsへ返答アクションを配置し、HTTPコールアクションの結果を本文とします。

JSON解析のアクションなどでGPTからの返答を取り扱いしやすい形式にしてあげた方がいいですが、今回は割愛します。

Power Appsアプリを作成する

今回は最低限の機能をもったアプリを作成していきたいと思います。

1. カメラで画像を撮影
2. Base64形式にエンコード
3. GPT4oをコール
4. 結果を確認

カメラコントロールの配置

今回はPower Appsアプリから画像を撮影したいと思います。
Power Appsにはカメラコントロールがあるため、そちらを利用します。
画質や端末に依存する可能性もあるため、その場合は別のアプローチも検討してください。

画像コントロールを配置して、撮影した画像を確認してみましょう。

Camera1.Photo

Base64形式にエンコード

カメラコントロールのOnSelectプロパティを下記のようにします。

Set(pic, Substitute(JSON(Camera1.Photo, JSONFormat.IncludeBinaryData), """", ""))

下記がそれぞれの関数の説明です。
GPT4oの画像

・Set(pic, ...)
Set関数は、指定した変数（ここではpic）に値を代入します。この場合、カメラコントロールで撮影した写真を変数picに格納しています。

・JSON(Camera1.Photo, JSONFormat.IncludeBinaryData)
JSON関数は、指定されたデータ（ここではCamera1.Photo、カメラコントロールの写真）をJSON形式に変換します。
JSONFormat.IncludeBinaryData は、バイナリデータ（この場合は画像データ）をJSON出力に含めるよう指定しています。これにより、写真がBase64形式でエンコードされてJSONに含まれます。

・Substitute(..., """", "")
Substitute関数は、指定したテキスト内の特定の文字列を別の文字列に置き換えます。
この場合、"""", ""という指定は、二重引用符 """ を空文字列 "" に置き換えています。JSONエンコードされた文字列にはエスケープされた引用符が含まれる場合があり、これを取り除くために使われています。

最後にテキストラベルコントロールを配置し、Base64形式にエンコードされた画像データを表示してみましょう。

GPT4oをコール

ボタンコントロールを配置し、OnSelectプロパティに下記の関数を入力します。

Set(Result, FlowName.Run(
    Text,
    pic
    ).result
);

Textという変数には画像説明用のプロンプトが格納されています。

この画像を説明してください。なお出力はJSONのフォーマットのみ出力してください。

##抽出項目
計画台数
実績台数
進捗台数
稼働率

Json形式だけを必ず出力してください

結果の確認

GPT4oのレスポンスをResultという変数に格納しているため、テキストラベルコントロールを配置し、表示します。
※Power AutomateでParseJSON（JSON解析）など文字列処理をしていない場合、返答内容が全文返ってくると思いますので、適切に処理してあげましょう。

コレクションなどで処理してあげたり、生産計画と予実判断させることでデータ分析にも活用することが可能です！

おわりに

以上でGPT4oをPower Appsアプリから利用する方法についてご紹介しました。
プロンプト次第で様々なシナリオに適応可能ですので、ぜひお試しください！
AI BuilderでGPT4oの画像処理が間もなく利用できる予定です。そちらもお楽しみに！！