社区精选｜效率max：AI读了源码后再教我

今天小编为大家带来的是社区作者 卡颂 的文章，让我们一起来试试 AIGC 读了项目源码后再来教我们

---

大家好，我卡颂。

经常看技术博客的朋友，可能对 Webpilot 并不陌生。这是个能对网页内容提问的AIGC浏览器插件。

他有什么作用呢？

比如，在阅读技术文章前，我们可以让 Webpilot 对文章内容先做个总结，看完总结再阅读会更轻松。

既然这个项目这么有用，而且代码是开源的，那不看看他的实现原理说不过去。况且，我还发现了作者团队留下的乐子 —— 在 Webpilot 贡献者一栏中，项目主程居然是 ChatGPT。

既然代码是 ChatGPT 写的（姑且这么认为吧），那我们看代码也不要人肉看了。

今天，让我们试试 AIGC 读了项目源码后再来教我们。

应用选择

当前，代码相关的 AIGC 应用的操作对象主要是代码片段或某个代码文件，比如：

• Github Copilot
• cursor

但我们希望应用了解整个项目，所以需要应用既能理解代码片段或某个代码文件，又能理解代码之间的依赖关系。毕竟，代码逻辑通常是跨文件的。比如，假设项目中存在方法 fnA，他：

• 在 a.js 中定义
• 在 b.js、c.js 中使用

那么当提问 fnA 相关问题，AIGC 应用的上下文中起码应该包括以下信息：

• 项目整体情况
• a.js、b.js、c.js 的代码

才能回答好问题。

要实现类似效果，业界的常用做法是 Embedding，即将内容实体映射为低维向量，通过向量之间的相似度判断内容关联关系。

比如，开源项目 pdfGPT 可以接收 PDF 文档，用户就文档内容向他提问。

文档动辄几百页，GPT 一次性能够接收的 token 有限，他是如何实现就用户提问，在全文档中检索答案呢？原理大体可以概括为：

1. 将 PDF 文档分割成小的内容块
2. 将内容块通过 Embedding 映射为低维向量，并存储
3. 当用户提问后，首先将问题映射为低维向量
4. 将 3 的低维向量与所有存储的低维向量比较，寻找关联度最高的向量
5. 将用户提问、与用户提问关联度最高的向量对应的内容块组合在一起向 LLM 提问
6. 获得回答

按照上述解析 PDF 文档的思路，我找到了解析代码的应用 —— bloop。

bloop 简介

bloop 有点类似 pdfGPT，只不过他的接收的是代码仓库，用户就代码仓库向他提问。

在官网下载 bloop 桌面应用后，绑定自己的 Github 账号，即可免费使用。

注意：bloop 会要求你所有 public、private 仓库的读写权限。在意的同学可以像我一样注册个新 Github 账号

我已经 fork 了 Webpilot 项目（就是我们要学源码的项目），这里直接让 bloop 同步 Webpilot。

在 bloop 内部，这一步应该会建立代码文件的低维向量，如果我理解错了欢迎指正）

现在，我们可以就 Webpilot 项目向 bloop 提问了。来看看我们的第一个问题：

简单介绍下这个项目

很遗憾，第一句话就答错了 —— Webpilot 是能对网页内容提问的 AIGC 浏览器插件，而不是一个文本到图像的程序。

Webpilot 项目中确实存在 MidJourney（根据提示词生成图片的 AIGC 应用）相关代码，但这样回答肯定是以偏概全了。

那这是不是意味着 bloop 不中用呢？并不是的。

刚才我们已经提到，采用 Embedding 的实现方式只能获得与提问内容相关的内容，再就这些内容向模型提问。并非是模型完全理解代码逻辑后再提问。

换句话说，对于上述提问 fnA 相关问题的例子，采用 Embedding 后，我们会将下述信息整合后输入给模型：

• 项目整体情况
• a.js、b.js、c.js 的代码
• 用户的提问

模型根据上述信息回答问题。

而不是模型理解项目代码逻辑后，再回答 fnA 相关问题。

所以，在向 bloop 提问时，我们需要给到一些线索，比如：

• 文件名
• 函数名
• 变量名

这样，bloop 才能根据线索，通过 Embedding 寻找相关内容。

当我们将简单介绍下这个项目修改为根据 README 的信息，介绍下这个项目的用途后，bloop 给到了我们想要的答案：

其中，README 就是我们给到的线索。

用 bloop 读源码

我们与 bloop 的对话不仅是为了寻求答案，更是为了给 bloop 提供更多线索。

比如，当 bloop 回答：

Webpilot 允许你与网页进行自由形式的对话，或者与其他用户进行自动的争论......后，这个答案不仅是告诉我们的，也是告诉 bloop 自己的。

在回答前，他也不知道 Webpilot 到底能干嘛。

在回答后，我们就能继续提问：“与网页进行自由形式的对话”这部分逻辑在哪里定义的

此时，bloop 告诉了我们关键信息 —— 应用的主要逻辑在 useAskAi 方法中：

那么接下来，我们让 bloop 详细解释 useAskAi 方法的作用就能了解 Webpilot的实现原理：

现在让我们思考一个问题，如果我们询问：

useAskAi 方法都在哪些模块被使用？

bloop 能给出正确答案么？答案是：不太能。

这有点反直觉，毕竟，在程序员看来，作为一个代码浏览器，bloop 完全可以静态分析模块依赖关系后找到答案。

但是，bloop 是基于 Embedding 技术实现的。在 bloop 底层，并不存在模块依赖图，而是代码块对应的低维向量。

所以，bloop 能找到部分使用 useAskAi 方法的模块，但可能找错、也可能找不全。

总结

bloop 是基于 Embedding 技术实现的代码问答工具，对他提问需要遵循几个原则：

1. 问题尽量详细，给 bloop 更多线索

坏问题：简单介绍下这个项目。

好问题：根据README的信息，介绍下这个项目的用途。

2. 提问详细的业务逻辑问题时，可以分步骤提问。

坏问题：“与网页进行自由形式的对话”怎么实现的？

好问题：

1. 根据 README 的信息，介绍下这个项目的用途。
2. “与网页进行自由形式的对话”怎么实现的？

一句话总结 —— bloop 了解很多关于你项目的知识，但在向他提问时，得先让他明白你的问题和他了解的哪部分知识相关。

能做到以上这点，bloop 将会是你得力的源码阅读助手。

---

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -

往期推荐

社区精选｜透过源码，捋清楚循环依赖到底是如何解决的！

社区精选｜【动画进阶】有意思的 Emoji 3D 表情切换效果

社区精选｜借助 input range 实现图片对比功能