CVPR 2023：图文展示布局生成的新评测基准与方法

　　导语

　　本期分享北大王选计算机研究所多媒体信息处理研究室（负责人：彭宇新教授，《电子与信息学报》编委）与美团合作发表于 CVPR 2023 的论文"PosterLayout: A New Benchmark and Approach for Content-aware Visual-Textual Presentation Layout"，相关技术已应用于美团 APP 广告海报自动设计中。

　　图文展示布局生成旨在根据用户给定的图像及元素（例如：文本、图标和衬底），自动生成海报布局，从而设计达到人类设计师水平的海报，是智能创意设计的关键技术。现有方法在同时处理元素间关系、图像 - 元素间交叉关系时，仍面临元素不对齐、区域重叠等问题，难以生成高质量的布局。同时，作为一个新兴的研究方向，仍缺乏公开的数据集和评测基准。

　　因此，本文首先建立了图文展示布局数据集和评测基准 PKU PosterLayout，具有源域多样性、内容多样性、布局复杂度等特点，能更好地验证方法的泛化能力。其次，本文提出了设计序列生成网络（Design Sequence GAN，DS-GAN），将人类经验引入设计序列形成算法，将布局自动重组为隐含时间信息的设计序列，并以图像的视觉特征作为初始状态，模拟人的设计行为，自动生成与图像内容兼容的布局。实验结果验证了新基准和新方法的有效性，能为多样的图像生成合适的图文布局，达到人类设计师的广告海报设计质量。

　　第一作者：徐筱媛（硕士生）

　　通讯作者：彭宇新教授

　　论文链接 :

　　数据集链接：

　　源代码链接：

　　课题组主页：

　　课题组Github主页：

　　一、背景与动机

　　图文展示是指在给定的图像画布上添加信息元素和装饰元素，常用于广告海报、杂志封面的创意设计，是传达信息的常用形式之一。如图 1 所示，布局（即元素的空间位置）是决定信息传递效果和视觉美学效果的关键因素。然而，在大量创作时，用户只能寻求预定义模版，导致图文展示缺乏多样性和协调性。因此，如何自动生成图文展示布局，成为了智能创意设计走向实际应用的关键技术。

　　图 1：图文展示布局任务

　　现有图文展示布局生成方法大多聚焦在挖掘元素之间的关系，忽略了图像画布与布局之间的交叉关系，难以生成与图像画布兼容的布局。例如，将图标放置在画布中的人脸上造成遮挡，或是将文字放置在背景复杂区域损害可读性等。少数方法 [ 1, 2 ] 关注到了这一问题，但未能全面地考虑元素间关系，导致元素位置不对齐、区域重叠等问题。

　　针对上述问题，本文提出了基于设计行为建模的布局生成方法，同步且均衡地处理元素间关系与画布 - 布局间关系。此外，图文展示布局生成作为一个新兴的研究方向，仍缺乏公开的数据集和评测基准，因此，本文首先建立了图文展示布局数据集和评测基准 PKU PosterLayout。本文的主要贡献及方法创新点如下：

　　( 1 ) 数据集与评测基准 PKU PosterLayout：由 9,974 个海报 - 布局对、905 个图像画布构成，具备更高的源域多样性、内容多样性、布局复杂度，为图文展示生成方法提供更具挑战性的评测基准。

　　( 2 ) 设计序列形成：通过引入人类设计行为经验，将布局数据转化为隐含时间特征的设计序列，创造序列的规律性，增强循环网络的鲁棒性。

　　( 3 ) 设计序列对抗生成网络：通过显著性网络获得多种精度的图像画布显著性图，作为驱动卷积长短期记忆网络（CNN-LSTM）的初始状态，通过基于异常序列检测的对抗博弈，生成与画布内容兼容的高质量布局。

　　图 2：PKU PosterLayout 数据集内多样的海报 - 布局对

　　二、数据集与评测基准 PKU PosterLayout

　　首先，对现有数据集与评测基准的属性进行整理，如表 1 所示。NDN [ 3 ] 将图像作为元素类型而非作为画布，并假设画布为空，无法直接支持图文展示布局生成，同时，规模较小、内容单一。ICVT [ 1 ] 的测试集规模过小、内容多样性未知。CGL-GAN [ 2 ] 的数据来源单一、内容多样性有限、布局复杂度低。

　　针对现有数据集的不足，本文构建了新的数据集与评测基准 PKU PosterLayout，由 9,974 个海报 - 布局对、905 张图像画布组成。如图 2 所示，元素类型包含文字、图标、衬底，其贡献主要体现在 3 个方面： ( 1 ) 源域多样性、 ( 2 ) 内容多样性、 ( 3 ) 布局复杂度。

　　表 1：图文展示布局数据集与评测基准的属性对比

　　01

　　源域多样性

　　图像数据有多个来源，包括电商海报数据集 [ 4 ] 和五个图像库网站，涵盖自然图像与人工合成图像，在域、质量和分辨率方面各不相同，增强了数据分布的离散度，使数据集更贴近实际应用场景、更加通用。

　　02

　　内容多样性

　　图像内容涵盖九大商品类别，包括食品 / 饮料、化妆 / 配饰、服装 / 鞋包、玩具 / 乐器、生活 / 杂货、运动 / 交通、自然 / 生鲜、电子 / 办公、家电 / 装潢。同时，通过提供主要对象在内容、数量、位置上的差异性，确保图像内容与组成的多样性，能够验证方法对多样性图像画布的泛化能力。

　　03

　　布局复杂度

　　如图 3 所示，数据集布局元素数分布广泛。为了使得元素间关系建模更具挑战，仅保留了元素数大于 10 的复杂布局，以支持复杂布局任务，例如多层次的布局生成。PKU PosterLayout 是第一个具备复杂图文展示布局的公开数据集。

　　图 3：PKU PosterLayout 数据集内布局元素数分布

　　三、方法

　　图 4：基于设计行为建模的布局生成方法

　　本文方法如图 4 所示：对于元素间关系，使用设计序列形成算法将真实 / 随机初始化布局转换为设计序列。对于画布 - 布局间交叉关系，首先，将图像布局与其显著性图串接，使用视觉骨干网络抽取多尺度视觉特征；然后，分别将视觉特征、设计序列作为设计序列生成对抗网络的初始状态和输入，通过基于异常序列检测的对抗博弈，生成与画布内容兼容的高质量布局。

　　设计序列形成

　　参考人机交互与艺术创作两个领域的交叉研究，依据人类的经验将设计行为建模为设计序列，有助于理解图文展示布局。因此，本文依据元素被放置于画布上的顺序对布局进行重组，通过引入人类经验或使用者的偏好，补齐原始布局数据缺乏的时间特征，如算法 1 所示：

　　其中，为第个元素，为其类型，和为元素边界框坐标。

　　设计序列形成的主要原则是将类别越特殊（例：图标）、面积越大的元素靠前放置，同时将属于同一群组的相关元素相邻地放置。此外，根据设计行为研究，图标的放置顺序受阅读习惯（例：左上至右下）影响，文本通常由元素面积决定。最后，衬底作为装饰元素，只有在覆盖其的所有元素都被放置后，才会被放置。通过此算法规律地序列化布局，不仅将布局理解转化为时间序列建模问题，同时也增强了下一步循环网络的鲁棒性。

　　设计序列生成对抗网络

　　在设计序列生成对抗网络 DS-GAN 中，生成器用于将随机噪声（初始化布局）转变成与画布内容兼容的高质量布局，判别器则用于检测生成布局为异常的设计序列，在两者的博弈中逐步学习训练数据的分布。具体地，生成器与判别器皆由一个 ResNet 视觉骨干网络和一个 CNN-LSTM 网络组成。

　　首先，使用显著性检测网络对 PFPN [ 5 ] 与 BASNet [ 6 ] 获得多域、多精度的显著性图进行融合，并串接原始图像画布，通过多尺度视觉骨干网络获得图像画布的视觉特征，并作为 CNN-LSTM 网络的初始状态：

　　其中，为输入的图像画布，为获得的显著性图，为逐像素的最大化操作。而 CNN-LSTM 网络的输入则是完成转换的设计序列。在生成器中，CNN-LSTM 模型的输出经过两个独立的线性层，分别解码为元素的类型与边界框。而在判别器中，则经过一个线性层，检测输入的设计序列是否异常。画布的视觉特征将驱动 CNN-LSTM 网络检测或生成设计序列，达到同步且均衡地处理元素间关系与画布 - 布局间关系。

　　在训练阶段，使用 Hinge 损失作为对抗损失优化对抗生成网络，并额外使用生成布局与真实布局之间的 NLL 损失、L1 损失、GIoU 损失的加权和作为重建损失优化生成器，从而在初始期间更好地引导训练。

　　四、实验

　　01

　　实验数据集和对比方法

　　本文在提出的 PKU PosterLayout 上进行实验验证，并将本文提出的 DS-GAN 方法与美学评价驱动的文本展示（以 T 表示）布局生成 SOTA 方法 SmartText [ 6 ] 、数据驱动的图文展示布局（以 V-T 表示）生成 SOTA 方法 CGL-GAN [ 2 ] 进行对比。

　　02

　　评价指标和对比方法

　　本文使用 8 种图形指标、内容感知指标综合地评估方法生成的图文展示布局质量。所有指标均已归一化到 0-1 之间，↑表示指标越高越好、↓表示指标越低越好。

　　图形指标评价元素间的组成关系，包括：

　　( 1 ) ：表示布局中有效元素占所有元素的比例。其中，" 有效 " 指元素在画布内的面积大于画布的 0.1%，指标 ( 2 ) - ( 8 ) 仅考虑有效元素。

　　( 2 ) ：除衬底之外的所有元素对的相互覆盖程度 ( IoU ) 。

　　( 3 ) ：元素之间空间不对齐的程度。

　　( 4 ) ：衬底元素占被装饰元素面积比例的最大值，等于 1 时完整包覆被装饰元素。

　　( 5 ) ：完全包覆被装饰元素的衬底占所有衬底元素的比例。

　　内容感知指标评价图像画布与布局间的组成关系，包括：

　　( 6 ) ：非显著性区域利用率。

　　( 7 ) ：显著性区域被遮挡程度。

　　( 8 ) ：信息不易读程度，指文本元素单独放置区域的非平坦程度。

　　03

　　与现有方法的对比及分析

　　表 2：PKU PosterLayout 数据集上的实验结果对比

　　实验结果如表 2 所示。本文提出的方法 DS-GAN 几乎在所有图形指标上超越现有 SOTA 方法，特别是在和指标上分别超过 CGL-GAN 0.1722、0.0385。虽然在上以 0.0309 低于 CGL-GAN ，但在上获得了更好的结果，说明 DS-GAN 能更准确地使用衬底元素严格包覆被装饰元素。在内容感知指标上，DS-GAN 在取得最结果。在和上低于 SmartText，说明相较于只考虑文本元素的简单文本展示布局生成，图文展示布局生成仍有较大的研究空间。

　　此外，图 5 给出了可视化结果以验证本文 DS-GAN 方法在、以及上的优势。在 ( a ) 中，可以观察到 DS-GAN 巧妙地利用了所有非显著区域，而 ( b ) 、 ( c ) 解释了它在和的相对落后，并证明轻微的遮挡可以带来更自然的布局。而无论是显著性物体几乎占据整张画布（如 ( d ) 、 ( e ) ）、构成轮廓特殊（如 ( f ) ）或组成复杂（如 ( e ) ），DS-GAN 仍然能生成合理的布局。在 ( i ) 中可以观察到 DS-GAN 能够生成更加复杂的布局。本文提出的 PKU PosterLayout 数据集提供了复杂布局，因此这将是一个有潜力的研究方向。

　　图 6 为实际使用 DS-GAN 自动设计广告海报的完整流程。图 6 为实际应用 DS-GAN 设计广告海报的完整流程，根据用户输入广告主图、背景以及素材，自动生成达到人类设计师水平的广告海报。

　　图 5：PKU PosterLayout 数据集上的可视化结果对比

　　图 6：应用 DS-GAN 生成广告海报的完整流程

　　04

　　消融实验

　　表 3：设计序列形成的消融实验结果

　　为了验证提出的设计序列形成算法 DSF 的有效性，本文进行了消融实验，考虑到 DSF 的重要功能是在设计序列中保持元素重要性的降序排列，而丢弃不重要的元素对最终性能而言应是微不足道的。因此，实验的因变量被设置为设计序列的长度： ( a ) 所有布局数据中元素的最大数或 ( b ) 8，表示为 DS GAN-8，并以此观察丢弃末端元素对三种不同形成策略的影响，分别为： ( 1 ) 随机顺序形成、 ( 2 ) 几何顺序（坐标自顶向下）形成、 ( 3 ) 基于 DSF 形成。表 3 展示了 ( b ) 设置下的实验结果，观察括号里的值则为从 ( a ) 转变为 ( b ) 设置带来的波动。首先，在 8 个图形、内容感知指标上，可以观察到基于 DSF 形成的方法普遍领先，验证了使用 DSF 算法的必要性。此外，计算指标波动的聚合值为，可以观察到基于 DSF 形成的方法获得最佳的，验证了丢弃末端元素对基于 DSF 形成的方法扰动最小。

　　综上所述，在设计序列长度变更时，DSF 算法可以降低模型性能受到的负面影响，提升鲁棒性。

　　五、结论

　　针对图文展示布局生成任务，本文构建了一个新的数据集和评测基准 PKU PosterLayout，它具备更高的源域多样性、内容多样性、布局复杂度。

　　此外，本文提出将布局生成视为行为序列分析问题，提出了设计序列形成算法以及生成对抗网络，能够同步处理元素间关系与画布 - 布局间关系，生成与画布内容兼容的高质量布局。在 PKU PosterLayout 上充分实验验证了提出的新评测基准和方法的有效性。

　　参考文献

　　Yunning Cao, Ye Ma, Min Zhou, Chuanbin Liu, Hongtao Xie, Tiezheng Ge, and Yuning Jiang. Geometry aligned variational transformer for image-conditioned layout generation. In Proceedings of the ACM International Conference on Multimedia, pages 1561 – 1571, 2022.

　　Min Zhou, Chenchen Xu, Ye Ma, Tiezheng Ge, Yuning Jiang, and Weiwei Xu. Composition-aware graphic layout GAN for visual-textual presentation designs. In Proceedings of the International Joint Conference on Artificial Intelligence, pages 4995 – 5001, 2022.

　　Hsin-Ying Lee, Lu Jiang, Irfan Essa, Phuong B Le, Haifeng Gong, Ming-Hsuan Yang, and Weilong Yang. Neural design network: Graphic layout generation with constraints. In Proceedings of the European Conference on Computer Vision, pages 491 – 506, 2020.

　　Gangwei Jiang, Shiyao Wang, Tiezheng Ge, Yuning Jiang, Ying Wei, and Defu Lian. Self-supervised text erasing with controllable image synthesis. In Proceedings of the ACM International Conference on Multimedia, page 1973 – 1983, 2022.

　　Bo Wang, Quan Chen, Min Zhou, Zhiqiang Zhang, Xiaogang Jin, and Kun Gai. Progressive feature polishing network for salient object detection. In Proceedings of the AAAI conference on artificial intelligence, pages 12128 – 12135, 2020.

　　Chenhui Li, Peiying Zhang, and Changbo Wang. Harmonious textual layout generation over natural images via deep aesthetics learning. IEEE Transactions on Multimedia, 2021.

　　本文来源：MIPL 实验室，欢迎关注实验室微信订阅号：