前端代码智能化初探

本文涉及的产品
NLP自然语言处理_基础版,每接口每天50万次
NLP 自学习平台,3个模型定制额度 1个月
NLP自然语言处理_高级版,每接口累计50万次
简介: 在机器学习以及智能化的潮流下,如果智能化与前端相结合,能否产生一些化学反应,指导我们发现一些新的方向呢? 我们是阿里云大数据团队,我们在 代码智能 方向进行了深入探索。在2020年开年,这个注定不会平凡的日子,我们发布了第一款前端方向智能化产品-- Sophon代码智能提示插件,我们希望在这款智能插件的帮助下,前端开发者们能够“键”步如飞,再也不用担心写不完代码

在机器学习以及智能化的潮流下,如果智能化与前端相结合,能否产生一些化学反应,指导我们发现一些新的方向呢?

我们是阿里云大数据团队,我们在 代码智能 方向进行了深入探索。在2020年开年,这个注定不会平凡的日子,我们发布了第一款前端方向智能化产品-- Sophon代码智能提示插件,我们希望在这款智能插件的帮助下,前端开发者们能够“键”步如飞,再也不用担心写不完代码。

 

功能展示

让我们看看有哪些炫酷的功能吧。

  1. 推荐如丝般顺滑

suggest.gif

  1. 具备实时学习的能力,实现个性化推荐

learn.gif

  1. 内置了多个常用的前端代码片段

snippets.gif

看到这么多实用且智能的功能,是不是有点心动呢?

关于代码安全

到这里,有用户可能会担心代码安全的问题,我想说完全不用担心,因为我们是以本地化的方式提供服务的,即我们的推荐模型是部署在用户本地的,完全不需要远程通信。我们承诺,我们不会上传任何用户的代码和隐私

Sophon智能插件的前世今生

如此好用的神器, 是不是很好奇它的推荐是怎样产生的呢?请听我慢慢道来。

我们最初调研发现VsCode自带的智能提示是由各种语言的Language Server提供的,而TypeScript(JavaScript)语言自带的智能提示仅限于关键字基于语法的提示,如在tsx文件中this.会提示出当前可用的类属性、方法等,作为前端开发者,我们认为这些是远远不够的。我们希望在任何位置、基于任何输入都可以进行产生提示,让开发者不断档的持续输入下去

为了实现这个目标,我们开始了我们自己的VsCode插件的研发。

开发一个代码提示的插件,并不难,参考官方Demo几分钟就可以搞定。难的是如何能够理解用户的需求,之后向用户推荐有效、正确的代码

我们调研了很多,最初我们尝试了基于GPT-2的自然语言生成算法进行训练和推荐,发现它可以产生大篇幅的推荐,但是推荐的准确率却不高,我们总结的原因有以下几个:

  1. 训练集不够多,模型未能完全学习到前端代码的“模式”,所以无法准确推荐;
  2. 每个人写代码有自己的风格,并且不会写完全一模一样的代码,导致训练难度增高;
  3. 我认为最重要一点是:机器对于写代码前的每个需求都是未知的,它无法准确感知到具体需求是什么,所以无法推荐出符合预期的代码。

所以,我想,如果有机器能够理解的“需求”,然后基于此进行大量针对性的训练,自然语言生成也不失为一个好的方案。

之后,我们尝试了概率统计算法,发现此方案在准确性、响应速度上完全满足我们的需求,所以我们此种算法为基础,实现了我们的推荐模型。

算法的选取思路

我们认为 “代码”可以被视为一种高度结构化的自然语言,所以可以应用NLP的相关技术优化。以下是通常比较常用的算法。

  • Text Classification(文本分类)

把最终提示的内容作为分类种类,把输入文本的上文都当作文本,进行文本分类的训练。
优点:方案简单,所选择的算法较多
缺点:类别较多(每种可提示的内容都是一种类别),训练的准确率不高

  • 自然语言生成(NLG)

把需要提示的内容作为需要生成的内容,把输入文本的上文当作训练数据,每次都进行生成。

优点:可以大规模应用训练数据,可扩展性强。

缺点:可能会生成不符合语法的结果,并且要产生可信度高的推荐,需要大量的训练集

  • Markov概率模型

通过n-gram进行切词,切完之后,通过Markov算法构建概率模型,

优点:训练速度快,模型可解释性强

缺点:对于复杂语法的上下文记忆能力弱。

在综合对比之后,我们采用了Markov概率模型的方案,构建概率模型。

在离线训练中, 需要提前准备大量的代码片段,此处我们选择了github上优秀的开源代码进行了预训练,来构建n-gram概率模型。在比较了不同的方案之后我们选取了n=4,同时通过对训练数据拼写的训练建立了大量的词表,实现了在变量命名等范代码推荐领域也可以进行推荐。

以下是我们整体推荐的大致流程图

至此,基于概率模型而又非常好用的智能插件就诞生了。

关于Sophon

Sophon, 即智子,取自优秀科幻小说《三体》,在书中,智子拥有高度的人工智能以及领先人类的科学技术。我们希望借用她来表达我们对代码智能方向的探索和追求。

目前,我们的Sophon智能插件已经在VsCode插件市场上线了,欢迎大家下载使用、拍砖。

image.png


我们致力于前端代码智能化,欢迎一起交流。

相关文章
|
1月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
5天前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
293 66
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
24天前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
1月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
31 1
|
1月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
35 1
|
1月前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
28 2
|
1月前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
34 2
|
1月前
|
缓存 监控 前端开发
前端性能优化:从代码到部署的全面策略
前端性能优化:从代码到部署的全面策略
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
190 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
56 0