Page2layers is a tool that decomposes a web page into element-by-element image layers. The layer is created by taking a screenshot with all but one element transparent.
page2layers.mp4
This tool was developed for the following research work.
Modeling Visual Containment for Web Page Layout Optimization (Pacific Graphics 2021)
Kotaro Kikuchi, Mayu Otani, Kota Yamaguchi, Edgar Simo-Serra
pdf, project
The dataset collected using this tool is available here.
Install Chrome and ChromeDriver beforehand.
git clone https://github.com/ktrk115/page2layers.git
conda create -n page2layers python=3.8 graphviz
conda activate page2layers
pip install -r requirements.txt- Ubuntu 20.04, Chrome 89.0.4389.90, ChromeDriver 89.0.4389.23
- macOS 10.15.7, Chrome 89.0.4389.90, ChromeDriver 89.0.4389.23
Capture a single web page
./page2layers https://example.comCapture with headless mode
./page2layers https://example.com --headlessCapture multiple pages by a text file with URLs on each line
./page2layers sample.txtCapture with Chrome extensions (e.g., "I don't care about cookies")
./page2layers https://gdpr.eu/ --extension extensions/I_dont_care_about_cookies_3.2.9.crxIf this tool helps your research, please cite our paper.
@article{Kikuchi2021,
title = {Modeling Visual Containment for Web Page Layout Optimization},
author = {Kotaro Kikuchi and Mayu Otani and Kota Yamaguchi and Edgar Simo-Serra},
journal = {Computer Graphics Forum},
volume = {40},
number = {7},
pages = {33--44},
year = {2021},
doi = {10.1111/cgf.14399}
}