Splitting AI-Generated Text in Bubble
In this Bubble tutorial video, I'm going to show you how you can take AI-generated text from OpenAI and how you can split it into multiple parts of text. For example, here is a very quick AI text generation tool I've created. If you're not sure how to get to this point, do check out. We've got loads of videos about OpenAI. But here, I've put in a topic and I've basically given it a prompt to generate three social media posts on this topic. And you can see that OpenAI replies with just this single large amount of text. How do I then split it into multiple parts? For example, what if I wanted to allow a user to click on a copy icon and copy just one part of this to their clipboard?
Planet No Code Membership
But before I do that, just a quick word about our website. If you're not already a member, we offer an amazing membership deal at PlanetNoCode.com where you can get access to over 100 Bubble tutorial videos, many of which are member exclusives. So if you're not a member, head over there and check out all of the tutorials we've got on offer.
Implementing the Split Functionality
But how do I split this? So I'm going to go into my design tab here and I'm going to put in a repeating group because we're going to list through the three different posts that are generated. And the content type is going to be text because I'm going to be putting in a long form of text and splitting it up. So let's go with text. I'm going to get rid of the number of rows just so it's a bit more flexible in its design. And then the data source is going to be the same as my data source here, which is that I'm using a custom state.
Workflow and Custom State
If we look at my workflow, I generate the AI content and then I save it to a custom state. Again, if you're not sure about any of this, check out our previous videos on OpenAI. We've got one that basically explains the whole process in 30 minutes. But for now, I'm going to give the data source as the same, which is my custom state on my page. And then Bubble knows that I'm trying to take a single item and turn it into a list of items. So I have to use split by.
Crafting Reliable OpenAI Prompts
And OpenAI's responses, part of crafting your best prompt is to create a prompt that gives you a reliably formatted output. So OpenAI can vary a lot, but your prompt can really narrow down and make it reliable in how it returns its value. And in my testing, in asking OpenAI to generate three social media posts about Topic X, it puts two line spaces between each post. So if I say split by two line spaces, and that doesn't look like anything, but you can see that they are there, we can then, if I go and change this to a row, just so that I can put some text inside it.
Displaying the Split Output
In actual fact, I'm going to put this over to the left. This is our original output, so that we can compare the two. And then this is our split by output. I'll make this current cell's text. Cool, I think we can give that a go. So let's go again with advances in AI automation. Click Submit. So we're waiting on the response from OpenAI. Okay, and you can see that it has split my... Okay, that's because the text... I've made that too small. Anyway, you can see it's dot dot dot. It's because it's too small. So the whole of the text response, all three posters, one block of text are on the left. But you can see here that I've successfully blocked out each three posts into a separate cell.
Adding Copy to Clipboard Functionality
And so that then allows me to take something like the copy to clipboard plugin, and to say text to copy would be current cell's text. And then I think I would then put an icon in. Not use this plugin for a while. Copy. And then let's just see if I can add a workflow here based on the copy with things. Hey, let's just see if we can do this. Okay, now I can target the element id. So if I say text underscore current cell's index. That's because an id needs to be a unique element on the page. So I have to put dynamic text in here so that this one is text underscore one, text underscore two, etc. So then if I say in here element id text underscore current cell's index.
Testing the Implementation
Right, let's try that. Let's say climate change. Sometimes open the eyes really quick. Sometimes it has slow days. I imagine they really have the scale, the computing power over the last few months. Okay, here are my posts. So if I click on that and then it's just gonna work. Yeah, there we go. It has copied that post. And so I click on that. And there we go. It's put. I should check that again because I saw that post one was still in there. Yep, that's work.
Conclusion and Next Steps
Okay, so there you have it. There is how to take a large piece of text from OpenAI and to split it into multiple instances and that then allows you to be more flexible as you've what to do. Right now, I'm going to record a full art video to this, which is going to show you how to save this into your database. We have to go through a process of back-end workflows and iterate through every value because we might not necessarily be dealing with three posts every time. We might want to give our users flexibility to choose a number and we're going to need a back-end workflow in order to iterate through X number of posts.