效率max:AI读了源码后再教我

大家好,我卡颂。

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

他有什么作用呢?

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

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

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

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

欢迎围观朋友圈、加入人类高质量前端交流群,带飞

应用选择

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

  • Github Copilot

  • cursor

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

  • a.js中定义

  • b.jsc.js中使用

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

  • 项目整体情况

  • a.jsb.jsc.js的代码

才能回答好问题。

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

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

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

  1. PDF文档分割成小的内容块

  2. 将内容块通过Embedding映射为低维向量,并存储

  3. 当用户提问后,首先将问题映射为低维向量

  4. 将3的低维向量与所有存储的低维向量比较,寻找关联度最高的向量

  5. 用户提问与用户提问关联度最高的向量对应的内容块 组合在一起向LLM提问

  6. 获得回答

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

bloop简介

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

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

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

我已经forkWebpilot项目(就是我们要学源码的项目),这里直接让bloop同步Webpilot

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

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

简单介绍下这个项目

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

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

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

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

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

  • 项目整体情况

  • a.jsb.jsc.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的信息,介绍下这个项目的用途。

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

坏问题:"与网页进行自由形式的对话"怎么实现的?

好问题:

  1. 根据README的信息,介绍下这个项目的用途。

  2. "与网页进行自由形式的对话"怎么实现的?

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

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

相关推荐
candyTong13 小时前
一觉醒来,大模型就帮我排查完页面性能问题
前端·javascript·架构
魔术师Grace13 小时前
我给 AI 做了场入职培训
前端·程序员
马丁聊GEO13 小时前
解码AI用户心智,筑牢可信GEO根基——悠易科技深度参与《中国AI用户态度与行为研究报告(2026)》发布会
人工智能·科技
nap-joker14 小时前
Fusion - Mamba用于跨模态目标检测
人工智能·目标检测·计算机视觉·fusion-mamba·可见光-红外成像融合·远距离/伪目标问题
一只幸运猫.14 小时前
2026Java 后端面试完整版|八股简答 + AI 大模型集成技术(最新趋势)
人工智能·面试·职场和发展
Promise微笑14 小时前
2026年国产替代油介损测试仪:油介损全场景解决方案与技术演进
大数据·网络·人工智能
深海鱼在掘金14 小时前
深入浅出 LangChain —— 第三章:模型抽象层
人工智能·langchain·agent
生信碱移14 小时前
PACells:这个方法可以鉴定疾病/预后相关的重要细胞亚群,作者提供的代码流程可以学习起来了,甚至兼容转录组与 ATAC 两种数据类型!
人工智能·学习·算法·机器学习·数据挖掘·数据分析·r语言
玩嵌入式的菜鸡14 小时前
网页访问单片机设备---基于mqtt
前端·javascript·css
workflower14 小时前
具身智能行业应用-生活服务业
大数据·人工智能·机器人·动态规划·生活