Learning Structural Similarity of User Interface Layouts using Graph Networks
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.
Code (1)
Tasks
DecoderRepresentation LearningTripletMethods 이 논문이 사용한 방법론
Similar Papers 제목 키워드 기반
UISearch: Graph-Based Embeddings for Multimodal Enterprise UI Screenshots Retrieval
Enterprise software companies maintain thousands of user interface screens across products and versions, creating critical challenges for design consistency, pattern discovery, and compliance check. Existing approaches r…
Magic Layouts: Structural Prior for Component Detection in User Interface Designs
We present Magic Layouts; a method for parsing screenshots or hand-drawn sketches of user interface (UI) layouts. Our core contribution is to extend existing detectors to exploit a learned structural prior for UI designs…
LayoutGMN: Neural Graph Matching for Structural Layout Similarity
We present a deep neural network to predict structural similarity between 2D layouts by leveraging Graph Matching Networks (GMN). Our network, coined LayoutGMN, learns the layout metric via neural graph matching, using a…
Graph MatchingMetric LearningRetrievalTripletBeyond Atomic Layouts: Compositional Design Understanding with Vision-Language Models
Layout understanding, or the interpretation of element organization, is essential for document analysis, user interface (UI) creation, and graphic design. While recent vision-language models (VLMs) excel at interpreting …
What Would a Graph Look Like in This Layout? A Machine Learning Approach to Large Graph Visualization
Using different methods for laying out a graph can lead to very different visual appearances, with which the viewer perceives different information. Selecting a "good" layout method is thus important for visualizing a gr…