LoginSignup
123
118

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

Last updated at Posted at 2024-05-17

GPT-4o凄すぎる!!

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

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

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

まずは見た目(Power Apps)から!

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

スクリーンショット 2024-05-17 231737.png

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

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

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

Power Automate

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

image.png

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

image.png

冒頭に紹介した記事をもとに、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は一定ですが、モデルとプロンプトは本文で定義します。
messagestextプロパティに注目すると

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
    }
)

ResponseGPT-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を!

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

image.png

123
118
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
123
118