<span id="r1dp9"></span>
<span id="r1dp9"><video id="r1dp9"><ruby id="r1dp9"></ruby></video></span><ruby id="r1dp9"><video id="r1dp9"><del id="r1dp9"></del></video></ruby>
<strike id="r1dp9"></strike>
<ruby id="r1dp9"></ruby>
<th id="r1dp9"><video id="r1dp9"></video></th><strike id="r1dp9"></strike><strike id="r1dp9"><dl id="r1dp9"><ruby id="r1dp9"></ruby></dl></strike>
<span id="r1dp9"></span>
<strike id="r1dp9"><dl id="r1dp9"><ruby id="r1dp9"></ruby></dl></strike>
您當前的位置:首頁 > 電腦百科 > 程序開發 > 前端

前端不存在了?盲測64%的人更喜歡GPT-4V的設計,楊笛一等團隊新作

時間:2024-03-11 10:49:50  來源:  作者:機器之心Pro

3 月 9 日央視的一檔節目上,百度創始人、董事長兼 CEO 李彥宏指出,以后不會存在「程序員」這種職業了,因為只要會說話,人人都會具備程序員的能力?!肝磥淼?a href=http://www.hrblongxin.com/it/cxkf/bk/ target=_blank class=infotextkey>編程語言只會剩下兩種,一種叫做英文,一種叫做中文?!?/p>

自大模型技術突破以來,越來越多的行業擁有了自動化的趨勢,這其中進度最快的領域似乎是軟件開發本身。

根據你的自然語言指令,ChatGPT 這樣的工具可以和你邊聊邊生成代碼,結果逐漸靠譜且速度很快。在最近多模態技術進步以后,甚至截個圖讓 AI 自行領會意圖也能生成你想要的設計

這種方法是裝裝樣子還是來真的?AI 距離「替代程序員」還有多遠?有研究告訴我們:已經很可怕了。

我們離自動化前端工程還有多遠?

將視覺設計實現成執行功能的代碼是一項頗具挑戰性的任務,因為這需要理解視覺元素和它們的布局,然后將它們翻譯成結構化的代碼。

這個過程需要復雜的技能,也因此讓很多普通人無法構建自己的網絡應用,即便他們已經有了非常具體的構建或設計思路。不僅如此,由于這個過程需要不同領域的專業知識,因此往往需要具備不同技能的人互相合作,這就會讓整個網頁構建過程更加復雜,甚至可能導致目標設計與實際實現之間出現偏差。

如果能基于視覺設計有效地自動生成功能性代碼,那么勢必有望實現前端網頁應用開發的大眾化,也就是讓非專家人士也能輕松快捷地構建應用。

近些年,基于自然語言的代碼生成領域發展迅速,但少有人研究基于用戶界面(UI)設計來自動生成代碼實現,原因包括用戶界面存在多樣化的視覺和文本信號、結果代碼的搜索空間巨大等。

最近,多模態 LLM 進入了新的發展時代,大規模預訓練模型可以針對多種基于視覺的任務通過處理視覺和文本輸入來生成文本輸出,其中代表性的模型包括 Flamingo、GPT-4V 和 Gemini。

這樣的進展為上述任務帶來了全新的解決方案范式:取一張用戶網站設計的截圖并將其提供給系統,就能得到完整的代碼實現,然后這些代碼又可以被渲染成用戶想要的網頁。整個過程是完全端到端式的。

近日,斯坦福大學、佐治亞理工學院等機構的一個聯合團隊評估了當前的多模態模型在這一任務上的表現。

  • 論文標題:Design2Code: How Far Are We From Automating Front-End Engineering?
  • 論文地址:https://arxiv.org/pdf/2403.03163.pdf
  • 項目主頁:https://salt-nlp.Github.io/Design2Code/

他們將這個任務稱為 Design2Code。通過一系列的基準評測,我們可以從這些結果中了解自動化前端工程已經發展到哪一步了。

為了實現系統化和嚴格的基準評測,該團隊為 Design2Code 任務構建了首個真實世界基準。表 1 給出了一些示例。

為了最好地反映真實用例,他們使用了真實世界的網頁,而非用生成方法得到合成網頁。他們收集了 C4 驗證集中的網頁,并對所有樣本進行了仔細的人工調整,最終得到了 484 個高質量、高難度和多樣化的網頁。它們可代表不同復雜度的多種真實世界用例。他們執行了定性和定量分析,證明這個基準數據集覆蓋了廣泛的 html 標簽用法、領域和復雜度。

此外,為了促進高效的評估和模型開發,該團隊還為這個任務開發了一些評估指標 —— 可自動比較生成網頁的截圖與給定的截圖輸入。這些新指標考慮的維度很全面,包括邊界框匹配、文本內容、位置和所有已匹配視覺元素的顏色。

然后,該團隊調查了 GPT-4V 和 Gemini 等當前的多模態 LLM 在這一任務上的表現。為了讓這些模型能展現出自己的最優能力,該團隊使用了一些不同的 prompt 設計方案,包括文本增強式 prompt 設計和自我修正式 prompt 設計。其中文本增強式 prompt 設計是為視覺輸入提供文本元素作為補充,從而可以降低光學字符識別(OCR)的任務負載;自我修正式 prompt 設計則是讓模型比較之前的生成結果與輸入的網頁截圖,讓其自我改進。

研究者發現,在 GPT-4V 和 Gemini Pro 上,相比于使用直接 prompt 設計法,文本增強式 prompt 設計都能帶來提升,但自我修正式方法只能為 GPT-4V 帶來積極影響。

盡管這些商用模型的表現是當前最佳的,但它們都是缺乏透明度的黑箱。因此,該團隊還為這一任務貢獻了一個開源的 18B 參數的已微調模型:Design2Code-18B。

具體來說,該模型基于當前最佳的開源模型 CogAgent 構建,并使用合成的 Design2Code 數據進行了微調。令人驚訝的是,在新提出的基準上,盡管合成的訓練數據與真實的測試數據之間存在差異,但這個「小型」開源模型的表現依然頗具競爭力 —— 足以媲美 Gemini Pro Vision。這說明專用型的「小型」開放模型是有發展潛力的,并且模型也可以從合成數據中學習獲取技能。

Design2Code 基準

為了得到基準數據,該團隊首先收集了 C4 驗證集中的所有網站鏈接。然后他們將所有 css 代碼嵌入到了 HTML 文件中,從而讓每個網頁都只有一個代碼實現文件。這樣得到了共計 12.79 萬個網頁。然后他們又執行了進一步的過濾和處理,包括自動調整和人工調節。最終他們得到了包含 484 個測試樣本的基準。下表 1 比較了新提出的 Design2Code 與 Huggingface 的 WebSight 數據集。

圖 2 總結了 Design2Code 的主要主題。

至于評估指標,該團隊提出了一種高層級的視覺相似度指標,即比較參考網頁和生成網頁的相似度。另外他們還使用了一組低層級的元素匹配指標,包括塊元素、位置、文本和顏色等的匹配程度。

結果自動評估和人類評估

自動評估

表 2 和圖 3 給出了自動評估的結果。請注意,這里的比較并不是公平的,因為不同模型有不同的模型大小和訓練數據。

可以觀察到:

  • GPT-4V 在顏色之外的所有維度上都表現最好,而在顏色維度上領先的是 WebSight VLM-8B。
  • 對于 GPT-4V 和 Gemini Pro Vision,文本增強式 prompt 設計均可以成功提升塊元素匹配分數和文本相似度分數,這說明提供提取出的文本元素是有用的。
  • 對 GPT-4V 而言,自我修正式 prompt 設計可以為塊元素匹配和位置相似度帶來少量提升,但對 Gemini Pro Vision 來說卻并無提升??赡艿脑蚴牵涸跊]有外部反饋的前提下,LLM 執行內部自我校正的能力有限。
  • 通過比較 Design2Code-18B 和基礎版本的 CogAgent-18B,可以看出微調能為所有維度帶來顯著提升。
  • 相比于 WebSight VLM-8B,該團隊微調得到的 Design2Code-18B 在塊元素匹配和文本相似度指標上表現更好,但在位置相似度和顏色相似度指標上表現更差。

該團隊表示,前兩個觀察可以歸因于更強更大的基礎模型,而后兩個則可歸功于更大量的微調數據。

人類評估

該團隊也進行了人類評估。下面是主要的評估協議和結果。每一個問題都由 5 位人類標注者給出評估意見,最終結果遵從多數意見。

成對模型比較:也就是讓標注者給一對生成的網頁排名(一個來自基線方法,另一個來自受測方法),以決定哪一個與參考網頁更相似。這里的基線是對 Gemini Pro Vision 采用直接 prompt 設計,收集的數據是其它七種方法與這種基線方法的勝 / 平 / 負的比例。

結果見圖 4,可以看出:

  • GPT-4V 顯著優于其它基線,而且文本增強式 prompt 設計和自我修正式 prompt 設計能在直接 prompt 設計的基礎上進一步提升。
  • 文本增強式 prompt 設計可以少量提升 Gemini,但進一步增加自我修正方法卻沒有幫助。
  • WebSight VLM-8B 優于 Gemini 直接 prompt 設計方法(54% 的勝率和 35% 的敗率),這說明在大量數據上進行微調可以在特定領域比肩商用模型。
  • 新模型 Design2Code-18B 的表現與 Gemini Pro Vision 直接 prompt 設計方法相當(38% 的勝率和 37% 的敗率)。

直接評估:盡管有這些比較,但讀者可能還是會問:「我們離自動化前端工程還有多遠?」

為了得到一個更直觀的答案,該團隊進一步讓人類標注者比較了參考網頁與最佳的 AI 生成網頁(使用了 GPT-4V 自我修正式 prompt 設計)。他們從兩個方面進行了直接評估:

1.AI 生成的網頁能否替代原始網頁?

人類標注者認為:AI 生成的網頁中,49% 可與參考網頁互換。

2. 參考網頁和 AI 生成的網頁哪個更好?

結果有點出人意料:在 64% 的案例中,人類標注者更偏愛 GPT-4V 生成的網頁,也就是說他們認為 AI 生成的網頁比原始參考圖像的設計更好!

自動評估 vs 人類評估

該團隊也研究了自動指標與人類配對偏好之間的相關性。結果發現,人類通常更關注高層級的視覺效果和布局,而不是細節內容,這說明人類的思考方式是自上而下的。

不過,針對論文給出的結果,有人提出了不同意見,認為前端的工作流程遠比表面看上去復雜,因此真正實現「自動化前端工程」還需要一段時間。

對于這個問題,你怎么看?



Tags:前端   點擊:()  評論:()
聲明:本站部分內容及圖片來自互聯網,轉載是出于傳遞更多信息之目的,內容觀點僅代表作者本人,不構成投資建議。投資者據此操作,風險自擔。如有任何標注錯誤或版權侵犯請與我們聯系,我們將及時更正、刪除。
▌相關推薦
20k級別前端是怎么使用LocalStorage的,想知道嗎?
當咱們把咱們想緩存的東西,存在localStorage、sessionStorage中,在開發過程中,確實有利于咱們的開發,咱們想看的時候也是一目了然,點擊Application就可以看到。前言大家好,我是林...【詳細內容】
2024-03-26  Search: 前端  點擊:(10)  評論:(0)  加入收藏
前端不存在了?盲測64%的人更喜歡GPT-4V的設計,楊笛一等團隊新作
3 月 9 日央視的一檔節目上,百度創始人、董事長兼 CEO 李彥宏指出,以后不會存在「程序員」這種職業了,因為只要會說話,人人都會具備程序員的能力?!肝磥淼木幊陶Z言只會剩下兩種...【詳細內容】
2024-03-11  Search: 前端  點擊:(9)  評論:(0)  加入收藏
前端開始“銹化”?Vue團隊開源JS打包工具:基于Rust、速度極快、尤雨溪主導
Vue 團隊已正式開源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 開發的 Rollup 替代品,它提供與 Rollup 兼容的應用程序接口和插件接口...【詳細內容】
2024-03-09  Search: 前端  點擊:(11)  評論:(0)  加入收藏
兩年前端經驗還不會手寫Promise?
什么是promise?當我們處理異步操作時,我們經常需要進行一系列的操作,如請求數據、處理數據、渲染UI等。在過去,這些操作通常通過回調函數來處理,但是回調函數嵌套過多會導致代碼...【詳細內容】
2024-03-07  Search: 前端  點擊:(23)  評論:(0)  加入收藏
十個前端冷門但好用的前端工具函數庫
本文推薦十個冷門但好用的前端工具函數倉庫,它們可能沒有很高的知名度,但卻能為你解決實際問題,提高開發效率。在前端開發中,有時候我們會遇到一些常見的功能需求,但卻不知道從哪...【詳細內容】
2024-02-27  Search: 前端  點擊:(21)  評論:(0)  加入收藏
前端開發:Visual Studio Code和Visual studio如何選?
Visual Studio Code和Visual studio都是微軟的集成開發環境(IDE),那么在實際工作中該如何選擇呢。貝格前端工場對二者做一番對比,幫助您決策一下。一、Visual Studio Code的介紹...【詳細內容】
2024-02-27  Search: 前端  點擊:(44)  評論:(0)  加入收藏
網站開發中的前端和后端開發有什么區別
前端開發和后端開發都是干什么的?有哪些區別?通俗地講,前端干的工作是用戶可以直接看得見的,而后端開發的工作主要在服務端,用戶不太能直接看到。雖然前端開發和后端開發的工作有...【詳細內容】
2024-02-21  Search: 前端  點擊:(31)  評論:(0)  加入收藏
一段微信小程序前端與后端連接的代碼,帶注解
微信小程序的前端和后端連接通常涉及到使用微信小程序提供的網絡請求API與后端服務器進行通信。以下是一個簡單的示例,展示如何使用微信小程序的前端代碼向后端發送請求并處...【詳細內容】
2024-01-24  Search: 前端  點擊:(55)  評論:(0)  加入收藏
如何優雅的實現前端國際化?
JavaScript 中每個常見問題都有許多成熟的解決方案。當然,國際化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 庫可供選擇,下面就來分享一些熱門的前端國際化庫!i18nexti18ne...【詳細內容】
2024-01-17  Search: 前端  點擊:(67)  評論:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的維護者和創作者們展望2024年,分享了他們計劃中的改進。譯自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【詳細內容】
2024-01-05  Search: 前端  點擊:(89)  評論:(0)  加入收藏
▌簡易百科推薦
20k級別前端是怎么使用LocalStorage的,想知道嗎?
當咱們把咱們想緩存的東西,存在localStorage、sessionStorage中,在開發過程中,確實有利于咱們的開發,咱們想看的時候也是一目了然,點擊Application就可以看到。前言大家好,我是林...【詳細內容】
2024-03-26  前端之神  微信公眾號  Tags:前端   點擊:(10)  評論:(0)  加入收藏
前端不存在了?盲測64%的人更喜歡GPT-4V的設計,楊笛一等團隊新作
3 月 9 日央視的一檔節目上,百度創始人、董事長兼 CEO 李彥宏指出,以后不會存在「程序員」這種職業了,因為只要會說話,人人都會具備程序員的能力?!肝磥淼木幊陶Z言只會剩下兩種...【詳細內容】
2024-03-11  機器之心Pro    Tags:前端   點擊:(9)  評論:(0)  加入收藏
前端開始“銹化”?Vue團隊開源JS打包工具:基于Rust、速度極快、尤雨溪主導
Vue 團隊已正式開源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 開發的 Rollup 替代品,它提供與 Rollup 兼容的應用程序接口和插件接口...【詳細內容】
2024-03-09  OSC開源社區    Tags:Vue   點擊:(11)  評論:(0)  加入收藏
兩年前端經驗還不會手寫Promise?
什么是promise?當我們處理異步操作時,我們經常需要進行一系列的操作,如請求數據、處理數據、渲染UI等。在過去,這些操作通常通過回調函數來處理,但是回調函數嵌套過多會導致代碼...【詳細內容】
2024-03-07  海燕技術?! ∥⑿殴娞枴 ags:Promise   點擊:(23)  評論:(0)  加入收藏
網站開發中的前端和后端開發有什么區別
前端開發和后端開發都是干什么的?有哪些區別?通俗地講,前端干的工作是用戶可以直接看得見的,而后端開發的工作主要在服務端,用戶不太能直接看到。雖然前端開發和后端開發的工作有...【詳細內容】
2024-02-21  CarryData    Tags:前端   點擊:(31)  評論:(0)  加入收藏
網站程序開發中的前后端分離技術
隨著互聯網的快速發展和技術的不斷創新,傳統的網站開發模式已經難以滿足日益增長的業務需求。為了提高開發效率、增強系統的可維護性和可擴展性,前后端分離技術逐漸成為了網站...【詳細內容】
2024-01-31  網站建設派迪星航    Tags:前后端分離   點擊:(23)  評論:(0)  加入收藏
如何優雅的實現前端國際化?
JavaScript 中每個常見問題都有許多成熟的解決方案。當然,國際化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 庫可供選擇,下面就來分享一些熱門的前端國際化庫!i18nexti18ne...【詳細內容】
2024-01-17  前端充電寶  微信公眾號  Tags:前端   點擊:(67)  評論:(0)  加入收藏
Vue中Scope是怎么做樣式隔離的?
scope樣式隔離在 Vue 中,樣式隔離是通過 scoped 特性實現的。當在一個組件的 <style> 標簽上添加 scoped 特性時,Vue 會自動為這個樣式塊中的所有選擇器添加一個唯一的屬性,以...【詳細內容】
2024-01-04  海燕技術?! ∥⑿殴娞枴 ags:Vue   點擊:(80)  評論:(0)  加入收藏
vue3中 ref和 reactive的區別 ?
最近有朋友在面試過程中經常被問到這么一個問題,vue3 中的ref 和 reactive的區別在哪里,為什么 要定義兩個API 一個 api不能實現 響應式更新嗎??帶著這個疑問 ,我們 接下來進行逐...【詳細內容】
2024-01-03  互聯網高級架構師  今日頭條  Tags:vue3   點擊:(36)  評論:(0)  加入收藏
React18 與 Vue3 全方面對比
1. 編程風格 & 視圖風格1.1 編程風格 React 語法少、難度大;Vue 語法多,難度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【詳細內容】
2024-01-03  愛做夢的程序員  今日頭條  Tags:Vue3   點擊:(72)  評論:(0)  加入收藏
站內最新
站內熱門
站內頭條
日无码在线观看