针对网页样式的修改工具通常停留在代码层面，如直接修改HTML，CSS或者JavaScript代码文件。也有一些工具进行以一定程度的封装，实现了部分较为底层的操作。然而，这两种修改网页样式的方法对于没有编程基础、设计基础的新手来说是难以掌握的。新手难以将他们的高度抽象的目的转化为底层的基础操作，更难以找到需要修改的属性。因此，该工作尝试通过自然语言的交互方式，半自动地帮助新手完成网页样式的修改。
该系统以插件的形式工作。如图1所示，（a）用户首先可以点击想要修改的网页元素，然后（b）使用自然语言对样式提出修改意见。这里的修改意见可能是具体的，如修改特定的属性，如字体、字号；也可以是较为抽象的描述，如“让标题不要这么醒目”。系统则会更具选中的网页元素以及自然语言命令，自动计算得出可能需要修改的CSS属性，并呈现出来，（c）形成一个控制板。同样，根据分析结果，一些可能满足要求的修改推荐也会被展示在控制板上。而用户可以直接通过点击来调整样式，系统会即时反馈修改结果；当用户对结果满意后，可以保存修改。
如图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.
评论关闭。