VIPS:基於視覺的Web頁面分頁演算法

VIPS:基於視覺的Web頁面分頁演算法

1.問題的提出

目前，隨著互連網的高速發展，Web已經成為這個世界上最大的資訊來源。Web 作為資訊技術的載體已成為人們重要的工作、學習、生活、娛樂工具。Web的發展給人類生活帶來了巨大的方便，人們可以跨越時間和空間界限來共用大量資訊。 但是如何去擷取這些Web資訊為我們所用則是大家面臨的共同問題。在最基本的層次上，整個Web網路就是由無數的Web頁面而構成，因此如果擷取了這些 Web頁面就相當於擷取了Web資訊內容。事實上，目前的很多Web資訊擷取技術都是基於這種理論。

但是把整個頁面作為一個基本的資訊擷取單位並不是太合理，儘管使用者通常會把一些相關的內容放在同一頁面中，但是大多數情況下，一個頁面中通常會包含不止一類的主題，比如在新浪的頁面中，可能包含體育類資訊，可能包含健康類資訊，也可能包含廣告、導航連結等資訊。這些資訊分布在整個頁面的不同位置。因此，如果要更準確的擷取Web資訊，我們必須能夠對給定的Web頁面進行更進一步的語義提取。

Web頁面的語義提取在很多方面都有應用。比如，在Web資訊訪問中，為了克服關鍵字搜尋所帶來的局限性，許多研究者開始使用資料庫技術，構建封裝器將Web資料進行結構化處理。在構建封裝器的過程中，將Web文檔分割為一定數目的資料區塊是首要的工作。目前的工作大多數停留在使用自適應的方法上。如果我們能夠擷取Web頁面的語義內容結構資訊，那麼構建封裝器的過程就非常的簡單，當然語義資訊也就很容易提取出來。

語義塊的提取另外一個應用場合就是搜尋引擎。對於搜尋引擎而言，連結分析是一個極為重要的工作。目前，對於大部分的搜尋引擎而言，連結分析演算法的基本前提假設就是如果兩個頁面之間存在連結關係，那麼這兩個頁面整體上肯定存在著一定的關係。但是在大部分情況下，從頁面A到頁面B的連結僅僅意味著頁面A的某部分與頁面B的某部分之間可能存在一定的關係。目前的很多演算法比如PageRank以及HITS都是基於前面的假設。把連結關係定義在兩個完整的頁面之間與定義在兩個頁面的某部分之間相比，則更粗糙一些。因此對於搜尋引擎而言，如果要更準確的擷取連結的關係，把一個完整頁面分割為多個語義塊是一個必須的工作。 目前已經有一些工作針對這方面進行展開。不過這些工作都是基於DOM樹分析頁面的結構。但是DOM樹並不能完全反映頁面的語義結構，因此這種做法還存在一定的缺陷。

Web頁面的語義分塊另外一個潛在的用途就是移動終端訪問互連網。目前大部分的Web頁面都是針對台式機而設計的，由於行動裝置通常螢幕較小，計算能力有限，因此這些頁面並不適合行動裝置直接存取。目前通常通過兩種手段來解決這種問題：或者通過伺服器進行頁面轉換或者使用網頁縮圖。前者首先將使用者訪問的頁面進行分頁和轉換，然後將分頁的結果提交給行動裝置；後者則是將整個Web頁面產生縮減頁面，整個頁面被分割為數目不等的地區，使用者如果對特定地區感興趣，則可以再次訪問該地區的內容。通過這兩個策略，基本可以完成移動終端訪問互連網的任務，但是核心內容還是如何對頁面進行語義分割。

如果對Web頁面進行有效分頁，目前已經很多工作展開。[Chakrabarti etal.2002]致力於從HTML DOM樹中提取出結構化資訊。不過由於HTML文法的靈活性，目前大部分的網頁都沒有完全遵循W3C規範，這樣可能會導致DOM樹結構的錯誤。更重要的是，DOM樹最早引入是為了在瀏覽器中進行布局顯示而不是進行Web頁面的語義結構描述。比如，即使DOM樹中兩個結點具有同一個父結點，那麼這兩個結點在語義上也不一定就是有聯絡。反之，兩個在語義上有關係的結點卻可能分布在DOM樹的不同之處。因此僅僅通過分析DOM樹並不能完全擷取Web頁面的語義資訊。

從人類的角度來看，當一個使用者觀察Web頁面的時候，它總是會自然而然的把一個語義塊作為一個單一對象來看待，而不會管Web頁面的內部結構是如何描述的。 通常情況下，在分辨語義塊的時候，使用者會使用一些視覺因素來進行協助，比如背景顏色、字型顏色和大小、邊框、邏輯塊和邏輯塊之間的間距等等。因此如果充分的使用Web頁面的視覺提示，並結合DOM樹進行頁面語義分塊，則可以彌補僅使用DOM樹所帶來的一些缺憾。

在論文中，我們提出了VIPS(Vision-based page segmentation)演算法用以提取給定網頁的語義結構。這種語義結構是層次性的結構，在該結構中，每一個結點代表一個語義塊。每一個語義塊都定義一 個DOC值來描述該語義塊內部內容的關聯性。DOC的值越大，則表明語義塊內部的內容，它們之間的聯絡越緊，反之越鬆散。VIPS演算法充分利用了Web頁面的布局特徵：它首先從DOM樹中提取出所有的合適的頁面塊，然後根據這些頁面塊檢測出它們之間的所有的分割條，包括水平和垂直方向。最後基於這些分割條，Web頁面的語義結構將被重新構建。對於每一個語義塊又可以使用VIPS演算法繼續分割為更小的語義塊。因此整個VIPS演算法是自頂向下，非常高效的。

2.相關工作

忽略不介紹。

3.Web頁面的基於視覺的內容結構描述

與[chen et al. 2001]類似，VIPS演算法中首先也定義了“基本對象”的概念，通常DOM樹上的葉子結點被定義為基本對象，因為這些結點已經不能再被繼續分割了。在本論文中，我們首先引入了基於視覺的內容結構，它裡面的每一個結點我們稱之為“塊”，這些塊或者是一個基本對象或者是一些基本對象的組合。有一點需要注意的是，基於視覺的內容結構中的塊與DOM樹中的結點沒有絕對的對應關係。

與[Tang et al.1999]中文檔的描述結構類似，VIPS演算法中Web頁面的結構定義如下。

對於每一個頁面而言，我們可以將其看作一個三元組Ω=(Ο，Φ，δ)，其中

Ο=(Ω1，Ω2，…ΩN)，表示給定頁面上的所有的語義塊的集合，這些語義塊之間沒有重疊覆蓋，而每一個語義塊Ωi又可以被定義為前面所描述的三元組Ωi = (Οi，Φi，δi)，如此迭代迴圈；

Φ=( ϕ1，ϕ2，…ϕT )，表示當前頁面上的所有的分隔條的集合。事實上，一旦確定了一個頁面上的兩個語義塊，那麼這兩個語義塊之間的分隔條也就被確定了。當然，VIPS中的分隔條並不是真正存在的分隔條，而是虛擬。分隔條包括水平分隔條，也包括垂直分隔條。每一個分隔條都具有一定的寬度和高度。

δ=(ζ1，ζ2，…，ζM)則描述了Ω集合中兩個語義塊之間的關係，這種關係可以用下面的式子描述：δ =Ο×O→Φ∪{NULL}。其中的每個ζ都是一個形如(Ωi，Ωj)二元組，其表示塊Ωi和Ωj之間存在一個分割條。

示範了Yahoo頁面的基於視覺的Web頁面內容結構。它同時給出了頁面的布局結構和基於視覺的內容結構。在第一層，整個原有的頁面被分割為四個大的可視對象VB1-VB4，同時在這四個對象之間檢測出了三個分隔條ϕ1 –ϕ3(原來有五個，最上面的和最下面的被捨棄)。檢測出的四個可視對象並不是這輪分割的最終的局部。最終得到的語義塊必鬚根據檢測出的四個可視對象和三個分隔條進一步構建而成，其中可能需要合并一些語義塊，捨棄一些分隔條等等。

比如，對於VB2，從它的內部又可以檢測出三個子物件和兩個分隔條，1所示。

對於每一個Block，VIPS演算法都定義一個DoC(Degree of Coherence)與之對應。該值的大小反映了當前語義塊內部內容聯絡的緊密程度。它具有下面兩個重要的特性：

1) DoC的值越大，則語義塊內部的內容之間的聯絡緊密程度就越大，它們之間就關係就越連續，反之越小。

2) 在層次數上，語義塊的子塊的DoC的值肯定要比父塊的值大。

在 VIPS演算法中，DoC的值位於1到10之間。不過這個範圍是可以更改的。在對Web頁面進行語義分割之前，我們首先設定一個預定義DoC值 PDoC(Permitted Degree of Coherence)，通過該值來限定分割的語義塊的粗糙程度。當語義塊的DoC值達到PDoC之後，迭代分割就停止。PDoC越小，則分割的語義塊就越粗糙，反之，分割的語義塊就越精細。比如在圖1中，如果給出一個適當的PDoC的值，VB2_1塊將變的不再允許分割。不同的應用程式可以設定不同的 PDoC值來達到自己的要求。

基於視覺的頁面分割最主要的目的就是對給定的頁面進行語義分割，因此分割後產生的基於視覺的內容結構中的結點通常總是一定的語義單位，包含一定的語義。比如在圖1(a)中，我們可以看到VB2_1_1表示Yahoo寵物商店的目錄連結，而VB2_2_1和VB2_2_2則表明了兩種不同的comics。

4.VIPS演算法描述

這部分我們將詳細介紹VIPS演算法。整體來說，頁面的基於視覺的內容結構是結合DOM樹以及一些視覺提示資訊而得到的。整個分頁過程可以用圖2描述。它具有三個步驟：頁面塊提取、分隔條提取以及語義塊重構。這三個步驟聯合一起作為一次語義塊檢測的完整步驟。Web頁面首先被分割為幾次比較大的語義塊，同時這幾個語義塊所組成的階層將被記錄下來。對於檢測出來的每一個大的語義塊分頁過程又可以繼續進行，直到語義塊的DoC值達到預先設定的PdoC為止。

在每次迭代迴圈中，當前邏輯塊的DOM樹結構以及它的視覺資訊都將被擷取。然後，從DOM樹的根結點開始，邏輯塊檢測過程將基於視覺資訊開始從DOM樹中開始檢測頁面塊。每一個DOM結點(圖3b中的結點1,2,3,4,5,6,7)都會被檢查它能夠構成一個單獨的頁面塊。如果不能，比3b中的 1，3，4結點，那麼它的子結點將被執行同樣的檢查。對於每一個提取出來的頁面塊，比3b中的2，5，6，7結點，我們都會根據當前頁面塊的內部可視屬性賦予一個DoC值。當本次迭代過程中所有的頁面塊都被檢測出來之後，它們將被儲存到頁面塊池中。基於這些頁面塊，分隔條檢測過程將開始工作。這些頁面塊之間的所有的水平分隔條和垂直分隔條最終將被識別出來並且賦予一定的寬度和高度。基於這些分隔條，頁面的布局層次將被重新構建——一些頁面塊將被合并，形成語義塊。最終，本次迭代過程中的所有語義塊都被檢測出來。

迭代過程是否需要繼續進行取決於本層次的語義塊中是否存在DoC值小於PdoC的語義塊。對於那些DoC>=PdoC的語義塊，分隔過程將停止，否則分隔過程將繼續。比如再中，語義塊C的DoC值小於PdoC，那麼該語義塊將被作為新的子Web頁面，繼續執行分割演算法，最終又被分割為兩部分：C1 和C2，4a和4b所示：

當所有的語義塊被提取出來後，最終整個Web頁面的基於視覺的內容結構也就構建完成。在上面的例子中，我們最終擷取的內容階層5所示。在下面的部分我們將詳細的描述語義塊的檢測、分隔條的檢測以及內容結構重建過程。

4.1語義塊提取

在這步驟中，我們的目標是提取出當前子頁面中所包含的所有的可視語義塊。通常情況下，DOM樹中的每一個結點都可以表示一個可視語義塊。不過，在HTML中，一些標籤比如<TABLE> 和<P>通常用來進行資料群組織，因此不適合表示單獨的可視語義塊。對於這種結點，對他們的提取將被它們的孩子結點替代。而且由於HTML文法的靈活性，很多的Web頁面並沒有嚴格遵循W3C的HTML規範，這導致DOM樹並不能總是能反映不同的DOM結點之間的關係。

對於提取出來的每一個可視語義塊，我們將根據它的內部的視覺差異設定它的DoC值。整個迭代提取過程可以用下面的演算法描述：

如何判斷給定的結點能否被繼續分割，我們給出下面的幾個方面進行判斷：

1) DOM結點本身的屬性。比如當前DOM結點的標籤，結點的背景色，當前結點所代表的頁面塊的大小，形狀。

2) 當前DOM結點的孩子結點。比如孩子結點的標籤，孩子結點所代表的地區的背景色，前景色彩，地區的大小以及不同類型的孩子的數目等等。

基於WWW HTML規範4.0，我們將DOM結點分為兩大類：inline結點和line-break結點。

所謂Inline結點是指：如果該結點的標籤能夠影響文字的外觀同時不會引起換行的話，那麼這類結點我們稱之為Inline結點，比如<B>、<BIG>、<EM>、<FONT>、<I>、<STRONG>、<U> 等等，這類結點通常僅僅影響文字的外觀而不會影響文字的布局。

所謂Line-break結點，則就是除了inline結點之外的所有結點。

另外，基於各種結點在瀏覽器中的顯示以及結點的孩子結點屬性，我們給出下面的定義：

1) 有效結點(Valid node)：如果一個結點能夠在瀏覽器中表現出來，那麼這個結點就是有效結點。通常有效結點的長度和寬度都不為零。另外如果一個結點內部沒有任何有用的資訊，我們也稱之為無效結點。比7中的第二個和第四個TR結點都是無效結點；

2) 文本結點：這類結點通常是指HTML中的文字，通常它們不被任何標籤所包圍；

3) 虛擬文本結點(這個定義是遞迴定義)。

¢ 如果一個結點是文本結點，那麼它自然就是虛擬文本結點；

¢ 如果一個結點是inline結點，並且它的所有子結點要麼是文本結點，要麼是虛擬文本結點，那麼這個結點也就是虛擬文本結點。

如果一段文字加上了<B>、<BIG>、<I>等標籤之後，該文字只是在瀏覽器中的顯示外觀發生了變化而已，並不影響這段文字本質上為文字的屬性，VIPS中將之稱之為虛擬文本結點，並不難理解。

可視語義塊的提取演算法DivideDomtree6所示。在該演算法中一些很重要的資訊可以用於產生推測規則：

¢ 標籤提示

1) 一些標籤比如<HR>通常用來從視覺上分隔不同主題的內容。因此如果DOM結點中包含這些標籤，那麼我們傾向於認為該結點允許被繼續分割。

2) 如果inline結點的孩子結點存在line-break結點，那麼該結點將被傾向於被分割。

¢ 色彩提示

如果當前結點的孩子結點中有一個結點的背景色與它的背景色不同，那麼我們傾向於分割該DOM結點。同時，具有不同背景色的節點在本次迴圈中不再被分割。分割由下一次迭代完成。

¢ 文本提示

如果當前結點的大部分孩子結點都是文本結點或者是虛擬文本結點，那麼我們傾向於不再繼續分割該結點。

¢ 尺寸提示

我們通常可以對不同的結點類型預定義一個門檻尺寸(結點的大小與整個頁面大小的比較)，如果結點的相對尺寸小於門檻大小，那麼分割就停止。

基於上面的這些提示資訊，我們給出一些推斷規則用以判斷當前的結點是否應該被分割。如果一個結點不需要再分割，那麼該結點塊將被提取出來，同時設定相應得DoC值，並儲存到頁面塊池中。推斷規則如下表所示：

規則 1

如果當前結點不是文本結點，同時它又沒有任何有效孩子結點，那麼該結點將不被分割，並且從結點集合中刪除。

規則 2

如果當前結點只有一個有效孩子結點，同時該孩子結點不是文本結點，那麼當前結點將被分割。

規則 3

如果當前的DOM結點是整個子DOM樹的根結點(與頁面塊對應)，同時只有一個子DOM樹與當前的頁面塊關聯，那麼分割該結點。

規則 4

如果當前結點的所有的孩子結點都是文本結點或者是虛擬文本結點，那麼不分割該節點。如果當前所有孩子結點的字型大小和字型重量都是相同的，那麼該頁面塊的DoC設定為10，否則設定為9。

規則 5

如果當前DOM結點的孩子結點中有一個line-break結點，那麼該結點將被繼續分割。

規則 6

如果當前結點的孩子結點中存在<HR>結點，那麼該結點將被繼續分割。

規則 7

如果所有孩子節點的尺寸之和大於DOM樹節點的尺寸，那麼分割該節點。

規則 8

如果當前結點的背景色與它的所有子結點中的某個的背景色不相同，那麼該結點將被分割，同時具有不同顏色的子結點在本次迭代中不分割，分割在下輪迭代中進行。與此同時，孩子結點的DoC的值根據標籤和尺寸的不同設定為6-8。

規則 9

如果結點至少具有一個文本或者虛擬文本子結點，同時結點的相對大小小於門檻大小，那麼這個結點不再分割，同時根據標籤的不同，DoC的值設定為5-8。

規則 10

如果當前結點的所有子結點中最大的尺寸也小於門檻大小，那麼該結點將不再分割，同時DoC值根據HTML標籤和結點大小設定。

規則 11

如果前一個兄弟結點沒有被分割，那麼該結點也不會被繼續分割。

規則 12

分割該結點

規則13

不要分割該結點，同時基於當前結點的標籤和大小設定DoC值

對於不同的DOM結點，我們使用不同的推斷規則：

讓我們考慮圖1的情況。在第一次頁面塊提取得過程中，最終VB1，VB2_1，VB2_2，VB2_3以及VB3和VB4被提取出來，然後放進了語義塊池中。下面我們將詳細描述VB2_1，VB2_2以及VB2_3提取的過程。

圖7(b)顯示的是一個表格，該表格是整個Web頁面的一部分。它的DOM樹結構顯示在左邊的部分。在頁面塊的提取過程中，當遇到<TABLE>結點的時候，它只有一個有效孩子結點<TR>。根據規則2，我們進入<TR>標籤。該<TR>結點具有五個<TD>孩子結點，但是它們中只有三個是有效結點。而且第一個孩子結點的背景顏色與父親結點的顏色不同。根據規則8，該<TR>結點將被分割，而第一 個<TD>結點在本次迭代中部進行分割。第一個<TR>結點被儲存到頁面塊池中。第二個和第四個<TR>結點為無效結點，因此它們將被刪除。對於第三個和第五個<TD>結點，根據推斷規則11，在本次迭代中不再分割，因此最終我們得到三個頁面塊 VB2_1，VB2_2和VB2_3。

4.2分隔條檢測

當所有的頁面塊被提取出來之後，它們都被儲存在頁面塊池中以便進行分隔條檢測。在VIPS演算法中，分隔條是Web頁面中的垂直的或者水平的行。從視覺的角度而言，分隔條在描述頁面的不同語義資訊方面具有很好的指示作用。

在VIPS中，一個可視的分隔條可以用二維向量(Ps，Pe)描述，其中，Ps是分隔條的起始座標，而Pe則是分隔條的終止座標。座標的單位全部為像素pixel。根據Ps和Pe，很容易計算當前分隔條的寬度和高度。

4.2.1 分隔條檢測

分隔條的檢測演算法如下描述：

1) 初始化分隔條列表。最早的分隔條列表中僅僅存在一個分隔條，它的起始和終止座標為(Pbe,Pee)，分別對應整個Web頁面的起始座標和終止座標。

2) 對於頁面塊池中的每一個頁面塊，它與分隔條的關係包括下面三種：

l 頁面塊被包含在分隔條中，此時，該分隔條將從頁面塊的邊緣裂變為多個分隔條；

l 頁面塊與分隔條發生部分重合，那麼根據頁面塊的邊界重新調整分隔條的參數；

l 頁面塊跨越分隔條，那麼此時移除該分隔條。

3) 移除頁面邊緣的四個分隔條

圖8示範了分隔條的檢測過程。為了簡單期間，我們僅僅示範水平分隔條的檢測過程。開始的時候我們之後一個大的分隔條，它的起始和終止位置就是整個頁面的起始和終止位置。當我們將第一個頁面塊放入到池中的時候，由於該頁面塊被包含在分隔條內部，此時原有的分隔條將裂變為S1和S2。同理當第二個和第三個頁面塊放入到池中的時候，四個分隔條S1，S2，S3和 S4被檢測出來。

當第四個頁面塊放入到池中的時候，它跨越了S3分隔條，同時與S2分隔條有部分重合，此時S3分隔條將被刪除，同時S2將被調整，可以看出，調整後，S3明顯的變細了。

4.2.2 設定分隔條的權重

分隔條通常用於區別不同語義的頁面塊，因此基於給定分隔條兩邊的語義塊的在視覺上的差異，我們可以設定分隔條的權重。如果分隔條的權重越重，該分隔條最終成為分隔條的可能性就越大。

下面的規則可以用來設定分隔條的權重：

1) 分隔條兩邊的頁面塊的距離越遠，該分隔條的權重就越高。

2) 如果某個分隔條是通過檢測HTML標籤擷取的，比如<HR>，那麼該分隔條的權重就越高。

3) 如果分隔條兩側的頁面塊的背景色是不相同的，那麼該分隔條的權重將相應增高。

4) 對於水平分隔條而言，如果分隔條兩側的頁面塊的字型屬性，比如字型大小，字型重量是不同的，那麼該分隔條的權重將增加。而且如果分隔條上側的頁面塊的字型小於分隔條下側的頁面塊的字型，那麼分隔條的權重將增加。

5) 對於水平分隔條而言，當分隔條兩側的頁面塊的結構非常相似，比如文本，那麼該分隔條的權重將遞減。

考慮圖7中的第三個<TD>。與該結點對 應的子頁面9(b)所示，同時它的DOM樹結構9(a)所示。我們可以看到根據我們的定義，該DOM樹中的很多結點都是無效的，它們無法在瀏覽器 中顯示出來，在頁面塊的提取過程忠，這些結點將被忽略。當這些頁面塊提取出來之後，六個頁面塊將儲存到池中，同時五個水平分隔條也被檢測出來。同時，基於 上面的五個分隔條規則，這些分隔條的權重將被設定。在本例中，頁面塊2和3之間的分割條要比頁面塊1和頁面塊2之間的分割條權重高，這是因為字型不同的原 因。同樣的原因，4和5之間的分隔條權重也高一些。最終的分隔條以及它們的權重9(c)所示。

4.2.3 內容結構構建

當分隔條被檢測出來，同時權重設定完畢後，相應的內容重建過程就可以開始了。構建過程從最小權重的分隔條開始，該分隔條兩側的頁面塊將合并在一起組成一個新的頁面塊。該合并過程不停的進行迭代，直到遇到權重 最高的分隔條為止。對於每一個新的語義塊，相應的DoC也被相應設定。

當頁面塊最終合并成為語義塊之後，本輪的迭代也就結束了。對於這些語義塊，每一個語義塊的DoC都會與PdoC進行對比，如果DoC的值小於PdoC，那麼新的迭代過程將重新開始：頁面塊檢測，分隔條檢測以及內容結構重構。當所有的語義塊的DoC的值都不大於PdoC，迭代過程將停止。同時針對整個Web頁面的內容結構將構建出來。

以圖9為例，在第一輪迭代中，第一，三以及五個分隔條 將被選擇出來，同時頁面塊1和2被合并為新的語義塊VB2_2_2_1。同樣的合并發生在頁面塊3和4上，它們被合并為新的語義塊VB2_2_2_2，頁 面塊5和6最終合并為VB2_2_2_3。新的語義塊VB2_2_2_1，VB2_2_2_2以及VB2_2_2_3是語義塊VB2_2_2的子結點。對 於每一個頁面結點，比如VB2_2_2_2_1_1，VB2_2_2_1_1以及VB2_2_2_2_1它們的DoC的值將被檢查，以便確定是否滿足 PdoC的值。最終的內容結構構建完畢。