{"id":1203930,"date":"2023-11-16T22:30:00","date_gmt":"2023-11-17T03:30:00","guid":{"rendered":"https:\/\/www.prime-wow.com\/?p=1203930"},"modified":"2023-11-16T22:30:00","modified_gmt":"2023-11-17T03:30:00","slug":"make-it-real-ai-prototype-turns-drawings-into-working-software","status":"publish","type":"post","link":"https:\/\/www.prime-wow.com\/?p=1203930","title":{"rendered":"&#039;Make It Real&#039; AI Prototype Turns Drawings Into Working Software"},"content":{"rendered":"<p>An anonymous reader quotes a report from Ars Technica: On Wednesday, a collaborative whiteboard app maker called &#8220;tldraw&#8221; made waves online by releasing a prototype of a feature called &#8220;Make it Real&#8221; that lets users draw an image of software and bring it to life using AI. The feature uses OpenAI&#8217;s GPT-4V API to visually interpret a vector drawing into functioning Tailwind CSS and JavaScript web code that can replicate user interfaces or even create simple implementations of games like Breakout. &#8220;I think I need to go lie down,&#8221; posted designer Kevin Cannon at the start of a viral X thread that featured the creation of functioning sliders that rotate objects on screen, an interface for changing object colors, and a working game of tic-tac-toe. Soon, others followed with demonstrations of drawing a clone of Breakout, creating a working dial clock that ticks, drawing the snake game, making a Pong game, interpreting a visual state chart, and much more.<\/p>\n<p>Tldraw, developed by Steve Ruiz in London, is an open source collaborative whiteboard tool. It offers a basic infinite canvas for drawing, text, and media without requiring a login. Launched in 2021, the project received $2.7 million in seed funding and is supported by GitHub sponsors. When The GPT-4V API launched recently, Ruiz integrated a design prototype called &#8220;draw-a-ui&#8221; created by Sawyer Hood to bring the AI-powered functionality into tldraw. GPT-4V is a version of OpenAI&#8217;s large language model that can interpret visual images and use them as prompts. As AI expert Simon Willison explains on X, Make it Real works by &#8220;generating a base64 encoded PNG of the drawn components, then passing that to GPT-4 Vision&#8221; with a system prompt and instructions to turn the image into a file using Tailwind. You can experiment with a live demo of Make It Real online. However, running it requires providing an API key from OpenAI, which is a security risk.<\/p>\n<p \/>\n<div class=\"share_submission\" style=\"position:relative\">\n<a class=\"slashpop\" href=\"http:\/\/twitter.com\/home?status='Make+It+Real'+AI+Prototype+Turns+Drawings+Into+Working+Software%3A+https%3A%2F%2Ftech.slashdot.org%2Fstory%2F23%2F11%2F16%2F2335234%2F%3Futm_source%3Dtwitter%26utm_medium%3Dtwitter\"><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/11\/twitter_icon_large-563.png\" \/><\/a><br \/>\n<a class=\"slashpop\" href=\"http:\/\/www.facebook.com\/sharer.php?u=https%3A%2F%2Ftech.slashdot.org%2Fstory%2F23%2F11%2F16%2F2335234%2Fmake-it-real-ai-prototype-turns-drawings-into-working-software%3Futm_source%3Dslashdot%26utm_medium%3Dfacebook\"><img decoding=\"async\" src=\"https:\/\/www.prime-wow.com\/wp-content\/uploads\/2023\/11\/facebook_icon_large-282.png\" \/><\/a><\/p>\n<\/div>\n<p><a href=\"https:\/\/tech.slashdot.org\/story\/23\/11\/16\/2335234\/make-it-real-ai-prototype-turns-drawings-into-working-software?utm_source=rss1.0moreanon&amp;utm_medium=feed\">Read more of this story<\/a> at Slashdot.<\/p>\n<p>&#013;<br \/>\n&#013;<br \/>\nSource: Slashdot &#8211; <a href=\"https:\/\/tech.slashdot.org\/story\/23\/11\/16\/2335234\/make-it-real-ai-prototype-turns-drawings-into-working-software?utm_source=rss1.0mainlinkanon&amp;utm_medium=feed\" target=\"_blank\" rel=\"noopener\">&#8216;Make It Real&#8217; AI Prototype Turns Drawings Into Working Software<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>An anonymous reader quotes a report from Ars Technica: On Wednesday, a collaborative whiteboard app maker called &#8220;tldraw&#8221; made waves online by releasing a prototype of a feature called &#8220;Make it Real&#8221; that lets users draw an image of software &hellip; <a href=\"https:\/\/www.prime-wow.com\/?p=1203930\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1203931,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101,110],"tags":[100],"class_list":["post-1203930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slashdot","category-unfiltered-rss","tag-slashdot"],"_links":{"self":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts\/1203930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1203930"}],"version-history":[{"count":0,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/posts\/1203930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=\/wp\/v2\/media\/1203931"}],"wp:attachment":[{"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1203930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1203930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prime-wow.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1203930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}