什么是前端智能化

前端智能化就是AI在前端领域的一系列落地方案。目前比较知名的是阿里的imgcook，它给前端切图写UI代码提供了很大的提效。

但是目前AI在前端领域的探索还是很少的，更多的是未来的可能性。如何找到一系列好的结合方案，能够在前端研发流程中提高效率、规范流程、提高项目质量，或者给前端的产品提供更丰富的功能，这是更重要的。

juejin.cn/post/696640…

深度学习介绍

机器学习的过程可以理解为：通过大量的输入、输出样本，不断更新模型 $f(x, \theta ^ *)$ 的参数 $\theta$ ，使得模型的预测结果误差尽可能降低。

机器学习和深度学习的关系

机器学习

线性回归、逻辑回归、决策树、支持向量机、贝叶斯模型、正则化模型、模型集成、神经网络...

常见的机器学习方法有很多种，他们大多都是非线性模型，可以总结为以下的公式：

$f(x, \theta) = w^T \phi(x) + b$

传统的机器学习方法大多是依赖人工设计的算法，他们简单、可解释性强，在合适的场景下可以取得很好的效果。

但是在很多复杂任务中，人工设计的算法无法取得好的效果，存在较大的性能瓶颈。

神经网络

第 $l$ 层神经元的值可以按照下面的公式计算， $W$ 和 $b$ 分别为权重和偏置， $f$ 是****激活函数 用于增加非线性程度：

$z_l = W_l \cdot a_{l-1} + b_l$

$a_l = f_l(z_l)$

常见的激活函数是ReLU：

$ReLU(x) = \begin{cases} x & x \geq 0 \\ 0 & x < 0 \\ \end{cases}$

有严谨的证明：神经网络可以模拟出一切函数。

深度学习

深度学习基于人工神经网络算法。它是通过使用非常深的层数来获得非常高的非线性能力，几乎可以拟合出一切复杂函数。但是它有数亿级别的参数量，意味着它需要大量的样本学习来不断调整海量的参数，最后可以获得非常好的拟合效果。

损失函数

我们需要指定一个损失函数，用于判断模型预测结果与真实答案之间的差异程度。只有精确的描述出误差，神经网络才能知道他要变成什么形状。

我们的目标是：使得损失函数尽可能降低！

常见的损失函数有交叉熵损失、MSE损失等...

交叉熵损失：主要用于度量两个概率分布间的差异性信息。也就是衡量预测的概率分布与真实的概率分布之间的差异度。

参数优化算法 - 梯度下降法

有了损失函数，我们就知道了现在的神经网络参数还有多少的优化空间。

我们知道，曲面下降最快的方向是梯度方向，所以我们根据损失函数的梯度方向更新参数，在网络中反向传播。

但是我们的更新幅度需要不断衰减，否则我们可能会在最优解附近震荡。

常见的深度学习模型

CNN 卷积神经网络

与普通神经网络不同，卷积神经网络主要用于图像任务，其输入是三维（还有颜色RGB通道）的图片矩阵。

卷积

池化

RNN 循环神经网络

前馈神经网络中，信息的传递是单向的。但是生物神经网络中神经元之间的联系会更加复杂。RNN是一个有短期记忆能力的神经网络。

$h_t = f(h_{t - 1}, x_t)$

LSTM 基于门控的循环神经网络

LSTM可以控制信息的累积速度，包括有选择地加入新的信息，并有选择地遗忘之前累积的信息。

案例分析

Pix2Code：从设计图自动生成UI代码

Pix2Code这片论文可以将一张纯图片转换为前端/ 客户端 代码！

论文链接：arxiv.org/abs/1705.07…

Github：github.com/tonybeltram…

Youtube：youtu.be/pqKeXkhFA3I

(a)是预期生成的GUI，(b)是这个方法生成的GUI；同理图(c)、(d)

可以将UI原型图生成DSL（领域专用语言，可以理解为一种描述UI的结构化对象）
由DSL生成源码。这个是人工编程来转换

网络结构

该方法结合了CNN和LSTM两个模块。

整体架构图如下：

CNN擅长抽取图片特征，用于前部分理解输入设计稿的语义特征：有哪些UI元素、布局、样式等。

LSTM 、 RNN擅长学习文本和序列规律。

CNN网络用来理解输入GUI图像内容，学习设计稿图像特征；
一个LSTM网络（左）用来理解DSL上下文的基本规律，a单词token产生下一个b单词token的规律
1. 不包含和原型图的关系
2. token指一个词，比如switch、button等
另一个LSTM网络（右）用来理解DSL与原型图之间的关系，原型图x -> 输出上下文token c

数据集

数据集是由一张GUI图片以及一个DSL文本为一组，大约有1700组。

下面是一个数据对，图片为输入，DSL文本为预期输出。

输入	标签

`header { btn-inactive, btn-inactive, btn-inactive, btn-active, btn-inactive } row { single { small-title, text, btn-red } }`
UI图片，模型训练时的输入图	DSL代码，是模型训练时的GroudTruth，也就是预期的输出结果

在训练阶段，网络会同时将UI图片和DSL代码作为输入；
在推演阶段，网络仅需要输入一张你需要预测的图片。

训练阶段

首先将DSL文本进行预处理：

split拆分，获得一个token列表

将DSL中每一个词（包括,，\n ）进行拆分，得到一个Token数组；
Token数组由<START>开始，以<END>结束。

token_sequence = [START_TOKEN] # 以<START>开始

for line in gui:

    line = line.replace(",", " ,").replace("\n", " \n") # 把',' '\n'也作为token

    tokens = line.split(" ")

    for token in tokens:

        voc.append(token)

        token_sequence.append(token) # 收集TOKEN

token_sequence.append(END_TOKEN) # 以<END>结束
复制代码

['<START>', 'header', '{', '\n', 'btn-inactive', ..., '<END>']
复制代码

[1, 3, 2, 0, ....] # 转换为词库
复制代码

滑动取出48个token作为输入的context，而紧接着下一个token作为本次预测结果的真实标签GT（拿预测结果和真实标签对比，计算Loss）

为什么是48个：超参数，选太小了无法获取全局信息，无法关闭括号 TODO

从一个长度为N的Token数组，滑动依次取出48个Token，作为网络训练的单次Context输入。
在数组前Padding 48个空字符串，保证第一次输入是48个空字符串，第49个Token是<START>。

suffix = [PLACEHOLDER] * CONTEXT_LENGTH # 48个空格

a = np.concatenate([suffix, token_sequence]) # 保证token遍历到最后一个时，仍然能获取到48个token（前面47个都是空格），类似于padding



for j in range(0, len(a) - CONTEXT_LENGTH):

    context = a[j:j + CONTEXT_LENGTH] # context上下文，滑动取出48个token作为列表

    label = a[j + CONTEXT_LENGTH] # 下一个token，待预测标签
复制代码

网络训练

现在我们有一张图片I、48个token组成Xt，以及一个待预测的Token作为标签Yt。

网络一次推演的公式如下：

$\begin{aligned} p &= CNN(I) \\ q_t &= LSTM(x_t) \\ r_t &= (q_t, p) \\ y_t &= softmax(LSTM'(r_t)) \\ x_{t+1} &= y_t \end{aligned}$

softmax可以将一个向量转换为和为1的新向量，语义上来说，是输出对每个分类的概率值。

$softmax = \cfrac{e^{z_i}}{\sum_{c=1}^{C}{e^{z_c}}}$

首先

预测结果yt（是一个one-hot向量），表示预测为每个token的概率值。

与标签Yt计算交叉墒损失，衡量预测结果和正确结果之间的差异度，表示这次预测结果的好坏。

$L(I, X) = - \sum_{t=1}^{T}x_{t+1}\log(y_t)$

这个误差进行反向传播，更新模型参数，完成一次迭代。

加入上次的标签Yt，组成新的48个token（第一个出队），再使用新的token作为下一轮Yt，重复上面的训练过程，直到完成所有的token预测。
使用新的一对数据集。

Code生成阶段

根据上面训练模型Modal，首先输入48个空白token作为Xt、以及待预测的图片I，预测出第一个token。
将新预测的token入队到Xt，第一个token出队，模型预测下一个token。重复上述过程，直到预测出<END>为止。
将预测的token列表进行解码，生成DSL代码，最后翻译为GUI代码。

实验

在三个平台大约77%的准确率。

SketchCode

从手绘草图生成代码

代码：github.com/ashnkumar/s…

blog：blog.insightdatascience.com/automated-f…

原理上和Pix2Code没有什么大的区别，只是将数据集换成了手绘稿。

Sketch2Code

sketch2code.azurewebsites.net/

微软的版本，也是手绘稿转换为Code。

改进思路

www.zhihu.com/question/43…

写在最后

纯视觉方案 VS 非视觉方案

特斯拉：任何依赖激光雷达的人都注定失败

特斯拉 AI 部门高级主管 Andrej Karpathy 说的**「人类开车不是靠双眼发射激光」。**

作为一个对计算机视觉有粗浅了解的人，我当时并不看好特斯拉的纯视觉方案，觉得CV的发展瓶颈、以及安全性都是一个很大的问题，效果肯定没有雷达方案好。因为雷达方案能够立竿见影的提供精准的深度、距离信息。

zhuanlan.zhihu.com/p/30856685

但是特斯拉的自动驾驶表现狠狠地打了我的脸。后来我意识到视觉信息的语义更丰富、上限更高，比起只能单纯提供深度、距离信息的雷达方案来说，视觉方案的智能化程度会更高，它可以根据丰富的图片细节来做更复杂的决策。

雷达方案：立竿见影的深度、距离信息，但是能提供的信息仅此而已。
视觉方案：从图片中读取深度、距离信息相对难，但是视觉（光线）能承载的信息是其它载体不能比的，如果能够训练出一个足够好的模型，可以做到更好的效果。

智能生成前端代码也一样！

通过Sketch等软件虽然能直接提供准确的DSL，但是这种方案永远都不能智能化（不过这是短期内就能见效的最可靠方案）。

当看到一个设计稿的时候，相信我们不用找设计同学确认就知道：

那些地方是动态文案
哪些地方有交互
哪些地方是响应式的
哪些地方可以联动

这是因为我们大脑中有非常多的UI交互相关的先验知识。如果希望生成的代码能够理解上面的关系，就必须用到AI的语义理解能力。

不过现在的AI方案还是非常非常的原始不可用，这是因为研究的人还是太少了，研究进展也都在初级阶段，但是我相信会有AI让我们“失业”的那一天～

浅谈前端智能化

什么是前端智能化

深度学习介绍

机器学习和深度学习的关系

机器学习

神经网络

深度学习

损失函数

参数优化算法 - 梯度下降法

常见的深度学习模型

CNN 卷积神经网络

卷积

池化

RNN 循环神经网络

LSTM 基于门控的循环神经网络