Use JavaScript modules and unpkg to import any necessary dependencies.'Īs more people experiment with GPT-4V and combine it with other frameworks, we'll likely see more novel applications of OpenAI's vision-parsing technology emerging in the weeks ahead. Use creative license to make the application more fleshed out. In the wireframe, the previous design's html will appear as a white rectangle. They may also provide you with the html of a previous design that they want you to iterate from.Ĭarry out any changes they request from you. Transfer the styles as best as you can, matching fonts / colors / layouts. ![]() The user may also include images of other websites as style references. The user will provide you with notes in blue or red text, arrows, or drawings. If you have any images, load them from Unsplash or use solid colored rectangles. Include any extra CSS and JavaScript in the html file. You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website. ![]() In fact, here is the full system prompt that tells GPT-4V how to handle the inputs and turn them into functioning code:Ĭonst systemPrompt = 'You are an expert web developer who specializes in tailwind css.Ī user will provide you with a low-fidelity wireframe of an application. As AI expert Simon Willison explains on X, Make it Real works by "generating a base64 encoded PNG of the drawn components, then passing that to GPT-4 Vision" with a system prompt and instructions to turn the image into a file using Tailwind. ![]() GPT-4V is a version of OpenAI's large language model that can interpret visual images and use them as prompts.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |