こんにちは。今回は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機能動画でも解説しているので以下もどうぞ！%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FkVUlVbnp1FY%3Fsi%3DYHwwl1opDlm7hQ7J%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eまとめ：FlutterFlowでAIを使ったOCR機能結構簡単に作ることができました。FlutterFlowではAIの呼び出しが簡単に作れるのでAIを使ったアプリを作りやすいですね。カスタムファンクションも使えるので、データの加工が必要でもカスタムファンクションを書けばいいですし。その際にもAIに手伝ってもらえるので簡単です。AIがどんどんできることが増えるので、それを使えるFlutterFlowのようなノーコード・ローコードツールはより便利になっていくかもですね。アプリ・Webサービスの開発の無料相談はこちらFlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。