如何使用AI为前端开发赋能

原文链接: http://www.instantshift.com/2018/10/03/ai-for-front-end-development/

简介

前端工程师是个超级英雄,要会html5, css3, JavaScript, 还要懂Github, RequireJS, UglifyJSClosure Compiler

另外还要熟练使用浏览器开发者工具, 如 Dragonfly和测试工具Grunt

前端工程师似乎就是天才,每天要同时处理多任务,真的需要点帮助。

AI是一种能改变现代编程世界的新方案。

现在,在每个前端开发过程中集成AI算法提升效率成为可能。我们看看AI在哪些方面实现了最大效益。

AI工具

人工智能定义广泛,包括下面的科学数据处理工具:

  • 机器学习 Machine Learning
  • 图像识别 Visual Pattern Recognition
  • 自然语言处理 Natural Language Processing

这些工具对于前端开发有很大帮助。

帮助开发者优化流程,交付更好的代码。

事实上,AI将会极大提升前端开发效率,节约大量开发时间。

机器学习

机器学习是当前计算机科学中一项快速发展的领域,为计算机提供和人类一样的学习能力。

一般程序可以计算机运行一系列命令集合,但机器学习算法帮助计算机自主执行任务,无需外界帮助。

实际上,一个训练得当的计算机神经网络比人类大脑聪明数十倍。

如果前端工程师想在千变万化的劳动力市场条件下成为紧俏的专家,必须持续提升JS技术。

现在,越来越多的公司雇佣会构建神经网络的工程师。

如果你缺乏相关领域知识,就会错过巨大职场机会。

Deeplearn.js

https://www.tensorflow.org/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浏览器中直接渲染。

图像模式识别

https://en.wikipedia.org/wiki/Pattern_recognition

大部分前端工程师需要使用 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

你可能感兴趣的:(如何使用AI为前端开发赋能)