Table Of Links Tisch links Abstrakt 1 INTRODUCTION 1 Einführung 2 SYSTEM DESIGN 2 Systemdesign 3 RESULTS, DISCUSSION AND REFERENCES 3 Ergebnisse, Diskussion und Referenzen Systemdesign Wir präsentieren Frontend Diffusion, ein hochwertiges Frontend-Code-Generierungs-Tool, das von End-to-End-LLM angetrieben wird und vom Skizzen von Leinwänden bis hin zu Vorschauen von Websites reicht. Wie in der Einführung beschrieben, geht die Frontend-Generierungsaufgabe durch drei Stufen voran: Skizzen, Schreiben und Codieren Unser System nutzt das Claude 3.5 Sonnet-Sprachmodell (Sonnet)1 für alle Text- und Codegenerationen. Während Claude ab Juli 2024 eines der fortschrittlichsten Sprachmodelle darstellt, erwarten wir schnelle Entwicklungen in der generativen KI.Daher sind die hier beschriebenen Task-Transition-Techniken so konzipiert, dass sie model-agnostic sind und ihre Anwendbarkeit für zukünftige, fortschrittlichere generative AI-Modelle gewährleisten. 2.1 Sketching: Visual Layout Design and Theme Input Die Anfangsphase des Systems umfasst eine grafische Benutzeroberfläche mit zwei Schlüsselkomponenten: ein Leinwandpanel für die visuelle Darstellung des vorgestellten Website-Layouts und ein Anrufpanel für textliche Beschreibungen des Website-Themas. Dieses zweistufige Konvertierungsprozess wurde auf der Grundlage empirischer Beweise aus unseren Tests implementiert, die zeigen, dass Sprachmodelle bei der Verarbeitung von Bildern im JPG-Format im Vergleich zu Bildern im SVG-Format eine bessere Leistung aufweisen. 2.2 Writing: Product Requirements Document Generation Diese Phase verwandelt die visuellen und textuellen Eingaben des Benutzers in ein strukturiertes Dokument, das als Product Requirements Document (PRD) bezeichnet wird, das als Blaupause für den Entwicklungsprozess der Website dient.Der PRD-Generierungsprozess nutzt Sonnet. Das Sprachmodell wird speziell aufgefordert, Bildbegriffe und Größenbeschreibungen (z. B. [schule(groß)])]) aufzunehmen. Diese Beschreibungen werden anschließend verwendet, um die Pexels API zu abfragen, die relevante Bild-URLs zur Einbeziehung in die PRD zurückgibt. 2.3 Coding: Website Generation and Iterative Refinement Die Codierungsphase des Systems besteht aus zwei Hauptkomponenten: (1) Initial Code Generation: Das System nutzt die generierte PRD und den ursprünglichen Benutzer-Prompt als Inputs für die Code-Generation, wobei Sonnet verwendet wird, um den ursprünglichen Website-Code zu produzieren; (2) Iterative Verfeinerung: Das System implementiert einen iterativen Verfeinerungsprozess, um die generierte Website automatisch mit reicher Funktionalität und reduzierten Mängeln zu verbessern. Dieser Prozess beinhaltet die Analyse des ursprünglichen Codes, um Optimierungsvorschläge zu generieren, die Fusion dieser Vorschläge mit dem ursprünglichen Thema und die Verwendung des erweiterten Themas zusammen mit dem zuvor erzeugten PRD, um den Code zu regenerieren.Das System führt diesen iterativen Verfeinerungsprozess mehrmals aus (standardmäßig n = 4). Die Autoren: Qinshi Zhang Latisha Besariani Hendra Mohan Chi Zijian Ding Authors: von Qinshi Zhang Latisha Besariani Hendra Mohan Chi von Zijian Ding Dieses Dokument ist unter der CC BY 4.0 DEED-Lizenz verfügbar. Dieses Dokument ist unter der CC BY 4.0 DEED-Lizenz verfügbar. Verfügbar im Archiv
