# AutoClip AI - 智能图文成片 **Repository Path**: papamenu/AutoClip ## Basic Information - **Project Name**: AutoClip AI - 智能图文成片 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-27 - **Last Updated**: 2025-11-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AutoClip AI - 智能图文成片 AutoClip AI 是一个基于 **Gemini** 与 **Veo** 的智能图文转视频 Demo 项目，支持从文本 / 文章链接生成分镜脚本，并一键调用 Veo / Imagen 生成画面、调用 Gemini TTS 生成旁白，实现「输入一段内容，自动产出一条短视频」的完整体验。 项目基于 **React + Vite + TypeScript** 构建，UI 采用现代化暗色界面，适合二次开发成自己的智能视频创作工具。 --- ## 功能特性 - **项目看板（Dashboard）** - 查看最近的创作项目卡片（标题、创建时间、状态、缩略图）。 - 支持从看板快速进入「新建项目」或继续编辑。 - **智能新建项目（Create Project）** - **多输入模式**：支持直接输入文本脚本、文章 URL，占位支持图片上传。 - **视频风格选择**：新闻快报、社媒卡点、电影叙事、商业演示等预设风格。 - **画面比例选择**：9:16 竖屏、16:9 横屏、1:1 方形，适配不同平台。 - **AI 分镜生成**：调用 Gemini `gemini-2.5-flash` 模型，对内容做语义分析与拆分，生成分镜脚本（旁白 + 画面描述 + 时长 + 场景类型）。 - **分镜编辑器（Editor）** - 时间轴视图查看每一个分镜（Scene），支持选中逐条编辑。 - 左侧大画布实时预览当前分镜画面（视频或图片）与字幕。 - 右侧 Inspector 支持编辑： - **旁白文案（Narration / TTS）** - **画面 Prompt（Visual Prompt）** - 一键调用 **Veo** 生成视频 或 **Imagen** 生成静态图片，更新到当前分镜。 - 播放控制：顺序播放所有分镜，并在播放时按分镜逐条生成并播放 TTS 音频。 - **项目管理与上下文** - 通过 `ProjectContext` 管理项目列表、当前项目、分镜列表及状态。 - 支持在不同页面之间共享当前项目数据（看板 / 创建 / 编辑）。 --- ## 技术栈 - **前端框架**：React 19 + React Router - **构建工具**：Vite - **语言**：TypeScript - **UI & 图标**：Tailwind 风格原子类 + `lucide-react` 图标 - **图表**：`recharts`（当前代码中依赖已引入，可按需使用） - **AI 能力**：基于 `@google/genai`： - 文本 → 分镜脚本：`gemini-2.5-flash` - 视频生成：`veo-3.1-fast-generate-preview` - 图片生成：`imagen-4.0-generate-001` - 文本转语音：`gemini-2.5-flash-preview-tts` --- ## 目录结构（简要） - **`App.tsx`**：全局路由配置（仪表盘 / 创建 / 编辑 / 设置）。 - **`pages/Dashboard.tsx`**：项目看板页。 - **`pages/CreateProject.tsx`**：新建项目与调用 AI 生成分镜脚本。 - **`pages/Editor.tsx`**：分镜编辑与预览、生成 Veo/Imagen 素材、TTS 播放。 - **`components/Layout.tsx`**：带侧边栏的应用整体布局。 - **`services/geminiService.ts`**：封装 Gemini、Veo、Imagen、TTS 的调用逻辑。 - **`store/ProjectContext.tsx`**：项目及分镜的 React Context。 - **`types.ts`**：项目、分镜、枚举类型定义。 - **`metadata.json`**：用于集成环境（如 AI Studio）的一些元信息。 --- ## 环境要求 - **Node.js**：建议 ≥ 18 - **包管理器**：本项目使用 **pnpm**（已在 `package.json` 中声明） 如本地尚未安装 pnpm，可通过下述命令全局安装： ```bash npm install -g pnpm ``` --- ## 快速开始 ### 1. 克隆项目 ```bash git clone cd AutoClip ``` ### 2. 安装依赖（使用 pnpm） ```bash pnpm install ``` ### 3. 配置 AI Key - **方式一：通过环境变量（推荐在本地开发 / 部署时使用）** - 在项目根目录创建 `.env` 文件，并写入： ```bash API_KEY=你的_Gemini_API_Key ``` - 代码中通过 `process.env.API_KEY` 获取该值（由构建工具注入）。 - **方式二：在 Google AI Studio 中选择 Key（适用于嵌入/托管场景）** - `services/geminiService.ts` 中提供了 `checkApiKeySelection` 方法，会尝试通过 `window.aistudio` 调用 `hasSelectedApiKey` / `openSelectKey`。 - 如果你在 AI Studio 的 iframe / 集成环境中运行该 App，可通过 UI 选择或绑定 Key。 > 注意：Veo 与 Imagen 等能力需要对应权限与配额，请确保你的 Key 已开通相关模型访问。 ### 4. 本地开发 ```bash pnpm dev ``` 默认会通过 Vite 启动开发服务器（通常为 `http://localhost:5173`，以终端输出为准）。 ### 5. 生产构建与预览 构建生产包： ```bash pnpm build ``` 本地预览构建结果： ```bash pnpm preview ``` --- ## 关键模块说明 - **AI 服务封装：`services/geminiService.ts`** - `analyzeAndScript`：将文本 / URL 内容传入 Gemini，生成结构化的分镜脚本数组。 - `generateVeoAsset`：调用 Veo 生成视频，轮询获取生成结果并返回可访问的 URI。 - `generateImage`：调用 Imagen 生成指定比例的图片（以 Base64 Data URL 返回）。 - `generateTTS`：基于 Gemini TTS 能力，将旁白文本转为音频 Data URL，用于 `