Table Of Links I-Table ye-Links Ukucaciswa 1 INTRODUCTION 1 Ukulungiswa 2 SYSTEM DESIGN 2 Uhlobo lwekhompyutha 3 RESULTS, DISCUSSION AND REFERENCES 3 Iimiphumo, iingxaki kunye neengxaki Ukucaciswa kwinkqubo I-Frontend Diffusion, i-end-to-end-powered LLM-powered high-quality frontend code generation tool, ebandakanya ukusuka ekubunjweni kwicandelo ukuya kwi-website previews. Njengoko ibhalwe kwi-introduction, umsebenzi yokuvelisa i-frontend ibandakanya iinyathelo ezintathu: i-sketching, i-writing, kunye ne-coding I-system yethu isebenzisa i-Claude 3.5 Sonnet language model (Sonnet)1 ukuba zonke iimveliso ze-text kunye ne-code generation. Nangona Claude ibonisa omnye iimodeli zonyango kakhulu ngoJulayi 2024, sincoma ukuthuthukiswa ngokushesha kwi-Generative AI. Ngoko ke, izixhobo zokusebenza ze-transition ezaziwayo apha ziye ziboniswe ukuba zibonakalayo iimodeli-agnostic, zibonakalisa ukufumaneka kwimodeli ze-Generative AI emva. 2.1 Sketching: Visual Layout Design and Theme Input Iphasi yokuqala ye-system ibandakanya i-interface ye-user graphical kunye nama-components ezimbini eziphambili: i-panel ye-panel ye-panel ye-visual representation ye-website layout, kunye ne-panel ye-panel ye-panel ye-panel ye-text descriptions ye-website theme. Emva kokuphumelela kwe-sketch ye-theme ye-user, i-user inokufumana inqubo ye-code generation nge-button "Generate". Ukuguqulwa kwakhona kwifomati ye-SVG kunye nokuguqulwa kwifomati ye-JPG. Le nqubo yokuguqulwa kwizinyathelo ezimbini yenzelwe kwiimveliso zethu ezibonakalayo, ezibonakalisa ukuba iimodeli ze-language zibonakalisa imveliso engcono ekuveliseni iifomati ze-JPG kunokuba kwiifomati ze-SVG. 2.2 Writing: Product Requirements Document Generation Ukuphendula iingcebiso ze-visual kunye ne-text ye-user kwi-document eyenziwa ngokuba yi-Product Requirements Document (PRD), leyo isebenza njenge- blueprint ye-development ye-website. I-PRD-generation process isebenzisa i-Sonnet. Ukuphucula ukubukeka kwewebsite eyenziwe, i-system ibandakanya i-Pexels API2 ye-image retrieval. I-model ye-language ifumaneka ngokukodwa ukuhlanganisa i-image terms kunye ne-size descriptions (isib. [school(large)]). Lezi zixazulwazi zithunyelwe emva kokufunda i-Pexels API, leyo ivumela i-image URL ezinxulumene yokufaka kwi-PRD. 2.3 Coding: Website Generation and Iterative Refinement I-coding phase ye-system ifumaneka kwiingxaki ezimbini eziphambili: (1) Ukuveliswa kwe-code yokuqala: inkqubo isebenzisa i-PRD esekelwe kunye ne-user prompt yokuqala njenge-inputs ye-code generating, enikeza i-Sonnet yokwenza i-code ye-website yokuqala; (2) Ukuhlaziywa kwe-iterative: inkqubo yenza i-refinement ye-iterative ekuphucula ngokuzenzakalelayo i-website esekelwe kunye ne-functionality ezininzi kunye nokunciphisa iingxaki. Ukusetyenziswa kwinkqubo yokuqala ukuvelisa iingcebiso ze-optimization, ukuxhaswa iingcebiso kunye ne-theme yokuqala, kwaye ukusetyenziswa kwe-theme eyongezelelweyo kunye ne-PRD eyenziwe ngexesha elandelayo ukuvelisa ikhowudi. I-system isebenza le nkqubo ye- iterative refinement ezininzi amaxesha (ngokuxhomekeke, n=4). Abasebenzisi angakwazi ukuhamba phakathi kwe-iterations ngokuchofoza i-preview miniatures ezibonakalayo ekupheleni kwe-interface, kwaye angakwazi ukufikelela okanye ukucacisa ikhowudi eyenziwe ngalinye i-version. Umbhali: Qingdao Zhang Latisha Besariani Hendra Ukucinga U-Zijian Ding Authors: Qingdao Zhang I-Latisha Besariani Hendra Ukucinga U-Zijian Ding Oku kunokwenzeka kwi-archiv phantsi kolawulo lwe-CC BY 4.0 DEED. Oku kunokwenzeka kwi-archiv phantsi kolawulo lwe-CC BY 4.0 DEED. Zifumaneka kwi-Archiv
