请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
戴客 首页 科技资讯 人工智能 AI 查看内容

前端慌不慌?用深度学习自动生成HTML代码

北极蚊子 2018-1-12 17:39

如何用前端页面原型生成对应的代码一直是我们关注的问题,本文作者根据 pix2code 等论文构建了一个强大的前端代码生成模型,并详细解释了如何利用 LSTM 与 CNN 将设计原型编写为 HTML 和 CSS 网站。

项目链接:https://github.com/emilwallner/Screenshot-to-code-in-Keras

在未来三年内,深度学习将改变前端开发。它将会加快原型设计速度,拉低开发软件的门槛。

Tony Beltramelli 在去年发布了论文《pix2code: Generating Code from a Graphical User Interface Screenshot》,Airbnb 也发布了 Sketch2code(https://airbnb.design/sketching-interfaces/)。

目前,自动化前端开发的最大阻碍是计算能力。但我们已经可以使用目前的深度学习算法,以及合成训练数据来探索人工智能自动构建前端的方法。在本文中,作者将教神经网络学习基于一张图片和一个设计模板来编写一个 HTML 和 CSS 网站。以下是该过程的简要概述:

1)向训练过的神经网络输入一个设计图

2)神经网络将图片转化为 HTML 标记语言

3)渲染输出

我们将分三步从易到难构建三个不同的模型,首先,我们构建最简单地版本来掌握移动部件。第二个版本 HTML 专注于自动化所有步骤,并简要解释神经网络层。在最后一个版本 Bootstrap 中,我们将创建一个模型来思考和探索 LSTM 层。

代码地址:

  • https://github.com/emilwallner/Screenshot-to-code-in-Keras

  • https://www.floydhub.com/emilwallner/projects/picturetocode

所有 FloydHub notebook 都在 floydhub 目录中,本地 notebook 在 local 目录中。

本文中的模型构建基于 Beltramelli 的论文《pix2code: Generating Code from a Graphical User Interface Screenshot》和 Jason Brownlee 的图像描述生成教程,并使用 Python 和 Keras 完成。

核心逻辑

我们的目标是构建一个神经网络,能够生成与截图对应的 HTML/CSS 标记语言。

训练神经网络时,你先提供几个截图和对应的 HTML 代码。网络通过逐个预测所有匹配的 HTML 标记语言来学习。预测下一个标记语言的标签时,网络接收到截图和之前所有正确的标记。

这里是一个简单的训练数据示例:https://docs.google.com/spreadsheets/d/1xXwarcQZAHluorveZsACtXRdmNFbwGtN3WMNhcTdEyQ/edit?usp=sharing。

创建逐词预测的模型是现在最常用的方法,也是本教程使用的方法。

注意:每次预测时,神经网络接收的是同样的截图。也就是说如果网络需要预测 20 个单词,它就会得到 20 次同样的设计截图。现在,不用管神经网络的工作原理,只需要专注于神经网络的输入和输出。

我们先来看前面的标记(markup)。假如我们训练神经网络的目的是预测句子「I can code」。当网络接收「I」时,预测「can」。下一次时,网络接收「I can」,预测「code」。它接收所有之前单词,但只预测下一个单词。

神经网络根据数据创建特征。神经网络构建特征以连接输入数据和输出数据。它必须创建表征来理解每个截图的内容和它所需要预测的 HTML 语法,这些都是为预测下一个标记构建知识。把训练好的模型应用到真实世界中和模型训练过程差不多。

我们无需输入正确的 HTML 标记,网络会接收它目前生成的标记,然后预测下一个标记。预测从「起始标签」(start tag)开始,到「结束标签」(end tag)终止,或者达到最大限制时终止。

Hello World 版

现在让我们构建 Hello World 版实现。我们将馈送一张带有「Hello World!」字样的截屏到神经网络中,并训练它生成对应的标记语言。

首先,神经网络将原型设计转换为一组像素值。且每一个像素点有 RGB 三个通道,每个通道的值都在 0-255 之间。

为了以神经网络能理解的方式表征这些标记,我使用了 one-hot 编码。因此句子「I can code」可以映射为以下形式。

在上图中,我们的编码包含了开始和结束的标签。这些标签能为神经网络提供开始预测和结束预测的位置信息。以下是这些标签的各种组合以及对应 one-hot 编码的情况。

我们会使每个单词在每一轮训练中改变位置,因此这允许模型学习序列而不是记忆词的位置。在下图中有四个预测,每一行是一个预测。且左边代表 RGB 三色通道和之前的词,右边代表预测结果和红色的结束标签。

  1. #Length of longest sentence

  2. max_caption_len = 3

  3. #Size of vocabulary

  4. vocab_size = 3

  5. # Load one screenshot for each word and turn them into digits

  6. images = []

  7. forinrange(2):

  8. images.append(img_to_array(load_img('screenshot.jpg', target_size=(224224))))

  9. images = np.array(images, dtype=float)

  10. # Preprocess input for the VGG16 model

  11. images = preprocess_input(images)

  12. #Turn start tokens into one-hot encoding

  13. html_input = np.array(

  14. [[[0.0.0.], #start

  15. [0.0.0.],

  16. [1.0.0.]],

  17. [[0.0.0.], #start <HTML>Hello World!</HTML>

  18. [1.0.0.],

  19. [0.1.0.]]])

  20. #Turn next word into one-hot encoding

  21. next_words = np.array(

  22. [[0.1.0.], # <HTML>Hello World!</HTML>

  23. [0.0.1.]]) # end

  24. # Load the VGG16 model trained on imagenet and output the classification feature

  25. VGG = VGG16(weights='imagenet', include_top=True)

  26. # Extract the features from the image

  27. features = VGG.predict(images)

  28. #Load the feature to the network, apply a dense layer, and repeat the vector

  29. vgg_feature = Input(shape=(1000,))

  30. vgg_feature_dense = Dense(5)(vgg_feature)

  31. vgg_feature_repeat = RepeatVector(max_caption_len)(vgg_feature_dense)

  32. # Extract information from the input seqence

  33. language_input = Input(shape=(vocab_size, vocab_size))

  34. language_model = LSTM(5, return_sequences=True)(language_input)

  35. # Concatenate the information from the image and the input

  36. decoder = concatenate([vgg_feature_repeat, language_model])

  37. # Extract information from the concatenated output

  38. decoder = LSTM(5, return_sequences=False)(decoder)

  39. # Predict which word comes next

  40. decoder_output = Dense(vocab_size, activation='softmax')(decoder)

  41. # Compile and run the neural network

  42. model = Model(inputs=[vgg_feature, language_input], outputs=decoder_output)

  43. model.compile(loss='categorical_crossentropy', optimizer='rmsprop')

  44. # Train the neural network

  45. model.fit([features, html_input], next_words, batch_size=2, shuffle=False, epochs=1000)

在 Hello World 版本中,我们使用三个符号「start」、「Hello World」和「end」。字符级的模型要求更小的词汇表和受限的神经网络,而单词级的符号在这里可能有更好的性能。

以下是执行预测的代码:

  1. # Create an empty sentence and insert the start token

  2. sentence = np.zeros((133)) # [[0,0,0], [0,0,0], [0,0,0]]

  3. start_token = [1.0.0.# start

  4. sentence[0][2] = start_token # place start in empty sentence

  5. # Making the first prediction with the start token

  6. second_word = model.predict([np.array([features[1]]), sentence])

  7. # Put the second word in the sentence and make the final prediction

  8. sentence[0][1] = start_token

  9. sentence[0][2] = np.round(second_word)

  10. third_word = model.predict([np.array([features[1]]), sentence])

  11. 邀请
    文章点评