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

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

Текущий вариант WebScore AI отражает мнение среднестатистического интернет-пользователя о внешнем виде сайта — хотя по аналогии мы можем сделать и другие варианты, например, судящие о юзабилити сайта.

Сайты, на которых училась система

Для начала мы собрали 12 тысяч сайтов и магазинов, созданных в разные годы, на разных платформах и разных языках. Главной задачей было получить достаточно примеров градации от визуально очень плохих до очень хороших сайтов, чтобы “в концентрированном виде” показать системе, что может встретиться в современном вебе.

Любая градация измеряется по шкале, и эта шкала должна быть понятна простому человеку, мнение которого мы моделируем. Так мы пришли к идее шкалы “от 1 до 10”, которая и используется в нашем сервисе.

Люди, которым подражает WebScore AI

Для формирования из массы сайтов дата-сета — набора данных для обучения модели, нам нужны были две вещи:

• признаки, по которым система будет определять привлекательность сайта,
• и оценки некой массы сайтов по нашей шкале — они станут эталоном для системы.

Кто-то должен проставить эти исходные оценки. Такой “учитель”, а точнее, группа “учителей” во многом повлияет на то, как будет работать модель.

Чтобы собрать фокус-группу, мы провели предварительный отбор кандидатов на 1500 сайтах-примерах — людей ожидала рутинная, но ответственная и требующая фокуса работа. Предварительный отбор помог нам отсеять неподходящих кандидатов, а также исключить из выборки “спорные” сайты — те, которым кто-то один ставил 1 балл, а другой давал все 10.

Кроме того, на первых порах мы экспериментировали со способами оценки.

Например, предлагали оценить один сайт за раз, оценить два сайта на экране сразу — или выбрать из двух тот, который человек считал привлекательнее. Подход, при котором респондент видел один сайт и ставил ему оценку, работал лучше всего. Его мы и использовали для разметки 10 тысяч оставшихся сайтов.

Человек оценил, красив ли сайт. Как это сделает машина?

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

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

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

Создаем алгоритм

Что такое “обучение модели”? Это построение такого алгоритма, который по заданному набору признаков сможет ставить оценку выбранному сайту. Причем желательно, чтобы оценка системы в итоге минимально расходилась с эталоном — средней оценкой учителей.

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

При этом с добавлением каждого следующего базового алгоритма, он старается улучшить качество ответов всего ансамбля.

Для ускорения и облегчения процесса мы использовали библиотеку CatBoost от “Яндекса”, которая позволяет строить градиентный бустинг на так называемых “небрежных решающих деревьях”, добиваясь хорошей обучаемости модели с “нуля” и быстрого перехода к выдаче предсказания (оценки) для новых объектов.

Добавляем нейросеть

Когда основной алгоритм был готов, мы решили провести эксперимент - улучшатся ли результаты, если добавить нейросети? По сути, мы уже умели “видеть”, как выглядит любой сайт, а теперь решили дать системе своего рода “увеличительное стекло”, с помощью которого она сможет выявлять еще больше деталей.

Мы выбрали достаточно популярную сеть resnet50, известную как хороший алгоритм для извлечения высокоуровневых признаков, - и научились получать 1000 дополнительных признаков для оценки сайта. В итоге, сейчас отданный системе url характеризуется суммарно 1125 признаками, и опираясь на них, она находит сайту “место” на 10-балльной шкале. Процесс занимает до нескольких десятков секунд, и в следующей версии мы думаем сократить число признаков втрое, чтобы ускорить модель, сохранив качество оценки.

Первые результаты

Обученная таким образом модель смогла выдавать оценку, которая приближается к эталону в три раза точнее, чем оценки отдельных “учителей”.

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