Make REAL HTML with GPT-4 Vision!!!

Key Takeaways

if you want to see magic to make it real this video is exactly going to teach you this video has been quite viral on the internet where you can go there and then create something and then that would actually convert that into a working HTML code I mean everybody has been creating these kind of demos and then sharing it online this has been quite insane and then people are loving this and for this for you to use this you have to use a service called make real this is part of TLD draw.com which is something that I've been using for a very very long time I've recomended to a lot of friends this is like one of the best whiteboarding tools that I use and it is also open source so in this video I'm going to show you if you do not have GPD 4 key and if you have chat GPT Plus subscription how to make this useful I have atmost respect for the developer I'm not trying to replicate their work this is purely trying to show you how you can build the same thing if you do not have opena API key like if you have a chat GPT Plus subscription like me you don't have opena APA key or you do not want to use opena AP key to spend credit rather you want to use your chat GPD Plus subscription this video is exactly going to teach you step by step how to do that and the first thing I'm going to do is I'm going to copy the prompt from this um developer and uh I'm really sorry if this is not what you intended when you made it open source but I truly appreciate this project and let's get started with the video first of all what is the service you can see the quick demo where somebody comes here and then draw something and then make clicks make real and then it will make it real like you get a HTML small if frame or widget that will actually give you the final uh HTML page like in a single HTML it's like an Spa single page application but for that you need to enter your opena AP key which is supposedly should have the gp4 access but if you do not have gp4 access that's where this video is going to be helpful so I have chat GPT Plus subscription first of all let me show you a demo so I have taken one of this demo videos and I took this particular demo screenshot and I went ahead and then uh asked the chat GB plus to create it for me it created it for me and if you go here I got this uh so this is this is the input make a gradient uh the shape gets filled you've got angle linear or radial which is a radio button and then you've got like this color Pickers and copy to CSS copy to PNG and uh you can see that in my Cod pin. iio it is available for me to use I can change the gradient I can pick any color and uh you can you can see like I'm doing it live I can pick any color and you can just copy the CSS you want linear you can have linear and uh this is super magical how did I get to this stage the first thing that I did is I wanted to know what is the code or the prompt that the developers used so for that I went to this open source project please make sure you start the repository it could mean a lot to the developer so I went to this open source project which is make real from TLD draw and then I saw what is a prompt that they've given and I literally copied the prompt so you are an expert web developer and all the information that it has got so basically you're telling GPD 4 that once you get the wireframe you should give me um the HTML file and make sure it is a single HTML file that we can just host it like it's it should not have separate CSS it should not have separate JavaScript everything should be in line everything should be within one HTML page and this is the final user prompt when you give the screenshot here are the latest wireframes could you make a new website based on these wireframes and nodes send back just the HTML file once you have uh once you have this content particularly this is honestly like the gold mine of everything here so once you have this all you have to do is now you have to open your new chat GPT plus like um like the one that I have here let me create a new one for you so this is how the new one looks like the first thing that you need to do is you need to copy this entire thing which is a prompt you copy the entire prompt once you copy the entire prompt first send it to it so this way chat GPT Plus or the GPT 4 will acknowledge it's going to tell you okay absolutely I'm ready to assist whenever you want just give me the screenshot and everything I'm going to do it now is a part where we are going to go create something like I've already created this P timer you can see I said pood timer start button stop button and I have the pomodora timer which has start button and a stop button so instead of that let me try something else now to say this one and uh we have a ball and we have some blocks and I'm going to call it Atari bricks I don't know what do you call this Atari bricks and we are going to have score okay um add some context this is the game where the ball smashes the braks once the player misses catching the catching the ball with the plate the game is over let's see if it can understand once again a little ambitious because you know this also requires lot more nuances but at least like I hope this might be done so I'm going to run this I mean copy this come back here send this copy the system prompt here and come back here paste it and then send it ideally I should have created a new chat otherwise you know you hit the context window all these kind of limits but I think given I assume that this could be at this point 100K so let's see if it can just do it so I call it Atari bricks this is a game and uh it's trying to create the HTML and it is probably going to add everything that we want I'm not sure if it is going to give me the JavaScript in itself in case of my Pomo it actually give me JavaScript as well so all I have to do is like go here click Start and and um it starts and I can just click stop and it stops it's same thing with my make a gradient as well so you can see here um the gradient works the CSS is copied so I can like literally paste the CSS somewhere like here and have the CSS so so in this case everything work fine that also tells you how important it is for you to make the right kind of wireframe at the right kind of detail it's still not a child's play for you to just go draw and then simp expect magic to happen but even then I guess like this is quite magical to be honest like um for me once again it is telling me place the logic just just add the logic and give me the final HTML so that I can just play okay so once again it did not add the logic so I'm going to just give it to add the logic and then get back to me so our code is ready you can go here copy the code go back here paste the code and then let's see if we actually have a game so oh that's amazing so I don't know how to move this at this point the x-axis um but uh I think this is quite awesome so oh I don't want to hold save it we come back again reload the site paste it and um I think the game starts without us doing anything we should probably have like a stop button and I should have like some control over moving this at this point but as you can see like this is magical so the entire thing is available here I'm going to link The Source prompt in the YouTube description and if you can use uh TL draw make sure you use real draw because that's where all the idea and everything came from and uh if you want to create this as a GPT you can still do it like it's um it's super simple all you have to do is go here and create a new GPT let me know like if that is something that you would be interested in I can make a separate video about it like how to quickly make a GPD out of it so that all you have to do is go paste the screenshot and get the output but I think for now this is quite magical and U I didn't know that this could be done just with gp4 and chat GPT plus I was so surprised and happy that it worked that's why I ended up making actually a video otherwise I wouldn't have made a video let me know in the comment section what do you feel about it and if it is something that you tried let me know in the comment section what is the outcome was it like really good see you in another video Happy prompting peace