没有合适的资源?快使用搜索试试~ 我知道了~
3650结构化移动网页的生成式着色菊池浩太郎1井上直人1 大谷真由11CyberAgentEdgar Simo-Serra22早稻田大学山口哥太1摘要颜色是网页设计的关键因素,影响着重要因素,如浏览者的情绪和网站的整体信任度和满意度。有效的着色需要设计知识和专业知识,但是如果这个过程可以通过数据驱动的建模自动化,那么有效的探索和替代工作流程将成为可能。然而,由于缺乏对网页着色问题、数据集和评估协议的形式化,这一方向仍有待探索。在这项工作中,我们提出了一个新的数据集组成的电子商务移动网页在一个易于处理的格式,这是通过简化的页面和提取规范的颜色风格与一个共同的Web浏览器创建。网页着色问题,然后正式作为一个任务,估计合理的颜色风格为一个给定的网页内容与给定的层次结构的元素。我们提出了几个Transformer为基础的方法,适合这个任务,通过前置结构化的消息传递,以捕捉层次关系的船舶之间的元素。实验结果,包括定量评估设计这项任务,证明了我们的方法的 优 势 , 统 计 和 图 像 彩 色 化 方 法 。 该 代 码 可 从https://github.com/CyberAgentAILab/webcolor网站。1. 介绍色彩在网页的视觉传达中起着重要的作用。众所周知,颜色与某些情绪有关[15],并对网站的信任和满意度产生重大影响有效地为网页着色以实现设计目标是一项艰巨的任务,因为它需要了解有关颜色及其组合的理论和另一个困难的原因在于页面中隐含的和实际的要求,例如整体平衡,对比和颜色内涵的差异。我们的目标是通过数据驱动建模来克服这些困难,以促进新的应用程序,如设计师的高效设计探索,非设计师的自动设计,以及广告产品的登录页面的自动创建。尽管其巨大的工业潜力,缺乏既定的基准和需要广泛的领域知识的数据收集,使其难以应用数据驱动的方法来网页着色,这可能解释了为什么有较少的相关研究在文献中。用于对网页着色的现有方法要么为某些特定元素生成颜色样式[30,25],要么需要已经设计的网页[29,11],并且没有研究过可以从头开始向所有元素添加合理的颜色样式的方法。此外,这些研究中使用的数据集不可公开获得,使得后续研究变得困难。图像彩色化技术[1,19]可以应用于网页,但是,它们需要输入图像和从输出图像中提取结构颜色信息,这缩小了适用的场景,并且会导致降低质量的提取错误。在这项工作中,我们构建了一个新的数据集,以进一步研究网页着色。数据收集中的挑战是,原始网页有许多不影响其外观的冗余元素,并且在其样式表中定义的颜色样式是模糊的,因为相同的颜色可以以不同的方式表示。为了解决这些问题,我们使用一个通用的Web浏览器来简化网页,并检索浏览器的解决风格作为规范的着色问题,然后正式作为一个任务,生成合理的颜色样式的网页提供的内容信息和层次结构的元素。我们提出了几个基于transformer的方法来适应这项任务。元素之间的层次关系影响颜色样式,因为子元素基本上呈现在其父元素之上我们的分层建模来捕捉这些特征是通过在将特征馈送到Transformer网络之前使用消息传递[8]将特征上下文化来为了从质量和多样性方面评估生成的颜色样式,我们将图像生成任务[12]中使用的度量定量和定性结果证明了我们的方法优于统计和图像着色方法[19]。我们的贡献总结如下:3651• 为网页自动着色而定制的电子商务移动网页数据集。• 网页着色和基于Transformer [28]的方法的问题公式化,该方法通过结构化消息传递捕获元素之间的层次关系。• 广泛的评价,包括与最先进的图像彩色化方法的比较[19]。2. 相关工作2.1. 图像再着色与彩色化自动确定颜色的问题已经得到广泛的解决,特别是对于图像。有两个常见任务:调色,其将不同的颜色应用于彩色图像,以及着色,其将颜色应用于灰度图像。对于这两个任务,已经研究了基于参考的方法,其通过找到源的颜色或亮度与给定参考图像或调色板的颜色之间的映射来实现[5,24,4,17]。Volkova等人[29]采用该方法来将网页与参考图像相关联。基于参考的方法需要额外的用户输入,而使用从数据中学习的颜色知识的方法则不需要。 这方面的早期工作使用相对简单的模型来学习成本函数,例如颜色兼容性,然后通过优化对图像或2D图案进行着色[22,21]。最近,基于深度学习的方法得到了积极的研究,特别是用于图像着色任务[1],并且采用Transformer网络[28]作为其基础模型的ColTran [19]已经展示了最先进的性能。将图像彩色化技术应用于网页有两个问题。第一个是输入是图像,这缩小了适用的场景,第二个是质量可能会因从输出图像中提取用于网页的颜色的错误而降低在我们的问题制定,这些问题不会出现,因为我们把网页着色作为一个估计问题的结构数据。2.2. 数据驱动的网页应用近年来,在不同的社区中,对网页的数据驱动应用程序的研究一直在积极研究,包括问答[6]、元素的语义标记[14]、信息检索[23]、从屏幕截图生成代码[3]、布局生成[16]和GUI照片剪辑[31]。关于数据驱动的网页样式的早期工作是Webzeitgeist [20],这是一个为超过100,000个网页提供多种数据和人口统计数据的平台,但不再公开。对于自动着色的研究相对较少。Gu等人[11]提出一种基于优化的颜色-图1:随机选择的网页的屏幕截图。图2:本研究中网页的数据格式。通过组合几个模型,包括使用500个网页学习的颜色对比度模型,来使用ORing框架,并确认其在两个任务中的有效性:用准备好的调色板着色Zhao等人[30]处理从周围上下文估计元素的字体属性(包括字体颜色)的任务。最近,Qiuet al. [25]提出了一种基于Transformer的着陆页颜色推荐模型,该模型使用掩蔽预测和广告性能预测进行训练。他们的模型使用从注释截图的特定区域提取的多个调色板,并可以为目标区域推荐其他颜色。总之,没有一种方法可以从头开始为所有元素添加合理的颜色样式。也没有可用的数据集来研究这种方法,因此,我们从构建网页结构着色数据集开始3. 面向网页着色的数据集构造我们首先描述了一种通用的预处理技术,该技术将网页转换为机器学习应用程序的易处理数据格式然后,我们描述了我们构建的数据集的细节。从我们的数据集中随机选择的网页的屏幕截图如图所示。1.一、3.1. 数据格式和预处理我们将网页表示为有序树,其中每个顶点都是要在页面上呈现的元素,并且具有约束力。3652n=1n=1C ›→YYYC{}Y{}帐篷和颜色风格信息(图2)的情况。我们使用元素的HTML标签,它们在树中的兄弟顺序,以及图像的低级特征(例如,平均颜色)和文本(例如,字数)作为内容信息,详情请参阅补充材料。对于颜色样式,定义要提取的内容并不容易。此外,原始网页包含许多用于训练着色模型的冗余元素。我们将在下面讨论我们的颜色风格定义和简化技术。3.1.1颜色样式定义网页的样式信息在层叠样式表(CSS)中定义,其基本上由目标元素的规范(即,选择器)和要应用的样式(即,属性及其值)。这里我们考虑两个代表性的属性color和background-color作为颜色样式,分别对应于元素的文本和对于在何处获取这些属性的值,有两种可能的选择:指定或计算的值。指定的值是在样式表中定义的值。对于未指定值的元素,将应用浏览器的默认CSS。颜色属性值的可用格式包括RGBA值、颜色关键字和特殊关键字(如“inherit”),这会导致使用与父元素相同的值。因此,外观上相同的颜色可以用不同的格式表示,规范化它们需要额外的努力。另一方面,计算值是由浏览器解析的对于我们的目标属性,值被消歧为RGBA格式,其可以用作指定值而不改变外观。我们使用计算值作为目标属性的规范值,并额外使用其他属性的地面实况指定值进行可视化。3.1.2网页简化原始网页包含许多对其在当前屏幕上的外观没有贡献的元素,包括诸如仅出现在膝上型电脑大小的屏幕上的元素的替代元素和诸如提交表单中的隐藏输入元素的功能元素。应该消除许多冗余或不太相关的元素,因为它们会对着色模型的学习产生负面影响。在这里,我们考虑只保留那些有助于移动屏幕上的第一个视图的元素。一个简单的简化方法是尝试删除一个元素,如果第一个视图的外观没有改变,那么就真正删除该元素。但是,当CSS选择器中包含其他元素(如“div > a”)时,删除元素通常会破坏原始样式要避免这种不良的作风腐败,在简化之前,将CSS更改为另一个使用绝对选择器(如“#element-1”)的CSS,并仔细定制以等效于原始样式规范。因此,除了放置在头部元件中的元件之外,元件的平均数量从1656.1个显著减少到61.4. 请注意,如果在简化之前和之后记录了元素的对应关系,则应用于简化网页的颜色样式3.2.我们的数据集数据集应该有一个足够大和多样化的网页集。我们选择Klarna Product Page数据集[14]作为网页的来源,它为各个国家和公司的电子商务提供移动网页。具体来说,我们使用以MHTML格式提供的网页快照,这些快照可以在浏览器中与原始页面几乎相同地重播虽然本节中描述的过程适用于快照,但它们也适用于以常规方式爬网的网页。我们使用Se- lenium WebDriver [26]和Google Chrome[9]实现了检索计算值和简化网页的过程。复杂的网页,即使在简化后,仍然有超过200个元素或超过30的树深度被排除。我们还排除了以utf-8以外的任何编码的网页,以简化文本处理。结果,总共剩下44,048个网页,平均元素数官方培训页面分为9:1用于培训和验证,官方测试页面分为测试,导致27,630页用于培训,3,190页用于验证,13,228页用于测试。4. 方法为了清晰起见,我们提供了对我们的方法的高级解释,并且在补充材料中提供了关于消息传递、模型架构和实现的细节。4.1. 概述我们将网页着色定义为给定内容信息和元素的层次结构,为每个元素生成颜色样式的任务。 我们将元素的索引表示为n,将页面上的元素的数量表示为N,将颜色样式的集合表示为=YnN,将内容信息的集合表示为=Cn N,并且将文档结构分别表示为T。因此,该任务的主要目标可以被公式化为创建基于给定条件生成颜色样式的函数f,即,f:(,T)f,其中一个带帽子符号的变量,即表示该变量的估计值,即,.根据最近的图像着色方法[19],我们采用两阶段的方法,使用核心模型,3653n=1.Σn=1--··θxrgb∈ {1,. . . ,83},xalpha∈ {1,. . . ,8}。相同的图3:我们生成离散颜色样式的方法的关键组件。我们的方法有三种不同的核心生成模型,都使用相同的内容和风格编码器和风格估计头架构。元素方面的内容特征通过分层消息传递由来自其他元素的特征上下文化。生成低分辨率离散样式X={X n}N、自底向上的消息将MP向上传递,即,g:(C,T)<$→X,并且使用元素的值h<$C来计算元素中的颜色上采样器将颜色的分辨率提高到所需的大小,如果即, h:(X,C,T)<$→Y<$.在量子化中,我们的双元是一个叶节点.顶层消息传递将RGBA值提供给每个通道的八个仓,并且RGB通道被分组在一起。 然后,元素的离散文本颜色由一对MP向下在相反方向上被类似地定义。样式编码器针对每个元素独立地将离散颜色样式X映射到样式嵌入hX∈Rd将量化应用于背景颜色。我们考虑三种核心代模型:自回归模型、非自回归模型和条件变分自动编码器,它们都基于Transformer网络,并且对于内容和风格编码器以及风格估计头具有相同的体系结构。核心模型和颜色上采样器是独立训练的。我们的方法的一些关键组成部分如图所示。3.第三章。4.2. 内容和样式处理内容编码器获取每个元素{Cn}N(在下文中省略索引n)的内容信息,如通过合并对应于离散RGB和alpha值的两个嵌入来获得。通过合并文本和背景颜色对应的两个颜色向量来实现风格嵌入。对于没有文本的元素,我们使用一个特殊的可学习嵌入,而不是文本颜色向量。样式估计头是最终输出部分中的模块,其将表示逐个元素样式的中间向量分别映射到文本和背景颜色的离散RGB和alpha概率。4.3. 核心生成模型核心生成模型的作用是生成一个每个元素{X}的具体颜色样式基于giv en放置,并参考树结构T,将它们转换为转换为反映元素的层次关系的d维内容嵌入hC我们使用自底向上和自顶向下的消息传递和剩余连接来实现内容编码器,其表示为:h<$C=最大Pool({E mbc(c)|c∈C}),(1){hup}=MPup({h<$C},hleaf;T),(2){hdown}= MPdown({hup},hroot;T),(3)hC=h<$C+hdown,(4)其中MaxPool()是最大池化运算符,Embc()是对应于内容c的嵌入函数,hleaf和hroot分别是可学习的参数。在条件在这里,我们使用Trans- former网络实现这个模型,并使用两种不同的方案对其进行训练:最大似然估计(MLE)和条件变分自动编码器(CVAE)。用MLE学习的模型进一步细分为两个变体,自回归和非自回归模型,导致要考虑的核心模型的总共三个变体。4.3.1MLE模型通过最大化对数似然来训练模型设θ为模型参数,目标写为maxE [log p θ(X |C,T)]。(五)的具体地,我们通过向量ob表示RGBA颜色3654NY| C|C∈X|C·YXY··自回归模型:在自回归模型中,颜色样式的条件概率被建模为p θ(X |C,T):= Yp(X n|X1,X2,···,Xn −1,C,T)。我们用Transformer编码器和解码器实现这个模型,如图右下角所示。3. Transformer编码器将内容和样式嵌入作为输入,并为每个元素生成估计均值和估计方差。它们是连接在一起的n=1(六)对于所有元素,并将其视为µ(·)的返回向量元素的顺序由前序树遍历定义。非自回归模型:在非自回归模型中,假设条件概率不受先前估计的影响,并建模为Np θ(X |C,T):=p(X n|C,T)。(七)n=1我们用Transformer网络实现这些模型,如图右上角所示3.第三章。内容和风格嵌入以及使用的风格估计头是在4.2节中描述的。4.3.2CVAE模型一般来说,非自回归模型能够比自回归模型更快地我们introduce潜变量的非自回归模型,并将其扩展到制定的条件变分自编码器,允许从一个单一的输入产生不同的输出。让我们将潜在变量表示为ZRNd,条件是将函数生成分布表示为pθ(Z,,T),后验表示为qθ(Z,T),先验表示为p(Z,T),CVAE的学习目标表示为:和σ()在方程中。(9)分别表示。 然后,使用重新参数化技巧从高斯分布中对潜在变量Z进行采样,并将其划分为一组潜在变量。向量等于元素的数量。Transformer解码器将潜在向量和嵌入作为输入,并估计所有元素的颜色样式。注意,对潜在向量应用位置编码,使得解码器可以识别哪个潜在向量对应于哪个元素。4.4. 颜色上采样器颜色上采样器将离散颜色样式作为输入,并以全分辨率生成颜色样式。为了迫使上采样的颜色保持在其原始量化仓中,我们估计仓中的比例,而不是直接估计全分辨率颜色。我们训练基于Transformer的模型,以最小化预测比例和地面真实比例之间的均方5. 实验我们根据生成的颜色风格的质量和多样性,对其他基线方法进行了评估。5.1. 方法我们采用基于数据集统计和图像彩色化的基线方法。Maxθ,θE q(Z |X,C,T)[log p θ(X |Z,C,T)]-λKL(q)(Z |X,C,T)p(Z |C、T))、(8)基于统计的着色:我们使用基于颜色样式统计的更简单的方法。具体地说,我们先其中,λ和θ是模型参数,λ是超参数来平衡这两项。 我们设置λ = 0。1,所有实验。使用具有对角协方差矩阵的多变量高斯分布,我们对条件分布建模如下:q(Z |X,C,T):=N(μ(X,C,T),Iσ(X,C,T)),(9)Np θ(X |Z,C,T):=p(Xn|Z,C,T),(10)n=1p(Z |C,T):=N(0,I),(11)其中,µ()和σ()分别是返回与高斯分布的均值和方差对应的参数的函数收集训练集中每对HTML标签和CSS属性的离散颜色的频率。然后通过模式选择(模式)或频率加权采样(采样)确定颜色,并以与我们的方法相同的方式进行上采样在采样时,我们为同一对标签和属性设置相同的颜色,从而确保单个网页中颜色样式的一致性对于出现在测试集中但未出现在训练集中的对,引用所有标签的全局频率图像着色[19]:我们将图像着色技术作为额外的基线来适应我们的任务。自适应的主要考虑是输入和输出都是图像而不是结构颜色信息。我们使用地面实况网页的屏幕截图转换为3655灰度图像作为输入。从输出的彩色图像中获得结构颜色并不是简单的,因为它需要知道像素颜色和元素颜色样式之间的对应关系。受色度键组合的启发,我们将一个未使用的颜色分配给目标元素,渲染网页,并将具有该颜色的像素视为相应的像素。然后参考彩色图像,并将对应像素中的最主要颜色用于目标元素。我们对所有元素重复这个注意,在这个过程中,所有的颜色都被视为不透明的颜色,即,alpha值为1。0的情况。对于特定的方法,我们采用ColTran[19],这是一种基于Transformer的最先进的方法,其官方实现是公开的1。我们的方法:我们使用三种不同核心模型的方法:自回归模型(AR)、非自回归模型(NAR)和第4节中描述的条件变分自编码器(CVAE)。每种方法都使用相同的颜色上采样器和Transformer网络的相同超参数,详细信息请参见补充材料。为了使用AR模型生成,我们使用相同的训练模型和三种不同的解码策略:贪婪解码,top-p采样[13],其中p=0.8和p=0.9。请注意,在训练过程中,我们从损失计算中排除了没有文本内容的元素的文本颜色,因为它不影响外观。5.2. 评估指标准确度和宏观F评分:作为生成结果质量的代理指标,测量地面实况数据的再现性。我们使用离散RGB和alpha值计算精度和宏F分数。没有文本内容的元素的文本颜色将从计算中排除。对于宏F分数,使用类别F分数的平均值Fre' chet色距:所生成的结果的多样性是另一个重要的度量。参考FID [12],我们设计了一种新的方法,命名为Fre′ chet颜色距离(FCD)在FID中,使用预先训练的入侵网络的中间特征来计算生成数据和真实数据的分布之间的距离。这些高级图像特征可能不能很好地表示低级颜色信息,因此在FCD中直方图按元素数量进行标准化,并根据背景颜色、文本颜色和1https://github.com/google-research/谷歌搜索/树/主/coltran像素,从而可以测量不同视角的多样性请注意,没有文本内容的元素的文本颜色将从相应的直方图中排除对比度违规:从另一个角度评估生成结果的质量:可访问性。为了研究生成结果的可访问性,我们使用Lighthouse [10],这是一种在实践中常用的审计工具,并考虑对比度审计,这在很大程度上受到颜色样式的影响对比度审计基于Web内容可访问性指南2.1 [18],并测试背景和文本颜色之间的对比度是否符合页面上所有文本的标准。我们报告违反对比度审计的页面百分比和元素的平均数量。5.3. 颜色样式生成我们总结了表1中的定量结果和图1中的定性结果。4.在定量结果中,我们报告了使用不同随机种子训练的三个模型中每个模型的一个评估的平均值和标准差,对于Stats(抽样),我们报告了三个评估。定性结果显示了应用生成的颜色样式的对于有多个结果的那些,我们首先用单个模型生成20个变化,然后从随机选择开始,最大颜色距离的一个被greetly选择Fre'chetColorDista nc es(FCD)在测试集的两个半部分之间计算,一个来自生成的结果,另一个真实数据的FCD使用其他地面实况数据而不是生成的结果,从而可以与其他方法进行合理的比较 真实数据显示, 违反对比度标准的网页数量,但这与公开统计数据大致一致[2]。我们认为对比度违反的度量仅供参考,如果它们没有显著差异,则认为它们是好的从真实的统计数据来看。图像 着色基线 ColTran [19]对于Pixel-FCD 表现 良好,而对于其他指标表现不佳,这可能表明通过使用地面实况灰度截图,ColTran可以仅为具有许多对应像素的那些生成合理的颜色样式,例如主体元素的背景颜色。在彩色图像的颜色风格提取中,对于那些具有较少对应像素的颜色,例如图中右侧示例中的较小文本的颜色,提取误差为0.001。4、可能是对比度违规的原因。由于在提取中不考虑α组成,从地面实况不同地获得的RGB值可能导致差的准确度、BG-FCD和Text-FCD。结构着色的统计基线显示,3656Ground-truth Stats(mode)Stats(sampling)Ground-truth Stats(mode)Stats(sampling)地面实况(灰度)[19]第十九话[19]第19话我的世界[19]第十九话[19]第十九话AR(greedy)AR(top-p,p=0.9)AR(greedy)AR(top-p,p=0.9)NAR CVAE NAR CVAE图4:颜色风格生成的定性比较NAR和CVAE成功地生成了比其他方法更合理的颜色最好的颜色和缩放查看。3657†表1:颜色风格生成的定量比较 带有匕首符号()的方法以确定性方式生成,而其他方法以随机方式生成。 Fre'chet颜色距离乘以1 e-3以获得清晰度。请注意,只有ColTran使用地面实况灰度截图,即,每个像素的部分颜色信息。方法精度RGB↑Alpha↑宏F值RGB↑Alpha↑血糖↓Fre'chet色距文本↓像素↓对比度破坏%页数#元素[19]第19话我的世界0.285±0.000.7170.411±0.000.8910.009±0.001.0030.101±0.000.219665.78±2.4920.94103.50±1.61263.113.14±0.587.4395.51±0.1534.175.29±0.021.18统计(采样)AR(贪婪)†0.621±0.000.720±.0020.821±0.0000.886±0.0020.004±0.0000.033±0.002.207±.001.405±.0030.71±0.022.93±0.3382.22±0.3139.19±2.61169.80±1.0522.98±3.2194.41±0.0866.43±0.704.47±0.022.02±0.02AR(前p,p=0.8).717±.0030.885±0.0020.032±0.002.403±.0022.63±0.3733.79±3.5933.67±0.5571.00±1.122.30±0.06AR(前p,p=0.9)NAR†.714±.003.773±.0010.883±0.003.929±.0010.030±0.0020.076±0.001.402±.006.670±.0022.40±0.331.57±0.3333.00±3.8121.81±2.2037.44±0.305.98±1.2373.42±1.0174.02±0.922.40±0.062.25±0.09CVAE.771±.0010.929±0.0000.069±0.001.665±.0031.50±0.0428.14±1.134.20±0.1974.71±0.192.23±0.05CVAE w/o消息传递CVAEw/o剩余连接.762±.001.768±.0010.918±0.0000.927±0.000.062±.0020.064±0.0000.620±0.005.647±.0092.16±0.031.41±0.2533.02±2.8229.94±2.5810.58±1.295.40±1.1775.10±0.7974.25±0.872.29±0.062.20±0.07真实数据1.0001.0001.0001.0000.083.040.5671.722.39更高的准确度和更低的宏观F分数,这表明颜色风格的不平衡,其中典型的颜色风格,例如黑色文本和白色背景,比其他颜色风格更频繁地出现。与统计(模式 )相 比, 统计 (采 样 )改 进了 BG-FCD 和 文本 -FCD,并前者是预期的,而后者可以解释,因为典型的颜色样式通常被分配给那些在地面实况数据中具有许多相应像素的颜色样式。对于对比度违规,结果表明,指定典型的颜色样式会导致更少的违规,而独立采样背景和文本颜色会导致更多的违规。我们的基于变压器的方法通常比其他基线执行得更好,并且对比度变化的趋势与真实数据相似。在AR模型中,精度和FCD表明采样方法可以控制输出的典型性。NAR和CVAE都优于AR变体,具有可比的评分,并且显示出比其他变体更好的视觉结果。消融研究:我们进行了一项消融研究,以研究结构化情境化设计的性能贡献。使用CVAE作为基础模型的结果总结在表1的下半部分中,并且表明去除消息传递会降低性能,这表明使用分层建模的重要性。我们还可以看到,在不使用剩余连接的情况下,性能会下降,这表明它们可能有助于在复杂的消息传递中仅传播最少的信息6. 限制和讨论虽然我们的方法成功地产生了相对合理的颜色风格,但它们仍然远远不够完美。典型的失败情况是通知产品颜色或幻灯片放映中的当前幻灯片的功能着色(即,),如图所示。4.功能性着色的挑战源于这样一个事实,即必要的信息被简化删除,或者首先不包括在页面上。必要的信息是区分产品颜色变化的代表性颜色,以及幻灯片放映的显示幻灯片的顺序为了解决这个问题,需要将显式信息作为附加内容添加,或者用户需要在后处理中对其进行具有特定风格的元素不可避免地与特定的颜色风格相关联。 例如,具有“round”样式的元素应该具有背景颜色。然而,我们的方法可能无法处理这样的样式规则。添加与颜色相关的样式可以改善这种情况,但需要考虑添加哪些样式以及添加多少样式。可能需要找到一种方法,以统一和有效的方式处理所有复杂的CSS属性,这也可能导致CSS属性生成扩展到颜色之外。数据集仍有改进的余地。本研究中使用的电子商务手机网页中的单个产品图像与颜色风格之间的相关性较低,因此不适合用于评价图像与颜色之间的和谐性。此外,还没有测试我们的方法是否可以处理更多的元素,如在移动设备大小的屏幕上或笔记本电脑大小的屏幕上的全页视图。为了促进这些研究,我们认为,开发稳定的数据收集工具和使用这样的工具构建大规模数据集是有前途的未来方向。3658引用[1] Saeed Anwar ,Muhammad Tahir, Chongyi Li , AjmalMian,Fahad Shahbaz Khan,and Abdul Wahab Muzaffar.图像着色:调查和数据集。arXiv:2008.10774v3,2022.[2] 的HTTP存 档 。HTTP存 档 :能 力 。https://httparchive.org/reports/accessibility#a11yColorContrast.(2022-08-27访问)。[3] 托尼·贝尔特拉米利。Pix2code:从图形用户界面屏幕截图生成代码。在ACM SIGCHI工程交互计算系统研讨会论文集,EICS'18,2018。doi:10.1145/3220134.3220135。[4] 穆图扎·博赫拉和维尼特·甘地。 ColorArt:建议使用最佳的颜色图表匹配为图形艺术着色。在图形接口的程序,GI'20,2020。doi:10.20380/GI2020.11。[5] 张慧文,奥哈德·弗里德,刘一鸣,斯蒂芬·迪-威尔第,亚当·芬克尔斯坦。基于调色板的照片重新着色。ACMTransactions on Graphics , 34 ( 4 ) , 2015. doi :10.1145/2766978。[6] 陈星宇,赵紫涵,陈陆,姬家宝,张丹阳,罗傲,熊宇轩,余开。WebSRC:一个基于网络的结构化阅读理解数据集 。在2021年自然 语言处理 集,EMNLPdoi:10.18653/v1/2021.emnlp-main.343.[7] 戴安·西尔,米莱娜·海德,赫克托·拉里奥斯网站设计中的色彩吸引力在文化内部和跨文化:一多方法评价InternationalJour-nal of Human-Computer Studies,68(1),2010. doi:10.1016/j.ijhcs.2009.08.005。[8] 放大图片作者:Justin Gilmer.帕特里克·舍恩霍尔茨Riley、Oriol Vinyals和George E.达尔量子化学的神经信息传递。第34届机器学习国际会议论文集,ICML[9] Google. Google Chrome -从Google下载快速、安全的浏览器。https://www.google.com/chrome/.(2022-08-29访问)。[10] Google.灯塔https://github.com/GoogleChrome/lighthouse,2022.(2022- 08-29访问)。[11] 顾振宇和楼健。数据驱动的网页颜色设计。计算机辅助设计,2016年,77。doi:10.1016/j.cad.2016.03.001。[12] Martin Heusel、Hubert Ramsauer、Thomas Unterthiner、Bernhard Nessler和Sepp Hochreiter。由两个时间尺度更新规则训练的GAN收敛到局部纳什均衡。第31届神经信息处理系统国际会议论文集,NeurIPS[13] Ari Holtzman 、 Jan Buys 、 Li Du 、 Maxwell Forbes 和Yejin Choi。神经文本退化的奇怪案例。在国际学习代表会议上,ICLR[14] Alexandra Hotti,Riccardo Sven Risuleo,Stefan Magure-anu,Aref Moradi,and Jens Lagergren. Klarna产品页 面 数 据 集 : Web 表 示 学 习 的 现 实 基 准 。 arXiv :2111.02168v2,2021.[15] Naz Kaya和Helen H.艾普斯颜色与情感的关系:一项针对大学生的研究。大学生学报,38(3),2004年。[16] Kotaro Kikuchi , Mayu Otani , Kota Yamaguchi , andEdgar Simo-Serra.面向网页布局优化的视觉包容模型。计 算 机 图 形 论 坛 , 40 ( 7 ) , 2021 年 。 doi :10.1111/cgf.14399。[17] 苏西金和Sunghee Choi。动态最接近的颜色扭曲排序和比 较 调 色 板 。 ACM Transactions on Graph-ics , 40(4),2021。doi:10.1145/3450626.3459776。[18] 安德鲁·柯克帕特里克,乔修·奥康纳,阿拉斯泰尔·坎贝尔,迈克尔·库珀。Web内容无障碍指南-线(WCAG)2.1.https://www.w3.org/TR/2018/REC-WCAG21-20180605/,2018.(2022-05- 14访问)。[19] Manoj Kumar,Dirk Weissenborn和Nal Kalchbrenner。彩色化Transformer。在国际会议上学习表示,ICLR[20] 作者:Anjerie,J. J.,J. J.,J.Klemmer,and Jerry O.塔尔顿Webzeitgeist:设计挖掘网络。在SIGCHI计算机系统中人为因素会议的会议记录中,CHI'13,2013。doi:10.1145/2470654.2466420。[21] 莎伦·林,丹尼尔·里奇,马修·费舍尔,帕特·汉拉汉.Probably color-by-numbers:使用因子图建议模式着色 ACM Transactions on Graph-ics , 32 ( 4 ) , 2013.doi:10.1145/2461912.2461988。[22] Peter与大型数据集的颜色兼容性。ACM Transactions onGraphics,30(4),2011.doi:10.1145/2010324.1964958。[23] Arnold Overwijk , Chenyan Xiong , and Jamie Callan.Cocktail Web22:100亿个Web文档,信息丰富。第45届国际ACM SIGIR信息检索研究与开发会议论文集,SIGIR'22,2022。doi:10.1145/3477495.3536321。[24] Gabriel Peyre和Marco Cuturi计算最佳运输:数据科学应用机器学习的基础和趋势,11(5-6),2019。doi:10.1561/2200000073。[25] 秋千茹大谷真由岩崎由纪一个用于着陆页设计的智能颜色推荐工具。第27届智能用户界面国际会议,IUI'22Companion,2022。doi:10.1145/3490100.3516450。[26] 硒WebDriver-Selenium。网址://www.selenium.dev/documentation/webdriver/网站。(2022-08-29访问)。[27] Gapsy工作室。如何明智地为移动和网页设计选择UI颜色https://gapsystudio.com/blog/ui-design-colors/,2020.(2022-05-17访问)。[28] 作者:Ashish Vaswani,Noam Shazeer,Niki Parmar,Jakob Uszko-reit,Llion Jones,Aidan N.戈麦斯、武卡斯·凯泽和伊利亚·波洛苏欣。注意力是你所需要的。第31届神经信息处理系统国际会议论文集,NeurIPS3659[29] Polina Volkova,Soheila Abrishami,和Piyush Kumar.网页着色.在Advances in Visual Computing,Lecture Notesin Computer Science,2016中。doi:10.1007/978-3-319-50835- 19.[30] Nanxuan Zhao,Ying Cao,and Rynson W.H. 刘在上下文中建模字体:网页设计的字体预测。计算机图形论坛,37(7),2018年。doi:10.1111/cgf.13576。[31] 赵天明,陈春阳,刘元宁,朱晓东. GUIGAN:学习使用生成对抗网络生成GUI设计。在第43届软件工程国际会 议 , ICSE'21 , 2021 。 doi : 10.1109/ICSE43902.2021.00074。
下载后可阅读完整内容,剩余1页未读,立即下载
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/octet-stream](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
cpongm
- 粉丝: 4
- 资源: 2万+
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- 利用迪杰斯特拉算法的全国交通咨询系统设计与实现
- 全国交通咨询系统C++实现源码解析
- DFT与FFT应用:信号频谱分析实验
- MATLAB图论算法实现:最小费用最大流
- MATLAB常用命令完全指南
- 共创智慧灯杆数据运营公司——抢占5G市场
- 中山农情统计分析系统项目实施与管理策略
- XX省中小学智慧校园建设实施方案
- 中山农情统计分析系统项目实施方案
- MATLAB函数详解:从Text到Size的实用指南
- 考虑速度与加速度限制的工业机器人轨迹规划与实时补偿算法
- Matlab进行统计回归分析:从单因素到双因素方差分析
- 智慧灯杆数据运营公司策划书:抢占5G市场,打造智慧城市新载体
- Photoshop基础与色彩知识:信息时代的PS认证考试全攻略
- Photoshop技能测试:核心概念与操作
- Photoshop试题与答案详解
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)