Microsoft научила ИИ программировать сайты по картинке от руки

Софт Интернет Веб-сервисы Облачные технологии
мобильная версия
, Текст: Дмитрий Степанов
Команда Microsoft Azure представила инструмент Sketch2Code, предназначенный для преобразования эскизов пользовательских интерфейсов в корректный HTML-код при помощи искусственного интеллекта. Сервис позволяет упростить процесс разработки веб-страниц, избавляя от необходимости вручную описывать их разметку.

Sketch2Code преобразует эскизы веб-страниц в HTML-код

Microsoft представила сервис Sketch2Code, который с помощью технологий искусственного интеллекта позволяет преобразовать набросок дизайна веб-сайта, выполненный от руки на доске или листе бумаги, в готовый «валидный» HTML-код (Hypertext markup language – «язык гипертекстовой разметки») – «каркас» любого сайта в интернете.

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

Как это работает

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

Затем модель компьютерного зрения пытается распознать, какие именно HTML-элементы изобразил пользователь и их координаты.

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

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

Архитектура решения Sketch2Code

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

Схема работы сервиса Sketch2Code

Вся информация, получаемая от пользователя или генерируемая системой в процессе конвертирования эскизов, в том числе изображения, результаты распознавания (предсказания) элементов и данные об их группировке хранятся в облаке Azure в виде так называемых BLOBов (Binary large object – «больших двоичных объектов»).

Оригинальный набросок дизайна и результат его обработки сервисом Sketch2Code

Azure Function выступает в роли дирижера, занимаясь координированием модулей системы генерации кода.

Microsoft прививает ИИ любовь к творчеству

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

Для работы системы была создана нейросеть, состоящая из двух частей: одна из них распознает изображение и генерирует стихотворение, а вторая оценивает его. Если с ее точки зрения результат хорош, стих показывают человеку, и он его проверяет. При необходимости параметры перенастраиваются до тех пор, пока итоговое произведение не будет одобрено. Таким образом бот постоянно самообучается и совершенствуется.