机器学习的过程可以理解为：通过大量的输入、输出样本，不断更新模型f(x,θ∗)f(x, \theta ^ *)f(x,θ∗)的参数θ\thetaθ，使得模型的预测结果误差尽可能降低。
机器学习和深度学习的关系
机器学习
线性回归、逻辑回归、决策树、支持向量机、贝叶斯模型、正则化模型、模型集成、神经网络...
常见的机器学习方法有很多种，他们大多都是非线性模型，可以总结为以下的公式：
f(x,θ)=wTϕ(x)+bf(x, \theta) = w^T \phi(x) + bf(x,θ)=wTϕ(x)+b
传统的机器学习方法大多是依赖人工设计的算法，他们简单、可解释性强，在合适的场景下可以取得很好的效果。
但是在很多复杂任务中，人工设计的算法无法取得好的效果，存在较大的性能瓶颈。
神经网络
第lll层神经元的值可以按照下面的公式计算，WWW和bbb分别为权重和偏置， fff 是**激活函数 用于增加非线性程度：
zl=Wl⋅al−1+blz_l = Wl \cdot a{l-1} + b_lzl=Wl⋅al−1+bl
al=fl(zl)a_l = f_l(z_l)al=fl(zl)
常见的激活函数是ReLU：
ReLU(x)={xx≥00x<0ReLU(x) =
ReLU(x)={x0x≥0x<0
有严谨的证明：神经网络可以模拟出一切函数。
深度学习
深度学习基于人工神经网络算法。它是通过使用非常深的层数来获得非常高的非线性能力，几乎可以拟合出一切复杂函数。但是它有数亿级别的参数量，意味着它需要大量的样本学习来不断调整海量的参数，最后可以获得非常好的拟合效果。
损失函数
我们需要指定一个损失函数，用于判断 模型预测结果 与 真实答案 之间的差异程度。只有精确的描述出误差，神经网络才能知道他要变成什么形状。
我们的目标是：使得损失函数尽可能降低！
常见的损失函数有交叉熵损失、MSE损失等...
交叉熵损失：主要用于度量两个概率分布间的差异性信息。也就是衡量预测的概率分布与真实的概率分布之间的差异度。
参数优化算法 - 梯度下降法
有了损失函数，我们就知道了现在的神经网络参数还有多少的优化空间。
我们知道，曲面下降最快的方向是梯度方向，所以我们根据损失函数的梯度方向更新参数，在网络中反向传播。
但是我们的更新幅度需要不断衰减，否则我们可能会在最优解附近震荡。
常见的深度学习模型
CNN 卷积神经网络
与普通神经网络不同，卷积神经网络主要用于图像任务，其输入是三维（还有颜色RGB通道）的图片矩阵。
卷积
池化
RNN 循环神经网络
前馈神经网络中，信息的传递是单向的。但是生物神经网络中神经元之间的联系会更加复杂。RNN是一个有短期记忆能力的神经网络。
ht=f(ht−1,xt)ht = f(h{t - 1}, x_t)ht=f(ht−1,xt)
LSTM 基于门控的循环神经网络
LSTM可以控制信息的累积速度，包括有选择地加入新的信息，并有选择地遗忘之前累积的信息。
案例分析
Pix2Code：从设计图自动生成UI代码
Pix2Code这片论文可以将一张纯图片转换为前端/ 客户端 代码！
论文链接：arxiv.org/abs/1705.07…[2]
Github：github.com/tonybeltram…[3]
Youtube：youtu.be/pqKeXkhFA3I[4]
(a)是预期生成的GUI，(b)是这个方法生成的GUI；同理图(c)、(d)
可以将UI原型图生成DSL（领域专用语言，可以理解为一种描述UI的结构化对象）
由DSL生成源码。这个是人工编程来转换
网络结构
该方法结合了CNN和LSTM两个模块。
整体架构图如下：
CNN擅长抽取图片特征，用于前部分理解输入设计稿的语义特征：有哪些UI元素、布局、样式等。
LSTM 、 RNN擅长学习文本和序列规律。
CNN网络用来理解输入GUI图像内容，学习设计稿图像特征；
一个LSTM网络（左）用来理解DSL上下文的基本规律，a单词token产生下一个b单词token的规律
不包含和原型图的关系
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数组由开始，以结束。
token_sequence = [START_TOKEN] # 以开始
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) # 以结束
复制代码
['', 'header', '{', '\n', 'btn-inactive', ..., '']
复制代码
[1, 3, 2, 0, ....] # 转换为词库
复制代码
滑动取出48个token作为输入的context，而紧接着下一个token作为本次预测结果的真实标签GT（拿预测结果和真实标签对比，计算Loss）
为什么是48个：超参数，选太小了无法获取全局信息，无法关闭括号 TODO
从一个长度为N的Token数组，滑动依次取出48个Token，作为网络训练的单次Context输入。
在数组前Padding 48个空字符串，保证第一次输入是48个空字符串，第49个Token是。
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，待预测标签
//代码效果参考：http://bilibili.nb2scw.com/sitemap/post1.html
网络训练
现在我们有一张图片I、48个token组成Xt，以及一个待预测的Token作为标签Yt。
网络一次推演的公式如下：
p=CNN(I)qt=LSTM(xt)rt=(qt,p)yt=softmax(LSTM′(rt))xt+1=yt
pqtrtytxt+1=CNN(I)=LSTM(xt)=(qt,p)=softmax(LSTM′(rt))=yt
softmax可以将一个向量转换为和为1的新向量，语义上来说，是输出对每个分类的概率值。
softmax=ezi∑c=1Cezcsoftmax = \cfrac{e^{zi}}{\sum{c=1}^{C}{e^{z_c}}}softmax=∑c=1Cezcezi
首先
预测结果yt（是一个one-hot向量），表示预测为每个token的概率值。
与标签Yt计算交叉墒损失，衡量预测结果和正确结果之间的差异度，表示这次预测结果的好坏。
L(I,X)=−∑t=1Txt+1log(yt)L(I, X) = - \sum{t=1}^{T}x{t+1}\log(y_t)L(I,X)=−∑t=1Txt+1log(yt)
这个误差进行反向传播，更新模型参数，完成一次迭代。
加入上次的标签Yt，组成新的48个token（第一个出队），再使用新的token作为下一轮Yt，重复上面的训练过程，直到完成所有的token预测。
使用新的一对数据集。
Code生成阶段
根据上面训练模型Modal，首先输入48个空白token作为Xt、以及待预测的图片I，预测出第一个token。
将新预测的token入队到Xt，第一个token出队，模型预测下一个token。重复上述过程，直到预测出为止。
将预测的token列表进行解码，生成DSL代码，最后翻译为GUI代码。
实验
在三个平台大约77%的准确率。
SketchCode
从手绘草图生成代码
代码：github.com/ashnkumar/s…[5]
blog：blog.insightdatascience.com/automated-f…[6]
原理上和Pix2Code没有什么大的区别，只是将数据集换成了手绘稿。
Sketch2Code
sketch2code.azurewebsites.net/[7]
微软的版本，也是手绘稿转换为Code。
写在最后
纯视觉方案 VS 非视觉方案
特斯拉：任何依赖激光雷达的人都注定失败
特斯拉 AI 部门高级主管 Andrej Karpathy 说的「人类开车不是靠双眼发射激光」。
作为一个对计算机视觉有粗浅了解的人，我当时并不看好特斯拉的纯视觉方案，觉得CV的发展瓶颈、以及安全性都是一个很大的问题，效果肯定没有雷达方案好。因为雷达方案能够立竿见影的提供精准的深度、距离信息。
zhuanlan.zhihu.com/p/30856685[9]
但是特斯拉的自动驾驶表现狠狠地打了我的脸。后来我意识到视觉信息的语义更丰富、上限更高，比起只能单纯提供深度、距离信息的雷达方案来说，视觉方案的智能化程度会更高，它可以根据丰富的图片细节来做更复杂的决策。
雷达方案：立竿见影的深度、距离信息，但是能提供的信息仅此而已。
视觉方案：从图片中读取深度、距离信息相对难，但是视觉（光线）能承载的信息是其它载体不能比的，如果能够训练出一个足够好的模型，可以做到更好的效果。
智能生成前端代码也一样！
通过Sketch等软件虽然能直接提供准确的DSL，但是这种方案永远都不能智能化（不过这是短期内就能见效的最可靠方案）。
当看到一个设计稿的时候，相信我们不用找设计同学确认就知道：
那些地方是动态文案
哪些地方有交互
哪些地方是响应式的
哪些地方可以联动
这是因为我们大脑中有非常多的UI交互相关的先验知识。如果希望生成的代码能够理解上面的关系，就必须用到AI的语义理解能力。
不过现在的AI方案还是非常非常的原始不可用，这是因为研究的人还是太少了，研究进展也都在初级阶段，但是我相信会有AI让我们“失业”的那一天～
