前端代码智能化初探

本文涉及的产品
NLP 自学习平台,3个模型定制额度 1个月
NLP自然语言处理_高级版,每接口累计50万次
NLP自然语言处理_基础版,每接口每天50万次
简介:

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

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

功能展示

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

  1. 推荐如丝般顺滑_
  2. 具备实时学习的能力,实现个性化推荐_
  3. 内置了多个常用的前端代码片段_

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

关于代码安全

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

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插件市场上线了,欢迎大家下载使用、拍砖。

_


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

相关文章
|
15天前
|
前端开发 JavaScript 开发者
利用代码分割优化前端性能:高级技巧与实践
【10月更文挑战第2天】在现代Web开发中,代码分割是优化前端性能的关键技术,可显著减少页面加载时间。本文详细探讨了代码分割的基本原理及其实现方法,包括自动与手动分割、预加载与预取、动态导入及按需加载CSS等高级技巧,旨在帮助开发者提升Web应用性能,改善用户体验。
|
24天前
|
前端开发 小程序 JavaScript
信前端里的循环显示如何编写代码?
信前端里的循环显示如何编写代码?
60 5
|
2月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
74 0
|
2月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
119 0
|
2月前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
89 0
|
2月前
|
前端开发 程序员 API
从后端到前端的无缝切换:一名C#程序员如何借助Blazor技术实现全栈开发的梦想——深入解析Blazor框架下的Web应用构建之旅,附带实战代码示例与项目配置技巧揭露
【8月更文挑战第31天】本文通过详细步骤和代码示例,介绍了如何利用 Blazor 构建全栈 Web 应用。从创建新的 Blazor WebAssembly 项目开始,逐步演示了前后端分离的服务架构设计,包括 REST API 的设置及 Blazor 组件的数据展示。通过整合前后端逻辑,C# 开发者能够在统一环境中实现高效且一致的全栈开发。Blazor 的引入不仅简化了 Web 应用开发流程,还为习惯于后端开发的程序员提供了进入前端世界的桥梁。
174 0
|
2月前
|
JavaScript 前端开发
揭秘Vue.js组件魔法:如何轻松驾驭前端代码,让维护变得轻而易举?
【8月更文挑战第30天】本文探讨了如何利用Vue.js的组件化开发提升前端代码的可维护性。组件化开发将复杂页面拆分为独立、可复用的组件,提高开发效率和代码可维护性。Vue.js支持全局及局部组件注册,并提供了多种组件间通信方式如props、事件等。通过示例展示了组件定义、数据传递及复用组合的方法,强调了组件化开发在实际项目中的重要性。
33 0
|
5天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
5天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
18 0
|
5天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。