Полностью автоматическое перепроектирование простых сайтов
Заглядываем в ближайшее будущее на примерах технологий из настоящего.
Часть 1: Ожидания. Какие предпосылки и проблемы у нас есть
Мир меняется, а вслед за ним должны меняться и сайты. Так что время от времени мы сталкиваемся с необходимостью внести в свои сайты косметические и технологические изменения, чтобы они “шли в ногу со временем”.
Как правило, у нас есть целый список базовых “правок”: например, мы хотим поиграться с типографикой, цветовой схемой, а также избавиться от анимации во Flash, которая блокируется современными браузерами, и полностью перейти на HTML5.
В мире насчитывается более 1 миллиарда сайтов. Многие из них так и остались в 2000-х. Что если мы заведем ИИ-помощника, который будет по команде быстро внедрять изменения на устаревший сайт?
Даже если вы непосредственно связаны с созданием сайтов, либо умеете делать всё самостоятельно (ну или знаете кого-то, кто может помочь), тренды в сфере верстки и оформления информации склонны меняться каждые несколько лет. И наш робот поможет сэкономить ваше время, а заодно даст возможность сконцентрироваться на более важных и творческих аспектах переоформления сайта.
А если, как и большинство владельцев сайтов в наше время, вы просто завели посадочную страницу или официальный ресурс небольшой компании, такая умная автоматизация позволит быстро устранить типовые проблем “возрастного” сайта, не влезая в дебри технологий.
Современный уровень развития систем искусственного интеллекта позволяет создать такого робота-помощника.
Генеративные алгоритмы, способные создавать многочисленные варианты дизайна за считанные минуты, уже применяются в широком спектре продуктов, начиная от программ САПР для инженеров и заканчивая генераторами логотипов для малого бизнеса. Машинное зрение достигло того уровня развития, чтобы работать со сложными объектами. Наконец, технологии машинного обучения и искусственные нейронные сети уже доказывали свою эффективность и полезность во многих сферах дизайна.
Каким образом мы можем автоматизировать процесс подобной перестройки сайтов?
Например, вот так:
1. Для современной веб-страницы важны быстрая загрузка, адаптация под разные экраны и верстка в HTML5/CSS3. И есть простой и надежный способ соблюсти эти условия: мы можем вычленить структурное ядро и уникальный контент со старой версии страницы и экспортировать эту информацию в новую и современную кодовую оболочку.
2. Генеративный дизайн. Контент — самое главное, что есть на сайте. Задача машины — сверстать такое оформление страницы, чтобы подчеркнуть это самое важное. Алгоритм поможет нам быстро получить набор вариантов на выбор. А от нас требуется:
- задать машине базовые критерии (например, номер телефона хорошо бы перетаскивать в шапку и активировать звонок по клику),
- показать примеры хорошо и плохо оформленных сайтов,
- и дать ей немного творческой свободы, чтобы она по-разному составляла и оформляла тексты, медиа-файлы и другие типы контента.
3. Остаётся выбрать и показать заказчику, как может выглядеть самый выигрышный вариант оформления новой версии его сайта. Сделать такой выбор может имитация «типичного пользователя интернета» — если мы говорим о сайтах-визитках малого бизнеса, то посетители таких сайтов представляют «широкие слои интернет-аудитории».
Итак, один из первостепенных вопросов — наличие актуальной технологической и кодовой базы. Платформы вроде конструкторов сайтов хорошо подойдут для нашей цели.
Как правило, конструкторы позиционируются как «инструменты для создания сногсшибательного сайта с нуля». Но на деле, ничто не возникает ниоткуда. Что-то же должно послужить нам источником контента. И существующие веб-страницы тоже подойдут!
Собственно, такие инструменты как Pagevamp или uKit Alt уже предлагают «превратить вашу страничку в социальной сети в веб-сайт».
При этом страница в Facebook служит источником контента, а конструктор дает ту самую новую оболочку: чтобы автоматизировать процесс, достаточно перекинуть контент по API соцсети.
Часть 2: Реальность — что у нас есть
Если с Facebook все более-менее понятно, ведь у вас есть ограниченный набор заранее размеченных типов структур и контента, то объем и виды информации, которую мы получим с определенного сайта, могут меняться. Вот почему нам нужны умные алгоритмы. Однако основная идея остается прежней: получить контент, переверстать его и показать результат на новой платформе.
Мы определили 3 этапа, и в настоящее время у нас есть прототипы систем, которые последовательно закрывают каждый этап. В ближайшее время они будут объединены в один онлайн-сервис под названием uKit AI 1.0.
Машинное зрение для распознавания старой версии + парсер для переноса в новую оболочку
По ходу того, как развивались наши технологии и инструменты веб-дизайна, менялись и способы создания одних и тех же элементов страницы. Ради эксперимента: возьмите и проанализируйте несколько сайтов, которые были созданы в разные периоды, и вы наверняка заметите, что одинаковые по логике элементы на них реализованы очень по-разному.
Человек за секунду поймет, что элементы и их назначение одинаковы. А вот машину нужно обучить как распознаванию страниц и объектов на ней, так и нахождению и чтению информации об этих объектах в коде.
Состояние: закрытое тестирование. Наша система выполняет часть работы, которую регулярно проделывают фрилансеры, берущие заказы на пересборку сайтов. В настоящее время наш робот помогает им экономить время путем загрузки контента на новую платформу: конструктор сайтов uKit. Эти тесты помогают нам улучшить навыки машины, получая живую обратную связь от опытных людей :)
Генеративный алгоритм: создание различных версий страницы на основе контента с исходной версии
Многие владельцы сайтов теряют клиентов по банальным причинам: если навигация перегружена, длинные тексты плохо отформатированы, или поиск ключевой информации затруднен по другим причинам, нам проще перейти на сайт другой компании. При этом малый бизнес выходит в онлайн, чтобы получить клиента.
Алгоритм позволяет ускорить процесс переделки сайта: как только контент загружен в новую оболочку, машина может начать работу над поиском структуры и оформления.
При этом она будет учитывать как критерии вроде распределения внимания (меню и первый экран должны легко считываться и содержать важную информацию), так и визуальную составляющую — например, сделает больший акцент на картинки, чем это было в прошлой версии.
Состояние: прототип.
Система анализа качества дизайна
На этом заключительном этапе мы создаем систему, которая будет проверять достижения машинного дизайна и обеспечит генеративному алгоритму обратную связь в режиме 24x7.
И что важно, такой фидбек нужен ещё до того, как владелец сайта увидит обновленный вариант.
Ведь новый вариант должен нравиться и посетителям, для чего мы можем смоделировать оценку страницы аудиторией. Это пригодится для выбора лучшего среди сгенерированных вариантов.
Такая модель уже есть: мы обучили машину оценивать страницы так, как это делают люди, на 10k сайтов из тестовой выборки, и выложили в виде отдельного сервиса WebScore AI.
Часть 3. Будущее: что дальше?
Пока мы дорабатываем каждую из систем, вы можете посмотреть, как они будут работать в сборке:
Надеемся, вы захотите протестировать проект после его запуска.
