Проведен систематический анализ применения нейросетевых алгоритмов при оценке дизайна веб-страниц. Показана возможность определения параметров функциональности и эстетической ценности элементов веб-дизайна при использовании нейросетевых алгоритмов третьего поколения. Разработана базовая модель, которая включает в себя применение нейросетевых и вычислительных алгоритмов, а также исполнительных механизмов. Показано, что нейросетевые алгоритмы предложенной модели программного комплекса могут базироваться на моделях автокодировщика, а также модели нейросети глубокого обучения типа многоярусный автокодировщик.
Ключевые слова: интернет-сайт, веб-страница, нейросетевая модель, многоярусный автокодировщик, экспертная оценка, визуальный образ.
A systematic analysis of the application of neural network algorithms in evaluating the design of web pages was carried out. The possibility of determining the parameters of functionality and aesthetic value of web design elements when using neural network algorithms of the third generation was shown. The basic model which includes application of neural network, computational algorithms and executive mechanisms was developed. It is shown that neural network algorithms of the proposed software complex model can be based on autocoder models, as well as neural network models of deep learning such as a stacked autocoder.
Keywords: internet site, web page, neural network model, stacked autocoder, expert evaluation, visual image.
Обобщая область применения искусственных нейросетей (ИНС), можно отметить, что нейросетевые алгоритмы служат для выделения и обработки цифровых или оцифрованных образов, как-то текста, машинного кода или мультимедийных образцов. Частным и наиболее распространенным видом ИНС являются модели, которые обрабатывают визуальные образы и видеозаписи, классифицируя элементы выборки, выделяя характерные черты, а также удаляя помехи, шумы и артефакты сжатия. Было показано, что ИНС глубокого обучения при этом способны выделять параметры высокого уровня абстракции, такие, например, как эстетическая ценность изображения. Исследования, которые проводятся в данном направлении, являются значимыми с точки зрения развития фундаментальной науки и множества междисциплинарных направлений; при этом полученные результаты могут быть быстро и эффективно адаптированы для решения прикладных задач, в частности, в области веб‑дизайна [1–7].
Статистика работы студий современного веб-дизайна и разработки интернет-сайтов [1‑3, 7] показывает, что ключевым фактором, который приводит к множеству конфликтных ситуаций, задержке в выполнении проекта, и даже его закрытию. Наличие инструмента по объективной оценке уровня веб‑дизайна разработанного сайта позволило бы решить спорные моменты и помочь в выборе оптимального решения, как заказчиком, так и дизайнерской группой. На рис. 1 представлена базовая схема выбора разработки веб-дизайна интернет‑сайта, которая базируется на нейросетевых алгоритмах.
Рис. 1. Базовая схема использования нейросетевых алгоритмов при разработке веб-дизайна.
Как показано на схеме, процесс разработки веб-дизайна в данном случае включает совместную оценку проекта заказчиком и нейросетевым алгоритмом и подразумевает стандартные два этапа:
- выбор дизайн-студии по представленному проекту экспресс-дизайна интернет-сайта;
- доработка экспресс дизайна через выбор одной из представленных студией моделей.
Таким образом, в рамках данной схемы заказчик ориентируется на нейросетевой алгоритм, как на стороннего эксперта, который также доступен студии дизайна, объективен в своей оценке, и не требует дополнительных капиталовложений.
Данное междисциплинарное исследование включало себя систематический анализ публикаций, результаты которых можно использовать для решения поставленных задач. Было проведено изучение современных работ по теме веб-дизайна и разработке интернет-сайтов [1–3], рассмотрены фундаментальные труды, посвященные построению нейросетевой архитектуры, методам выделения и анализа визуальных образов, а также алгоритмам глубокого обучения [7–10], в частности методикам построения архитектуры многоярусного автокодировщика [8–10]. Кроме того, данный анализ подразумевал рассмотрение работ по выделению нейросетевыми методами эстетических параметров визуального образа [4–7].
Целью данной работы является разработка методологии построения комплексного программного алгоритма на основе ИНС, который способен выделять и оценивать уровень дизайна веб-страниц. Разработанная модель может быть в дальнейшем использована для определения эстетических характеристик, а также прочих параметров, характеризующихся высоким уровнем абстракции, широкого класса объектов.
Определение критериев оценки дизайна веб-страниц
Оценка веб-дизайна принципиально отличается от определения эстетичности арт‑объектов или красоты человеческих лиц, поскольку ключевым фактором оценки уровня дизайна является оценка его функциональности. Поэтому в первую очередь важно, чтобы функциональные элементы веб‑страницы (ссылки, поля для введения текста, элементы управления и т. п.) однозначно интерпретировалось пользователем или нейросетевым алгоритмом, который его в данном случае заменяет. Таким образом, у программного комплекса должна быть возможность не только проанализировать экранную копию веб‑страницы, но и средства управления и алгоритмы анализы отклика (рис. 2).
Рис. 2. Определение наглядности оформления функциональных элементов веб-страницы.
Еще одной важной особенностью анализа интернет-сайтов является возможность динамичного изменения содержимого веб-страницы, что может происходить регулярно и в ряде случаев не поддается средствам прогнозирования. Соответственно, возникает необходимость анализа выборки страниц в соответствии с вносимыми на интернет-сайте изменениями. В общем случае, веб‑страницы могут быть разделены на три категории:
– статическая страница;
– динамическая страница;
– веб-сервис или веб-портал.
Наиболее хорошо поддаются анализу статические веб-страницы, наполнение которых практически не изменяется со временем. Однако их функционал крайне низок, обычно, их используют лишь для передачи контактных данных. В случае динамических страниц подразумевается регулярное изменение наполнения сайта, а значит необходимо проводить временной анализ состояний веб-страницы. Тем не менее, новый материал выкладывается средствами владельца хостинга, таким образом, есть возможность использовать сходное оформление текста и мультимедийных файлов; даже в том случае, когда частично изменяется шаблон сайта, дизайн должен оставаться узнаваемым. Наименее поддается анализу информационные ресурсы типа веб-сервисов или веб-порталов (форумы, социальные сети, имижборды и т. п.). За большую часть их наполнения отвечают пользователи, которые могут быть, с одной стороны, мало осведомлены в возможностях сервиса, либо же заимствовать материалы с высоким показателем эстетичности на других информационных ресурсах. Поэтому, в данном случае анализ должен учитывать лишь статистически значимые результаты, например, те, что близки к медианным.
Следует отметить, что современный интернет-сайт в большинстве случаев содержит все три типа веб-страниц. Так, например, статические страницы используются в качестве страниц-визиток, на динамических страницах располагается новостная лента, а веб-сервисы применяются для обсуждения услуг пользователями и их взаимодействия с технической поддержкой.
Рис. 3. Особенности анализа веб-страницы в зависимости от типа интернет-сайта.
В случае, если сайт состоит из нескольких веб-страниц, нейросетевой алгоритм должен классифицировать их, распределить по группам и в дальнейшем рассматривать как единый элемент, который состоит из нескольких групп и подгрупп элементов. Аналогичным образом происходит анализ веб-страниц с функцией скроллинга. На сегодняшний день, в связи с распространением мобильных устройств, которые характеризуются различными параметрами визуального интерфейса, возникает необходимость проводить анализ страницы в соответствии с видимой пользователю областью. При этом нейросетевой алгоритм выделяет несколько фрагментов экрана, которые содержат наиболее значимые элементы и могут перекрываться, чтобы далее анализировать их аналогично набору страниц (рис. 4). В том же случае, когда у интернет-сайта есть отдельная мобильная версия, она должна быть проанализирована отдельно и соотнесена с дизайном обычной версии.
Рис. 4. Особенности анализа многостраничного сайта и веб-страниц со скроллингом.
На следующем этапе страница разбивается на отдельные элементы, которые при помощи нейросетевого алгоритма соотносятся по размеру, форме и взаимному расположению. Итогом работы программного комплекса служит анализ функциональных элементов в отрыве от остального окружения. Как и на предыдущих этапах, в данном случае должна учитываться простота и эстетичность элемента, его считываемость и соответствие теми ограничениям, которые накладываются на данный тип элементов стандартными правилами веб‑дизайна (например, оформление ссылок, ограничение на размер элементов управления и пр.).
Методология разработки алгоритмов оценки дизайна веб-страниц
Проведенный анализ показывает, что программный комплекс оценки дизайна должен включать в себя помимо нейросетевых алгоритмов стандартные вычислительные алгоритмы, а также блок, отвечающий за взаимодействия с функциональными элементами веб-страницы. Таким образом, базовая модель процесса нейросетевого анализа состоит из следующих компонент:
– программный комплекс: нейросетевые алгоритмы, вычислительные алгоритмы, исполнительные механизмы;
– группа экспертов: на основе экспертной оценки производится корректировка архитектуры ИНС и определяются критерии работы вычислительных алгоритмов;
– сетевые ресурсы, веб-страницы которых подлежат анализу, и на основе которых строится обучающая выборка ИНС.
Рис. 5. Базовая схема процесса нейросетевого анализа дизайна интернет-сайта.
В соответствии с исследованием, проведенным в предыдущем разделе, ключевым этапом машинного анализа является кластеризация полной выборки путем выделения из нее статистически значимых результатов и разделения их на группы и подгруппы в соответствии со следующей иерархией (рис. 6):
– интернет-сайты одного типа;
– мобильные и стандартные версии сайтов;
– статические и динамические веб-страницы, а также их временные выборки;
– фрагменты веб-страниц, соответствующие визуальному интерфейсу пользователя;
– группы функциональных элементов веб-страниц;
– функциональные элементы веб-страниц.
Следует отметить, что в случае отсутствия мобильной версии сайта, следует провести анализ того, как стандартная версия сайта будет выглядеть на мобильном устройстве, какие элементы будут видны и доступны пользователю. При этом также могут быть использованы нейросетевые алгоритмы.
Далее каждый кластер на каждом из уровней подвергается анализу экспертным советом с целью определения уровня его распознавания и эстетического уровня. Но основе экспертной оценки формируются выборки, которые могут быть использованы на начальном этапе обучения ИНС в соответствии с процедурой «обучение с учителем». Кроме того, экспертная оценка позволяет выделить критерии построения вычислительных алгоритмов.
Рис. 6. Алгоритм обработки данных сетевых ресурсов и составления обучающей выборки.
После обучения ИНС и построения вычислительных алгоритмов дальнейшая работа может проводиться в режиме «обучение с подкреплением» через соотнесение результатов работы нейросетевых и вычислительных алгоритмов при минимальном участии экспертов или же без их участия.
Разработка нейросетевых моделей оценки дизайна веб-страниц
Как было отмечено выше, для обработки и классификации визуальных образов на сегодняшний день разработано большое количество нейросетевых архитектур, однако анализ уровня дизайна веб-страниц требует ИНС выполнения широкого класса задач, что сложно реализовать в рамках одной модели. Кроме того, в данном случае подразумевается необходимость выделения абстрактных характеристик входного образа (критерия эстетичности веб-страницы и ее элементов), а значит, следует выбрать модель, на основе которой возможно построить ИНС глубокого обучения. Поэтому в рамках данной работы предлагает использовать архитектуру автокодироващика (autoencoder) и производную от нее модель многоярусного автокодировщика (stacked autoencoder), как ИНС глубокого обучения. Данный подход позволяет на основе одной нейросетевой архитектуры организовать весь комплекс нейросетевых алгоритмов по оценке дизайна веб-сайтов, что значительно упрощает выполнение поставленной задачи.
Алгоритм работы ИНС класса автокодировщик [7–10] состоит из этапов кодирования и декодирования входного образа, что реализуется через организацию структуры скрытых слоев (рис. 7). Количество нейронов в 
скрытых слоях автокодировщика постепенно уменьшается по мере приближения к 
слою, а далее — постепенно увеличивается, приближаясь к значению первого слоя. Автокодировщик обучается по стандартной схеме обратного распространения ошибки, но при этом величина ошибки рассчитывается как разница между входным и выходным образом. В результате работы автокодировщик эффективно выделяет ключевые элементы дизайна и способен передать восприятие пользователем веб-страницы, которая отображается на небольшом экране мобильного устройства.
Рис. 7. Базовый алгоритм обработки входного образа автокодировщиком.
Многоярусный автокодировщик организуется путем шлейфового подключения обычных автокодировщиков, где выход каждого автокодировщика служит входом следующего. Таким образом, каждый из автокодировщиков, начиная со второго, анализирует данные полученные от предыдущего автокодировщика, первый автокодировщик анализирует данные обучающей выборки, а выход последнего скрытого слоя является выходом всей структуры многоярусного автокодировщика. Для повышения эффективности работы может быть предложен механизм предварительного обучения каждого из скрытых слоев на обучающей выборке. Процесс предварительного обучения на базе выборки визуальных образов, реализуется при помощи экспертной оценки, и производится, начинается с нижних слоев.
Выводы
Систематический анализ применения ИНС при обработке визуальных образов указывает на возможность выделения функциональности и эстетичности дизайна веб‑страниц. Показано, что разработка методологии построения универсального алгоритма оценки веб-дизайна является важной практической задачей, решение которой является значимым заданием для формирования междисцплинарных направлений фундаментальной науки. Базовая модель данного программного комплекса, должна включать в себя помимо нейросетевой архитектуры также вычислительные алгоритмы и исполнительные механизмы, построение которых основывается на экспертной оценке. При этом методы нейросетевого анализы могут базироваться на моделях автокодировщика, а также нейросети глубокого обучения типа многоярусный автокодировщик.
Литература:
- Lidwell, W., Butler, J., & Holden, K. (2010). Universal Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design. Place of publication not identified: Rockport.
- Duckett, J. (2011). HTML and CSS: Design and build websites. Indianopolis, IN: Wiley & Sons.
- Niederst, J. (2003). Learning Web design: A beginners guide to HTML, graphics, and beyond. Sebastopol, CA: OReilly.
- Gan J., Li L., Zhai Y. Deep self-taught learning for facial beauty prediction // Neurocomputing.
- Gray D., Yu K., Xu W., Gong Y. Predicting Facial Beauty without Landmarks // Computer Vision — ECCV 2010, Lecture Notes in Computer Science, 2010, V. 6316/2010. P. 434–447
- Eisenthal Y., Dror G., Ruppin E. Facial Attractiveness: Beauty and the Machine // Neural Computation, 2006. V. 18. № 1. P. 119–142.
- Григор'єв В.І. Методологія визначення естетичного ідеалу за допомогою нейромережевих алгоритмів // Науковий журнал «Молодий вчений», 2018. № 3 (55). С. 196–199.
- Suzuki, Y., & Ozaki, T. (2017). Stacked Denoising Autoencoder-Based Deep Collaborative Filtering Using the Change of Similarity. 2017 31st International Conference on Advanced Information Networking and Applications Workshops (WAINA).
- Budiman, A., Fanany, M. I., & Basaruddin, C. (2014). Stacked Denoising Autoencoder for feature representation learning in pose-based action recognition. 2014 IEEE 3rd Global Conference on Consumer Electronics (GCCE).
- Liang, J., & Liu, R. (2015). Stacked denoising autoencoder and dropout together to prevent overfitting in deep neural network. 2015 8th International Congress on Image and Signal Processing (CISP).
