Het Make It Real AI-prototype verbaast ontwikkelaars door schetsen om te zetten in werkende software

Woensdag creëerde een samenwerkende whiteboard-app-maker genaamd “tldraw” een buzz op internet uitgave Een prototype van een functie genaamd “Make it Real” waarmee gebruikers een foto van de software kunnen maken en deze tot leven kunnen brengen met behulp van kunstmatige intelligentie. Deze functie maakt gebruik van de GPT-4V API van OpenAI om vectortekeningen visueel in actie om te zetten CSS-wind in de rug En JavaScript-webcode die gebruikersinterfaces kan repliceren of zelfs eenvoudige applicaties voor games zoals doe Maar.

“Ik denk dat ik moet gaan liggen”, postte ontwerper Kevin Cannon aan het begin van de virale X-serie, waarin ook creaties centraal stonden Werkende schuifregelaars Die draait objecten op het scherm en is een interface hiervoor Objectkleuren wijzigenEn een actiespel Boter kaas en eieren. Anderen volgden snel met demonstraties om een ​​kopie van te schilderen doe Maariets creëren Werkende wijzerplaatklok Dat vinkje, teken Slangenspelgemaakt doorA Pong SpelInterpretatie A Visuele toestandsgrafiekEn veel meer.

Gebruikers kunnen Ervaring met een liveshow Maak het online echt. Voor de werking ervan is echter het verstrekken van een API-sleutel van OpenAI vereist, wat een veiligheidsrisico met zich meebrengt. Als anderen uw API-sleutel onderscheppen, kunnen ze deze gebruiken om een ​​zeer hoge rekening op uw naam te innen (OpenAI vergoedingen Door de hoeveelheid gegevens die van en naar de API wordt verplaatst). Degenen die technisch onderlegd zijn, kunnen dat wel Voer de code uit Lokaal, maar vereist nog steeds toegang tot de OpenAI API.

Teldraw, ontwikkeld door Steve Ruiz In Londen is het een open source whiteboard-tool voor samenwerking. Het biedt een eindeloos basiscanvas voor tekenen, tekst en media zonder dat u hoeft in te loggen. Het project is in 2021 van start gegaan Ontvangen $ 2,7 miljoen aan startfinanciering en steun van GitHub-sponsors. Toen de GPT-4V API onlangs werd uitgebracht, integreerde Ruiz een ontwerpprototype genaamd “Teken de gebruikersinterface“Opgericht door Sawyer Kap Om AI-aangedreven functionaliteit naar tldraw te brengen.

GPT-4V is een versie van het grote taalmodel van OpenAI dat visuele beelden kan interpreteren en als aanwijzingen kan gebruiken. Als kunstmatige intelligentie-expert Simon Willison Uitleg over XMake it Real werkt door “een base64-gecodeerd PNG-bestand te maken voor getekende componenten en dat vervolgens door te geven aan GPT-4 Vision” met een systeemprompt en instructies voor het converteren van de afbeelding naar een bestand met behulp van Tailwind. In feite is hier de volledige systeemprompt die GPT-4V vertelt hoe de invoer moet worden verwerkt en omgezet in efficiënte code:

const systemPrompt=”Je bent een ervaren webontwikkelaar die gespecialiseerd is in back-end CSS.
De gebruiker zal u een draadframe met lage resolutie van de applicatie bezorgen.
Het retourneert een enkel html-bestand dat HTML, staartwind css en JavaScript gebruikt om een ​​hifi-website te maken.
Voeg eventuele extra CSS en JavaScript toe aan het HTML-bestand.
Als je afbeeldingen hebt, upload deze dan vanaf Unsplash of gebruik effen kleurrechthoeken.
De gebruiker geeft u feedback met blauwe of rode tekst, pijlen of afbeeldingen.
De gebruiker kan ook afbeeldingen van andere websites opnemen als stijlreferenties. Breng stijlen zo goed mogelijk over, waarbij lettertypen/kleuren/lay-outs overeenkomen.
Ze kunnen u ook de HTML-tekst geven van het vorige ontwerp waarvan ze willen dat u deze repliceert.
Implementeer de wijzigingen die zij van u vragen.
In het wireframe verschijnt de HTML van het vorige ontwerp als een witte rechthoek.
Gebruik een creatieve licentie om de app verder uit te werken.
Gebruik JavaScript- en unpkg-modules om eventuele noodzakelijke afhankelijkheden te importeren.’

Naarmate meer mensen GPT-4V proberen en integreren met andere raamwerken, zullen we de komende weken waarschijnlijk meer nieuwe toepassingen van OpenAI’s visieanalysetechnologie zien verschijnen. Ook op woensdag gebruikte een ontwikkelaar de GPT-4V API om realtime live commentaar te creëren voor een videofeed met een nep-AI-gegenereerde stem van David Attenborough, die we afzonderlijk hebben besproken.

Op dit moment voelt het alsof we een voorproefje hebben gekregen van de potentiële toekomstige staat van softwareontwikkeling – of op zijn minst interface-ontwerp – waarbij het creëren van een werkend prototype net zo eenvoudig is als het creëren van een visueel model en het hebben van het AI-model doe de rest. Als ontwikkelaar Michael Dobakov boeken Toen hij zijn eigen creatie, Make It Real, presenteerde: “Oké, @tldraw is officieel gek. Het is echt interessant dat we na vijf jaar klaar zijn… Ik kan het tempo van de innovatie niet meer bijhouden.”