Press "Enter" to skip to content

Stylette:使用自然语言修改网页样式(Stylette: Styling the Web with Natural Language)

本站内容均来自兴趣收集,如不慎侵害的您的相关权益,请留言告知,我们将尽快删除.谢谢.

针对网页样式的修改工具通常停留在代码层面,如直接修改HTML,CSS或者JavaScript代码文件。也有一些工具进行以一定程度的封装,实现了部分较为底层的操作。然而,这两种修改网页样式的方法对于没有编程基础、设计基础的新手来说是难以掌握的。新手难以将他们的高度抽象的目的转化为底层的基础操作,更难以找到需要修改的属性。因此,该工作尝试通过自然语言的交互方式,半自动地帮助新手完成网页样式的修改。

 

图1. 系统交互界面

该系统以插件的形式工作。如图1所示,(a)用户首先可以点击想要修改的网页元素,然后(b)使用自然语言对样式提出修改意见。这里的修改意见可能是具体的,如修改特定的属性,如字体、字号;也可以是较为抽象的描述,如“让标题不要这幺醒目”。系统则会更具选中的网页元素以及自然语言命令,自动计算得出可能需要修改的CSS属性,并呈现出来,(c)形成一个控制板。同样,根据分析结果,一些可能满足要求的修改推荐也会被展示在控制板上。而用户可以直接通过点击来调整样式,系统会即时反馈修改结果;当用户对结果满意后,可以保存修改。

 

图2. 系统的计算框架

如图2所示,该系统的计算框架可以分为两个主要部分,NLP处理模块以及CV处理模块。NLP模块首先将输入的语音转化为文字,随后作为输入进入到GPT-Neo模型中。这个模型先推测出可能涉及到的CSS属性,随后再推测属性改变的方向。作者总共挑选出了16个常用的CSS属性作为模型所包含的预测结果。

 

在CV部分,作者收集了超过1.7M的网页元素图片以及对应的CSS属性,通过自编码网络进行编码后,提取出特征向量。以这些收集到的元素为基础,就可以根据NLP部分进行的CSS属性预测提供给用户相关的推荐。

 

作者进行了对照实验来验证改系统的有效性。总共40位没有网页设计基础的新手参与了实验,分组使用Stylette系统和谷歌浏览器的DevTools系统完成对网页样式的改变。实验结果的确显示,使用Stylette系统的新手更快、更容易完成对网页样式的修改。80%的Stylette用户完成了给定目标的网页样式修改,而DevTools用户则仅有35%完成了修改。同时Stylette用户的完成速度也快于DevTools用户35%。

 

另一个值得注意的点在于,当用户对于网页的CSS属性有了一定的了解之后,Stylette系统的设计就暴露出一些问题。例如,自动化的识别、推荐算法可能出现错误,而系统本身又没有直接调整属性的交互。用户会对系统无法识别出自己的目的感到沮丧,尤其是在他们明确知道需要修改哪一个CSS属性,但系统却没有推荐该属性时。这意味着NLP交互的确能够帮助新手降低对于CSS属性的学习成本。但同时,当用户逐渐了解到越来越多的知识后,NLP就不能够满足交互需求了。

 

参考文献

 

1. Tae Soo Kim, DaEun Choi, Yoonseo Choi, and Juho Kim. Stylette: Styling the Web with Natural Language. In CHI Conference on Human Factors in Computing Systems (CHI ’22), pages 1-17, 2022.

Be First to Comment

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注