How to integrate GPT-4-turbo with VISION into your Bubble.io app

A detailed tutorial on how to give your app the ability to interpret images using the new GPT4-turbo vision API. We'll build a simple app where you can upload images of a room and ask a question, and the app will respond with design tips.

00:00 What we’re going to build
00:56 UI setup
03:00 How to read Open AI’s API documentation
07:00 Installing the Bubble API connector
09:10 Reading the docs on using GPT-4 with vision
10:30 Implementing the Chat Completion API endpoint
16:40 Initialising your API call
17:27 Creating your API key on Open AI
20:06 Adding the workflows to the app
25:04 Debugging an API call
27:53 Testing the functionality
30:18 Conclusion

[secklerdaniel]

I just have to thank you for this video, for your humility and clarity in your explanations. Congratulations and continue doing this work that impacts the lives of many people.

[Chris-bfs]

What a great api tutorial. You have a real knack for delivering information in a clean & easy to absorb way. Thanks for that.

[theblackcvrd]

Very clear to understand. thank you. I am wondering if this can be used to identify video or if this is only for images.

[manuelhohmann]

This tutorial is super useful but sadly there are people who got no Idea of Bubble and in think its worth to take a couple of minutes to just create the page in a step by step. This would be nice for the future that other people learn even more and faster with this video. Thank you anyways for this fast walkthrough! :)

[TrentKingdom]

Amazing tutorial man!

I'd love for an updated one showing how you can store the data that was received from the Open API and grab that data on a different page. For example, I'm trying to build a app that takes in numbers in a screenshot and then saves the numbers as data!

[thomasoverly]

Thank you SO much for this video! You have a new lifetime subscriber and supporter, good sir.

[felipefabossi]

Nice video! Tks for that.
I watching from Brazil!!!

[fheralanis]

Thank you so much for your video! As an update to the workflow, in step 2, it is no longer necessary to format with json-safe. At least it wasn't for me

[kapsiji]

I've started exploring Bubble and managed to follow the setup steps in this video but I'm encountering an issue at the final stage. I've organized my page with a group element that contains a text field, but I can't seem to display the API response within it. I'm trying to figure out where I might be going wrong.

[moshplanner]

This video helped me A LOT! Are you able to explain how to do it if I have multiple inputs (each input is a question about the image) and then send the results to an email that includes the uploaded image?

[MM-whrc]

What about uploading excel files and connect to a custom GPT. I have all day struggling with those 2.

[costassiavelis]

Hey any less advantage in using the zerocode plugin?

[Baraah-xq]

I encountered a problem while setting up your call call, an initial response to the APS destination, at 18 minutes