GPT-4o auto generates html landing pages from Streamlit webapp

hey everyone in this video we're going to take a look at automated Advanced landing page generator here we have some options by the way this is using streamlet and we're going to take a look at the code soon we can have the navigation menu fixed at the top we can select column layouts let's say two columns let's pick three cards dark mode and we can also select alert options from Easy toast to Sweet alert and we can let's include everything include a hero section testimonials price models and just click generate landing page and this takes depending on how many options you've selected anywhere from 102 seconds to a minute so here we go our website is generated and we can see a template review and there was the easy toast alert up here but here we go we have the amazing service feature one feature two what our customers say pricing plan get in touch the footer and everything and here is the generated HTML code you can copy it directly from the streamlit interface but uh this is also saved to the index.html as well using these pre uh chosen images so that's it this is how it works it creates landing pages that's for example just go for uh testimonial section and let's select and this time let's go for a fix side let's see what happens this time we are using GPT for Omni so this is a quick uh little page generator I mean you can generate just simple parts and you can copy and paste them from the HTML code it's really useful I think you can customize it for your own use generate something generic and then modify it and Al you can also modify the code for it as well which we're going to review here in a moment there we go this is the the template preview as we can see we have a header and a footer and testimonial and TST and credibility with some images there as well so this is uh more or less how it works let's try the colorful two and let's include a features section and I will review the code right after this by the way the code files for this project will be available at patreon the link will be in the description if you're enjoying my projects you can check out my website eive dolive where you can find all my videos and you can find the code download links to them at my patreon to every one of them you can also check out my courses as well here we go we uh got the key features and testimonials and as we have specified our navigation is fixed to the side also we did select the color team as colorful so we have some gradients and as always we have the uh HTML right here which you can easily modify it uses tail event CSS so now let's see how this works requirements for this project is opening ey term color and stream lid and just before we review the code uh to run project you just type in streamlet and run and the name of your file here in this case we're using indexp but could have been anything else and when you run this uh streamlet will automatically launch but you also get to see the link right here too local 851 and here is our app so this is how we launch it so if you look at index. we are using streamlit uh we are actually using the open a UniFi class that I've created this is just a class I've created to make API calls in a simplifi way this so you can deal with streaming responses Json mode and all of that and also has some nice methods such as chat trim history clear history and add message stuff like that it just manages the usual API call stuff if you want if you'd like to know more about it you can actually find the but this at my website if you type in open AI unified it's this video right here where I go into detail on How I build it and why I build it so so simply if we import the GPT calls class from that and we import HTML and OSS I've actually forgotten if HTML is an external Library you may have to pip install it just keep that in mind so we just have a function to get image path for the images because we have some default images that we are using uh of course once you have your HTML file you can modify these images to better suit your needs okay uh so this is for templating purposes and we have a a function to convert the images to uh basic 64 encoding and to replace the image paths uh this is only necessary for stream LD uh because because we are trying to as we've seen before we are uh displaying the HTML page on the streamlet web app uh using iframe and that's why we actually have to uh do these image path translations but other than that we initialize our GPT calls with the model GPT 40 and we set streaming to full so we don't get to see the model output if you set this to true you will and it's we we Define another function generate HTML which is going to receive all the types of information which we're going to pass from the stream L UI if you look at here see all these options are going to be passed into this function we are currently just defining it and once we have these These are going to pass onto this really long if string so this is where the Crux of the situation happens so this is the message that we're going to be sending to GPT here we're saying using tail create a detailed and beautifully style HTML for a landing page with the following features I would like to take a moment to talk about the benefits of becoming a patron as some of you may know in the last year and a half I've spent 3,000 hours over 300 uh projects as a patron you will have access to all the code files so you can get inspiration and iterate quickly another benefit is that you'll have access to all my courses and my most recent and most proud one the THX Master Class teaching how I what I've learned on how to Cod fast and efficiently also the streamlit course and the fast API course in my patreon I also have tiers in which you can connect with me one-onone check those out as well logo and Navigation logo should be well placed according to the selected layout when we enter the layout type dynamically from what has been selected here so you can see where this is going we are giving it quite a lot of in instructions logo image source should be we are actually given it which image it should use for icon it's just a template which uh of course we are expecting to replace once the page is generated you can also feel free to change it in the instructions itself like I said this entire string is the message to the GPT navigation part should be placed according to the selected layout ensure the navigation is fully responsive and functional so we are given it quite a lot of instructions for each uh part of the HTML document and if show hero because if we had selected here her included hero section then this is going to be added text plus equals hero section and then the descriptions for the hero section then if show features is selected then we add the instructions for the feature selection same for testimonials show pricing contact and visual elements and design implement the selected color schema according to the color theme that was that we are going to be selecting from here right light dark or colorful section grid and layout arrange sections in a grid type column grid whichever option was selected here if include cards incorporate C based layout within the section if show models alert and models Implement alert librar styles for important notifications and functional models uh trust signals and credibility and footer is always there responsiveness and accessibility zero optimization so if you actually look at the index.html it should have a title a description so these are good for SEO search engine optimization and then what else do we have performance and testing optimize the page for fast loading and then please generate the complete HTML code while structured properly indented and then at the end we also include that selected features as an add-on please ensure that the generated HTML only includes the selected features so this is like almost double instructions we have included in this entire instruction but we are also including a summary of it navigation layouts section grid cards card theme so these are all conditionals F string statements so this is pretty much how it's done done we response generator we're just going to use the chat method uh and we're going to make the call with the text and the selected features and then we're going to get a response uh back and then response text we're going to uh join it and then just write it to index that HTML file uh unless there's an error then we print that error and get HTML download link oh once the page is generated it also actually generates a download link I forgot to mention this is for that so that we can assign a HTML download link maybe I'll go ahead and uh demonstrate that real quick just let's just generate something while we are talking about the code and in our main function we set the page config which is going to have a page title Advanced landing page generator page icon is going to be rocket layout is wide and title is Advanced landing page generator and this is what we see here at the top right here in the browser Tab and also that F landing page generator here and with side with side with hd. sidebar we're going to have a subheader navigation and we're going to have a select selection box just going to include options fix stop fix side hamburger menu same with subheader sections with one column two column and three columns and you can see this here navigation layout with those three options and sections uh so before I continue I think somewhere down here there's a download HTML file you can actually download it but you would have to copy this to your working directory where the images are uh also just so I know that it's already saved the index.html as well but just wanted to show you that uh it's a possibility to so not only that HTML is saved to a file automatically you can copy and paste it here you can preview it here but you can also download it just wanted to mention that so with you our index Supply file with the sub hitters we just give the options right here so these are all the options that are displayed uh on the sidebar right here we can close it and open it and the rest of it is the sd. form with when you use a form with streamlit and you can select a bunch of stuff and the script will not reun and rerunning of the script is not triggered unless the button that button that X the ways the form is pressed otherwise each action on a stream Li web app is actually going to trigger a rerun of the application so this is why I form is nice so here are all the options for those checkboxes and here is a list of uh image files this is necessary to create to to create the links for the iframe if submitted then we just do some manipulation on the nail layout section grid and include cards here with sd. spinner we say generating landing page and we call the generate HTML which was this Long Function you just talked about right here you see we are passing all these uh parameters and then uh we get the HTML content if no uh error occurred and we get the modified HTML content we replace the image paths encoded HTML we escape some characters and then we input it into an iframe with the SD subheader template preview we display it so this is why we had to do some additional hacking and at the end we say generated HTML code and sd. code we display the content this is when we see the code right this this one the component that we want at HTML to show the if frame this preview right here and the next one is to show the HTML code as you can see that's why we're using a c code and with the markdown we have a download link that's it so I hope you enjoy this do let me know what you think I think this is a good start I think this is useful as it is but this can be modified uh for many other use cases code files for this will be available at my patreon link will be in the description and if you like my content consider subscribing and giving this video a like I'll see you in the next video I would like to take a moment to talk about the benefits of becoming a patron as some of you may know in the last year and a half I've spent 3,000 hours over 300 uh projects as a patron you will have access to all the code files so you can get inspiration iterate quickly another benefit is that you'll have access to all my courses and my most recent and most proud one the THX Master Class teaching how I what I've learned on how to code fast and efficiently also the streamlit course and the fast API course in my patreon I also have tiers in which you can connect with me oneon-one check those out as well

Channel: echohive

Views: 959

Keywords:

Id: XUEkRX7ybfU

Length: 13min 19sec (799 seconds)

Published: Thu May 23 2024