用 ChatGPT 解决你收藏网页时的选择困难症

前言

不知道大家有没有过这种经历,有时候想收藏网站时总会纠结于要放在哪个文件夹,如果你的文件夹细分的很细的话可能没有这种问题,但是找起来又会比较费时间,所以我就在想,有没有那种通过识别网页内容帮我们自动归类的插件呢,一找还真有一些,不过大部分功能都太全了,而我只想实现一个小需求,所以干脆就自己动手实现一个!

最后实现的效果:

可以看到,一键自动将 vue 官网收藏到了 前端 / JS 框架 / 官网 的目录下,还是挺准确的。

实现思路

  1. 获取书签栏数据

    这个通过插件的 api chrome.bookmarks.getTree 可以轻松获取

  2. 监听页面收藏事件

    这个我们通过在右键菜单注册一个收藏按钮实现,也可以注册快捷键实现

  3. 通过 chatgpt 获取最佳的文件夹路径

    这是比较关键的一点,后面会单独讲

  4. 收藏网站

    已经有网站信息和文件夹路径了,那么只需要调用 chrome.bookmarks.create api 就可以实现收藏功能

大致思路就是这样,插件开发的细节和 api 不必多说,chrome 官网已经很详细,接下来讲讲怎么通过 ChatGPT 获取最佳的收藏文件夹路径。

通过 ChatGPT 获取最佳路径

先明确一下我们的需求,我们需要让 ChatGPT 通过分析我们提供的网页信息,然后从已有的文件夹目录树中选出一个最佳的文件夹路径,帮助我们实现自动收藏。这里有两个问题,一个是需要调试 ChatGPT 的 Prompt,另一个是我们需要限定明确的答案范围。

Function calling 限定回答范围

我们知道 ChatGPT 的回答是不可控的,你没有办法准确的预测它会回答什么,但是通过 Function calling 我们可以变相限制他的范围。

关于 Function calling 我简单的描述一下,就是预先定义好一些函数的描述信息,然后 ChatGPT 会根据用户的问题去判断需不需要调用这些函数,如果需要调用某个函数还会根据该函数的参数定义去生成符合定义的入参,等得到函数的返回值了会基于这个返回值去回答用户的问题。

这里我们就可以通过函数入参的定义去限制 ChatGPT 的回答范围,我们可以将目录树平铺成一个路径枚举,然后定义一个函数强制让 ChatGPT 去调用,并从这个路径枚举中选出一个合适的参数作为函数入参,这样我们就等于间接让 ChatGPT 帮我们挑选出了最佳路径。

调试 Prompt

ChatGPT Prompt 的调试是一门艺术,不同的 Prompt 对结果的影响十分巨大。这里我们拿到的网页信息其实很全,可以通过访问 url 地址去获取源代码,然后再继续提取各种信息。目前我仅提取了网页的标题作为供 ChatGPT 分析的信息,对于标题信息明确的网页来说足够用了,如果想提高准确率,还可以添加更多的网页信息供 ChatGPT 分析。

其他的 Prompt 可以去源码仓库查看,由于我对 Prompt 调试也不是十分熟悉,所以应该还有很大的提升空间。

源码地址

由于只是一个自用小功能,所以并没有发布到插件市场,使用方式请参考源码仓库

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf5 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554326 小时前
element动态表头合并表格
开发语言·javascript·ecmascript