图像设计布局的内容感知生成建模

摘要
简介
- 团队贡献
相关工作
- 1、图像设计布局
- 2、深度生成模型
数据集
- 1、语义布局注释
- 2、关键词提取
- 3、表示布局
模型
- 1、多模式嵌入网络
- - 图像编码器
  - 文本编码器
  - 属性编码器
- 2、布局生成网络
- 3、损失函数
- 4、训练细节
- 5、运行时布局生成
内容感知布局生成
- 1、自动布局生成
- 2、添加用户约束
结果和评估
- 1、实现细节
- 2、基线
- 3、自动布局生成的结果
- 4、受约束的布局生成结果
- 5、输入内容对布局的影响
总结和讨论
- 1、编码输入图像的尺寸
- 2、图像及其布局之间的强耦合
- 3、加强视觉设计原则
- 4、人机共创性

摘要

布局是图形设计的基础。为了视觉吸引力以及消息和思想的有效传达，图形设计布局通常会因要呈现的内容而有很大差异。在本文中，我们研究了内容感知的图形设计布局生成问题。
我们为图形设计布局提出了一个深层的生成模型，该模型能够基于用户输入的视觉和文本语义来合成布局设计。与先前的忽略输入内容并依赖启发式标准的方法不同，我们的模型捕获了视觉和文本内容对布局的影响，并且无需使用任何启发式规则即可从数据中隐式地学习复杂的布局结构变化。为了训练我们的模型，我们使用细粒度（详细的）的布局注释和关键字标签构建了大型杂志布局数据集。实验结果表明，该模型可以基于输入图像的视觉语义和基于关键字的输入文本摘要来合成高质量的布局。我们还证明了我们的模型在内部学习了强大的功能，这些功能捕获了内容和布局之间的微妙交互，这对于关注布局的设计检索很有用。

图1：我们的概率生成模型可以支持内容感知布局生成。给定输入图像、设计类别和概括文本内容的关键词（这些文本可以从输入文本中自动提取，也可以由用户直接提供），如（a）所示，我们的方法会自动生成符合视觉效果的多种布局和文字内容（b）。用户可以选择通过粗略地绘制页面上的某些元素来表达他/她的设计意图，例如，通过绘制两个绿色区域I 1和I 2来添加两个图像元素，以及通过绘制红色区域H来添加标题元素，如（c）中的小图。然后，我们的方法将生成与用户意图相匹配的布局，即在指定位置放置两张图片和一个标题，如（c）中的大图所示。输入图像来自Pexels。

简介

已有的一些工作是构建图像设计布局的模型，包括在风格、感知和美学指导下的布局生成。
大量丰富多样的图像设计布局都由视觉和文本内容驱动以展示。

图2：内容对布局的影响。此处显示的所有示例页面均来自时尚类别：（a）和（b）访谈；（c）简要履历；（d）流行趋势。

生成有效的图像布局需要理解图像元素的视觉内容和文本元素的含义，它们被编码为主题（如美妆/健康）、风格（如喜剧/正式）和目的（推广一个产品或阐述一种想法）。在访谈页面（a和b）中，照片占据主要位置；多人简介页面（c）中，分栏展示；流行趋势简介页面（d）中，比多人简介更具不规则性和创新性。
但是现有的布局方法仅专注于在某些高级语义因素（例如，图像的感知重要性或图像与文本元素之间的注意力转移）下对布局生成规则进行建模。他们不考虑视觉和文字内容对版面的影响。

在这项工作中，我们进一步调查视觉和文本内容如何影响图形设计版面以及根据要呈现的内容建模图形设计版面。我们将研究重点放在一种流行且重要的图形设计类型上：杂志。这是因为杂志涵盖了各种图像和文字内容，例如传记，时装秀和食谱，这些内容呈现出各种各样的布局，其中图像和文字的布局既丰富又复杂，可用于不同的目的。此外，杂志（组织图像和文本以进行信息交流）在布局方面足以代表大多数类型的图形设计（例如海报，广告和网页）。

我们提出了一个概率生成框架，用于对内容感知的图形设计布局进行建模。我们的模型学习基于视觉/文本内容和高级设计属性上的图形设计布局的条件分布。为了解决图形设计中丰富的布局变化，我们利用生成对抗网络（GAN）来建模复杂的布局分布，并引入了语义嵌入网络来对多模式内容和设计的结构/类别属性进行编码。我们的模型从数据中隐式学习布局结构和设计原理，而无需像在现有作品中那样使用任何启发式方法。此外，我们的模型会自动提取视觉特征，以捕获内容和布局之间的微妙互动。

为了训练我们的模型，我们构建了一个大型杂志布局数据集，该数据集由细粒度的语义布局注释和基于关键字的文本内容摘要组成。我们的数据集涵盖了多种杂志类别（包括时尚，美食，新闻，科学，旅行和婚礼），并且版式丰富。

团队贡献

1、我们尽力研究基于用户输入的视觉和文本语义的图形布局生成问题。为此，我们提出了一种用于图形设计版面的内容感知型深度生成模型，该模型能够基于视觉和文本特征来综合各种图形设计版面。
2、我们为大型杂志版面布局数据集提供丰富的语义注释，包括类别，细粒度语义布局和概述文本内容的关键字。
3、我们演示了如何将我们的模型应用于基于视觉和文本内容的自动且受约束的布局合成，以生成高质量的布局设计。我们还展示了我们的模型可以在内部学习可视化功能，这些功能可以捕获图形设计中内容和布局的交互方式，这对于关注布局的图形设计检索非常有用。

数据集

目前存在的数据集有页面数量少且类型受限的问题。并且现有的数据只包含页面分割，没有任何文本内容的展示，而这是对于文本内容进行布局建模的重要条件。
所以我们的做法是从网站上收集了3,919个杂志页面的语料库，涵盖6个常见类别，包括时尚，食品，新闻，科学，旅行和婚礼。据我们所知，我们的数据集比任何类似的公共可用数据集大一个数量级。6类数据的数量分别为：685, 753, 618, 509, 721和633。由于这6类杂志页面涵盖了各种各样的内容，因此它们显示出丰富的版式变化。我们为每个页面添加6种不同的语义元素，包括文本，图像，标题，图像上方的文字，图像上方的标题和背景。另外，我们还从每个页面的文本内容中提取关键字来表示文本。

1、语义布局注释

在这项工作中，我们假设布局包含4种类型的语义元素（即标签）：标题，文本，图像和背景。我们将标题元素与其他文本元素区分开来，因为标题元素在图形设计布局中起着重要作用。选择这四种类型的语义元素时，我们有两个注意事项：首先，它们是图形设计中的常见元素，并且在我们收集的数据集中也被发现是最频繁出现的元素，因此可以很好地描述数据集的布局变异性。（充分性）其次，其他元素类型往往会与这4种元素类型之一同时出现（例如，子标题总是放在正文之前，介绍性段落总是放在标题之后），总是放在常规位置（例如，作者鸣谢），或者不太常见（例如，拉引号）。不失一般性，在本文中我们将其他元素类型视为文本元素。此外，为了对布局中的分层表示建模（考虑空间布局），我们引入了两个其他标签来表示两种流行的分层类型：“图像上的文本”和“图像上的标题”，它们表示与Image元素完全/部分重叠的Text或Headline元素。对于每页，我们将每个像素分配给T = 6个标签之一（文本，图像，标题，图像上方文本，图像上方标题，背景），以表示其布局。

关于标记数据：由于从头开始手动标记这么多页面将非常耗时且费力，因此我们提出了一种半自动机制来标记数据集。我们首先手动标记页面的一小部分，然后使用它们来训练网络以自动分割数据集中的其他页面，并将每个像素分配给6个标记之一。受到全卷积神经网络（FCN）进行语义分割的出色性能的激励，我们利用FCN为页面添加标签。在FCN分割之后，每个分割的结果都会通过自动细化步骤进行改进，以去除噪声并细化元素边界。为了确保注释的质量，我们会在自动优化后进一步手动校正所有细分。以手动精炼的分割为ground truth，FCN细分的像素精度和区域相交（IoU）在整个数据集中分别为87％和69％。自动优化后，两个指标分别增加到88％和76％。

2、关键词提取

为了对图形设计中的视觉和文本内容建模，我们需要从设计中提取图像和文本。可以直接从分割中提取图像。对于文本，由于杂志页面中的全文可能包含许多与布局建模无关的冗余信息，因此我们建议提取关键字以紧凑地概括和表示全文。为此，我们使用Google Cloud Platform的OCR工具识别页面上的文本，然后使用快速自动关键字提取（RAKE）提取关键字。
对于每个杂志类别，我们创建一个关键字列表来表示该类别的文本。然后，可以使用该关键字列表来帮助从输入文本中选择相关的关键字。例如，诸如“食谱”和“口味”之类的词被视为“食品”杂志页面的有意义的关键字，而诸如“样式”和“服饰”之类的词则被视为“时尚”页面。为了构造类别的关键字列表，我们首先使用RAKE从数据集中同一类别的所有页面中提取关键字，然后根据它们的出现频率对其进行排序。然后，通过删除与设计类别无关或毫无意义的单词，我们手动将它们过滤为100个单词作为关键字列表。
在运行时，给定一个输入页面，我们再次使用RAKE从文本内容中提取关键字，然后删除不在相应关键字列表中的那些关键字，结果中的关键字用于表示文本内容。

3、表示布局

与其像以前的作品那样使用参数化的布局表示形式（即边界框），我们选择使用基于图像的布局表示形式。特别是，我们将每个像素的布局下采样为H×W大小的紧凑图像，通过将分割图划分为H×W的单元格网格，并为每个单元格分配该单元格中大多数像素所采用的标签。请注意，这种基于图像的表示方式让人联想到图形设计领域中广泛使用的网格系统，并且可以自然地由CNN处理。我们使用3维二进制向量对布局中每个单元格的值进行编码，包括（0，0，1），（0，1，0），（0，1，1），（1，0，0），（1，0，1）和（1，1，0）来代表6个标签。二进制向量的未使用值，即（0，0，0）和（1，1，1）被视为背景。适当的布局分辨率很重要。更高的分辨率允许模型捕获布局的更多精细级别的细节，但计算成本更高。在这里，我们将布局尺寸设置为60×45，以使我们的模型能够捕获足够的细节，同时仍然可以高效地进行训练。我们选择的版面大小还可以帮助保持4/3的长宽比，这在大多数杂志页面中都是常用的。

模型

由于我们的最终目标是通过考虑内容来学习生成高质量的图形设计版面，因此我们希望有一个具有高学习能力的模型来表示复杂的版面结构变化，同时捕获版面对内容的依赖性。为此，我们提出了一种用于布局生成的内容感知型深度生成网络体系结构。由于给定特定的内容集可能存在许多合理的布局，因此，我们的网络不是学习确定性的映射，而是学习给定视觉和文本内容以及设计属性（即设计类别，文本比例和图片比例）。最后，我们可以对我们的网络进行采样，以根据输入内容来合成多个不同的布局。

图3：我们模型的框架。它具有两个主要部分：多模式嵌入网络和布局生成网络。多模式嵌入网络从三个输入中学习多模式特征y，三个输入分别为：视觉内容（图像），文本内容（关键字）和3个高级设计属性（设计类别，文本比例Tp和图像比例Ip）。这些输入首先被分别发送到3个独立的编码器，即图像编码器，文本编码器和属性编码器，然后通过融合模块合并以获得y。布局生成网络学习以y为条件的布局分布，并提取内容感知特征ˆz。特别地，布局编码器E将布局样本x映射到以y为条件的特征ˆz，布局生成器G将随机向量z映射为以y为条件的布局样本〜x，并且鉴别器D学习以y为条件区分联合对（x，ˆz）和（〜x，z）。输入的图像来自澳大利亚地理（©Barry Skipsey /澳大利亚地理）。

1、多模式嵌入网络

多模式嵌入网络从图像和文本中分别学习视觉和文本特征，并使用他们指导后续的图设计布局的生成建模过程。同时也引入三个高级的设计属性对整个布局的生成做一个更加精细化的处理。所以多模式嵌入网络的输入是：图像、关键字和设计属性，并使用它们来分别产生视觉、文本和属性特征向量。这些特征向量会在一个融合层（包含两个全连接层）中融合，产生一个128维的特征向量y来调整布局生成网络。

图像编码器

给定一个界面，我们根据它的分割标签提取所有的图片区域，接下来将每个图片区域喂入一个预训练好的VGG16模型来提取图片特征。我们使用14x14x512的最终卷积层输出作为每个图像的表示。界面所有的图像表示首先被相加得到一个求和后的14x14x512的表示，再应用空间全局平均池化形成一个512维的向量，这个向量将被喂入3个全连接层来生成一个128维的图像向量。

文本编码器

对于给定的界面，首先提取一个关键词列表来表示界面的文本内容。每个关键词使用word2vec被嵌入到一个300维单词嵌入向量。一个界面所有的单词嵌入向量被相加并喂入3个全连接层来生成一个128维的文本向量。

属性编码器

考虑三个设计属性：设计类别、文本比例和图像比例。设计类别对于布局建模是非常重要的，因为它会影响内容和内容呈现的方式。文本和图像比例是指一个界面上文本（包括图像上文本）和图像元素占据的总区域。它们用作高级控制信号，使设计人员可以有选择地直观地表达他们对最终布局中文本或图像的总体密度的偏好，并被认为是我们布局建模的软控制。

2、布局生成网络

布局生产网络建立在GAN结构上，有一个生成器和一个判别器组成。生成器学习生成与训练数据有相同分布样本，判别器学习确定给定的样本是真实的还是生成的。在我们的布局生成网络中，生成器G映射到一个128维的隐向量z（噪声）到一个布局G(z)，判别器D输出一个置信度来指示布局x是真实的还是生成的。
标准的GAN从采样的隐向量生成一个布局。然而，通过一个学习到的映射，从一个被观察的布局（部分或完整的）中推断一个隐向量的做法是可取的。这种映射允许我们将用户的偏好合并到布局生成过程的同时，学习布局感知特征，以进行更有意义的设计比较。
为此，我们添加了一个多余的编码器E，E可以诱导一个分布p(^z|x)，来映射一个布局样本x从真实的布局分布p(x)到特征空间。同时生成器G诱导一个分布q(~x|z)，来映射一个先验分布q(z)到布局空间。我们使用一个标准正态分布作为先验分布q(z)。此外，判别器被训练用于联合判别布局和特征空间，即区分合并对(x,^z=E(x))和(~x=G(z),z)，而不是直接使用布局空间(x和~x）。换句话说，我们的对抗目标变为：生成器和编码器联合训练，通过生成判别器无法区分的联合对（可能来自生成器(~x=G(z),z)或者编码器(x,^z=E(x))）来欺骗判别器，判别器则学习区分这些联合对中的两类。目标就变成了匹配两个联合分布：p(x,^z)=p(^z|x)p(x)和p(~x,z)=p(~x|z)p(z)。编码器通过一系列卷积层来处理一个布局样本，以产生两个向量，分别代表高斯分布的均值和标准差。然后从高斯分布中提取一个样本，并将其用作特征向量。请注意，我们的布局以二进制向量表示。当在我们的模型中使用时，它们被视为具有[0，1]值的实向量，因为GAN难以处理离散输入。

3、损失函数

遵循最小二乘GAN（LSGAN）来为判别器D制定损失，以及为生成器制G定对抗损失。如下：

为了进一步改善学习，我们遵循VAE在损失函数中引入两个附加术语：重建损失和Kullback-Leibler（KL）发散损失。如下：

其中D KL是KL散度。重建损失促进了编码器和生成器的周期一致性（即，如果布局x通过编码器转换为特征向量ˆz，然后通过生成器转换回布局x，则x应该类似于x）。KL散度损失迫使编码器p（ˆz|x，y）的分布z接近生成器q（〜x|z，y）的z分布（即标准正态分布q（z）），因此编码器和生成器的特征向量都位于大致相同的空间中。从经验上我们发现，这两个附加项可以帮助改善数据分布的推理性能，这时我们需要共同使用编码器和生成器（即，首先通过编码器将速写的布局x映射到ˆz，然后再通过生成器映射^z到推算出的〜x。）
为了鼓励生成器产生多样的布局，添加了一个多样性损失。如下：

其中k是一个超参数。给定输入的多模式特征y，我们通过从z的分布中随机采样K个向量来生成K个布局，并选择与ground truth布局x距离最近的生成的布局。损失使生成器能够彻底探索真实的数据分布并鼓励生成的样本的多样性。
最终的损失就变为多个损失函数之和。如下：

4、训练细节

整个网络是端到端的训练，一个布局首先转换为一个降采样的基于图像的表示形式（60×45×3），然后通过用0填充来转换为64×64×3。我们的模型使用DCGAN的推荐配置，使用Adam优化器进行了培训。即β1=0.5，β2=0.999，ϵ=10^-8，学习率为0.0002，最小批大小为128。在每次迭代中，我们执行三个参数更新步骤来更新：
（1）使用公式1的判别器参数。
（2）使用公式6的生成器参数。
（3）使用公式7的编码器参数。
请注意，在每个参数更新步骤中，我们还使用每一步损失来更新多模式嵌入网络的参数。我们从经验上发现，鉴别器比生成器学习得更快，这会阻碍生成器的学习。为了确保对所有模块进行充分的训练，在每次迭代中，我们都会多次训练生成器和编码器，直到鉴别器的损失大于阈值（在我们的实验中为1）。

5、运行时布局生成

为了使用我们的网络生成布局，我们首先通过简单地删除填充像素并将每个值量化为0或1，将生成器的输出转换为初始布局（60×45×3）。
众所周知，GAN难以重建精细的视觉细节。尽管这对我们的工作来说不是问题，因为我们的目标是生成总体布局结构而不是逼真的图像，但是它仍然可能在生成的布局中造成一些视觉伪像。我们使用后期优化步骤来优化元素边界并纠正元素之间的轻微错位。特别是，我们首先通过连接的组件标签从初始布局中提取单个元素。为了解决锯齿状元素边界，我们应用了一系列形态图像处理操作，以直线近似元素边界。为了解决某些元素之间的轻微对齐问题，我们对它们执行了上/下/左/右对齐。为了进行顶部对齐，如果元素边界框的顶部边界坐标相差少于2个像元，则我们首先将元素聚类为一组。对于同一组的元素，然后调整它们的顶部边界以与最低的顶部边界对齐，以在元素之间创建足够的间距。同样，我们以类似的方式执行底部，左侧或右侧对齐。

内容感知布局生成

我们用于布局生成的问题设置如下：用户首先提供内容，即图像，关键词（或全文）和设计类别。如果用户提供了全文，则会像3.2节中一样自动从中提取关键字。我们的目标是生成适合给定内容和用户约束（如果有）的布局。

1、自动布局生成

给定输入的视觉和文本内容，我们提出一种基于模型的算法，以自动合成与输入匹配的布局。注意，当用户提供多个输入图像时，需要输入图像与所生成的布局中的图像元素之间的对应关系，以便将输入图像正确地放置在布局中。为此，我们假设根据输入图像的重要性在排名列表中提供输入图像，第一个是最重要的，最后一个是最不重要的。
然后，通过将更重要的输入图像分配给更大的图像元素，这些输入图像会根据图像元素的大小差异自动与布局中的图像元素相关联。特别是，给定用户指定的设计类别，我们的方法首先从数据集中同一设计类别的文本和图像比例的经验分布中采样16组文本和图像比例值。对于每个集合，我们通过将从先前分布q（z）得出的32个不同的随机向量发送到生成器来生成32个布局，从而总共生成512个布局。然后，我们通过应用以下过滤条件来删除无效的布局：
（1）图像元素的数量与输入图像的数量不同；
（2）图像元素的纵横比（宽度/高度）与对应的输入图像的纵横比相差太大（在我们的实现中大于1.3或小于0.7）。
还允许用户在生成的布局中指定他/她的首选文本和/或图像比例。如果给出这些比例，则从q（z）绘制的512个不同的随机向量中生成512个布局。

对于其余布局，我们使用最大边际相关性（MMR）准则使它们多样化。具体来说，我们使用鉴别器输出（分类概率）作为生成布局的质量得分，并使用特征空间中的L2距离（来自编码器的平均向量，该向量基于从输入内容中提取的多峰特征而定）计算布局之间的相似度得分。质量得分最高的布局排在第一位，并添加到排名列表L中。对于其他每个布局l，我们计算一个排名得分：
其中Q l是l的质量得分，而S（l，e）是 l和e之间的相似性得分。排名得分最高的布局将一次添加到排名列表中。通过将布局迭代地添加到L，可以通过平衡质量和相似度来对所有布局进行排名。最后，我们返回前3个布局作为生成的布局，其中填充了给定的图像和一些随机文本。

2、添加用户约束

用户还可以通过在页面上粗略绘制一些元素以指示某些元素的近似位置和大小来控制布局生成过程。然后，我们的方法将生成与用户的约束相匹配的布局，如图1（c）所示。请注意，草绘的元素仅反映用户的设计意图，因此被视为软约束。用户还需要为草绘的图像元素指示相应的图像。给定用户约束，我们的布局生成遵循第5.1节中讨论的步骤，但有一个主要区别：代替使用随机矢量，我们使用编码器从输入草图中提取的特征（称为约束特征）来生成新颖的布局。

结果和评估

1、实现细节

为了可视化生成的布局，固定了“文本”和“图像上的文字”元素的字体大小，而“标题”和“图像上的标题”元素的字体大小设置为至少三倍，并根据大小而变化的相应区域。
对于“文本上的文字”和“标题上的文字”，字体颜色可以是白色或黑色，具体取决于相应图像区域的亮度，并且如果“文本和标题”的背景设置为透明（或白色），与图像完全（或部分）重叠。为了用其相应的输入图像填充布局中的图像元素，我们首先使用[Heynemann等人，2015年]检测图像的焦点（即，最显着区域的中心），然后使用它来指导图像的裁剪，以便尽可能保留重要的图像内容，例如关键前景角色的脸部。请注意，这些操作仅用于可视化生成的布局。我们的布局生成过程不涉及任何启发式规则。

2、基线

由于没有现有作品解决内容感知图形设计布局生成的问题，因此，我们将我们的方法与两个基于最近邻居搜索的简单但合理的内容感知基准进行了比较。给定与我们方法中相同的输入，首先选择属于输入设计类别的所有布局作为要检索的布局候选者，然后按输入图像的数量和纵横比对其进行过滤。最后，两个基线使用我们的多模式嵌入网络计算内容嵌入向量，并从过滤后的布局候选者返回内容嵌入空间中最近邻居的布局。为了计算嵌入向量，对于第一个基线（Baseline1），我们使用带有VGG权重的图像编码器来获得512维图像向量，并使用word2vec嵌入的总和来获得300维关键词向量。然后，我们将图像和关键字向量与三个重复的一键属性向量（即类别，文本和图像比例）连接起来，以形成内容嵌入向量。对于第二个基准（Baseline2），我们直接将学习到的多模式嵌入功能用作内容嵌入向量以进行检索。虽然Baseline1使用针对其他任务进行了预训练的内容功能来验证对现有功能的天真的使用是否有效，但是Baseline2使用我们训练有素的多模式嵌入网络中的内容功能来验证是否单独使用多模式嵌入网络。请注意，基线结果是由专业设计师创建的现有布局，因此应该很好地遵守视觉设计准则。

3、自动布局生成的结果

图4：我们的自动布局生成方法的结果。在每种情况下，输入图像，关键字和设计类别都显示在左侧。右侧显示了两个基线方法（Baseline1，Baseline2）的布局，我们的方法（Ours）的布局以及地面实况布局（Ground Truth）。对于每种布局，标题均以加粗的A序列填充。布局分割显示在右下角或左上角（黄色表示文本，绿色表示图像，红色表示标题，蓝色表示文本图像叠加，紫色表示标题图像叠加，灰色表示背景）。请注意，在每种情况下，基线和我们的方法中使用的文本和图像比例都是从地面真相布局获得的。输入图像（从上到下）分别来自澳大利亚地理（©Barry Skipsey /澳大利亚地理），Club Med（©Club Med），MICHELLE BELLER摄影（©MICHELLE BELLER摄影）。

图5：我们结果的多样性。给定每组输入，我们的方法会自动生成3种不同的布局。输入的图像来自Pixel和Pexels。

图6：用户研究的结果，比较的是我们的方法生成的布局以及两个基准和GT生成的布局。我们显示了新手（a）和专家（b）的评估结果。在每一列中，我们将结果与Baseline1（左），Baseline2（中）和Ground Truth（右）的结果进行比较。颜色栏显示了我们的结果优于其他结果的次数百分比。括号中的数字表示标准偏差。在三个方面（卡方检验，p <0.05），评估人员（无论是新手还是专家）始终偏爱我们的结果优于基线结果。除了新手的适应性偏好（卡方检验，p = 0.01）以外，我们的结果通常与基本事实（卡方检验，p> 0.05）相当。

图7：我们的方法与一个图形设计布局方法的视觉比较。在每一行中，O’Donovan等人的结果和我们的方法的结果，来自相同的输入的显示在左侧。更改输入图像（第一行）和文本（第二行）后的结果显示在右侧。

4、受约束的布局生成结果

图8：受约束的布局生成结果。在每种情况下，输入内容和输入草图指示输出布局中所需元素的大概位置和大小（“ T”：文本元素，“ I”：图像元素，“ H”：标题元素，“ T \ I”：图像上方的文字元素，“ H \ I”：图像上方的标题元素）显示在左侧。基线（基线），我们的方法（我们的方法）和GT（GT）的结果显示在右侧，其中标题由一系列以粗体显示的A填充。请注意，在每种情况下，我们的方法和基线中使用的文本和图像比例都是从GT布局中获得的。

图9：用户研究的结果，将我们的方法生成的用户约束布局与基线和GT进行了比较。我们显示了新手（a）和专家（b）的评估结果。在每一列中，我们将结果与基准结果（左）和GT（右）进行比较。颜色栏显示了我们的结果优于其他结果的次数百分比。括号中的数字表示标准偏差。在4个方面（卡方检验，p <0.001），评估人员（无论是新手还是专家）都始终偏爱我们的结果优于基线结果。我们的结果通常与基本事实具有可比性（卡方检验，p> 0.05）。

5、输入内容对布局的影响

图10：视觉和文字内容对版面的影响。在保持图像固定的同时，从左到右更改输入关键字。从上到下更改图像，保持输入的关键字相同。左三列和右三列的输入类别分别是婚礼和旅行。请注意，生成的标题使用A的粗体填充，并且所有示例均使用相同的随机矢量生成。第一行中的图片来自Pexels，其余图片来自Club Med（©Club Med）。

图11：左：用于测量三个输入因素（图像，关键字和类别）对生成的布局的影响的定量结果。对于每个输入因子，我们显示了当改变因子时布局距离的平均值和标准偏差。所有距离均值均显着不同于零（一次样本t检验，p <0.05）。右：用户研究的结果调查了人们是否可以识别输入内容对生成的布局的影响。对于三个输入因子中的每一个，向参与者显示了因子的内容，一个从相同内容生成的拟合布局，以及一个从相同因子的不同随机内容生成的不合适布局。我们报告了参与者相比不适合的布局更喜欢适合的布局的比例。括号中的数字表示标准偏差。对于所有因素，偏好均具有统计学意义（卡方检验，p <0.05）。

图12.通过我们的方法生成的广告。在每种情况下，输入图像，关键字和设计类别都显示在左侧，结果显示在右侧。输入图像来自Pexels。

总结和讨论

在本文中，我们朝着根据要呈现的图像和文本内容进行图形设计布局建模迈出了一步。为此，我们提出了一种用于内容感知布局生成的新颖的概率生成框架，并构建了一个具有丰富注释（包括细粒度语义布局注释和文本内容关键字）的大型且多样化的杂志布局数据集。我们已经证明，无论有没有用户输入约束，我们的模型自然都支持内容感知的布局生成。我们分析了视觉和文本内容的变化如何影响版面生成，并表明我们的模型可以通过设计检索任务来学习捕获内容和版面之间相互作用的功能。
我们在图13中显示了一种典型的方法失败案例，其中在不适当的位置放置了“文字覆盖图像”元素，从而遮挡了一些重要的图像区域。这可能是因为我们的模型无法很好地捕捉图像显着性和“文字覆盖图像”元素之间的空间关系。一种可能的解决方案是在我们的模型中显式考虑图像显着性，这将留待以后的工作。
我们的最终目标是构建一个能够将高级用户输入转换为专业图形设计布局的全自动系统。我们认为，充分实现目标还有很长的路要走。

图13：我们方法的典型故障案例。我们的布局生成方法可能会生成不令人满意的布局，其中“图像上的文字”元素会遮挡输入图像的语义重要部分。在这两个示例中，文本放置在人的脸上。输入图像来自Pexels。

1、编码输入图像的尺寸

我们的方法没有明确考虑输入图像的尺寸，而是使用后过滤步骤来查找适合输入图像尺寸的布局。例如，通过引入附加的嵌入分支来对这种信息进行编码，直接在输入图像尺寸上调节模型是很有趣的。这可以加快我们的布局生成过程。然而，由于其他输入因素的影响，由于不能保证生成的布局中图像区域的尺寸将与输入图像尺寸完全匹配，因此仍可能需要进行后过滤步骤。

2、图像及其布局之间的强耦合

我们的网络对视觉内容和布局的整体语义之间的依赖关系进行了建模，但是无法捕获布局中各个图像与其相应配置（例如大小和位置）之间的确切对应关系。这部分是因为我们选择一个对称函数来合并所有图像特征向量，以便获得固定的图像表示。为了减轻这种限制，我们可以为用户提供一个“混洗”选项，以探索将输入图像分配给生成布局中的图像区域的不同方法，如Adobe Spark [Spark 2018]。为了在图像及其布局属性之间实现更强的耦合，而不是直接从我们的内容表示中直接重建完整的布局，将每幅图像的特征向量显式映射到图像布局（在布局中编码其空间配置的二进制掩码），并合成所有图像布局以生成完整的布局。

3、加强视觉设计原则

我们的方法纯粹是数据驱动的，没有明确考虑一些视觉设计准则。我们已经表明，我们当前的方法可以产生有希望的结果。但是，它可能会产生一些布局，这些布局并不严格遵循某些设计规则（例如，轻微的未对准）。由于视觉设计原理已广为人知和研究，解决这一问题的一种解决方案是将一些关于视觉设计原理的先验知识整合到我们的网络中。另一个解决方案是使用基于规则的更复杂的优化来完善我们的网络输出。

4、人机共创性

虽然我们已经证明了我们的结果很容易用于自动生产，但是探索一种在设计过程中可以同时涉及人和机器创造力的协作方案将是很有趣的。特别是，人类设计师可以将它们用作原型或起点，而不是将我们的输出用作最终结果，并将它们调整为更具个性化的布局。我们相信，这种人机共创性有潜力激发新的方法并扩大我们对图形设计的想象力。

Content-aware Generative Modeling of Graphic Design Layouts 论文阅读相关推荐

2018FSNet: An Identity-Aware Generative Model for Image-based Face Swapping论文阅读笔记
论文原文及地址:FSNet: An Identity-Aware Generative Model for Image-based Face Swapping 摘要: 本文提出了基于图像的人脸交换的深 ...
[论文阅读] (18)英文论文Model Design和Overview如何撰写及精句摘抄——以系统AI安全顶会为例
<娜璋带你读论文>系列主要是督促自己阅读优秀论文及听取学术讲座,并分享给大家,希望您喜欢.由于作者的英文水平和学术能力不高,需要不断提升,所以还请大家批评指正,非常欢迎大家给我留言评论,学 ...
[论文阅读] (13)英文论文模型设计（Model Design）如何撰写及精句摘抄——以入侵检测系统(IDS)为例
<娜璋带你读论文>系列主要是督促自己阅读优秀论文及听取学术讲座,并分享给大家,希望您喜欢.由于作者的英文水平和学术能力不高,需要不断提升,所以还请大家批评指正,非常欢迎大家给我留言评论,学 ...
Content Aware ABR技术
本文将简要介绍编码优化领域的成员 - Mux 在CAE (Content Aware Encoding) for ABR领域的技术动态. 转载声明:本文转载自公众号[媒矿工厂] 什么是自适应比特率? ...
PaperNotes(12)-Autoregressive Quantile networks for generative modeling
Autoregressive Quantile networks for generative modeling 3 autoregressive implicit quantiles 3 autor ...
Generative Modeling by Estimating Gradients of the Data Distribution(paper reading)
Generative Modeling by Estimating Gradients of the Data Distribution (Paper reading) Yang Song, Stan ...
After Effects for Graphic Design After Effects for Graphic Design Lynda课程中文字幕
After Effects for Graphic Design 中文字幕 After Effects for Graphic Design 中文字幕After Effects for Graphic ...
Generative Modeling by Estimating Gradients of the Data Distribution阅读笔记
目录概述传统score-based generative modeling介绍 score matching Langevin dynamics 传统score-based generative ...
Content Aware ABR技术（二）
上次我们回顾了Content Aware ABR的使用场景和基本原理,并梳理了Netflix的per-title和per-chunk技术相关研究进展.本文将主要介绍YouTube关于ABR的一些研究进 ...

Content-aware Generative Modeling of Graphic Design Layouts 论文阅读