Mindclear

Mindclear 是一款 AI 动画生成器，能够将抽象概念转化为精美的动画作品。基于 Next.js 14，支持多会话管理、作品库和分享功能。

✨ 主要功能

🎬 AI 动画生成

• 输入任何主题或概念，AI 自动生成完整的 HTML/CSS/JS 动画
• 支持双语旁白和电影级视觉效果
• 实时预览生成的动画

💬 多会话管理

• 创建和管理多个对话会话
• 每个会话保留完整的对话历史
• 支持会话重命名和删除

🎨 作品库

• 保存喜欢的生成结果为作品
• 为作品添加标题和描述
• 查看作品统计（观看次数等）

🔗 分享功能

• 一键生成分享链接
• 分享的作品可公开访问
• 自动复制分享链接到剪贴板

🚀 快速开始

安装步骤

1. 克隆或进入项目目录

cd mindclear

2. 安装依赖

npm install
# 或
pnpm install

3. 配置环境变量

cp .env.example .env

编辑 .env 文件，配置你的 API 密钥：

# 或使用 OpenAI 兼容 API
OPENAI_API_KEY="your-api-key"
OPENAI_BASE_URL="https://api.openai.com/v1"
LLM_MODEL="gpt-4"

4. 初始化数据库

npm run db:push

5. 启动开发服务器

npm run dev

6. 打开浏览器访问

访问 http://localhost:3000 开始使用！

📁 项目结构

mindclear/
├── prisma/
│   └── schema.prisma          # 数据库模型定义
├── src/
│   ├── app/                   # Next.js App Router
│   │   ├── api/              # API 路由
│   │   │   ├── sessions/     # 会话管理 API
│   │   │   ├── artworks/     # 作品管理 API
│   │   │   ├── generate/     # LLM 生成 API
│   │   │   └── share/        # 分享 API
│   │   ├── sessions/         # 会话页面
│   │   ├── artworks/         # 作品页面
│   │   ├── share/            # 分享页面
│   │   └── page.tsx          # 首页
│   ├── components/           # React 组件
│   │   └── SessionSidebar.tsx
│   └── lib/                  # 工具库
│       ├── db.ts            # Prisma 客户端
│       ├── llm.ts           # LLM 服务
│       └── utils.ts         # 工具函数
├── package.json
├── tsconfig.json
└── README.md

🗄️ 数据库

项目使用 SQLite 作为数据库，通过 Prisma ORM 管理。数据模型包括：

• Session - 会话
• Message - 消息
• Artwork - 作品

数据库命令

# 推送 schema 到数据库
npm run db:push

# 打开 Prisma Studio 可视化管理数据
npm run db:studio

🤖 LLM 配置

支持的模型

• OpenAI

  • gpt-4
  • gpt-4-turbo
  • gpt-3.5-turbo

• OpenRouter

  • anthropic/claude-3-5-sonnet
  • 其他 OpenRouter 支持的模型

配置示例

OpenAI:

OPENAI_API_KEY="sk-..."
OPENAI_BASE_URL="https://api.openai.com/v1"
LLM_MODEL="gpt-4"

OpenRouter:

OPENAI_API_KEY="sk-or-v1-..."
OPENAI_BASE_URL="https://openrouter.ai/api/v1"
LLM_MODEL="anthropic/claude-3-5-sonnet"

📝 使用指南

1. 创建会话

• 点击首页的「开始创作」或侧边栏的「新建会话」
• 系统会自动创建一个新会话

2. 生成动画

• 在聊天框中输入主题，例如：
  • "冒泡排序"
  • "熵增定律"
  • "欧拉公式"
• 点击「生成」按钮
• AI 会实时生成动画代码
• 右侧预览面板会实时显示动画效果

3. 保存作品

• 生成满意的动画后，点击「保存为作品」
• 输入作品标题
• 作品将保存到作品库

4. 管理作品

• 访问「我的作品库」查看所有作品
• 点击作品可查看详情、编辑信息
• 支持删除不需要的作品

5. 分享作品

• 在作品详情页点击「分享」
• 系统生成唯一分享链接
• 链接自动复制到剪贴板
• 其他人可通过链接访问你的作品

🛠️ 开发

可用命令

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start

# 代码检查
npm run lint

# 数据库推送
npm run db:push

# 打开数据库管理界面
npm run db:studio

技术栈

• 框架: Next.js 14 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS
• 数据库: SQLite + Prisma
• AI: OpenAI SDK / Google Generative AI
• 状态管理: React Hooks

🔧 部署

Vercel 部署

1. 推送代码到 GitHub
2. 在 Vercel 导入项目
3. 配置环境变量（与 .env 文件相同）
4. 部署

注意: Vercel 部署时需要将 SQLite 替换为 PostgreSQL 或其他云数据库。

自托管

# 构建
npm run build

# 启动
npm start

📄 开源协议

本项目基于 MIT 协议开源。

灵感

灵感来于 fogsight.ai

---

Mindclear - 让抽象概念清晰成像

Powered by AI • Made with ❤️