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

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

Для достижения этой цели нам необходимо преодолеть большое количество технических проблем. Основное препятствие заключается в том, что нашему браузеру требуется полноценное машинное понимание Интернета, чтобы понимать произвольные веб-страницы покупок и успешно с ними взаимодействовать. В этом сообщении блога мы представляем подход Graph Machine Learning, выбранный нашей исследовательской группой для работы этого интеллектуального браузера.

Что означает, что наш браузер понимает веб-страницу?

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

Как только мы обнаружим, что веб-страница соответствует странице продукта, нам нужно извлечь полезные данные из этой веб-страницы, чтобы сохранить значимые свойства продукта. Следовательно, наш умный браузер должен извлекать информацию с веб-страницы, такую ​​как название продукта, бренд и цена. Это требует, чтобы наш браузер понимал, что представляют собой различные элементы на странице.

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

Столкнувшись с такими техническими проблемами, с чего мы начнем? И что вообще такое веб-страница?

Массив пикселей, который вы видите в окне браузера, является результатом различных операций, которые начинаются с анализа содержимого, полученного из Интернета. Сюда входят HTML (язык гипертекстовой разметки), который является стандартным языком для определения структуры и содержимого документа, CSS (каскадные таблицы стилей), который определяет правила стиля, и JS (JavaScript), который изменяет документ динамически с помощью сценариев. Он также включает в себя внешние активы, такие как файлы изображений, и более продвинутые механизмы, такие как WebAssembly и WebGL для самых современных веб-сайтов.

После анализа всего этого браузер преобразует содержимое в промежуточные структуры данных, наиболее важной из которых является DOM (объектная модель документа), представляющая собой дерево, в котором каждый узел представляет элемент веб-страницы. например, раздел документа, изображение или текстовый элемент. Из этого внутреннего представления браузер, наконец, может отображать пиксели веб-страницы, отображая каждый элемент в правильном месте на странице. И вот как вы можете читать эту страницу!

Дерево DOM, ключевое представление веб-страницы

Давайте углубимся в детали того, что такое дерево DOM. В теории графов и информатике дерево — это частный случай графа, т. е. множество ребер, соединяющих множество узлов, где каждый узел может быть соединен с несколькими дочерними элементами, но должен быть соединен ровно с одним родителем, кроме корня узел, у которого нет родителя. В дереве DOM корень представляет собой сам документ, от которого происходят все элементы. Кроме того, каждый узел в дереве DOM наделен соответствующими атрибутами, такими как его размер, положение на странице, цвет или свойства стиля. Дерево DOM — это как внутреннее представление веб-страницы в браузере, так и API, предоставляемый Javascript для взаимодействия с контентом.

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

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

Построение машинного понимания деревьев DOM

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

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

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

Второе — это задача классификации узлов: нам нужно классифицировать отдельные узлы в дереве, чтобы сопоставить их с категориями элементов, такими как «элемент цены», «изображение товара» и т. д.

В вашей сельской прогулке задача классификации узлов эквивалентна выбору одного из элементов дерева и классификации его как «лист», «почка» или «ветвь».

Форма наших алгоритмов

Модели, решающие эти задачи на графах, обычно используют различные входные данные. Во-первых, сама структура графа, так как положение узлов по отношению к соседним узлам дает много информации о роли и характере каждого узла. Во-вторых, функции узла, то есть атрибуты каждого узла. В контексте веб-страниц эти функции узлов особенно богаты: они включают метку HTML, такую ​​как <body> или <title>, положение на странице, свойства стиля, такие как цвет фона, URL-адрес гипертекстовой ссылки и, что наиболее важно, содержимое. элемента, то есть текст или изображение, отображаемое этим узлом DOM.

Из-за этой важности функций узлов в деревьях DOM плодотворные исследовательские усилия заключаются в разработке функций в дополнение к использованию современных алгоритмов графов, таких как графовые нейронные сети (GNN). Разработка признаков заключается в улучшении признаков с помощью этапов предварительной обработки, чтобы улучшить их выразительность и повысить производительность модели. Поскольку функции элементов веб-страницы настолько богаты, можно применять множество стратегий. Одним из примеров является сопоставление содержимого текста и изображения с заданным пространством встраивания с использованием подходов обработки естественного языка (NLP) и методов компьютерного зрения.

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

Какие результаты? И какие следующие шаги?

Все эти усилия уже дают многообещающие результаты, поскольку наши последние решения улучшают наши продукты и превосходят опубликованные результаты конкурентов. Мы пишем более подробные заметки о наших результатах, так что следите за обновлениями!

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

Обращайтесь, если вас интересуют наши исследовательские проблемы, мы нанимаем!