Tauri 开源 - 从零打造一款跨端的 AI 笔记

大家好，我是 codexu。从今天开始，我将撰写一个关于 Tauri 跨端开发的系列文章，分享我在开发笔记 APP 过程中所采用技术和遇到的问题。

我开发的笔记 APP 起名为 NoteGen，“Gen” 的含义是生成，目前还处于 alpha 阶段，PC 端已经实现了核心功能，大家可以自行下载试用，完全免费，这里不对软件进行过多的介绍，有兴趣的伙伴可以进入 Github 了解。

想法

• 关于写作，你更应该相信自己的大脑，大脑在放松的时候就会产生灵感，不应该依赖 AI。
• 关于工具，曾经听过一句话：要记住，有人没有现在的笔记软件，也写出了伟大的作品，比如在监狱里写书的人。
• 关于格式，我推崇 Markdown，专注能力的提升和产出，不在格式上浪费时间。

为什么想到要做一款笔记 APP？

为什么这么想不开做一个独立开发三件套之一的笔记呢？首先我不是个独立开发者，不指望用这个赚钱，另一方面我只是想为写作寻求一些灵感和案例，因为我之前用 Tauri 开发过一个小工具，并撰写了一篇文章《零 Rust 基础前端直接上手 Tauri 开发一个小工具》，收获了不少点赞。目前，Tauri 2.0 已经发布了正式版，并且移动端开发，因此我希望能进一步深入研究 Tauri，并计划开发一个更加复杂的软件。

我偶尔会写几篇技术文章，总结一下工作中的经验，或者记录一些有趣的技术。在这个过程中，我一直没有找到一款适合自己的笔记，平时可能就在 VSCode 中进行写作。因此，我萌生了自己造轮想法。以下是我对笔记 APP 的痛点总结：

1. 绝大多数的笔记都忽略了“记”这个难题。在研究某项技术或踩坑的过程中，我总是选择用大脑记录大概的情况。这是因为如果直接复制内容再去笔记中整理，并且视频或者某些网站无法进行文本复制，往往会极大程度地影响我的思路，导致两方面无法兼顾。
2. 同步数据需要付费，而我并不打算将钱花在笔记的同步功能上。此外，某些笔记应用可能在某天突然停止服务，这样的话我的数据就可能会丢失。因此，将数据保存在自己手中才是最安全选择。
3. 图床，对于经常使用Markdown写笔记的同学来说，图片的处理一直是个问题。通常需要借助第三方工具上传图片，再将生成的链接复制到笔记中，这一过程增加了许多繁琐的操作。
4. ChatGPT，每次在需要 AI 辅助写作时，都必须切换到其他软件执行，再将结果复制回来，操作过程得相当繁琐。将 AI 接入编辑器，是我在使用 vscode 中的 copilot 写笔记时获得的不错体验，这不仅能提供代码提示的效果，还无形中激发了我的一些灵感。

解决思路

按照上述的痛点，我进行了以下的需求分析：

如何记？

为了快速记录而不影响思路，我决定使用截图的方式，只需要快捷键和框选记录内容两步操作即可。随后交给 APP 解决后续的工作（后台进行），将截图保存，进行 OCR 识别，使用 ChatGPT 生成截图的描述（为了方便用户识别截图内容），此时的识别内容几乎无法使用，因为其中包含了很多识别错误的特殊符号，没有格式，不方便阅读，不过没关系，后续在记录完成后，整理文章时，ChatGPT 可以将这些难以阅读的文字帮我们整理好。

如何同步？

想要免费又安全地存放笔记文件，我唯一想到的方式就是借用 GitHub 仓库存放。很多小伙伴也是这样存放自己的笔记，而且还可以顺便生成博客。然而，这种方式的一个不便之处在于需要在本地安装 Git，并且需要使用相应的编辑器。而在端上，操作则更显繁琐。因此，我通过 GitHub Rest API 实现了文件的同步，这样一来，多端同步也变得轻松可行。此外，这种方法天生支持数据的回滚，极大地方便了笔记的管理和保存。

这些提交记录的 commit message 也适用 AI 生成的。

题外话，虽然我家里弄了一台 NAS，但我仍然无法完全信任的安全性，我更倾向于 Github 为主，Nas 为辅去同步 Github 仓库。

如何实现图床？

有些图床同样需要付费，并且依赖第三方软件进行上传，用户不能直接从笔记内部进行上传。在这样的情况下，我又想到了使用 GitHub 图床。虽然它需要公开仓库，但合 jsdelivr 加速，依然能够获得不错的体验，最重要的是这一切都是免费的。

当然，在使用图床时无需手动上传，截图时可以实现自动上传至图床。同时，在写作时可以方便地手动插入或整理自动上传的图片到笔记。

如何正确的使用 AI 辅助写作？

在生产代码方面，GitHub Copilot 或 Cursor 已经证明了 AI 在编程方面的非常有效，在写代码时已经完全离不开。通过代码的上下文和注释，加上人类显示声明需求，AI 能很好地完成写代码任务。

我在思考在写作的时候，是否也可以使用 ChatGPT 来辅助写作？

首先我认为，直接使用 AI 生成的文字，完全不能称作写作辅助，它们对写作毫无用处，甚至有反作用。利用不当会产生水文，我们现在已经明显能够感受到 AI 风格的水文越来越多，这社区的健康成长非常不利。

当我在 Vscode 中写作时，Copilot 也会像写代码一样，产生一段自动补全的文字内容。实际上我完全不需要这种补全或是生成一个段落，绝大多数的情况下都产生了一段废话，这不是写作，这是在制造垃圾。写作与写代码利用 AI 辅助应该是两种截然不同的思路，那么到底什么样的形式才是一个好的写作 Copilot?

1. 当我在写一篇技术性文章时，应该保持严谨性，我希望 AI 可以揪出文中漏洞，避免误导他人。
2. 纠正写作风格，例如错别字、语句不畅、内容冗余等。
3. 提供灵感，只求头脑风暴而不直接使用生成的文字。

技术选型

在 Tauri2 正式版发布前，我曾经用 Tauri1 实现了一个版本，跑通了基本的流程，证明这是一条可行之路，至少我乐在其中。但是笔记这条赛道已经卷到极致，我即使做了也未必可以得到正向回馈，所以另一个方面，我希望可以扩展一下自己的技术栈。

所以我推翻第一版，使用 Tauri2 + Next.js 的组合来实现，至少目前我已经熟练掌握了 Next.js，已不虚此行。

下面聊一下其他相关技术选型：

• UI: shadcn/ui，配合 lucide 图标，我很喜欢这套风格。
• 状态管理: zustand，从 vue pinia 过度很丝滑。
• Markdown 编辑器: 第一版采用的 vue，使用 md-editor-v3，这里不做其他尝试，选择 react 版本[md-editor-rt](https://github.com/imzbf/md-editor-rt)。
• OCR: 最初用了 rust 版本的 leptess，但是在 windows 上构建有问题，后直接使用 tesseract.js 解决。
• Github Rest API: 官方提供的库@octokit/core。
• 模糊查询: 全局搜索时用到，使用 fuse.js 实现。
• 数据库: SQLite，没找到方便的 ORM 接入方式，直接写 SQL。

Tarui2 采用了插件的方式来支持各种功能：

• tauri-apps/api: Tauri 基础的接口，提供了很多与后端的接口。
• tauri-apps/plugin-dialog: 本机系统对话框。
• tauri-apps/plugin-fs: 访问文件系统，笔记的文件管理使用到此功能。
• tauri-apps/plugin-global-shortcut: 绑定全局快捷键。
• tauri-apps/plugin-shell: 访问系统 shell，另一个主要功能是打开浏览器或者文件管理器。
• tauri-apps/plugin-sql: 提供接口前端与数据库交互。
• tauri-apps/plugin-store: 本地存储，记录一些系统配置时用到。
• tauri-apps/plugin-window-state: 记录窗状态。
• tauri-plugin-clipboard-api: 官方提供的剪贴板功能有限，这里使用第三方的插件。

结语

本文是 Tauri 开源系列的第一篇，大致介绍我开发的内容。在未来的更新中，我将持续完善这款笔记 APP，目前在编本文时，我已经开始使用该 APP。

我希望在未来的迭代中，能够吸引更多的用户，同时也能为有意入坑 Tauri 的朋友们提供帮助。在本的后续文章中，我将详细阐述实现的细节，分享我的开发经验与思考。