Поиск по скриншотам интерфейсов: новый подход

Автор: Денис Аветисян


В статье представлена система UISearch, позволяющая эффективно искать скриншоты пользовательских интерфейсов в корпоративных коллекциях.

Система UISearch представляет собой комплексный конвейер, преобразующий скриншоты пользовательского интерфейса в ранжированные результаты поиска посредством построения графов, контрастного обучения и гибридного индексирования.
Система UISearch представляет собой комплексный конвейер, преобразующий скриншоты пользовательского интерфейса в ранжированные результаты поиска посредством построения графов, контрастного обучения и гибридного индексирования.

Разработанный метод использует графовые представления и контрастное обучение для повышения точности и масштабируемости поиска.

Сохранение согласованности дизайна и эффективный поиск в огромных коллекциях пользовательских интерфейсов корпоративного программного обеспечения представляют собой сложную задачу. В данной работе, ‘UISearch: Graph-Based Embeddings for Multimodal Enterprise UI Screenshots Retrieval’, предложен новый подход, основанный на представлении UI-скриншотов в виде атрибутированных графов, кодирующих иерархические и пространственные связи. Такое графовое представление, обученное с использованием контрастного автоэнкодера, обеспечивает более точное различение UI, чем современные Vision Encoders, и позволяет реализовать многомодальный поиск с высокой скоростью и масштабируемостью. Способна ли эта методика стать основой для интеллектуальных систем управления и анализа пользовательских интерфейсов нового поколения?

Пока крипто-инвесторы ловят иксы и ликвидации, мы тут скучно изучаем отчетность и ждем дивиденды. Если тебе близка эта скука, добро пожаловать.

Купить акции "голубых фишек"

По ту сторону пикселей: Семантическое понимание интерфейсов

Традиционный анализ пользовательских интерфейсов часто сосредотачивается исключительно на визуальном оформлении, упуская из виду критически важную семантическую информацию и структурный контекст. Такой подход, ориентированный на пиксели, не позволяет системам понимать истинное назначение элементов интерфейса — является ли кнопка функцией отправки формы, элементом навигации или просто декоративным элементом. Игнорирование семантики приводит к неэффективному поиску элементов управления, затрудняет автоматизацию задач и серьезно ограничивает возможности обеспечения доступности для пользователей с ограниченными возможностями. Вместо понимания что делает элемент, системы лишь фиксируют как он выглядит, что значительно снижает их способность к обобщению и адаптации к различным вариантам оформления одного и того же функционала. Поэтому, для создания действительно интеллектуальных систем взаимодействия с интерфейсом, необходим переход к анализу, учитывающему не только визуальную составляющую, но и смысловое наполнение и структурную организацию элементов.

Ограничения, связанные с акцентом на визуальные характеристики пользовательских интерфейсов, существенно затрудняют эффективный поиск, автоматизацию и обеспечение доступности. Традиционные подходы часто не способны понять намерение пользователя, скрытое за элементами интерфейса, что приводит к неточным результатам поиска и неэффективной автоматизации задач. Неспособность систем распознавать функциональное назначение элементов интерфейса создает серьезные препятствия для людей с ограниченными возможностями, лишая их полноценного доступа к цифровому контенту. В связи с этим, наблюдается необходимость перехода к системам, способным анализировать не только внешний вид, но и семантическое значение элементов интерфейса, а также понимать намерения пользователя, что позволит создавать более интеллектуальные и инклюзивные цифровые решения.

Существующие методы анализа пользовательских интерфейсов, такие как Screen2Vec, в основном ориентированы на захват визуальных характеристик, что ограничивает их способность понимать функциональное назначение элементов интерфейса. В результате, эти методы демонстрируют более низкую дискриминационную способность по сравнению со структурными вложениями, которые учитывают иерархию и взаимосвязи между элементами управления. В то время как Screen2Vec успешно выявляет визуальное сходство между экранами, он не может определить, что два визуально похожих элемента выполняют разные функции, например, кнопки «Сохранить» и «Отменить». В отличие от этого, структурные представления кодируют информацию о роли каждого элемента, его типе и контексте, что позволяет более точно различать элементы с различной функциональностью и, следовательно, значительно повышает эффективность поиска, автоматизации и обеспечения доступности пользовательских интерфейсов.

Структурные вложения UISearch демонстрируют превосходную дискриминацию изображений благодаря широкому диапазону косинусного сходства (0.0-0.4), в отличие от моделей, объединяющих зрение и язык (различные варианты CLIP, SigLIP, DINOv2), которые подвержены коллапсу представлений с узкими пиками около 1.0.
Структурные вложения UISearch демонстрируют превосходную дискриминацию изображений благодаря широкому диапазону косинусного сходства (0.0-0.4), в отличие от моделей, объединяющих зрение и язык (различные варианты CLIP, SigLIP, DINOv2), которые подвержены коллапсу представлений с узкими пиками около 1.0.

Графовое представление UI: Структурная основа

Представление пользовательского интерфейса в виде графа позволяет учесть как иерархическую структуру элементов, так и их пространственные взаимосвязи. В таком представлении, каждый элемент интерфейса выступает в роли узла графа, а связи между узлами отражают отношения между элементами, такие как вложенность или соседство. Это обеспечивает более полное семантическое описание интерфейса по сравнению с традиционными древовидными структурами, поскольку учитывает не только отношения «родитель-потомок», но и пространственное расположение элементов относительно друг друга. Использование графового представления существенно расширяет возможности анализа интерфейса, позволяя выявлять сложные взаимосвязи и зависимости между элементами, что необходимо для автоматического понимания функциональности и поведения приложения.

Представление пользовательского интерфейса (UI) в виде графа осуществляется за счет использования алгоритмов объектного детектирования, в частности, модели YOLO. YOLO идентифицирует отдельные элементы UI, такие как кнопки, текстовые поля и иконки, определяя их местоположение и размеры на экране. На основе результатов детектирования строится граф, где каждый узел представляет собой элемент UI, а ребра отражают пространственные и иерархические связи между ними. Этот процесс позволяет автоматически извлекать структуру UI из визуального представления, формируя основу для дальнейшего анализа и обработки.

Представление пользовательского интерфейса в виде графа открывает возможности применения графовых нейронных сетей (GNN) для анализа функциональности и намерений элементов управления. GNN позволяют обрабатывать взаимосвязи между элементами интерфейса, представленными как узлы и ребра графа, что позволяет моделировать сложные взаимодействия и зависимости. Благодаря этому, GNN могут быть обучены для предсказания действий, выполняемых пользователем, понимания роли конкретных элементов в приложении, или автоматического определения функционального назначения элементов интерфейса, основываясь на структуре и связях внутри графа. Такой подход позволяет выйти за рамки традиционных методов анализа интерфейса, основанных на визуальных характеристиках или иерархической структуре, и учитывать контекст и семантику элементов управления.

Усиление понимания UI с помощью графовых нейронных сетей

Контрастирующий графовый автокодировщик (Contrastive Graph Autoencoder) представляет собой архитектуру, объединяющую графовые сети внимания (Graph Attention Networks) и графовые свёрточные сети (Graph Convolutional Networks) для обучения структуро-зависимым векторным представлениям (embeddings) из графов пользовательского интерфейса. Сети внимания позволяют модели учитывать важность различных узлов и связей в графе, а свёрточные сети эффективно агрегируют информацию от соседних узлов. Комбинирование этих двух типов сетей позволяет автокодировщику формировать представления, учитывающие как семантические свойства элементов интерфейса, так и их структурные взаимосвязи, что критически важно для задач сравнения и поиска UI.

Полученные векторные представления (embeddings) UI-графиков позволяют более точно сравнивать и извлекать интерфейсы благодаря захвату как семантической информации, так и структурных ограничений. В частности, семантическая информация кодирует функциональное назначение UI-элементов и их взаимосвязи, в то время как структурные ограничения отражают пространственное расположение и иерархию элементов. Это позволяет различать UI-элементы с одинаковым визуальным представлением, но разным функциональным назначением, и эффективно находить UI-элементы, соответствующие определенным критериям, учитывая как их содержимое, так и структуру расположения. В результате достигается повышение точности при задачах поиска и сравнения пользовательских интерфейсов.

Методика Graph4GUI демонстрирует возможности графовых нейронных сетей в одновременном захвате семантических свойств и визуально-пространственных ограничений элементов пользовательского интерфейса. В частности, Graph4GUI использует графовое представление UI, где узлы соответствуют элементам интерфейса, а ребра — их взаимосвязям. Семантические свойства кодируются через атрибуты узлов, описывающие тип элемента (кнопка, текстовое поле и т.д.) и его функциональное назначение. Визуально-пространственные ограничения отражаются в структуре графа и атрибутах ребер, определяющих относительное положение элементов и их визуальную иерархию. Такой подход позволяет сети эффективно моделировать сложные взаимосвязи в UI и использовать их для задач, таких как поиск похожих элементов интерфейса или автоматическое распознавание структуры UI.

UISearch: Масштабируемая мультимодальная система управления UI

Система UISearch представляет собой многомодальный поисковый движок, предназначенный для эффективного поиска и управления пользовательскими интерфейсами. В основе её работы лежит преобразование скриншотов в графовые представления, что позволяет осуществлять поиск не только по визуальным характеристикам, но и по структуре элементов интерфейса. Такой подход позволяет эффективно индексировать и сопоставлять интерфейсы, значительно упрощая задачи управления и автоматизации тестирования, а также поиск похожих элементов в больших базах данных UI.

Архитектура индексирования UISearch построена на комбинации векторных индексов FAISS и фильтрации по метаданным, что обеспечивает задержки запросов менее секунды. Для повышения эффективности поиска используется алгоритм HNSW (Hierarchical Navigable Small World), который позволяет быстро находить ближайшие векторы в многомерном пространстве. FAISS предоставляет инструменты для эффективного хранения и поиска векторов, а фильтрация по метаданным позволяет сузить область поиска, учитывая дополнительные атрибуты пользовательского интерфейса. Комбинация этих методов позволяет системе обрабатывать большое количество данных и обеспечивать быстрые и релевантные результаты поиска.

Система UISearch демонстрирует высокую производительность при поиске по пользовательским интерфейсам. На тестовом наборе данных, состоящем из 20 396 финансовых UI, достигнута точность Top-5 в 0.92 и медианная задержка в 47.5 мс. Эти показатели свидетельствуют о значительном улучшении скорости и качества поиска по сравнению с существующими подходами, что подтверждает эффективность предложенной архитектуры и методов индексации.

Система UISearch демонстрирует стабильно высокую скорость обработки запросов, о чем свидетельствуют показатели задержки P90 и P95, составляющие $108.9$ мс и $123.7$ мс соответственно. Это означает, что 90% запросов обрабатываются за время не превышающее $108.9$ миллисекунд, а 95% — за $123.7$ мс. Такие низкие значения задержки обеспечивают отзывчивость системы и позволяют эффективно работать с большими объемами данных пользовательских интерфейсов.

Стандартное отклонение структурных вложений, полученных в системе UISearch, составляет 0.11, что значительно выше, чем у вложений, полученных с помощью моделей компьютерного зрения, где данный показатель варьируется от 0.041 до 0.063. Более высокое стандартное отклонение указывает на большую дисперсию векторов признаков, что свидетельствует о повышенной дискриминационной способности графового подхода в представлении пользовательских интерфейсов. Это позволяет более эффективно различать различные элементы и структуры UI, улучшая точность и релевантность поисковых результатов.

Оценка результатов поиска, проведенная с использованием 12 различных моделей VLM (Vision-Language Models), показала высокий уровень принятия — 89.2%. Это свидетельствует о высоком качестве и релевантности результатов, возвращаемых системой UISearch. Высокий процент принятия, полученный при оценке с помощью VLM, подтверждает, что система способна эффективно находить и предоставлять пользователю соответствующие визуальные элементы пользовательского интерфейса, соответствующие запросу.

Будущие направления: Адаптивное и динамическое понимание UI

Современные подходы к пониманию пользовательских интерфейсов, такие как $LayoutGMN$, часто испытывают трудности с определением истинного назначения элементов управления, ограничиваясь лишь анализом их визуального расположения. Это связано с тем, что алгоритмы фокусируются на геометрической структуре интерфейса, упуская из виду семантические связи между элементами и их функциональную роль. Недостаточно просто распознать кнопку или текстовое поле; необходимо понять, что эта кнопка делает и какие данные обрабатывает поле. Поэтому, для создания действительно интеллектуальных систем управления интерфейсами, необходимы более сложные методы, способные к глубокому семантическому анализу и пониманию намерений разработчика, а также контекста использования элементов управления. Такой подход позволит системам не просто имитировать действия пользователя, но и предсказывать его потребности и адаптироваться к изменяющимся условиям.

Методики, такие как CLAY, демонстрируют эффективность в устранении шумов и неточностей в макетах пользовательских интерфейсов, однако для достижения настоящей устойчивости и надежности систем управления интерфейсами требуется их дальнейшая интеграция с семантическим анализом. Простое восстановление визуальной структуры недостаточно; система должна понимать функциональное назначение каждого элемента и взаимосвязь между ними. Сочетание алгоритмов, способных к “очистке” макета, с моделями, распознающими смысл и роль компонентов интерфейса, позволит создавать более адаптивные и отказоустойчивые системы, способные корректно функционировать даже при наличии незначительных визуальных отклонений или изменений в дизайне. Такой подход, объединяющий структурную и семантическую информацию, является ключевым шагом к созданию интеллектуальных систем управления пользовательскими интерфейсами.

Для повышения точности и надежности систем понимания пользовательских интерфейсов активно используются методы, основанные на привлечении человеческой аннотации, такие как MUD (Manual UI Description). Этот подход предполагает, что эксперты вручную описывают функциональное назначение элементов интерфейса и их взаимосвязи, создавая размеченный набор данных. Полученные данные служат ценным источником обучения для моделей машинного обучения, позволяя им более эффективно распознавать и интерпретировать сложные UI-структуры. Использование человеческой экспертизы позволяет преодолеть ограничения, связанные с автоматическим извлечением семантической информации, и значительно улучшить способность системы адаптироваться к различным стилям и задачам, обеспечивая более интуитивное и эффективное взаимодействие с пользователем.

Для создания действительно интеллектуальных систем управления пользовательским интерфейсом необходимо учитывать способность адаптироваться к динамическим изменениям и поддерживать широкий спектр элементов интерфейса. Современные приложения часто претерпевают изменения в процессе работы — появляются новые элементы, изменяется их расположение или функциональность. Система, не способная отслеживать и понимать эти изменения, быстро теряет свою эффективность. Расширение поддержки различных типов элементов интерфейса, включая нестандартные виджеты и сложные интерактивные компоненты, также является критически важным. Это требует разработки алгоритмов, способных к обобщению и адаптации к новым, ранее не встречавшимся элементам, а также к пониманию их роли в общей структуре интерфейса и взаимодействии с пользователем. Только при таком подходе можно создать системы, способные надежно и эффективно управлять сложными и динамичными пользовательскими интерфейсами.

Исследование представляет собой типичный пример того, как элегантная теория сталкивается с суровой реальностью корпоративных интерфейсов. Авторы предлагают использовать графовые представления для поиска по скриншотам UI, что звучит неплохо на бумаге. Однако, можно предположить, что любая система, претендующая на масштабируемость в enterprise-среде, рано или поздно утонет в море edge cases и нетривиальных взаимодействий. Как точно подметил Ян Лекун: «Машинное обучение — это просто сложные функции». В данном случае, эта функция пытается понять, что вообще происходит на экране, и, вероятно, очень скоро потребует больше ресурсов, чем стоит весь этот «cloud-native» UI. По сути, это лишь ещё один способ добавить сложности в систему, которая и без того обречена на технический долг.

Что дальше?

Представленная работа, безусловно, продвигает область поиска по скриншотам пользовательских интерфейсов. Однако, стоит помнить: элегантное представление графа — это лишь затишье перед бурей продакшена. Любая система, даже основанная на передовых графовых нейронных сетях, столкнётся с бесконечным потоком непредсказуемых изменений в интерфейсах. Новые версии, A/B-тесты, кастомные виджеты, разработанные стажёрами… всё это потребует постоянной адаптации и, вероятнее всего, появления новых, ещё более изощрённых методов борьбы с дрейфом данных.

Вместо того чтобы стремиться к идеальной точности, возможно, стоит обратить внимание на устойчивость системы к шуму. Ведь в реальном мире редко удаётся получить чистые и канонические скриншоты. Поиск по нечётким изображениям, обработка скриншотов, сделанных на разных устройствах с разным разрешением — вот где кроется настоящая головная боль. И, конечно, не стоит забывать о масштабируемости. Настоящий энтерпрайз — это не сотни скриншотов, а миллионы. И тогда даже самые эффективные алгоритмы столкнутся с ограничениями аппаратных ресурсов.

В конечном итоге, всё новое — это хорошо забытое старое. Контрастное обучение, графовые представления — всё это инструменты, которые уже давно используются в других областях. Вопрос лишь в том, как адаптировать их к специфике поиска по UI. И, вероятно, через несколько лет, кто-то скажет: «Как же мы жили без этого?», а потом найдёт в этом решении очередную критическую уязвимость. Таков уж закон жанра.


Оригинал статьи: https://arxiv.org/pdf/2511.19380.pdf

Связаться с автором: https://www.linkedin.com/in/avetisyan/

Смотрите также:

2025-11-25 15:39