Table Of Links Levo od stola Abstrakcija 1 INTRODUCTION 1 Uvod 2 SYSTEM DESIGN 2 Dizajn sistema 3 RESULTS, DISCUSSION AND REFERENCES 3 Rezultati, rasprava i reference Dizajn sistema Predstavljamo Frontend difuziju, alat za proizvodnju visokokvalitetnog frontend koda koji pokreće LLM od kraja do kraja, koji se kreće od skiciranja platna do pregleda web stranica. Kao što je opisano u uvodu, zadatak generacije frontenda napreduje kroz tri faze: skiciranje, pisanje i kodiranje Naš sistem koristi Claude 3.5 Sonnet jezik model (Sonnet)1 za sve tekst i generaciju koda. Iako Claude predstavlja jedan od najnaprednijih jezičnih modela od jula 2024. godine, predviđamo brz razvoj u generacijskom AI. stoga, tehnike prijelaza zadataka opisane ovdje su dizajnirane da budu model-agnosticne, osiguravajući njihovu primjenjivost na buduće, naprednije generacijske AI modele. 2.1 Sketching: Visual Layout Design and Theme Input Početna faza sistema sastoji se od grafičkog korisničkog sučelja sa dve ključne komponente: platnenim panelom za vizualnu reprezentaciju predviđenog rasporeda sajta i pozivnim panelom za tekstualne opise teme sajta. Sistem zatim konvertuje skicu u SVG format, nakon čega slijedi naknadna transformacija u JPG format. Ovaj proces konverzije u dva koraka realizovan je na osnovu empirijskih dokaza iz naših testova, pokazujući da jezični modeli pokazuju bolje performanse pri obradi slika u JPG formatu u odnosu na slike u SVG formatu. 2.2 Writing: Product Requirements Document Generation Ova faza pretvara vizualne i tekstualne ulaze korisnika u strukturirani dokument, poznat kao Dokument o zahtjevima za proizvod (PRD), koji služi kao plan za proces razvoja web stranice. Proces generiranja PRD koristi Sonnet. Jezikovni model je posebno zatražen da uključi izraze slika i opise veličine (npr. [škola(veliki)]). Ovi opisnici se kasnije koriste za upit Pexels API-ja, koji vraća relevantne URL-ove slika za uključivanje u PRD. 2.3 Coding: Website Generation and Iterative Refinement Faza kodiranja sustava sastoji se od dvije glavne komponente: (1) Inicijalna generacija koda: sistem koristi generisani PRD i originalni korisnički poziv kao ulaz za generaciju koda, koristeći Sonnet za proizvodnju početnog koda web stranice; (2) Iterativno rafiniranje: sistem implementira iterativni proces rafiniranja kako bi automatski poboljšao generiranu web stranicu s bogatijom funkcionalnošću i smanjenim greškama. Ovaj proces uključuje analizu početnog koda kako bi se generisali prijedlozi za optimizaciju, spajanje tih prijedloga s izvornom temom i korištenje poboljšane teme zajedno sa prethodno generisanim PRD-om za regeneraciju koda.Sustav izvodi ovaj iterativni proces rafiniranja više puta (podrazumevano, n = 4).Korisnici mogu da se kreću između iteracija odabirom predgleda miniatura prikazanih na dnu sučelja i mogu pristupiti ili kopirati generisani kod za svaku verziju. Autori : Qinshi Zhang Latisha Besariani Hendra Mohan Chi Zidžijan Ding Authors: Činši Zhang Latisha Besariani Hendra Mohan Či Zidžijan Ding Ovaj dokument je dostupan na archiv pod licencom CC BY 4.0 DEED. Ovaj papir je pod licencom CC BY 4.0 DEED. available on arxiv Dostupno u Arhivu
