Power Apps でカスタムプロンプトが使えるようになりました。
そこで今回は、以前から使用できるOCR機能と組み合わせて、データ入力を簡単にする方法をご紹介します。
データの入力項目が多い場合は役立つ方法ですので、最後まで見てもらえると嬉しいです！
目次
- 事前準備
- OCRアプリ作成
- カスタムプロンプト作成
- カスタムプロンプトをアプリで使用
- 動作確認
- 参考資料
事前準備
今回は、食べ物の商品の裏面から、栄養素を自動で入力するアプリを作成します。
まずは、データを入力するためのテーブルをDataverseに用意します。
Copilotを使ってテーブルを自動生成してもらいました。
Copilotで作った場合、サンプルデータも自動で用意してくれるのがありがたいですよね！
Copilotを使ったテーブル生成方法は以下を参考にしてください。
OCRアプリ作成
さっそくアプリを作っていきましょう。
OCR機能を使ったアプリ作成は、AIモデルから選ぶと簡単に作成することができます。
OCRの詳細は以下を参考にしてください。
「写真やPDFドキュメントからすべてのテキストを抽出する(OCR)」を選択し、「事前構築済みモデルを利用する」の「アプリ内で使う」を選択すると、アプリ開発画面へ遷移します。
試しに使用する画像を用意しておきます。
普段よく食べるタブレットを写真を撮影しました。
アプリ開発画面では既に写真をアップロードするためのコンポーネントが用意されているはずです。
そこでプレビュー画面を開き、先ほど撮影した写真を入れてみましょう。
その後にテキストラベルを用意し、Textに「TextRecognizer1.FullText」と入力するとOCRで読み取った全てのテキストが出力されます。
このフルテキストはカスタムプロンプトで使用するのでコピーしておきましょう。
カスタムプロンプト作成
アプリ開発画面とは別にPower Apps画面を立ち上げます。
プロンプト作成方法はこちらを参考にしました。
今度はAIプロンプトから「独自のプロンプトを作成する」を選択します。
右側にあるアイコンの中から一番上を選択すると入力データを追加できます。
名前を「OCRデータ」にします。
サンプルデータは先ほどコピーしたOCRデータをペーストしておきます。
入力データはプロンプトで「/」を入力すると選択可能です。
プロンプトの結果はアプリ内で使用するためJSON形式にします。
右側の上から3つ目のアイコンで出力形式を変えられます。
プロンプトは以下のように設定しました。
出力するJSONのキーは英語をおすすめします。
/OCRデータ から、商品名、エネルギー(kcal)、タンパク質(g)、脂質(g)、炭水化物(g)を正確に抜き出してJSON形式で出力してください。
(例)
{
"name": "おにぎり"
"energy": 200,
"protein": 10,
"lipid": 10,
"carbohydrate": 10
}
テストをすると期待通りの結果が得られました。
最後に名前をつけてカスタムプロンプトを保存します。
カスタムプロンプトをアプリで使用
OCRアプリに戻ります。
左にあるアイコンの「データ」から「データの追加」を選択します。
AIモデルから、先ほど作成したカスタムプロンプトを選択します。
出てこない場合は、AIモデル横の三点から「最新の情報に更新」を押してからもう一度探してみましょう！
TextRecognizer1のOnchengeで図のように変数をセットします。
ここでカスタムプロンプトを呼び出し、構造化された出力データを受け取っています。
この状態でプレビュー画面を開き、もう一度画像をアップロードしてみます。
OCRDataという変数の中身を見ると、カスタムプロンプトの結果をレコード形式でキャッチできているのがわかるかと思います。
最後にこの変数をフォームの中にセットします。
フォームを追加して各入力項目のDefault値をOCRDataのいずれかの値に設定します。
動作確認
アプリを動かしてみましょう。
今回はこちらの写真を使ってみます。
パッケージがよれていてOCR機能が正常に動くか怪しいですが、
正常に読み込めました。
たんぱく質の表記が漢字になっていましたが、生成AIがフォローしてくれるので多少の表記ゆれにも対応できそうな気がしています！
今回はフード商品の一括表示を題材にしましたが、幅広いシーンで応用が利くのではないでしょうか？
ローコードでOCRを使ったアプリができる点もおすすめポイントです！
皆さんも試しに使ってみてください！
参考資料