Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

OpenAI & Bubble Formating Tips & Tricks

In this Bubble tutorial we demonstrate some tips and tricks that will help you understand and format your prompts and responses when using the OpenAI ChatGPT API (gpt-3.5-turbo). This video draws on demonstrations in our Split by video and highlights several different approachs to extracting text from your OpenAI response including extracting multiple items.

I want to demonstrate a few tips and tricks for working with OpenAI, text generation, ChatGPT, et cetera, with your Bubble app. And I'm going to be focusing on different ways that you could format and structure data, as it's a recurring theme in some coaching sessions I've done over the last couple of weeks where other Bubble app creators are trying to get responses back in a particular format, "how do you extract them?" That thing.

So I'm going to start off with something very simple. Although we are diving into the deep end with the OpenAI text generation API, do check out our previous videos on the topic to get to this point. But I'm in a Bubble. I've got the API connected set up ready to make a call to the new chat endpoint. I've got this all correctly formatted for the GPT-3.5-turbo. And what I mean by simple is the system command is message. The system message is you are an SEO expert in copyright. I'll just say copywriter. Write through H1. So that's your headlines for a page for a SaaS app. And if I click Initialize call, you see I get my response.

JSON syntax and punctuation

And to have a look at the actual data, I'm going to scroll down, look at the raw data. And so this is what OpenAI reply with. And I'm going to copy everything in between the first set of speech marks. And I've got a handy app here which escapes the JSON. So when we look at what OpenAI has actually given me, you see that there's lots of these back slashes. And that's a way of, in JSON, communicating that the speech mark here is not to be treated as part of the code. You'll notice that JSON's call and response all uses speech marks to adapt to identify fields and inputs or parameters and inputs. And so so that we don't get the JSON syntax confused or mixed up, it's escaped when it's returned. And so this app basically is showing me what Bubble would actually save to the database. In fact, I failed to copy the last speech marks, so I had that in there. There we go. There's two speech marks there. This is what Bubble would actually save to the database. If I save message content to the database.

So how would I go about splitting this up?

Split by

Because perhaps I want to just store three different entries into my database for each of the responses here. So one way I could do that is to use Split By. We've got another video on this, but simply put Split By means that I can say, what would I like to split my elements, my text up by? And I would use Split By a line break here. So that if you think about where there are line breaks in this piece of text, there's one there, two, three. So if I did Split By and I said show first item, it's going to show this whole line. If I did Split By, second item, it's going to show this whole line. I could then go in and do a Split By based on the speech marks, and that way isolate out just the piece of text I want to say to my database.

But what if I want to be more prescriptive about how Bubble returns the data? For example, instead of saying, Write three H1 tags for a SaaS app, I'm going to say, Write using the following format. And now I'm going to use escape n /n because I'm putting in a line break.

In fact, I put in two line breaks. And I'm then going to say h1 colon, and then I will put in the line break and I'll say score colon. So I'm going to say, Write that and write H 1 for a SaaS app and score and give each response an SEO score. I'm just going to make it even plainer, clearer for OpenAI. Now, I don't know how well this is going to work, so let's try.

Okay, and I'm going to copy this into my little tool here. So you can see now that by giving the input message a more prescriptive way that I want to return the data, by the way, how I want the data returned, I can get OpenAI to return the data in that format. And that can be really helpful because you might find that you need to be more commanding of OpenAI to get a reliable format back.

So if I wanted to store each of these responses as a separate database item, I now know that each one is separated by two line spaces. I can use Split By to target that. I can also do Split By H1 colon space, and then I do second item, and I could do Split By Line Break, and that's how I would isolate this part here.

But I'm talking hypothetically here, do check out our Split By video, because if you've battled with regex and struggle to extract text and Bubble, if you can get it formatted like this consistently back, then you're winning. It becomes so much easier to extract the text and work with.

I'll also point out that we have two line spaces at the top. If I simply wanted to get rid of those, I would add a trimmed modify to the... When I save this whole content response into my database, by adding trimmed, I get rid of the line spaces there. So that's one way of getting back three outputs. And I get back three outputs because I've asked for three here. But there's another way that you can do it. And I'd just say it's really worth experimenting with these different formats.

More than 1 response from OpenAI

So instead of saying, write h1 for a SaaS app and give the response an SEO score, write using the following format, I can change n. And this is a parameter that comes over from GPT 3. And it's saying, how many different variations do I want to get back? And so I can say, I want three variations back and initialize the call and wait for OpenAI to get back to me.

So now OpenAI has given me these three different responses. And I'll just take the first one here so that we can see what it looks like a bit more clearly. So okay, it's actually given me a score and an explanation of the score there. That's fine. But you can see that it gives me these different responses. So these are all part of choices. So if I wanted to get choice one, there's my choice one. If I wanted to get choice two, there's my choice two. I wanted to get choice three, there's my choice three. So in order to create a database entry for each of my choices, it might help to format it like this where you use your end parameter because I'm not having to split up one response into three. I have got three separate responses. And it's it both work, but you might find that doing it like this just makes it a little bit easier to extract the data that you want in your workflows.

So there you have it. I'm sorry if that is a little bit of a jumble, but it's just highlighting a few things that have come up over the course of the last few weeks with coaching clients that I've met with. And yeah, tune your prompts, experiment, play with changing N, play with being really prescriptive in this command here, the initial user content that you send. See if it makes any difference putting that prescriptive, this is how I want the response, into system. I've seen a few tweets of people saying you can get really different responses depending on if you use system or you use user. So I would say that in my experience, you can get a reliably structured format back to Bubble from OpenAI, and then using Split By or using N and separating it out from the different messages, the different... What are we looking at before? What's the choices? Different choices. You can find a way to extract exactly the data that you want. Whether that's splitting by using a label at the start of the line and the line space at the end, you can find a way. If you've got any particular scenarios that don't quite work, leave a comment on this video. Book a Bubble coaching session, and I'd really love to work on it with you and find a solution. But I'm saying it is possible.

If you have the right prompt, you can get the data back in the right structure, and using Split by, you can extract that data with Bubble.


Latest videos