UIED

GitHub
538 121 简单 1 次阅读 3天前Apache-2.0图像
AI 解读 由 AI 自动生成,仅供参考

UIED 是一款专注于图形用户界面(GUI)元素检测的开源工具,能够自动从手机应用截图、网页快照甚至手绘设计稿中识别并分类文本与图形组件(如按钮、输入框等),最终输出结构化的 JSON 数据。它主要解决了自动化测试、界面分析及设计还原过程中,人工标注 UI 元素效率低下且容易出错的痛点。

该工具特别适合开发者、软件测试工程师及人机交互研究人员使用,尤其是那些需要灵活调整检测逻辑或处理多样化界面场景的专业人士。UIED 的独特之处在于其“混合式”技术架构:它摒弃了传统的端到端黑盒深度学习模式,转而结合谷歌 OCR 进行高精度文字识别,并利用经典计算机视觉算法定位图形元素,辅以轻量级 CNN 进行分类。这种设计不仅降低了对预训练模型的依赖,更赋予了用户极高的自定义自由度——你可以轻松替换其中的文字检测模块,或直接修改非文本部分的检测与合并算法,以完美适配特定的业务需求。

使用场景

某大型金融科技公司的前端自动化测试团队,正面临对数百个历史遗留的移动端 App 界面进行无障碍化(Accessibility)改造的紧迫任务。

没有 UIED 时

  • 人工标注效率极低:测试人员需手动打开每张截图,用绘图工具逐个框选按钮、输入框和文本区域,处理一个复杂页面平均耗时 40 分钟。
  • 非标准控件识别困难:对于设计师自定义绘制的图形按钮或非原生组件,传统脚本无法定位,只能依靠肉眼辨别,漏检率高达 30%。
  • 数据格式不统一:不同成员标注的坐标数据和元素类型定义混乱,导致后续生成的自动化测试脚本频繁报错,维护成本高昂。
  • 手绘稿无法利用:产品早期在白板或纸上绘制的手绘 UI 草图完全无法被数字化解析,必须等高保真设计图出炉才能开始工作。

使用 UIED 后

  • 批量检测秒级完成:利用 UIED 的传统 CV 算法结合 Google OCR,团队将数百张截图批量输入,几分钟内即可自动输出包含所有元素坐标与类别的 JSON 文件。
  • 混合元素精准捕获:UIED 不仅能识别标准控件,还能通过图像处理技术精准定位手绘草图和自定义图形元素,将元素检出率提升至 95% 以上。
  • 结构化数据直接复用:输出的标准化 JSON 数据可直接对接内部测试框架,自动生成可执行的无障碍测试脚本,无需人工二次清洗数据。
  • 全阶段覆盖能力:从早期的手绘草图到最终的 App 截图,UIED 均能统一处理,使得无障碍评估工作左移至设计阶段,提前发现交互缺陷。

UIED 通过将传统的计算机视觉技术与现代 OCR 完美结合,以极低的部署成本实现了多源 UI 图像的结构化解析,让自动化测试不再受限于界面来源与复杂度。

运行环境要求

GPU

不需要 GPU(新版使用 Google OCR API,旧版 EAST 检测器虽涉及深度学习但未明确指定显卡型号及 CUDA 版本)

内存

未说明

依赖
notes新版已升级为使用 Google OCR 进行文本检测,无需下载预训练模型,但必须在代码中配置个人的 Google Cloud API Key。若需使用论文原版(基于 EAST 的文本检测),则需切换至 v2.3 版本并手动下载预训练模型。该工具主要基于传统计算机视觉方法检测图形元素,具有高度可定制性。
python3.5
Opencv==3.4.2
Pandas
Google Cloud Vision API (需自行配置 Key)
UIED hero image

快速开始

UIED - UI元素检测,从UI截图或设计图中检测UI元素

该项目仍在进行中,此仓库可能会不定期更新。我在 http://uied.online 上开发了一个用于UIED的Web应用。

相关论文:

1. UIED:一种用于GUI元素检测的混合工具

2. 图形用户界面的对象检测:传统方法、深度学习,还是两者的结合?

该仓库已升级为使用Google OCR进行GUI文本检测。若需使用我们论文中的原始版本(即使用EAST作为文本检测器),请查看发布版本v2.3,并从此链接下载预训练模型。

是什么?

UI元素检测(UIED)是一种基于传统计算机视觉(CV)的图形用户界面元素检测方法。

UIED的输入可以是各种UI图像,例如移动应用或网页截图、用Photoshop或Sketch绘制的UI设计,甚至是一些手绘的UI设计。然后,该方法会检测并分类文本和图形化的UI元素,并将检测结果导出为JSON文件,以供后续应用使用。

UIED由两部分组成,分别用于检测UI文本和图形元素,如按钮、图片和输入框。

  • 对于文本,它利用Google OCR进行检测。
  • 对于图形元素,它使用传统的CV方法定位这些元素,并通过CNN分类器实现分类。

UIED具有高度的可定制性,您可以根据需要替换这两部分(例如使用其他文本检测方法)。与黑盒式的端到端深度学习方法不同,您可以轻松地修改非文本检测和合并部分的算法(部分或全部),以适应您的任务需求。

UIED方法

如何使用?

依赖项

  • Python 3.5
  • OpenCV 3.4.2
  • Pandas

安装

新版本的UIED配备了Google OCR,部署起来非常方便,无需任何预训练模型。只需下载仓库及其依赖项即可。

请在detect_text/ocr.py第28行处将Google OCR密钥替换为您自己的密钥(可在Google Cloud Vision API网站申请)。

使用

要测试您自己的图像:

  • 若测试单张图像,请将run_single.py中的input_path_img修改为您要检测的图像路径,结果将输出到output_root
  • 若测试多张图像,请将run_batch.py中的input_img_root修改为您存放图像的目录,结果将输出到output_root
  • 若要实时调整参数,可以使用run_testing.py

注意:不同的GUI图像类型(移动应用、网页、桌面应用)的最佳参数设置可能有所不同。强烈建议您先使用run_testing.py尝试,以便为您的数据选择一组合适的参数。

文件夹结构

cnn/

  • 用于训练图形化UI元素的分类器
  • 设置CNN分类模型的路径

config/

  • 设置数据路径
  • 设置图形元素检测的参数

data/

  • 存放输入的UI图像和输出的检测结果

detect_compo/

  • 非文本GUI组件的检测

detect_text/

  • 使用Google OCR进行GUI文本检测

detect_merge/

  • 合并非文本和文本GUI元素的检测结果

主要的检测算法位于detect_compo/detect_text/detect_merge/中。

示例

网页截图的UI元素检测结果

UI组件检测结果

版本历史

v3.32022/03/23
v3.22021/09/14
v3.12021/08/05
v3.02021/07/06
v2.32021/06/29
v2.22020/11/11
v2.12020/10/06
v2.02020/08/09

常见问题

相似工具推荐

stable-diffusion-webui

stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面,旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点,将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师,还是想要深入探索模型潜力的开发者与研究人员,都能从中获益。其核心亮点在于极高的功能丰富度:不仅支持文生图、图生图、局部重绘(Inpainting)和外绘(Outpainting)等基础模式,还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外,它内置了 GFPGAN 和 CodeFormer 等人脸修复工具,支持多种神经网络放大算法,并允许用户通过插件系统无限扩展能力。即使是显存有限的设备,stable-diffusion-webui 也提供了相应的优化选项,让高质量的 AI 艺术创作变得触手可及。

162.1k|★★★☆☆|今天
开发框架图像Agent

ComfyUI

ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。

107.7k|★★☆☆☆|2天前
开发框架图像Agent

ML-For-Beginners

ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程,旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周,包含 26 节精炼课程和 52 道配套测验,内容涵盖从基础概念到实际应用的完整流程,有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员,还是对人工智能充满好奇的普通爱好者,都能从中受益。课程不仅提供了清晰的理论讲解,还强调动手实践,让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持,通过自动化机制提供了包括简体中文在内的 50 多种语言版本,极大地降低了全球不同背景用户的学习门槛。此外,项目采用开源协作模式,社区活跃且内容持续更新,确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路,ML-For-Beginners 将是理想的起点。

85k|★★☆☆☆|今天
图像数据工具视频

ragflow

RAGFlow 是一款领先的开源检索增强生成(RAG)引擎,旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体(Agent)能力相结合,不仅支持从各类文档中高效提取知识,还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中,幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构(如表格、图表及混合排版),显著提升了信息检索的准确度,从而有效减少模型“胡编乱造”的现象,确保回答既有据可依又具备时效性。其内置的智能体机制更进一步,使系统不仅能回答问题,还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统,还是致力于探索大模型在垂直领域落地的创新者,都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口,既降低了非算法背景用户的上手门槛,也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目,它正成为连接通用大模型与行业专有知识之间的重要桥梁。

77.1k|★★★☆☆|2天前
Agent图像开发框架

PaddleOCR

PaddleOCR 是一款基于百度飞桨框架开发的高性能开源光学字符识别工具包。它的核心能力是将图片、PDF 等文档中的文字提取出来,转换成计算机可读取的结构化数据,让机器真正“看懂”图文内容。 面对海量纸质或电子文档,PaddleOCR 解决了人工录入效率低、数字化成本高的问题。尤其在人工智能领域,它扮演着连接图像与大型语言模型(LLM)的桥梁角色,能将视觉信息直接转化为文本输入,助力智能问答、文档分析等应用场景落地。 PaddleOCR 适合开发者、算法研究人员以及有文档自动化需求的普通用户。其技术优势十分明显:不仅支持全球 100 多种语言的识别,还能在 Windows、Linux、macOS 等多个系统上运行,并灵活适配 CPU、GPU、NPU 等各类硬件。作为一个轻量级且社区活跃的开源项目,PaddleOCR 既能满足快速集成的需求,也能支撑前沿的视觉语言研究,是处理文字识别任务的理想选择。

74.9k|★★★☆☆|今天
语言模型图像开发框架

tesseract

Tesseract 是一款历史悠久且备受推崇的开源光学字符识别(OCR)引擎,最初由惠普实验室开发,后由 Google 维护,目前由全球社区共同贡献。它的核心功能是将图片中的文字转化为可编辑、可搜索的文本数据,有效解决了从扫描件、照片或 PDF 文档中提取文字信息的难题,是数字化归档和信息自动化的重要基础工具。 在技术层面,Tesseract 展现了强大的适应能力。从版本 4 开始,它引入了基于长短期记忆网络(LSTM)的神经网络 OCR 引擎,显著提升了行识别的准确率;同时,为了兼顾旧有需求,它依然支持传统的字符模式识别引擎。Tesseract 原生支持 UTF-8 编码,开箱即用即可识别超过 100 种语言,并兼容 PNG、JPEG、TIFF 等多种常见图像格式。输出方面,它灵活支持纯文本、hOCR、PDF、TSV 等多种格式,方便后续数据处理。 Tesseract 主要面向开发者、研究人员以及需要构建文档处理流程的企业用户。由于它本身是一个命令行工具和库(libtesseract),不包含图形用户界面(GUI),因此最适合具备一定编程能力的技术人员集成到自动化脚本或应用程序中

73.3k|★★☆☆☆|3天前
开发框架图像