OpenAi 开发实践-用GPT来做code review

缘起

希望通过AI来提高开发效率，我们想到可以利用AI来帮助开发人员完成一些重复性和耗时的工作，比如使用AI来进行代码审查。AI 可以以最快的时间扫描代码，发现可能存在的漏洞和缺陷，使开发人员能够及时发现和修复这些问题，从而提升开发效率。

基本思路：

1. 使用API可以将Open AI和GitLab连接起来，以实现自动化审查，节省时间提高效率。
2. 在合并请求时，通过传入merge request的diff信息，ChatGPT可以给出详尽的review结果，让开发者了解需要修改哪些地方。
3. 我在开发过程中使用了ChatGpt，它能够帮助开发者快速选择哪些API，并且一步步详细解释，让开发进度加快。

实战

1. 如何调用openAi Api？

1. 首先，需要前往官网注册，登录后生成API Key(调用api是按返回的token的数量收费的)。

1. 调用Completion接口，Competions接口可以根据用户输入的提示内容（prompt），返回一个或多个预测完成的内容。它主要用于自然语言处理，可以根据用户的要求设置参数，比如调整输出结果的长度、精度等，来得到精准的结果。

   安装openai这个包

   npm i openai
   

   调用code demo:

   import { Configuration, OpenAIApi } from 'openai';
   // 输入自己的apiKey
   const configuration = new Configuration({
     apiKey: 'xxxxxxxx',
   });
   
   const openai = new OpenAIApi(configuration);
   // 接口调用
   const response = await openai.ChatCompletion.create({
       model: 'gpt-3.5-turbo',
       'messages': [
       {'role': 'code Reviewer', 'content': `{prompt}`}, // 这里输入下文拼好的prompt
     ]
     });
   

2. 如何获得merge request的更改？

1. 使用GitLab的Change接口，需要输入项目的projectId和mege requestID。它会返回一个Patch，可以显示所做的更改。

   const gitlabAPI = `http://gitlab.com/api/v4/projects/${projectId}/merge_requests/${requestId}/changes`;
   const response = await fetch(gitlabAPI,{
     method: 'Get',
     headers: {
       'Content-Type': 'application/json',
       'Private-Token': 'XXXXXXXX' // 可以在gitlab的后台生成Token
     }
   })
   

   返回结果， patch在diff字段中：

   [
     {
       "old_path": "file1.txt",
       "new_path": "file1.txt",
       "a_mode": "100644",
       "b_mode": "100644",
       "diff": "--- a/file1.txt\n+++ b/file1.txt\n@@ -1,3 +1,3 @@\n line1\n-line2\n+line2 updated\n line3\n",
       "new_file": false,
       "renamed_file": false,
       "deleted_file": false
     },
     {
       "old_path": "file2.txt",
       "new_path": "file2.txt",
       "a_mode": "100644",
       "b_mode": "100644",
       "diff": "--- a/file2.txt\n+++ b/file2.txt\n@@ -1,3 +1,3 @@\n line1\n-line2\n+line2 updated\n line3\n",
       "new_file": false,
       "renamed_file": false,
       "deleted_file": false
     }
   ]
   

2. 使用diff2html库来渲染patch结构（这也是chatgpt告诉我的）：

   Diff2Html.html(diffStr,{
           drawFileList: false,
           highlight: true,
         })
   
   

   显示效果如下

3. 如何导引ChatGpt做Code Review

1. 添加Prompt，其中引用到gitlab的改动，然后将Prompt其发送给OpenAI，其中Prompt的内容参考了GitHub Review这个插件的内容。

   let prompt = `Act as a code reviewer of a GitLab merge request, providing feedback on the code changes below.
         You are provided with the merge request changes in a diff format.
         The diff which is get from the GitLab API: api/v4/projects/projectId/merge_requests/requestId/changes.
         \n\n
         Diff of the merge request to review:
         \n
         ${diffStr}
         \n\n
         As a code reviewer, your task is:
         - Review the code changes (diffs) in the patch and provide feedback.
         - If there are any bugs, highlight them. 
         - Does the code do what it says in the commit messages?
         - Do not highlight minor issues and nitpicks.
         - Use bullet points if you have multiple comments.
         - If no suggestions are provided, please give good feedback.
         - please use chinese to give feedback.`
   

   这个promp的翻译如下：

   作为GitLab合并请求的代码审查员，提供下面代码更改的反馈。
   您可以从GitLab API获得合并请求更改的diff格式：api/v4/projects/projectId/merge_requests/requestId/changes。
   
   要审查的合并请求的diff：
   ${diffStr}
   
   作为代码审查员，您的任务是：
   
   - 审查补丁中的代码更改（diff）并提供反馈。
   - 如果有任何错误，请突出显示它们。
   - 代码是否符合提交消息中的内容？
   - 不要突出显示小问题和细节。
   - 如果有多个评论，请使用项目符号。
   - 如果没有提供建议，请给出良好的反馈。
   - 请使用中文给出反馈。
   
   

   • 使用英文而不是中文是因为英文可以速度更快。
   • 可以学习下这个prompt的书写方式，把task一条一条放到最下面，这样可以统一输出需求，非常好用。

2. 发送之后，OpenAI的接口将会返回Review操作之后的结果，这样就可以看到review的结果。

总结

通过上述步骤，可以通过OpenAI Api调用、GitLab Change接口和diff2html库来实现ChatGpt Code Review，Prompt需要详细说明Reviewer的任务，然后通过OpenAI Api就可以获得审查结果。

代码会上传，请注意在公司的项目使用中符合公司的规定