乐于分享
好东西不私藏

做了一个obsidian视频助手插件

做了一个obsidian视频助手插件

使用场景

这周vibe coding了一个obsidian插件,主要解决我自己的两个痛点。

1 语言学习

我在过去十多年中一直断断续续地学法语,间隔以年为单位。虽然现在阅读大约还能勉强保持B1,但语法估摸着已退到A1。过往每次重新捡时都会重读语法书和做习题,不知读了几遍了,实在不想再通读语法书,但一些语法细节又会影响对阅读的理解。加上现在学语言的材料转向了更生活化、更真实场景的视频,所以我希望能在看视频的过程中提炼语法点,辅助理解。

2 视频笔记

我看的大多数视频都是讲座、课程或深度访谈,常常需要随手记些笔记。以往的模式是在obsidian里中一边开网页看视频,另一边打开文档记录,但如果想引用些原文也很麻烦,看的时候一边记录有时也打断了看视频的状态。

这个插件为解决以上问题。

使用方法

插件使用的前提是有一份带时间戳的视频字幕。YouTube的比较容易获取,最推荐的视频及字幕下载工具是obsidian web clipper的Chrome extension,它可以按说话者来分割字幕,保留了每段话的完整性。一键保存到obsidian。

其次可用obsidian的ytranscript插件,也可以下载字幕,但它是以固定的时间间隔单位来切分字幕,常常会将一段话从中间断开。

打开下载好的视频及字幕文件,在当前页面点击obsidian左侧侧边栏的shadowing mode图标,就进入shadowing mode。字幕根据时间戳被分成了一个个block,随着视频的进度滚动。点击时间戳可让视频跳转到对应位置。

考虑到学习目的,我一般都会先自己理解原文,所以相比于一键翻译全文,我在每个字幕块上单独放了翻译按钮,按需翻译。语法解析也是一样,我设置了语法主要分析「常用表达」、「固定搭配」「语法点」三类。

视频下设计了前进或后退5-10秒的按钮,方便重复听或跟读。

选中该页面的文字,会弹出一个标记栏,可选择不同的高亮颜色。第一次高亮一段文字后会自动生成以该视频名字命名的一个笔记文档,点击左侧侧边栏的highlight notes可在右边面板打开该笔记。

每次选择高亮的文字都会带着时间戳自动贴入右侧的笔记文档,同一个时间戳下的内容会自动整合到一起。该笔记带有原字幕文档的链接,可以反向追溯,也可以自己写入和编辑笔记。

如果视频一次没看完,下次重新打开看时,只要笔记的文件名没改,下次的高亮文字仍会贴入同一个文档,同一个时间戳下的内容也会跟前次的笔记合并。所以建议在看完视频之前不要修改自动生成的笔记名。

翻译和语法解析都是用AI生成,如果要使用这两个功能,需要在设定中配置大模型,提供了标准的OpenAI和anthropic接口。目标翻译语言可以自己设置,我测试了翻译为中英法三语效果都还可以。

现在最大的问题是语法解析有点慢,AI说跟模型大小和解析算法有关。如果第一次提示timed out,重试一次一般即可正常使用。

安装文件已上传到github,下载后放到obsidian的plugin文件夹里就可以使用。现在还在摸索怎样发布到obsidian官方插件平台,如果成功就可以直接在obsidian插件社区搜索安装了。

第一次做了个能用的工具出来,我自己还是比较满意的,欢迎有同样需求的你试用并给我反馈。比心。

经验总结

这次vibe coding尝试了新的工作流。

以前我会在开启一个新项目时,先把我想要的所有功能列出来,设计要求写成设计规范文件,包括色卡,布局,字体等。一开始就跟claude code或ChatGPT把所有功能聊透。每一个功能,每一个流程跳转,想要的动效等等,一次性全聊清楚,然后写成PRD或者spec,生成implement plan,之后就照此执行。这样做的问题是,每个项目都太复杂了,在我还不熟悉claude code的工作方式、没法完全控制时,经常它一跑起来我就控制不了,不知道该在什么时候测试哪部分功能。或者突然一大堆任务涌来,这边要修改那边要调整,导致人非常疲惫。

这次采用小步慢跑的方式,一次只跟claude code聊一个功能。比如,先聊了shadowing mode这个功能的要求,大致的样式,给一个字幕文件作为参考,仅此而已。光这一个小功能claude code就提出了很多问题,然后生成了一份很长的spec以及一份更长的implement plan。

功能大致完成后,我再开始集中修改UI。

这次需要设计的部分比较少,主要是css样式,我发现在调整css样式这块,让claude code去改不如直接问Gemini然后自己手动改来得更快。有时只是改个颜色、调个圆角或者margin尺寸,vscode里几秒钟的事,claude code里就要消耗几百上千token。

有一回我想调整时间戳、翻译那几个标签和字幕块的相对位置,在claude code里调整一个多小时都没调好,我们进入了一个僵局,我好像无法让它理解「上面」这个词,不管说中文还是说on top of或者above,它好像都理解为靠近屏幕是「上面」。

第二天我直接问Gemini怎么调整,然后一分钟搞定了。不过之后因为修改别的代码使这几个组件的位置又出了问题,这次我再要claude code调整,换成说tab应在block的外面,它秒懂。

shadowing功能做完后,我再跟claude code聊高亮文字和添加笔记的功能,生成一份新的spec和implement plan再执行和调整,很顺利就做好了。当然,可能也因为这次的功能本身简单。但这样小步慢跑的方式的确让一切可控和清晰。

不过这次发现的新问题是,当我从项目文件夹下启动claude code,它好像就没有先读我根目录下的CLAUDE.md以及里面要求的核心文档比如rules.md而是直接开始任务。用了这么久没有管理,感觉我的claude code有点放飞了,已经不再完全按照我最初写好的要求来执行了。可能定期得维护管理一下。

C’est tout.

下载地址,欢迎使用并给我反馈及建议。

https://github.com/scarlett-s/obsidian-video-assistant