Power Apps & GPT-4oを使って超高速で画像解析アプリを作る！

GPT-4o凄すぎる！！

出たときから騒ぎまくっていましたが、GPT-4oの登場で興奮しっぱなしの私です。

先日こちらのQiitaの記事を拝読し、「Power Appsでやったらどうなるだろう🧐」という思いが抑えられず、作ってみたら超高速で画像解析アプリが作成できました！

あらためて記事を出してくださったことに感謝いたします！
まずは初弾！ということでGPT-4oを使って、
Power Appsで画像解析アプリを作成する方法 を書いていきます！

まずは見た目（Power Apps）から！

まずはPower Appsでサクっと画面を作ります！
PowerPoint感覚で作れることが強みですからね！

最低限のもので構成しています。

画面
├─ ScreenContainer - スクリーン全体
├─ HeaderContainer
│  └─ Header - ヘッダーコントロール
├─ BottomContainer
│  ├─ SidebarContainer
│  │  └─ Badge - バッジコントロール
│  ├─ InfoContainer
│  │  ├─ InfoButton - インフォボタン
│  │  └─ lblInfo - インフォボタンの隣のラベル Add Picture for GPT-4o
│  ├─ ImageContainer
│  │  ├─ AddPicture - 画像の追加
│  │  └─ Image - イメージコントロール
│  └─ ButtonContainer
│     └─ Button - ボタンコントロール
└─ MainContainer
   └─ Container
      ├─ LogoImage - ドーナツ🍩のロゴ
      ├─ MainLabel - テキストラベル
      └─ TextInput - 結果出力用のテキスト入力

機能はButtonのOnSelectプロパティに、Power Automateから値を取得するのみ。
※ 詳細は後述

Power Automate

GPT-4oのAPIを呼び出すことが目的です。

ポイントになるのは、APIを呼び出すためのBodyの作り方です。
私は作成アクションで定義をしています。

冒頭に紹介した記事をもとに、API用のBodyを組み立てます。

OpenAIの資料を見ると、プロンプトの中で戻り値を定義できることがわかります。

作成

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "system",
      "content": "提供された画像を分析し、被写体が何か推定してください。"
    },
    {
      "role": "user",
      "content": [
        {
          "type": "image_url",
          "image_url": {
            "url": "@{triggerBody()?['text']}",
            "detail": "high"
          }
        },
        {
          "type": "text",
          "text": "画像から何が書かれているか推定してください。回答は日本語でしてください。## JSON Schema {\"type\": \"object\",\"properties\": { \"observe\": {\"type\": \"string\", \"description\": \"被写体についての推論\"}},\"required\": [\"observe\"],}"
        }
      ]
    }
  ],
  "temperature": 1,
  "response_format": {
    "type": "json_object"
  }
}

GPT-4oを呼び出すURIは一定ですが、モデルとプロンプトは本文で定義します。
messagesのtextプロパティに注目すると

messages[1]?[content][1]

画像から何が書かれているか推定してください。回答は日本語でしてください。## JSON Schema {\"type\": \"object\",\"properties\": { \"observe\": {\"type\": \"string\", \"description\": \"被写体についての推論\"}},\"required\": [\"observe\"],}

上記の中で、JSONのShemaを定義して戻り値を設定しています。
つまり、この文章によって、機能をバインドできているということです！

あとは、解析のための画像をどう渡すかが課題になります。
今回はPower Apps側で、画像をJSON文字列として評価、JSON文字列をPower Automateへ渡し、GPT-4oに渡す方法を採用しました。

Power Appsからbase64文字列でPower Automateに渡す

とりあえずbase64文字列でPower Automateに渡すと手っ取り早いということがわかったので、界隈で著名である方の記事を参考に、Power AppsのボタンコントロールのOnSelectに仕込みをいれます。

OnSelect

UpdateContext(
    {Response:'GPT-4o-Image-observe'.Run(
        Substitute(
            JSON(Image.Image,JSONFormat.IncludeBinaryData),
            """","")
        ).response
    }
)

ResponseにGPT-4oの戻り値を格納します。

1. JSON関数でbase64文字列をPower Appsで評価
2. Power Automateへ渡す

JSONFormat.IncludeBinaryDataの引数が肝です。

結果には、イメージ、ビデオ、およびオーディオ クリップ列が含まれます。 この形式は、結果のサイズが大幅に増加し、アプリのパフォーマンスが低下する可能性があります。

Microsoft learnより

Substituteで不要な文字列を消さないと、エラーになります。

あらためてPower Automateへ！

Apps側で調整ができれば、作成アクションは前述のとおりです！

作成

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "system",
      "content": "提供された画像を分析し、被写体が何か推定してください。"
    },
    {
      "role": "user",
      "content": [
        {
          "type": "image_url",
          "image_url": {
            "url": "@{triggerBody()?['text']}",
            "detail": "high"
          }
        },
        {
          "type": "text",
          "text": "画像から何が書かれているか推定してください。回答は日本語でしてください。## JSON Schema {\"type\": \"object\",\"properties\": { \"observe\": {\"type\": \"string\", \"description\": \"被写体についての推論\"}},\"required\": [\"observe\"],}"
        }
      ]
    }
  ],
  "temperature": 1,
  "response_format": {
    "type": "json_object"
  }
}

■ HTTP

キー	値
URI	https://api.openai.com/v1/chat/completions
Method	POST

ヘッダー

キー	値
Content-Type	application/json
Authorization	Bearer @{outputs('シークレットの取得')?['body/value']}

例では、Azure Key Vaultにて、APIのエンドポイントやキーを格納しています。

Bodyは前述の作成アクションで作成したJSONです！

戻り値は

@{body('HTTPアクションの名前')?['observe']}

上記で取得できます！

おわりに

30分もかからずに画像解析アプリができました！！
精度も高い！

まだまだ向上の余地あり！ですので続報にご期待ください！
よいPower & AI Lifeを！

読んでくださり、ありがとうございました！！