🎓 大三学生独立开发 | 3215 行纯前端代码 | 开源免费

---

为什么做这个？

期末复习的时候，我在看 PPT 课件。密密麻麻几十页，手打笔记太慢，截图又乱得找不到。我问自己：能不能拍照就直接提取知识点，然后自动生成思维导图？

于是有了 KnowLeaf（知叶）。

---

知叶是什么？

简单说：一个 AI 驱动的随身智能笔记本。拍照或打字输入内容，AI 自动提取知识点，生成思维导图，然后按遗忘曲线帮你复习。

不仅限于学习——看书笔记、会议纪要、旅游攻略、菜谱收集，什么都能记。

🎯 在线体验

👉 立即试用 KnowLeaf

（建议手机打开，体验最佳）

---

三大板块，各司其职

📖 学习板块

功能	说明
文本输入	输入学习笔记，AI 自动提取知识点（学科/知识点/总结）
拍照上传	拍课件、PPT、书本，OCR 识别 + 知识点提取
思维导图	自动生成知识树，多层级嵌套，可折叠展开，支持按学科筛选
知识点编辑	修改学科/知识点/总结，自动移动到正确位置
AI 深度分析	核心概念、关键要点、易错提醒、记忆技巧、关联知识、自测题
知识详情页	维基百科风格，面包屑导航，上一条/下一条翻页
智能搜索	模糊匹配 + 关键词高亮，中文输入法无延迟
关联推荐	同科目下久未复习的知识自动推荐

📝 复习板块

功能	说明
艾宾浩斯算法	间隔 1→2→4→7→15→30→90 天，自动计算复习时间
卡片式问答	知识点名称 → 点击查看答案 → 答对/答错
进度追踪	待复习数、已掌握数、连续打卡天数
防刷机制	当天已完成复习后按钮变灰
从复习跳转学习	答完卡片点"查看详情"，直接跳到对应知识点

👤 我的

功能	说明
API 配置	多平台预设（通义千问/DeepSeek/SiliconFlow/Groq），自适应匹配模型
自带默认 Key	开箱即用，不用自己注册 API
数据统计	总条目/学科数/已掌握数/打卡天数
数据管理	导出 ZIP（JSON + 思维导图 PDF）、导入 JSON、清空数据
自动备份提醒	超过 7 天未导出，顶部黄色警告条提醒
IndexedDB 双保险	localStorage 丢失时自动从 IndexedDB 恢复
反馈功能	提交 Bug/建议，直接存本地随时查看

---

技术栈

层	技术
前端	纯 HTML/CSS/JS，单文件 3215 行，零依赖框架
思维导图	Markmap (D3.js)
存储	localStorage + IndexedDB 双保险
AI	OpenAI 兼容接口（默认通义千问 qwen-vl-max）
导出	jsPDF + JSZip（CDN 加载）
复习算法	自实现艾宾浩斯遗忘曲线
部署	GitHub Pages

为什么不拆文件？ 主场景是手机拍照提取知识点，电脑端偶尔深度整理。单文件架构够用，响应式 CSS 适配两端。

---

几个有意思的技术细节

1. 事件委托拯救 onclick

最初所有按钮都用 onclick 内联属性。但知识点内容带特殊字符（引号、尖括号）会导致 HTML 属性断裂，按钮静默失效。后来把所有点击事件迁移到 data-* 属性 + 事件委托模式，彻底解决。

2. 导出 Canvas 污染的坑

思维导图导出 PDF 时，SVG 里的 emoji 会被浏览器标记为"外部资源"，导致 Canvas 污染（Tainted Canvas）。解决方案：导出前清洗 SVG 中的 emoji 字符，用 toDataURL 验证未污染后再渲染。

3. AI 返回多对象拼接的 JSON

API 偶尔返回 {...}{...} 这种多对象拼接的非法 JSON。容错方案：正则匹配所有 {...} 块拆成数组，自动转成标准 JSON 数组。

4. 中文输入法防抖

搜索框用 compositionstart/compositionend 事件，中文输入法打字时不触发搜索，组合确认后才执行——搜"中断"不会再匹配到"计算机组成原理"里的"中"。

5. 图片存储从 localStorage 迁移到 IndexedDB

起初图片存 base64 在 localStorage，很快 5MB 就满了，而且清晰度差。改为图片存 IndexedDB，JSON 只存 imageId 引用，容量和清晰度问题同时解决。

---

🐛 我需要你的反馈！

这个项目还在快速迭代中。如果你试用了，发现 Bug 或者有任何想法，请告诉我：

方式一：App 内反馈入口 打开知叶 → 底部"我的" → "💬 反馈建议"，选类型填写提交即可。

方式二：GitHub Issues 直接提：https://github.com/jungleG-chin/knowleaf/issues

方式三：评论区留言 就在这篇文章下面留言，我会每条都看。

反馈什么都可以：

• 🐛 哪里崩了、卡了、不对劲

• 💡 你想要什么功能

• 😊 用起来什么感受（好的坏的都行）

• 📱 你用什么手机/浏览器

---

后续计划

1. 部署到国内：GitHub Pages 有时访问慢，考虑接 Gitee Pages 或国内云

2. HEIC 支持：iPhone 拍照格式兼容

3. 知识库薄弱点分析：AI 遍历知识库找薄弱点，针对性出题

4. 小程序版本：更方便的移动端体验

---

开源 & 协议

• 仓库：https://github.com/jungleG-chin/knowleaf

• 协议：MIT License

• 欢迎 Star ⭐️ 和 PR

---

📌 试用链接：https://jungleG-chin.github.io/knowleaf/mobile-web/

👨‍💻 作者：Jungle，大三在读，AI 方向

📧 联系：2829479480@qq.com