译/罄天

导论

前端开发人员常常被看做是一个"超级英雄"，精通html5，css3，JavaScript，并且了解有关GitHub，RequireJS，UglifyJS和Closure Compiler的所有知识。他还可以熟练利用浏览器开发人员工具（例如Dragonfly）和测试工具（例如Grunt），而且每天都在处理很多任务，在某种程度下他确实需要一定的改变。

人工智能(AI)是一种新的解决方案，可以改变现代编程的世界。如今，可以将AI算法集成到前端开发的每个过程中，从而提高生产率。以下我们将详述AI给前端开发带来的最大改变。

AI 工具

人工智能是适用数据科学工具的广义定义，例如：

机器学习
视觉模式识别
自然语言处理

所有这些工具对于前端开发都非常有用。它们使程序员可以优化流程并提供更好的结果。实际上，在使前端开发达到更高效率的同时，也节省了大量时间。

机器学习

机器学习是计算机科学一个快速发展的领域，它使计算机像人类一样具有学习能力。普通程序使计算机按一定方向运行命令，而机器学习算法可帮助计算机执行其任务而无需任何外部帮助。实际上，精心设计的计算机神经网络比人类的神经网络聪明十倍。

如果每个前端开发人员想在不断变化的劳动力市场环境中保持竞争力，那么他应该不断提高自己的JavaScript技能。如今，越来越多的公司正在寻找在神经网络构建方面有经验的程序员。如果您在这一领域缺乏知识，则可能会错过一个巨大的职业机会。

Deeplearn.js

如果您以前从未从事过机器学习算法的开发，则可以从使用deeplearn.js开始。它是由科技巨头Google设计的开源硬件加速的机器学习库。

使用此工具，您可以获得机器学习的基本知识，并可以直接在浏览器中实际训练神经网络。无需花费数月的时间阅读理论材料，您可以看到AI如何在实时模式下工作。

毫无疑问，deeplearn.js将展示您从机器学习中获得的所有好处及其不断增长的潜力。最终将助您提出新的想法，并改变您的前端开发方法。掌握的技能将有助于设计网站，使网站更智能，更快捷地工作。

Pix2code

了解前端开发的未来与AI息息相关，这一点非常重要，机器学习可能发展得更快。

例如，Uizard Technologies是一家公司，设计了独特的软件来将用户界面图像转换为代码，它适用于网站和移动应用程序开发。

Pix2code使得创建神经网络成为可能，该神经网络将用户界面视为输入，将代码视为输出。开发人员可以训练该智能系统来生成代码，以描述最佳的用户界面设计。实际上，它有助于以超出人类能力和理解范围的方式来获取和分析复杂数据。

Uizard软件是围绕“领域特定语言”构建的，它有助于围绕一种目标语言设计神经网络。此后，它使界面成为多语言界面。这种方法极大地增强了机器学习过程。

一些专家认为，像Uizard Technologies这样的程序将有很大的风险能够替代人工前端开发人员。但是，这种剧烈的变化不太可能在最近的40年内出现。今天，程序员应该将他们的工作与智能软件结合起来，以实现共同的目标。

Sketch2code

高科技公司在每个可能的领域都能应用AI算法。 Airbnb使用机器学习来设计工具，该工具有助于增强团队合作，促进产品设计并减少前端开发人员的工作量。

Airbnb一直在努力寻找解决方案，以加快项目实施速度。标准流程包括多个阶段：设计思想探索，模型创建，原型设计以及赋能最终的前端开发。

一旦提出了设计思想，Sketch2code便可以跳过几个步骤并开始进行前端开发。团队成员可以在白板上绘制该网页的示意图，然后软件会立即将其转换为代码。显然，这种方法可以节省大量时间并简化每个团队成员的工作。

机器学习算法可以识别和分类任何符号，包括复杂的手写中文和泰文字母。因此，它还可以识别手工绘制的草图图案也就不足为奇了。

Airbnb开发人员使用不同团队成员绘制的草图创建了一组训练数据。公司还使用了开源机器学习算法并提取了中间代码。它允许将视觉组件从设计平台渲染到Web浏览器中。

因此可以得出结论，Sketch2code可以在专注于逐步产品开发的公司中有效运作。它将帮助您以极快的速度创建最终网站或应用程序设计的模板。

视觉模式识别(Visual Pattern Recognition)

大多数前端开发人员必须具备UI / UX设计技能。因此，他们应该知道如何混合各种形状和颜色，程序员应了解选择哪些视觉元素以吸引用户的注意力。

由于无法替代人类的创造力和才能，因此AI在该领域的使用受到限制。但是，有一些AI可以优化的基本过程。

例如，网络程序员必须花费大量时间进行图像的裁剪，色彩校正和调整大小，这些过程需要自动化，而像Photoshop这样的普通软件就无法在没有人眼的帮助下完成此任务。人工智能可以轻松快捷地应对这一挑战。

Adobe Sensei

这是款全新的软件，它改变了UI / UX设计的世界，有助于使用视觉模式识别来转换图片和照片。 Adobe Sensei在三个基本方面展示了一种创新方法：

创造力。该软件具有比人眼更好的理解图像，照片和动画语言的能力。该程序自行承担执行重复性的任务，这使网络开发人员将注意力集中在创意上，而不是枯燥的例行工作。
内容智能。这方面与图像内容的质量和位置有关。 Adobe Sensei能够自动测量诸如景深，色彩和谐度以及应用三分法则之类的参数。这对于设计不太了解的前端开发人员来说非常有用。
体验智力。 Adobe仍在开发此AI工具，承诺将通过几次单击来帮助改善UI / UX设计。这将使实时创建最相关，最具吸引力和准确的个性化Web内容成为可能。 AI将帮助您了解用户的偏好并制作最吸引人的设计。

Watson服务

市场上有很多技术公司投资于AI和视觉模式识别。但是，IBM的技术被认为是最强大，最有效的技术之一。 Watson是一项服务，它允许以简单的方式对视觉内容识别进行标记，分类和训练。

这种创新的计算机软件可为包括前端开发人员在内的各种专家使用。它有助于使程序员的工作更上一层楼。

数据和技术。 Web开发人员通常会被不必要的信息所淹没，而各种各样的可用技术则不知所措。 Watson帮助识别数据和技术解决方案，这对于具体的IT项目很有用。
媒体。前端开发人员负责网站或应用程序的创建，这将引起媒体的广泛参与。 Watson可以详细分析媒体市场，并为程序员提供精确的指南。
AI视频解决方案。使用此特定工具，您可以建立一个具有更强的观看者参与度的网站。该AI解决方案应用了一种识别技术，以使用自动元数据来增强内容搜索和发现过程。

自然语言处理

AI还有一个分支，前端开发人员应在实践中学习和实施。自然语言处理或NLP是一种工具，您可以使用该工具将人类语言转换为计算机语言（无论说或写单词）。电脑逐年变得越来越“智能”，因此在人与机器之间建立有效的交互非常重要。

NLP对前端开发人员非常重要，因为它有助于将语音识别和聊天机器人集成到网站中。用户之间对这些工具的需求正在增长，这迫使程序员学习AI。

网络语音API

这是一项现代服务，可帮助JavaScript开发人员将特定的语音数据合并到网页中。目前，它仅适用于两种浏览器：Mozilla Firefox和Google Chrome。网络语音API包含两个主要部分：

语音合成。该工具可将语音转换为书面文本，反之亦然，使计算机程序可以读取和分析文本内容。
语音识别。该工具打开异步语音识别功能。计算机和人可以使用设备的麦克风和扬声器相互通信。您可以通过语音识别界面访问此工具以改善网站。

尽管自然语言处理迅速发展，但该问题的某些方面仍未解决。虽然此工具可以成功使用英语，但不适用于很少使用的语言。

英特尔AI实验室的NLP架构

倾向于Python编程语言的前端开发人员可以开始使用NLP Architect。英特尔专家设计了这个开放源代码库，以处理和转换人类的语言，从而使其对机器易于理解。可以帮助您创建用户与计算机之间的通信工具。

该NLP模块允许程序员应用对话式AI算法来设计智能聊天机器人。它还有助于创建用于有效意图提取和专有名称实体识别的AI算法。

NLP Architect的好处如下：您可以训练现有模型并利用任何特定的数据集；从头开始设计新模型；集成了几个不同的模块。英特尔继续扩展这些AI服务的功能，因此新的高级特性将在不久的将来出现。

思考

作为前端开发人员，您应该将AI开发视为机会，而不是威胁，这可以帮助您在IT行业建立良好的职业生涯。您应该将AI用作魔术棒，以将耗时的任务转换为自动化流程。

如今，人工智能已成为一种主流趋势，这种趋势将在未来几十年中持续下去。如果要成功，您应该在机器学习，模式识别和自然语言处理领域获得新技能。

参考资料：

原文地址：http://www.instantshift.com/2018/10/03/ai-for-front-end-development/

imgcook 专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。

我们期望 imgcook (图像大厨) 能够利用智能化手段，成为一位 P5 级别的前端工程师，在对设计稿轻约束的前提下实现高度还原，释放前端生产力，助力前端与设计师高效协作，让您关注更具挑战性的事情！

欢迎加入我们： [社招/校招] [杭州] [阿里淘系技术部-频道与 D2C 智能] 前端招聘：此时此刻，非我莫属！