1.綜述

網頁本質上是一種超文本，一般由超文本標記語言來定義（例如HTML）。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用于設計網頁、網頁應用程序以及移動應用程序的用戶界面 。網頁瀏覽器內核通過解釋HTML文件，通過視覺引擎將其渲染成可視化網頁。

由于HTML的復雜性特點，使得網頁體現出多模態性，多粒度性，并且這些模態內部存在復雜的對應關系。

• 多模態性

所謂多模態性，即從不同視角下，網頁體現出不同的形態。從信息載體角度看，它是文本、圖像、視頻等多媒體元素集合。從視覺層面看，它擁有圖層的概念，是各層圖像堆疊起來形成了一張完整的“圖片”。從底層代碼邏輯看，它是一種特殊的類XML語言，定義了一棵具有層次關系的樹（dom-tree）。

• 多粒度性

所謂多粒度性，即網頁無論從哪種模態看，都是由粒度不等的元素組成的。

以資訊類網頁舉例，從信息載體模態看，網頁由段落組成，段落又由句子組成，句子由tokens組成；

從視覺層面，網頁由不同尺寸的圖層，依次堆疊而成；

從底層代碼邏輯看，html由不同高度以及大小的子樹構成。

• 內在的對齊邏輯

多種模態的基本元素之間，存在多對多的對齊關系。

對于dom-tree的結點，對應視覺層面的一個圖層，亦可對應著一個或者多個句子

一個句子，可能對應著一個結點，也可能對應著多個結點

一個例子：多模態的網頁表示

語義：句子{圖像、視頻等可文本化）的集合

結構：dom結點構成的樹

視覺：圖層的疊加（輪廓圖）

由于網頁的多模態性，多粒度性，以及潛在對齊關系的特點，使得對網頁的建模，與對富文本的建模思路有著顯著的不同。如果將網頁作為富文本處理，會丟失大量的信息

舉一個簡單的例子，一個文本位于網頁的不同位置（譬如正文區域，推薦區域），它的重要性是完全不一樣的。

而復雜的業務下游應用，例如網頁質量甄別，網頁結構化分塊等，僅依賴文本的語義信息是遠遠不夠的，需要綜合考慮多模態的信息，以及多模態間的對齊信息。

下面，結合業界研究和我們的探索，從多模態信息融合、預訓練方案方面展開。最后，探討LLM時代，網頁多模態模型的可能的探索方向。

2.多模態多粒度特征融合

如何將多粒度，多模態的特征融合，是一個復雜的問題。

• 多粒度信息的表示

這個部分，業內解決方案較多。

對語義信息建模，基于hierarchical attention的有較多方案。一種方式，是通過bert等編碼器，輸入tokens，取CLS單元輸出作為句子的向量表示；再通過transformer結構，輸入句子向量，計算句子間attention，得到句子以及篇章的稠密向量表示，用于下游任務。

對于結構建模，以html-dom為基本單元。通過全連接層，融合bounding box坐標、webkit提取的css style信息等。

對于視覺建模，可以基于vit，以patch為基本單元。

• 多對多對應關系下，多模態信息融合

這部分，相關研究主要有四種方案：頂層融合，底層融合、多模態統一建模以及多模態交叉attention的方案。

圖片

底層融合即在輸入層將多模態信息對齊后拼接作為transformer層的輸入。這種方案對多任務預訓練方案設計（包括任務類型，多任務loss權重設計）要求較高，不利于多種模態的信息的平衡。

頂層融合即在頂層獲取一個結點或者語句對應的多模態向量，拼接后用于下游分類或回歸任務。缺點在于，各模態獨立建模的時候，缺少了相關信息交互，不能充分利用多模態之間的對齊信息。

多模態統一建模，以LayoutV2為例，將文本、圖片信息通過不同的編碼器定長編碼后，輸入統一的transformer中。對于多模態綜合理解任務來說，很難在輸入層顯示的注入多模態的對齊信息；網頁結構的單元向量與語義、視覺（網頁輪廓圖）的單元向量亦很難通過淺層的編碼器投影到相同的語義空間內。

通過對比，認為在網頁建模場景下，多模態交叉attention是一個較好的方案。具體來說，各模態分域表示，域之間相互獨立；通過多模態交叉attention層完成多模態間信息交互。DocFormer提出的multi-modal attention，Beit3提出的MultiWay Transformer等本質上均為這種思路。

在多對多對齊關系下（即一個模態的基本單元，可能對應另外一個模態多個基本單元）。可使用聚合函數（例如average-pooling，lstm等），將對應模態上一層transformer-encode輸出的對應單元序列，通過聚合操作后變換為定長向量，輸入到多模態attention層計算。

圖片

圖片

3.預訓練任務設計

如何設計針對多個模態，不同粒度的任務，以及如何低成本的構建偽標簽，是訓練網頁基座模型的關鍵。

分析業務中下游任務的特點，在預訓練階段設計了如下4個類別的的預訓練任務。

對于細粒度的語義預訓練場景，借鑒token粒度MLM的思路，mask完整的句子，并且通過decoder重建句子。

對于粗粒度的篇章預訓練場景，結合搜索點擊日志，mask掉title后，通過decoder去噪重建title以及生成用戶點擊的query。

對于細粒度的html-dom粒度預訓練場景，通過html_tag mask/重建，結點亂序重排進行訓練。

對于篇章粒度的結構任務，通過GPT等生成頁面類型的偽標簽，作為監督信號訓練。

4.展望：LLM時代的網頁基座模型探索方向

現階段，多模態大模型發展到新的階段，已經可以將圖片（視頻）、文本通過統一的decoder模型處理 。如何有效利用已有大模型的能力，低成本適配到網頁，是當前研究的熱點和難點。

一個樸素的思想，是將整個html源碼輸入給大模型，做進一步postpretrain使得模型適配網頁。但是，由于網頁源碼的平均長度非常大（根據我們對百度網頁庫的統計，平均源碼長度在160k），如果再將節點的樣式以style標簽形式注入，源碼長度預計會翻數十倍。面向海量網頁計算極難落地。再者，針對網頁場景下做若干輪post-pretrain成本亦很高。

一個可行思路是，通過adaptor網絡，將網頁html-dom的結構、位置以及視覺信息變換到已有多模態大模型的空間中，壓縮成若干定長向量表示。

通過adaptor網絡與LLM聯合訓練，調低LLM的學習率（盡量不擾動已有LLM的參數，保留LLM的泛化性）；通過特殊標簽，注入adaptor產出的tokens向量，讓LLM解釋隱式向量代表的含義，訓練adaptor網絡。

例如，構建prompt：

以下是一個網頁的dom結點表示<STRUCT>adaptor_tokens</STRUCT>，輸出css描述文本：style="xxxxx"

訓練adator網絡，使得產出的tokens向量能夠與LLM的語義空間打平