Vide Coding 了一个基于 AI 识别 PDF 目录页，自动生成 ToC 的 Web 应用

[Flyawayy]

https://tocify.vercel.app/

前端资源 + serverless api 全都直接用的 vercel 提供的服务，所以应该需要科学上网才能访问 ... 而且还加载了巨大的 NotoSerif 文件 （才能打印中文 font ），可能会更慢了... 不过在本地运行加个 Google API Key 应该就没这问题了。


使用路径如下 （依旧很多手工操作） ：

1. 选择并加载 PDF
2. 手动选择 ToC 所在的页
3. 点一下 Generate ToC 按钮
4. 再手动选一下真正的第一页的偏移


这是一个截图：



这是一个使用 demo:




---


我相信一定还有人在手动在 pdf reader 之类的软件里添加目录，找到这里的人希望对你有用吧 !


~~全 Vibe Coding ，0 技术含量，我已经不会写代码了~~

[even77]

求教，如何让 ai 生成好看的前端页面，😂让 ai 写 chrome 插件，页面是真的太丑了

[0xo]

好东西 手动赞一下

[Flyawayy]

@even77 这个我有一点点心得，首先是自己具有基础的排版 / 美学知识，知道什么地方好看什么不好看。 然后给自己要写的网页找一些标准风格，比如我这次的就是 Neobrutalism ，具体风格可以去 Pinterest 上多看看找找。https://www.bilibili.com/video/BV1anQwYZEw2 这个视频介绍了绝大多数风格但是它这个太大了，我们平时做网页是在 Web Design 那个子集就行。先写完基础的架子，然后发给 AI 风格名称让它改就行

[Flyawayy]

所以有无人测试能否真的使用 😂 我可能需要更多 edge case ..

[0xo]

挺好用的。
就是一开始交互上有点懵，按钮比较多，而左侧文案变化不明显，不知道是在选择 TOC 的起止。
https://makeityourself.org/MIY.pdf 这本书第一次失败了，第二次识别出多级的 work 了

[Flyawayy]

@0xo #5 感谢反馈，我是有打算给目录的选择再加一些引导! 这本书我试了一下，它好像本来就有双层目录，第一次失败的话可能 vercel/Gemini 那边服务返回异常了？🤔 这个成功率不知道怎么改进。 后面或许加上本地的 OCR 加快一点速度吧...

[0xo]

@Flyawayy 第一次识别出来是一层的，页码和内容也对得上，但生成的 TOC 页面空白，且 hover 左侧的条目不能跳转到页面

[Flyawayy]

@0xo #7 好的 原来是这样。根据 tocItems 动态在页面上渲染新增的 pdf 这个行为还挺废资源的，时常会阻塞住，我怀疑这个过程出现了什么问题 ... 需要把这个动态的渲染改得再顺滑一些

[even77]

@Flyawayy #3 感谢，学习了！

[Flyawayy]

append: 优化了一下 ui/ux !

[actopas]

logo 好像 Octotree

[Flyawayy]

又有新想法了 🤔 可以基于提取的 ToC 再做一些 Semantic Navigator ，根据因果关系构建知识图什么的。虽然实际没啥用处，但是可以做得很好看很炫