Learning Structural Similarity of User Interface Layouts Using Graph Networks

Abstract

We propose a novel representation learning technique for measuring the similarity of user interface designs. A triplet network is used to learn a search embedding for layout similarity, with a hybrid encoder-decoder backbone comprising a graph convolutional network (GCN) and convolutional decoder (CNN). The properties of interface components and their spatial relationships are encoded via a graph which also models the containment (nesting) relationships of interface components. We supervise the training of a dual reconstruction and pair-wise loss using an auxiliary measure of layout similarity based on intersection over union (IoU) distance. The resulting embedding is shown to exceed state of the art performance for visual search of user interface layouts over the public Rico dataset, and an auto-annotated dataset of interface layouts collected from the web.

Cite

Text

Manandhar et al. "Learning Structural Similarity of User Interface Layouts Using Graph Networks." Proceedings of the European Conference on Computer Vision (ECCV), 2020. doi:10.1007/978-3-030-58542-6_44

Markdown

[Manandhar et al. "Learning Structural Similarity of User Interface Layouts Using Graph Networks." Proceedings of the European Conference on Computer Vision (ECCV), 2020.](https://mlanthology.org/eccv/2020/manandhar2020eccv-learning/) doi:10.1007/978-3-030-58542-6_44

BibTeX

@inproceedings{manandhar2020eccv-learning,
  title     = {{Learning Structural Similarity of User Interface Layouts Using Graph Networks}},
  author    = {Manandhar, Dipu and Ruta, Dan and Collomosse, John},
  booktitle = {Proceedings of the European Conference on Computer Vision (ECCV)},
  year      = {2020},
  doi       = {10.1007/978-3-030-58542-6_44},
  url       = {https://mlanthology.org/eccv/2020/manandhar2020eccv-learning/}
}