 Hello everyone, welcome back to another chat GPT for tutorial and this one we're in we're going to be using the just released visual upload or the image upload or visual analysis image analysis tool that has just been released I'm going to show you how to use it then I'm going to give an example like this one here where I've got this generic stock that's quite nice but it's like a splash page for our website and I've basically asked chat GPT to turn that nice little image into code so we're doing image to code here and then presto as you'll see here as I scroll through it's done it it's gone ahead and churned out some pretty good code part of me that said if you are a web developer or like a HTML CSS JavaScript type you don't have to worry yet it's not perfect code you got to go through it but it's done a nice job and it helps you get to the point and it helps you speed up so it's not going to replace your job but it's definitely going to help you make you more efficient and solve some of the questions that you have as you go through it I know I'm always looking things up as I code and do that so there you go and then you'll see here it keep going through it it's done a little more and so on and so forth so let's just go ahead and get cracking so I'm just going to go to the top left here click on new chat and here you go the first thing you need to know is that if you are on like for example browse with Bing or you're on any of these other options other than the default one you're not going to be able to do this and at least in its current state so watch this when I go from browse with Bing or one of these other ones to default here at the bottom left you'll see this little tiny icon has just popped up that says attach images this is where we can go ahead and start making some image uploads so here we go I'm going to click on this tiny icon come on open AI you got to fix this but here we go I'm going to click on it and now I'm going to upload my image in this case I'm going to use this splash page here and then I'm just going to click on open now before I hit enter well actually you know what I'm going to go ahead and grab some stuff here first so let's grab the first prompt I've actually written it out so I believe it is right here so you I'm going to go ahead and copy and paste this in so we make it quicker and I'll show you how to do that one more time here you go click on attach images I'm going to add in that image and then in send a message or where the prompt is blinking type this in you are an expert UI UX designer and software developer recreate this UI with complete details do not skip anything write all the code in one file I'm doing that because it just makes it easier but you may want to separate it out if there's lots of complex code but here we go make sure you get the layout correctly use images from unsplash and pexels for the images so this is just using free stuff on the internet that you can of course always replace with your own images and then I say please take this step by step I'm going to hit enter and watch this I've uploaded the image and now it's I've it's gone ahead and read out all of that stuff that I've gone into it now here we go creating a complex creating a complete replica of the provided UI will be a long process that's fine I got lots of time I'll provide a simplified version using placeholders for the actual data and using HTML for structure CSS for styling and javascript for any potential interactive elements that is bang on here we go so here it is it's cooking it up and as it goes through it here I'm going to come back when it's done because it's going to take a few seconds show you what we got and then I'll show you how we can use chat gpt and the visual uploader here or the visual image analysis to check out our content or check out our work and then maybe give us some feedback and critique so here we go I'll come back when it's done all right so welcome back so here we go and it actually did an amazing job it broke it up into three steps the first one is set up the html structure so as I go through this here you'll see here it's got the doc type and all that good stuff and of course you can just click on this button here copy code and bang it is copied and you can go ahead and paste that into whatever you want to use if you're using open open pen or whatever it is doesn't matter you can just copy and paste that in the second step here is it's added basic CSS styling so it's created sort of like a set of styles here so you see body font header blah blah blah it's all in there and then javascript because we haven't steady we haven't really said hey we need a on click or any of those things it doesn't render it out but if you needed it and if you had questions you can always ask it so it this is literally all there is to it now if you want to go I'm going to go back to that previous chat and watch this here I can also ask it this so if I go if I go and start a new chat here here's another option that I want to show you I'm going to command v or control v this someone in here so it says you are a world-class web developer and designer with 20 years experience please critique my design and provide me with feedback on how I might improve it this is another option that you might want to consider so I'm going to click on the attach images I'm going to click on the same image and then I'm going to go ahead and I'm just going to go ahead right here and I'm just going to hit enter bang off we go so it's going to look at this and now it's going to give us feedback on it I'm going to cook this up when it's done I'll show you what it says and then we'll wrap it up all right welcome back so we've gone ahead and asked it to give a critique and some feedback and take a look at this it's broken it down to typography and branding it says maybe consider checking the kerning between letters now this might be boilerplate or you know best practice answers not very specific to the image you've uploaded but it's still good and uh let's keep a look throwing here a little bit more we've got imagery the backdrop of the image of the man overlooking the city communicates ambition vision and control which aligns with the tagline start your media and like I mean that is extremely specific feedback and criticism that is amazing um it gives you some more ideas some of the images on the news portal thumbnails are vibrant and captivating okay so it likes that composition and layout here you go through a color palette user interface elements I mean it goes on and on but literally these two prompts that I use to show you are in the description at the top there right under the subscribe button but here you go I mean this is it this is how you take images turn them into code turn them into websites get feedback on it all in chat gpt with the new image update thanks for watching