It’s super fun. It cost me $0.90 to iterate through 10 builds using GPT4. “The pong game works as described.”
On Wednesday, an app called “tldraw” Make waves on the Internet Release A prototype of an upcoming feature is called “Make it Real” The feature lets users create a software image and then bring it to life with AI. OpenAI’s GPT-4V is used to convert a drawing into a working program. Tailwind CSS JavaScript code can be used to create games or simple user interfaces. Breakout.
“I think I need to go lie down,” Designer Kevin Cannon posted at the beginning of a viral X post that featured the creation functioning sliders An interface that allows you to rotate objects on the screen Change the colors of objectsA working game of tic-tac-toe. Other people soon began to demonstrate how they could draw a copy of BreakoutCreate a working dial clock The ticking sounds and the drawing of the Snake game. Making a Pong Game DescriptionInterpreting a Visual State ChartYou can find out more about it here. More information about the product.
Users can Live Demo: Try it out! Make It Real Online. The API key is not secure, but it’s required to run the program. Your API key could be used by others to run up a large bill on your behalf (OpenAI). Charges By the amount of data flowing into and out of APIs). The technically inclined can Run the code OpenAI API access is required for the local version, but not for the OpenAI API.
Tldraw is developed by Steve Ruiz In London is an open-source collaborative whiteboard. It is a simple, infinite canvas that allows for text, media and drawing without requiring any login. The project was launched in 2021. Receive a 10% discount GitHub sponsors are providing $2.7m in seed funding. Ruiz integrated the “Design Prototype” when The GPT-4V launched recently.draw-a-ui” Created by Sawyer Hood Bring AI-powered functionality to tldraw.
GPT-4V can be used as a prompt for visual images. It is an OpenAI large language model. AI expert Simon Willison X explainedMake it Real by “generating a base64 encoded PNG of the drawn components, then passing that to GPT-4 Vision” Tailwind is provided with a prompt that tells you how to convert an image into a file. This is the entire system prompt which tells GPT-4V what to do with the inputs.
const systemPrompt=”You are an expert web developer who specializes in tailwind css.
A user will provide you with a low-fidelity wireframe of an application.
You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.
Include any extra CSS and JavaScript in the html file.
If you have any images, load them from Unsplash or use solid colored rectangles.
The user will provide you with notes in blue or red text, arrows, or drawings.
The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design”S html will be displayed as a rectangle of white.
Make the application more detailed by using creative license.
Use JavaScript Modules and Unpkg to import all necessary dependencies.
We’ll see novel applications of OpenAI vision-parsing technologies in the coming weeks as more people experiment with GPT-4V, and combine it other frameworks. A developer also used the GPT-4V to create a real-time, live narration of a video by a fake AI generated David Attenborough’s voice on Wednesday. We have covered this separately.
For now, it feels like we’ve been given a preview of a possible future mode of software development—or interface design, at the very least—where creating a working prototype is as simple as making a visual mock-up and having an AI model do the rest. As developer Michael Dubakov Writer When displaying his own Make It Real, “OK, @tldraw is officially insane. It is really interesting where we end up in 5 years… I can’t keep up with innovation pace anymore.”