etrigger/web_layout

Modeling Visual Containment for Web Page Layout Optimization (Pacific Graphics 2021)

WebForest: Real-world Web Page Dataset

This repository provides the WebForest dataset proposed in the paper "Modeling Visual Containment for Web Page Layout Optimization" (Pacific Graphics 2021).

Layout tree	Composite image

Installation

1. Clone this repository

   git clone https://github.com/ktrk115/web_layout.git
   cd web_layout

2. Create a new conda environment (Python 3.8)

   conda create -n web_layout python=3.8 graphviz
   conda activate web_layout

3. Install dependent libraries

   pip install -r requirements.txt

4. Download the WebForest dataset

   bash download.sh

5. Run and see demo.py for how to use the dataset

   python demo.py
   
   # ----------  Root  ----------
   # {'accessed': '2020-04-12 11:42:53.546634',
   #  'box': [0, 0, 1366, 768],
   #  'categories': ['Top/Computers/Software/Business_Drawing'],
   #  'height': 768,
   #  'nbox': [0.0, 0.0, 1.0, 0.5622254758418741],
   #  'url': 'https://www.tomsplanner.com/',
   #  'width': 1366}
   # 
   # ----------  First element  ----------
   # {'area_importance': 3,
   #  'box': [0, 0, 1366, 111],
   #  'css_selector': 'html > body > div > header',
   #  'html_tag': 'header',
   #  'label': 'image',
   #  'nbox': [0.0, 0.0, 1.0, 0.08125915080527087],
   #  'order': 0,
   #  'parent': 'root'}
   # 
   # Save layout tree to "tree.png"
   # Save composite image to "composite.png"

Licence

GNU AGPLv3

Citation

If this repository helps your research, please consider citing 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 = {},
    year = {2021},
    doi = {}
}