CreateHub - 项目概览

项目简介

CreateHub 是一个基于人工智能的内容创作平台，提供多种AI驱动的创作工具，帮助用户快速生成专业级的多媒体内容。该平台支持视频制作、幻灯片生成、播客创作和语音合成等功能。

核心功能

🎬 AI 视频编辑

• 将复杂概念转化为引人入胜的视频内容
• 支持自动脚本生成和视觉场景创建
• 集成 Veo 2.0 视频生成引擎

📊 AI 幻灯片

• 创建令人惊叹的AI驱动演示文稿
• 智能内容组织和布局设计
• 专业的演示文稿生成

🎙️ AI 播客

• 将任何内容转化为专业播客
• 双人对话格式（Iris & Leo）
• 智能脚本生成和语音合成

🔊 AI 语音合成

• 自然的人声语音合成
• 基于 ElevenLabs 的高质量语音生成
• 多语言支持和多种声音选择

技术栈

前端技术

• React 18 - 用户界面框架
• TypeScript - 类型安全的JavaScript
• Vite - 现代化构建工具
• Tailwind CSS - 实用优先的CSS框架
• shadcn/ui - 高质量UI组件库
• React Router - 客户端路由
• React Query - 数据获取和状态管理
• React Hook Form - 表单处理

后端技术

• Supabase - 后端即服务平台
  • 数据库 (PostgreSQL)
  • 身份验证
  • 实时订阅
  • 存储服务
• Supabase Edge Functions - 无服务器函数

AI 服务集成

• Lovable AI Gateway - AI服务网关
  • Gemini 3 Flash (内容生成)
  • Gemini 2.5 Flash (图像生成)
  • Veo 2.0 (视频生成)
• ElevenLabs - 语音合成服务

开发工具

• ESLint - 代码质量检查
• Vitest - 单元测试框架
• PostCSS - CSS处理工具
• Autoprefixer - CSS自动添加厂商前缀

项目结构

createhub/
├── src/
│   ├── components/          # React组件
│   │   ├── ui/            # shadcn/ui组件
│   │   ├── explainer/     # 视频编辑相关组件
│   │   └── ...           # 其他功能组件
│   ├── contexts/           # React Context
│   │   ├── AuthContext.tsx    # 身份验证上下文
│   │   └── LanguageContext.tsx # 语言切换上下文
│   ├── integrations/       # 第三方服务集成
│   │   └── supabase/     # Supabase客户端配置
│   ├── pages/             # 页面组件
│   ├── hooks/             # 自定义Hooks
│   ├── lib/               # 工具函数
│   └── assets/            # 静态资源
├── supabase/
│   ├── functions/         # Edge Functions
│   │   ├── generate-content/   # 内容生成
│   │   ├── generate-media/     # 媒体生成
│   │   └── text-to-speech/    # 语音合成
│   ├── migrations/        # 数据库迁移
│   └── config.toml       # Supabase配置
├── public/               # 公共静态文件
├── docs/                 # 项目文档
└── 配置文件               # 各种配置文件

页面路由

主要页面

• / - 首页
• /auth - 身份验证页面
• /dashboard - 用户仪表板

功能页面

• /explainer-video - AI视频编辑
• /slides - AI幻灯片
• /podcast - AI播客
• /tts - AI语音合成

资源页面

• /docs - 文档
• /tutorials - 教程
• /blog - 博客
• /community - 社区
• /api - API文档
• /changelog - 更新日志

法律页面

• /privacy - 隐私政策
• /terms - 服务条款
• /cookies - Cookie政策

国际化支持

项目支持中英文双语切换：

• 中文（简体中文）
• 英文（English）

语言切换功能通过 LanguageContext 实现，支持全局语言状态管理。

开发脚本

{
  "dev": "vite",                    # 启动开发服务器
  "build": "vite build",            # 生产环境构建
  "build:dev": "vite build --mode development", # 开发环境构建
  "lint": "eslint .",               # 代码质量检查
  "preview": "vite preview",        # 预览构建结果
  "test": "vitest run",             # 运行测试
  "test:watch": "vitest"            # 监听模式运行测试
}

特色功能

🎨 现代化UI设计

• 响应式设计，支持多设备访问
• 优雅的动画和过渡效果
• 主题切换支持（亮色/暗色模式）
• 渐变色彩和现代视觉风格

🔐 安全的身份验证

• 基于Supabase Auth的安全认证
• 支持邮箱密码注册/登录
• 会话管理和自动刷新
• 用户元数据支持

📱 移动端优化

• 移动优先的响应式设计
• 触摸友好的交互体验
• 性能优化的移动端加载

🚀 高性能架构

• 基于Vite的快速开发构建
• React Query优化的数据获取
• 组件懒加载和代码分割
• 现代化的打包优化

部署支持

项目支持多种部署方式：

• Vercel - 推荐的部署平台
• Netlify - 静态站点部署
• 自托管 - 支持Docker容器化部署
• Lovable - 原生集成支持

---

该项目展现了现代Web应用的最佳实践，结合了前沿的AI技术，为用户提供了强大而易用的内容创作工具。