是不是有一天想象着让代码自动补全，今天他来了！！！

在这里插入图片描述

作者：熊唯，黄飞，腾讯 PCG/QQ研发中心/CV应用研究组

AI 如果真的可以写代码了，程序员将何去何从？近几年，NLP 领域的生成式任务有明显的提升，那通过 AI 我们可以让代码自动完成后续补全吗？本文主要介绍了如何使用 GPT2 框架实现代码自动补全的功能。

如果 AI 真的可以自己写代码了，程序员将何去何从？

我去年做过一个代码补全的小功能，打包为 androidStudio 插件，使用效果如下：

在这里插入图片描述

代码补全模型预测出的结果有时的确会惊吓到我，这也能学到~? 那如果给它见识了全世界的优秀代码，再给足够量级参数和优秀的模型框架，真的可以实现需求作为输入，直接输出代码吗?

"我的需求讲完了，你的代码呢?" 希望可以看到这一天。

代码补齐功能有其他优秀插件也已实现，比如 tabnine，Kite 和国产的 aixcoder。本文主要介绍下代码补全功能需要实现的整套流程。主要包括数据，算法和工程。

数据

众所周知，算法工程师大部分时间都在处理数据。

深度学习是使用大数据训练模型的一个过程，数据是很重要的一个模块。人是会累的，休息不好还导致记忆不好。AI 是你给多少数据它就能存储接收多少数据，学不到信息那是人的错，给的数据不好或者算法设计不好。所以我们先尽可能多的准备好训练数据。

1、数据采集 本文的目的是代码补全，训练数据就是代码段。考虑到每种语言风格和语法都不一致，所以单个模型只针对一种代码语言。

我使用的训练数据主要来源于 GitHub，编写了一个简单的爬虫代码，指定语言后根据 stars 的排序下载工程。

Github 的 search API 官方地址：

https://developer.github.com/v3/search/

2、数据清理 直接下载的数据肯定是不能直接用的，我们还需要对数据进行清理。

首先，我们的训练数据只需要工程中的代码文件，以 java 工程为例，我们只保留.java 结尾的文件，其他文件可剔除。

其次，我的代码补全目标是代码段，不针对注释功能。而且对于代码补全训练时，我们是会给定一定范围的上文，如果存在注释段会占用有效代码信息。另外注释除英文外其他字符不在我的训练 vocab 范围内，所以需要对代码中注释和日志进行清理。

1.删除代码行中存在除符号和英文外的字符

2.删除日志行

3.删除注释行，主要针对以下格式

/* 注释文本*/

/** 注释段落 */

// 注释文本

code //注释经过以上数据清理后，得到纯代码数据。

3、数据编码 得到了训练数据后还需要把代码文本进行编码。本文使用的是 bpe（byte pair encoder）字节对编码，主要为了数据压缩。bpe 简单理解为将一个单词再拆分为多个字母组合，比如 tencent 拆分为 ten-cent，这些组合方式则是根据大量数据，统计频率得到。由于我们期待的代码补全功能是在行首输入几个字母，根据上文预期出本行内容。

假设 tensorflow 这个 token 被编码对应到一个 id，那我希望输入 ten 就输出 tensorflow 是无法实现的。所以在训练过程中，我会随机把 token 打断，比如将 tensorflow 打断为 t-en-sor-flow 进行编码，打断原则是被切分的部分一定要在词汇表中。数据编码后，代码的每个 token 被编码为 1~N 个 id。模型预测到的 id 反编码为 token 即可。回车符认为是预测的终止符。经过以上处理，我们就准备好了训练数据，下面就可以进行算法部分了。

模型算法

众所周知，算法工程师大部分时间都在研究算法。

在腾讯文档的错别字纠错需求中，我们采用了基于 LSTM 的 seq2seq 以及 facebook 提出的基于 CNN 的 seq2seq，可以得到不错的纠错效果。直到 NLP 出现了一个"网红"--BERT，采用后精度直接提升 8 个点左右，不亏是 google。下面先简单介绍下 bert 和 gpt2。

BERT 和 GPT2

2017 年中 google 提出了 Transformer 结构。不用 rnn，不用 cnn，提出 attention is all you need。2018 年 openAI 采用了 transformers 结构在 18 年发布了 GPT。同年 google AI Language 发布了 bert 论文，提出的 BERT 模型在 11 个 NLP 任务上刷新了记录。2019 年 openAI 又推出了 GPT-2 模型。。

BERT（Bidirectional Encoder Representation from Transformers）是基于 transformers 框架的 encoder 部分，自编码语言模型，适合 N-1（比如句子分类），N-N（比如词性标注）的任务，但是它并不适合做生成任务。

GPT（Generative Pre-Training）基于 transformers 的 decoder 部分，自回归语言模型，适合生成式任务。

Transformer框架图

GPT2和BTER框架示意图

代码补全功能就是基于 GPT2 框架，OPenAI 官方提供了多套 GPT2 预训练模型：

官方提供GPT2参数

作为一个经常要把模型部署到移动端的 CVer，看到这个参数级别，我选择最小的模型进行 finetune。

对于 GPT 算法，下面这篇文章讲的很好，感兴趣同学可以看看：

https://zhuanlan.zhihu.com/p/137350403

GPT2的预测过程

本文在训练中使用 512 个上文，预测到回车符为终止。模型网络使用超参:12 个层，768 个隐藏节点，12 个 heads，采用了 uber 的 Horovod 分布式框架进行训练。

infer 阶段采用 beam-search 会导致整个预测过程特别耗时，所以参考了https://arxiv.org/abs/1904.09751论文，采用 top-k sampling，每次预测 top3 的结果再通过概率阈值过滤后作为最终候选输出。

最终 infer 效果：

在这里插入图片描述

输入一段代码，预测出后续代码，以回车符截止。

工程

众所周知，算法工程师大部分时间都在做工程。

训练出模型后，还要把模型应用起来，所以还需要一些工程工作需要实现。代码补全功能，最合适的应用场景就是上 IDE。nlp 模型不太适合在本机部署，最终选择了在 GPU 机器上部署模型，然后终端通过 http 请求获取预测文本显示的方案。

后台部署

Flask 是一个 Web 应用程序框架，灵活，轻便，容易上手。本文简单介绍如何利用 flask 启动一个 web 服务，以及如何访问和调用我们的功能接口。首先我们创建一个 conda 环境：

conda create -n flask python=3.6
source activate flask
pip install flask

代码中增加一个接口函数：

from flask import Flask
from flask import request
app = Flask()


# route把一个函数绑定到对应的 url 上
@app.route("/plugin",methods=['GET',])
def send():
    data = request.args.get('data')
   # 模型预测逻辑
    out =  model_infer(data)
    return out

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=8080, debug=False)

执行 run.py 代码，后台服务开启运行：

在这里插入图片描述

客户端请求：

url = http://ip:8080/plugin?data="输入"

其中 model_infer 函数需要实现模型的 infer 前向计算逻辑，从请求中获取 data 字段作为输入，infer 预测的结果列表作为输出返回给调用方。

经过上面的工作，我们已经提供了一个服务接口，返回我们代码补全的预测结果。

插件编写

最后一步就是如何在 IDE 上使用功能了。我们要开发 AS 的插件，需要使用 IntelliJ，首先需要在本机安装配置 IntelliJ IDEA

下载地址:

https://www.jetbrains.com/idea/download/

社区版源码:

https://github.com/JetBrains/intellij-community

好用的插件可以节省程序员很多时间，在插件实现时，我还添加了一个小的 git-blame 功能，实时查看指定行的 git 提交人，对于手 Q 这种多人合作的工作，比较实用。大家也可以通过 IntelliJ 自己开发一些常用功能。

在这里插入图片描述

gitBlame 的主要代码：

public class GitBlame extends AnAction {

    private void showPopupBalloon(final Editor editor, final String result) {
        ApplicationManager.getApplication().invokeLater(new Runnable() {
            public void run() {
                JBPopupFactory factory = JBPopupFactory.getInstance();
                factory.createHtmlTextBalloonBuilder(result, null, new JBColor(new Color(186, 238, 186), new Color(73, 117, 73)), null)
                        .setFadeoutTime(5000)
                        .createBalloon()
                        .show(factory.guessBestPopupLocation(editor), Balloon.Position.below);
            }
        });
    }

    @Override
    public void actionPerformed(AnActionEvent e) {
        // TODO: insert action logic here
        //获得当前本地代码根目录
        String base_path = e.getProject().getBasePath();
        String file_path = e.getProject().getProjectFilePath();
        //获取编辑mEditor
        final Editor mEditor = e.getData(PlatformDataKeys.EDITOR);
        if (null == mEditor) {
            return;
        }
        SelectionModel model = mEditor.getSelectionModel();
        final String selectedText = model.getSelectedText();
        if (TextUtils.isEmpty(selectedText)) {
            return;
        }

        //获取当前编辑文档的目录
        PsiFile mPsifile = e.getData(PlatformDataKeys.PSI_FILE);
        VirtualFile file = mPsifile.getContainingFile().getOriginalFile().getVirtualFile();
        if (file != null && file.isInLocalFileSystem()) {
            file_path = file.getCanonicalPath();
        }
        //gitkit工具
        JGitUtil gitKit = new JGitUtil();
        String filename = file_path.replace(base_path+"/","");
        //得到blame信息
        int line_index = mEditor.getSelectionModel().getSelectionStartPosition().getLine();
        String blame_log = gitKit.git_blame(base_path,filename,line_index);

        //展示
        if (!blame_log.isEmpty()){
            showPopupBalloon(mEditor, blame_log);
        }
    }
}

本文的代码补全插件主要代码逻辑为调用上一步后台部署的请求。

// 请求url格式（和flask接口一致）
String baseUrl = "http://ip:8080/plugin?data=";
// 获取当前编辑位置文本
PsiFile str = position.getContainingFile();
// 根据模型上文限制获取代码端
String data = getContentCode();
String url = baseUrl+data;
// 发送请求
String result = HttpUtils.doGet(url);
// 后处理逻辑，在提示框显示预测结果
show()

最终呈现形式：

在这里插入图片描述