Skip to content

TECH_RESEARCH.md

Latest commit

 

History

History
227 lines (152 loc) · 5.69 KB

TECH_RESEARCH.md

File metadata and controls

227 lines (152 loc) · 5.69 KB

PopArt 技术预研文档

1. 产品需求分析

核心功能（v0.1）

  • 无限画布：支持自由缩放、平移的画布空间
  • AI 生图：集成 AI 图像生成能力
  • 图片二次操作：
    • 放大/缩放
    • 移除背景
    • 其他编辑功能（预留扩展性）

参考产品：Lovart

  • 无限画布工作区：单一画布完成所有操作
  • 多模型集成：GPT image-1, Flux Pro, OpenAI-o3 等
  • 自然语言交互：Talk-Tab-Tune 界面
  • 图层级编辑：精细化控制
  • 批量生成：一次最多 40 张图片

2. 技术方案对比

方案 A：tldraw

优势 ✅

  1. 开箱即用的无限画布

    • 专为无限画布设计的 SDK
    • 内置平移、缩放、选择等核心交互
    • 34k+ GitHub stars，社区活跃

  2. AI 集成能力强

    • 官方提供 @tldraw/ai 模块
    • Agent Starter Kit 支持多种 AI 提供商（Anthropic, OpenAI, Google）
    • 已有成熟的 AI workflow 参考（tldraw.computer）

  3. 自定义能力

    • 完全可定制的形状系统
    • 灵活的渲染和交互控制
    • 强大的运行时 API

  4. 开发效率高

    • React 原生支持
    • 高层抽象，减少底层细节处理
    • 完善的文档和示例

  5. 协作能力

    • 内置实时协作支持（未来可能需要）

劣势 ⚠️

  1. 灵活性受限

    • 抽象层次高，某些底层定制受限
    • 需要遵循 tldraw 的架构模式

  2. 性能边界

    • 对于极复杂的可视化可能不如 Konva.js

  3. 学习成本

    • 需要理解 tldraw 的形状系统和 API

适用场景 🎯

  • 快速验证产品概念（✅ v0.1 目标）
  • 需要完整的画布交互体验
  • AI 集成是核心功能
  • 重视开发效率

方案 B：Konva.js + react-konva

优势 ✅

  1. 完全控制

    • 底层 Canvas API 完全控制
    • 高度灵活的自定义能力
    • 适合复杂可视化

  2. 性能优秀

    • 直接操作 Canvas，性能最优
    • 适合大量图形渲染

  3. 成熟稳定

    • 11k+ GitHub stars
    • 长期维护，生态稳定

劣势 ⚠️

  1. 开发成本高

    • 需要手动实现无限画布逻辑
    • 缩放、平移、选择等交互需要从零构建
    • 代码量大，开发周期长

  2. 无 AI 集成方案

    • 需要自行设计 AI 集成架构
    • 缺少参考实现

  3. 学习曲线陡峭

    • 需要深入理解 Canvas API
    • 更多底层细节需要处理

适用场景 🎯

  • 需要极致性能和完全控制
  • 有复杂的自定义渲染需求
  • 团队有深厚的 Canvas 开发经验

3. 技术决策

v0.1 推荐：tldraw ⭐

决策理由

  1. 快速验证核心价值

    • 无限画布 + AI 生图是核心竞争力
    • tldraw 让我们专注于 AI 集成和用户体验
    • 2-3 周可完成基础版本 vs Konva 需要 6-8 周

  2. 技术风险可控

    • 官方 AI 集成方案降低不确定性
    • 丰富的社区实践和文档
    • 出问题有官方支持和社区帮助

  3. 可迭代性强

    • 自定义形状系统满足图片编辑需求
    • 预留了足够的扩展空间
    • 如果未来有性能瓶颈，可以局部替换

  4. AI 优先

    • @tldraw/ai 模块与我们需求高度契合
    • 支持多 AI 提供商，降低供应商锁定风险
    • 已有 LLM 集成的最佳实践

迁移策略（如需要）

如果后续发现 tldraw 无法满足需求：

  1. 数据层解耦：使用独立的状态管理，不强依赖 tldraw 的数据结构
  2. 模块化设计：AI 集成、图片处理等核心逻辑独立于渲染层
  3. 渐进式迁移：可以先迁移性能瓶颈部分，保留其他功能

4. 技术栈确定

核心技术栈

  • 框架：React 18+
  • 画布 SDK：tldraw v2
  • AI 集成：@tldraw/ai + Anthropic Claude / OpenAI
  • 样式：TailwindCSS
  • 状态管理：tldraw 内置 + Zustand（如需额外状态）
  • 图片处理：
    • AI 生图：Replicate API / Stability AI / OpenAI DALL-E
    • 背景移除：remove.bg API / RMBG-2.0
    • 图片放大：Real-ESRGAN API

开发工具

  • 构建工具：Vite
  • 类型检查：TypeScript
  • 代码规范：ESLint + Prettier
  • 测试：Vitest + React Testing Library

5. 技术风险评估

高风险 🔴

无（基于 tldraw 的成熟度）

中风险 🟡

  1. AI API 成本

    • 缓解：支持多提供商，价格比较
    • 缓解：实现请求限流和配额管理

  2. 图片处理性能

    • 缓解：异步处理 + 进度提示
    • 缓解：使用 Web Worker 避免阻塞 UI

低风险 🟢

  1. tldraw 学习曲线
    • 文档完善，示例丰富
    • 社区活跃，问题解决快

6. 竞品对比分析

特性 PopArt (规划) Lovart tldraw.computer
无限画布 ✅ ✅ ✅
AI 生图 ✅ ✅ ✅
多模型支持 ✅ 计划 ✅ ✅
图片编辑 ✅ ✅ ⚠️ 有限
批量生成 🔜 v0.2+ ✅ ❌
协作 🔜 v0.3+ ❌ ✅
开源 ✅ 计划 ❌ ❌

7. 下一步行动

  1. ✅ 技术预研完成
  2. ⏭️ 创建项目脚手架
  3. ⏭️ 实现基础无限画布
  4. ⏭️ 集成 AI 生图功能
  5. ⏭️ 实现图片二次编辑

结论：tldraw 是 v0.1 的最优选择，能够快速验证产品价值，同时保留了足够的技术灵活性。

关键成功因素：

  • 快速迭代，持续验证用户价值
  • 模块化设计，降低技术债务
  • 数据层与渲染层解耦，保持迁移可能性