Build an AI copywriter with Bubble.io and OpenAI's GPT-3

hey what's going on guys joshua here today i'm going to show you how to build an ai copywriter with bubble in gpt3 so if you've seen tools like copy ai writer simplified i think is another one where you're essentially able to input some information click a button and the product will write some really amazing copy for you almost like a human wrote it so a lot of these tools are using gpt3 the way it works is you can tell gbt3 to do a very specific thing you can see some examples over here in copy ai so you can use it for writing website copy you can use it for writing blog posts social media ads and many other things we're going to focus on this tutorial with the product description writer and in bubble what we're going to be building is essentially this form right here so it's pretty simple honestly we have a input for a product name we have a multi-line input for a product description there's a drop down for the tone of the copy that you want the product to write so i'm just going to illustrate this really quickly so i'll show an example for pop prints this was a project that i worked on but it went nowhere because i never shipped it but paw prints is an app that makes sending printed photos to friends and family super easy you just pick a photo choose a recipient and press send and then we print and mail it for you again it went nowhere but maybe if it writes some amazing copy it'll take off so anyways i want this unfriendly tone i'm going to click create copy and you'll see essentially what we're going to build here so you can put the information click a button and it's going to output some some descriptions for us so here we can read through okay wow i love this one so i can click save right here and what that's going to do is that's essentially saving it to the database and so um here we can reference it but again this is what we're going to build it's going to be pretty dang simple if i'm going to be honest the goal of the tutorial is really just help you establish a foundational understanding of connecting both bubble and gpt3 gbt3 is capable of a lot of amazing things this is really just scratching the surface and so this is just to give you kind of that foundation and you're going to go forth and prosper and create really amazing things based on what you learn here just to call out you do need to have a little familiarity with bubble so here are some of the concepts we cover we're going to be messing with the api connector we're going to be dealing with actions and workflows custom states repeating groups and then saving data to the database and so i try and keep it pretty simple but if you're not familiar i would definitely research some of these things if you get confused you can also comment and i'll try and help you out as best i can but just wanted to call that out so you have an understanding of what we're looking at awesome so let's get this started what we're going to do now is we're basically going to recreate this form and bubble what i want to do is i want to get this ui set up first we're going to get the blocks in place and then from there we're going to hop over into open a ai kind of look at gpt 3 and how prompt design works it's a little tricky so we're going to do a quick walkthrough of that once we get that set up we'll come back into bubble connect it all up and then we'll start saving things to the database so let's get started so i'm in bubble right now you can create a new app or you can use a playground that you you know use already um basically we're just gonna be using one page and so i'm gonna create a new page here i'm gonna call this gpt3 description writer you can name it whatever you'd like but that's what i'm going to go with i'm going to double click here i'm going to click upgrade to responsive at some point this will be the default and again i'm not on a paid plan or anything this is on a free plan so you don't need to pay for anything but all right i'm going to double click on the background here i'm going to change the layout to column basically what this does is any elements that i add into it it's going to stack things on top of each other so that's how the the column container layout works so i'm going to grab a group i'm going to paste that in i'm going to set that to row and then i'm going to uncheck make element fixed width and i'm going to remove the minimum width and that's just going to allow it to span the entire width of the main page so what i'm doing here is i'm making a header just kind of like ground ourselves we're going to call this product description writer there we go and then i'm going to go to layout and i'm going to center that oops uncheck make element fixed width delete the minimum width this is just again just going to allow it to span the entire width of the container and then i'm also going to center that so i'm going to remove the minimum height and i'm going to vertically align that towards the center cool and i'm going to change this like 50. amazing last little visual thing i'm going to do this is i'm going to add a little background color i'm going to make that white i'm going to define each border independently add a solid border down there just to give it a little division and then i'm going to change our main background to like a gray just to kind of create some separation beautiful okay so the next thing as we go back to our description writer and copy ai we need a we need input we need a multi-line input and we need to drop down so i'm going to search for input and draw that in here and again this is going to stack everything and so i'll worry about kind of the layout and visuals of it here in just a second but i want to get just the inputs in place to start so that's our input now i'm going to search for multi-line input we'll throw that in here and we also need a drop down beautiful and then i'm actually going to add some text as well because i want to kind of label our inputs so i'm just going to call this one product description um and again i'm going to worry about the visuals here in just a second i'm basically just getting all the pieces onto our page so i'm going to copy and paste that and copy and paste that and here down under the alignment i'm just going to order these so each of these inputs is going to have its corresponding title so the next thing i'm going to select this text actually now i'm going to do this individually so uncheck make fixed width i'm going to uncheck the minimum width or remove the minimum width i'm actually going to remove them in height as well and just say fit the content i'm actually just going to delete those and copy this one boom boom and do that again amazing the next thing i'm going to just remove this and check the minimum width i'll set the height for this to like 1 20. i actually just set that to fixed because we want to indicate that you can add a little more text into it and then i'm going to quickly delete all of that we're going to set our height on this to 55 and we'll set our height on this to 55 and again remove the make fixed width remove the minimum width boom okay so this is starting to shape up i'm going to rename this to our that's the product description this is the product name cool product description and then this was our tone i believe drop down and there you go okay so we kind of have most of the pieces oh yeah we need a button so we'll throw a button in here oops that's hideous i think i have a style here which i'm just going to select obviously i need to make this much taller i think i've been going with 55 so i'm going to set that that's going to be a fixed height button because we want that to stay consistent i'm also going to remove the minimum width and the fixed width check box so we'll remove this thing so it's spanning the entire width so the next thing i'm going to do is i'm actually going to select all of these things i'm going to put them into another column group and this is going to act as my container so then i control the margins and padding on each side so i'm going to select everything i go up here to arrange i could have right-clicked as well but we're going to click group elements in a column container and again this is just going to contain everything i'm going to uncheck fix fit with content and i'm also going to remove the min width i'm going to set the max width to let's say 640. um cool basically that's just saying that it can expand that far and that's when it's going to stop basically and then if i click the horizontal alignment i'm going to center it right here perfect so the next thing you'll notice is i need to add a little um space between each of these elements so i'm actually going to start with my little descriptions right here and i want to add just a little space between those and the inputs so i'm going to add like five pixels of margin on them if i click apply changes that'll add it to all of those and then i'm also going to select these inputs here oops i've got a layout then i select these inputs and then i can add margin to all of them so i'm going to say 20 for that apply changes beautiful and then we'll also change our buttons so i believe this says what create copy so we'll go back over here create copy amazing cool so this is starting to look like um what we have over here in open ai or sorry copy ai i'm also going to add just a little bit of padding to the top or margin to the top to separate it from our header we'll do like 40 pixels there beautiful so that's basically everything right so the next part that we need to include is that bottom section where our responses are going to show up like i said we click the button we make an api call and then it sends us some descriptions that's the goal right so what i'm going to do here is i'm actually going to name this really quickly so i'm going to call this group form container so this again naming is a very important aspect of bubble if you're not aware so make sure you name your things accordingly which actually just go through really quickly make sure we have them named nicely so this is going to be input product name this is going to be multi-line product description and this is going to be our drop down tone and this should be named nicely as well okay cool so that's looking great we got our things named accordingly but like i said we want to create that section where our responses are going to show up um so i'm just going to copy this container and i'm going to paste it and basically i'm going to delete everything out besides one of these text elements so i'm actually going to also we'll just set the minimum height here to like 100 to start maybe we'll even give it a color just to kind of just make it show up um set it to red just to make it hideous and we'll change it here in a little bit um call this product descriptions um i'm going to remove that look at this i'm just going to use default copy styles here so that's not going to be the prettiest but that's okay so product descriptions i'm going to copy and paste that text element and what we're going to do to start is i'm going to keep i'm basically going to put the responses into this text element so we'll go over that here in just a little bit but basically just to call out that when our responses come back we're going to just store it in this text element to start and then we're going to figure out how to actually save it to the database so we'll just keep that there for now and then we're going to create one more section which is going to be our saved descriptions and that's the section title and then i'm just going to keep this little text here because this is where it's going to show up so we'll get to kind of filling this out i mainly just want to kind of put these blocks here in place so that we know just the different sections that are going to exist but basically we have this main container which is our form we have the section where our descriptions are going to show up when we make our api call and then we have um if we like a particular description that gpt3 has given us we're going to save it and it's going to show up here in this section and so this is the extent of it it's just going to be a single page app we're not going to deal with any sort of like logging in or anything like that but one next thing we need to do before we move on is we need to add a plug-in called the api connector and so i've already added it here but if you go up and click add plugins it should be one of the first things you see bubble api connector you'll click install and you should see it appear here so the next part we need to go and figure out is essentially forming our api call and so open ai is really interesting and there's this playground that we're going to mess in and so let's hop over into openai and i'm going to walk you through how to sort of design a prompt based on what we're trying to do here all right so i'm over here on openai.com we're going to go over here to the api section up the top right corner so this is a landing page for the api highly recommend you read through it there's a lot of good examples inspiration for what gpt 3 can all do we're not going to get into that right now but look at it yourself so you're going to want to sign up i'm just going to log into an account that i already have it should be a pretty simple process for you there's a few steps but you should get in with no problem once you're in there's going to be this overview page another thing that i highly recommend is going through all of this it's going to give you a really understanding of how to kind of wrangle in gpt3 how to get it to do what you want it to do so go through these things it's very helpful the other thing i'll say is that when you create an account you have like a little bit of credit to use the api if you actually wanted to launch an app you need to have that approved by open ai so they give you instruction on that just want to call that out that there is a process but this is mainly for just having some fun so the main thing that we're going to kind of look at is the examples over here so what the people at open ai have done is they've essentially found all these use cases that work really well for gpt3 so you can kind of see different examples that they have here and this is the way gpt3 works what it needs is a prompt and a prompt is essentially like an instruction that you give the engine and then it's going to give you a response back so in this case this is a q a where they've given it a prompt and it's about a q a so they they're showing different questions and answers and i think they set it up up here as well and the final little act part of that prompt is like what's the answer to this and gpt3 knew that based on everything you've told me i can tell you this answer that's one example another really cool example is like classification you can do a lot of powerful things with just categorizing things as well as like writing summarizations here there's a bunch of text you tell gpt 3 to give you the tl dr and it's able to give you that specific response summarized in a very meaningful way so the next part of that is the settings so each one of these kind of use cases basically if i take a step back gpt3 was not trained to do one specific thing if you think about it it was basically crawling the internet for eight years and it just consumed all the text information that exists on the internet and what it did was learn from all the the language that exists the different patterns the way people write the way emotion and expression exists in written text i'm going to learn from all of that and so that's why it's really good at writing out text for us it also is really good at code as well because you'll see some like javascript and different code related elements here these are some really good examples to kind of get you started especially if you can find something that's related to your use case that you want to create a product around but for ours we're going to start with this product name generator right here and if you remember we're doing a product description writer and so this seems pretty related and it's got some settings over here that kind of match what we're trying to do so i'm going to click open in playground you're going to spend a lot of time in this playground because again you're just essentially giving it a prompt and you have to play with it a lot to get it to do what you want it to do so for example here they have the product description whole milkshaker these are some words that kind of describe it here are some product names so this is like priming it it's kind of giving it some examples to say follow this pattern gbt3 so if i click return here and then i click submit so this is the response right here highlighted in green and what it's done is it's followed this pattern that's been outlined for it and then it's given some recommended product names based on some of these seed words in the description so this kind of gets me over into the settings this is something you really just kind of have to dig into yourself i'm definitely not a master on it essentially temperature is what they consider to be a randomness control basically if you want to have the output kind of consider a bigger realm of possibilities if you want it to be a little bit more creative as people say you would have a higher temperature whereas if you wanted it to do something more specific and more like straightforward for example like a summary you want to have a lower temperature maximum length is all about the the length of the response that it gives you so this is all measured in tokens the tokens are essentially like chunks of words or some in some cases words the documentation outlines this so i would look into that but this was your charge by but this is telling gpt3 like hey don't give me a response that's longer than this number right here stop sequences are basically just like you can enter like let's say a set of characters or punctuation like whatever you want and anytime gpt3 comes across that or your response contains that stop sequence it's essentially going to not continue to stop right there the next one we'll get into is top p so this also controls randomness they call it like nucleus sampling and honestly i don't really know what it means so basically look at it yourself you kind of just have to play with it until it's like working the way you want it to work frequency penalty is essentially telling gpt3 to not repeat tokens or words so if you wanted to you know try different things as it's writing the responses you would make sure to have this set a little bit higher and that's not going to repeat words so presence penalty is also related but this is more about topics it's going to tell the engine to not repeat topics so that's again a very quick overview i'm not going to get into that these other ones because i truly don't understand them but again it's one of those things you just got to play with if we go back to like our actual example though so we know we want to write or create a product description writer we can see that okay we have these different inputs and so i'm basically just going to tell gpt3 to write a product description for the following product and then what i learned basically with messing with this is that i could say product name description oops let's accidentally hit enter description tone right okay and so i'm kind of priming it just to kind of follow a specific format i'm going to go back over i'm just going to copy this description so i have to write it in front of you description and tone we're going to say happy right so these are all mapped back to those different inputs that i saw on copy ai so i'm going to hit return and then i'm going to click submit oh my goodness i didn't even add a name so we'll say pop prints but okay we are getting a description which is good love it okay so again this is something i got to mess with to get this consistent output the one thing i'll call out is remember this has multiple uh descriptions written for us so i'm just going to tell gpt3 to write three different product descriptions for the following product i'm actually just going to say three descriptions three different descriptions for the following product and then product name perfect so let's see what happens i'm giving that instruction oops oh and it's soft right there because i have a pretty low length so i might set that to like 200. try that one more time beautiful okay so that's what i wanted to do i wanted to give me three descriptions and so i would say that this prompt is working well again i would probably test it with more names but for the sake of just moving quickly we're going to keep going with the tutorial um but this is how it works you kind of just have to mess with the playground here try different things mess with the settings and hopefully it'll start to do what you want it to do so the last thing we need to do is get everything set up and bubble right so if we click view code up here in the right corner this is all the information that we need to get this thing working so we're going to hop back over to bubble and get the api set up all right so i popped back over to bubble um and we're going to get our api set up now that we've got our prompt working the way we want it to work and open ai is giving us the response that we that we like so i've rearranged my windows just to make this a little bit easier we're going to bounce back and forth between bubble and open ai so again here we have the playground i'm going to click view code i'm going to leave that up and over here in bubble i'm going to click add another api we're just going to name this open ai we're going to leave authentication as none or self-handled for this tutorial you can use things like the shared header but for the sake of this i'm just going to keep it simple we're just going to focus on filling out this specific api call right here so we're going to call this i think you have to expand it before we can write in it we're going to call this product description and we're going to set use as to action and so what this is going to do is when we set it to action it basically exposes it in our workflow so you can like click a button and then you can run an api call we're going to leave the data type to json and we're going to actually look over here first and here you can see it says post so this is a post request and so i'm going to change that to post and the next thing this input right here is for our endpoint so where are we making this api call and that's actually this url right here oops so we'll copy that scroll back over and one thing to call out is if i'm not sure if your view will be set to this but you need to make sure curl is selected and not these like curl so this is we're going to be using for this tutorial awesome so we have our endpoint added the next thing we need to set up are our headers so if you look here you see these two two items right here both have h next to them so these are what we're going to add into our headers so here we have a header section we'll click this button twice so the first one is content type and i see that's application json you can just copy and paste these as well so the next one right here is authorization and so this is where you're going to have to go and get your api key and so here first we're going to paste bearer we're going to push space and then we're going to go over into openai and go over here to your account i might need to make this bigger really quickly close that so it says view api keys that's where you need to go i'm going to open this in a new page just so i don't lose this but you're going to grab your secret key right here so click copy and i'm going to delete mine after this but you don't want to show anybody this so this basically means that someone had that they could make calls on your account and again that's how you're charged that would be good so make sure you keep that secret it is called secret key but just to you know let you know um we're gonna go back over here we'll click view code just to pull this back up but okay so we've copied our secret key we're gonna paste that in here um if you scroll back over you should see bearer space and then sk and whatever your secret key is perfect so we're going to leave these as private as well again you want to keep that one private so no one else sees it so we'll scroll down we don't need to add anything else we're going to keep the body type as json and the next thing we're going to look at is the data section over here so that's um the d is indicating well i think it's called data section i'm going to new to apis myself but anyways we're going to copy this this section right here so from the last curly bracket to the start oops i'll just add that in because i can't seem to select it cool so this is our prompt this is what we're writing over here and this is in this form of json so if you see like backslash n that's essentially just indicating a line break so if you're like what what the hell is that that's what that is um but the cool thing about the bubble api connector is you can use the greater than and less than symbol to essentially make values dynamic which means like when we look at so we're telling it to write a prompt when we see product name we know that where i have pop prints that's where we're going to want a a user to like input specific information to that we're going to want to use an input for that and so i'm going to put these brackets around it and what it does if i i'll just call this product name so it's going to expose that down here and that means that it's dynamic and we're able to insert information or data into it from our ui so i'm going to go through and do that to all the little areas where we want user input in so the bracket there i'm just gonna delete this out so we'll say description um and then we have tone right here so replace that we'll call that tone and so again you'll see it's exposing them for the sake of when we essentially set up this api call we haven't connected to open ai yet we're going to add some values in here and so this was prints i'm going to just copy this description right over here so i've pasted that in and i think i spelled description wrong whoops oh yeah right there description boom cool um and then oops i replaced it cool we're gonna add that back in oh no that's tone geez sorry guys description and then tone will say is happy awesome so you can also do that for the um the settings that we've set up here for the sake of just speed i'm not going to go through that but basically you could add these curly brackets around and then you can kind of fine tune those settings whether you want to set up ui to do that or you want to do it from the workflows but for the sake of this tutorial i'm not going to do it i just want to keep this quick the next thing we want to do is uncheck private so this is going to expose these these inputs or these values in our workflow so that we can insert dynamic data into it and then lastly we're going to check capture response headers so basically when we form this connection with openai and we make the api call it's going to give us some information back in the header and we're just saving that information just in case we need to look at if there's like an error it's communicating something that we might want to have access to so again research apis if you don't get it i'm also kind of new to them um but anyways so i think we have everything set up correctly um this is the fun part where you click initialize call and you hope that everything works so let's see what happens it's taking a little bit which is a good sign i think boom this is like a glorious screen so this is telling us that it returned values which essentially means it worked um typically you would want to go through and just kind of make sure all of these kind of element choices that it's picked that makes sense for the sake of this we're not really going to go through that but if you go down here and click show raw data this is i've scrolled all the way down you can see what the response actually looks like and here we can see this is actually what we're looking for and so it's given us a lot of information and so this is going to be one of the fun parts is like how do we pull this specific section out of all this information that it gave us so we'll talk about that here in a second but i just wanted to show that this is where you can see all the information that it provided you let's click save and yeah this is amazing so the next step is essentially connecting it to our tour ui all right so i've expanded my screen back to the normal with now we want to get our api set up to the front end that we've created here so basically what we need to do is we just need to set it up in a workflow so we're going to click on that button and click start edit workflow and then when we click here we're gonna go down to plugins and we'll say open ai product description so this is that api api call that we just created then over here you can see all those values that we've added greater than or less than symbols around are now exposed and so we can clear this stuff out we'll actually start with the product name and we're going to click insert dynamic data and we're going to use the input product name right and then for the tone this is going to be that drop down that we set up so this will be drop down tone its value and then for description this is going to be the multi-line input so again we'll click in here click insert dynamic data this will be the multi-line product description it's value so if we go back over we essentially have all of these mapped to the api call that we just set up something that we do need to add in our options for our tone right so i'm just going to hard code some of these so i think like happy luxury was one witty and you can add whatever ones you'd like and again i would recommend you kind of play with gpt3 to understand if it's actually giving you nuance you know tone in your descriptions i messed with this a little bit and it seemed like it was changing it up a little bit anyways i'm just going to add these three you can add as many as you want though so cool let's go back over to our workflow so we have this set up and i'm not going to try it just yet because we need to think about the next step in this which is essentially like we're going to make this api call and we need to essentially store that api call right it's going to give us information but we need to do something with the information itself and we need to put it somewhere so we can display it so what i was the way i'm thinking about just starting this is basically we're going to store it into just a text element because what it is it's going to give us a bunch of text i just kind of want to see what it gives us and so let's go back over to our workflow so the next step here is like we click the button we make the call and what we're going to do is we're going to set a state and we're going to set state to the page itself so this is the page right here gpt gpt3 description writer if you're not familiar with states this is something that's very core to bubble i highly recommend you go and research it but essentially it allows us to store some information onto the page for temporarily we're going to rename this we're going to create a new state we're going to call it gpt3 we'll just say gpd3 description descriptions or that's a text it's going to give us text that's what we set it as awesome and so when it says what value do we want to set so we're going to click here and we'll say result of step one because this is the api call so now it's giving us all these different options so if you remember earlier when i set up the api call i'm going to click re-initialize so we can try and find like where that um the text that we want is at so if we go down here to show raw data i can see that this is the text that i want this is like the main part of the response that i'm looking for so we can see that it's in body and then it kind of trees down and i see choices and then i see text so body choices text so bubble actually exposed as kind of like tree and options and so we're going to remember that so body choices text so i'll save that i'm going to go back to my workflow again we'll clear this out just to make it hopefully super clear so result of step one is our api call body choices okay so this is what i'm looking for because you remember it came that's where the text was at so then here we're going to say first item and that's basically just saying like give me the first item and then when i click that it identifies text so this is what we're looking for and again this is something you kind of just have to mess with and learn within bubble hopefully this makes sense but anyways this is going to get you that text information that we just saw in the api call cool so i think that's like everything set up actually the next step we would need to do is we need to connect it somewhere right so we made the call we've stored it to the page but we actually haven't set it up to show it anywhere so i'm going to click this text right here i'm going to change this to some dynamic data so it's actually going to be the page so we're going to search the page first so it's what product what did i call this thing gpt3 so this is the name of the page and we we created that state for it so this is gp23 descriptions cool so that should turn blue perfect right we're gonna see um see if it works basically so let's do this i click preview um oh my goodness this is not the prettiest app but okay so we'll call this pop prints i'm gonna see if i have that copied anywhere cool i'm gonna paste this in we're gonna click a tone or set a tone and we're gonna click create copy and hopefully this works amazing cool so hopefully that worked for you basically we're getting our three descriptions here and again this is just set into a text element and i would continue to play with this just to make sure you're getting a consistent response and that's going to obviously dictate how much you need to mess with those settings if it's giving you inconsistencies it's kind of a challenging thing to wringle down but you'll figure it out but no so this is good we actually have our descriptions here if i go back over to bubble or editor the next thing we need to think about is okay we want to be able to essentially like split these out right because we've got to figure out a way to save them to the database and so the way i've kind of figured this out it's a little bit hacky but basically what i can tell here is each item starts on a new line right so there's a return that is separating all of these descriptions so what i'm actually going to do is i'm going to go back over into our workflow and i'm going to create another i'm going to set another state so i'm going to go element actions set state and this time i'm going to set it to the page like we just did before i'm going to create a new state and i'm going to probably name this very similar tpt3 descriptions i'm going to say list okay so basically this time around we're going to say that we want to create a state but it's going to have multiple entries so you need to check this box this is where it gets a little more complex so hopefully you can follow along but basically we can delete this first one because we don't need it anymore i'm going to basically split out all this text with some of the text editing text editing capabilities that bubble has so let's delete this first one so this is that second one that we've created the new one that is a list so now when we go to the value we're going to say result of step one we're going to go to body choices first item text so that is going to set it red because right now it's just getting a single body of text and what we need to do is we need to split that text up so there's a a control here called split by and what this is going to do is i'm going to tell it every time you see a return so i'm going to press enter here anytime bubble sees that within that text it's going to split it and it's going to create multiple items so we've added an enter there you can see now it's turned blue and so that's all set up next thing though is we need to show those values and so this text element here is no longer going to work so i'm going to delete it what we need is a repeating group and the reason why we need a repeating group is that's just how bubble displays information is basically we're going to say hey there's multiple things here and this is going to know to display it so i'm going to do some visual work real quick just to make this look a little bit nicer i'm just going to set this to 100 all right what's that 100 set up for 100 now i'm going to uncheck fixed width i'm going to remove the minimum width i'm going to delete that as well we can leave this checked for the time being and the next thing that we're going to do is we're going to say type of content is text because that's the type of information that is going to be inside of this repeating group the data source is going to be that that state that i just created so that's on the page remember so gpt3 description writer and it's going to be gpt3 descriptions list cool so now that's going to be looking for a list of things so the next thing we'll do here is we're going to add some text so i'll add text i'm actually going to set the layout style too so i'm on the repeating group i'm going to set the layout style to we'll say row i'll just go with that for now and again we're going to uncheck the fixed width we'll remove the minimum width and so now that i have this text element selected we'll go to appearance and we're going to insert a dynamic value into here and so this is going to be the current cell's text and basically that's just saying that of this list of things display the current cell's text hopefully that makes sense um so anyways we go back over here i'm going to paste in that description again we'll call this pop prints select a tone maybe i'll try luxury this time i'm going to click create copy let's see what happens nice okay so now we have our text split into different items so this is going to enable us to save this specific block of text to the database what i can see here though is that there's extra returns being like kind of collected as different items you can see all this space is basically because it's saving multiple things it's saving like a empty space here and then the text and empty space and the text and so i'm going to show kind of a hacky way to get rid of this and then we also need to add a button right because we want to save it so first things first i'm going to add a button because i want to finish kind of just the visual setup add a button in here move this over this is a hideous button i have a few styles just kind of set up i'll call this save copy then i'm going to delete the minimum height we're actually going to group these so i've selected both of those elements this is within the repeating group i'm going to group them into a row container so this will just align them nicely and then we can uncheck so i'm back on the repeating group i can remove this minimum height so this is just going to collapse to the group that we set inside of it perfect i may just center this actually now we'll keep that we'll keep that top aligned anyways so we have essentially this group and so the way we're going to be able to hide this like area right here is we're going to basically say we're going to set a condition sorry in in this condition we're basically going to say when current cells text is empty this element is not visible so we're going to leave it unchecked and that means this element is not visible and then on layout we're going to say collapse when head okay so let's pop back over and see if that works so we're going to say pop prints paste our description in select the tone great copy and that should collapse all that extra space that we had awesome so here we have now our three individual items i just kind of need to clean this up visually so select repeating group we're just going to remove the style we need to remove the separator that it has and i'm also just going to add a little bit of padding or sorry margin to the bottom sorry on group text we're going to select group text and we're going to add some padding to the bottom of it awesome so the next thing that we need to do is then be able to save that copy to the database right so if we go back over here we see that it's written some copy for us i mean we actually like some of that we might want to save it so we're going to go over to our data tab and we're going to create a new um a new type of data so we're just going to call this saved copy we'll click create and in that save copy we need to essentially save the text of the response from gpt3 and so we'll call this let's actually have a product description and the fill type will be text we're going to click create awesome so you can add a lot more information here but we're just going to keep this simple and have just one one type cool so if we go back to our design tab we're going to go to the save copy button here and we're going to click start edit workflow what we need to do is we need to create a new data thing so we're going to click create new thing the type is going to be saved copy we'll click set filled and it's going to be the product description and then that is going to be the parent groups text so this is just essentially saying in that repeating group save that the text from the same cell that that button is in okay so from there though now that we're going to actually save that to the database we need a way to display that to show that it is saved right so if we go back over to design so we have this save description section basically what i'm going to do is i'm actually just going to delete this text that we have in here and what we need is a repeating group and so we already have a repeating group up here i'm just going to copy and paste it and then i'm going to change out the data source so we'll click reveal and elements tree here i can see we have the repeating group so i'm going to copy that and then i'm going to paste it right here into this save description container so i'll click paste um perfect and so we can see it right here and we can remove this button because we don't need the button and then we'll click on again the repeating group we need to name this because this is good practice as i said earlier saved copy we're going to remove this data source because this is now going to be essentially a we're going to do a search for and the type of thing is going to be saved copy um oops and what are we doing here oh whoops i need to change the type of content so the content here needs to be saved save copy because that's the type of data i mean the data source is going to be the saved copy okay and again this is very simple this is going to kind of just show us everything you could add more user control and make sure that it's private to that specific account again we're not covering that here we're just really showing the very basics of what you can do here okay cool so let's go back over here to our app um and let's see if this works so we'll say pop prints we're gonna paste in our description say happy create copy nice so we have our different descriptions we have our button over here and so let's say i like this middle one so i'm going to click save copy and we see oh i did not set that up correctly let's go see what i did wrong here okay so because i copied this repeating group i still have the configuration of the group that that text was contained in and so i'm gonna change this to yeah it should be saved copy um so that's gonna update that um and then this should be parent groups save copy i'll say product description so let's try this one more time i think if i refresh it it should actually show up awesome so that was actually what we just saved a bit ago we'll try a different one let's say motion so version is another product i'm working on so it's essentially voice to text for content creators it makes idea generation super simple it syncs with all your favorite note taking tools that's potion i'm going to say that is going to be written in a happy tone so i click create copy nice i love this first one so i'm going to click save copy and boom it's saved to the database so the next step would obviously be making this look much nicer we're going to stop there just because i know this tutorial has gotten a little bit long but hopefully this gives you a solid understanding of honestly just how to work gpt3 how to wrangle it in a little bit and how to fine tune it so that you can um i don't know create really cool things so hopefully this was helpful let me know if it was if it wasn't if there's questions you have please post them and i'll try and help you out as best as i can um but anyways thanks for tuning in and i will see you next time bye

Channel: BASIS LAB

Views: 60,619

Keywords:

Id: JUo0cTM-Cvg

Length: 43min 13sec (2593 seconds)

Published: Sat Apr 23 2022