Table Of Links Bordet til venstre Abstrakt 1 INTRODUCTION 1 Introduktion 2 SYSTEM DESIGN 2 Systemdesign 3 RESULTS, DISCUSSION AND REFERENCES 3 Resultater, diskussion og referencer Systemdesign Vi introducerer Frontend Diffusion, et end-to-end LLM-drevet værktøj til frontend-kodegenerering af høj kvalitet, der spænder fra skitsering af canvas til forhåndsvisninger af hjemmesider. Som beskrevet i introduktionen går frontendgenereringsprocessen gennem tre faser: skitsering, skrivning og kodning Vores system bruger Claude 3.5 Sonnet-sprogmodellen (Sonnet)1 til al tekst- og kodegenerering. Mens Claude repræsenterer en af de mest avancerede sprogmodeller fra juli 2024, forventer vi hurtige udviklinger i Generative AI. Derfor er de opgaveovergangsteknikker, der er beskrevet her, designet til at være modelagnostiske, hvilket sikrer deres anvendelighed til fremtidige, mere avancerede Generative AI-modeller. 2.1 Sketching: Visual Layout Design and Theme Input Systemets indledende fase består af et grafisk brugergrænseflade med to nøglekomponenter: et canvaspanel til visuel repræsentation af det forestillede webstedslayout og et promptpanel til tekstbeskrivelser af webstedstemaet. Systemet konverterer derefter skitsen til SVG-format, efterfulgt af en efterfølgende transformation til JPG-format. Denne to-trins konverteringsproces blev implementeret på grundlag af empiriske beviser fra vores tests, hvilket viser, at sprogmodeller viser bedre ydeevne, når de behandler billeder i JPG-format sammenlignet med billeder i SVG-format. 2.2 Writing: Product Requirements Document Generation Denne fase omdanner brugerens visuelle og tekstmæssige input til et struktureret dokument, kaldet Product Requirements Document (PRD), som fungerer som et blueprint for webstedsudviklingsprocessen. PRD-genereringsprocessen udnytter Sonnet. Sprogmodellen opfordres specifikt til at inkludere billedtermer og størrelsesbeskrivelser (f.eks. [school(large]).Disse deskriptorer anvendes derefter til at forespørge Pexels API, som returnerer relevante billed-URL'er til indlejring i PRD. 2.3 Coding: Website Generation and Iterative Refinement Systemets kodningsfase består af to primære komponenter: (1) Initial code generation: systemet bruger den genererede PRD og den oprindelige brugerprop som input til kodegenerering, der anvender Sonnet til at producere den oprindelige website-kode; (2) iterativ forfining: systemet implementerer en iterativ forfiningsproces for automatisk at forbedre den genererede hjemmeside med rigere funktionalitet og reducerede fejl. Denne proces indebærer at analysere den oprindelige kode for at generere optimeringsforslag, fusionere disse forslag med det oprindelige tema og bruge det forbedrede tema sammen med den tidligere genererede PRD til at regenerere koden. Forfattere af: Qinshi Zhang Latisha Besariani Hendra Mohan Chi af Zijian Ding Authors: af Qinshi Zhang af Latisha Besariani Hendra Mohan Chi af Zijian Ding Denne artikel er tilgængelig på arkiv under CC BY 4.0 DEED licens. Dette papir er Under CC BY 4.0 DEED licens. Tilgængelig i arkivet Tilgængelig i arkivet
