面向机器学习应用的网页视觉感知表示

# 面向机器学习应用的网页视觉感知表示
来源：https://arxiv.org/html/2608.18727
Radek BurgetOrcID:0000\-0001\-5233\-0456 (https://orcid.org/0000-0001-5233-0456)所属机构：捷克共和国布尔诺，布尔诺理工大学信息技术学院，Bozetechova 2, 612 00 布尔诺Radek HranickýOrcID:0000\-0001\-6315\-8137 (https://orcid.org/0000-0001-6315-8137)所属机构：捷克共和国布尔诺，布尔诺理工大学信息技术学院，Bozetechova 2, 612 00 布尔诺所属机构：电子邮箱[\{burgetr,hranicky\}@fit\.vut\.cz](mailto:{burgetr,hranicky}@fit.vut.cz)

###### 摘要

将机器学习应用于网页具有挑战性，因为需要解释HTML及其关联资源，并执行渲染以获得有意义的视觉和布局感知表示。因此，针对网页内容的机器学习应用相对研究较少。本文介绍了一个基于开源渲染工具FitLayout的平台，用于网页的视觉感知表示和机器学习。该平台提供了一个能够渲染网页的服务器，通过基于RDF的表示显式捕获其视觉和结构属性，并将渲染后的文档持久化存储于集成存储中。处理流程通过REST API控制，而SPARQL查询用于检索适合机器学习算法输入的结构化数据。通过显式建模渲染后的网页（包括细粒度布局细节），该平台支持数据集共享并确保实验结果的可重复性。该架构支持完整的数据集准备工作流程，从网页收集和渲染到内容元素的预处理和标注，再到下游学习任务。我们进一步提供了一个Python客户端库，将该平台与标准机器学习工作流集成。作为演示，我们展示了如何将渲染后的网页转换为基于图的表示，并用于训练图神经网络以识别关键内容元素，这既说明了该方法的适用性，也展示了结果的可重复性。

###### 关键词：

渲染后的网页 视觉感知文档表示 网页内容的机器学习 图神经网络 可重复的网页数据分析

## 1引言

面向文档理解的机器学习发展迅速，特别是对于视觉丰富的输入，例如扫描页面和PDF。许多成功的方法是布局感知的，并将文档表示为结构化对象，通常是由图神经网络处理的图结构。针对网页的类似方法仍有待探索。

网页的复杂性在于其布局由浏览器从HTML和外部资源动态生成，且渲染输出没有标准的持久化表示。因此，大多数现有方法要么仅分析DOM（忽略布局），要么将页面视为图像（丢失内容结构），这限制了布局感知模型的使用。

在我们先前工作[2 (https://arxiv.org/html/2608.18727#bib.bib3)]的基础上，我们使用渲染页面的RDF描述作为机器学习就绪的表示，并引入了一个基于我们开源FitLayout框架的软件平台。该平台通过API和SPARQL访问提供渲染后的表示，支持渲染数据集的共享，并提供Python客户端以集成到常见的机器学习工作流中。

我们通过一个识别关键内容元素的案例研究来说明我们的方法。我们描述了如何构建一个渲染网页的标注数据集，以及如何使用SPARQL查询将这些页面转换为适合后续图神经网络处理的图表示。最后，我们解释了如何共享生成的数据集以促进结果的可重复性，并允许将替代机器学习方法应用于相同的基础数据。

## 2相关工作

机器学习技术已有效地应用于识别PDF文档中的关键内容元素，包括表格定位和针对复杂文档布局设计的神经网络方法进行结构化解析[5 (https://arxiv.org/html/2608.18727#bib.bib4),11 (https://arxiv.org/html/2608.18727#bib.bib11)]或复杂布局分析[4 (https://arxiv.org/html/2608.18727#bib.bib5),13 (https://arxiv.org/html/2608.18727#bib.bib13)]。

相比之下，网页信息提取和网页文档理解面临着额外的挑战，因为网页的动态、浏览器渲染特性以及DOM树与视觉布局之间经常不匹配。因此，现有方法通常侧重于基于DOM或模板的提取[1 (https://arxiv.org/html/2608.18727#bib.bib1),10 (https://arxiv.org/html/2608.18727#bib.bib10),12 (https://arxiv.org/html/2608.18727#bib.bib12)]，或者通过从截图/视觉上下文学习[6 (https://arxiv.org/html/2608.18727#bib.bib6),8 (https://arxiv.org/html/2608.18727#bib.bib8)]，或从浏览器派生的渲染树[9 (https://arxiv.org/html/2608.18727#bib.bib9)]来整合视觉线索。

这篇短文扩展了我们早期的工作：在[3 (https://arxiv.org/html/2608.18727#bib.bib2)]中，我们引入了渲染网页的RDF模型，以实现视觉感知的网页抓取（区别于更常见的基于DOM的抓取器）；在[2 (https://arxiv.org/html/2608.18727#bib.bib3)]中，我们提出了一种使用此表示创建渲染网页快照的通用方法。在本研究中，我们提出了一种全新的方法，将此解决方案引入基于Python的机器学习生态系统，从而能够在网页数据上使用PyTorch等框架。

## 3网页的视觉感知表示

为了在机器学习应用中利用网页内容的视觉属性和布局，必须渲染输入的网页，并且必须显式地描述渲染结果。我们使用FitLayout框架[2 (https://arxiv.org/html/2608.18727#bib.bib3)]实现了这两项任务。

FitLayout允许在不同的抽象级别表示单个渲染页面，并提供了一个适合此目的的本体。该本体定义了`Artifact`的概念，它在某个抽象级别上描述单个页面。对于机器学习任务，以下两种工件类型（`Artifact`的子类）是相关的：

- `Page`工件在最低抽象级别上将渲染页面描述为一组`Box`（因此也称为框树）。
- `AreaTree`表示在可见`visual area`级别上对渲染页面的抽象，这些视觉区域不直接连接到源HTML代码。

在`BoxTree`中，每个框都直接链接到一个源HTML元素，如CSS格式模型所指定。每个框都有视觉属性，例如`fontSize`、`color`、`positionX`和`positionY`。根框对应于整个页面区域，层次关系通过`isChildOf`属性捕获。`AreaTree`通过专注于视觉区域消除了对HTML标记的严格依赖，这些视觉区域可以使用FitLayout提供的不同技术（例如页面分割方法）来识别。最后，每个区域可以通过`hasTag`属性关联一个或多个`Tag`，这些标签可用于在数据集准备期间标记区域。

结果，每个渲染页面由两个工件（一个`Page`和一个`AreaTree`）表示，它们对应于存储在FitLayout RDF存储库中的RDF子图。

## 4系统架构与处理流程

提出的系统架构基于以下观察：机器学习工作负载通常分布在具有不同角色的多个计算节点上：配备大容量存储的存储节点用于持久化数据，以及提供足够处理能力以进行神经网络训练和评估的计算节点。

图1：完整的架构布局，以FitLayout服务器作为中心数据存储节点，基于Python的计算节点负责数据集准备以及GNN训练和评估。
整个架构的概述如图1 (https://arxiv.org/html/2608.18727#S4.F1)所示。它由FitLayout服务器和客户端Python应用程序组成，前者充当数据存储节点，拥有一个中央RDF存储库用于持久化页面工件；后者控制数据集准备并实现机器学习方法。

为了支持网页处理工作流，服务器提供内置服务来创建不同的`Artifact`：
- 页面渲染——它在一个无头Chromium网页浏览器中渲染网页，该浏览器通过Puppeteer库远程控制。然后，使用JavaScript确定每个渲染框的视觉属性，并创建`Page` RDF图并存储到存储库中。
- 视觉区域提取——对于我们的任务，我们使用一种简单的方法，将`Page`中每个视觉上不同的框直接映射到最终`AreaTree`中的视觉区域，同时丢弃没有任何视觉效果的框。
- 布局分析——检查区域树中兄弟区域的相对位置，并添加表示一个区域在另一个区域上方、下方、左侧或右侧的RDF陈述。FitLayout提供了多种分析实现；我们采用了Gemelli等人提出的`visibility`方法的改进版本[5 (https://arxiv.org/html/2608.18727#bib.bib4)]，该方法最初是为PDF文档设计的。

客户端应用程序可以通过REST API调用这些服务来生成和存储渲染页面的RDF数据集。此外，服务器提供一个SPARQL端点用于查询存储的RDF数据和插入新语句。默认情况下，FitLayout还包括一个带有基于Web的GUI的交互式客户端应用程序，用于查看和检查存储的工件。

由于Python实际上已成为实现机器学习方法的标准环境，FitLayout为其REST API提供了一个Python客户端库，从而能够将渲染后的页面数据无缝集成到机器学习工作流中。

## 5基于Python的机器学习集成

如图1 (https://arxiv.org/html/2608.18727#S4.F1)所示，Python客户端层涵盖两个基本任务：数据集准备（包括渲染页面工件的准备及其标注）和机器学习应用程序本身的实现。

工件准备涉及为每个输入页面URL依次调用页面渲染、视觉区域提取和布局分析服务，目标是为每个源页面创建一个`AreaTree`工件。这些服务中的每一个都是可配置的；例如，客户端可以设置用于渲染的视口大小，或使用特定的空间关系发现方法。

可选的数据标注步骤可用于为选定的视觉区域分配标签（`Tag`），这些标签稍后可以用于，例如，训练视觉区域分类器。在典型场景中，首先使用`SELECT`查询检索目标视觉区域，然后将`hasTag`语句插入RDF图中。查询可以使用视觉特征（例如，颜色、大小或位置）和底层HTML的属性，例如元素属性。例如，在Klarna网页数据集[7 (https://arxiv.org/html/2608.18727#bib.bib7)]中，使用了特定的元素属性来指示目标元素；使用这种方法可以轻松地将这些属性转换为标签。

最后，为了实现机器学习算法，可以通过SPARQL `SELECT`查询从存储库中高效检索用于训练或测试的视觉区域数据。这些查询能够以与上一步相同的方式指定目标视觉区域，并选择相关的属性值。例如，当应用图神经网络进行视觉区域分类时，可以使用一个查询获取节点属性，使用另一个查询获取边属性，从而高效地生成源图，我们将在下一节中详细说明。

## 6案例研究：基于GNN的内容元素识别

为了展示所提出的架构在视觉感知网页模型上进行机器学习的实际效用，我们聚焦于一个示例任务：训练一个基于GNN的视觉区域分类器，以识别一个虚构在线书店中的书籍标题和价格。整个项目仓库可在GitHub上获取。该示例项目涵盖了从数据集准备到应用机器学习方法，再到以可共享格式导出数据集以支持整个过程可重复性的整个工作流。

### 6.1环境设置

该项目包含实现数据集准备、数据标注和机器学习的客户端Python脚本，具体将在以下子节中描述。FitLayout服务器通过简单运行FitLayout项目提供的相应Docker镜像即可设置。对于我们的实验，我们使用了两节点配置，服务器在具有足够存储空间的单独计算节点上运行。但是，当需要时，客户端和服务器可以共享单个节点。

### 6.2数据集准备

整个网页处理工作流始于根据URL列表渲染源页面。此处不涵盖输入URL的收集；我们使用了一个简单的脚本来提取书店中对应各本书的页面URL。我们总共收集了1,000个URL，并在项目中的一个文本文件中提供了它们。各个子任务被实现为简短的Python脚本，通过使用FitLayout Python客户端库调用相应的FitLayout服务来控制数据集准备：

**页面渲染**脚本 (`render.py`) 使用默认视口宽度1200px为每个输入URL调用基于Puppeteer的渲染服务。结果，相应的`Page`工件被存储在内置RDF存储库中。

**后处理和布局**脚本 (`segment.py`) 对每个页面应用视觉区域提取服务，生成一个`AreaTree`工件。然后调用布局分析服务来推断视觉区域之间的空间关系，详见第4节 (https://arxiv.org/html/2608.18727#S4)。

最后，**数据标注**脚本 (`tagging.py`) 在存储库中检测对应于`book titles`及其`prices`的视觉区域，并将相应的`hasTag`语句插入RDF存储库中，随后这些语句将用于训练GNN。在我们的基本用例中，所有源页面遵循共享模板，使得可以通过结合视觉特征和源HTML元素属性的单个SPARQL查询来识别目标区域。对于更多异构的输入源，则需要多个标注器，或者在最坏的情况下，需要通过FitLayout GUI进行手动标注。

### 6.3 GNN训练

我们使用广泛采用的PyTorch Geometric框架实现了GNN训练。对于每个`AreaTree`，我们首先构建一个相应的PyG图，其中节点代表视觉区域，边则捕获树中的父子关系以及兄弟区域之间的空间关系。节点特征通过SPARQL查询检索，包括文本颜色、背景颜色（RGB）、屏幕上的X和Y像素坐标、