這項(xiàng)由上海AI實(shí)驗(yàn)室、浙江大學(xué)、中國(guó)科學(xué)技術(shù)大學(xué)深圳分校等機(jī)構(gòu)聯(lián)合完成的突破性研究發(fā)表于2025年9月，論文編號(hào)為arXiv:2509.24709。研究團(tuán)隊(duì)包括陳陽(yáng)、劉明浩、沈雨帆等多位來自不同院校的研究者，項(xiàng)目由上海AI實(shí)驗(yàn)室的沈雨帆教授領(lǐng)導(dǎo)。有興趣深入了解的讀者可以通過該論文編號(hào)查詢完整論文內(nèi)容。

當(dāng)我們?yōu)g覽網(wǎng)頁(yè)時(shí)，看到精美的界面、流暢的動(dòng)畫效果和各種交互功能，很少有人會(huì)想到這背后需要大量的代碼來支撐。傳統(tǒng)上，要讓AI學(xué)會(huì)制作網(wǎng)頁(yè)，研究者們通常只給它看靜態(tài)的截圖，然后讓它生成對(duì)應(yīng)的代碼。這就像讓一個(gè)人僅憑一張照片就要畫出整幅畫作一樣，缺少了很多重要信息。

然而，真實(shí)的網(wǎng)頁(yè)遠(yuǎn)比靜態(tài)截圖復(fù)雜得多。當(dāng)用戶點(diǎn)擊按鈕時(shí)頁(yè)面會(huì)發(fā)生變化，當(dāng)鼠標(biāo)懸停在某個(gè)區(qū)域時(shí)會(huì)出現(xiàn)新的內(nèi)容，當(dāng)用戶填寫表單時(shí)系統(tǒng)會(huì)給出相應(yīng)反饋。這些動(dòng)態(tài)的交互過程包含了網(wǎng)頁(yè)運(yùn)作的核心邏輯，但在傳統(tǒng)的AI訓(xùn)練方法中卻被完全忽略了。

正是在這樣的背景下，研究團(tuán)隊(duì)提出了一個(gè)革命性的想法：為什么不讓AI觀看完整的用戶操作視頻，就像人類學(xué)習(xí)使用軟件一樣，通過觀察整個(gè)交互過程來理解網(wǎng)頁(yè)的工作原理呢？

為了驗(yàn)證這個(gè)想法，研究團(tuán)隊(duì)開發(fā)了名為IWR-Bench的全新評(píng)測(cè)基準(zhǔn)。這個(gè)基準(zhǔn)的核心理念可以用一個(gè)簡(jiǎn)單的比喻來理解：如果說傳統(tǒng)方法是讓AI通過看房屋照片來設(shè)計(jì)建筑圖紙，那么新方法就是讓AI觀看整個(gè)房屋的使用過程——看到人們?nèi)绾伍_門、如何使用各個(gè)房間、如何操作各種設(shè)施，然后根據(jù)這些觀察來重新構(gòu)建出完全相同的房屋。

一、從靜態(tài)截圖到動(dòng)態(tài)視頻：AI網(wǎng)頁(yè)理解的全新維度

傳統(tǒng)的網(wǎng)頁(yè)代碼生成任務(wù)就像讓一位廚師僅憑成品菜肴的照片來還原整道菜的制作過程。廚師能夠看到最終的擺盤效果，也許能猜出一些基本食材，但對(duì)于具體的烹飪步驟、調(diào)料的添加時(shí)機(jī)、火候的控制等關(guān)鍵信息卻一無(wú)所知。同樣地，現(xiàn)有的AI模型雖然能夠根據(jù)網(wǎng)頁(yè)截圖生成基本的頁(yè)面布局，但對(duì)于用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么、表單提交后如何處理數(shù)據(jù)、動(dòng)畫效果如何實(shí)現(xiàn)等交互邏輯卻無(wú)從得知。

研究團(tuán)隊(duì)發(fā)現(xiàn)，這種局限性源于一個(gè)根本問題：靜態(tài)截圖無(wú)法傳達(dá)網(wǎng)頁(yè)的時(shí)間維度信息。網(wǎng)頁(yè)不是一幅靜止的畫作，而是一個(gè)動(dòng)態(tài)的系統(tǒng)，它會(huì)根據(jù)用戶的操作產(chǎn)生相應(yīng)的變化。這些變化過程中蘊(yùn)含著網(wǎng)頁(yè)功能實(shí)現(xiàn)的核心邏輯，也是用戶體驗(yàn)的關(guān)鍵所在。

為了解決這個(gè)問題，研究團(tuán)隊(duì)提出了交互式網(wǎng)頁(yè)重建這一全新任務(wù)。這項(xiàng)任務(wù)要求AI模型不僅要看懂網(wǎng)頁(yè)的外觀，更要理解網(wǎng)頁(yè)的行為模式。就像學(xué)習(xí)駕駛汽車一樣，僅僅知道汽車的外觀是不夠的，還必須了解如何操作方向盤、如何踩剎車、如何變速等具體的駕駛技能。

在這個(gè)新任務(wù)中，AI模型接收的輸入包括兩個(gè)關(guān)鍵部分：首先是一段用戶操作視頻，記錄了用戶與網(wǎng)頁(yè)交互的完整過程，包括點(diǎn)擊、輸入、滾動(dòng)等各種操作以及頁(yè)面的相應(yīng)變化；其次是網(wǎng)頁(yè)使用的所有靜態(tài)資源，如圖片、圖標(biāo)、字體等文件。有了這些完整的信息，AI就能像人類一樣通過觀察和學(xué)習(xí)來理解網(wǎng)頁(yè)的工作原理。

這種方法的創(chuàng)新性在于它模擬了人類學(xué)習(xí)新軟件的自然過程。當(dāng)我們第一次使用某個(gè)應(yīng)用程序時(shí)，通常會(huì)先觀察其他人的操作演示，然后自己動(dòng)手嘗試。通過這種觀察和實(shí)踐的結(jié)合，我們逐漸掌握了軟件的功能和使用方法。研究團(tuán)隊(duì)正是希望讓AI也能具備這種學(xué)習(xí)能力。

二、精心構(gòu)建的評(píng)測(cè)基準(zhǔn)：真實(shí)世界的網(wǎng)頁(yè)挑戰(zhàn)

為了全面評(píng)估AI在交互式網(wǎng)頁(yè)重建任務(wù)上的表現(xiàn)，研究團(tuán)隊(duì)花費(fèi)了大量精力構(gòu)建了IWR-Bench評(píng)測(cè)基準(zhǔn)。這個(gè)基準(zhǔn)的構(gòu)建過程就像策劃一場(chǎng)全面的技能考試，需要覆蓋各種難度等級(jí)和應(yīng)用場(chǎng)景，確保能夠準(zhǔn)確反映AI的真實(shí)能力水平。

整個(gè)基準(zhǔn)包含113個(gè)精心挑選的任務(wù)，這些任務(wù)全部來源于真實(shí)的網(wǎng)站，涵蓋了從簡(jiǎn)單的博客瀏覽到復(fù)雜的在線游戲等各種應(yīng)用場(chǎng)景。為了確保評(píng)測(cè)的全面性，研究團(tuán)隊(duì)建立了一套三維分類體系，就像為這些任務(wù)建立了一個(gè)立體的分類檔案。

在交互復(fù)雜度維度上，任務(wù)被分為四個(gè)等級(jí)。最簡(jiǎn)單的L1級(jí)別類似于閱讀一篇長(zhǎng)文章，主要涉及頁(yè)面滾動(dòng)等基本操作。L2級(jí)別增加了簡(jiǎn)單的狀態(tài)管理，比如在電商網(wǎng)站上篩選商品或切換頁(yè)面標(biāo)簽，就像操作一個(gè)簡(jiǎn)單的遙控器。L3級(jí)別涉及多步驟的復(fù)雜工作流程，例如完成一個(gè)多頁(yè)面的訂票流程，需要在不同的組件之間傳遞信息。最高的L4級(jí)別則要求實(shí)現(xiàn)復(fù)雜的算法邏輯，比如重建一個(gè)完整的在線游戲，這就像要求AI理解并實(shí)現(xiàn)一套完整的游戲規(guī)則。

在視覺復(fù)雜度維度上，任務(wù)同樣分為四個(gè)等級(jí)。V1級(jí)別是極簡(jiǎn)的單欄或雙欄布局，類似于簡(jiǎn)潔的文檔頁(yè)面。V2級(jí)別采用標(biāo)準(zhǔn)的網(wǎng)格布局，就像整齊排列的商品展示頁(yè)面。V3級(jí)別包含現(xiàn)代化的非對(duì)稱設(shè)計(jì)，具有重疊元素和復(fù)雜的視覺效果。V4級(jí)別則是信息密集的儀表板界面，包含大量圖表、表格和數(shù)據(jù)卡片。

在應(yīng)用領(lǐng)域維度上，基準(zhǔn)涵蓋了五個(gè)主要類別：商務(wù)服務(wù)類（如電商平臺(tái)、預(yù)訂系統(tǒng)）、知識(shí)教育類（如學(xué)術(shù)網(wǎng)站、新聞門戶）、生產(chǎn)力工具類（如計(jì)算器、項(xiàng)目管理面板）、娛樂媒體類（如游戲、流媒體平臺(tái)）以及生活社區(qū)類（如社交論壇、個(gè)人博客）。這種分類確保了AI模型需要面對(duì)各種不同的功能需求和視覺風(fēng)格。

數(shù)據(jù)收集過程同樣經(jīng)過精心設(shè)計(jì)。研究團(tuán)隊(duì)首先由專業(yè)的網(wǎng)頁(yè)開發(fā)人員從真實(shí)網(wǎng)站中選擇了200個(gè)候選任務(wù)，然后通過嚴(yán)格的篩選和平衡過程，最終確定了113個(gè)高質(zhì)量的任務(wù)。對(duì)于每個(gè)任務(wù)，團(tuán)隊(duì)都錄制了完整的用戶操作視頻，同時(shí)收集了所有相關(guān)的靜態(tài)資源文件。

特別值得注意的是，為了防止AI模型利用文件名中的語(yǔ)義信息作弊，研究團(tuán)隊(duì)將所有資源文件重命名為隨機(jī)的編號(hào)，比如將"logo.png"改名為"asset001.png"。這就像在考試中要求學(xué)生僅憑圖片內(nèi)容而非圖片標(biāo)題來識(shí)別物體，確保了評(píng)測(cè)的公平性和準(zhǔn)確性。

每個(gè)任務(wù)還包含詳細(xì)的操作軌跡注釋，記錄了每一步操作的類型、參數(shù)、自然語(yǔ)言描述以及相應(yīng)的驗(yàn)證條件。這些注釋就像是標(biāo)準(zhǔn)答案，為后續(xù)的自動(dòng)化評(píng)測(cè)提供了可靠的參考依據(jù)。

三、智能評(píng)測(cè)系統(tǒng)：像人類專家一樣判斷網(wǎng)頁(yè)質(zhì)量

評(píng)估AI生成的網(wǎng)頁(yè)質(zhì)量是一個(gè)極具挑戰(zhàn)性的任務(wù)，就像評(píng)判一道菜的味道一樣，需要從多個(gè)維度進(jìn)行綜合考量。傳統(tǒng)的評(píng)測(cè)方法往往只能檢查代碼的語(yǔ)法正確性或頁(yè)面的像素級(jí)相似度，但這遠(yuǎn)遠(yuǎn)不夠。一個(gè)真正優(yōu)秀的網(wǎng)頁(yè)不僅要外觀精美，更要功能完備、交互流暢。

為了解決這個(gè)難題，研究團(tuán)隊(duì)開發(fā)了一套創(chuàng)新的"智能評(píng)委"系統(tǒng)，這個(gè)系統(tǒng)能夠像人類專家一樣從功能性和美觀性兩個(gè)角度全面評(píng)估網(wǎng)頁(yè)質(zhì)量。

在功能性評(píng)估方面，系統(tǒng)采用了程序化交互測(cè)試的方法。就像汽車出廠前需要進(jìn)行路試一樣，每個(gè)AI生成的網(wǎng)頁(yè)都要接受一系列標(biāo)準(zhǔn)化的操作測(cè)試。系統(tǒng)會(huì)按照預(yù)先定義的操作序列，在生成的網(wǎng)頁(yè)上執(zhí)行點(diǎn)擊、輸入、滾動(dòng)等各種操作，然后檢查頁(yè)面是否產(chǎn)生了預(yù)期的反應(yīng)。

這個(gè)過程就像是讓一個(gè)虛擬用戶按照劇本在網(wǎng)頁(yè)上進(jìn)行操作，每一步都有明確的預(yù)期結(jié)果。如果某個(gè)按鈕應(yīng)該在點(diǎn)擊后顯示一個(gè)彈窗，系統(tǒng)就會(huì)檢查彈窗是否確實(shí)出現(xiàn)了。如果某個(gè)表單應(yīng)該在提交后顯示成功消息，系統(tǒng)就會(huì)驗(yàn)證這個(gè)消息是否正確顯示。

為了確保評(píng)測(cè)的準(zhǔn)確性，研究團(tuán)隊(duì)還引入了邏輯斷言驗(yàn)證機(jī)制。這就像是在每個(gè)關(guān)鍵步驟設(shè)置檢查點(diǎn)，不僅要看操作是否能夠執(zhí)行，還要驗(yàn)證執(zhí)行結(jié)果是否符合預(yù)期。例如，在一個(gè)計(jì)算器應(yīng)用中，不僅要檢查數(shù)字按鈕是否可以點(diǎn)擊，還要驗(yàn)證計(jì)算結(jié)果是否正確。

在美觀性評(píng)估方面，系統(tǒng)采用了多層次的視覺質(zhì)量分析方法。首先是低層次的特征比較，包括文本內(nèi)容的相似度分析和視覺結(jié)構(gòu)的對(duì)比。文本相似度分析使用了先進(jìn)的光學(xué)字符識(shí)別技術(shù)，能夠提取頁(yè)面中的所有文本內(nèi)容，然后計(jì)算與參考頁(yè)面的相似程度。視覺結(jié)構(gòu)分析則使用了深度學(xué)習(xí)的特征提取技術(shù)，能夠理解頁(yè)面的布局、顏色分布、元素排列等視覺特征。

除了這些技術(shù)指標(biāo)，系統(tǒng)還引入了高層次的語(yǔ)義評(píng)估。這部分由一個(gè)大型多模態(tài)語(yǔ)言模型擔(dān)任"專家評(píng)委"，它能夠像人類設(shè)計(jì)師一樣從整體效果、用戶體驗(yàn)、視覺和諧性等角度對(duì)頁(yè)面進(jìn)行綜合評(píng)價(jià)。這個(gè)AI評(píng)委接受過大量高質(zhì)量網(wǎng)頁(yè)設(shè)計(jì)案例的訓(xùn)練，具備了較強(qiáng)的審美判斷能力。

最終的評(píng)分系統(tǒng)結(jié)合了功能性分?jǐn)?shù)和美觀性分?jǐn)?shù)，形成一個(gè)綜合的質(zhì)量評(píng)價(jià)。功能性分?jǐn)?shù)反映了網(wǎng)頁(yè)的實(shí)用性和交互正確性，美觀性分?jǐn)?shù)反映了頁(yè)面的視覺質(zhì)量和用戶體驗(yàn)。兩個(gè)分?jǐn)?shù)按照一定權(quán)重組合，得出最終的綜合評(píng)分。

這套評(píng)測(cè)系統(tǒng)的另一個(gè)重要特點(diǎn)是其高度的自動(dòng)化程度。整個(gè)評(píng)測(cè)過程無(wú)需人工干預(yù)，能夠快速處理大量的測(cè)試案例，這為大規(guī)模的模型比較研究提供了可能。同時(shí)，系統(tǒng)還具備良好的可重現(xiàn)性，相同的輸入總是能夠得到相同的評(píng)測(cè)結(jié)果，確保了研究結(jié)果的可靠性。

四、28個(gè)頂級(jí)AI模型的全面較量：現(xiàn)實(shí)與理想的巨大差距

研究團(tuán)隊(duì)對(duì)28個(gè)當(dāng)前最先進(jìn)的大型視覺語(yǔ)言模型進(jìn)行了全面測(cè)試，這場(chǎng)測(cè)試就像是一次頂級(jí)廚師的廚藝大賽，參賽者包括了來自不同公司和研究機(jī)構(gòu)的明星AI模型。測(cè)試結(jié)果揭示了一個(gè)令人深思的現(xiàn)實(shí)：即使是最強(qiáng)大的AI模型，在這項(xiàng)任務(wù)上的表現(xiàn)也遠(yuǎn)未達(dá)到理想水平。

在所有參測(cè)模型中，表現(xiàn)最好的是OpenAI的GPT-5，獲得了36.35分的綜合評(píng)分。這個(gè)分?jǐn)?shù)雖然在所有模型中排名第一，但距離滿分100分還有很大差距，就像一個(gè)學(xué)生在滿分100分的考試中只考了36分一樣。緊隨其后的是Anthropic公司的Claude-Sonnet-4思維增強(qiáng)版，得分為34.62分，以及字節(jié)跳動(dòng)的Doubao-seed-1.6，得分為34.02分。

更令人擔(dān)憂的是功能性和美觀性之間的巨大差距。以表現(xiàn)最好的GPT-5為例，它在視覺美觀性方面得到了64.25分，這表明它已經(jīng)能夠較好地重現(xiàn)網(wǎng)頁(yè)的外觀效果，生成的頁(yè)面在視覺上與原始網(wǎng)頁(yè)有一定程度的相似性。然而，在功能性方面，它只得到了24.39分，這意味著生成的網(wǎng)頁(yè)中大部分交互功能都無(wú)法正常工作。

這種差距就像是制作了一個(gè)外觀精美的汽車模型，看起來幾乎和真車一模一樣，但是引擎無(wú)法啟動(dòng)、方向盤不能轉(zhuǎn)動(dòng)、剎車也不起作用。用戶雖然能夠欣賞到美觀的界面設(shè)計(jì)，但卻無(wú)法進(jìn)行任何有意義的交互操作。

開源模型的表現(xiàn)相對(duì)較弱，其中表現(xiàn)最好的是阿里云的Qwen3-VL思維增強(qiáng)版，得分為31.15分。大部分開源模型的綜合得分都在20分以下，這反映了開源社區(qū)在這一領(lǐng)域與商業(yè)模型之間仍存在較大差距。

特別引人注意的是，專門針對(duì)視頻理解任務(wù)優(yōu)化的模型表現(xiàn)反而不如通用的多模態(tài)模型。例如，VideoLLaMA3-7B和InternVideo-2.5-Chat-8B這兩個(gè)視頻專用模型的得分分別只有13.67分和10.07分。這個(gè)現(xiàn)象表明，僅僅具備視頻理解能力是不夠的，要完成交互式網(wǎng)頁(yè)重建任務(wù)，模型還需要具備強(qiáng)大的代碼生成能力、邏輯推理能力和多模態(tài)信息整合能力。

研究團(tuán)隊(duì)還發(fā)現(xiàn)了一個(gè)有趣的現(xiàn)象：配備"思維鏈"功能的模型版本普遍比基礎(chǔ)版本表現(xiàn)更好。例如，Claude-Sonnet-4的思維增強(qiáng)版得分為34.62分，而基礎(chǔ)版只有34.00分；Gemini-2.5-Pro的思維增強(qiáng)版得分為30.36分，基礎(chǔ)版為30.31分。這種改進(jìn)雖然存在但并不顯著，說明僅僅增加推理步驟并不能從根本上解決問題。

從任務(wù)難度角度分析，研究團(tuán)隊(duì)發(fā)現(xiàn)所有模型在處理靜態(tài)內(nèi)容時(shí)表現(xiàn)相對(duì)較好，但一旦涉及交互邏輯就會(huì)出現(xiàn)明顯的性能下降。在最簡(jiǎn)單的L1級(jí)別任務(wù)（主要是頁(yè)面滾動(dòng)）中，GPT-5能夠達(dá)到61.85分，但在最復(fù)雜的L4級(jí)別任務(wù)（算法邏輯實(shí)現(xiàn)）中，得分驟降至25.26分。這種下降趨勢(shì)在所有模型中都非常明顯，表明當(dāng)前的AI技術(shù)在理解和實(shí)現(xiàn)復(fù)雜交互邏輯方面還存在根本性的不足。

視覺復(fù)雜度對(duì)模型性能的影響相對(duì)較小，但仍然可以觀察到一定的規(guī)律。大多數(shù)模型在處理極簡(jiǎn)布局時(shí)表現(xiàn)最好，隨著視覺復(fù)雜度的增加，性能會(huì)有所下降，但下降幅度遠(yuǎn)小于交互復(fù)雜度帶來的影響。

五、深入剖析：AI在網(wǎng)頁(yè)重建中的核心挑戰(zhàn)

通過對(duì)實(shí)驗(yàn)結(jié)果的深入分析，研究團(tuán)隊(duì)識(shí)別出了當(dāng)前AI模型在交互式網(wǎng)頁(yè)重建任務(wù)中面臨的幾個(gè)關(guān)鍵挑戰(zhàn)，這些挑戰(zhàn)就像是阻礙AI進(jìn)步的幾座大山，需要逐一攻克。

首要挑戰(zhàn)是時(shí)間序列理解能力的不足。網(wǎng)頁(yè)交互本質(zhì)上是一個(gè)時(shí)間驅(qū)動(dòng)的過程，用戶的每個(gè)操作都會(huì)在特定時(shí)刻觸發(fā)特定的響應(yīng)，而這些響應(yīng)之間往往存在復(fù)雜的依賴關(guān)系?，F(xiàn)有的AI模型雖然能夠處理視頻輸入，但大多數(shù)模型對(duì)于時(shí)間維度信息的理解還停留在較為淺層的水平。

這就像讓一個(gè)人觀看一段舞蹈視頻后要求其編寫舞蹈教程一樣。觀看者可能能夠描述舞者的動(dòng)作和姿態(tài)，但要準(zhǔn)確把握每個(gè)動(dòng)作的時(shí)機(jī)、動(dòng)作之間的連接方式以及整體的節(jié)奏感，則需要更深層次的理解能力。同樣地，AI模型需要不僅僅是"看到"用戶點(diǎn)擊了按鈕，還要理解這個(gè)點(diǎn)擊動(dòng)作的時(shí)機(jī)、它與前后操作的關(guān)系，以及它應(yīng)該觸發(fā)什么樣的響應(yīng)。

第二個(gè)挑戰(zhàn)是狀態(tài)管理邏輯的復(fù)雜性?，F(xiàn)代網(wǎng)頁(yè)應(yīng)用通常維護(hù)著復(fù)雜的內(nèi)部狀態(tài)，這些狀態(tài)會(huì)根據(jù)用戶操作動(dòng)態(tài)變化，并影響頁(yè)面的顯示和行為。例如，在一個(gè)購(gòu)物車應(yīng)用中，添加商品會(huì)改變商品數(shù)量狀態(tài)，這個(gè)狀態(tài)變化會(huì)同時(shí)影響購(gòu)物車圖標(biāo)上的數(shù)字顯示、總價(jià)計(jì)算以及結(jié)算按鈕的可用性。

當(dāng)前的AI模型在理解這種多層次、相互關(guān)聯(lián)的狀態(tài)管理邏輯方面還存在明顯不足。它們往往能夠理解單個(gè)操作的直接效果，但很難把握狀態(tài)變化在系統(tǒng)中的傳播過程和累積效應(yīng)。這就像是理解一個(gè)復(fù)雜機(jī)械裝置的工作原理，僅僅知道齒輪會(huì)轉(zhuǎn)動(dòng)是不夠的，還需要理解齒輪之間的傳動(dòng)關(guān)系、動(dòng)力的傳遞路徑以及整個(gè)系統(tǒng)的協(xié)調(diào)運(yùn)作方式。

第三個(gè)挑戰(zhàn)是動(dòng)態(tài)資源匹配的準(zhǔn)確性。在實(shí)際的網(wǎng)頁(yè)開發(fā)中，頁(yè)面元素的顯示往往依賴于外部資源文件，如圖片、圖標(biāo)、字體等。AI模型需要能夠準(zhǔn)確識(shí)別視頻中出現(xiàn)的各種視覺元素，并將它們與提供的資源文件進(jìn)行正確匹配。

這個(gè)過程面臨多重困難。首先，同一個(gè)資源在視頻中可能以不同的尺寸、角度或光照條件出現(xiàn)，增加了識(shí)別的難度。其次，某些資源可能只在特定的交互狀態(tài)下才會(huì)顯示，需要模型具備較強(qiáng)的上下文理解能力。最后，為了防止模型利用文件名信息作弊，所有資源文件都被重命名為隨機(jī)編號(hào)，這進(jìn)一步增加了匹配的挑戰(zhàn)性。

第四個(gè)挑戰(zhàn)是代碼生成的完整性和正確性。即使AI模型能夠完全理解網(wǎng)頁(yè)的交互邏輯，將這種理解轉(zhuǎn)化為可執(zhí)行的代碼仍然是一個(gè)巨大的挑戰(zhàn)。網(wǎng)頁(yè)代碼需要同時(shí)處理HTML結(jié)構(gòu)、CSS樣式和JavaScript邏輯，這三者之間存在復(fù)雜的相互依賴關(guān)系。

HTML負(fù)責(zé)頁(yè)面的基本結(jié)構(gòu)，CSS控制視覺樣式和布局，JavaScript實(shí)現(xiàn)交互邏輯和動(dòng)態(tài)行為。任何一個(gè)部分的錯(cuò)誤都可能導(dǎo)致整個(gè)頁(yè)面無(wú)法正常工作。而且，現(xiàn)代網(wǎng)頁(yè)開發(fā)通常需要處理異步事件、DOM操作、事件綁定等高級(jí)概念，這些概念對(duì)于沒有深入編程經(jīng)驗(yàn)的AI模型來說都是巨大的挑戰(zhàn)。

第五個(gè)挑戰(zhàn)是長(zhǎng)上下文信息的有效利用。IWR-Bench中的任務(wù)通常包含較長(zhǎng)的操作序列，平均每個(gè)任務(wù)包含約9個(gè)操作步驟，有些復(fù)雜任務(wù)甚至包含數(shù)十個(gè)步驟。AI模型需要在整個(gè)序列中保持一致的理解，并能夠利用前面的信息來指導(dǎo)后續(xù)的代碼生成。

然而，當(dāng)前大多數(shù)模型在處理長(zhǎng)序列時(shí)都會(huì)遇到注意力分散和信息遺忘的問題。就像人類在閱讀長(zhǎng)篇小說時(shí)可能會(huì)忘記前面章節(jié)的細(xì)節(jié)一樣，AI模型也容易在處理長(zhǎng)序列時(shí)丟失重要的上下文信息，導(dǎo)致生成的代碼缺乏一致性和完整性。

六、技術(shù)突破的啟示與未來發(fā)展方向

盡管實(shí)驗(yàn)結(jié)果顯示當(dāng)前AI模型在交互式網(wǎng)頁(yè)重建任務(wù)上還存在顯著不足，但這項(xiàng)研究為該領(lǐng)域的未來發(fā)展指明了重要方向。研究團(tuán)隊(duì)的工作不僅揭示了現(xiàn)有技術(shù)的局限性，更重要的是為克服這些局限性提供了明確的路線圖。

首先，這項(xiàng)研究證明了基于視頻的交互理解是一個(gè)可行且有價(jià)值的研究方向。雖然當(dāng)前模型的性能還不夠理想，但它們確實(shí)展現(xiàn)出了從視頻中學(xué)習(xí)交互模式的能力。這就像早期的飛行實(shí)驗(yàn)雖然只能飛行幾十米，但證明了人類飛行的可能性，為后續(xù)的技術(shù)發(fā)展奠定了基礎(chǔ)。

在模型架構(gòu)方面，研究結(jié)果表明未來需要開發(fā)專門針對(duì)時(shí)序交互理解的新型架構(gòu)。傳統(tǒng)的視覺語(yǔ)言模型主要針對(duì)靜態(tài)圖像和文本處理進(jìn)行優(yōu)化，對(duì)于時(shí)間維度信息的處理能力相對(duì)有限。未來的模型需要更好地整合時(shí)間序列建模技術(shù)，能夠理解操作的時(shí)序關(guān)系和因果依賴。

這種新架構(gòu)可能需要采用分層的處理方式：底層負(fù)責(zé)提取單幀的視覺特征，中層負(fù)責(zé)建模幀間的時(shí)序關(guān)系，頂層負(fù)責(zé)理解整體的交互邏輯。每一層都需要針對(duì)特定的任務(wù)需求進(jìn)行專門設(shè)計(jì)和優(yōu)化。

在訓(xùn)練方法方面，研究表明需要開發(fā)更加有效的多模態(tài)學(xué)習(xí)策略。當(dāng)前的模型往往在視覺理解和代碼生成之間存在脫節(jié)，無(wú)法有效地將視覺觀察轉(zhuǎn)化為可執(zhí)行的代碼邏輯。未來的訓(xùn)練方法需要更好地對(duì)齊這兩個(gè)模態(tài)之間的表示空間，建立從視覺感知到代碼實(shí)現(xiàn)的直接映射關(guān)系。

一個(gè)可能的方向是采用漸進(jìn)式學(xué)習(xí)策略，先讓模型學(xué)會(huì)理解簡(jiǎn)單的交互模式，然后逐步增加復(fù)雜度。這就像學(xué)習(xí)彈奏樂器一樣，先掌握基本的音符和節(jié)拍，然后逐步學(xué)習(xí)復(fù)雜的旋律和和聲。通過這種方式，模型可以在較低復(fù)雜度的任務(wù)上建立堅(jiān)實(shí)的基礎(chǔ)，然后將這些基礎(chǔ)技能擴(kuò)展到更復(fù)雜的場(chǎng)景中。

在數(shù)據(jù)構(gòu)建方面，這項(xiàng)研究為未來的數(shù)據(jù)集建設(shè)提供了重要的參考框架。IWR-Bench的三維分類體系和詳細(xì)的注釋規(guī)范為構(gòu)建更大規(guī)模、更高質(zhì)量的訓(xùn)練數(shù)據(jù)集提供了藍(lán)圖。未來的研究可以在此基礎(chǔ)上擴(kuò)展任務(wù)的覆蓋范圍，增加更多類型的網(wǎng)頁(yè)應(yīng)用和交互模式。

特別重要的是，研究團(tuán)隊(duì)提出的自動(dòng)化評(píng)測(cè)框架為該領(lǐng)域建立了標(biāo)準(zhǔn)化的評(píng)估體系。這個(gè)框架不僅能夠客觀評(píng)估模型性能，還能夠提供詳細(xì)的錯(cuò)誤分析，幫助研究者識(shí)別模型的具體不足之處。這種標(biāo)準(zhǔn)化評(píng)測(cè)體系對(duì)于推動(dòng)整個(gè)領(lǐng)域的發(fā)展具有重要意義。

從應(yīng)用前景來看，一旦這項(xiàng)技術(shù)達(dá)到實(shí)用水平，將會(huì)帶來革命性的影響。普通用戶將能夠通過簡(jiǎn)單的操作演示來創(chuàng)建復(fù)雜的網(wǎng)頁(yè)應(yīng)用，大大降低了軟件開發(fā)的門檻。這就像從需要專業(yè)編程技能才能開發(fā)軟件，轉(zhuǎn)變?yōu)橥ㄟ^直觀的演示就能實(shí)現(xiàn)相同的功能。

在教育領(lǐng)域，這項(xiàng)技術(shù)可以幫助學(xué)生更好地理解網(wǎng)頁(yè)設(shè)計(jì)和交互概念。通過觀察AI從視頻中學(xué)習(xí)的過程，學(xué)生可以更直觀地理解網(wǎng)頁(yè)功能實(shí)現(xiàn)的邏輯，從而提高學(xué)習(xí)效果。

在軟件開發(fā)領(lǐng)域，這項(xiàng)技術(shù)可以作為原型設(shè)計(jì)和快速開發(fā)的有力工具。開發(fā)者可以先創(chuàng)建一個(gè)簡(jiǎn)單的演示，然后讓AI生成初始的代碼框架，再在此基礎(chǔ)上進(jìn)行進(jìn)一步的優(yōu)化和完善。

七、研究方法的創(chuàng)新價(jià)值與技術(shù)貢獻(xiàn)

這項(xiàng)研究在方法論上的創(chuàng)新為整個(gè)人工智能領(lǐng)域提供了重要的啟示。研究團(tuán)隊(duì)不是簡(jiǎn)單地將現(xiàn)有技術(shù)應(yīng)用到新問題上，而是從根本上重新思考了AI學(xué)習(xí)網(wǎng)頁(yè)開發(fā)的方式，提出了一套全新的范式。

傳統(tǒng)的網(wǎng)頁(yè)代碼生成研究遵循的是"靜態(tài)到靜態(tài)"的映射思路，即從靜態(tài)截圖生成靜態(tài)代碼。這種方法雖然在某些場(chǎng)景下有效，但本質(zhì)上忽略了網(wǎng)頁(yè)作為動(dòng)態(tài)系統(tǒng)的核心特征。研究團(tuán)隊(duì)提出的"動(dòng)態(tài)到動(dòng)態(tài)"映射思路，即從動(dòng)態(tài)交互視頻生成動(dòng)態(tài)交互代碼，更加符合網(wǎng)頁(yè)應(yīng)用的本質(zhì)特征。

這種思路轉(zhuǎn)變的意義不僅局限于網(wǎng)頁(yè)開發(fā)領(lǐng)域。在軟件工程的許多其他分支中，我們同樣面臨著如何讓AI理解動(dòng)態(tài)系統(tǒng)行為的挑戰(zhàn)。例如，在移動(dòng)應(yīng)用開發(fā)、桌面軟件設(shè)計(jì)、甚至是物理系統(tǒng)建模等領(lǐng)域，都可以借鑒這種基于行為觀察的學(xué)習(xí)方法。

在技術(shù)實(shí)現(xiàn)層面，研究團(tuán)隊(duì)開發(fā)的多模態(tài)評(píng)測(cè)系統(tǒng)具有重要的參考價(jià)值。這個(gè)系統(tǒng)成功地將主觀的網(wǎng)頁(yè)質(zhì)量評(píng)估轉(zhuǎn)化為客觀的量化指標(biāo)，為類似的評(píng)測(cè)任務(wù)提供了可借鑒的框架。特別是功能性評(píng)測(cè)和美觀性評(píng)測(cè)的分離設(shè)計(jì)，使得研究者能夠更精確地定位模型的具體不足之處。

評(píng)測(cè)系統(tǒng)中的"智能評(píng)委"設(shè)計(jì)也具有創(chuàng)新意義。通過讓大型語(yǔ)言模型擔(dān)任評(píng)審角色，系統(tǒng)能夠進(jìn)行更加靈活和智能的評(píng)估，而不僅僅是機(jī)械的規(guī)則匹配。這種人機(jī)結(jié)合的評(píng)測(cè)方式在保證客觀性的同時(shí)，也具備了一定的主觀判斷能力，更加接近人類專家的評(píng)估標(biāo)準(zhǔn)。

在數(shù)據(jù)集構(gòu)建方面，研究團(tuán)隊(duì)提出的三維分類體系為復(fù)雜任務(wù)的系統(tǒng)化組織提供了有效的方法。這種分類體系不僅有助于任務(wù)的平衡分布，還能夠支持細(xì)粒度的性能分析，幫助研究者理解模型在不同類型任務(wù)上的表現(xiàn)差異。

特別值得關(guān)注的是，研究團(tuán)隊(duì)在數(shù)據(jù)收集過程中采用的防作弊策略體現(xiàn)了嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度。通過將資源文件重命名為隨機(jī)編號(hào)，研究者確保了模型必須依靠真正的視覺理解能力，而不是簡(jiǎn)單的文件名匹配。這種設(shè)計(jì)理念對(duì)于其他需要評(píng)估AI真實(shí)能力的研究具有重要參考價(jià)值。

從實(shí)驗(yàn)設(shè)計(jì)的角度來看，28個(gè)模型的大規(guī)模對(duì)比實(shí)驗(yàn)為理解當(dāng)前技術(shù)水平提供了全面的視角。這種全面的比較不僅有助于識(shí)別最優(yōu)的技術(shù)方案，還能夠揭示不同技術(shù)路線的相對(duì)優(yōu)勢(shì)和局限性，為未來的技術(shù)發(fā)展提供重要的參考。

研究結(jié)果中關(guān)于功能性和美觀性之間巨大差距的發(fā)現(xiàn)，也為整個(gè)領(lǐng)域指出了一個(gè)重要的研究方向。這種差距表明，當(dāng)前的AI模型在視覺模仿方面已經(jīng)達(dá)到了相當(dāng)?shù)乃?，但在邏輯推理和系統(tǒng)性思考方面還有很大的改進(jìn)空間。

八、對(duì)人工智能發(fā)展的深層思考

這項(xiàng)研究的意義遠(yuǎn)遠(yuǎn)超出了網(wǎng)頁(yè)開發(fā)這個(gè)具體應(yīng)用領(lǐng)域，它觸及了人工智能發(fā)展中的幾個(gè)根本性問題，為我們理解AI的能力邊界和發(fā)展方向提供了重要啟示。

首先，這項(xiàng)研究揭示了當(dāng)前AI在理解復(fù)雜系統(tǒng)方面的根本性挑戰(zhàn)。網(wǎng)頁(yè)應(yīng)用雖然看起來相對(duì)簡(jiǎn)單，但實(shí)際上是一個(gè)涉及多個(gè)組件、多種交互模式、多層狀態(tài)管理的復(fù)雜系統(tǒng)。AI模型需要同時(shí)理解系統(tǒng)的靜態(tài)結(jié)構(gòu)和動(dòng)態(tài)行為，這對(duì)模型的綜合能力提出了很高要求。

這種挑戰(zhàn)在現(xiàn)實(shí)世界的許多場(chǎng)景中都存在。無(wú)論是理解生物系統(tǒng)的運(yùn)作機(jī)制、分析社會(huì)經(jīng)濟(jì)現(xiàn)象的發(fā)展規(guī)律，還是預(yù)測(cè)復(fù)雜工程系統(tǒng)的行為模式，都需要AI具備類似的系統(tǒng)性理解能力。因此，在網(wǎng)頁(yè)重建任務(wù)上的突破可能為解決更廣泛的復(fù)雜系統(tǒng)理解問題提供重要線索。

其次，研究結(jié)果反映了當(dāng)前AI在知識(shí)遷移和抽象推理方面的不足。人類開發(fā)者能夠從一個(gè)網(wǎng)頁(yè)的工作原理中抽象出通用的設(shè)計(jì)模式和編程概念，然后將這些概念應(yīng)用到其他類似的場(chǎng)景中。但現(xiàn)有的AI模型在這種抽象和遷移能力方面還顯得相當(dāng)有限。

這種局限性可能源于當(dāng)前深度學(xué)習(xí)模型的基本架構(gòu)特征。大多數(shù)現(xiàn)有模型本質(zhì)上都是強(qiáng)大的模式識(shí)別器，擅長(zhǎng)從大量數(shù)據(jù)中學(xué)習(xí)統(tǒng)計(jì)規(guī)律，但在形成抽象概念和進(jìn)行邏輯推理方面還有待提高。未來的AI系統(tǒng)可能需要更好地整合符號(hào)推理和神經(jīng)網(wǎng)絡(luò)計(jì)算，才能獲得類似人類的抽象思維能力。

第三，這項(xiàng)研究突出了多模態(tài)理解的復(fù)雜性。雖然近年來多模態(tài)AI取得了顯著進(jìn)展，但這項(xiàng)研究表明，真正有效的多模態(tài)理解不僅僅是簡(jiǎn)單地將不同模態(tài)的信息拼接在一起，而是需要深入理解不同模態(tài)之間的內(nèi)在關(guān)聯(lián)和相互作用。

在網(wǎng)頁(yè)重建任務(wù)中，視覺信息、時(shí)序信息和代碼邏輯之間存在復(fù)雜的對(duì)應(yīng)關(guān)系。AI模型需要能夠建立這些不同層面信息之間的精確映射，這要求模型具備更加精細(xì)的跨模態(tài)理解能力。這種能力的發(fā)展對(duì)于構(gòu)建真正智能的AI系統(tǒng)具有重要意義。

第四，研究結(jié)果提醒我們關(guān)注AI評(píng)估方法的重要性。傳統(tǒng)的AI評(píng)估往往關(guān)注單一維度的性能指標(biāo)，但這項(xiàng)研究通過引入功能性和美觀性的雙重評(píng)估，揭示了單一指標(biāo)可能掩蓋的重要問題。這種多維度評(píng)估方法為設(shè)計(jì)更加全面和準(zhǔn)確的AI評(píng)估體系提供了有益啟示。

從社會(huì)影響的角度來看，這項(xiàng)研究也引發(fā)了關(guān)于AI與人類協(xié)作關(guān)系的思考。當(dāng)AI在某些任務(wù)上表現(xiàn)不佳時(shí)，我們不應(yīng)該簡(jiǎn)單地將其視為技術(shù)失敗，而應(yīng)該思考如何設(shè)計(jì)更好的人機(jī)協(xié)作模式。在網(wǎng)頁(yè)開發(fā)場(chǎng)景中，AI可能無(wú)法完全替代人類開發(fā)者，但可以作為強(qiáng)有力的輔助工具，幫助降低開發(fā)門檻，提高開發(fā)效率。

這種協(xié)作模式的探索對(duì)于AI技術(shù)的實(shí)際應(yīng)用具有重要意義。很多情況下，AI的價(jià)值不在于完全替代人類，而在于與人類形成互補(bǔ)關(guān)系，發(fā)揮各自的優(yōu)勢(shì)，共同完成復(fù)雜的任務(wù)。

說到底，這項(xiàng)由上海AI實(shí)驗(yàn)室團(tuán)隊(duì)完成的研究為我們打開了一扇通往未來的窗戶。雖然當(dāng)前的AI模型在交互式網(wǎng)頁(yè)重建任務(wù)上還有很多不足，但這些發(fā)現(xiàn)為我們指明了前進(jìn)的方向。隨著技術(shù)的不斷發(fā)展，我們有理由相信，未來的AI系統(tǒng)將能夠更好地理解和創(chuàng)造復(fù)雜的交互系統(tǒng)，為人類的數(shù)字生活帶來更多便利。

這項(xiàng)研究的真正價(jià)值不僅在于它揭示了當(dāng)前技術(shù)的局限性，更在于它為整個(gè)領(lǐng)域建立了新的研究范式和評(píng)估標(biāo)準(zhǔn)。正如任何開創(chuàng)性的研究一樣，它的影響將會(huì)在未來的歲月中逐漸顯現(xiàn)，推動(dòng)人工智能技術(shù)向著更加智能、更加實(shí)用的方向發(fā)展。對(duì)于那些希望深入了解這項(xiàng)研究細(xì)節(jié)的讀者，建議查閱編號(hào)為arXiv:2509.24709的完整論文。

Q&A

Q1：IWR-Bench是什么？它與傳統(tǒng)的AI網(wǎng)頁(yè)生成評(píng)測(cè)有什么不同？

A：IWR-Bench是上海AI實(shí)驗(yàn)室團(tuán)隊(duì)開發(fā)的全新評(píng)測(cè)基準(zhǔn)，專門用于評(píng)估AI從用戶操作視頻中重建交互式網(wǎng)頁(yè)的能力。與傳統(tǒng)方法只給AI看靜態(tài)截圖不同，IWR-Bench讓AI觀看完整的用戶交互視頻，包含點(diǎn)擊、輸入、滾動(dòng)等操作過程，要求AI理解動(dòng)態(tài)交互邏輯并生成功能完整的網(wǎng)頁(yè)代碼。這就像讓AI通過觀看烹飪過程來學(xué)會(huì)做菜，而不是僅憑成品照片。

Q2：目前最強(qiáng)的AI模型在IWR-Bench上表現(xiàn)如何？主要問題在哪里？

A：表現(xiàn)最好的GPT-5模型綜合得分僅為36.35分（滿分100分），存在嚴(yán)重的功能性和美觀性不平衡問題。GPT-5在視覺美觀性方面得到64.25分，說明它能較好地重現(xiàn)網(wǎng)頁(yè)外觀，但功能性分?jǐn)?shù)只有24.39分，意味著大部分交互功能無(wú)法正常工作。這就像制作了一個(gè)外觀精美的汽車模型，看起來很像真車，但引擎無(wú)法啟動(dòng)、方向盤不能轉(zhuǎn)動(dòng)。

Q3：這項(xiàng)研究對(duì)普通人有什么實(shí)際意義？

A：一旦技術(shù)成熟，普通人將能夠通過簡(jiǎn)單的操作演示來創(chuàng)建復(fù)雜的網(wǎng)頁(yè)應(yīng)用，而不需要學(xué)習(xí)編程知識(shí)。比如你想做一個(gè)個(gè)人博客或小型電商網(wǎng)站，只需要錄制一段演示視頻顯示你希望的交互效果，AI就能自動(dòng)生成相應(yīng)的代碼。這將大大降低軟件開發(fā)門檻，讓更多人能夠參與數(shù)字創(chuàng)作，就像從需要專業(yè)技能才能拍電影發(fā)展到人人都能用手機(jī)制作短視頻一樣。