正文
本文以特价商品营销业务为例，来介绍智能化UI内容一致性检测所需要的能力。特价商品营销是一种大型促销应用，与之相关的一致性测试涉及数百个城市，单个城市内的多个商品品类，每个商品的多个所涉及页面，其状态空间非常复杂。传统的自动化测试方法需要对各个状态逐一适配，成本极高。理想情况下，我们需要提供一种低成本、易适配、可以覆盖所有状态的能力，同时还需要较强的泛化迁移能力，在不同页面模板、技术栈、App上自动进行适配。
具体到特价商品营销的一致性校验，其包含营销会场页、详情页、提单页等多个页面，不同页面之间价格的一致性是检查的重点。对于每一件商品，我们希望从上述三个页面中识别出商品的价格，并判断其是否一致。需要注意的是，由于商品的价格受优惠活动的影响，而优惠活动有多种形式，因此如何准确分析出各页面中商品的价格是主要难点。
| 2.1 总体流程
AutoConsis的核心优势在于其在泛化性、准确性上的良好效果。电商平台中的内容一致性校验，包括商品名称、描述、价格、库存方面的校验，本质是对UI页面的特定信息提取，价格一致性采用的也是信息提取流程。我们将UI页面分析任务转化为目标检测和内容理解的组合，利用了大语言模型的能力，实现对不同技术栈页面的适应能力。以下介绍工具的设计过程。
-
目标区域识别：AutoConsis首先识别UI界面中与检测相关的关键区域。通过图像处理和模式识别，工具能够准确地定位到包含重要信息的UI部分。
-
目标信息抽取：在目标区域确认后，经过OCR和UI组件分析工具（
使用自建的开源系统能力
Vision-UI
）提取目标区域的文本和元素，填入预先设置好的CoT Prompt（
CoT,
Chain of Thought
） ，通过大模型推理提取一致性校验所需要的关键信息。
-
一致性判断：AutoConsis对提取出的信息进行一致性校验，确保UI信息的准确性和一致性。
下面我们会以「购买特价商品」场景为例来介绍AutoConsis的工作流程。如下图所示：AutoConsis首先从一个营销会场页开始分析，其主要包含一个商品列表，经过目标区域识别模块识别出各个商品卡片，再从各个商品卡片的截图中识别出原价和折扣等金额相关的信息。之后继续提取每个页面的相关价格信息，最后由一致性判断模块检查页面间的价格一致性。
图：AutoConsis的工作流程（以购买特价商品为例）
| 2.2 目标区域识别
为了提取关键的一致性信息，在实践中我们发现：将页面上所有的文字OCR识别后直接交给LLM分析，得到的分析结果并不准确。我们分析后认为，UI界面包含大量的与当前检测需求无关的文字，噪声过大干扰了LLM的判断。因此，我们考虑对UI界面进行裁切，即通过目标区域识别的方式将无用的文字信息去掉，从而使LLM聚焦。
图像的目标识别是CV领域的传统方向，基于传统深度学习的目标检测模型对适配复杂多变的UI界面成本很高，需要进行大量的数据标注和训练工作才能够使用，同时泛化性也一般。为了使方法具备良好的泛化性，同时能够以较低的成本使用，我们采用了基于视觉语义的识别模型CLIP（
Contrastive Language-Image Pre-training
，
由OpenAI提出的图像-文本语义匹配模型
）。CLIP可以将图像和文字的语义映射在同一个高维向量空间，且由于经过海量数据的训练其具备良好的通用性。针对UI的目标区域识别场景，我们对其原有设计进行了改进。具体来说，我们提供图像和文本两种检索词并设置权重进行多模态的匹配。
图：目标UI区域识别流程
为了验证上述多模态UI区域识别流程的有效性，我们设计了检索词仅包含图像和仅包含文本两个单模态的目标区域识别算法作为CLIP多模态算法的对照组。考虑到商品信息在线上购物应用中的核心作用，以及其用户界面通常较为复杂，我们决定选用商品信息界面作为UI区域识别算法的测试场景。具体来说，我们收集了100个商品列表页，测试多模态UI区域识别算法和两个对照方法从中识别商品卡片的效果。实验收集到了如下数据：
