Der Make It Real AI-Prototyp überrascht Entwickler, indem er Skizzen in funktionierende Software verwandelt

Am Mittwoch sorgte ein kollaborativer Whiteboard-App-Hersteller namens „tldraw“ für Aufsehen im Internet freigeben Ein Prototyp einer Funktion namens „Make it Real“, die es Benutzern ermöglicht, ein Bild der Software zu zeichnen und sie mithilfe künstlicher Intelligenz zum Leben zu erwecken. Diese Funktion nutzt die GPT-4V-API von OpenAI, um das Zeichnen von Vektoren visuell in die Tat umzusetzen CSS-Rückenwind Und JavaScript-Webcode, der Benutzeroberflächen nachbilden oder sogar einfache Anwendungen für Spiele wie erstellen kann fortfahren.

„Ich glaube, ich muss mich hinlegen“, postete Designer Kevin Cannon zu Beginn der Viral-X-Serie, zu der auch das Schaffen gehörte Funktionierende Schieberegler Das dreht Objekte auf dem Bildschirm und ist eine Schnittstelle zu Objektfarben ändernUnd ein Actionspiel Tic Tac Toe. Andere folgten schnell mit Demonstrationen, von denen man eine Kopie malen konnte fortfahrenetwas erschaffen Funktionierende Zifferblattuhr Dieses Häkchen, zeichne Schlangenspielhergestellt von A Pong SpielInterpretation A Visuelles ZustandsdiagrammUnd eine Menge mehr.

Benutzer können Erfahrung mit einer Live-Show Machen Sie es online real. Für den Betrieb ist jedoch die Bereitstellung eines API-Schlüssels von OpenAI erforderlich, was ein Sicherheitsrisiko darstellt. Wenn andere Ihren API-Schlüssel abfangen, können sie damit eine sehr hohe Rechnung in Ihrem Namen eintreiben (OpenAI Gebühren Durch die Datenmenge, die zu und von seiner API verschoben wird. Wer technisch versiert ist, kann das Führen Sie den Code aus Lokal, erfordert aber weiterhin Zugriff auf die OpenAI-API.

Teldraw, entwickelt von Steve Ruiz In London handelt es sich um ein Open-Source-Whiteboard-Tool für die Zusammenarbeit. Es bietet eine endlose Grundfläche für Zeichnungen, Texte und Medien, ohne dass Sie sich anmelden müssen. Das Projekt wurde im Jahr 2021 gestartet Erhalten 2,7 Millionen US-Dollar an Startkapital und Unterstützung von GitHub-Sponsoren. Als die GPT-4V-API kürzlich veröffentlicht wurde, integrierte Ruiz einen Design-Prototyp namens „Zeichnen Sie die Benutzeroberfläche„Gegründet von Sawyer Hood Um KI-gestützte Funktionalität in tldraw zu integrieren.

GPT-4V ist eine Version des großen Sprachmodells von OpenAI, das visuelle Bilder interpretieren und als Eingabeaufforderungen verwenden kann. Als Experte für künstliche Intelligenz Simon Willison Erklärt zu XMake it Real funktioniert, indem „eine Base64-codierte PNG-Datei für gezeichnete Komponenten erstellt und diese dann an GPT-4 Vision übergeben wird“ mit einer Systemaufforderung und Anweisungen zum Konvertieren des Bildes in eine Datei mit Tailwind. Tatsächlich ist hier die vollständige Systemaufforderung, die GPT-4V mitteilt, wie die Eingabe verarbeitet und in effizienten Code umgewandelt werden soll:

const systemPrompt=“Sie sind ein erfahrener Webentwickler, der sich auf Back-End-CSS spezialisiert hat.
Der Benutzer stellt Ihnen ein niedrigaufgelöstes Wireframe der Anwendung zur Verfügung.
Es wird eine einzelne HTML-Datei zurückgegeben, die HTML, Tailwind-CSS und JavaScript verwendet, um eine Website mit hoher Wiedergabetreue zu erstellen.
Fügen Sie zusätzliches CSS und JavaScript in die HTML-Datei ein.
Wenn Sie Bilder haben, laden Sie diese von Unsplash hoch oder verwenden Sie einfarbige Rechtecke.
Der Benutzer gibt Ihnen Feedback mit blauem oder rotem Text, Pfeilen oder Grafiken.
Der Benutzer kann auch Bilder anderer Websites als Stilreferenzen einfügen. Vermitteln Sie Stile so gut Sie können und passen Sie Schriftarten/Farben/Layouts an.
Sie stellen Ihnen möglicherweise auch den HTML-Text des vorherigen Designs zur Verfügung, das Sie replizieren möchten.
Implementieren Sie alle von Ihnen gewünschten Änderungen.
Im Wireframe erscheint der HTML-Code des vorherigen Designs als weißes Rechteck.
Verwenden Sie eine kreative Lizenz, um die App konkreter zu gestalten.
Verwenden Sie JavaScript- und Unpkg-Module, um alle erforderlichen Abhängigkeiten zu importieren.

Da immer mehr Menschen mit GPT-4V experimentieren und es in andere Frameworks integrieren, werden in den kommenden Wochen wahrscheinlich weitere neue Anwendungen der Vision-Analyse-Technologie von OpenAI auftauchen. Ebenfalls am Mittwoch nutzte ein Entwickler die GPT-4V-API, um einen Echtzeit-Live-Kommentar eines Video-Feeds mit einer gefälschten KI-generierten Stimme von David Attenborough zu erstellen, worüber wir separat berichtet haben.

Im Moment scheint es, als hätten wir eine Vorschau auf den potenziellen zukünftigen Stand der Softwareentwicklung – oder zumindest des Interface-Designs – erhalten, bei dem die Erstellung eines funktionierenden Prototyps so einfach ist wie die Erstellung eines visuellen Modells und die Erstellung des KI-Modells mach den Rest. Als Entwickler Michael Dobakov Bücher Als er seine eigene Kreation Make It Real vorstellte, sagte er: „Okay, @tldraw ist offiziell verrückt. Es ist wirklich interessant, dass wir nach 5 Jahren fertig sind … ich kann mit dem Innovationstempo nicht mehr mithalten.“