HTML5 <canvas> Visual Bugs Dataset

该数据集由阿尔伯塔大学的ASGAARD实验室创建，旨在评估视觉语言模型（VLMs）在检测HTML5 <canvas>应用中的视觉错误的能力。数据集包含100张截图，其中80张为注入视觉错误的截图，20张为无错误的截图，涵盖了四种视觉错误类型（布局、渲染、外观和状态）。数据集的创建过程包括从20个开源HTML5 <canvas>应用中收集截图，并手动注入视觉错误。该数据集的应用领域主要是软件测试，特别是针对HTML5 <canvas>应用的视觉错误检测，旨在解决传统测试工具无法有效检测<canvas>应用视觉错误的问题。

This dataset was created by the ASGAARD Lab at the University of Alberta, aiming to evaluate the capability of Vision-Language Models (VLMs) in detecting visual errors within HTML5 <canvas> applications. It consists of 100 screenshots in total, including 80 screenshots injected with visual errors and 20 error-free ones, covering four types of visual errors: layout, rendering, appearance, and state. The dataset was developed by collecting screenshots from 20 open-source HTML5 <canvas> applications and manually injecting visual errors. Its main application domain is software testing, particularly visual error detection for HTML5 <canvas> applications, which is designed to solve the problem that traditional testing tools cannot effectively detect visual errors in <canvas> applications.

搜集汇总

数据集介绍

构建方式

该数据集的构建过程基于20个开源的HTML5 <canvas>应用程序，通过注入四种视觉错误类型（布局、渲染、外观和状态）来生成80个带有错误的截图，并收集了20个无错误的截图。首先，研究人员从GitHub上筛选出使用PixiJS框架的应用程序，并通过自定义的端到端测试脚本模拟用户操作，生成截图。随后，通过自定义的WebGL着色器程序注入视觉错误，确保每个错误类型在截图中得到体现。最后，手动验证所有截图以确保错误的可检测性。

特点

该数据集包含100个截图，涵盖20个不同的HTML5 <canvas>应用程序，其中80个截图注入了四种视觉错误类型，20个截图为无错误状态。数据集的特点在于其多样性和代表性，涵盖了从游戏到数据可视化的多种应用场景。每个截图都与其对应的无错误截图配对，便于对比分析。此外，数据集还提供了应用程序的README文件、错误描述和无错误截图作为上下文信息，增强了数据集的实用性和研究价值。

使用方法

该数据集主要用于评估视觉语言模型（VLMs）在检测HTML5 <canvas>应用程序中的视觉错误方面的能力。研究人员通过提供不同的上下文信息（如README文件、错误描述和无错误截图）来提示VLMs，分析其在不同提示策略下的表现。具体使用方法包括：首先，将截图与上下文信息一起输入VLMs，生成视觉错误检测结果；其次，通过结构化输出模式提取检测结果，评估模型的准确率、召回率和精度。数据集还可用于回归测试，帮助开发者在应用程序更新时自动检测视觉错误。

背景与挑战

背景概述

HTML5 <canvas> Visual Bugs Dataset 是由 Finlay Macklon 和 Cor-Paul Bezemer 在 2025 年创建的，旨在解决 HTML5 <canvas> 应用程序中的视觉错误检测问题。HTML5 <canvas> 是一种用于创建视觉密集型网页应用的技术，但由于其内容直接渲染为位图而非文档对象模型（DOM），传统的基于 DOM 的测试工具难以有效检测视觉错误。该数据集包含 20 个开源 HTML5 <canvas> 应用程序的 100 张截图，其中 80 张注入了四种类型的视觉错误（布局、渲染、外观和状态），20 张为无错误截图。该数据集为研究视觉语言模型（VLMs）在自动检测视觉错误中的应用提供了基础。

当前挑战

HTML5 <canvas> Visual Bugs Dataset 面临的挑战主要包括两个方面。首先，视觉错误的检测本身具有挑战性，因为 <canvas> 应用程序的内容不通过 DOM 表示，传统的测试工具无法直接分析其视觉输出。其次，构建数据集时，研究人员需要手动注入视觉错误并确保这些错误能够被人类测试者轻松识别，同时还需要确保无错误截图的准确性。此外，视觉语言模型在处理非照片级图像时表现较差，这增加了检测视觉错误的难度。为了应对这些挑战，研究人员开发了自定义框架来注入视觉错误，并通过提供上下文信息（如应用程序的 README 文件和无错误截图）来增强 VLMs 的检测能力。

常用场景

经典使用场景

HTML5 <canvas> Visual Bugs Dataset 主要用于评估视觉-语言模型（VLMs）在检测 HTML5 <canvas> 应用中的视觉错误的能力。该数据集包含了 20 个开源 HTML5 <canvas> 应用的 100 张截图，其中 80 张注入了四种不同类型的视觉错误（布局、渲染、外观和状态），另外 20 张为无错误的截图。研究人员通过提供应用的功能描述、错误类型描述以及无错误的截图作为上下文，利用 VLMs 自动检测这些视觉错误。

解决学术问题

该数据集解决了 HTML5 <canvas> 应用中视觉错误检测的难题。由于 <canvas> 应用的内容以位图形式呈现，且不包含在文档对象模型（DOM）中，传统的基于 DOM 的测试工具无法有效检测视觉错误。通过该数据集，研究人员能够评估 VLMs 在无需精确视觉测试预言的情况下，如何通过上下文信息自动检测视觉错误，从而为 <canvas> 应用的自动化测试提供了新的思路。

衍生相关工作

该数据集衍生了一系列相关研究工作，特别是在视觉-语言模型的应用领域。例如，研究人员利用该数据集探索了如何通过提供不同的上下文信息（如应用 README 文件、错误描述和无错误截图）来提高 VLMs 的检测精度。此外，该数据集还为未来的研究提供了基础，支持进一步探索如何通过微调 VLMs 或结合图像处理技术来改进视觉错误的检测效果。