96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# ViGent2 Frontend
|
||
|
||
ViGent2 的前端界面，采用 Next.js 14 + TailwindCSS 构建。
|
||
|
||
## ✨ 核心功能
|
||
|
||
### 1. 视频生成 (`/`)
|
||
- **素材管理**: 拖拽上传人物视频，实时预览。
|
||
- **文案配音**: 集成 EdgeTTS，支持多音色选择 (云溪 / 晓晓)。
|
||
- **AI 标题/标签**: 一键生成视频标题与标签 (Day 14)。
|
||
- **进度追踪**: 实时显示视频生成进度 (10% -> 100%)。
|
||
- **结果预览**: 生成完成后直接播放下载。
|
||
- **本地保存**: 文案/标题自动保存，刷新后恢复 (Day 14)。
|
||
|
||
### 2. 全自动发布 (`/publish`) [Day 7 新增]
|
||
- **多平台管理**: 统一管理 B站、抖音、小红书账号状态。
|
||
- **扫码登录**:
|
||
- 集成后端 Playwright 生成的 QR Code。
|
||
- 实时检测扫码状态 (Wait/Success)。
|
||
- Cookie 自动保存与状态同步。
|
||
- **发布配置**: 设置视频标题、标签、简介。
|
||
- **定时任务**: 支持 "立即发布" 或 "定时发布"。
|
||
|
||
### 3. 声音克隆 [Day 13 新增]
|
||
- **TTS 模式选择**: EdgeTTS (预设音色) / 声音克隆 (自定义音色) 切换。
|
||
- **参考音频管理**: 上传/列表/删除参考音频 (3-20秒 WAV)。
|
||
- **一键克隆**: 选择参考音频后自动调用 Qwen3-TTS 服务。
|
||
|
||
### 4. 字幕与标题 [Day 13 新增]
|
||
- **片头标题**: 可选输入，视频开头显示 3 秒淡入淡出标题。
|
||
- **逐字高亮字幕**: 卡拉OK效果，默认开启，可关闭。
|
||
- **自动对齐**: 基于 faster-whisper 生成字级别时间戳。
|
||
|
||
### 5. 账户设置 [Day 15 新增]
|
||
- **手机号登录**: 11位中国手机号验证登录。
|
||
- **账户下拉菜单**: 显示有效期 + 修改密码 + 安全退出。
|
||
- **修改密码**: 弹窗输入当前密码与新密码，修改后强制重新登录。
|
||
|
||
### 6. 文案提取助手 (`ScriptExtractionModal`) [Day 15 新增]
|
||
- **多源提取**: 支持文件拖拽上传与 URL 粘贴 (B站/抖音/TikTok)。
|
||
- **AI 洗稿**: 集成 GLM-4.7-Flash，自动改写为口播文案。
|
||
- **一键填入**: 提取结果直接填充至视频生成输入框。
|
||
- **智能交互**: 实时进度展示，防误触设计。
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
- **框架**: Next.js 14 (App Router)
|
||
- **样式**: TailwindCSS
|
||
- **图标**: Lucide React
|
||
- **组件**: 自定义现代化组件 (Glassmorphism 风格)
|
||
- **API**: Axios 实例 `@/lib/axios` (对接后端 FastAPI :8006)
|
||
|
||
## 🚀 开发指南
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
默认运行在 **3002** 端口 (通过 `package.json` 配置):
|
||
|
||
```bash
|
||
npm run dev
|
||
# 访问: http://localhost:3002
|
||
```
|
||
|
||
### 目录结构
|
||
|
||
```
|
||
src/
|
||
├── app/
|
||
│ ├── page.tsx # 视频生成主页
|
||
│ ├── publish/ # 发布管理页
|
||
│ │ └── page.tsx
|
||
│ └── layout.tsx # 全局布局 (导航栏)
|
||
├── components/ # UI 组件
|
||
│ ├── VideoUploader.tsx # 视频上传
|
||
│ ├── StatusBadge.tsx # 状态徽章
|
||
│ └── ...
|
||
└── lib/ # 工具函数
|
||
```
|
||
|
||
## 🔌 后端对接
|
||
|
||
- **Base URL**: `http://localhost:8006`
|
||
- **代理配置**: Next.js Rewrites (如需) 或直接 CORS。
|
||
|
||
## 🎨 设计规范
|
||
|
||
- **主色调**: 深紫/黑色系 (Dark Mode)
|
||
- **交互**: 悬停微动画 (Hover Effects)
|
||
- **响应式**: 适配桌面端大屏操作
|