漫画解说视频生成器 (Comic Video Generator)

这是一个基于 React 和 Vite 构建的 Web 应用，旨在帮助创作者快速将漫画截图和解说文案转化为带有运镜、特效和音效的解说视频草稿。

✨ 核心功能

1. 导入素材: 支持批量上传漫画截图，并可拖拽排序。
2. 脚本与配音:
   • 支持手动输入解说文案。
   • 支持导入 SRT 字幕文件自动生成文案片段。
3. AI 智能排版:
   • 接入大语言模型（支持 Google Gemini、DeepSeek、OpenAI），一键分析文案。
   • 自动为每段文案分配最合适的图片。
   • 自动设计运镜动画（放大、缩小、平移等）。
   • 自动设计入场/出场动画和音效。
   • 自动计算每段文案的建议展示时长。
4. 预览与导出:
   • 实时预览生成的视频效果（包含图片运镜、字幕显示、音效和背景音乐）。
   • 支持将排版数据导出为 JSON 格式，方便后续导入到专业的视频剪辑软件（如 Premiere、剪映等）中进行精细化处理。

🛠️ 技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• 样式: Tailwind CSS
• 图标: Lucide React
• AI 接口: @google/genai (Gemini), openai (DeepSeek/OpenAI)
• 后端服务: Express (用于处理跨域请求和简单的爬虫功能)

🚀 如何部署与运行

1. 环境准备

确保你的机器上已安装了 Node.js (建议 v18 或以上版本)。

2. 克隆项目并安装依赖

# 克隆项目到本地
git clone <your-repo-url>
cd <your-project-directory>

# 安装依赖
npm install

3. 配置环境变量

项目根目录下有一个 .env.example 文件。你需要创建一个 .env 文件，并根据需要填入环境变量：

cp .env.example .env

在 .env 文件中配置你的 API Keys（可选，如果你想在代码层面写死默认 Key）：

# Google Gemini API Key
GEMINI_API_KEY="your_gemini_api_key_here"

# DeepSeek API Key (如果需要默认使用 DeepSeek)
VITE_DEEPSEEK_API_KEY="your_deepseek_api_key_here"

注：用户也可以直接在应用的右上角“设置”面板中输入自己的 API Key，这些 Key 会保存在用户的浏览器本地存储中。

4. 本地开发运行

本项目采用了 Express + Vite 的全栈架构，以支持一些需要后端的 API（例如抓取网页图片）。

# 启动开发服务器
npm run dev

启动后，访问 http://localhost:3000 即可预览应用。

5. 生产环境构建与部署

# 构建生产版本
npm run build

# 启动生产服务器
npm start

构建完成后，dist 目录将包含前端的静态文件，npm start 会启动 Express 服务器来提供 API 服务并托管这些静态文件。你可以将整个项目部署到任何支持 Node.js 的云平台（如 Vercel, Heroku, Render, 腾讯云等）。

⚙️ AI 模型配置说明

应用右上角提供了一个设置面板，用户可以在此：

1. 选择默认使用的 AI 模型（Gemini / DeepSeek / OpenAI）。
2. 填入对应的 API Key。

注意：

• 填入的 API Key 仅保存在当前浏览器的 localStorage 中，不会上传到任何服务器，确保了密钥的安全性。
• 如果选择 DeepSeek 或 OpenAI，应用会直接在前端通过官方 SDK 发起请求。

📝 许可证

MIT License