融合Anki与OpenAI的个人笔记管理实践——RecallNote

融合Anki与OpenAI的个人笔记管理实践——RecallNote

项目概览

RecallNote是一款基于SM-2算法的个人笔记应用，通过将笔记内容转化为记忆卡片，并结合科学的复习计划，帮助用户更有效地掌握和记忆知识。

开发初衷

源于本人在记录笔记时的痛点
痛点一：记了满满一长篇，复习时根本看不完。
痛点二：记录过的笔记一看过就忘，笔记数量多难以规划复习。
痛点三：为追求记录速度，笔记变成零散的关键词堆砌。

现有工具无法综合解决以上痛点：
传统笔记应用：只记录不复习，没有科学的记忆机制，笔记越积越多，最后变成“电子废纸”，动辄几千字的长篇笔记，复习时无从下手。
Anki ：编辑体验差，不支持Markdown，无法插入代码块/表格等技术内容
AI助手：对话记录散落各处，难以形成知识体系

项目定位

由于个人技术水平有限以及开发精力不足，这不是成熟产品，而是验证以下命题的实验：

“如何用卡片式+AI+间隔重复学习算法解决笔记管理以及遗忘问题？”

期待交流：正值暑假，技术交流开放，包括并不限于找茬代码缺陷/贡献优化思路/探讨设计取舍

项目：https://gitee.com/atuo-200/recall-note
联系邮箱: 2314393852@qq.com

✨ 功能特点

• 卡片式笔记管理：创建和组织笔记本—卡片，记录学习内容

• 间隔重复学习：基于SM-2算法的科学复习系统

• AI润色功能：一键优化笔记内容，提升表达质量

• Markdown支持：markdown文本格式化与预览功能

• 图片插入：支持直接粘贴图片到笔记中，并上传到第三方图床（图床服务相关代码在proxy-upload.js，请自行部署）
  

🔧 技术栈

选择了React+TypeScript前端（易维护、适合复杂交互），Flask+Supabase后端（Python方便算法开发，Supabase免费且免运维），搭配OpenAI API（快速实现AI优化）。

前端

• React 18
• TypeScript
• CSS Modules

后端

• Flask (Python)
• Supabase (数据库)
• OpenAI API (AI润色功能)

🚀 快速开始

安装步骤

1. 克隆仓库

git clone https://gitee.com/atuo-200/recall-note
cd recall_note

2. 安装前端依赖

npm install

3. 安装后端依赖

cd backstage_service
pip install -r requirements.txt

4. 环境配置

# 在backstage_service目录创建.env文件
cd backstage_service
touch .env

# 编辑.env文件，添加必要配置
UPLOAD_API_URL=your_upload_api_url
UPLOAD_API_TOKEN=your_upload api_token
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key
OPENAI_API_KEY=your_openai_api_key

5. 启动应用

# 启动后端服务（在backstage_service目录下）
python app.py

# 启动前端开发服务器（在项目根目录）
npm start

# 启动图床上传服务-端口转发，解决cors跨域问题（在项目根目录下）
node proxy-upload.js

6. 访问应用
   浏览器访问 http://localhost:3000

数据结构与存储

RecallNote使用Supabase作为数据存储解决方案。
supabase：一个基于PostgreSQL的开源Firebase替代品。

数据库表结构

notebooks表

字段名	类型	说明
id	uuid	主键
name	varchar	笔记本名称
card_count	integer	笔记本中的卡片数量
created_at	timestamp	创建时间

cards表

字段名	类型	说明
id	uuid	主键
notebook_id	uuid	外键，关联notebooks表
title	varchar	卡片标题
content	text	卡片内容（Markdown格式）
created_at	timestamp	创建时间
next_review	timestamp	下次复习时间
ease_factor	numeric	难度因子(SM-2算法参数)
repetition	integer	已复习次数
interval	integer	复习间隔(天)

实体关系图

Supabase配置

1. 创建项目：在Supabase控制台创建新项目

2. 创建数据表：执行以下SQL语句创建所需表

-- 创建笔记本表
CREATE TABLE notebooks (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name VARCHAR NOT NULL,
  card_count INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建卡片表
CREATE TABLE cards (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  notebook_id UUID REFERENCES notebooks(id) ON DELETE CASCADE,
  title VARCHAR NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  next_review TIMESTAMP WITH TIME ZONE NOT NULL,
  ease_factor NUMERIC DEFAULT 2.5,
  repetition INTEGER DEFAULT 0,
  interval INTEGER DEFAULT 0
);

-- 创建索引提升查询性能
CREATE INDEX cards_notebook_id_idx ON cards(notebook_id);
CREATE INDEX cards_next_review_idx ON cards(next_review);

3. 配置API访问：

在项目的.env文件中添加Supabase相关配置：

SUPABASE_URL=https://your-project-ref.supabase.co
SUPABASE_KEY=your-supabase-anon-key

API调用结构

应用通过以下API与Supabase数据库交互：

• 笔记本API (notebookApi.ts)

  • fetchNotebooks() - 获取所有笔记本
  • createNotebook(name) - 创建新笔记本
  • deleteNotebook(id) - 删除笔记本

• 卡片API (cardApi.ts)

  • fetchCards(notebookId?) - 获取特定笔记本或所有卡片
  • createCard(card) - 创建新卡片
  • updateCard(card) - 更新卡片内容
  • deleteCard(id) - 删除卡片

• 复习API (reviewApi.ts)

  • fetchReviewCards(notebookId?) - 获取今日待复习卡片
  • submitCardReview(cardId, quality) - 提交复习结果，更新复习计划

后端服务会处理数据转换、业务逻辑和Supabase的交互，前端通过这些API接口与数据进行交互而不需要直接处理数据库操作。

💻 开发指南

项目结构

新增组件

1. 在相应目录创建组件文件
2. 导入必要的依赖
3. 实现组件逻辑
4. 在适当位置引入并使用

样式修改

项目使用CSS Modules，每个组件样式文件命名为[ComponentName].module.css。修改样式后需更新对应的类型声明文件。

API调用

所有API调用都集中在各模块的API文件中（如notebookApi.ts, cardApi.ts, reviewApi.ts）。添加新的API调用时，请遵循现有模式。

📖 交互逻辑

创建笔记流程

复习流程

🤝 贡献指南

欢迎贡献代码、报告问题或提出新功能建议！请遵循以下步骤：

1. Fork项目
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 创建Pull Request

📝 未来计划

• 用户认证系统
• 数据导入/导出功能
• 移动应用版本

---

开发者: [阿坨]
联系方式: 2314393852@qq.com