はじめに
先日Daiさんと一緒に主催をしているコミュニティ「奇想天外ビリビリ☆Power Apps同好会」で主催2人の登壇大会を開催しました。「主催者登壇大会～ワンランク上か？半ランク上か？～ – connpass」
その際に「ParseJSONとUDTのサンプル＋モデル駆動AI Builder取込みデモ」という内容で登壇しました。
今回はそのうちのAI Builderでモデル駆動型への画像解析・確認登録サンプルアプリについて記事にいたします。
アプリ動画・登壇動画
作成したサンプルの動画と当日登壇した際の動画をYouTubeへアップしております。こちらも併せてご参考ください。
アプリ（カスタムページ）概要紹介
こちらですが、モダンコントロールメインでカスタムページを使って作成しています。
細かい詳細は割愛して構成の概要と実装のポイントとなる部分に絞って解説します。
- カスタムページで作成
- デザインは自動生成アプリのようにヘッダー、左に画像取込み部分と右にフォーム部分
- 左サイドにはプロンプト部分と画像追加コントロール、AI Builderカスタムプロンプトを呼び出しボタン
- 右サイド上部にフォームとして取り込む部分（親の見積テーブル用）
- 右サイド下部は見積に紐づく明細を取り込む部分をギャラリーで作成（子の明細テーブル用）
左サイド
右サイド
AI Builder プロンプト部分
AI Builderのカスタムプロンプトも簡潔に作成しています。
アプリからプロンプト部分のテキストと、画像を渡します。出力形式はJSON形式で出力します。
出力内容の調整も可能ですがサンプルで取り込んだものからの結果をほぼそのまま利用するイメージです。
NOTE画像対応の場合モデルは「GPT-4o」の利用が必要です
プロンプト
アプリから渡すテキスト（Prompt)と画像データ(image)を入力パラメータへ定義
取込み用画像サンプル
取込み用のサンプル画像をサンプルデータにアップロードしてプロンプトをテストします。
抽出された結果が表示されます。出力をJSON形式にします。
JSON形式の調整も可能です。（サンプルのため商品区分と商品分類は省略しています）
この時点でちゃんと各項目と商品リスト部分（明細）が配列で設定されているのでいい感じです！
これでOKとして保存します。
アプリからカスタムプロンプトを呼び出し
アプリからAI Builderのカスタムプロンプト呼び出しは簡単です。
データソースの追加＞AIモデル配下から作成したプロンプトを選択します。
カスタムプロンプトの実行
左サイドに用意しているボタンにカスタムプロンプトを呼び出す処理を描きます。
以下の部分です。プロンプトの名前.Predict(引数１，引数２)で返却されたTextを取得する感じです。
※引数１に左サイドの上部プロンプト部分のテキスト、引数２に追加した画像を指定
Code//AI Builder カスタムプロンプト呼び出し部分
見積書取込みGPT.Predict(TextInputCanvas1.Value,UploadedImage1.Image).Text);
上記では、一旦Set関数でresという変数に値を保持しています。JSON文字列で返却された値です。
これを別の記事でも紹介した「UDT（ユーザー定義型）」を使って事前に定義した型（この例ではjsonDef）でParseJSONしています。
UDTを使ったParseJSON
こちらについてはUDTとParseJSONに関しての記事を書いていますので詳細はそちらをご参考ください。
以下のようにApp.FormulasにjsonDefという型を定義しています。
型はカスタムプロンプトで返却されるJSONに合わせた内容で定義します。
※見積Noや依頼日、合計金額などがあり、商品リストは配列型で各値を型定義
上記を見やすくした例です。JSON戻り値をもとにUDTを定義します。
はじめに 2024/10月の更新情報でYouTubeビデオ「Power Apps Pulse October 2024」を見ていたらユーザー定義型（UDT）が新たに追加されたことを確認しました！（現状はまだ試験段階です）さっそく試したところ、かなり使い勝手が良い機能と思いましたので記事にして...
上記のUDTを第2引数にParseJSONしてparseResという変数に格納しています。
以下のように型指定された内容となります。商品リストはテーブル型で定義されています。
商品リストの部分はコレクションに格納して利用します。取り込んだ商品リスト（明細）となっています。このコレクションを右サイドの明細ギャラリーのItemsに指定しています。
フォームやギャラリー（明細）の初期値に指定する
これで指定した形式で画像解析した結果が取得されました。
次に用意している取込み用のFormと明細用のギャラリーの値として指定します。（モダンコントロール使用）こちらは対応する列に応じて調整が必要なので適宜調整ください。以下サンプルでの設定です。
フォーム列部分の調整
合計金額はそのまま戻り値の合計金額をValueに指定
依頼日は英語形式でJSON取得されていたのでen形式での日付型にして指定
担当部門（選択肢）の初期値に指定 ※ []で囲み配列型に合わせている
取引先（参照列）の初期値に指定 ※Lookupして指定、[]で囲む。
→取込み時に半角スペースと半角()が全角（）となっていたのでプロンプト部分で調整
ギャラリー（明細部分）の調整
ギャラリーのItemsには取り込んだ商品リストを格納したコレクションを指定します。
取込む列を編集できるよう各列分のテキスト入力コントロールを用意してThisItem.列名を指定。上部はラベルで列名を指定。
上記の指定で取り込んだ商品リストがギャラリーに入ります。必要に応じて間違っている部分を編集します。ついでに削除ボタンも用意。
※以下のように取り込んだ値を修正できるようにしている
取り込み修正した値をテーブルへ反映
上記でGPT取込みボタンをクリックすると、カスタムプロンプトで画像解析した内容をJSON化し、対応するテーブルの列に設定され必要に応じて編集が出来るようになりました。
最後にこの内容でテーブルへ登録する用の処理を登録ボタンに実装します。ざっくり以下の感じです。
- ローディングを表示
- フォームをSubmitして親の見積テーブルに登録
- 登録したレコードのGUID（一意識別子）をLastSubmitから取得（登録後の遷移用）
- 明細用のギャラリーのアイテムをForAllでPatchして明細テーブルに登録（ギャラリー上で更新された値を設定、見積テーブルのリレーションにLastSubmitを指定）
- ローディングを解除してバナー表示。登録したレコードへ遷移するダイアログを表示
CodeSet(GPTMode,false);
Set(IsLoading,!IsLoading);
SubmitForm(Form1);
Set(recordGUID,Form1.LastSubmit.見積);
ForAll(Gallery1.AllItems,
Patch(明細,Defaults(明細),{見積:Form1.LastSubmit,商品名:TextInputCanvasName.Value,No:TextInputCanvasNo.Value,単価:Value(TextInputCanvastanka.Value),数量:Value(TextInputCanvassuu.Value),単位:If(TextInputCanvastani.Value=”本”, [@単位].本, [@単位].ケース)})
);
Set(IsLoading,!IsLoading);
Notify(“登録が完了しました。不足点はレコードから確認・調整してください。”,NotificationType.Success);
Concurrent(NewForm(Form1),Set(parseRes,Blank()),Clear(meisaiCol),Set(newrecord,true),Set(IsAdded,true));
新規作成レコードへボタンには以下を指定。
カスタムページではNavigateでレコードを指定すればそのフォーム表示へ遷移出来る
※編集モードでは動作しないので公開してから遷移することを確認します
コマンドバーでカスタムページを開く設定をする
上記まででAI Builderを使って画像を解析・編集取込みするカスタムページは完成ですが、さらに使い勝手を良くするためモデル駆動型アプリのコマンドバーを追加し、ダイアログ表示で使えるように調整しています。
この部分については以前記事にしている内容と同じですので割愛します。実装方法などは以下ご参考ください。
コマンドバー ② JavaScriptでダイアログでカスタムページを開く！
前回カスタムページの概要とコマンドバーの概要として記事を書きました。 今回はコマンドバーその②としてカスタムページをダイアログで開くサンプルについてご紹介します。...
JavaScriptで中央にダイアログで作成したカスタムページを開く設定のコマンドバーを追加
完成したアプリ（モデル駆動型とダイアログで開く画像解析取込みページ）
以下がモデル駆動型アプリに統合された完成形です。
上部のコマンドバー「GPT登録」をクリックするとカスタムページがダイアログで開きます
画像の見積ファイルを指定してGPT取込みを実行、数秒待つと取り込まれた内容がフォームおよびギャラリー部分に反映されます。
取り込んだ内容で不足している項目や誤った内容があれば調整します。
登録をクリックでテーブル（見積と明細）に登録されて、新規レコードへのリンクボタンが表示されます。
ボタンからレコードへ遷移すると以下のように取込んで登録がされています。
見積の項目と明細の部分もちゃんと入っています。
おわりに
今回はAI Buiderを使って画像解析した内容を取り込むデモをざっくりとご紹介しました。
ポイントとしては、カスタムプロンプトで画像解析してJSON出力、モデル駆動型アプリにカスタムページを実装し、UDTを活用したParseJSONの利用で項目設定、コマンドバーでダイアログ表示するなどでしょうか。
今回はモデル駆動型用にカスタムページとしましたが、SPOリストでのAI Builderでの画像解析取込みもキャンバスアプリで同じように出来ますのでその場合の参考ともなるかと思います。
細かくご紹介出来ていない部分も多いのですが、AI Builder(カスタムプロンプト）を使えば結構簡単な実装で画像解析から取り込みまで出来るんだー！と思っていただければ幸いです。画像解析からJSON形式への出力が簡単に出来る点がすごいですよねー。
モデル駆動型のカスタムページやコマンドバーについては以前の記事でご紹介しておりますので関連記事もぜひご参考ください。使いこなせばモデル駆動型へカスタムページをシームレスに統合して利用出来ます。それでは！
関連記事
はじめに この記事は、Power Apps Advent Calendar 2023 12月10日担当分の記事です。この後の記事も楽しみですねー。ぜひカレンダーの購読登録をお願いいたしますー！ 先日JPPC2023（Japan Power Platform Conference 2023 ）のメイン...
はじめに この記事は、Power Apps Advent Calendar 2023 12月15日担当分の記事です。(シリーズ2)この後の記事も楽しみですねー。ぜひカレンダーの購読登録をお願いいたしますー！ 先日JPPC2023（Japan Power Platform Conference...
コマンドバー ② JavaScriptでダイアログでカスタムページを開く！
前回カスタムページの概要とコマンドバーの概要として記事を書きました。 今回はコマンドバーその②としてカスタムページをダイアログで開くサンプルについてご紹介します。...
はじめに 2024/10月の更新情報でYouTubeビデオ「Power Apps Pulse October 2024」を見ていたらユーザー定義型（UDT）が新たに追加されたことを確認しました！（現状はまだ試験段階です）さっそく試したところ、かなり使い勝手が良い機能と思いましたので記事にして...
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント