Transforming your Custom GPT into a PROFITABLE web application

Let's turn this custom GPT image caption Generator into its own web application So that we can charge customers to use It we know there's a market for it this Custom GPT has 5,000 plus chats since Its release and what it does is it takes An image that the user uploads and then Creates an Instagram caption for it with Relevant hashtags over in your bubble Application you're going to create a new Page this is the caption page and it Needs a few elements it has a page title Called image caption generator it has a Description for our users it says just Upload a photo using the image uploader Below and have ai instantly create an Instagram caption for you with three Relevant hashtags it has a picture Uploader element and the placeholder Text I just wrote click to upload an Image this is an input box in bubble Once the user clicks it it will bring up The file folders from their computer They can select an image and upload it We have a simple loader animation that Tells the user the GPT is working in the Background and to just hang tight and Then we have the caption results in a Group at the bottom that will display For the user once the custom GPT has Done its job so this is how the full Page looks if you haven't created your Open AI API call yet go to plugins You're going to install the API

Connector name your call open AI I'm Going to expand this you need two shared Headers Content-type will be application Json And the key authorization will be Bearer Space your secret key to get your secret Key go to platform. Open.com hover over the left side click API Keys click create new secret key I'm Going to call this caption generator Click create secret key copy the key go Back into bubble in your back end and Then paste it here so bear space your Secret key you can always revoke a Secret key if you're afraid it's been Leaked on your API Keys page go over Here and click the delete button to Revoke key and then revoke key next We're going to create a call called GPT Vision in order for our custom GPT to Look at images and what it contains we Need to use the GPT Vision model so I Like to call it GPT Vision let's hit Expand this call is an action make sure It's a post request and posting to this URL api. open.com version one/ chat SL Completions here is the Json body I got This from the open AI documentation and If you go to platform. Open.com dos and then I'll scroll down To vision and then in the quick start Section you can just copy this curl Command remember we already added the Headers so we only need the curl call

Down here so you can copy that and paste It in here in bubble when you have text In between two carrot brackets like you See here text and image URL that means The data is dynamic the model up here is Not dynamic because there are no carrot Brackets and it's not highlighted green So we can't change this within our app We can change these two Fields within Our app and that's good because we want A unique prompt each time and we want a Unique image URL each time to initialize The API you need to make a test call so I simply went what's in this image and Then I grabbed a random image from Wikipedia I'm going to hit reinitialize Call this is a successful call I've Decided to ignore all of these fields Within bubble because the only thing we Need is the text what is the message Content that comes back that's going to Be our caption and in this sample call I Know it's tough to read but it says this Image shows a beautiful natural Landscape with a wooden boardwalk and if I copy this picture and paste it in it Got it correct all right now that the Call is set up we can start building out The feature so back on the design page I'm going to go to workflows and we're Going to add an event and it's going to Be when an input's value is changed Think of events like triggers so when This value is changed and it's the

Picture uploader we are going to make an API call I'm going to scroll down to Plugins open AI GPT vision for the input Text I'm going to write task you will be Shown an image create an Instagram Caption for this image and include three Relevant hashtags for the image URL I'm Going to write Https colon because our URLs need to be Formatted like that we're going to Insert Dynamic data click this picture Uploaders value and then URL whenever Someone uploads a picture to the picture Uploader bubble automatically stores it In their S3 database and creates an Image URL we are grabbing that URL and Posting it to GPT Vision so that's our API call now we need to display it on The page for that I'm going to create a Custom state so I'm going to go back to Design let's double click on the page Let's click the I button click add new Custom State we are going to call it Caption and the state type is going to Be text hit create now back in workflow Our next action we're going to go to Element actions set State and the Element is the page called caption we Are grabbing that caption State and then The value is going to be the result of Step one that's our API call choices First item message content and then I Like to trim it to remove all empty Space let me go back to design now I can

Go down down to the bottom text box here And we're just displaying Dynamic data We're displaying the pages State called Caption I know it's confusing because it Says caption caption but if I change This page to caption testing you would See the text now says caption testings Caption so it's grabbing the page first And then that custom State all right Let's test it out I'm going to hit Preview and all I have to do is upload An image so I'm going to click this Let's choose this desert image click Open and we can see the API call working Because there's a black bar at the top Of the page and there we go it shot out A caption chasing Horizons in the heart Of the desert the silence here speaks Louder than words #d desert Vibes # Adventure awaits # nature photography Perfect it's all working as expected Let's clean it up a bit though first I Don't want to display this text box at The bottom of the page until we have a Caption so I'm going to double click Click on it go to layout and then Unselect this element is visible on page Load and instead we're going to create a Condition and that condition is when the Page caption it's custom State caption When it's not empty that is our when Condition then we're going to change a Property characteristic this element is Going to be visible so when it's empty

And it has no caption this element will Be invisible and when it does have a Caption it has a result it's going to be Shown on the page now I want to show This loader when the API call is working Just an extra visual element for our User when they're waiting on the page so For that I'm going to double click on The page go to our custom States again I'm going to add a new custom State this One is going to be called loading and The state type is going to be yes or no Let's say create by default the loading Value is going to be no and clicking on The loader I'm I'm going to write a Condition when the caption page its Loading state is yes this element is Visible so when it's not loading it will Be hidden when it's loading it will be Visible let's go to workflows I'm going To click to add an action we're going to Go element actions set State it's going To be the caption page the state's going To be loading we're going to make it yes And we're going to move that to the Beginning of the workflow so as soon as Someone up loads a picture it's going to Set the state to loading and then at the End of the workflow we're going to set Another state this time loading will go Back to no okay let's preview again you Can see the text box at the bottom is no Longer there we have no loading icon I'm Going to upload an image we'll do a

Picture of this deer and there we go we Have a loading icon at the bottom and it Shoots out our caption captivating Nature's innocence Fawn fun nature Whimsy creature cute very cool let's say We wanted to charge our users to use our Custom GPT the choice is yours but I Think a credit system might work well For this so I'm going to add a text at The top of the page and I'm going to Write credits colon let's put this zero For now and I'm actually going to move It above the title and align it all the Way to the right and then I'm going to Add a button let's WR on this button Purchase credits I'm going to click this Hold shift click credit credits Rightclick group elements into a row Container let's space them out a bit Let's say 15 pixels in between I'm going To Center this credits portion and move It behind it then let's align everything To the right there we go let's space it 10 pixels from the bottom and then I'm Going to go to plugins click add plugins Make sure the stripe plug-in is enabled Make sure all your secret keys and Publish able keys are in the appropriate Boxes and then we're going to click on The purchase credits button let's go to Add workflow go to payments charge the Current user for the amount let's say 10 Bucks the name I'll call it image Caption credits and then if that is

Successful we need to top up the users Credits so I'm going to go to data and Then in the user data type we're going To create a new field and call that Credits that field type will be a number Hit create By default they're going to have zero Credits then I'll go to design and in The credit section instead of zero here I'm going to insert Dynamic data and It's going to be the current users Credits and then in workflows after a Successful payment we are going to go Data make changes to a thing we're going To change the current user and we're Going to click to add a field we're Going to change their credits to current Users credits Just in case they already have some plus Let's say 50 of course you can make this Way more complicated offer many plans For many different purchase amounts but For the simple workflow we're going to Charge the user 10 bucks and if that's Successful give them 50 credits now for The picture uploaders value is change Trigger we're only going to allow this To happen when the current users credits Is greater than zero so if they have no Credits they can't use the tool and then At the end of the tool we are going to Data make changes to a thing we're going To change the current user and then We're going to change their credits

Equals current users credits minus one So every time they use the tool it takes Away a credit we can also do something Like this I can copy this paste it in And this time change it to when the Current user credits is zero of course We're going to delete all of these Actions in the workflow instead what We're going to do is add an action we're Going to go over to element actions show An alert popup in browser and we're Going to write sorry you don't have any Credits left please purchase more by Clicking the button below let's create a Test user so we can test this out I'm Going to go to users app data we're Going to create a new entry the email Will be test user.com credits of course Are zero hit create let's hit run as now We're going to try to upload an image With zero credits I'm going to click This I'll upload this illustration and There we go that's the error message Sorry you don't have any credits left I'm going to click okay this time I'm Going to click purchase credits it's Going to load the stripe checkout here $10 I'm going to enter my card Information and click pay there we go a Successful payment it now shows 50 Credits I'm going to click to upload an Image here's me as Tony soprano and There we go it's working now we got the Loading animation and a caption and look

At this credits equals 49 works Perfectly if you want to dive deeper Into this topic make even more complex Gpts into its own app that you can Charge customers for check out my online Course the link is in the description Below and if you like this video I put Two more on the page right now one is my Most recent upload and the other is the Best suited for you give one of them a Click and I'll see you in there peace