こんにちは。今回はFlutterFlowでAIを使ったOCR的な機能を作ってみました。
具体的には、以下です。
食品表示の画像（品名や原材料、内容量、消費期限などの情報）を読み込む
AI（Google Gemini）を使って画像を解析
結果を表に表示する。
って感じです。
ではみていきたいと思います。
※プロンプトなどはこちらのサイトを参考にしました。とても参考になりました。
完成イメージ
こんなイメージです。登録した食品情報の画像から文字列を読みとり表示します。
Google Geminiとの接続
まずは今回使うAIのGeminiとの接続です。以下のSettingからGeminiをenableにしAPIキーをいれるだけでOK。FlutterFlowはChatGPTよりもGeminiとの接続の方がさらに簡単ですね。
Data Typeの設定
以下のようにData Typeを設定します。ここにあとでAIが読み込んだ食品情報を突っ込むためです。品名や原材料、内容量、消費期限とかですね。
UI作成
UIはこんな感じですね。画像を登録しOCR読み込みボタンを押したら下の一覧に値が表示される、としたいです。
Geminiのプロンプト
こちらのサイトのプロンプトを参考に書いてみました。https://zenn.dev/cloud_ace/articles/644958b57dc582
あなたはOCRを行うプログラムです。
食品のパッケージの画像から、「食品表示ラベル」と呼ばれる黒枠で囲われた表を特定し、食品表示ラベルの情報を出力例に従ってJSON形式で出力してください。
なお、JSONの項目と食品表示ラベルの表記は以下のような対応となっており、当てはまる項目が食品表示ラベルに無い場合はnullを出力してください。
【項目の対応】
・名称：name
・原材料名：ingredients
・内容量：amount
・保存方法：howtostore
・消費期限：expiration_date
・賞味期限：best_before
・製造者：manufacture
・販売者：vendor
【出力例】
{
"name": "納豆",
"ingredients": "大豆、納豆菌",
"amount": "45g×3",
"howtostore": "冷蔵庫（10℃以下）にて保存",
"expiration_date": "上面の下部記載",
"best_before": null,
"manufacture": "クラウドエース株式会社",
"vendor": null
}
参考になりました。ありがとうございました！
AI（Gemini）の呼び出し
まずはLocal Page Stateにさっき作ったDataTypeを作ります。food_infoという名前で設定しました。
次に、ボタンアクションからGeminiを呼び出します。Text From Imageを選択。さっき作ったプロンプトを設定しましょう。画像はUploaded File URLを設定すればOKです。
次に、AIからのoutputをupdate page stateでfood_infoに設定します。
この時、AI（gemini）からの返却値はstringなので、僕の場合はjsonに変換してdate typeにするようなcustom functionとか書いてやってました。
これだけです。簡単ですね！
Youtube動画で解説：FlutterFlowでAIを使ったOCR機能
動画でも解説しているので以下もどうぞ！
まとめ：FlutterFlowでAIを使ったOCR機能
結構簡単に作ることができました。FlutterFlowではAIの呼び出しが簡単に作れるのでAIを使ったアプリを作りやすいですね。カスタムファンクションも使えるので、データの加工が必要でもカスタムファンクションを書けばいいですし。その際にもAIに手伝ってもらえるので簡単です。
AIがどんどんできることが増えるので、それを使えるFlutterFlowのようなノーコード・ローコードツールはより便利になっていくかもですね。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。