# MVU 视频生成面板

入口：`src/page11.html`；交互代码：`src/page11-generator.js`。

参考页面：https://www.jxp.com/seedance/seedance-2-5 。浏览器实测日期：2026-09-30。

## 已实现的交互

根据源站 Seedance 2.5 页面的浏览器实测实现模式切换、文件选择/拖放、素材预览和删除、`@` 引用、示例提示词、清空、大窗口编辑、参数选择、4–30 秒时长，以及生成任务的提交、轮询、失败恢复、停止等待和结果下载。

上传限制按源站公开说明执行：图片最多 30 张、每张 30MB；视频最多 10 个、每个 200MB；音频最多 10 个、每个 15MB；总数最多 50。视频和音频各自累计不超过 30 秒，单个文件 2–30 秒；视频 480p–4K。浏览器不能预览的 HEIC/HEIF/TIFF 只校验扩展名、类型和大小。服务端接入后必须重新校验，不能信任前端。

草稿和素材仅在当前页面内保留，刷新会丢失。右侧视频是参考站示例，不是本地生成结果。未配置服务时点击生成会明确提示不可用，不会模拟成功。未登录源站提交会要求登录，未验证其付费生成流程。

`Recreate` 会恢复该结果的参数、提示词与素材；默认示例对应 `demo.mp4` 和 `sample-reference-1.png`。播放使用浏览器原生视频控件。示例提示词为本地简写，不是源站完整长提示词的逐字副本。

## 案例瀑布流

`creations/data.json` 保存源站公开展示的 20 条案例及其提示词、画幅、时长、分辨率和参考素材关系；对应封面、视频和参考图片均在 `creations/` 下。视频文件保留源站版本，约 458MB，未进行有损压缩。

列表按原始横竖比例分列，悬停或键盘聚焦时显示静音图标并从头循环播放，不显示原生工具条。移开、滚出可视区或切到后台时暂停、归零并恢复封面，不清空已有缓冲。距离视口 300px 的视频开始预加载；缓冲达到 2 秒后降为 metadata 提示，实际下载量由浏览器决定，不能保证弱网下立即播放。

详情弹窗自动播放，提供原生播放、进度、音量和全屏工具条；提示词使用细圆角滚动条。可查看提示词、预览参考图片、下载视频或使用 Recreate 回填生成表单。回填不会提交生成请求。

预览服务 `templates-preview.service` 使用独立 Nginx 配置 `preview/nginx.conf`，地址仍为 `:8088`。Nginx 支持 MP4 字节范围请求（206），避免旧 Python 静态服务在视频索引位于文件尾部时下载整个文件才能播放。该实例不改动其他 Nginx 站点。

## 后续 API 接入

供应商尚未确定，因此不能保证任意 API token 都能直接使用。不要把供应商密钥写入 HTML、浏览器存储或此目录。由同源后端保管密钥并转换供应商接口，前端只设置服务地址：

```html
<script>
  window.MVU_VIDEO_CONFIG = { baseUrl: '/api/video', pollIntervalMs: 2000 };
</script>
<script src="page11-generator.js"></script>
```

该配置放在交互脚本之前；现有页面不默认启用服务。

- `POST /api/video/jobs`：`multipart/form-data`。`request` 为 JSON，包含 `version`、`mode`、`model`、`prompt`、`resolution`、`aspectRatio`、`duration`、`references`。素材通过 `reference_0`、`reference_1` 等字段发送；每条引用的 `field` 对应文件字段。文生视频不发送素材。
- 接收响应：`{"id":"job-123","status":"queued"}`。
- `GET /api/video/jobs/job-123`：返回 `queued` 或 `running`，可附加 0–100 的 `progress`。
- 成功响应：`{"id":"job-123","status":"succeeded","videoUrl":"/outputs/video.mp4"}`；失败返回 `failed` 或 `cancelled`。
- 默认 15 分钟后停止等待，可配置 `timeoutMs`。停止等待只中断浏览器请求，不代表服务端已取消任务或退款。

后端还需实现身份鉴权、限流、模型参数映射、素材上传、任务查询和真实错误转换。视频 URL 必须能被当前浏览器播放；需强制下载时由同源服务返回 `Content-Disposition: attachment`。

## 验证

已有 Playwright 环境下运行：

```bash
rtk proxy env PLAYWRIGHT_MODULE=/tmp/codex-pw/node_modules/playwright-core CHROME_BIN=/root/.cache/ms-playwright/chromium-1200/chrome-linux64/chrome node tests/page11-generator.cjs
```

测试覆盖桌面/移动端、亮暗主题、上传校验、模式和提示词工具、参数、模拟服务提交/轮询/错误/中止。模拟仅在测试浏览器的请求拦截中启用，不会调用真实模型或消耗额度。