---
name: video-generation-flow-update
overview: 修改 VideoExplanation.vue 的视频生成流程，新增阶段二（调用 nano-banana 生成首尾帧图片），然后用首尾帧图片调用万相模型生成视频
todos:
  - id: import-config
    content: 导入 GRS_API_KEY，添加 storyboardImages 状态和 phase 枚举扩展
    status: completed
  - id: add-image-functions
    content: 新增 generateImageForShot 和 generateImagesFromStoryboard 函数
    status: completed
    dependencies:
      - import-config
  - id: modify-video-api
    content: 修改 generateSingleClip 为万相首尾帧视频 API 调用
    status: completed
    dependencies:
      - import-config
  - id: update-main-flow
    content: 修改 generateVideoFromScript 整合三个阶段
    status: completed
    dependencies:
      - add-image-functions
      - modify-video-api
  - id: update-ui
    content: 更新 UI 阶段指示器、进度显示和图片预览
    status: completed
    dependencies:
      - update-main-flow
---

## 用户需求

将视频生成流程修改为三阶段：

1. **阶段一（保持不变）**：解析试题，生成讲解文案 + 分镜脚本
2. **阶段二（新增）**：根据分镜调用 nano-banana 生成首尾帧分镜图片

- 每个分镜生成 2 张图片（首帧 + 尾帧）
- prompt 直接使用 storyboard[].visual
- 使用 nano-banana-pro 模型

3. **阶段三（修改）**：根据首尾帧图片调用万相 API 生成视频

- 使用万相首尾帧视频模型 wan2.2-kf2v-flash
- 视频时长固定 5 秒

## 关键变更

- storyboard 新增 firstFrameUrl、lastFrameUrl 字段存储图片
- phase 新增枚举值：firstFrame、lastFrame、video
- 视频时长从 15 秒改为 5 秒（万相模型限制）
- progress 重新分配：脚本 0-15%，首帧 15-40%，尾帧 40-65%，视频 65-98%

## 技术栈

- Vue3 Composition API
- axios HTTP 客户端
- Vite 代理（已配置 dashscope-api）

## 实现方案

### 新增状态

- `storyboardImages`: 存储每个分镜的首尾帧图片 URL 列表

### 新增/修改函数

1. **generateImageForShot(shot, frameType)**: 调用 nano-banana 生成单张图片
2. **generateImagesFromStoryboard()**: 遍历分镜生成所有首尾帧图片
3. **generateSingleClip()**: 改为调用万相首尾帧视频 API（wan2.2-kf2v-flash）

### API 调用

1. **nano-banana 图片生成**：

- URL: `https://grsai.dakka.com.cn/v1/draw/nano-banana`
- 参数: model="nano-banana-pro", prompt=visual, aspectRatio="16:9", imageSize="1K"

2. **万相首尾帧视频**：

- URL: `/dashscope-api/api/v1/services/aigc/image2video/video-synthesis`
- 参数: model="wan2.2-kf2v-flash", first_frame_url, last_frame_url
- resolution: "720P"

### 配置

- 复用 `src/config/index.js` 中的 GRS_API_KEY