文 / 甄子

谁应该看？如果你对于使用机器学习升级自己的编程模式感兴趣，那你不应该错过这篇文章。

我能得到什么？你能突破心理障碍、思维惯性，真正理解机器学习这个工具的价值。

虽然在《双十一前端零研发怎么炼成的？》系列文章和掘金账号下其他技术文章里，我和团队期望能把前端智能化是什么？能做什么？讲清楚，但是，事实上我得到更多的反馈是：嗯！很牛逼！关我鸟事？我百思不得其解，为什么把大家从“切图仔”解放成“工程师”的愿景，不能打动大家？

经过大量的调研、沟通和反思，我发现核心问题在于大家的思维没有变化，还是以传统前端的视角和思路在看待智能化所做的事情。今天，跟大家掰开揉碎了详细讲讲如何进行前端智能化方式的思考，用转变后的思维真正领悟到“前端智能化”的精华。

一、智能化思维的关键问题

关键问题是什么？

关键问题在于：你去做还是模型去做？你去做你就要把问题想清楚，模型去做你就要把问题定义清楚。把问题定义清楚和把问题想清楚是啥？很多人听到这里就糊涂了……说简单点儿，问题定义清楚就是指：你要解决的是什么领域里的什么问题？问题想清楚就是指：你要解决什么领域里的什么问题？以及怎么解？听到这里，大家内心会萌发两个疑问：能不能解？怎么解？

能不能解？

虽然这个问题不严谨，毕竟能解什么问题？解决到什么程度？……还有很多衍生问题，我们姑且先从宏观维度来探究一下。智能化的解题思路源自我对前端和编程领域的一些痛点分析和思考，当 2018 年 9 月来到杭州时，imgcook.com 的前身“达芬奇”已经做了两年多了，为了配套达芬奇的设计稿生成代码能力，底层构建了数据标准化和统一投放体系，上层构建了方舟、命运石等业务平台，但能够解决的问题非常有限，只有严格遵守设计稿规范且比较简单的问题才能被“达芬奇”解决。

再深入一层分析，达芬奇依赖 OpenCV 技术对设计稿进行识别，OpenCV 里需要大量的阈值约束才能达到比较好的效果：

无论我们在 OpenCV 里怎么调整阈值，总是在各种 Badcase 中间闪转腾挪却不得其门而入，就像上图里无论怎么努力，在设计稿无限的可能性和无限的设计师个人习惯之无限组合下，输得体无完肤。

怎么办？用机器视觉的模型和算法来解决。我调研了大量机器视觉的模型和算法：

调研过程中逐渐产生灵感, 通过不断探索，终于在 MaskRCNN 和 Yolo V3 两个模型上取得了很好的效果：

基于机器学习和深度神经网络可准确识别 image、text、controller。

总结一下，机器学习加持的智能化方法能够良好解决传统编程用阈值无法解决的问题。接下来，我就来解释一下应该怎么用智能化方法解决传统编程无法解决的问题：怎么解？

难不难？

俗话说：心态决定姿态，我先分享一下自己和团队摆正心态的过程。第一个问题是：机器学习这个工具难么？答案你们都猜到了：不难！今天如果只是应用机器学习领域里成熟的框架、模型一点儿也不难，大家可以点击链接进去看看，如果整个过程对一个初级程序员有使用门槛请打 110！

Install the command-line tool for managing Pipcook projects:

$ npm install -g @pipcook/pipcook-cli

Initialize a project:

$ mkdir pipcook-example && cd pipcook-example
$ pipcook init

Playground

If you are wondering what you can do in Pipcook and where you can check your training logs and models, you could start from Pipboard

$ pipcook board

You will see a web page prompt in your browser, and there is a MNIST showcase on the home page and play around there. If you want to train a model to recognize MNIST handwritten digits by yourself, you could try the examples below.

pipeline-mnist-image-classification: pipeline for classific Mnist image classification problem.
pipeline-databinding-image-classification: pipeline example to train the iamge classification task which is to classifify imgcook databinding pictures.
pipeline-object-detection: pipeline example to train object detection task which is for component recognition used by imgcook.
python-keras: example to use Python Keras library to train deep leraning network in js syntax and runtime.

See here for complete list, and it's easy and quick to run these examples. For example, to do a MNIST
image classification, just run the following to start the pipeline:

$ node examples/pipeline/pipeline-mnist-image-classification.js

Documentation

Please refer to English | 中文

怎么用？

Up猪：就前端智能化入门而言本文到这里就结束了＼(￣▽￣)／

观众老爷：吓？(／‵Д′)／~ ╧╧

各位观众老爷莫方，我再码点儿哈！～～

按照“谈古论今”的方式，先回顾一下传统研发流程，一起分析一下为什么“达芬奇”无法用 OpenCV 解决的问题可以用机器学习和智能化方式解决。

回到关键问题：把问题定义清楚和把问题解决想清楚的区别是什么？在 OpenCV 的解决思路下，定义的问题是如何用 OpenCV 的算法提取 image、Text、Controller，我们首先要定义的是：什么是 image、什么是 Text、什么是Controller？

然而，用智能化思维解决问题，我们只用告诉模型：这是 image、这是 Text、这是 Controller，这就是标注数据。就像我对大儿子说：你拿积木扔弟弟是不对的，结果过了几天大儿子拿了各皮球扔弟弟……（#-_-) 即便内心是崩溃的，但问题还是出在我没有讲清楚：向别人扔东西是不对的，更深层次考虑到大儿子嫉妒小儿子部分抢占了自己得到的关爱，要解释的就更多了。对于 OpenCV 提取 image、Text、Controller 也是一样，要把这些元素在设计稿里出现的情况和自身特征描述的规则想清楚太难了，“达芬奇”团队想了两年多。

采用机器学习和智能化的方式解决这个问题该怎么做？很简单，把正确答案和错误答案的样本给模型，让模型用暴力算法——机器学习从样本里找到解题思路。所以，这里最本质的区别就在于，我们不用想清楚问题具体怎么解决，只要选择正确的模型（每个模型有自己擅长的领域，可以自己查查框架、模型相关的文档），整理好正确答案——样本数据，把答案告诉模型——训练模型，完工！～～

怎么组织正确答案？我们为此做了一个 SimpleCook 平台，专门用来进行数据集的收集、组织、标注，所谓收集就是找一些原始数据，在 imgcook 项目里，为了识别控件我们就用前端技术在SimpleCook平台上生成，puppeteer 就是这里的关键技术，用 Headless 的浏览器渲染页面，然后用程序规则判断或人工标注的方式，把 imgcook、Text、Controller 对应的图像区域标注上 Label，数据集——正确答案的生产过程就结束了。

怎么训练模型？还记得上面介绍的Pipcook前端机器学习框架么？一行命令搞定：

See here for complete list, and it's easy and quick to run these examples. For example, to do a MNIST image classification, just run the following to start the pipeline:

$ node examples/pipeline/pipeline-mnist-image-classification.js

你只要根据 Pipcook 的教程，把教程对应的样本数据替换成你自己的数据集，整个过程就这么简单。综上所述，智能化思维的关键问题就是：组织正确答案、选择模型、训练模型，然后呢？用就完事儿了！～～

二、智能化思维解决问题的价值

确定性

首先，智能化思维解决问题的过程很简单，简单的过程就代表了确定性：一定会有答案。其实，这就像人生的困惑，每个人都有自己的答案，即便我们告诉模型所谓的正确答案，模型训练后对未知问题也不一定给我们期待的答案，但是，模型一定会给我们一个答案。

其次，从经验的角度看，只要是行业里解决的很好的问题，在自己的领域里应该也能解决的很好。比如，使用图像分类模型，人家在严谨的实验中验证了图片里只要有猫或狗，图像分类模型就能准确识别出来。如果我把自己拍摄的猫猫狗狗的图片标注好喂给模型，模型训练后一定能识别出别人拍摄的猫和狗的图片，这就是确定性的另一个层面。

最后，用个现实的例子，比如你来到一个新的团队，无法把所有人的面孔和名字对应上，经过一段实践的相处，你们天天交流、一起吃喝玩乐，最终你能把每个人都记住，看到其中任何一个人都能叫出ta的名字。模型也是一样，起初模型也无法记住不同人的面孔，但是，把每个人、每个角度、每种光线条件下大大小小的图片标注上每个人的名字，模型经过恰当的训练，就能跟我们一样喊出每个人的名字，这就是确定性。

鲁棒性

首先，智能化思维解决问题的方法很简单，告诉模型正确答案后，模型自己在样本数据里训练模型的参数和权重，自己归纳总结答案背后的思想，这就很鲁棒了。再回到“达芬奇”用 OpenCV 遇到的问题：阈值谬误，要总结和提炼出所有情况下 image、Text、Controller 成为 image、Text、Controller 的特征很难，然鹅，当拥有足够大规模样本数据的正确答案，模型就能提炼出足够鲁棒性的答案。

其次，对算法有兴趣的同学可以 Google 一下遗传算法和蚁群算法等，你会发现凡是鲁棒性很强的算法都超出我们的意料，说简单点儿就是人很难总结提炼出这些算法背后的模式和思想，但是，这不妨碍我们写出遗传算法和蚁群算法去在模拟或现实的环境中训练出这些具备鲁棒性的模式和算法，这种写程序的方法本来就很鲁棒了。回忆一下，以往我们在写代码的时候都是想清楚了再写，今天，用智能化思维解决问题的时候想不清楚就能写代码，这种软件开发的方式还不够鲁棒么？

进化性

今天在面对服务端高可用问题的时候，至少 10 年前我就跟同事讨论过系统的“自愈性”问题，10 年过去了，讲真没几个公司接近这个目标，然鹅，今天用智能化思维就可以做到！我先从智能化思维的进化性讲起，最后来分享一下我对系统“自愈性”的一些探索和思考。

智能化思维的进化性体现在我们解决问题的方式上，以往在开发之前就确定了解题思路，开发过程中把解题思路实现掉，说白了就是 Hardcode。在面对超出灵活性设计的问题时，我们还是要去写新的代码，不断给自己之前所谓的“解题思路”打补丁。

用智能化思维解决问题的时候，我们并不提供解题思路，模型自己从正确答案里提炼解题思路，一旦遇到新的情况我们可以把这些情况当作新答案喂给模型，模型就能自我进化了，再遇到类似问题自行解决，这个过程就实现了自我进化，我们唯一要做的就是形成这个进化的闭环：模型答案的评估、新答案生成正负样本、构造在线训练的通路。

前端智能化思维解决问题的价值就在于可以确定性、鲁棒性和进化性的解决问题，试问，以往有任何一种编程语言、技术、框架、脚手架、工具…… 能赋予我们这种能力么？

三、智能化思维的训练

知：思想决定行为

说了这么多，你听不进去一样没用……听进去的前提是什么？经过反思我认为首先是打破惯性。首先，我承认自己作为一个程序员是傲娇而刚愎自用的，因为自从 1990 年在 Dos 6.22 上用 Basic 写第一个函数，屏幕上打印出用“*”构成的菱形、圆形、正方形……时，我笃定我能写出全世界！！！

也是那年，父亲节衣缩食、东借西凑给我买了一台 486 DX-100 的电脑，我便毅然决然踏上“写出全世界”的道路。也是那年，我人生中后来的每一个决定：上中专、中专一个学期就辍学打工、舞厅当服务生、开店卖录像带和光盘、关店成人高考、法学专升本、本科毕业去 ERP 软件公司做销售……一路走来，每个决定都是我自己作出的谁劝都不听，毕竟我是“写出全世界”的人！！！

编程与我就是这本秘籍

承认了自己的“刚愎自用”才能时刻提醒自己保持“空杯心理”，这是我学东西很快的一个重要原因，不管是自学编程在计算机领域走到今天，还是在开公司的时候自学电子电路设计、嵌入式开发、工业设计……

今天，在机器学习时代背景下，需要新的前端智能化思维来分析、定义和解决问题，而我恰好随时都可以把自己清零，非惯性看待所有新事物、新技术，从中找到机会。

行：行为决定习惯

在我的字典里没有“不可能”三个字，只要努力训练自己我什么都能学会，那么问题来了：如何训练？首先，学会克制自己，要明白和模型合作能解决更复杂、更有价值的问题，还能用进化性把问题一次解决彻底从而奔赴新战场。克制自己的控制欲、表达欲真的很难，我几乎训练了自己十来年，还只是浑浑噩噩初入门庭的感觉。

明明一个问题在面前，惯性的写代码去解决对我这种程序员来说很自然，克制自己找个模型和自己一起，训练模型辅助自己解决感觉上很不直接。有什么办法呢？我知道生命在于运动，可我回到家还是一个葛优躺抱起Pad看片儿。

怎么办？我跟自己约法三章：

1、遇到任何问题先不要想着自己去解决，看看成熟的模型里是否有对应的解决方法；
2、下手写代码前先逼自己缓一缓，思考自己是否能把问题想清楚、解彻底？是的话就写，不是的话就尝试智能化的解题思路；
3、在前端领域里不断想象一些问题，用智能化思维去尝试，用肌肉记忆的方法充分掌握智能化思维。

知行合一

说了这么多，你一定摩拳擦掌了吧？欢迎加入负责阿里巴巴前端技术委员会智能化方向的淘系技术前端D2C智能团队，不管在智能化思维培养上遇到什么问题，我们都有解决方案！

四、加入我们

怎样收获阿里前端实习 Offer？

具体请查看：怎样收获阿里前端实习 Offer？阿里 P8 来教你如何准备面试

[社招/校招][阿里淘系技术部-频道与 D2C 智能] 前端招聘

具体请查看：[社招/校招] [杭州] [阿里淘系技术部-频道与 D2C 智能] 前端招聘：此时此刻，非我莫属！