First Page Design
Site Theme
On Wednesday, a collaborative whiteboard app maker called “tldraw” made an online splash by releasing a prototype of a feature called “Make it Real” that allows users to draw a software symbol and bring it to life through AI. The feature uses OpenAI’s GPT-4V API to visually interpret a vector drawing in functional Tailwind CSS and JavaScript internet code that can mirror user interfaces or even create undeniable implementations of games like Breakout.
“I think I want to stop bed,” designer Kevin Cannon posted at the start of a viral X thread showing the creation of sliders that rotate elements on the screen, an interface for converting colored elements, and a functional game of ticking. Soon others followed with demonstrations of how to draw a Breakout clone, create a spinning dial clock, draw the snake game, create a game of Pong, act as a visual prestige table, and much more.
Users can enjoy a live demo of Make It Real online. However, running it requires offering an OpenAI API key, which is a security risk. If others intercept your API key, they can use it to accumulate a large amount of money. bill on your call (OpenAI fees based on the amount of data coming in and out of your API). Those who are technically susceptible can run the code locally, but this will still require OpenAI’s API.
Tldraw, developed through Steve Ruiz in London, is an open-source collaborative whiteboard tool. It offers an infinite canvas fundamental for drawing, text, and media that require a connection. Launched in 2021, the task has earned $2. 7 million in seed investment and is subsidized through GitHub backers. In the recent release of the GPT-4V API, Ruiz incorporated a design prototype called “draw-a-ui” created through Sawyer Hood to integrate AI-based capability into tldraw.
GPT-4V is an edition of OpenAI’s giant language style that can interpret visual symbols and use them as sparks. As artificial intelligence expert Simon Willison explains in the Tailwind engraving symbol. In fact, here’s the full formula that tells GPT-4V how to take care of the input and turn it into running code:
As more people experiment with GPT-4V and combine it with other frameworks, we will most likely see more new programs emerge from OpenAI’s generation of visual analytics in the coming weeks. Also on Wednesday, a developer used the GPT-4V API. to create a live, real-time narration of a video through an AI-generated fake David Attenborough voice, which we cover separately.
For now, it looks like we’ve glimpsed an imaginable mode of long-term software progression (or interface design, at least) where creating a running prototype is as undeniable as creating a visual mockup and having an AI. . Style does the rest. As developer Michael Dubakov wrote when introducing his own Make It Real creation: “OK, @tldraw is officially crazy. It’s actually attractive where we’ll be five years from now. . . I can’t keep up with the pace of innovation. “
Join the Ars Orbital Transmission email to receive weekly updates in your inbox. Sign up →