原文链接: http://www.instantshift.com/2018/10/03/ai-for-front-end-development/
简介
前端工程师是个超级英雄，要会html5, css3, JavaScript, 还要懂Github, RequireJS, UglifyJS和 Closure Compiler。
另外还要熟练使用浏览器开发者工具, 如 Dragonfly和测试工具Grunt。
前端工程师似乎就是天才，每天要同时处理多任务，真的需要点帮助。
AI是一种能改变现代编程世界的新方案。
现在，在每个前端开发过程中集成AI算法提升效率成为可能。我们看看AI在哪些方面实现了最大效益。
AI工具
人工智能定义广泛，包括下面的科学数据处理工具：
- 机器学习 Machine Learning
- 图像识别 Visual Pattern Recognition
- 自然语言处理 Natural Language Processing
这些工具对于前端开发有很大帮助。
帮助开发者优化流程，交付更好的代码。
事实上，AI将会极大提升前端开发效率，节约大量开发时间。
机器学习
机器学习是当前计算机科学中一项快速发展的领域，为计算机提供和人类一样的学习能力。
一般程序可以计算机运行一系列命令集合，但机器学习算法帮助计算机自主执行任务，无需外界帮助。
实际上，一个训练得当的计算机神经网络比人类大脑聪明数十倍。
如果前端工程师想在千变万化的劳动力市场条件下成为紧俏的专家，必须持续提升JS技术。
现在，越来越多的公司雇佣会构建神经网络的工程师。
如果你缺乏相关领域知识，就会错过巨大职场机会。
Deeplearn.js
如果你从未接触机器学习算法，可以先从deeplearn.js开始。
deeplearn.js是谷歌开发的开源硬件加速机器学习库，可以用它在浏览器中训练神经网络，学习基础机器学习知识。
不需要几个月阅读理论论文，就能在真实场景了解AI工作原理。
毫无疑问，deeplearn.js会给你演示机器学习的所有好处和未来潜力。
最后你会在前端开发中得到新的启发，同时改变的工作方式。
Pix2code
https://blog.csdn.net/program_developer/article/details/78760210
https://github.com/tonybeltramelli/pix2code
https://arxiv.org/pdf/1705.07962.pdf
https://uizard.io/research#pix2code
未来AI将会渗透前端开发，理解这一点十分重要。
机器学习可能发展的更快。
例如，Uizard Technologies公司，设计一款软件，可以直接将UI界面转变成代码，支持: web和移动端开发。
Pix2code通过创建神经网络，將UI界面作为输入，代码作为输出。
开发者可以训练自己的神经网络产生描述优化过的UI设计。
实际上，Pix2code有助于通过多种方式实现和分析复杂数据，已经超出人类能力和理解思维。
Uizard software基于DSL构建，可以基于某种特定语言设计神经网络，实现国际化界面。
这显著提升机器学习过程。
某些专家认为此类软件替代人类前端工程师存在极大风险，最近40年都不太可能出现。
现在来说，工程师们应该和智能软件通力合作实现共同目标。
Sketch2code
https://sketch2code.azurewebsites.net/
https://www.oschina.net/p/sketch2code
高科技公司在任何可能领域应用AI算法。
Airbnb使用机器学习设计工具，提升团队写作，促进产品设计，减轻前端工程师工作量。
Airbnb正致力于解决如何加速项目实施。
标准流程包括多个步骤: 设计理念发掘, 模型创建, 原型设计和最后的前端开发。
Sketch2code让跳过其中的某些步骤成为可能，只要设计理念完成后就可以开始前端开发。
机器学习算法可以识别和归类任何符号，包括复杂手写中文和泰文。
当然，也可以识别手写草图中任何模式。
Airbnb开发者使用不同团队成员绘制的设计草图，创建一系列训练数据集合，使用开源机器学习算法，继而导出中间代码。
Sketch2code可以直接将设计平台的视觉组件在web浏览器中直接渲染。
图像模式识别
大部分前端工程师需要使用 UI/UX设计技术，需要懂得如何混合不同形状和颜色。
工程师得理解如何选择视觉元素吸引用户注意力。
AI在这个领域有点限制，因为AI无法替代人类创意和才智。但AI可以优化其中的基础过程。
例如，开发者需要花费大量时间进行裁图、调色和缩放。
这些都可以自动化，类似PS之类软件没有人眼的帮助不能自动实现，AI却可以很轻松快速地处理。
Adobe Sensei
https://www.ithome.com/html/next/284394.htm
https://www.adobe.com/sensei.html
Adobe Sensei是一款全新软件，完全改变UI/UX设计师的世界，通过视觉模型识别转换图片和照片。
Adobe Sensei在三方面展示了其创新方法:
-
创意智能
软件可以理解图片、照片和动画中语言，甚至比人眼做的更好。
软件可以自己执行枯燥的重复性任务，让前端工程师专注于创意理念。 -
内容智能
主要包括图片内容质量和位置，软件可以自动测量景深、颜色饱和度及调用第三方规则。
这对于不懂艺术设计的前端工程师有很大帮助。 -
体验智能
adobe还在开发相关AI工具，可以在很少的点击中帮助UI/UX设计，让实时创建精确的颇具吸引力的定制网页成为可能。
AI帮助理解用户喜好，打造极具吸引力的设计。
Watson
https://www.jianshu.com/p/c1d6ad2ed2dd
http://www-31.ibm.com/ibm/cn/cognitive/outthink/watson/index.html
市场上有很多技术公司在AI和视觉模式识别中投入， IBM的技术其中最强的一家。
Watson作为一种服务，可以很容易对视觉内容进行打标签、分类以及训练。
很多领域的专家都在使用这款创意软件，包括前端工程师，可以帮助工程师提升一个等级。
数据和技术。
web工程师总是深陷在大量无用信息，环绕着一推新技术，无法自拔。
Watson帮助识别具体IT项目需要的数据和技术方案。
自然语言处理
https://www.amazon.cn/dp/B01MROO3VA
https://arxiv.org/abs/1103.0398
前端工程师应该学习和实践的另一个AI分支是NLP。
NLP可以將人类口头或书写的语言转换为机器语言。
未来计算机变得越来越智能，因此在人类和机器之间建立有效互动十分重要。
Web Speech API
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API
https://www.jianshu.com/p/e42638839475
Web Speech API是一项现代服务，让JS开发者在网页中集成特定声音数据。
目前只有Mozilla Firefox and Google Chrome浏览器支持。
主要包含两部分:
-
语音合成
將语音转换成书面文本，或者相反。让计算机程序可以读取和分析文本内容。
-
语音识别
可以实现异步语音识别功能，计算机和人类可以通过设备麦克风和扬声器交流。
你可以使用语音识别通过语音识别接口来优化网站。
虽然NLP发展迅速，但有些问题依然无解。
目前直接正确识别英语，无法识别很少使用的语言。
NLP Architect By Intel AI Lab
https://www.intel.ai/introducing-nlp-architect-by-intel-ai-lab/
http://nlp_architect.nervanasys.com/
https://github.com/NervanaSystems/nlp-architect
https://pypi.org/project/nlp-architect/
前端开发者可以用python使用NLP Architect。
Intel的技术专家设计开源库，用以处理和转换人类语言，实现机器可以理解人类语言。
也可以帮助前端工程师创建用户和计算机之间的交流工具。
NLP模块允许工程师应用AI会话算法设计智能聊天机器人，帮助创建AI算法用于有效意图提取和名称实体识别。
NLP architect优点有：
-
可以用于使用任何特定数据集合训练既有模型
-
从头开始设计模型
-
集成不同模块
intel也在持续扩展这项AI服务的功能，未来将会看到更多新功能。
结语
作为前端工程师，AI开发其实不是威胁，更像是一项机会，帮助你在IT产业建立更好的事业。
你可以把AI当做魔杖，把耗时任务转变成自动化过程。
今天，AI无疑是趋势，未来几十年还会发展。
如果你想要获得成功，应当在机器学习, PR和NLP领域学习更多技能。
其他参考
https://www.i-programmer.info/news/105-artificial-intelligence/10833-front-end-developers-your-day-is-done-ai-can-do-your-job.html
https://medium.com/@Jessicawlm/how-ai-and-machine-learning-are-transforming-front-end-development-db74523fd46b
网友评论