【论文笔记】Learning Structural Similarity of User Interface Layouts using Graph Networks

中文标题：使用图神经网络学习UI的相似度

发表会议：ECCV 2020

文章链接：Learning Structural Similarity of User Interface Layouts using Graph Networks

源代码：gcn-cnn

1 Introduction

1.1问题陈述：

布局是用户体验（UX）设计的基础，其中用户界面组件的排列构成了交互式应用程序的蓝图。大量的UX布局存储库在网上公开共享。轻松搜索这些存储库的能力提供了发现和重新使用布局的机会，从而使对设计专业知识的访问更加便利。

1.2 解决办法：

本文提供了一种新颖的技术，用于可视化地搜索用户体验设计，它利用基于图的表示形式将界面组件的属性及其空间关系集成在一起。作者提出了一种三元组体系结构，以利用此表示法，利用结合了图卷积网络（GCN）编码器和卷积网络（CNN）解码器的混合编码器-解码器来学习度量搜索嵌入的布局相似性。

2 Methodology

所提出的GCN-CNN框架的体系结构如图1所示。它由三元组架构（暹罗语）构成，该架构将输入UI布局编码到潜在空间中的基于图的编码器，以及重构多帧的转置卷积解码器布局的多通道栅格渲染。我们的网络使用双重损失进行训练：
$L_{\text {total}}=\sum_{x \in\{a, p, n\}} L_{r e c}\left(x, x^{\prime}\right)+\lambda L_{t r i}(a, p, n)$
其中， $（a,p,n）$ 是UI布局三元组，包含锚点，正向和负向。 $L_{r e c}\left(x, x^{\prime}\right)$ 是重构损失，可用于以无监督方式训练GCN-CNN。 $L_{t r i}(a, p, n)$ 是三元组损失。

【论文笔记】Learning Structural Similarity of User Interface Layouts using Graph Networks

2.1 Graph representation

作者使用UI组件及其几何属性描述UI布局。将高度为 $h$ 宽度为 $w$ 的布局表示为一张空间图 $\mathcal{G}=(\mathcal{V}, \mathcal{E})$ ，其中 $\mathcal{V}=\left\{c_{1}, \cdots, c_{i}, \cdots, c_{\kappa}\right\}$ 是节点，表示的是 $\kappa$ 个UI组件， $\mathcal{E}=\left\{e_{11}, \cdots, e_{i j}, \cdots e_{\kappa \kappa}\right\}$ 是边，表示UI组件之间的关系。每个节点包含了两种信息：1）语义属性 $s_{i}$ ，一个使用one-hot向量表示的UI组件的类型；2）几何属性 $\mathbf{g}_{i}$ ，编码UI组件的空间位置。

将 $\left(x_{i}, y_{i}\right)$ 作为布局的形心， $\left(w_{i}, h_{i}\right)$ 为UI组件 $c_i$ 的宽度和高度， $A_{i}=\sqrt{w_{i} h_{i}}$ ，几何属性 $\mathbf{g}_{i}$ 的计算方法为：
$\mathbf{g}_{i}=\left[\frac{x_{i}}{w}, \frac{y_{i}}{h}, \frac{w_{i}}{w}, \frac{h_{i}}{h}, \frac{A_{i}}{w h}\right]$
边的特征 $\mathbf{r}_{i j}$ ，通过边 $e_{i j}$ 和它关联的两个节点 $c_i$ 和 $c_j$ 计算得到：
$\mathbf{r}_{i j}=\left[\psi_{i j}, \theta_{i j}, \frac{\Delta x}{A_{i}}, \frac{\Delta y}{A_{i}}, \frac{w_{j}}{w_{i}}, \frac{h_{j}}{h_{i}}, \frac{1}{D} \sqrt{\Delta x^{2}+\Delta y^{2}}\right]$
其中， $\Delta x=x_{j}-x_{i}$ 和 $\Delta y=y_{j}-y_{i}$ 表示两个节点的偏移， $D=\sqrt{w^{2}+h^{2}}$ 为对角线长度， $\theta=\operatorname{atan} 2\left(\frac{\Delta y}{\Delta x}\right) \in[-\pi, \pi]$ 表示方向， $\psi_{i j}$ 为平均联合相交（IoU），计算方法为：
$\psi_{i j}=\frac{M\left(c_{i}\right) \cap M\left(c_{j}\right)}{M\left(c_{i}\right) \cup M\left(c_{j}\right)}$
其中， $\mathrm{M}(.)$ 表示某个组件的覆盖范围。

2.2 GCN-CNN Encoder-Decoder

2.2.1 Layout Encoder

本文提出了一种混合GCN-CNN编码器-解码器体系结构，以无监督的方式学习潜在空间。GCN编码器将布局图映射到嵌入空间。UI组件 $c_i$ 构成图中的一个节点，节点特征 $\mathbf{n}_{i}$ 包含了节点类别 $s_{i}$ 和几何属性 $\mathbf{g}_{i}$ ，计算方法为：
$\left.\mathbf{n}_{i}=E_{n}\left(\left[E_{s}\left(s_{i}\right) \mathbf{g}_{i}\right]\right)\right)$
其中， $E_{s}$ 是一个编码层，用于编码UI组件的类别， $E_{n}$ 是一个线性层将语义和几何特征投影到节点特征 $\mathbf{n}_{i}$ 中。同样的，节点特征 $\mathbf{r}_{i j}$ 是通过 $E_{r}\left(\mathbf{r}_{i j}\right)$ 投影得到的。节点特征和边特征通过图卷积网络 $g_{n}(\cdot)$ 和 $g_{r}(\cdot)$ ，它们的计算为：
$\mathbf{x}_{n_{i}}=g_{n}\left(\mathbf{n}_{i}\right)$

$\mathbf{x}_{\mathbf{r}_{i j}}=g_{r}\left(\left[\mathbf{n}_{i} E_{r}\left(\mathbf{r}_{i j}\right) \mathbf{n}_{j}\right]\right)$

关系图网络 $g_{r}(\cdot)$ 在元组上 $<\mathbf{n}_{i}, E_{r}\left(\mathbf{r}_{i j}\right), \mathbf{n}_{j}>$ 运行，将信息通过图传递，以了解整体布局。通过图卷积得到两组特征：
$\mathcal{X}_{n}=\left\{\mathbf{x}_{n_{1}}, \mathbf{x}_{n_{2}}, \ldots \mathbf{x}_{n_{n}}\right\} \quad \text { } \quad \mathcal{X}_{r}=\left\{\mathbf{x}_{r_{11}}, \mathbf{x}_{r_{12}}, \ldots \mathbf{x}_{r_{n}},\right\}$
其中， $\kappa$ 和 $\kappa^{\prime}$ 是组件数量和关系数量。之后，这两组向量通过自注意力模块进行特征传递，对节点特征和边特征进行池化：
$\mathbf{f}_{n}^{a t t}=\sum_{i=1}^{\kappa} \alpha_{n_{i}} \mathbf{x}_{n_{i}} \quad \text { and } \quad \mathbf{f}_{r}^{a t t}=\sum_{i=1}^{\kappa^{\prime}} \alpha_{r_{i}} \mathbf{x}_{r_{i}}$

$\alpha_{n_{i}}=\frac{\exp \left(\mathbf{w}_{n}^{\top} \mathbf{x}_{n_{i}}\right)}{\sum_{l=1}^{n} \exp \left(\mathbf{w}_{n}^{T} \mathbf{x}_{n_{l}}\right)} \quad \text { and } \quad \alpha_{r_{i}}=\frac{\exp \left(\mathbf{w}_{r}^{\top} \mathbf{x}_{r_{i}}\right)}{\sum_{l=1}^{\kappa^{\prime}} \exp \left(\mathbf{w}_{r}^{T} \mathbf{x}_{r_{l}}\right)}$

其中， $\alpha_{n_{i}}$ 和 $\alpha_{r_{i}}$ 是注意力系数， $\mathbf{w}_{n}^{\top}$ 和 $\mathbf{w}_{r}^{\top}$ 为参数.

最后，获得了对UI布局进行编码的d维潜在嵌入： $\mathbf{f}_{e}=E_{e}\left(\left[\mathbf{f}_{n}^{a t t}, \mathbf{f}_{r}^{a t t}\right]\right)$ 。

2.2.2 Layout Decoder

使用转置卷积网络，将GCN编码器编码的嵌入费用解码为图像光栅，转置卷积（也称为反卷积）网络在扩大特征图的同时学习越来越局部化的表示形式。解码层的输出为图像光栅 $\rho^{\prime} \in \mathbb{R}^{H \times W \times N_{s}}$ ，计算解码后的光栅和初始光栅之间的损失：
$L_{r e c}\left(\rho, \rho^{\prime}\right)=\Sigma_{m=1}^{25} \Sigma_{n=1}^{H} \Sigma_{p=1}^{W}\left(\rho_{m n p}-\rho_{m n p}^{\prime}\right)^{2}$
图2展示了光栅重建的对比。

【论文笔记】Learning Structural Similarity of User Interface Layouts using Graph Networks

2.3 Metric Learning via Triplet Training

为了学习有效搜索所需的嵌入空间中的度量属性，我们建议训练GCN-CNN编码器/解码器的基于三元组的暹罗架构，如图1所示。我们建议使用两种布局的组件边界框之间的平均联合相交（IoU）作为选择三元组的弱标签。如果它们的IoU值大于阈值，则我们将两个布局选择为锚定阳性对，根据视觉观察经验将其设置为0.6。如果IoU值低于0.4，我们选择任何布局为负。损失函数的计算方法为：
$L_{t r i}(a, p, n)=\left[\left\|f_{e}^{(a)}-f_{e}^{(p)}\right\|_{2}-\left\|f_{e}^{(a)}-f_{e}^{(n)}\right\|_{2}+\nu\right]_{+}$
其中， $\left(f_{e}^{(a)}, f_{e}^{(p)}, f_{e}^{(n)}\right)$ 是三元组 $(a, p, n)$ 的嵌入向量， $\nu=0.2$ 是margin， $[x]_{+}=\max (x, 0)$ 。

【论文笔记】Learning Structural Similarity of User Interface Layouts using Graph Networks

1 Introduction

1.1问题陈述：

1.2 解决办法：

2 Methodology

2.1 Graph representation

2.2 GCN-CNN Encoder-Decoder

2.2.1 Layout Encoder

2.2.2 Layout Decoder

2.3 Metric Learning via Triplet Training

3 Experiments

3.1 Datasets

3.1.1 和任务

3.1.2 预训练基线

3.2 Pre-Training and Fine-Tuning Setup

3.1 Datasets

3.1.1 和任务

3.1.2 预训练基线

3.2 Pre-Training and Fine-Tuning Setup

【论文笔记】Learning Structural Similarity of User Interface Layouts using Graph Networks

1 Introduction

1.1问题陈述 ：

1.2 解决办法：

2 Methodology

2.1 Graph representation

2.2 GCN-CNN Encoder-Decoder

2.2.1 Layout Encoder

2.2.2 Layout Decoder

2.3 Metric Learning via Triplet Training

3 Experiments

3.1 Datasets

3.1.1 和任务

3.1.2 预训练基线

3.2 Pre-Training and Fine-Tuning Setup

3.1 Datasets

3.1.1 和任务

3.1.2 预训练基线

3.2 Pre-Training and Fine-Tuning Setup

相关推荐

1.1问题陈述：