CC BY
16ТЕХНИЧЕСКИЕ НАУКИ
ОПТИМИЗАЦИЯ ПАЛИТРЫ ВЕБ-ИНТЕРФЕЙСА НА ОСНОВЕ АНАЛИЗА СОДЕРЖИМОГО САЙТА Сакулин С.А.1, Романова Т.А.2
1Сакулин Сергей Александрович - кандидат технических
наук, доцент;
2Романова Татьяна Алексеевна - магистрант, кафедра информационных систем и телекоммуникаций, Московский государственный технический университет
им. Н.Э. Баумана, г. Москва
Аннотация: в статье рассматривается метод оптимизации веб-интерфейсов на основе содержимого с использованием нейронных сетей и созданием собственного набора данных для обучения.
Ключевые слова: веб-интерфейс, палитра, оптимизация.
Коли е ство веб-страниц растет и каждая из них борется за внимание пользователя. Положительное восприятие сайта во многом зависит от цветового решения. Для того т обы оценить важность цветов, можно взглянуть на исследование, результаты которого показывают, то цветовая привлекательность веб-интерфейса является важным фактором, определяющим доверие и удовлетворенность сайтом [1]. Плохо подобранная палитра может являться при иной малой аудитории ресурса.
Решением данной проблемы может являться оптимизация палитры веб-интерфейса таким образом, то бы она соответствовала содержимому сайта. На данный момент нет единой системы выбора цветов. Для подбора палитры широко используют цветовые круги, описанные Иоганнесом Иттеном [2]. Проблема этого метода заклю ается в том, то не у и тывается содержимое сайта. Для решения проблемы необходимо связать тематику сайта, а именно основные слова на странице и цветовую палитру. Были предложены методы, способные связать одно слово в ка е стве входных
4
данных и только один цвет [3]. Набор данных Монро [5] был основан на мнении пользователей, текст соответствует одному цвету. В другом исследовании пытались связать одно слово с многоцветной палитрой [4]. Также были исследования направленные на то, то бы исходя из входного текста окрашивать изображения, промежуто ным этапом являлась сгенерированная палитра [9].
В связи с тем, т о не существует сервиса, способного обеспе и ть оптимизацию палитры на основе анализа содержимого представляется актуальным вопрос разработки собственного метода. Одним из подходов к реализации является модель с нейронной сетью. Мы обу и м нейронную сеть, рассматривая каждый сайт как совокупность слов и цветов в ка е стве исходных данных.
Основой данной работы является исследование [9]. Суть их работы заклю а лась в перекраске изображений на основе палитры, полу ен ной из текстовых входных данных. Мы используем их наработки в полу ен ии палитры из текста. Также нам необходимо собрать собственный набор данных, который позволит обу ать модель прогнозированию семанти е ски согласованных цветовых палитр с помощью текстовых входных данных. Наш набор данных будет вклю ать пары клю евы х слов и 5-цветных палитр.
Для полу ен ия палитры сайта было принято решение создавать скриншоты главных страниц и на их основе полу ать палитру. Самым известным сервисом для полу ен ия палитры из изображения является Adobe Color [18]. Таким образом можно полу и ть основную палитру веб-интерфейса из 5 цветов. Для оценки содержимого сайта можно воспользоваться анализом контента, есть множество сервисов предоставляющих такую возможность. Мы используем сервис PR-CY [19]. Он позволяет определять важность всех слов страницы. Таким образом можно выделить 10 клю ев ых слов.
В работе используется CGAN [8] (от англ. Conditional Generative Adversarial Nets - условные генеративные состязательные сети). Так как CGAN предоставляет
возможность полу и ть несколько цветовых палитр при одинаковых входных данных.
Нам необходимо обу и ть генератор G0 и дискриминатор D0 на собственном наборе данных. Любое слово может быть сопоставлено с множеством вероятных цветовых палитр. По мере того как текст становится длиннее, объем возможных подходящих палитр становится больше и разнообразнее. Чтобы надлежащим образом смоделировать мультимодальность, используется метод условного увели ен ия [6]. В исследовании [9] рекомендуют у и тывать потери Хьюбера [7] для увели ен ии разнообразия цветов в сгенерированных палитрах и выражение регуляризации дивергенции Кульбака-Лейблера [6].
Наша коне н ая целевая функция для дискриминатора (1) и генератора (2) соответственно:
Ч = ЕУ ^а С1 0 gD 0 (С, У)] + Ex~Pdata[lOg(l-Ö0(C-y))] (1)
£ G0 = Е Х~Р data [1 0 g ( 1-0 0 ( С,У))] + ¿Н^яОЫ + (2)
l^D^iV (Д ( /) ( /) ) | |iV ( 0,/ ) ) , ( )
где аt а - истинное распределение данных, с - средний вектор, у - цветовая палитра, у - цвет палитры, д — коэффициент сдвига, / - скрытые состояния, Яя и являются гиперпараметрами.
В создании набора данных приняли у астие студенты 1 -го курса магистратуры кафедры ИУ3 МГТУ им. Н.Э. Баумана. Набор данных был произведен вру ную, были отобраны более 500 сайтов в 9 категориях: искусство, бизнес, образование, развле ения, мода, природа, политика, наука, технологии. Он содержит пары клю евых слов и 5-цветных палитр.
В результате тестирования модели можно увидеть как могут выглядеть палитры при разных входных данных. На рисунке 1 приведены результаты.
Рис. 1. Результат работы модели
Также была произведена оценка мультимодальности и разнообразия созданных палитр, результаты приведены в таблице 1.
Таблица 1. Оценка мультимодальности и разнообразия
палитр
Модели Разнообразие Мультимодальность
Среднее значение Стандартное отклонение Среднее значение Стандартное отклонение
Наша модель 21.23 7.27 5.43 7.12
Heer and Stone [3] 34.94 13.62 0.0 0.0
Исходная палитра 31.50 20.85 - -
Мультимодальность озна ает, сколько разных цветовых палитр можно сопоставить с одним вводом текста. Разнообразие в палитре относится к тому, насколько разнообразны цвета, вклю енные в одну палитру. Чтобы измерить мультимодальность, мы вы исляем средние минимальные расстояния между цветами из разных палитр. Чтобы измерить разнообразие цветовой палитры, мы измеряем среднее попарное расстояние между пятью цветами в палитре.
Список литературы
1. Cyr Dianne, Head Milena, Larios Hector. Colour appeal in website design within and across cultures: A multimethod evaluation // International journal of human-computer studies, 2010. № 68. С. 1-21.
2. Itten J. The Art of Color: The Subjective Experience and Objective Rationale of Color. Wiley, 1974. 160 с.
3. Heer J., Stone M. Color naming models for color selection, image editing and palette design // Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 2012.
C. 1007-1016.
4. Murray N., Skaff S., Marchesotti L., Perronnin F. Toward automatic and flexible concept transfer // Computers & Graphics, 2012. № 36. С. 622-634.
5. Color Survey Results. [Электронный ресурс]. Режим доступа: https://blog.xkcd.com/2010/05/03/color-survey-results/ (дата обращения: 15.04.2020).
6. Zhang H., Xu T., Li H., Zhang S., HuangX., WangX., Metaxas
D. StackGAN: Text to photo-realistic image synthesis with stacked generative adversarial networks // Proceedings of the IEEE International Conference on Computer Vision, 2017.
7. Hastie T., Tibshirani R., Friedman. The Elements of Statistical Learning: Data Mining, Inference, and Prediction, 2009. 764 с.
8. Mirza M., Osindero S. Conditional Generative Adversarial Nets. [Электронный ресурс]. Режим доступа: https://arxiv.org/pdf/1411.1784.pdf (дата обращения: 17.04.2020).
9. Bahng H., Yoo S., Cho W, Wu Z., Ma X., Choo J. Coloring with Words: Guiding Image Colorization Through Text-based Palette Generation. [Электронный ресурс]. Режим доступа: https://arxiv.org/pdf/1804.04128.pdf/ (дата обращения: 17.04.2020).
10. Adobe Color. [Электронный ресурс]. Режим доступа: https://color.adobe.com/ (дата обращения: 01.05.2020).
11. PR-CY. [Электронный ресурс]. Режим доступа: https://a.pr-cy.ru/ (дата обращения: 01.05.2020).
