GPT-4-Vision: Wireframe-to-HTML & Tailwind CSS with Draw-A-UI

--- type: transcript date: 2023-11-22 youtube_id: cwyj2okgAio --- # Transcript: GPT-4-Vision: Wireframe-to-HTML & Tailwind CSS with Draw-A-UI all right in this video I'm going to be showing you how to get up and running with this new open source project that I came across that is pretty neat called draw a UI so what draw a UI is is it leverages the TL draw Library as well as the gp4 vision API to generate these simple wireframe based websites so you'll be able to create a simple sort of scaffold or starting off point from a wireframe simply by drawing it so instead of actually having to type out all those divs and P tags and whatever you typically do all those Tailwind classes which can often times be verbose you'll be able to have sort of a starting off point for a lot of that so to get up and running it's very very simple all you have to do is pull down the repo once you have it pulled down go within the directory of the repo and you'll have to create a env. looc now within your env. looc just head over to platform. open.com API Keys generate an API key and put it within here and then you can save that out so once you've done that you can simply bun install or mpm install get all the packages from the package Json all installed here and then you can Bun Run Dev so once it's running uh it will should just take a couple seconds here to get the next all set up and you'll have a server all started so you have a blank page I have an example here and it's very intuitive to use so you can just create shapes with the selectors here you can erase things you can put text you can even draw if you want uh you can you know shift select things you can copy things paste things delete things all of the features are sort of there you know it's it's fully featured it's very robust and intuitive now there are some tweaks to the core TL draw here obviously to make this application uh what it is and one of them being this make real button so here I just sort of have a nonsensical web page but I just wanted to see what it would generate so I have like a search bar um some some text uh some sort of ambiguous boxes and things that are sort of like akin to like what like a head shot might look like so once you have it all set up all you have to do is click that button here you have that loading and essentially what this is doing while it's loading so it's converting this image to an SVG then that SVG is being converted to a PNG and then it's being sent to the open AI endpoint and then it's returning all of the HTML and classes to generate this so here you see it did a reasonable job you know that search bar is spanning across the whole page this looks um sort of centered it looks like these aren't centered this might be centered these are spaced a little differently than what I had there but the broad Strokes are largely there right and you can go ahead and look at the code here so you can imagine if you had to type out all of this HTML and all of the different uh Tailwind classes to get this set up it would have taken much longer than you know the minute I took to draw that wireframe there and then like the 10 seconds or so likely less than that that it took to actually return a response so pretty powerful stuff um now the thing with this is It's generating plain HTML with Tailwind classes I just wanted to point to you where you can go ahead and start to look into this if you're considering uh building this into say something that maybe generates react components or or whatever framework that you might be using so to go within the project now if you go within the app here so the main files are within route and page so page is going to be the front end this is going to be where all the TL draw stuff is you see where the make real button is that they layered in here as well as a handful of the other things like the HTML that's being set and whatnot now if you want to change the prompt to the GPD 4 model you can just do it within the the rout here so here you see what it's explicitly passing in with the image and it's just simply saying turn this into a single HTML file using Tailwind so you could imagine coming in here tweaking this and say make it a single HTML file with bootstrap or make this a react component with um Tailwind or what have you now if you're going to do that you're going to have to change things like the preview because if you're using something like jsx you're going to have to something to compile it but this is sort of the starting off point where you can sort of go in and start to tweak it now the other thing I noticed with the project so they're not leveraging the opening ey wrapper for uh their typescript and JavaScript implementation they sort of are just making post requests which is is totally fine here um but that could be another way you could potentially simplify uh some of the logic here if you're looking to actually build upon this so just a quick one today I just wanted to more point you to this project cuz I thought it was uh very interesting uh implementation for the New gp4 Vision API so I encourage you to start a repo uh shout out to the contributors here uh great work uh I had no issues setting it up um no issues in using it and yeah I look forward to seeing all of you in the next one