Skip to content

endlesschasey-ai/canvas-mind

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits
backend
backend
 
 
docs
docs
 
 
frontend
frontend
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
CLAUDE.md
CLAUDE.md
 
 
README.md
README.md
 
 

Repository files navigation

CanvasMind

Think in Elements. Create with Intelligence.

CanvasMind 是一个 AI Native 的多模态知识画布平台。用户可以在无限画布上自由排布多模态内容（文本、图片、音频、视频、文档），并通过自然语言与 AI 协作进行理解、学习与创作。

功能特性

核心功能（已实现）

用户认证

  • Email/密码注册和登录
  • Google OAuth 社交登录
  • JWT Token 管理和自动刷新
  • 用户会话同步

画布管理

  • 工作台画布列表
  • 画布创建/编辑/删除
  • 画布缩略图自动生成
  • 画布视口状态保存

画布编辑器

  • 无限画布（DOM 基础实现）
  • 元素拖拽、选择、缩放
  • 框选多元素
  • 元素删除和复制
  • 历史记录（Undo/Redo，50步）
  • 剪贴板操作（复制/剪切/粘贴）
  • 层级操作（置顶/置底/上移/下移）
  • 网格显示和吸附
  • 快捷键支持

多模态元素

  • Markdown 文本框 - 支持 Markdown 语法，双击编辑，实时预览
  • 图片元素 - 文件上传、绘图工具、滤镜效果
  • 视频播放器 - 进度条、音量、播放速度、全屏
  • 音频播放器 - 播放控制、音量、进度显示
  • 文档查看器 - PDF/Word/PPT/Excel 预览，分页浏览

UI 系统

  • Daisy 风格设计系统（新拟态 + 数字拼贴）
  • 响应式布局
  • 国际化支持（中文/英文）
  • 顶部工具栏（快速创建元素）
  • 左侧悬浮工具栏（工具选择）
  • 右侧属性面板
  • 底部 AI 输入框
  • 设置面板
  • 右键上下文菜单

待实现功能

AI 功能（框架已搭建）

  • AI 自然语言对话
  • 文本生成/续写/改写
  • 图片生成
  • 画布理解和问答
  • 智能布局

文件服务

  • 图片上传到 Supabase Storage
  • 视频/音频/文档上传

解析服务

  • PDF 文档解析
  • 图片 OCR
  • 音视频转录
  • 向量嵌入生成

技术栈

前端

技术 版本 用途
Next.js 14 应用框架 (App Router)
TypeScript 5 类型安全
Zustand 4.5 状态管理
Tailwind CSS 3.3 样式系统
Supabase Auth SDK - 用户认证
Axios - HTTP 客户端
Lucide React - 图标库

后端

技术 版本 用途
Python 3.13+ 运行时
FastAPI - Web 框架 (async)
SQLAlchemy 2.0 ORM (async)
Pydantic 2.0 数据验证
PostgreSQL 15+ 数据库 (via Supabase)
Redis 7.0+ 缓存/队列

基础设施

  • 认证: Supabase Auth
  • 存储: Supabase Storage
  • 数据库: Supabase PostgreSQL
  • 容器: Docker + Docker Compose

项目结构

canvas-mind/
├── frontend/                    # Next.js 前端
│   ├── src/
│   │   ├── app/                # 页面路由
│   │   │   ├── auth/           # 认证页面
│   │   │   ├── dashboard/      # 工作台
│   │   │   └── canvas/[id]/    # 画布编辑器
│   │   ├── components/
│   │   │   ├── ui/             # 基础 UI 组件
│   │   │   ├── canvas/         # 画布组件
│   │   │   └── elements/       # 元素组件
│   │   ├── store/              # Zustand 状态
│   │   ├── types/              # TypeScript 类型
│   │   └── lib/                # 工具库
│   └── package.json
│
├── backend/
│   ├── services/
│   │   ├── main/               # 主业务服务 (8000)
│   │   │   ├── app/
│   │   │   │   ├── api/v1/     # REST API
│   │   │   │   ├── models/     # 数据模型
│   │   │   │   ├── schemas/    # Pydantic 模式
│   │   │   │   ├── services/   # 业务逻辑
│   │   │   │   └── core/       # 配置/安全
│   │   │   └── tests/          # 测试
│   │   ├── parse/              # 解析服务 (8001)
│   │   └── agent/              # AI Agent 服务 (8002)
│   └── docker/
│       └── docker-compose.yml
│
├── docs/
│   ├── PRD.md                  # 产品需求
│   ├── FRONTEND_ARCHITECTURE.md
│   └── BACKEND_ARCHITECTURE.md
│
└── CLAUDE.md                   # AI 助手指南

快速开始

环境要求

  • Node.js 18+
  • Python 3.13+
  • pnpm
  • Poetry 或 uv
  • Docker (可选)

前端开发

cd frontend

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env.local
# 编辑 .env.local 填入 Supabase 配置

# 启动开发服务器
pnpm dev

# 访问 http://localhost:3000

后端开发

cd backend/services/main

# 安装依赖
poetry install
# 或: uv sync

# 配置环境变量
cp .env.example .env
# 编辑 .env 填入数据库和 API 密钥

# 启动服务
poetry run uvicorn app.main:app --reload --port 8000

# API 文档: http://localhost:8000/docs

Docker 部署

cd backend/docker
docker-compose up -d

API 端点

认证

POST   /api/v1/auth/sync         # 同步 Supabase 用户
GET    /api/v1/auth/me           # 获取当前用户
PATCH  /api/v1/auth/me           # 更新用户信息

画布

GET    /api/v1/canvases          # 画布列表
POST   /api/v1/canvases          # 创建画布
GET    /api/v1/canvases/{id}     # 画布详情
PATCH  /api/v1/canvases/{id}     # 更新画布
DELETE /api/v1/canvases/{id}     # 删除画布

上传

POST   /api/v1/upload/cover      # 上传画布封面
GET    /api/v1/upload/cover/{id} # 获取画布封面

快捷键

快捷键 功能
Ctrl/Cmd + S 保存画布
Ctrl/Cmd + K 打开 AI 输入框
Ctrl/Cmd + , 打开设置
Ctrl/Cmd + Z 撤销
Ctrl/Cmd + Shift + Z 重做
1 / 2 / 3 / 4 切换工具
N 创建文本框
I 创建图片
A 创建音频
V 创建视频
D 创建文档
Delete 删除选中元素

设计系统

CanvasMind 采用 Daisy Style 设计系统，融合新拟态和数字拼贴风格。

配色

  • 背景: Cream #f9f9f7
  • 文字/边框: Ink #1a1a1a
  • 强调色: Yellow, Pink, Blue, Green (柔和色调)

视觉特征

  • 硬阴影（2-8px 偏移，纯黑）
  • 大圆角（12-16px）
  • 2px 实线边框
  • 卡片轻微旋转（1-2度）
  • 点阵/网格背景

字体

  • 标题: Playfair Display (衬线)
  • UI/代码: Space Mono (等宽)
  • 系统: Inter (无衬线)

开发路线图

Phase 1: 核心画布 ✅

  • 用户认证系统
  • 画布管理
  • 多模态元素
  • 基础编辑操作
  • 历史记录

Phase 2: AI 能力 🚧

  • AI 对话功能
  • 内容生成
  • 智能布局
  • 语义搜索

Phase 3: 高级功能

  • 文件上传服务
  • 文档解析
  • 实时协作
  • 画布分享

环境变量

前端 (.env.local)

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx
NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1

后端 (.env)

# Supabase
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_ANON_KEY=eyJxxx
SUPABASE_SERVICE_KEY=eyJxxx
SUPABASE_JWT_SECRET=your-jwt-secret
SUPABASE_DATABASE_URL=postgresql+asyncpg://...

# Redis
REDIS_URL=redis://localhost:6379/0

# LLM (可选)
OPENAI_API_KEY=sk-xxx

测试

后端测试

cd backend/services/main

# 运行所有测试
pytest tests -v

# 单元测试
pytest tests/unit -v

# API 测试
pytest tests/api -v

# 覆盖率报告
pytest tests -v --cov

前端检查

cd frontend

# 类型检查和 Lint
pnpm lint

贡献指南

  1. Fork 本仓库
  2. 创建功能分支 (git checkout -b feature/amazing-feature)
  3. 提交更改 (git commit -m 'Add amazing feature')
  4. 推送分支 (git push origin feature/amazing-feature)
  5. 创建 Pull Request

代码规范

  • 前端: 遵循 ESLint + Prettier 配置
  • 后端: 遵循 PEP 8，使用类型提示
  • 提交信息: 使用语义化提交 (feat/fix/docs/refactor)

许可证

MIT License

致谢

CanvasMind - 让知识与创作在多模态空间中自由流动。

About

A multimodal AI-powered knowledge canvas where text, images, audio, video, tables, and data become intelligent elements for understanding, learning, and creation.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages