sketch-code превращает скетчи в HTML за считанные секунды

искусственный интеллект внешний интерфейс Sketch HTML

За последние два года искусственный интеллект изменил технологическую отрасль с невообразимой скоростью. Не так давно я наткнулся наОт эскиза до HTML за 5 секундСтатья заставляет меня почувствовать, что «использование искусственного интеллекта для автоматического создания веб-страниц» становится все более и более реалистичным. Сверточная нейронная сеть SketchCode, которая будет представлена ​​в этой статье, может напрямую преобразовывать эскизы дизайна графического пользовательского интерфейса веб-сайта в строки кода, разделяя часть процесса проектирования с разработчиками интерфейса. В настоящее время модель получила оценку BLEU 0,76 после обучения.

Ссылка на оригинальную статью:Глубокое обучение использует эскизы кода и рукописи для автоматического создания интерфейсных HTML-страниц.

Вот краткое введение в этот фреймворк, вы можете найти код этого проекта на GitHub:GitHub.com/А — это твой Кумар/ это…

这里写图片描述
Как показано выше, если есть рендеринг, нарисованный вручную, скетчкод может преобразовать его для создания HTML-кода или начальной загрузки. В проекте используется инфраструктура глубокого обучения keras, используется Python 3 и не поддерживаются другие версии python 2. Если вы хотите создать такую ​​инфраструктуру глубокого обучения, вам необходимо иметь поддержку системы macOS и Linux. Ниже приведена программная среда, необходимая для keras:

Keras==2.1.2
tensorflow==1.4.0
nltk==3.2.5
opencv-python==3.3.0.10
numpy==1.13.1
h5py==2.7.1
matplotlib==2.0.2
Pillow==4.3.0
tqdm==4.17.1
scipy==1.0.0

Затем перейдите непосредственно в корневой каталог проекта и используйте команду pip для установки.

pip install -r requirements.txt

Войдя в файл скриптов, вы найдете еще два файла.

这里写图片描述
Выполните эти две файловые команды для загрузки необходимых файлов данных и веса.

sh get_data.sh
sh get_pretrained_model.sh

Здесь используйте wget для загрузки необходимых пакетов. Размер файла составляет около 1 ГБ, что будет немного медленным. Рекомендуется открыть эти два файла напрямую. Скопируйте ссылку и используйте Thunder для загрузки и поместите его в указанную папку. каталог.

这里写图片描述
После загрузки и распаковки под файлом данных будет папка all_data, которая содержит некоторые модели данных рукописи для обучения. Введите файл примеров, там будут фотографии тестовой рукописи.
这里写图片描述
Откройте файл, чтобы найти следующее:
这里写图片描述

Для проверки сначала нарисуем картинку

这里写图片描述
Затем помещаем изображение в примеры для запуска программы, заходим в директорию src, после чего выполняем команду программы в терминале:

python convert_single_image.py --png_path ../examples/img002.png \
      --output_folder ./generated_html \
      --model_json_file ../bin/model_json.json \
      --model_weights_file ../bin/weights.h5

Затем терпеливо подождите, пока он отобразит интерфейсный код, примерно минуту или около того.

这里写图片描述
Чтобы все могли увидеть макет рукописи и макет сгенерированного кода, давайте сравним реализацию кода.

<style>
        div{
            border:1px solid black;
        }
    </style>

Сгенерированный код:

<html>
<header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <style>
.header{margin:20px 0}nav ul.nav-pills li{background-color:#333;border-radius:4px;margin-right:10px}.col-lg-3{width:24%;margin-right:1.333333%}.col-lg-6{width:49%;margin-right:2%}.col-lg-12,.col-lg-3,.col-lg-6{margin-bottom:20px;border-radius:6px;background-color:#f5f5f5;padding:20px}.row .col-lg-3:last-child,.row .col-lg-6:last-child{margin-right:0}footer{padding:20px 0;text-align:center;border-top:1px solid #bbb}
 
    </style>
    <title>Scaffold</title>
    <style>
        div{
            border:1px solid black;
        }
    </style>
</header>
<body>
<main class="container">
    <div class="header clearfix">
        <nav>
            <ul class="nav nav-pills pull-left">
                <li><a href="#">Rmjoyzs Sj</a></li>
                <li><a href="#">Dtve Erhaz</a></li>
                <li><a href="#">Rnwy Ytpdy</a></li>
 
            </ul>
        </nav>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <h4>Ghhbl</h4>
            <p>azsiooemicuwzfzihzwszwifivztb ejpb hcukgvayzsrmfd zfheqz</p>
            <a class="btn btn-warning" href="#" role="button">Eyzedji Ii</a>
 
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <h4>Cajql</h4>
            <p>sw f qpgtzfwyjo fkygfdozgtsmvxqcdgtakfusadoqhj zc ynpmuj</p>
            <a class="btn btn-warning" href="#" role="button">Vbcmla Awl</a>
 
        </div>
        <div class="col-lg-3">
            <h4>Dtgpz</h4>
            <p>qtim b baoi ifbohotcxhvyonys hffqjjnip hrl nymsqiawxoou</p>
            <a class="btn btn-warning" href="#" role="button">Gypkcdc Cu</a>
 
        </div>
        <div class="col-lg-3">
            <h4>Pfdib</h4>
            <p>met mlu fexp gwty afd qvwislevvmx afymfoytwytucytqpj vma</p>
            <a class="btn btn-warning" href="#" role="button">Rtro Omwgb</a>
 
        </div>
        <div class="col-lg-3">
            <h4>Dofwm</h4>
            <p>ipaobcqhuzmtj rw uqlmohukgqfhenp zxgnrjt vgh psgabonmhfn</p>
            <a class="btn btn-warning" href="#" role="button">Dssgiz Zqg</a>
 
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <h4>Vyilr</h4>
            <p>ztrcrpzxrdqvq ex k dsckj rvwc woshsyvbnydkkk rvsv rsgvlt</p>
            <a class="btn btn-warning" href="#" role="button">Evlk Kfglm</a>
 
        </div>
        <div class="col-lg-6">
            <h4>Rdewa</h4>
            <p>ycbtmxmnmt z yqdnclxfektreixx m j ckgyagaqwnkf os nfzfoa</p>
            <a class="btn btn-warning" href="#" role="button">Rkcbs Serv</a>
 
        </div>
    </div>
 
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

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

  1. Так как эта модель сделана только с 16 обученный на словаре элементов, он не может предсказать токены вне обучающих данных. Следующим шагом может быть создание других образцов веб-сайтов с большим количеством элементов, таких как изображения, раскрывающиеся списки и формы. Компоненты Bootstrap — отличный сайт для практики:индивидуальный bootstrap.com/docs/4.0/co…
  2. В реальной производственной среде веб-сайт претерпевает множество изменений. Хороший способ создать обучающий набор данных, который лучше отражает это изменение, — это просканировать реальные веб-сайты, зафиксировав их HTML/CSS-код, а также скриншоты содержимого веб-сайта.
  3. Существует также множество вариаций набросков, нарисованных от руки, и модели не полностью усваивают методы модификации CSS. Отличный способ создать больше вариаций нарисованных от руки эскизов — использовать генеративные состязательные сети для создания реалистично нарисованных изображений веб-сайтов.
Категории