Разработка системы генерации прототипов сайтов на основе нейронных сетей

На приведенном ниже графике есть четыре прогноза. Каждая строка - это одно предсказание. Слева находятся изображения, представленные в трех цветовых каналах: красном, зеленом и синем, а также предыдущие слова. Вне скобок поочередно выводятся прогнозы, заканчивающиеся красным квадратом, обозначающим конец.Рисунок – График с прогнозамиВ начальной версии helloworld мы используем три токена: «start», «HelloWorld!» и конец.Токеном может быть что угодно. Это может быть символ, слово или предложение. Версии символов требуют меньшего словарного запаса, но ограничивают нейронную сеть. Жетоны уровня Word, как правило, работают лучше всего. В данном случае потребуется сделать прогноз и посмотреть на выходные данные.Перед сбором данных создайте первую рабочую версию. Чтобы случайно не проигнорировать огромную рабочую нагрузку, которая потребовалась бы для сокращения словарного запаса размером 100 КБ.Работа с данными объемом в терабайт требует хорошего оборудования или большого терпения. Для этого лучше всего остановиться на мощном удаленном сервере. Ожидайте арендовать установку с 8 современными ядрами ЦП и подключением к Интернету 1GPS, чтобы иметь достойный рабочий процесс.Требуется понять входные и выходные данные. Вход X - это один снимок экрана и предыдущие теги разметки. Выходные данные Y - это следующий тег разметки. Чтобы стало проще понимать их связи и экспериментировать с разными архитектурами.Сети преобразования изображения в код - это замаскированные модели подписей к изображениям. Мы так же можем расширить компоненты нашего проекта, чтобы он выглядел следующим образомРисунок – Расширенный проектЕсть два основных раздела. Во-первых, кодировщик. Здесь мы создаем функции изображения и предыдущие функции разметки. Функции - это строительные блоки, которые сеть создает для соединения макетов дизайна с разметкой. В конце кодировщика мы приклеиваем элементы изображения к каждому слову в предыдущей разметке.Затем декодер использует объединенную функцию дизайна и разметки и создает следующую функцию тега. Эта функция запускается через полностью подключенную нейронную сеть для прогнозирования следующего тега.Поскольку нам нужно вставлять по одному снимку экрана для каждого слова, это становится узким местом при обучении сети. Вместо использования изображений мы извлекаем информацию, необходимую для создания разметки.Информация закодирована в функции изображения. Это делается с помощью уже предварительно обученной сверточной нейронной сети (CNN). Однако, для этого требуется предварительно обучить нашу модель.Требуется извлечь объекты из слоя перед окончательной классификацией.Что бы в итоге получить множество изображений, размером восемь на восемь пикселей, известных как функции. Хотя их трудно понять для нас, нейронная сеть может извлекать объекты и положение элементов из этих функций.Хоть и в изначальной версии можно использовать горячую кодировку для представления разметки. В этой версии можно использовать встраивание слов для ввода и сохранить горячую кодировку для вывода.То, как мы структурируем каждое предложение, остается прежним, но то, как мы сопоставляем каждый токен, меняется. При однократном кодировании каждое слово рассматривается как отдельная единица. Вместо этого мы преобразуем каждое слово во входных данных в списки цифр. Они представляют отношения между тегами разметки.Размер этого вложения слов равен восьми, но часто варьируется от 50 до 500 в зависимости от размера словарного запаса.Восемь цифр для каждого слова - это веса, похожие на обычную нейронную сеть. Они настроены так, чтобы отображать, как слова соотносятся друг с другом.Таким образом мы начнем разрабатывать функци разметки. Особенности - это то, что развивает нейронная сеть, чтобы связать входные данные с выходными данными. А пока не беспокойтесь о том, что они из себя представляют, мы углубимся в это в следующем разделе.Параллельно готовим изображения. Мы берем все функции мини-изображения и преобразуем их в один длинный список. Информация не изменена, просто реорганизована.Опять же, чтобы смешивать сигналы и извлекать понятия более высокого уровня, мы применяем плотный слой. Поскольку мы имеем дело только с одним входным значением, мы можем использовать обычный плотный слой. Чтобы связать функции изображения с функциями разметки, мы копируем функции изображения.В этом случае у нас есть три функции разметки. Таким образом, мы получаем равное количество функций изображения и функций разметки.После того как все предложения дополнены, чтобы создать три функции разметки. Поскольку мы подготовили функции изображения, теперь мы можем добавить по одной функции изображения для каждой функции разметки.После прикрепления одной функции изображения к каждой функции разметки мы получаем три функции разметки изображений. Это ввод, который мы должны будем ввести в декодер.Здесь мы используем комбинированные функции разметки изображений, чтобы предсказать следующий тег.Рисунок - ДекодерПлотный слой работает как традиционная нейронная сеть с прямой связью. Он связывает 512 цифр в следующей функции тега с 4 окончательными прогнозами. Допустим, в нашем словаре 4 слова: начало, привет, мир и конец.Прогноз словарного запаса может быть [0,1, 0,1, 0,1, 0,7]. Активация softmax в плотном слое распределяет вероятность от 0 до 1, при этом сумма всех прогнозов равна 1. В этом случае она предсказывает, что 4-е слово является следующим тегом. Затем вы переводите горячую кодировку [0, 0, 0, 1] в отображаемое значение, скажем, «конец».LSTM намного тяжелее по сравнению с CNN. Кроме того, сосредоточьтесь на функциях ввода и вывода, прежде чем пытаться понять, как они работают.Создать словарный запас с нуля намного проще, чем сузить огромный словарный запас. Это включает в себя все, от шрифтов, размеров div, шестнадцатеричных цветов до имен переменных и обычных слов.Большинство библиотек созданы для анализа текстовых документов, а не кода. В документах все разделено пробелом, но в коде вам нужен собственный синтаксический анализ.Вы можете извлекать элементы с помощью обученной модели. Например, можно использовать Imagenet, хоть в ней и мало веб-изображений. Однако потери на 30% выше по сравнению с моделью pix2code, которая обучается с нуля. Было бы интересно использовать модель с предварительным обучением на основе веб-снимков экрана.В финальной версии эффективнее всего использовать набор данных сгенерированных загрузочных веб-сайтов из документа pix2code. Используя бутстрап, что бы комбинировать HTML и CSS и уменьшать размер словаря.Мы позволим ему генерировать разметку для снимка экрана, который он раньше не видел. Мы также рассмотрим, как он формирует знания о снимке экрана и разметке.Вместо того, чтобы обучать его разметке начальной загрузки, мы будем использовать 17 упрощенных токенов, которые затем переведем в HTML и CSS.Настраивая модель в документе pix2code, модель может предсказывать веб-компоненты с высокой точностью.Извлечение функций из предварительно обученных моделей хорошо работает в моделях с субтитрами к изображениям. Но после нескольких экспериментов я понял, что сквозной подход pix2code лучше подходит для решения этой проблемы. Предварительно обученные модели не были обучены на веб-данных и настроены для классификации.В этой модели мы заменяем предварительно обученные функции изображения легкой сверточной нейронной сетью. Вместо того, чтобы использовать max-pooling для увеличения плотности информации, мы увеличиваем шаги. При этом сохраняется положение и цвет элементов интерфейса.Рисунок – Комплексный подходЕсть две основные модели, которые позволяют это сделать: сверточные нейронные сети (CNN) и рекуррентные нейронные сети (RNN). Наиболее распространенная рекуррентная нейронная сеть - это долговременная память (LSTM), поэтому мы будем обращаться именно к ней.Одна из самых сложных вещей для понимания LSTM - это временные интервалы. Обычную нейронную сеть можно представить как два временных шага. Если вы ответите «Привет», он предсказывает «Мир». Но было бы сложно предсказать больше временных шагов. В приведенном ниже примере ввод имеет четыре временных шага, по одному для каждого слова.LSTM предназначены для ввода с временными шагами. Это нейронная сеть, настроенная для получения информации по порядку. Если развернуть нашу модель, это выглядит так. Для каждого шага вниз вы сохраняете одинаковый вес. Вы применяете один набор весов к предыдущему выходу, а другой - к новому входу.Взвешенный ввод и вывод объединяются и складываются вместе с активацией. Это результат для этого временного шага. Поскольку мы повторно используем веса, они извлекают информацию из нескольких входных данных и формируют знания о последовательности.Ниже представлена упрощенная версия процесса для каждого временного шага в LSTM.Рисунок - Упрощенная версия процесса для каждого временного шага в LSTMКоличество единиц в каждом слое LSTM определяет его способность запоминать. Это также соответствует размеру каждого выходного объекта. Опять же, функция - это длинный список номеров, используемых для передачи информации между слоями.Каждый модуль на уровне LSTM учится отслеживать различные аспекты синтаксиса. Ниже представлена ​​визуализация модуля, отслеживающего информацию в строке div. Это упрощенная разметка, которую мы планируем использовать для обучения модели начальной загрузки.Рисунок - Упрощенная разметкаКаждый модуль LSTM поддерживает состояние ячейки. Думайте о состоянии клетки как о памяти. Веса и активации используются для изменения состояния по-разному. Это позволяет слоям LSTM точно настраивать, какую информацию сохранять и отбрасывать для каждого входа.Помимо прохождения функции вывода для каждого входа, он также пересылает состояния ячеек, по одному значению для каждой единицы в LSTM.Сложно найти способ измерить точность. Скажем, вы сравниваете слово в слово. Если ваш прогноз на одно слово не синхронизирован, у вас может быть 0% точности. Если вы удалите одно слово, которое синхронизирует предсказание, вы можете получить 99/100.Лучше всего использовать оценку BLEU, лучшую практику в моделях машинного перевода и субтитров к изображениям. Он разбивает предложение на четыре n-граммы, состоящие из 1–4 последовательностей слов.Например, в приведенном ниже предсказании «кот» должен быть «кодом».Рисунок – Пример тестированияЧтобы получить окончательную оценку, вы умножаете каждую оценку на 25%, (4/5) * 0,25 + (2/4) * 0,25 + (1/3) * 0,25 + (0/2) * 0,25 = 0,2 + 0,125 + 0,083 + 0 = 0,408. Затем сумма умножается на штраф за длину предложения. Поскольку длина в нашем примере правильная, она становится нашим окончательным результатом.Вы можете увеличить количество граммов, чтобы усложнить задачу. Модель с четырьмя н-граммами - это модель, которая лучше всего соответствует человеческим переводам.Поймите слабые места моделей вместо тестирования случайных моделей. Посмотрите на тестовые данные и убедитесь что они могут предсказать цвет и положение с высокой точностью.Используйте предварительно обученные модели, только если они актуальны. Предварительно обученная модель изображения улучшит производительность. Сквозная модель медленнее обучается и требует больше памяти, но является точнее.Планируйте небольшое отклонение при запуске модели на удаленном сервере.Убедитесь, что вы понимаете функции библиотеки. Включите в свой словарь место для пустого токена.Для экспериментов используйте более легкие модели.4.Эксплуатация4.1Инструкция по эксплуатацииСозданный нами интерфейс веб-сайта можно открывать и использовать, достаточно просто редактировать, либо загружать на сайт в качестве информационной страницы.Планируется разработка на базе алгоритма pix2code нейронной сети, которая способна создавать готовые сайты по картинке. Для этого требуется загружать скриншоты с конкретными HTML-тегами. Что бы получилась база с данными, которая позволит по текущим шаблонам создавать новые сайты.Планируется что сеть будет постоянно обучаться и, соответственно, результат улучшаться.Можно будет запускать систему, загружать изображения в нейронную сеть и смотреть на получившийся вывод – веб-сайт.4.2Описание процесса установки системыРабота системы планируется в три этапа:1) Давать дизайнерское изображение обученной нейронной сети2) Нейронная сеть конвертирует изображение в разметку HTML3) Рендеринг выводаНаписание кода планируется на Python и Keras, фреймворке поверх TensorFlow.Для начала работы с системой со стороны разработчика рекомендуется познакомиться с Python, обратным распространением и сверточными нейронными сетями.Со стороны пользователя: загружать картинки в программу и смотреть на результат созданного web-сайта.Для просмотра интерфейса разработанного нами сайта требуется открыть HTML документ index.html4.3Рекомендации по внедрению разработкиСпросите любую команду по анализу данных о том, что их больше всего расстраивает, и общий ответ - это настройка среды и управление ею.Лучшее в области науки о данных и машинного обучения - это то, что инструменты, фреймворки и библиотеки полностью открыты. Хотя это хорошо для сообщества, обратная сторона медали - фрагментация. Разработчики и специалисты по обработке данных часто оказываются ошеломленными выбором инструментов. Добавление зависимостей, графических процессоров и высокопроизводительных процессоров и возможных конфликтов с каждой версией инструмента быстро превращается в кошмар конфигурации.Вопреки распространенному мнению, машинное обучение и искусственный интеллект - это не просто выбор и оптимизация самого сложного алгоритма. Интересно, что это требует всего 20 процентов общих усилий, необходимых для успешной реализации. Остальные 80% связаны с проектированием данных, подготовкой данных, предоставлением инфраструктуры, управлением конфигурацией, управлением средой, управлением версиями артефактов, развертыванием модели и управлением жизненным циклом.Для успешной реализации проекта машинного обучения организации следует нанять инженеров по данным, специалистов DevOps, специалистов по данным и разработчиков. Их сотрудничество имеет решающее значение для долгосрочного успеха организации.Вопреки распространенному мнению, машинное обучение и искусственный интеллект - это не просто выбор и оптимизация самого сложного алгоритма.Не каждая компания может позволить себе инвестировать в эти команды. Может быть, всего пара специалистов по данным и традиционных разработчиков займется полным жизненным циклом моделей машинного обучения. Новое поколение предложений ML точно устраняет этот пробел, предоставляя предварительно сконфигурированные и настраиваемые среды, автоматизированное обучение моделей и масштабируемый хостинг моделей. Они позволяют команде сосредоточиться на основной бизнес-проблеме вместо того, чтобы теряться в бесчисленном множестве инструментов и фреймворков.4.4Экономическая эффективность разрабатываемого продуктаНезависимо от того, работает ли ваш бизнес оффлайн или онлайн, в современном цифровом мире очень важно создавать и поддерживать веб-сайт. В среднем первоначальная стоимость сайта, включая запуск и проектирование, составляет от 12 000 до 150 000 долларов США , в то время как текущее обслуживание веб-сайта колеблется от 35 до 5000 долларов США в месяц или от 400 до 60 000 долларов США в год.Бизнес-сайт может стоить сотни тысяч долларов.Например, стоимость веб-дизайна для бизнес-сайтов составляет от 2000 до 75 000 долларов, а годовое обслуживание веб-сайта может стоить от 400 до 60 000 долларов. Однако эти цены зависят от размера и характеристик вашего сайта. В зависимости от вашего веб-сайта вы можете заплатить меньше или больше.Независимо от того, хотите ли вы запустить новый веб-сайт или изменить дизайн существующего, вашему бизнесу необходимо учитывать некоторые затраты на веб-дизайн и разработку. Эти затраты часто являются единовременными, то есть запуск веб-сайта обходится дороже, чем его обслуживание.Конечно, с веб-дизайном и разработкой вы можете выбрать работу с фрилансером, сторонним разработчиком веб-сайтов или агентством веб-дизайна. У каждого есть свои преимущества и недостатки, а также разные цены. В большинстве случаев компании будут сотрудничать либо с внештатным веб-дизайнером, либо с агентством веб-дизайна.Сторонний конструктор веб-сайтов, такой как Wix или Squarespace, по-прежнему требует опыта веб-дизайна. Несмотря на то, что эти платформы могут помочь вашей команде создать привлекательный веб-сайт, они не обеспечивают удобный для пользователя сайт, что очень важно, если вы хотите, чтобы люди покупали ваш продукт или связывались с вашей компанией.Наша система требует единовременного вложения на разработку системы генерации, именно поэтому разрабатываемая система поможет компании ООО «Новософт» сохранить денежные средства, повысить эффективность и скорость разрабатываемых сайтов при помощи системы генерации прототипов сайтов на основе нейронных сетей.ЗаключениеFront-end разработка - идеальное место для применения глубокого обучения. Генерировать данные легко, и современные алгоритмы глубокого обучения могут отображать большую часть логики.Одна из самых интересных областей - это обращать внимание на LSTM. Это не только повысит точность, но и позволит нам визуализировать, на что CNN фокусируется при создании разметки.Внимание также является ключом к взаимодействию между разметкой, таблицами стилей, скриптами и, в конечном итоге, серверной частью. Уровни внимания могут отслеживать переменные, позволяя сети обмениваться данными между языками программирования.Но в ближайшем будущем наибольшее влияние окажет создание масштабируемого способа синтеза данных. Затем вы можете шаг за шагом добавлять шрифты, цвета, слова и анимацию.На данный момент наибольший прогресс наблюдается в создании эскизов и превращении их в шаблоны приложений. Менее чем через два года мы сможем нарисовать приложение на бумаге и иметь соответствующий интерфейс менее чем за секунду.В данной работе мы разработали шаблон сайта, представили проект системы, где можно запустить все модели, попробовать разные параметры, протестировать архитектуры CNN, добавить двунаправленные модели LSTM и реализовать модель с другим набором данных. Планируется разработка на базе алгоритма pix2code нейронной сети, которая способна создавать готовые сайты по картинке. Для этого требуется загружать скриншоты с конкретными HTML-тегами. Что бы получилась база с данными, которая позволит по текущим шаблонам создавать новые сайты.Планируется что сеть будет постоянно обучаться и, соответственно, результат улучшаться.Процесс создания сайта будет разбит на три этапа.Подобная система сократила бы время на разработку и реализацию большего количества работы по разработке web сервисов, что принесло бы больший доход предприятию.Только версия Bootstrap может обобщать новые макеты дизайна. Он использует 16 доменных токенов, которые переведены в HTML / CSS. Его точность составляет 97%. Лучшая модель планирует использовать GRU вместо LSTM. Эту версию можно обучить на нескольких графических процессорах. Необработанная версия HTML имеет потенциал для обобщения, но все еще не доказана и требует значительного количества графических процессоров для обучения. Текущая модель также обучается на однородном и небольшом наборе данных, поэтому трудно сказать, насколько хорошо она ведет себя на более сложных макетах.Цель работы достигнута, разработан проект приложения системы генерации прототипов сайтов. Работа выполнена в полном объеме.Решены следующие задачи: описаны виды нейронных сетей и их применение, дано понятие веб-сайта, дана характеристика предприятия ООО «Новософт», проанализированы системы генераторы сайтов, описаны требования к разрабатываемой системе, обоснован выбор проектного решения, дано техническое задание, разработан проект приложения, описана последующая эксплуатация, даны рекомендации по внедрению и экономическая эффективность разрабатываемого продукта.Список литературыБританский стандарт BS 6143:1992 "Руководство по качеству". Часть 1. МодельИИ (BS 6143:1990 "Guide to the tech of quality". Part 1. Process cost model.) - М.: НТК "Трек", 2016. - 28 с.Давид Марка, Клемент Мак Гоуэн. Методология программного анализа и проектирования. М.: Мета Технология, 2018. - 240 с.AIExpert. Руководство пользователя. Copyright. 2017. - 352 c.AI. "Stages of the development of International Standards". Archived from the original on 12 August 2017.Neural networks for win". NNsNet.com. 1 April 2018. Archived from the original on 4 April 2018."FAQs". Neural networks. Archived from the original on 5 October 2017."Web/ISO". International Organization for Standardization. Archived from the original on 15 December 2019.Андрейчиков А.В., Андрейчикова О.Н. Анализ, синтез, планирование решений в IT - М.: Программирование и статистика, 2020. - 368 с.Мирошников В.В. Аналитические информационные технологии // Методы ITразработчика. - 2018, №2, - С. 23-28Гупта Н.А. Обзор литературы по искусственному интеллекту. 2017. Доступно в Интернете: https://www.ijert.org/research/a-literature-survey-on-artificial-intelligence-IJERTCONV5IS19015.pdf (по состоянию на 7 января 2020 г.).Маккарти, Дж.; Минский, М.Л.; Рошестер, Н .; Шеннон, C.E. Предложение для Дартмутского летнего исследовательского проекта по искусственному интеллекту. AI Mag. 2018, 27, 12.Мур, А. Карнеги-Меллон о будущем искусственного интеллекта. Доступно в Интернете: https://www.forbes.com/sites/peterhigh/2017/10/30/carnegie-mellon-dean-of-computer-science-on the-future-of-ai/(доступ на 7 января 2020 г.).Беккер А.; БарР .; Гейгер, Д. Рандомизированные алгоритмы для задачи сечения цикла, 2020, 12, 219–234. Синджер А., Гент А.П., Смаил А., Хрупкость магистрали и пик затрат на локальный поиск. 2020, 12, 235–270. Чен, X ., Ван Бик, П., Повторный визит в обратный прыжок, направленный на конфликт. 2018, 14, 53–81. Хонг И., Паул Дж., Ви Ц., Распознавание целей посредством анализа графа целей, 2018, 15, 1–30. Стон П., Литман М.Л., Синх С., Кирнс, Адаптивный автономный агент, 2017, 15, 189–206. Шен И, Чжан X., Интегративный интеллектуальный анализ данных в системной биологии: от текста до сетевого интеллектуального анализа, 2017, 41, 83–86. Чжоу, X .,Лю, Б .,ВуЗ., Фэн, Ю. Интегративный анализ литературы по традиционной китайской медицине и MEDLINE для функциональных генных сетей, 2017, 41, 87–104.Ван С, Ван И., Ду В., Ви Ф., Ван, X ., Чжоу, C ., Лян, Ю., Генетический алгоритм, управляемый несколькими подходами, 2017, 41, 151–159.Холм В.Е., Искусственный интеллект почти здесь. Горизонт 2018, 11, 37–МасникосВ., Основная проблема реализации искусственного интеллекта. Kybernetes2018, 27, 71–80.Метасиос К., Ергаза К, Самуил Е., Псаррас, Дж. Поддержка принятия решений через управление знаниями: роль искусственного интеллекта, 2019, 11, 216–221.Рейнор У. Дж., Международный словарь искусственного интеллекта, 2020, 14, 1–380.СтефанюкВ.Л.,Жожи А., Продукции и правила в искусственном интеллекте. Kybernetes 2019, 31, с. 817–826. Тэй Д.П.Х.,Хо, Д.К.Х., Искусственный интеллект и массовая оценка жилых квартир,2017, 10, 525–540.ВонпунН.,Фергусон С, Боуэн, П., Экспериментальное исследование влияния систем искусственного интеллекта на обучение начинающих аудиторов, 2020, 15, 306–318.Оке С.А. Обзор литературы по искусственному интеллекту, 2018, 19, с. 535–570.Салим Х., Финджер Б., Обзор методов машинного обучения, применяемых для профилактического обслуживания, 2019, 1, 1–12.Марел В., Искусственный интеллект и устойчивость. ДоступновИнтернете: https://www.future customer.com/artificial-intelligence-and-sustainability/ (посостояниюна 8 января 2020 г.).ПриложениеЧасть кода разработанного интерфейса клиентской части сайта <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap" rel="stylesheet"> <link rel="stylesheet" href="fontawesome/css/all.min.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="slick/slick.min.css"> <link rel="stylesheet" href="slick/slick-theme.css"> <link rel="stylesheet" href="css/templatemo-upright.css">