AI-Native Infinite Canvas for Creative Minds
用一句话描述你的想象，AI 帮你画出来
Quick Start • Features • Tech Stack • Deployment • Contributing
MakingLovart 是一个 AI 驱动的无限画布创作工具，灵感来源于 Miro + Lovart。你可以在白板上自由绘制、拖放素材，然后用自然语言提示词让 AI 生成图片、编辑图片、甚至生成视频——一切都在一个流畅的画布体验中完成。
Think of it as: Figma's infinite canvas + ChatGPT's intelligence + Stable Diffusion's creativity — all in your browser.
- Node.js ≥ 18
- A Gemini API Key (get one here)
# Clone
git clone https://github.com/Paker-kk/MakingLovart.git
cd MakingLovart
# Install dependencies
npm install
# Configure your API key
cp env.example .env
# Edit .env and add your GEMINI_API_KEY
# Start dev server
npm run devOpen http://localhost:3000 and start creating 🎉
- 无限缩放与平移的白板画布
- 自由绘制、形状、文字、箭头、线条等基础工具
- 多元素选择、对齐辅助线、图层管理
- 亮色 / 暗色主题自适应
- 文生图: 输入提示词，Gemini / DALL-E / SDXL 直接生成图片到画布
- 图生图: 选中画布上的图片 + 提示词 → AI 编辑
- 文生视频: Veo 2.0 视频生成，支持 16:9 / 9:16
- 首尾帧动画: 选中或 @引用起始帧图片，Veo 自动生成过渡动画视频
- LLM 提示词润色: 一键开关自动润色，生成前用 AI 优化你的提示词
- 在输入框中
@引用画布上的任意元素 - @引用的图片自动作为参考图注入生成流程
- 视频模式下优先使用选中图片或首张 @引用图片作为参考帧
- 支持 Google (Gemini/Imagen/Veo)、OpenAI (GPT/DALL-E)、Anthropic (Claude)、Stability (SDXL)、Qwen、Banana 等多家 AI 服务
- 按 Provider 自动推断可用模型，底部输入栏只显示已配置的模型
- API Key 验证 + 状态指示 + 生成前预检
- 选中一张角色图片 → 锁定为参考角色
- 后续生成自动注入角色描述，保持面部、发型、服装、体态一致性
- 角色 / 场景 / 道具分类素材管理
- 生成历史自动记录
- 一键将素材拖入画布
- 多画板管理，自由切换工作空间
- 右键菜单快捷操作
- 拖拽 / 粘贴上传参考图
- 效果预设保存与复用
- 国际化 (中/英双语)
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript 5.8 |
| Build | Vite 6 |
| Rich Text | Tiptap 3 (@mention, suggestion) |
| AI SDK | @google/genai (Gemini, Imagen, Veo) |
| Multi-Provider | OpenAI, Anthropic, Stability, Qwen, Banana |
| Styling | Tailwind CSS + CSS Custom Properties |
| Deployment | Docker + Nginx / Vercel / Static |
MakingLovart/
├── App.tsx # 主应用（画布、状态、生成逻辑）
├── index.tsx # 入口文件
├── types.ts # 全局类型定义
├── translations.ts # 国际化文案（中/英双语）
├── styles.css # 全局样式 & CSS 变量（亮色/暗色主题）
├── components/
│ ├── PromptBar.tsx # 底部智能输入栏（模式切换、模型选择、@mention）
│ ├── Toolbar.tsx # 左侧工具栏（绘制、形状、文字等）
│ ├── WorkspaceSidebar.tsx # 左侧面板（画板管理 + 图层面板）
│ ├── RightPanel.tsx # 右侧面板（生成设置 + 灵感/素材库）
│ ├── CanvasSettings.tsx # 设置面板 & API Key 管理
│ ├── LayerPanel.tsx # 图层管理面板
│ ├── InspirationPanel.tsx # 灵感 & 历史面板
│ ├── AssetLibraryPanel.tsx # 素材库面板
│ ├── BoardPanel.tsx # 画板管理面板
│ ├── RichPromptEditor.tsx # Tiptap 富文本编辑器
│ ├── CanvasMentionExtension.tsx # @mention 扩展
│ ├── MentionList.tsx # @mention 下拉列表
│ ├── QuickPrompts.tsx # 快捷提示词模板
│ ├── NodeWorkflowPanel.tsx # 节点工作流面板
│ ├── ConfigManager/ # API Key 配置管理组件
│ └── nodeflow/ # 节点编辑器内核
├── services/
│ ├── geminiService.ts # Google Gemini/Imagen/Veo API 封装
│ ├── aiGateway.ts # 多 Provider 路由网关
│ └── bananaService.ts # Banana Vision Agent
├── utils/
│ ├── assetStorage.ts # 素材持久化（localStorage）
│ ├── fileUtils.ts # 文件处理工具
│ ├── generationHistory.ts # 生成历史管理
│ └── uiScale.ts # 响应式 UI 缩放指标
├── tests/ # 自动化测试
│ ├── aiGateway.test.ts
│ ├── aiGatewayValidation.test.ts
│ ├── geminiService.test.ts
│ ├── generationHistory.test.ts
│ └── types.test.ts
├── Dockerfile # 多阶段 Docker 构建
├── docker-compose.yml # Docker Compose 编排
└── nginx.conf # Nginx 生产配置
# 一键启动
docker-compose up -d
# 访问
open http://localhost:3000npm run build
# 产物在 dist/ 目录，部署到任意静态服务直接连接 GitHub 仓库即可自动部署，零配置。
📖 详细部署指南请参考 DOCKER_GUIDE.md
在项目根目录创建 .env 文件:
# Required: Google Gemini API Key
GEMINI_API_KEY=your_gemini_api_key_here
# Alternative: Vite-prefixed (auto-exposed to client)
VITE_GEMINI_API_KEY=your_gemini_api_key_here更多 Provider 的 API Key 可在应用内 设置 → API 配置 中动态添加。
我们欢迎所有形式的贡献！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/amazing-feature) - 提交更改 (
git commit -m 'Add amazing feature') - 推送到分支 (
git push origin feature/amazing-feature) - 打开 Pull Request
📖 详细贡献指南请参考 CONTRIBUTING.md
📖 行为准则请参考 CODE_OF_CONDUCT.md
本项目受到以下优秀项目的启发：
如果这个项目对你有帮助，欢迎给我一个 Star ⭐，谢谢！这对我真的很重要！
本项目基于 Apache License 2.0 开源。