Design2Code:我們離自動化前端工程有多遠?Design2Code: How Far Are We From Automating Front-End Engineering?
生成式人工智慧近年來取得了快速進展,在多模態理解和程式碼生成方面實現了前所未有的能力。這可以促成一種新的前端開發範式,其中多模態語言模型可能直接將視覺設計轉換為程式碼實現。在這項工作中,我們將這視為一個Design2Code任務並進行全面的基準測試。具體來說,我們手動精心挑選了484個多樣的現實世界網頁作為測試案例,並開發了一組自動評估指標,以評估目前多模態語言模型生成程式碼實現的能力,直接呈現在給定參考網頁上,並以螢幕截圖作為輸入。我們還補充了全面的人工評估指標。我們開發了一套多模態提示方法,展示了它們對GPT-4V和Gemini Pro Vision的有效性。我們進一步微調了一個開源的Design2Code-18B模型,成功匹配了Gemini Pro Vision的性能。人類評估和自動指標都顯示,與其他模型相比,GPT-4V在這項任務中表現最佳。此外,標註者認為,GPT-4V生成的網頁在視覺外觀和內容方面可以在49%的情況下取代原始參考網頁;也許令人驚訝的是,在64%的情況下,GPT-4V生成的網頁被認為優於原始參考網頁。我們的細緻分解指標顯示,開源模型在從輸入網頁中召回視覺元素和生成正確佈局設計方面大多落後,而像文本內容和著色這樣的方面可以通過適當的微調大幅改善。