From 1ec2933e70afc10f7d2fa27c32c08da66a0ac0cd Mon Sep 17 00:00:00 2001
From: xuejianwu <374601383@qq.com>
Date: Thu, 30 Jul 2026 08:58:38 +0800
Subject: [PATCH] feat: deliver AI drama production demo
---
.env.example | 14 +
.gitignore | 10 +
README.md | 91 ++
lib/normalize.mjs | 36 +
package.json | 14 +
public/app.js | 1712 ++++++++++++++++++++++++++++++++++++++
public/index.html | 268 ++++++
public/styles.css | 270 ++++++
server.mjs | 740 ++++++++++++++++
tests/normalize.test.mjs | 26 +
10 files changed, 3181 insertions(+)
create mode 100644 .env.example
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 lib/normalize.mjs
create mode 100644 package.json
create mode 100644 public/app.js
create mode 100644 public/index.html
create mode 100644 public/styles.css
create mode 100644 server.mjs
create mode 100644 tests/normalize.test.mjs
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..5779eb5
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,14 @@
+# 快快 AI Hub 统一 Key：素材库与 Seedance 2.0 均使用 Bearer 鉴权
+KK_API_KEY=
+
+# 1 = 使用 Mock 数据评审流程；0 = 调用真实接口
+DEMO_MOCK=1
+
+PORT=4173
+HOST=0.0.0.0
+
+# 审计日志目录；线上请指向持久化磁盘或挂载卷
+AUDIT_LOG_DIR=./logs
+
+# 用于对 IP 等识别信息做不可逆哈希，线上请换成随机字符串
+AUDIT_HASH_SALT=
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bdc80db
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+.env.local
+.DS_Store
+node_modules/
+logs/
+
+# 仅用于本地设计回归，不属于客户部署包
+design-qa.md
+design-qa*.png
+qa/
+qa-*.jpg
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1808fec
--- /dev/null
+++ b/README.md
@@ -0,0 +1,91 @@
+# 营响力 AI 短剧数字人 Demo
+
+用于验证“数字人形象先进入快快网络素材库审核，再通过特别版 Seedance 2 生成短剧视频”的完整链路。
+
+页面拆分为两个一级模块：
+
+- **人物素材库**：负责素材入库、审核、历史素材查看与人物组合，是长期资产管理区。
+- **短剧生产**：以一个短剧项目管理多个片段；每段独立配置出场人物、提示词、图片、视频、连续性和生成参数。
+
+在人物素材库点击“用于短剧生产”，会把该人物绑定到当前场景角色并自动进入生产模块。
+
+短剧项目支持新增、复制、删除和调整片段顺序。每个片段可以生成多个候选版本，选定的正式版本会作为后续片段的连续性来源，并最终进入拼接清单。连续性模式包括：独立生成、引用上一片段选定视频、引用上一片段尾帧和仅使用手动参考视频。当前接口已支持上一片段视频作为 `reference_video` 自动传入；尾帧抽取和最终 MP4 拼接属于下一步服务端能力，页面会明确显示是否已具备前置条件。
+
+## 已串联的流程
+
+1. 输入数字人正面、侧面、背面三张公网图片 URL。
+2. 逐张调用 `POST /v1/assets/upload`，以统一 API Key 提交三张素材审核。
+3. 对仍在审核的 `mat_*` 素材调用 `GET /v1/assets/{asset_id}`，直至三张全部 `ready` 或出现 `failed`。
+4. 从全部历史素材中选择多张图片，绑定成可复用的人物/形象；三视图只是常见组合，不再是固定的数据结构。
+5. 为本场角色选择人物素材，并补充场景、道具等非人物图片及参考视频，组织成官方 `content` 数组后调用 `POST /sd/api/v3/contents/generations/tasks`。
+6. 用返回的 `id` 调用 `GET /sd/api/v3/contents/generations/tasks/{task_id}`，直至 `succeeded` 或 `failed`。
+
+视频提交后页面每 2.5 秒自动查询一次，最长持续 30 分钟。只有上游明确返回 `failed` 才显示生成失败；30 分钟仍为 `running` 时会保留“仍在生成”状态，不把等待超时误判为失败。任务 ID 会保存在浏览器本地，刷新或重新打开页面后会自动恢复查询。
+
+已完成的候选视频支持“下载视频”和“复制视频链接”。下载直接使用服务商返回的临时签名地址，不占用本 Demo 服务器的视频下载带宽；如果服务商没有返回附件响应头，浏览器可能先打开播放页，用户仍可保存。复制的是本 Demo 域名下以 `.mp4` 结尾的代理链接，可直接作为后续片段的公网参考视频；服务端会根据任务 ID 重新获取服务商的有效地址。
+
+短剧、片段、候选版本、任务 ID 和视频地址保存在当前域名的浏览器 `localStorage` 中。普通刷新不会丢失；清理网站数据、使用无痕模式、更换浏览器/设备/域名会丢失本地项目记录。在没有数据库和对象存储的当前版本中，仍建议用户及时下载成品。
+
+## 不可见审计日志
+
+客户页面不展示请求诊断。页面点击、参数修改、表单提交、视频播放/下载/复制链接、模块与片段切换、前端异常，以及服务端 HTTP 请求、上游调用、任务状态、耗时和错误都会写入 JSONL 日志。
+
+- 默认目录：`./logs/audit-YYYY-MM-DD-PID.jsonl`
+- 生产环境：用 `AUDIT_LOG_DIR` 指向持久化磁盘，并由技术配置日志保留/清理周期
+- 脱敏：不记录 API Key、Authorization、Cookie 和签名查询参数；提示词仅记录长度和哈希；URL 仅记录域名、路径与查询字段名
+- 关联排查：日志保留 `requestId`、浏览器 `clientId/sessionId`、任务 ID、服务商 `trackId`、状态码和耗时
+
+## 10–20 人试用的部署边界
+
+单实例 Node 服务可用于 10–20 人低频试用，但上线必须配置 HTTPS、访问鉴权/限流、进程守护和持久日志目录。所有用户共享同一个服务商 Key，需要另行确认上游 QPS、同时生成任务数和额度。`assetReviewTasks` 当前仍在单进程内存中，因此暂时应保持单实例部署；如果要多实例扩容，需先将任务状态迁入 Redis/数据库。
+
+页面会分别展示正面、侧面、背面的审核状态与失败原因。异步审核任务 ID 会保存在浏览器本地，刷新或重新打开页面后会继续查询；本场角色尚未选齐人物素材时不会解锁视频生成。
+
+人物库会读取全部历史素材，并把名称形如“人物名 · 正面/侧面/背面”的素材自动组合成人物；也可以手动选择 1–9 张历史素材创建人物组合。场景支持 1–3 个角色，每个角色可绑定一组人物素材，并在刷新后恢复本场角色。
+
+生产页支持文本、图片和视频三类输入。人物图片与场景、道具等其他参考图片共同占用单次最多 9 张图片额度；参考视频单独计数，当前 Demo 最多 3 条。最终请求按“文本 → 人物图片 → 其他参考图片 → 参考视频”的顺序写入 v3 `content` 数组，页面会同步生成图号和角色映射。
+
+所有第三方 token 都只放在本地服务端环境变量中，不进入浏览器，也不会写入 Git。
+
+## 本地运行
+
+```bash
+cp .env.example .env.local
+npm start
+```
+
+打开 `http://localhost:4173`。
+
+请优先通过这个地址访问，不要把 `public/index.html` 当成普通文档直接打开。页面现已兼容直接打开时的样式加载，但接口交互仍依赖本地服务。
+
+默认 `.env.example` 使用 Mock 模式，可以先完整评审交互。连接真实接口时设置：
+
+```bash
+KK_API_KEY=sk-统一接口Key
+DEMO_MOCK=0
+```
+
+Mock 模式下可将任一素材 URL 写成包含 `reject` 的地址，验证单张驳回、失败原因和视频生成锁定状态。
+
+## 当前还缺的真实联调材料
+
+- **快快 AI Hub 统一 Key**：形如 `sk-...`，同时用于新版素材库与 Seedance 2.0。
+- **数字人三视图的公网 URL**：正面、侧面、背面各一张；接口不支持直接上传本地文件或 Base64，URL 需带 `.png`、`.jpg` 等扩展名。
+- **客户希望验证的第一段分镜**：人物动作、台词、场景、时长、横竖屏及是否需要同步声音。Demo 已提供一段可替换示例。
+- **视频任务成功响应**：新版接口在 `content.video_url` 返回临时签名视频地址。
+
+## 接口边界
+
+- 素材审核与视频生成统一使用 `https://ai-api.kkidc.com` 和同一个 Bearer Key。
+- 新版素材库只在列表中返回 `ready` 素材；`pending` / `failed` 通过单素材接口查询。
+- 视频生成应长期保存 `asset://mat_*`，不要依赖临时签名视频地址。
+- 参考图/参考视频/首帧/首尾帧属于不同互斥调用方式；本 Demo 采用“多模态参考图”方式。
+- 默认视频 720p，时长 4–15 秒；真人/数字人必须使用审核通过的 `mat_*` 素材 ID。
+
+接口依据：[快快 AI Hub 最新文档](https://ai.kkidc.com/api-docs/8238027m0)。
+
+## 验证
+
+```bash
+npm test
+```
diff --git a/lib/normalize.mjs b/lib/normalize.mjs
new file mode 100644
index 0000000..be877de
--- /dev/null
+++ b/lib/normalize.mjs
@@ -0,0 +1,36 @@
+export function normalizeAssetReference(item = {}) {
+ const direct = item.asset_url || item.AssetURL || item.assetUrl;
+ if (typeof direct === "string" && /^asset:\/\//i.test(direct)) {
+ return `asset://${direct.slice(direct.indexOf("//") + 2)}`;
+ }
+
+ const id = item.downstream_asset_id || item.asset_id || item.Id || item.id;
+ return id ? `asset://${id}` : "";
+}
+
+export function extractVideoTaskId(payload = {}) {
+ return payload.task_id || payload.id || payload.data?.task_id || payload.data?.id || "";
+}
+
+export function extractVideoUrl(payload = {}) {
+ const candidates = [
+ payload.video_url,
+ payload.url,
+ payload.output?.video_url,
+ payload.output?.url,
+ payload.data?.video_url,
+ payload.data?.url,
+ payload.result?.video_url,
+ payload.result?.url,
+ payload.content?.video_url,
+ payload.content?.url,
+ ];
+ return candidates.find((value) => typeof value === "string" && /^https?:\/\//.test(value)) || "";
+}
+
+export function normalizeVideoStatus(payload = {}) {
+ const value = String(payload.status || payload.data?.status || "").toLowerCase();
+ if (["succeeded", "success", "completed", "done"].includes(value)) return "completed";
+ if (["failed", "error", "cancelled", "canceled"].includes(value)) return "failed";
+ return value || "processing";
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..df8be9c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "yingxiangli-ai-drama-avatar-demo",
+ "version": "0.1.0",
+ "private": true,
+ "type": "module",
+ "engines": {
+ "node": ">=20"
+ },
+ "scripts": {
+ "dev": "node --watch server.mjs",
+ "start": "node server.mjs",
+ "test": "node --test tests/*.test.mjs"
+ }
+}
diff --git a/public/app.js b/public/app.js
new file mode 100644
index 0000000..73f87d7
--- /dev/null
+++ b/public/app.js
@@ -0,0 +1,1712 @@
+window.__demoRuntimeErrors = [];
+document.documentElement.dataset.runtimeErrors = "0";
+function recordRuntimeError(message) {
+ window.__demoRuntimeErrors.push(message);
+ document.documentElement.dataset.runtimeErrors = String(window.__demoRuntimeErrors.length);
+ if (window.__auditReady) logClientOperation("frontend.runtime_error", { message: String(message || "").slice(0, 500) });
+}
+window.addEventListener("error", (event) => recordRuntimeError(event.message || "Unknown runtime error"));
+window.addEventListener("unhandledrejection", (event) => recordRuntimeError(String(event.reason || "Unhandled rejection")));
+
+const PENDING_REVIEW_KEY = "yingxiangli.pendingAssetReview";
+const PENDING_VIDEO_KEY = "yingxiangli.pendingVideoTask.v1";
+const LEGACY_GROUP_KEY = "yingxiangli.selectedAssetGroup";
+const SCENE_ROLES_KEY = "yingxiangli.sceneRoles.v1";
+const CHARACTER_LIBRARY_KEY = "yingxiangli.characterLibrary.v1";
+const DRAMA_PROJECT_KEY = "yingxiangli.dramaProject.v1";
+const AUDIT_CLIENT_KEY = "yingxiangli.auditClientId.v1";
+const AUDIT_SESSION_KEY = "yingxiangli.auditSessionId.v1";
+const VIEW_LABELS = ["正面", "侧面", "背面"];
+const ROLE_LETTERS = ["A", "B", "C"];
+const API_BASE = location.protocol === "file:" ? "http://localhost:4173" : "";
+const VIDEO_POLL_INTERVAL_MS = 2500;
+const VIDEO_POLL_MAX_MS = 30 * 60 * 1000;
+const DEFAULT_SHOT_PROMPT = "竖屏双人对话短剧镜头：角色 A 站在办公楼电梯口，先低头查看手机消息；角色 B 从走廊走近并停在她身侧。角色 B 说：“你真的决定了吗？”角色 A 抬头回答：“这一次，我自己做决定。”保持两名角色外观与各自参考图一致，避免交换五官、服装或身份。镜头从双人中景缓慢推进至角色 A 近景，口型与中文台词同步，环境声自然。";
+
+const state = {
+ config: null,
+ roles: [],
+ activeRoleIndex: 0,
+ pollTimer: null,
+ reviewStartedAt: 0,
+ assets: [],
+ characters: [],
+ characterDraftReferences: new Set(),
+ activeModule: document.body.dataset.activeModule || "library",
+ projectName: "未命名短剧",
+ shots: [],
+ activeShotId: null,
+ activeGenerationShotId: null,
+ activeGenerationVersionId: null,
+};
+
+const el = Object.fromEntries([
+ "connectionState", "assetForm", "assetFrontUrl", "assetSideUrl", "assetBackUrl", "assetName",
+ "assetStatus", "assetResult", "assetReferences", "assetList", "refreshAssets", "videoForm",
+ "videoStatus", "prompt", "referenceMap", "model", "ratio", "duration", "resolution",
+ "generateAudio", "watermark", "generationResult", "generationTitle", "generationTaskId",
+ "generationProgress", "progressBar", "generationElapsed", "generationLastChecked", "videoStage", "toast", "reviewButton",
+ "generateButton", "reviewElapsed", "reviewFront", "reviewSide", "reviewBack", "mockHint",
+ "sceneRoles", "addRoleButton", "activeRoleLabel",
+ "characterList", "createCharacterButton", "characterEditor", "characterName", "assetPickList",
+ "cancelCharacterButton", "saveCharacterButton", "assetHistoryCount", "extraImageInputs",
+ "referenceVideoInputs", "addExtraImageButton", "addReferenceVideoButton", "inputQuota",
+ "addShotButton", "shotList", "timelineSummary", "shotProgressBar", "continuityMode", "versionCount",
+ "versionList", "assemblyPanel", "assemblyList", "assemblyHint", "closeAssemblyButton",
+].map((id) => [id, document.getElementById(id)]));
+
+const reviewRows = [el.reviewFront, el.reviewSide, el.reviewBack];
+const auditClientId = getOrCreateAuditId(localStorage, AUDIT_CLIENT_KEY, "client");
+const auditSessionId = getOrCreateAuditId(sessionStorage, AUDIT_SESSION_KEY, "session");
+const auditQueue = [];
+const auditInputTimers = new Map();
+let auditFlushTimer = null;
+
+setupClientAudit();
+init();
+
+document.querySelectorAll(".module-tab").forEach((button) => {
+ button.addEventListener("click", () => switchModule(button.dataset.module));
+});
+
+async function init() {
+ try {
+ state.config = await api("/api/config");
+ restoreSceneRoles();
+ restoreCharacterLibrary();
+ restoreDramaProject();
+ renderConnection();
+ await loadAssets();
+ loadActiveShotIntoForm();
+ renderScene();
+ renderStoryboard();
+ resumePendingReview();
+ resumePendingVideo();
+ } catch (error) {
+ showToast(error.message, true);
+ el.connectionState.textContent = "本地服务连接失败";
+ el.connectionState.className = "connection blocked";
+ }
+}
+
+el.addRoleButton.addEventListener("click", () => {
+ if (state.roles.length >= 3) return showToast("当前 Demo 最多支持三个场景角色，人物图片总数不超过 9 张", true);
+ const role = createRole(`角色 ${ROLE_LETTERS[state.roles.length]}`);
+ state.roles.push(role);
+ if (activeShot()) activeShot().roleIds.push(role.id);
+ state.activeRoleIndex = state.roles.length - 1;
+ renderScene();
+ renderStoryboard();
+ saveDramaProject();
+});
+
+el.assetName.addEventListener("input", () => {
+ activeRole().name = el.assetName.value.trim() || `角色 ${ROLE_LETTERS[state.activeRoleIndex]}`;
+ renderRoleCards();
+ renderSceneSummary();
+ saveSceneRoles();
+});
+
+el.assetForm.addEventListener("submit", async (event) => {
+ event.preventDefault();
+ const role = activeRole();
+ role.name = el.assetName.value.trim() || `角色 ${ROLE_LETTERS[state.activeRoleIndex]}`;
+ setAssetStatus("processing", "审核中");
+ state.reviewStartedAt = Date.now();
+ setAllReviewRows("processing", "审核中", "正在提交");
+ updateReviewElapsed();
+ el.reviewButton.disabled = true;
+
+ try {
+ let result = await api("/api/assets/review", {
+ method: "POST",
+ body: JSON.stringify({
+ name: role.name,
+ images: [
+ { view: "front", url: el.assetFrontUrl.value.trim() },
+ { view: "side", url: el.assetSideUrl.value.trim() },
+ { view: "back", url: el.assetBackUrl.value.trim() },
+ ],
+ }),
+ });
+ if (Number(result.code) === 202 || normalizeAssetTaskStatus(result) === "processing") {
+ const taskId = result.task_id || result.data?.task_id || result.id;
+ if (!taskId) throw new Error("审核接口已受理，但没有返回任务 ID");
+ savePendingReview(taskId, role.id);
+ result = await pollAssetTask(taskId);
+ }
+ await finishAssetReview(result, role.id, role.name);
+ } catch (error) {
+ if (error.pending) {
+ setAssetStatus("processing", "仍在审核");
+ el.reviewElapsed.textContent = "仍在审核，可稍后回来查看";
+ } else {
+ setAssetStatus("error", "审核失败");
+ markUnresolvedRowsFailed(error.message);
+ clearPendingReview();
+ }
+ showToast(error.message, true);
+ } finally {
+ el.reviewButton.disabled = false;
+ }
+});
+
+el.videoForm.addEventListener("submit", async (event) => {
+ event.preventDefault();
+ updateActiveShotFromForm();
+ const quota = mediaQuota();
+ if (!activeShotRoles().every((role) => role.references.length > 0)) return showToast("请先为本片段每个出场角色选择人物素材", true);
+ if (!quota.valid) return showToast(quota.message, true);
+ if (activeShot().continuityMode === "previous_video" && previousShot() && !continuityReference()) {
+ return showToast("上一片段还没有可用的选定版本，请先完成上一段或调整衔接方式", true);
+ }
+
+ clearTimeout(state.pollTimer);
+ el.generateButton.disabled = true;
+ setVideoStatus("processing", "生成中");
+ setStep(4);
+ el.generationResult.classList.remove("hidden");
+ el.generationTaskId.textContent = "正在获取任务 ID…";
+ el.generationElapsed.textContent = "已等待 0 秒";
+ el.generationLastChecked.textContent = "尚未收到首次查询结果";
+ updateProgress(5, "任务正在提交");
+ resetVideoStage();
+ const shot = activeShot();
+ const version = {
+ id: `version-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+ status: "running",
+ taskId: "",
+ videoUrl: "",
+ lastFrameUrl: "",
+ createdAt: Date.now(),
+ lastCheckedAt: null,
+ progress: 5,
+ };
+ shot.versions.push(version);
+ state.activeGenerationShotId = shot.id;
+ state.activeGenerationVersionId = version.id;
+ saveDramaProject();
+ renderStoryboard();
+
+ try {
+ const result = await api("/api/videos", {
+ method: "POST",
+ body: JSON.stringify(buildVideoClientBody()),
+ });
+ const taskId = result.task_id || result.id || result.data?.task_id || result.data?.id;
+ if (!taskId) throw new Error("视频接口未返回任务 ID");
+ el.generationTaskId.textContent = taskId;
+ version.taskId = taskId;
+ saveDramaProject();
+ renderVersionList();
+ savePendingVideo(taskId, shot.id, version.id);
+ await pollVideoTask(taskId, shot.id, version.id);
+ } catch (error) {
+ const message = contextualizeGenerationError(error.message);
+ if (error.pending) {
+ if (activeShot()?.id === shot.id) {
+ setVideoStatus("processing", "仍在生成");
+ updateProgress(version.progress || 20, "仍在生成，正在自动查询结果");
+ }
+ showToast(message);
+ } else {
+ clearPendingVideo();
+ failShotVersion(shot.id, version.id, message);
+ if (activeShot()?.id === shot.id) {
+ setVideoStatus("error", "生成失败");
+ renderGenerationError(message);
+ }
+ showToast(message, true);
+ }
+ } finally {
+ finishGenerationUi(shot, version);
+ }
+});
+
+el.refreshAssets.addEventListener("click", loadAssets);
+el.createCharacterButton.addEventListener("click", openCharacterEditor);
+el.cancelCharacterButton.addEventListener("click", closeCharacterEditor);
+el.saveCharacterButton.addEventListener("click", saveCharacterFromDraft);
+[el.prompt, el.extraImageInputs, el.referenceVideoInputs].forEach((input) => input.addEventListener("input", () => {
+ updateActiveShotFromForm();
+ updateVideoAvailability();
+}));
+el.addExtraImageButton.addEventListener("click", () => addMediaInput("image"));
+el.addReferenceVideoButton.addEventListener("click", () => addMediaInput("video"));
+[el.extraImageInputs, el.referenceVideoInputs].forEach((list) => list.addEventListener("click", (event) => {
+ const removeButton = event.target.closest("[data-remove-media]");
+ if (!removeButton) return;
+ removeMediaInput(removeButton);
+}));
+el.continuityMode.addEventListener("change", () => {
+ updateActiveShotFromForm();
+ updateVideoAvailability();
+});
+el.addShotButton.addEventListener("click", addShot);
+el.closeAssemblyButton.addEventListener("click", () => el.assemblyPanel.classList.add("hidden"));
+el.model.addEventListener("change", () => {
+ if (el.model.value.includes("4k")) el.resolution.value = "4k";
+ else if (el.model.value.includes("1080")) el.resolution.value = "1080p";
+ else el.resolution.value = "720p";
+ updateActiveShotFromForm();
+});
+[el.ratio, el.duration, el.resolution, el.generateAudio, el.watermark].forEach((input) => {
+ input.addEventListener("change", updateActiveShotFromForm);
+});
+
+async function loadAssets() {
+ try {
+ const items = [];
+ const pageSize = 100;
+ for (let page = 1; page <= 50; page += 1) {
+ const result = await api(`/api/assets?page=${page}&page_size=${pageSize}&sort_order=Desc`);
+ const pageItems = result.data?.items || result.data?.Items || [];
+ items.push(...pageItems);
+ const total = Number(result.data?.total ?? result.data?.TotalCount ?? items.length);
+ if (!pageItems.length || items.length >= total || pageItems.length < pageSize) break;
+ }
+ state.assets = items;
+ ingestHistoricalCharacters(items);
+ renderCharacterLibrary();
+ renderAssetPicker();
+ el.assetHistoryCount.textContent = String(items.length);
+ el.assetList.innerHTML = "";
+ if (!items.length) {
+ el.assetList.innerHTML = '新版素材库暂无历史素材
';
+ return;
+ }
+ for (const item of items) {
+ const reference = normalizeAssetReference(item);
+ const position = referencePosition(reference);
+ const button = document.createElement("button");
+ button.className = `asset-item asset-card${position ? " selected" : ""}`;
+ button.type = "button";
+ if (position) button.dataset.order = `${ROLE_LETTERS[position.roleIndex]}${position.viewIndex + 1}`;
+ const imageUrl = item.original_url || item.URL || "";
+ if (imageUrl) {
+ const image = document.createElement("img");
+ image.src = imageUrl;
+ image.alt = item.purpose || item.Name || "素材预览";
+ image.loading = "lazy";
+ image.addEventListener("error", () => image.classList.add("image-error"));
+ button.appendChild(image);
+ }
+ const name = item.purpose || item.Name || fileNameFromUrl(imageUrl) || "未命名素材";
+ const info = document.createElement("div");
+ info.className = "asset-info";
+ info.innerHTML = `${escapeHtml(name)}${escapeHtml(reference)}`;
+ button.appendChild(info);
+ button.addEventListener("click", () => toggleHistoricalAsset(reference));
+ el.assetList.appendChild(button);
+ }
+ } catch (error) {
+ el.assetList.innerHTML = `${escapeHtml(error.message)}
`;
+ }
+}
+
+function ingestHistoricalCharacters(items) {
+ const groups = new Map();
+ for (const item of items) {
+ const purpose = String(item.purpose || item.Name || "").trim();
+ const match = purpose.match(/^(.+?)\s*[·・]\s*(正面|侧面|背面)$/);
+ if (!match) continue;
+ const reference = normalizeAssetReference(item);
+ if (!reference) continue;
+ if (!groups.has(match[1])) groups.set(match[1], []);
+ groups.get(match[1]).push({ reference, view: match[2] });
+ }
+ for (const [name, entries] of groups) {
+ const order = { 正面: 0, 侧面: 1, 背面: 2 };
+ const references = entries.sort((a, b) => order[a.view] - order[b.view]).map((entry) => entry.reference);
+ upsertCharacter(name, references, "history", false);
+ }
+ saveCharacterLibrary();
+}
+
+function renderCharacterLibrary() {
+ el.characterList.innerHTML = "";
+ if (!state.characters.length) {
+ el.characterList.innerHTML = '暂无已组合人物，可从历史素材新建
';
+ return;
+ }
+ for (const character of state.characters) {
+ const card = document.createElement("div");
+ const used = state.roles.some((role) => sameReferences(role.references, character.references));
+ card.className = `character-card${used ? " selected" : ""}`;
+ const head = document.createElement("div");
+ head.className = "character-head";
+ head.innerHTML = `${escapeHtml(character.name)}${character.references.length} 张人物素材`;
+ const thumbs = document.createElement("div");
+ thumbs.className = "character-thumbs";
+ for (const reference of character.references.slice(0, 5)) {
+ const asset = state.assets.find((item) => normalizeAssetReference(item) === reference);
+ const imageUrl = asset?.original_url || asset?.URL || "";
+ if (imageUrl) {
+ const image = document.createElement("img");
+ image.src = imageUrl;
+ image.alt = character.name;
+ thumbs.appendChild(image);
+ } else {
+ const placeholder = document.createElement("span");
+ placeholder.className = "character-thumb-placeholder";
+ thumbs.appendChild(placeholder);
+ }
+ }
+ const actions = document.createElement("div");
+ actions.className = "character-actions";
+ const useButton = document.createElement("button");
+ useButton.type = "button";
+ useButton.textContent = state.activeModule === "library" ? "用于短剧生产" : `用于角色 ${ROLE_LETTERS[state.activeRoleIndex]}`;
+ useButton.addEventListener("click", () => bindCharacterToActiveRole(character));
+ actions.appendChild(useButton);
+ if (character.source === "manual" && state.activeModule === "library") {
+ const removeButton = document.createElement("button");
+ removeButton.type = "button";
+ removeButton.className = "danger-link";
+ removeButton.textContent = "删除组合";
+ removeButton.addEventListener("click", () => {
+ state.characters = state.characters.filter((item) => item.id !== character.id);
+ saveCharacterLibrary();
+ renderCharacterLibrary();
+ });
+ actions.appendChild(removeButton);
+ }
+ card.append(head, thumbs, actions);
+ el.characterList.appendChild(card);
+ }
+}
+
+function bindCharacterToActiveRole(character) {
+ const otherRoleImages = state.roles.reduce((sum, role, index) => sum + (index === state.activeRoleIndex ? 0 : role.references.length), 0);
+ const extraImages = collectMediaInputUrls("image").length;
+ if (otherRoleImages + character.references.length + extraImages > 9) {
+ showToast(`绑定后图片总数将超过 9 张；当前其他角色与场景图已占 ${otherRoleImages + extraImages} 张`, true);
+ return;
+ }
+ const role = activeRole();
+ role.name = character.name;
+ role.characterId = character.id;
+ role.references = [...character.references];
+ if (activeShot() && !activeShot().roleIds.includes(role.id)) activeShot().roleIds.push(role.id);
+ renderScene();
+ if (state.activeModule === "library") switchModule("production");
+ showToast(`已将「${character.name}」用于角色 ${ROLE_LETTERS[state.activeRoleIndex]}`);
+}
+
+function switchModule(module) {
+ if (!['library', 'production'].includes(module)) return;
+ state.activeModule = module;
+ document.body.dataset.activeModule = module;
+ document.querySelectorAll('.module-tab').forEach((button) => {
+ button.classList.toggle('active', button.dataset.module === module);
+ });
+ renderCharacterLibrary();
+}
+
+function createShot(seed = {}, index = state.shots.length) {
+ return {
+ id: seed.id || `shot-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+ title: seed.title || (index === 0 ? "电梯口对话" : `片段 ${String(index + 1).padStart(2, "0")}`),
+ prompt: seed.prompt || DEFAULT_SHOT_PROMPT,
+ extraImageUrls: seed.extraImageUrls || "",
+ referenceVideoUrls: seed.referenceVideoUrls || "",
+ continuityMode: index === 0 ? "none" : (seed.continuityMode === "none" ? "none" : "previous_video"),
+ roleIds: Array.isArray(seed.roleIds) ? [...seed.roleIds] : state.roles.map((role) => role.id),
+ model: seed.model || "doubao-seedance-2-0-260128",
+ ratio: seed.ratio || "9:16",
+ duration: Number(seed.duration) || 5,
+ resolution: seed.resolution || "720p",
+ generateAudio: seed.generateAudio !== false,
+ watermark: Boolean(seed.watermark),
+ versions: Array.isArray(seed.versions) ? seed.versions : [],
+ selectedVersionId: seed.selectedVersionId || null,
+ };
+}
+
+function restoreDramaProject() {
+ let saved;
+ try { saved = JSON.parse(localStorage.getItem(DRAMA_PROJECT_KEY) || "null"); } catch { saved = null; }
+ state.projectName = String(saved?.name || "未命名短剧");
+ state.shots = Array.isArray(saved?.shots) && saved.shots.length
+ ? saved.shots.slice(0, 30).map((shot, index) => createShot(shot, index))
+ : [createShot()];
+ const roleIds = new Set(state.roles.map((role) => role.id));
+ state.shots.forEach((shot) => {
+ shot.roleIds = shot.roleIds.filter((id) => roleIds.has(id));
+ if (!shot.roleIds.length) shot.roleIds = state.roles.map((role) => role.id);
+ });
+ state.activeShotId = state.shots.some((shot) => shot.id === saved?.activeShotId) ? saved.activeShotId : state.shots[0].id;
+}
+
+function saveDramaProject() {
+ localStorage.setItem(DRAMA_PROJECT_KEY, JSON.stringify({
+ name: state.projectName,
+ activeShotId: state.activeShotId,
+ shots: state.shots,
+ }));
+}
+
+function activeShot() { return state.shots.find((shot) => shot.id === state.activeShotId) || state.shots[0]; }
+function shotIndex(shot = activeShot()) { return Math.max(0, state.shots.findIndex((item) => item.id === shot?.id)); }
+function previousShot(shot = activeShot()) { const index = shotIndex(shot); return index > 0 ? state.shots[index - 1] : null; }
+function selectedShotVersion(shot) { return shot?.versions?.find((version) => version.id === shot.selectedVersionId) || null; }
+
+function updateActiveShotFromForm() {
+ const shot = activeShot();
+ if (!shot) return;
+ shot.prompt = el.prompt.value;
+ shot.extraImageUrls = collectMediaInputUrls("image").join("\n");
+ shot.referenceVideoUrls = collectMediaInputUrls("video").join("\n");
+ shot.continuityMode = el.continuityMode.value;
+ shot.model = el.model.value;
+ shot.ratio = el.ratio.value;
+ shot.duration = Number(el.duration.value);
+ shot.resolution = el.resolution.value;
+ shot.generateAudio = el.generateAudio.checked;
+ shot.watermark = el.watermark.checked;
+ saveDramaProject();
+ renderShotList();
+ renderProjectSummary();
+}
+
+function loadActiveShotIntoForm() {
+ const shot = activeShot();
+ if (!shot) return;
+ el.prompt.value = shot.prompt;
+ renderMediaInputList("image", shot.extraImageUrls);
+ renderMediaInputList("video", shot.referenceVideoUrls);
+ el.continuityMode.value = shotIndex(shot) === 0 ? "none" : shot.continuityMode;
+ el.continuityMode.disabled = shotIndex(shot) === 0;
+ el.model.value = shot.model;
+ el.ratio.value = shot.ratio;
+ el.duration.value = String(shot.duration);
+ el.resolution.value = shot.resolution;
+ el.generateAudio.checked = shot.generateAudio;
+ el.watermark.checked = shot.watermark;
+ renderActiveShotGenerationState();
+}
+
+function renderStoryboard() {
+ renderProjectSummary();
+ renderShotList();
+ const shot = activeShot();
+ if (!shot) return;
+ el.continuityMode.value = shotIndex(shot) === 0 ? "none" : shot.continuityMode;
+ el.continuityMode.disabled = shotIndex(shot) === 0;
+ renderVersionList();
+ if (!el.assemblyPanel.classList.contains("hidden")) renderAssembly();
+}
+
+function renderProjectSummary() {
+ const selected = state.shots.filter((shot) => selectedShotVersion(shot)).length;
+ const seconds = state.shots.reduce((sum, shot) => sum + Number(shot.duration || 0), 0);
+ el.timelineSummary.textContent = `${selected}/${state.shots.length} 已选定 · 预计 ${seconds} 秒`;
+ el.shotProgressBar.style.width = `${state.shots.length ? (selected / state.shots.length) * 100 : 0}%`;
+}
+
+function renderShotList() {
+ el.shotList.innerHTML = "";
+ state.shots.forEach((shot, index) => {
+ const selected = selectedShotVersion(shot);
+ const running = shot.versions.some((version) => version.status === "running");
+ const failed = shot.versions.length > 0 && shot.versions.every((version) => version.status === "failed");
+ const card = document.createElement("div");
+ card.className = `shot-card${shot.id === state.activeShotId ? " active" : ""}`;
+ const stateClass = selected ? "ready" : running ? "running" : failed ? "failed" : "";
+ card.innerHTML = `${state.shots.length > 1 ? `` : ""}`;
+ card.querySelector(".shot-card-select").addEventListener("click", () => selectShot(shot.id));
+ card.querySelector(".shot-delete-button")?.addEventListener("click", () => deleteShotById(shot.id));
+ el.shotList.appendChild(card);
+ });
+}
+
+function selectShot(id) {
+ updateActiveShotFromForm();
+ state.activeShotId = id;
+ loadActiveShotIntoForm();
+ renderStoryboard();
+ renderSceneSummary();
+ updateVideoAvailability();
+ saveDramaProject();
+}
+
+function addShot() {
+ updateActiveShotFromForm();
+ const shot = createShot({ prompt: "请描述本片段的场景、出场人物、动作、台词、镜头与声音。" });
+ state.shots.push(shot);
+ state.activeShotId = shot.id;
+ loadActiveShotIntoForm();
+ renderStoryboard();
+ renderSceneSummary();
+ updateVideoAvailability();
+ saveDramaProject();
+}
+
+function duplicateActiveShot() {
+ updateActiveShotFromForm();
+ const source = activeShot();
+ const index = shotIndex(source);
+ const copy = createShot({ ...source, id: null, title: `${source.title} · 副本`, versions: [], selectedVersionId: null });
+ state.shots.splice(index + 1, 0, copy);
+ state.activeShotId = copy.id;
+ loadActiveShotIntoForm();
+ renderStoryboard();
+ updateVideoAvailability();
+ saveDramaProject();
+}
+
+function deleteShotById(id) {
+ if (state.shots.length <= 1) return showToast("至少保留一个片段", true);
+ const index = state.shots.findIndex((shot) => shot.id === id);
+ if (index < 0) return;
+ const shot = state.shots[index];
+ if (!window.confirm(`确定删除片段 ${String(index + 1).padStart(2, "0")}「${shot.title}」吗？\n该片段的候选视频记录也会一起删除。`)) return;
+
+ updateActiveShotFromForm();
+ let pending = null;
+ try { pending = JSON.parse(localStorage.getItem(PENDING_VIDEO_KEY) || "null"); } catch { pending = null; }
+ if (pending?.shotId === id) clearPendingVideo();
+ if (state.activeGenerationShotId === id) {
+ clearInterval(state.pollTimer);
+ state.pollTimer = null;
+ state.activeGenerationShotId = null;
+ state.activeGenerationVersionId = null;
+ }
+
+ state.shots.splice(index, 1);
+ if (state.activeShotId === id) state.activeShotId = state.shots[Math.min(index, state.shots.length - 1)].id;
+ state.shots[0].continuityMode = "none";
+ loadActiveShotIntoForm();
+ renderStoryboard();
+ renderSceneSummary();
+ updateVideoAvailability();
+ saveDramaProject();
+ logClientOperation("shot.delete", {
+ deletedShotId: id,
+ deletedIndex: index + 1,
+ hadRunningVersion: shot.versions.some((version) => version.status === "running"),
+ versionCount: shot.versions.length,
+ remainingShotCount: state.shots.length,
+ });
+ showToast("片段已删除");
+}
+
+function moveActiveShot(direction) {
+ const index = shotIndex();
+ const target = index + direction;
+ if (target < 0 || target >= state.shots.length) return;
+ const [shot] = state.shots.splice(index, 1);
+ state.shots.splice(target, 0, shot);
+ if (target === 0) shot.continuityMode = "none";
+ loadActiveShotIntoForm();
+ renderStoryboard();
+ saveDramaProject();
+}
+
+function activeShotRoles() {
+ return state.roles;
+}
+
+function continuityReference(shot = activeShot()) {
+ const previous = previousShot(shot);
+ const version = selectedShotVersion(previous);
+ if (!previous || shot.continuityMode === "none") return null;
+ if (shot.continuityMode === "previous_video") return version?.videoUrl ? { type: "video", url: version.videoUrl, version, previous } : null;
+ return null;
+}
+
+function effectiveVideoReferences() {
+ const manual = collectMediaInputUrls("video");
+ const continuity = continuityReference();
+ return [...new Set([...(continuity?.type === "video" ? [continuity.url] : []), ...manual])];
+}
+
+function effectiveExtraImageReferences() {
+ const manual = collectMediaInputUrls("image");
+ return [...new Set(manual)];
+}
+
+function renderVersionList() {
+ const shot = activeShot();
+ const versions = shot?.versions || [];
+ el.versionCount.textContent = versions.length ? `${versions.length} 个候选` : "暂无候选";
+ el.versionList.innerHTML = "";
+ if (!versions.length) {
+ el.versionList.innerHTML = '生成当前片段后，候选视频会出现在这里
';
+ return;
+ }
+ versions.slice().reverse().forEach((version, reverseIndex) => {
+ const number = versions.length - reverseIndex;
+ const card = document.createElement("div");
+ card.className = `version-card${shot.selectedVersionId === version.id ? " selected" : ""}`;
+ const preview = document.createElement("div");
+ preview.className = "version-preview";
+ if (version.videoUrl) {
+ const video = document.createElement("video");
+ video.src = version.videoUrl;
+ video.controls = true;
+ preview.appendChild(video);
+ } else preview.textContent = version.status === "running" ? "生成中" : version.status === "failed" ? "生成失败" : "暂无预览";
+ const details = document.createElement("div");
+ details.className = "version-copy";
+ details.innerHTML = `候选 ${number} · ${version.status === "completed" ? "已完成" : version.status === "running" ? "生成中" : "失败"}${escapeHtml(version.taskId || version.error || "等待任务 ID")}`;
+
+ const actions = document.createElement("div");
+ actions.className = "version-actions";
+ const selectButton = document.createElement("button");
+ selectButton.type = "button";
+ selectButton.className = "select-version-button";
+ selectButton.disabled = version.status !== "completed";
+ selectButton.textContent = shot.selectedVersionId === version.id ? "已选定" : "选为正式版本";
+ selectButton.addEventListener("click", () => selectShotVersion(shot.id, version.id));
+ actions.appendChild(selectButton);
+
+ if (version.status === "completed" && version.taskId && !version.mock) {
+ const download = document.createElement("a");
+ download.className = "video-action-link";
+ download.href = version.videoUrl;
+ download.textContent = "下载视频";
+ download.setAttribute("download", "");
+ download.target = "_blank";
+ download.rel = "noopener";
+
+ const copyLink = document.createElement("button");
+ copyLink.type = "button";
+ copyLink.className = "video-action-link";
+ copyLink.textContent = "复制视频链接";
+ copyLink.addEventListener("click", () => copyGeneratedVideoLink(version.taskId));
+ actions.append(download, copyLink);
+ }
+
+ card.append(preview, details, actions);
+ el.versionList.appendChild(card);
+ });
+}
+
+function videoProxyUrl(taskId) {
+ const base = API_BASE || location.origin;
+ return `${base}/api/videos/${encodeURIComponent(taskId)}/video.mp4`;
+}
+
+async function copyGeneratedVideoLink(taskId) {
+ const url = videoProxyUrl(taskId);
+ try {
+ if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(url);
+ else fallbackCopy(url);
+ showToast("视频链接已复制，可直接用作参考视频");
+ } catch {
+ fallbackCopy(url);
+ showToast("视频链接已复制，可直接用作参考视频");
+ }
+}
+
+function selectShotVersion(shotId, versionId) {
+ const shot = state.shots.find((item) => item.id === shotId);
+ if (!shot) return;
+ shot.selectedVersionId = versionId;
+ saveDramaProject();
+ renderStoryboard();
+ showToast(`已选定「${shot.title}」的正式版本`);
+}
+
+function renderAssembly() {
+ el.assemblyList.innerHTML = "";
+ let ready = 0;
+ state.shots.forEach((shot, index) => {
+ const version = selectedShotVersion(shot);
+ if (version) ready += 1;
+ const row = document.createElement("div");
+ row.className = "assembly-row";
+ row.innerHTML = `${String(index + 1).padStart(2, "0")}${escapeHtml(shot.title)}${version ? `${shot.duration} 秒 · 已选版本` : "待选版本"}`;
+ el.assemblyList.appendChild(row);
+ });
+ el.assemblyHint.textContent = ready === state.shots.length
+ ? `全部 ${ready} 个片段已选定，可进入服务端拼接与导出。`
+ : `还差 ${state.shots.length - ready} 个片段选定正式版本。`;
+}
+
+function openCharacterEditor() {
+ state.characterDraftReferences = new Set();
+ el.characterName.value = "";
+ el.characterEditor.classList.remove("hidden");
+ renderAssetPicker();
+}
+
+function closeCharacterEditor() {
+ el.characterEditor.classList.add("hidden");
+ state.characterDraftReferences.clear();
+}
+
+function renderAssetPicker() {
+ if (!el.assetPickList) return;
+ el.assetPickList.innerHTML = "";
+ if (!state.assets.length) {
+ el.assetPickList.innerHTML = '暂无历史素材
';
+ return;
+ }
+ for (const item of state.assets) {
+ const reference = normalizeAssetReference(item);
+ const imageUrl = item.original_url || item.URL || "";
+ const label = item.purpose || item.Name || reference;
+ const row = document.createElement("label");
+ row.className = "asset-pick";
+ const checkbox = document.createElement("input");
+ checkbox.type = "checkbox";
+ checkbox.checked = state.characterDraftReferences.has(reference);
+ checkbox.addEventListener("change", () => {
+ if (checkbox.checked && state.characterDraftReferences.size >= 9) {
+ checkbox.checked = false;
+ return showToast("一个人物素材组最多选择 9 张图片", true);
+ }
+ if (checkbox.checked) state.characterDraftReferences.add(reference);
+ else state.characterDraftReferences.delete(reference);
+ });
+ const image = document.createElement("img");
+ image.src = imageUrl;
+ image.alt = label;
+ const text = document.createElement("span");
+ text.textContent = label;
+ row.append(checkbox, image, text);
+ el.assetPickList.appendChild(row);
+ }
+}
+
+function saveCharacterFromDraft() {
+ const name = el.characterName.value.trim();
+ const references = [...state.characterDraftReferences];
+ if (!name) return showToast("请填写人物名称", true);
+ if (!references.length) return showToast("请至少选择一张人物素材", true);
+ upsertCharacter(name, references, "manual", true);
+ closeCharacterEditor();
+ renderCharacterLibrary();
+ showToast(`人物「${name}」已保存，共 ${references.length} 张素材`);
+}
+
+function upsertCharacter(name, references, source = "manual", persist = true) {
+ const existing = state.characters.find((item) => item.name === name);
+ if (existing) {
+ existing.references = [...new Set([...existing.references, ...references])].slice(0, 9);
+ if (source === "manual") existing.source = "manual";
+ } else {
+ state.characters.push({
+ id: `character-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+ name,
+ references: [...new Set(references)].slice(0, 9),
+ source,
+ });
+ }
+ if (persist) saveCharacterLibrary();
+}
+
+function sameReferences(left = [], right = []) {
+ return left.length === right.length && left.every((reference, index) => reference === right[index]);
+}
+
+function toggleHistoricalAsset(reference) {
+ const existing = referencePosition(reference);
+ if (existing) {
+ state.roles[existing.roleIndex].references.splice(existing.viewIndex, 1);
+ state.activeRoleIndex = existing.roleIndex;
+ } else {
+ const role = activeRole();
+ if (sceneReferences().length >= 9) {
+ showToast("本次人物图片已达到 9 张上限；请先取消其他图片", true);
+ return;
+ }
+ role.references.push(reference);
+ }
+ renderScene();
+}
+
+function renderScene() {
+ if (!state.roles.length) state.roles.push(createRole("角色 A"));
+ state.activeRoleIndex = Math.min(state.activeRoleIndex, state.roles.length - 1);
+ renderRoleCards();
+ renderActiveRole();
+ renderSceneSummary();
+ renderCharacterLibrary();
+ refreshAssetSelectionStyles();
+ updateVideoAvailability();
+ saveSceneRoles();
+ if (state.shots.length) renderStoryboard();
+}
+
+function renderRoleCards() {
+ el.sceneRoles.innerHTML = "";
+ state.roles.forEach((role, index) => {
+ const card = document.createElement("div");
+ card.className = `role-card${index === state.activeRoleIndex ? " active" : ""}`;
+ const select = document.createElement("button");
+ select.type = "button";
+ select.className = "role-select";
+ select.innerHTML = `${ROLE_LETTERS[index]}${escapeHtml(role.name)}${role.references.length} 张人物素材`;
+ select.addEventListener("click", () => {
+ state.activeRoleIndex = index;
+ renderScene();
+ });
+ card.appendChild(select);
+ if (state.roles.length > 1) {
+ const remove = document.createElement("button");
+ remove.type = "button";
+ remove.className = "role-remove";
+ remove.textContent = "×";
+ remove.title = `删除角色 ${ROLE_LETTERS[index]}`;
+ remove.addEventListener("click", (event) => {
+ event.stopPropagation();
+ const removedId = state.roles[index].id;
+ state.roles.splice(index, 1);
+ state.shots.forEach((shot) => {
+ shot.roleIds = shot.roleIds.filter((id) => id !== removedId);
+ if (!shot.roleIds.length && state.roles[0]) shot.roleIds = [state.roles[0].id];
+ });
+ state.activeRoleIndex = Math.max(0, Math.min(state.activeRoleIndex, state.roles.length - 1));
+ renderScene();
+ renderStoryboard();
+ saveDramaProject();
+ });
+ card.appendChild(remove);
+ }
+ el.sceneRoles.appendChild(card);
+ });
+ el.addRoleButton.disabled = state.roles.length >= 3;
+}
+
+function renderActiveRole() {
+ const role = activeRole();
+ const letter = ROLE_LETTERS[state.activeRoleIndex];
+ el.activeRoleLabel.textContent = `角色 ${letter} · 人物素材`;
+ el.assetName.value = role.name;
+ reviewRows.forEach((_, index) => {
+ const reference = role.references[index];
+ setReviewRow(index, reference ? "success" : "neutral", reference ? "已选择" : "待选择", reference || `下一张请选择${VIEW_LABELS[index]}图`);
+ });
+ el.reviewElapsed.textContent = `角色 ${letter} · 已选 ${role.references.length} 张`;
+}
+
+function renderSceneSummary() {
+ const completeRoles = state.roles.filter((role) => role.references.length > 0);
+ el.assetReferences.innerHTML = "";
+ for (const role of completeRoles) {
+ const index = state.roles.indexOf(role);
+ const title = document.createElement("div");
+ title.className = "role-reference-title";
+ title.textContent = `角色 ${ROLE_LETTERS[index]} · ${role.name}`;
+ el.assetReferences.appendChild(title);
+ role.references.forEach((reference, viewIndex) => {
+ const row = document.createElement("div");
+ row.className = "reference-row";
+ row.innerHTML = `${VIEW_LABELS[viewIndex] || `素材${viewIndex + 1}`}${escapeHtml(reference)}`;
+ el.assetReferences.appendChild(row);
+ });
+ }
+ el.assetResult.classList.toggle("hidden", completeRoles.length === 0);
+ const selected = state.roles.reduce((sum, role) => sum + role.references.length, 0);
+ setAssetStatus(sceneReady() ? "success" : "processing", sceneReady() ? `${state.roles.length} 个角色 · ${selected} 张人物图` : "请为每个角色选择人物素材");
+ el.referenceMap.textContent = buildReferenceMap();
+ renderInputQuota();
+}
+
+function updateVideoAvailability() {
+ const quota = mediaQuota();
+ renderInputQuota();
+ const running = runningShotVersion(activeShot());
+ if (running) {
+ el.videoForm.classList.remove("disabled-section");
+ el.generateButton.disabled = true;
+ setVideoStatus("processing", "生成中");
+ setStep(4);
+ renderActiveShotGenerationState();
+ return;
+ }
+ el.generateButton.disabled = false;
+ if (sceneReady() && quota.valid && state.config.videoReady) {
+ el.videoForm.classList.remove("disabled-section");
+ setVideoStatus("neutral", "可提交");
+ setStep(3);
+ } else {
+ el.videoForm.classList.add("disabled-section");
+ const label = !state.config.videoReady ? "缺少视频 Key" : !sceneReady() ? "等待角色" : quota.message;
+ setVideoStatus(!state.config.videoReady || !quota.valid ? "error" : "neutral", label);
+ setStep(sceneReady() ? 2 : 1);
+ }
+}
+
+function runningShotVersion(shot) {
+ return shot?.versions?.slice().reverse().find((version) => version.status === "running") || null;
+}
+
+function formatElapsed(startedAt) {
+ const seconds = Math.max(0, Math.floor((Date.now() - Number(startedAt || Date.now())) / 1000));
+ const minutes = Math.floor(seconds / 60);
+ const remainder = seconds % 60;
+ return minutes ? `${minutes} 分 ${remainder} 秒` : `${remainder} 秒`;
+}
+
+function formatCheckedAt(value) {
+ if (!value) return "尚未收到首次查询结果";
+ return `最近查询 ${new Date(value).toLocaleTimeString("zh-CN", { hour12: false })}`;
+}
+
+function renderGenerationMeta(version) {
+ el.generationElapsed.textContent = `已等待 ${formatElapsed(version.createdAt)}`;
+ el.generationLastChecked.textContent = formatCheckedAt(version.lastCheckedAt);
+}
+
+function renderActiveShotGenerationState() {
+ clearInterval(state.pollTimer);
+ state.pollTimer = null;
+ const version = runningShotVersion(activeShot());
+ if (!version) {
+ el.generationResult.classList.add("hidden");
+ el.generationElapsed.textContent = "";
+ el.generationLastChecked.textContent = "";
+ return;
+ }
+ el.generationResult.classList.remove("hidden");
+ el.generationTaskId.textContent = version.taskId || "正在获取任务 ID…";
+ resetVideoStage();
+ updateProgress(version.progress || 20, "正在自动查询生成结果");
+ renderGenerationMeta(version);
+ state.pollTimer = setInterval(() => {
+ if (activeShot()?.id !== state.activeGenerationShotId && version.id !== runningShotVersion(activeShot())?.id) return;
+ renderGenerationMeta(version);
+ }, 1000);
+}
+
+function finishGenerationUi(shot, version) {
+ renderStoryboard();
+ if (activeShot()?.id !== shot?.id) {
+ updateVideoAvailability();
+ return;
+ }
+ if (version?.status === "running") {
+ updateVideoAvailability();
+ return;
+ }
+ el.generateButton.disabled = false;
+ setVideoStatus(version?.status === "completed" ? "success" : "error", version?.status === "completed" ? "生成完成" : "生成失败");
+}
+
+function refreshAssetSelectionStyles() {
+ for (const button of el.assetList.querySelectorAll(".asset-card")) {
+ const position = referencePosition(button.textContent);
+ button.classList.toggle("selected", Boolean(position));
+ if (position) button.dataset.order = `${ROLE_LETTERS[position.roleIndex]}${position.viewIndex + 1}`;
+ else delete button.dataset.order;
+ }
+}
+
+function referencePosition(value) {
+ const text = String(value || "").toLowerCase();
+ for (let roleIndex = 0; roleIndex < state.roles.length; roleIndex += 1) {
+ const viewIndex = state.roles[roleIndex].references.findIndex((reference) => text.includes(String(reference).toLowerCase()));
+ if (viewIndex >= 0) return { roleIndex, viewIndex };
+ }
+ return null;
+}
+
+function buildReferenceMap() {
+ let start = 1;
+ const parts = [];
+ for (const role of activeShotRoles()) {
+ const index = state.roles.indexOf(role);
+ if (!role.references.length) continue;
+ const end = start + role.references.length - 1;
+ const range = start === end ? `图${start}` : `图${start}–${end}`;
+ const detail = role.references.length === 3 ? "正面、侧面、背面" : `${role.references.length} 张人物参考图`;
+ parts.push(`${range}：角色 ${ROLE_LETTERS[index]}「${role.name}」的${detail}`);
+ start = end + 1;
+ }
+ const extraImages = effectiveExtraImageReferences();
+ if (extraImages.length) {
+ const end = start + extraImages.length - 1;
+ parts.push(`${start === end ? `图${start}` : `图${start}–${end}`}：场景、道具或其他非人物参考图`);
+ }
+ return parts.length ? parts.join("；") : "系统会根据本场角色自动生成图号映射。";
+}
+
+function buildMappedPrompt() {
+ const videoReferences = effectiveVideoReferences();
+ const videoMap = videoReferences.length ? `\n参考视频映射：视频1–${videoReferences.length}为运镜、动作或节奏参考。` : "";
+ const continuity = continuityReference();
+ const continuityHint = continuity ? `\n连续性要求：本片段需承接上一片段「${continuity.previous.title}」的${continuity.type === "video" ? "动作、构图与状态" : "尾帧画面状态"}。` : "";
+ return `参考图角色映射：${buildReferenceMap()}。\n人物一致性要求：每个角色只参考自己的人物素材组，禁止交换五官、发型、服装、体型或身份。${videoMap}${continuityHint}\n${el.prompt.value.trim()}`;
+}
+
+function buildVideoClientBody() {
+ return {
+ assetReferences: sceneReferences(),
+ extraImageReferences: effectiveExtraImageReferences(),
+ videoReferences: effectiveVideoReferences(),
+ prompt: buildMappedPrompt(),
+ model: el.model.value,
+ ratio: el.ratio.value,
+ duration: Number(el.duration.value),
+ resolution: el.resolution.value,
+ generateAudio: el.generateAudio.checked,
+ watermark: el.watermark.checked,
+ };
+}
+
+function sceneReferences() {
+ return activeShotRoles().flatMap((role) => role.references);
+}
+
+function sceneReady() {
+ const roles = activeShotRoles();
+ return roles.length > 0 && roles.every((role) => role.references.length > 0) && mediaQuota().valid;
+}
+
+function activeRole() {
+ return state.roles[state.activeRoleIndex];
+}
+
+function createRole(name) {
+ return { id: `role-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, name, references: [] };
+}
+
+function saveSceneRoles() {
+ localStorage.setItem(SCENE_ROLES_KEY, JSON.stringify({ roles: state.roles, activeRoleIndex: state.activeRoleIndex }));
+}
+
+function saveCharacterLibrary() {
+ localStorage.setItem(CHARACTER_LIBRARY_KEY, JSON.stringify(state.characters));
+}
+
+function restoreCharacterLibrary() {
+ let saved;
+ try { saved = JSON.parse(localStorage.getItem(CHARACTER_LIBRARY_KEY) || "[]"); } catch { saved = []; }
+ state.characters = Array.isArray(saved) ? saved.map((character) => ({
+ id: character.id || `character-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+ name: String(character.name || "未命名人物"),
+ references: Array.isArray(character.references) ? character.references.map(String).filter((value) => state.config.mockMode || /^asset:\/\/mat_/i.test(value)).slice(0, 9) : [],
+ source: character.source || "manual",
+ })).filter((character) => character.references.length) : [];
+}
+
+function parseMediaLines(value) {
+ return [...new Set(String(value || "").split(/\r?\n/).map((line) => line.trim()).filter(Boolean))];
+}
+
+function mediaInputConfig(type) {
+ return type === "video"
+ ? { list: el.referenceVideoInputs, button: el.addReferenceVideoButton, limit: 3, placeholder: "https://example.com/reference.mp4" }
+ : { list: el.extraImageInputs, button: el.addExtraImageButton, limit: 9, placeholder: "https://example.com/reference.jpg" };
+}
+
+function createMediaInputRow(type, value = "") {
+ const { placeholder } = mediaInputConfig(type);
+ const row = document.createElement("div");
+ row.className = "media-url-row";
+
+ const input = document.createElement("input");
+ input.type = "url";
+ input.value = value;
+ input.placeholder = placeholder;
+ input.setAttribute("aria-label", type === "video" ? "参考视频链接" : "其他参考图片链接");
+
+ const remove = document.createElement("button");
+ remove.type = "button";
+ remove.className = "media-remove-button";
+ remove.dataset.removeMedia = type;
+ remove.setAttribute("aria-label", "删除该链接");
+ remove.textContent = "×";
+
+ row.append(input, remove);
+ return row;
+}
+
+function renderMediaInputList(type, value) {
+ const { list } = mediaInputConfig(type);
+ const values = parseMediaLines(value);
+ list.replaceChildren(...(values.length ? values : [""]).map((item) => createMediaInputRow(type, item)));
+ refreshMediaAddButton(type);
+}
+
+function collectMediaInputUrls(type) {
+ const { list } = mediaInputConfig(type);
+ return [...new Set([...list.querySelectorAll("input")].map((input) => input.value.trim()).filter(Boolean))];
+}
+
+function addMediaInput(type) {
+ const { list, limit } = mediaInputConfig(type);
+ if (list.children.length >= limit) return;
+ const row = createMediaInputRow(type);
+ list.append(row);
+ row.querySelector("input").focus();
+ refreshMediaAddButton(type);
+}
+
+function removeMediaInput(button) {
+ const type = button.dataset.removeMedia;
+ const { list } = mediaInputConfig(type);
+ if (list.children.length === 1) {
+ list.querySelector("input").value = "";
+ } else {
+ button.closest(".media-url-row").remove();
+ }
+ refreshMediaAddButton(type);
+ updateActiveShotFromForm();
+ updateVideoAvailability();
+}
+
+function refreshMediaAddButton(type) {
+ const { list, button, limit } = mediaInputConfig(type);
+ button.disabled = list.children.length >= limit;
+}
+
+function mediaQuota() {
+ const characterImages = sceneReferences().length;
+ const extraImages = effectiveExtraImageReferences().length;
+ const videos = effectiveVideoReferences().length;
+ const imageTotal = characterImages + extraImages;
+ if (imageTotal > 9) return { valid: false, characterImages, extraImages, videos, imageTotal, message: `图片 ${imageTotal}/9，已超出上限` };
+ if (videos > 3) return { valid: false, characterImages, extraImages, videos, imageTotal, message: `参考视频 ${videos}/3，已超出 Demo 上限` };
+ return { valid: true, characterImages, extraImages, videos, imageTotal, message: "可提交" };
+}
+
+function renderInputQuota() {
+ if (!el.inputQuota) return;
+ const quota = mediaQuota();
+ el.inputQuota.textContent = `人物图片 ${quota.characterImages} 张 · 其他图片 ${quota.extraImages} 张 · 图片合计 ${quota.imageTotal}/9 · 视频 ${quota.videos}/3`;
+ el.inputQuota.className = `input-quota wide ${quota.valid ? "valid" : "invalid"}`;
+}
+
+function restoreSceneRoles() {
+ let saved;
+ try { saved = JSON.parse(localStorage.getItem(SCENE_ROLES_KEY) || "null"); } catch { saved = null; }
+ if (Array.isArray(saved?.roles) && saved.roles.length) {
+ state.roles = saved.roles.slice(0, 3).map((role, index) => ({
+ id: role.id || createRole("").id,
+ name: role.name || `角色 ${ROLE_LETTERS[index]}`,
+ references: Array.isArray(role.references)
+ ? role.references.slice(0, 3).map(String).filter((value) => state.config.mockMode || /^asset:\/\/mat_/i.test(value))
+ : [],
+ }));
+ state.activeRoleIndex = Math.min(Number(saved.activeRoleIndex) || 0, state.roles.length - 1);
+ return;
+ }
+ let legacy;
+ try { legacy = JSON.parse(localStorage.getItem(LEGACY_GROUP_KEY) || "null"); } catch { legacy = null; }
+ if (Array.isArray(legacy?.references) && legacy.references.length === 3) {
+ state.roles = [{ ...createRole(legacy.name || "角色 A"), references: state.config.mockMode ? legacy.references.map(String) : [] }];
+ localStorage.removeItem(LEGACY_GROUP_KEY);
+ } else {
+ state.roles = [createRole("角色 A")];
+ }
+}
+
+async function finishAssetReview(result, roleId, name) {
+ const items = getReviewItems(result);
+ renderReviewItems(items);
+ if (items.length !== 3) throw new Error(result.message || `预期返回 3 张素材，实际返回 ${items.length} 张`);
+ const failedItem = items.find((item) => Number(item.submit_review_status) !== 1);
+ if (failedItem) throw new Error(failedItem.error_message || "三视图中有素材未通过审核");
+ const references = items.map(normalizeAssetReference);
+ if (references.some((reference) => !reference)) throw new Error("审核通过，但有素材未返回可用的 asset:// ID");
+ clearPendingReview();
+ const roleIndex = Math.max(0, state.roles.findIndex((role) => role.id === roleId));
+ state.activeRoleIndex = roleIndex;
+ state.roles[roleIndex].name = name;
+ state.roles[roleIndex].references = references;
+ upsertCharacter(name, references, "history", true);
+ el.reviewElapsed.textContent = "审核完成";
+ await loadAssets();
+ renderScene();
+ showToast(`角色 ${ROLE_LETTERS[roleIndex]} 的三视图已全部通过审核`);
+}
+
+async function pollAssetTask(taskId) {
+ for (let attempt = 0; attempt < 100; attempt += 1) {
+ updateReviewElapsed();
+ await delay(3000);
+ const result = await api(`/api/assets/tasks/${encodeURIComponent(taskId)}`);
+ const items = getReviewItems(result);
+ if (items.length) renderReviewItems(items);
+ const status = normalizeAssetTaskStatus(result);
+ if (status === "completed" || status === "failed") return result;
+ }
+ const error = new Error("素材仍在审核，任务已保存；稍后重新打开页面会继续查询");
+ error.pending = true;
+ throw error;
+}
+
+async function resumePendingReview() {
+ let pending;
+ try { pending = JSON.parse(localStorage.getItem(PENDING_REVIEW_KEY) || "null"); } catch { pending = null; }
+ if (!pending?.taskId) return;
+ const roleIndex = state.roles.findIndex((role) => role.id === pending.roleId);
+ if (roleIndex >= 0) state.activeRoleIndex = roleIndex;
+ state.reviewStartedAt = Number(pending.startedAt) || Date.now();
+ setAssetStatus("processing", "继续查询");
+ setAllReviewRows("processing", "审核中", "正在恢复上次任务");
+ try {
+ const result = await pollAssetTask(pending.taskId);
+ await finishAssetReview(result, pending.roleId || activeRole().id, pending.name || activeRole().name);
+ } catch (error) {
+ if (error.pending) {
+ setAssetStatus("processing", "仍在审核");
+ el.reviewElapsed.textContent = "仍在审核，可稍后回来查看";
+ } else {
+ setAssetStatus("error", "审核失败");
+ markUnresolvedRowsFailed(error.message);
+ clearPendingReview();
+ showToast(error.message, true);
+ }
+ }
+}
+
+function savePendingReview(taskId, roleId) {
+ localStorage.setItem(PENDING_REVIEW_KEY, JSON.stringify({
+ taskId, roleId, name: activeRole().name, startedAt: state.reviewStartedAt || Date.now(),
+ }));
+}
+
+function clearPendingReview() { localStorage.removeItem(PENDING_REVIEW_KEY); }
+
+function getReviewItems(result) { return result.result?.items || result.data?.items || result.items || []; }
+
+function normalizeAssetTaskStatus(result) {
+ const value = String(result.status || result.data?.status || result.result?.status || "").toLowerCase();
+ if (["completed", "complete", "succeeded", "success", "done"].includes(value)) return "completed";
+ if (["failed", "error", "cancelled", "canceled"].includes(value)) return "failed";
+ const items = getReviewItems(result);
+ if (items.length && items.every((item) => [0, 1].includes(Number(item.submit_review_status)))) return "completed";
+ return "processing";
+}
+
+function renderReviewItems(items) {
+ items.slice(0, 3).forEach((item, index) => {
+ const passed = Number(item.submit_review_status) === 1;
+ const failed = Number(item.submit_review_status) === 0 || item.error_code || item.error_message;
+ if (passed) setReviewRow(index, "success", "已通过", normalizeAssetReference(item));
+ else if (failed) setReviewRow(index, "error", "未通过", item.error_message || item.error_code || "审核未通过");
+ else setReviewRow(index, "processing", "审核中", "等待审核结果");
+ });
+}
+
+function setReviewRow(index, kind, status, detail = "") {
+ const row = reviewRows[index];
+ if (!row) return;
+ row.className = `tracker-row ${kind}`;
+ row.querySelector("b").textContent = status;
+ row.querySelector("small").textContent = detail;
+ row.querySelector("small").title = detail;
+}
+
+function setAllReviewRows(kind, status, detail = "") { reviewRows.forEach((_, index) => setReviewRow(index, kind, status, detail)); }
+
+function markUnresolvedRowsFailed(message) {
+ reviewRows.forEach((row, index) => {
+ if (!row.classList.contains("success") && !row.classList.contains("error")) setReviewRow(index, "error", "查询失败", message);
+ });
+ el.reviewElapsed.textContent = "已返回结果";
+}
+
+function updateReviewElapsed() {
+ const seconds = Math.max(0, Math.floor((Date.now() - state.reviewStartedAt) / 1000));
+ el.reviewElapsed.textContent = `审核中 · ${seconds} 秒`;
+}
+
+async function pollVideoTask(taskId, shotId = state.activeGenerationShotId || activeShot()?.id, versionId = state.activeGenerationVersionId) {
+ const startedAt = Date.now();
+ while (Date.now() - startedAt < VIDEO_POLL_MAX_MS) {
+ await delay(VIDEO_POLL_INTERVAL_MS);
+ if (!state.shots.some((item) => item.id === shotId)) {
+ logClientOperation("video.poll_stopped", { taskId, reason: "shot_deleted", deletedShotId: shotId });
+ return;
+ }
+ const result = await api(`/api/videos/${encodeURIComponent(taskId)}`);
+ const status = result._normalized?.status || normalizeVideoStatus(result.status || result.data?.status);
+ const progress = Number(result.progress ?? result.data?.progress ?? (status === "completed" ? 100 : 20));
+ const shot = state.shots.find((item) => item.id === shotId);
+ const version = shot?.versions.find((item) => item.id === versionId);
+ if (version) {
+ version.taskId = taskId;
+ version.progress = Math.max(10, progress);
+ version.lastCheckedAt = Date.now();
+ saveDramaProject();
+ }
+ if (activeShot()?.id === shotId) {
+ updateProgress(Math.max(10, progress), status === "completed" ? "视频生成完成" : "正在自动查询生成结果");
+ if (version) renderGenerationMeta(version);
+ }
+ if (status === "completed") {
+ const videoUrl = result._normalized?.videoUrl || result.video_url || result.output?.video_url || result.data?.video_url;
+ completeShotVersion(shotId, versionId, videoUrl, result.mock);
+ if (activeShot()?.id === shotId) {
+ renderCompletedVideo(videoUrl, result.mock);
+ setVideoStatus("success", "生成完成");
+ }
+ clearPendingVideo();
+ state.activeGenerationShotId = null;
+ state.activeGenerationVersionId = null;
+ showToast("当前片段候选已生成");
+ return;
+ }
+ if (status === "failed") throw new Error(result.error?.message || result.message || "视频生成失败");
+ }
+ const error = new Error("视频仍在服务商侧生成，页面已等待 30 分钟；这不是生成失败，可凭任务 ID 继续查询");
+ error.pending = true;
+ throw error;
+}
+
+function savePendingVideo(taskId, shotId, versionId) {
+ localStorage.setItem(PENDING_VIDEO_KEY, JSON.stringify({ taskId, shotId, versionId, startedAt: Date.now() }));
+}
+
+function clearPendingVideo() { localStorage.removeItem(PENDING_VIDEO_KEY); }
+
+async function resumePendingVideo() {
+ let pending;
+ try { pending = JSON.parse(localStorage.getItem(PENDING_VIDEO_KEY) || "null"); } catch { pending = null; }
+ if (!pending?.taskId) return;
+ switchModule("production");
+ let shot = state.shots.find((item) => item.id === pending.shotId);
+ if (!shot) shot = activeShot();
+ state.activeShotId = shot.id;
+ let version = shot.versions.find((item) => item.id === pending.versionId);
+ if (!version) {
+ version = { id: pending.versionId || `version-${Date.now()}`, status: "running", taskId: pending.taskId, videoUrl: "", lastFrameUrl: "", createdAt: pending.startedAt || Date.now(), lastCheckedAt: null, progress: 20 };
+ shot.versions.push(version);
+ }
+ state.activeGenerationShotId = shot.id;
+ state.activeGenerationVersionId = version.id;
+ loadActiveShotIntoForm();
+ renderStoryboard();
+ clearTimeout(state.pollTimer);
+ el.generateButton.disabled = true;
+ el.generationResult.classList.remove("hidden");
+ el.generationTaskId.textContent = pending.taskId;
+ setVideoStatus("processing", "继续查询");
+ setStep(4);
+ resetVideoStage();
+ updateProgress(20, "正在恢复上次视频任务");
+ try {
+ await pollVideoTask(pending.taskId, shot.id, version.id);
+ } catch (error) {
+ const message = contextualizeGenerationError(error.message);
+ if (error.pending) {
+ setVideoStatus("processing", "仍在生成");
+ updateProgress(20, "仍在生成，可稍后继续查询");
+ showToast(message);
+ } else {
+ clearPendingVideo();
+ setVideoStatus("error", "生成失败");
+ failShotVersion(shot.id, version.id, message);
+ renderGenerationError(message);
+ showToast(message, true);
+ }
+ } finally {
+ finishGenerationUi(shot, version);
+ }
+}
+
+function renderConnection() {
+ if (state.config.mockMode) {
+ el.connectionState.textContent = "Mock 模式 · 可评审完整流程";
+ el.connectionState.className = "connection mock";
+ el.reviewButton.textContent = "模拟提交三视图";
+ el.mockHint.classList.remove("hidden");
+ } else if (state.config.assetReady && state.config.videoReady) {
+ el.connectionState.textContent = "真实接口已连接";
+ el.connectionState.className = "connection live";
+ el.reviewButton.textContent = "提交真实素材审核";
+ el.mockHint.classList.add("hidden");
+ } else if (state.config.assetReady) {
+ el.connectionState.textContent = "素材审核 Live · 视频 Key 待配置";
+ el.connectionState.className = "connection live";
+ el.reviewButton.textContent = "提交真实素材审核";
+ el.mockHint.classList.add("hidden");
+ } else {
+ el.connectionState.textContent = `缺少配置：${state.config.missing.join("、")}`;
+ el.connectionState.className = "connection blocked";
+ }
+}
+
+function completeShotVersion(shotId, versionId, videoUrl, mock) {
+ const shot = state.shots.find((item) => item.id === shotId);
+ const version = shot?.versions.find((item) => item.id === versionId);
+ if (!shot || !version) return;
+ version.status = "completed";
+ version.videoUrl = videoUrl || "";
+ version.mock = Boolean(mock);
+ if (!shot.selectedVersionId) shot.selectedVersionId = version.id;
+ saveDramaProject();
+ renderStoryboard();
+}
+
+function failShotVersion(shotId, versionId, message) {
+ const shot = state.shots.find((item) => item.id === shotId);
+ const version = shot?.versions.find((item) => item.id === versionId);
+ if (!version) return;
+ version.status = "failed";
+ version.error = message;
+ saveDramaProject();
+ renderStoryboard();
+}
+
+function renderCompletedVideo(videoUrl, mock) {
+ if (videoUrl) {
+ const video = document.createElement("video");
+ video.controls = true;
+ video.src = videoUrl;
+ el.videoStage.replaceChildren(video);
+ } else {
+ el.videoStage.innerHTML = `${mock ? "Mock 流程已完成" : "任务已完成"}${mock ? "接入视频 Key 后此处展示真实视频" : "接口响应中未识别到视频 URL，请查看原始返回"} `;
+ }
+ updateProgress(100, "视频生成完成");
+}
+
+function renderGenerationError(message) {
+ const wrapper = document.createElement("div");
+ wrapper.className = "generation-error";
+ const title = document.createElement("strong");
+ title.textContent = "视频生成失败";
+ const detail = document.createElement("p");
+ detail.textContent = message;
+ wrapper.append(title, detail);
+ el.videoStage.replaceChildren(wrapper);
+ updateProgress(0, "任务已失败");
+}
+
+function contextualizeGenerationError(message) {
+ const text = String(message || "视频生成失败");
+ const assetMatch = text.match(/(?:asset-[a-z0-9-]+|mat_[a-z0-9]+)/i);
+ if (!assetMatch || !/not found|不存在/i.test(text)) return text;
+ const position = referencePosition(assetMatch[0]);
+ const label = position ? `角色 ${ROLE_LETTERS[position.roleIndex]} · ${VIEW_LABELS[position.viewIndex]}` : "某张参考图";
+ return `${label}在视频接口中不存在。通常表示素材库 Token 与视频 Key 不属于同一资源空间，或素材尚未同步到视频侧。素材 ID：${assetMatch[0]}`;
+}
+
+function resetVideoStage() { el.videoStage.innerHTML = ''; }
+function updateProgress(value, title) {
+ const safe = Math.max(0, Math.min(100, Number(value) || 0));
+ el.generationTitle.textContent = title;
+ el.generationProgress.textContent = `${safe}%`;
+ el.progressBar.style.width = `${safe}%`;
+}
+function setAssetStatus(kind, text) { el.assetStatus.className = `status-badge ${kind}`; el.assetStatus.textContent = text; }
+function setVideoStatus(kind, text) { el.videoStatus.className = `status-badge ${kind}`; el.videoStatus.textContent = text; }
+function setStep(active) {
+ document.querySelectorAll(".step").forEach((step) => {
+ const number = Number(step.dataset.step);
+ step.classList.toggle("done", number < active);
+ step.classList.toggle("active", number === active);
+ });
+}
+function fallbackCopy(text) {
+ const area = document.createElement("textarea");
+ area.value = text;
+ area.style.position = "fixed";
+ area.style.opacity = "0";
+ document.body.appendChild(area);
+ area.select();
+ document.execCommand("copy");
+ area.remove();
+}
+function normalizeAssetReference(item) {
+ const direct = item.asset_url || item.AssetURL || item.assetUrl;
+ if (typeof direct === "string" && /^asset:\/\//i.test(direct)) return `asset://${direct.slice(direct.indexOf("//") + 2)}`;
+ const id = item.downstream_asset_id || item.asset_id || item.Id || item.id;
+ return id ? `asset://${id}` : "";
+}
+function normalizeVideoStatus(value) {
+ const status = String(value || "").toLowerCase();
+ if (["succeeded", "success", "completed", "done"].includes(status)) return "completed";
+ if (["failed", "error", "cancelled", "canceled"].includes(status)) return "failed";
+ return status || "processing";
+}
+
+function getOrCreateAuditId(storage, key, prefix) {
+ try {
+ let value = storage.getItem(key);
+ if (!value) {
+ value = `${prefix}-${crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(36).slice(2)}`}`;
+ storage.setItem(key, value);
+ }
+ return value;
+ } catch {
+ return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+ }
+}
+
+function setupClientAudit() {
+ window.__auditReady = true;
+ logClientOperation("page.open", {
+ path: location.pathname,
+ viewport: `${window.innerWidth}x${window.innerHeight}`,
+ referrerOrigin: browserUrlSummary(document.referrer)?.origin || "",
+ });
+
+ document.addEventListener("click", (event) => {
+ const target = event.target instanceof Element ? event.target.closest("button, a, [role='button']") : null;
+ if (!target) return;
+ logClientOperation("ui.click", describeAuditControl(target));
+ }, true);
+
+ document.addEventListener("change", (event) => {
+ const target = event.target;
+ if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement)) return;
+ logClientOperation("ui.change", describeAuditControl(target));
+ }, true);
+
+ document.addEventListener("input", (event) => {
+ const target = event.target;
+ if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return;
+ const key = target.id || target.name || target.getAttribute("aria-label") || "anonymous-input";
+ clearTimeout(auditInputTimers.get(key));
+ auditInputTimers.set(key, setTimeout(() => {
+ logClientOperation("ui.input", describeAuditControl(target));
+ auditInputTimers.delete(key);
+ }, 900));
+ }, true);
+
+ document.addEventListener("submit", (event) => {
+ logClientOperation("ui.submit", { formId: event.target?.id || "", fieldCount: event.target?.elements?.length || 0 });
+ }, true);
+
+ document.addEventListener("play", (event) => {
+ if (event.target instanceof HTMLVideoElement) logClientOperation("video.play", { source: browserUrlSummary(event.target.currentSrc) });
+ }, true);
+ document.addEventListener("pause", (event) => {
+ if (event.target instanceof HTMLVideoElement) logClientOperation("video.pause", { currentTime: Math.round(event.target.currentTime * 10) / 10 });
+ }, true);
+
+ document.addEventListener("visibilitychange", () => {
+ logClientOperation("page.visibility", { state: document.visibilityState });
+ if (document.visibilityState === "hidden") flushAuditQueue(true);
+ });
+ window.addEventListener("pagehide", () => {
+ logClientOperation("page.close", { persisted: false });
+ flushAuditQueue(true);
+ });
+}
+
+function describeAuditControl(target) {
+ const value = auditControlValue(target);
+ return {
+ elementId: target.id || "",
+ tag: target.tagName?.toLowerCase() || "",
+ className: String(target.className || "").slice(0, 180),
+ type: target.type || "",
+ ariaLabel: String(target.getAttribute?.("aria-label") || "").slice(0, 120),
+ title: String(target.getAttribute?.("title") || "").slice(0, 120),
+ moduleTarget: target.dataset?.module || "",
+ step: target.dataset?.step || "",
+ removeMedia: target.dataset?.removeMedia || "",
+ textLength: String(target.textContent || "").trim().length,
+ href: target instanceof HTMLAnchorElement ? browserUrlSummary(target.href) : null,
+ value,
+ };
+}
+
+function auditControlValue(target) {
+ if (target instanceof HTMLInputElement && ["checkbox", "radio"].includes(target.type)) return { checked: target.checked };
+ if (target instanceof HTMLSelectElement) return { selected: String(target.value).slice(0, 120) };
+ if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+ const value = String(target.value || "");
+ if (target.type === "url") return browserUrlSummary(value);
+ return { length: value.length, lines: value ? value.split(/\r?\n/).length : 0 };
+ }
+ return null;
+}
+
+function browserUrlSummary(value) {
+ if (!value) return null;
+ try {
+ const url = new URL(value, location.href);
+ return { origin: url.origin, pathname: url.pathname.slice(0, 300), hasQuery: Boolean(url.search) };
+ } catch {
+ return { valid: false, length: String(value).length };
+ }
+}
+
+function logClientOperation(operation, details = {}) {
+ auditQueue.push({
+ operation,
+ timestamp: new Date().toISOString(),
+ module: state.activeModule,
+ shotId: state.activeShotId || "",
+ details,
+ });
+ if (auditQueue.length >= 20) flushAuditQueue();
+ else if (!auditFlushTimer) auditFlushTimer = setTimeout(() => flushAuditQueue(), 1800);
+}
+
+function flushAuditQueue(useBeacon = false) {
+ clearTimeout(auditFlushTimer);
+ auditFlushTimer = null;
+ if (!auditQueue.length) return;
+ const events = auditQueue.splice(0, 50);
+ const payload = JSON.stringify({ clientId: auditClientId, sessionId: auditSessionId, events });
+ const endpoint = `${API_BASE}/api/events`;
+ if (useBeacon && navigator.sendBeacon) {
+ navigator.sendBeacon(endpoint, new Blob([payload], { type: "application/json" }));
+ return;
+ }
+ fetch(endpoint, {
+ method: "POST",
+ headers: { "Content-Type": "application/json", "X-Session-Id": auditSessionId },
+ body: payload,
+ keepalive: true,
+ }).catch(() => {
+ auditQueue.unshift(...events.slice(-50));
+ });
+}
+
+function shouldLogClientApi(path) {
+ return !/^\/api\/(?:videos|assets\/tasks)\/[^/]+$/.test(path);
+}
+
+async function api(path, options = {}) {
+ const startedAt = Date.now();
+ const method = options.method || "GET";
+ const shouldLog = shouldLogClientApi(path);
+ if (shouldLog) logClientOperation("api.request", { method, path });
+ try {
+ const response = await fetch(`${API_BASE}${path}`, {
+ ...options,
+ headers: { "Content-Type": "application/json", "X-Session-Id": auditSessionId, ...(options.headers || {}) },
+ });
+ const result = await response.json().catch(() => ({ error: "服务返回了无法解析的内容" }));
+ if (shouldLog || !response.ok) {
+ logClientOperation("api.response", {
+ method,
+ path,
+ status: response.status,
+ durationMs: Date.now() - startedAt,
+ requestId: response.headers.get("x-request-id") || "",
+ });
+ }
+ if (!response.ok) {
+ const error = new Error(extractApiError(result) || `请求失败（${response.status}）`);
+ error.payload = result;
+ error.status = response.status;
+ throw error;
+ }
+ return result;
+ } catch (error) {
+ if (shouldLog) logClientOperation("api.network_error", { method, path, durationMs: Date.now() - startedAt, message: String(error.message || error).slice(0, 500) });
+ throw error;
+ }
+}
+function extractApiError(value) {
+ if (!value) return "";
+ if (typeof value === "string") {
+ try { return extractApiError(JSON.parse(value)) || value; } catch { return value; }
+ }
+ if (typeof value !== "object") return String(value);
+ return extractApiError(value.error?.message) || extractApiError(value.error) || extractApiError(value.message) || extractApiError(value.detail);
+}
+function showToast(message, error = false) {
+ el.toast.textContent = message;
+ el.toast.className = `toast${error ? " error" : ""}`;
+ clearTimeout(showToast.timer);
+ showToast.timer = setTimeout(() => el.toast.classList.add("hidden"), 4200);
+}
+function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); }
+function escapeHtml(value) { return String(value).replace(/[&<>'"]/g, (char) => ({ "&": "&", "<": "<", ">": ">", "'": "'", '"': """ }[char])); }
+function fileNameFromUrl(value) {
+ try { return decodeURIComponent(new URL(value).pathname.split("/").filter(Boolean).pop() || ""); } catch { return ""; }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..1db6cf8
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,268 @@
+
+
+
+
+
+ 营响力｜AI 短剧数字人 Demo
+
+
+
+
+
+
+
+
+
+
+
+ 片段进度
+ 0/1 已选定 · 预计 5 秒
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
✓
+
+
人物素材已入库并完成组合
+
审核通过的图片会绑定为一个可复用人物，也可在人物库中重新组合。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
候选版本
选择一个版本用于下一片段衔接
+
暂无候选
+
所有片段选定版本后，再交给拼接服务合成完整短剧。
+
+
+
+