Page2layers

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.

Installation

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

Tested environments

• 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

Usage

Capture a single web page

./page2layers https://example.com

Capture with headless mode

./page2layers https://example.com --headless

Capture multiple pages by a text file with URLs on each line

./page2layers sample.txt

Capture 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.crx

Citation

If 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}
}