OpenAI Rich Text Formatting

You can see I've got a header in there, and I've also asked it to emphasize key, but since we've emphasized places, it's put them in italics involved. But how did I do that? Well, in this bubble tutorial video, I'm going to demonstrate that before I launch into it. If you're learning bubble, there's no better place to do it than planetnoco.com, where we've got hundreds and hundreds of bubble tutorial videos just like this one, exclusive to our members.

I've got an input, I've got a button and I've got a text label. When my button is clicked, I send a API request to Chat GPT OpenAI's API.

I am going to go into a little bit of detail here of how that's worked, but we've got plenty of other previous videos that really go into detail of how to add AI into your bubble app. But effectively I'm taking the inputs, value and formatting as JSON safe. That means that any punctuation, anything that could cause an issue with the JSON syntax, that's one of the most common errors you get with the
plugs into my message action and I have got my message.

And so what the user writes in the input box gets inserted into the JSON code here. And because it's JSON safe, it wraps it in speech marks. So that's why I've not wrapped my dynamic value in speech marks. But if I was to reinitialize, I'd have to have speech marks in this box here. So this is the first way I'm going to demonstrate of doing this, which is that I'm saying, and with any OpenAI prompt you're going to have to experiment, fine tune it.

Respond with rich text formatting using BB codes

to add emphasis to key parts in the itinerary. Now what that means is that it's going to reply in a format that will bubble. Let me take a closer look at it.

Just want to have a look at my text. Come on, come on, come on, come on.

Yeah, so bubble replies in this format. And if you know anything about HTML, even just a little, you may recognize bits. BB code is, from my understanding like an old Internet forum limited version of HTML. And instead of using triangle brackets, it uses square brackets. And so you can see how we centered the title and how it's adding in the bold and the italics to add emphasis to place names in the reply.

And that's because if you use bubble's own rich text editor plugin, your rich text is saved into the bubble
as BB code. And then when you have just regular text on your page, bubble is going to render that as BB code. Let me just dip back in here because the second part is I'm saving the response in a custom state. Again, if you want a real detailed look at how to use OpenAI in a bubble app. In fact, we just launched a udemy course and I'll put a link down in the description, which is the perfect beginner course for learning bubble and for learning OpenAI.

But anyway, I'm getting that response and I'm displaying it back in that box here. But let's say I want more control because BB code, for example, there are no proper headers in there, it's just font size. So what if I wanted to reply with HTML? Well, let's try that. So I'm going to add in a code block.

No, the HTML element. That's what I want. Add that in and let's just make it 100% width and same thing as before. I'm going to go to my custom state where I'm storing the result of the OpenAI call response and just putting it in there. Let's now adjust the prompt because we don't want BB code.

Respond with rich text formatting using HTML

We can say, to add emphasis, to keep asking itinerary, I'd say you must add h two headers as well. Now I'm going to reinitialize it here just to see if I've got my prompt right before demoing it on the front end. So OpenAI is just taking its time. Here we go.

Oh, and this is looking good. So we can see that it's put the itinerary in h two headers. So yeah, let's try that out. So we'll go back to our demo and this time let's say Paris generate AI itinerary.

Now I'm expecting there to be some formatting issues and I'll give a quick overview of how to fix that.

Okay, that's not great. That's not worked at all. Well, let me just try London. I mean basically I'm demoing the principle, but you need to make your prompt better to get a reliable reply back. I'm just demonstrating the principle of how to add rich text formatting into OpenAI's responses.

So let's just see if I get the same response back from about London. Okay, so we've got elements there that have worked. And again if I go in and inspect it, we can see what's actually happening. So there could have been headers in there. It's just the header text is not formatted any differently to the paragraph text.

So you can see that we've got h two header, we've got paragraph and then we've got a list, bullet point list, and we've got the strong which adds the bold in. So that works pretty well and effectively. What I need to do to make this better is add in some custom HTML. So I'm going on to my travel and I'm going to add in an id attribute and that's so that I can apply custom HTML just to this element. So I'm going to say OpenAI output.

So then let's add some custom HTML. And again, we've covered custom HTML in far more detail in other videos. And I would say generally you can do most things in bubble without having to write some custom HTML. I mean CSS, custom css. So we are targeting this id and I'm now going to say like h two.

And so we'll say font, font size 32, font weight 700.

And then we'll also say paragraph line height.

Okay, now let's try that.

So effectively bubble isn't providing any style sheet for content that you put into the HTML code element in your bubble app. You are having to provide the style sheet yourself. So you can see that that's made a difference. I could go on further and I could add in margin above the headers because everything's a little bit too close there. But you get the point.

You can build up a really beautiful rich text document based on either HTML, either an HTML reply or a BB code reply from OpenAI in your bubble app.