こんにちは。ChatGPTがどんどん進化していくので日々キャッチアップが大変で追いつかずバタバタする日々をお過ごしの方も多いと思います（汗）

最近のアップデートでGPT4 with Visionというのが出て、画像解析のAPIを呼べるようになりました。これはすごい進化です。

そこで、今回はGPT4 with Visionを使って「料理の画像をアップロードするとAIが画像を解析しカロリーを教えてくれるアプリ」を作ってみようと思います。

AIカロリー計算アプリ：完成イメージ

AIカロリー計算アプリの完成イメージはこんな感じです。

画像を登録してAIに聞いてみると説明してくれる。シンプルですね。

GPT4 with Vision：モデル gpt-4-vision-preview

まずはgpt-4-vision-previewのモデルのAPIの使い方ですが、以下を参考に作っていきましょう。

https://platform.openai.com/docs/guides/vision?lang=curl

上記の例をもとに、以下のようにHeaderを設定し、

↓変数も定義して

↓Bodyを書き、変数を入れます。

APIの設定はこれでOKです。

UI側の作成

まずは以下のように、画像、テキストフィールド、ボタン、ラベルを配置します。

そしてまずは画像をクリックすると画像をアップロードできるようにupload media to firebaseを設定します。

さらに、アップロードしたファイルを画像に表示できるように以下のようにUploaded File URLを設定します。

次はボタンのアクションです。ここでExternalCall APIでさっき設定したGPT with VisionのAPIをコールします。

最後に、ラベルからAPIの結果を以下のように設定したら完了です。

これだけです！簡単ですね！

Youtubeで動画でAI画像解析アプリの解説

この記事ではだいぶ端折って説明しちゃってるので、詳しく知りたい方は動画もご覧ください。ご参考まで。

ノーコードFlutterFlowとGPTでの画像解析アプリ：まとめ

今回のGPTのアップデートでAPIから画像解析もできるようになり、AIの民主化が一層進んだ印象ですね。GPTsで誰でもプロンプトがつくれるようになりましたし、APIも充実してるのでノーコードでAIアプリを簡単に作れる時代になりつつあります。色々試してみたいですね。

※その他のノーコードの開発事例については以下もご覧ください。
【ノーコード事例】アプリ開発の成功事例16選！ツールの選び方も説明！

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。