diff --git a/README.md b/README.md
index 5db8a45..e848e85 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
页面拆分为三个一级模块:
- **人物素材库**:负责素材入库、审核、历史素材查看与人物组合,是长期资产管理区。
-- **视频素材库**:上传并审核 MP4/MOV 公网视频,保留历史视频素材,并可直接引用到当前片段。
+- **通用素材库**:上传并审核公网图片或 MP4/MOV 视频,保留历史素材,并可作为当前片段的其他参考图片或参考视频。
- **短剧生产**:以一个短剧项目管理多个片段;每段独立配置出场人物、提示词、图片、视频、连续性和生成参数。
在人物素材库点击“用于短剧生产”,会把该人物绑定到当前场景角色并自动进入生产模块。
@@ -21,7 +21,7 @@
5. 为本场角色选择人物素材,并补充场景、道具等非人物图片及参考视频,组织成官方 `content` 数组后调用 `POST /sd/api/v3/contents/generations/tasks`。
6. 用返回的 `id` 调用 `GET /sd/api/v3/contents/generations/tasks/{task_id}`,直至 `succeeded` 或 `failed`。
-视频素材库同样调用 `POST /v1/assets/upload`,但传入 `type: "video"`;审核完成后的 `asset://mat_*` 引用可作为当前片段的 `reference_video` 使用。
+通用素材库同样调用 `POST /v1/assets/upload`:图片传入 `type: "image"`,视频传入 `type: "video"`。审核完成后的 `asset://mat_*` 引用可分别作为当前片段的其他参考图片或 `reference_video` 使用。通用图片用明确的素材用途标记与人物图片分开,避免进入人物组合区。
视频提交后页面每 2.5 秒自动查询一次,最长持续 30 分钟。只有上游明确返回 `failed` 才显示生成失败;30 分钟仍为 `running` 时会保留“仍在生成”状态,不把等待超时误判为失败。任务 ID 会保存在浏览器本地,刷新或重新打开页面后会自动恢复查询。
diff --git a/public/app.js b/public/app.js
index 4838819..5c98f0f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -9,7 +9,7 @@ window.addEventListener("error", (event) => recordRuntimeError(event.message ||
window.addEventListener("unhandledrejection", (event) => recordRuntimeError(String(event.reason || "Unhandled rejection")));
const PENDING_REVIEW_KEY = "yingxiangli.pendingAssetReview";
-const PENDING_VIDEO_ASSET_KEY = "yingxiangli.pendingVideoAssetReview.v1";
+const PENDING_GENERIC_ASSET_KEY = "yingxiangli.pendingGenericAssetReview.v1";
const PENDING_VIDEO_KEY = "yingxiangli.pendingVideoTask.v1";
const LEGACY_GROUP_KEY = "yingxiangli.selectedAssetGroup";
const SCENE_ROLES_KEY = "yingxiangli.sceneRoles.v1";
@@ -32,7 +32,7 @@ const state = {
pollTimer: null,
reviewStartedAt: 0,
assets: [],
- videoAssets: [],
+ genericAssets: [],
characters: [],
characterDraftReferences: new Set(),
activeModule: document.body.dataset.activeModule || "library",
@@ -57,8 +57,8 @@ const el = Object.fromEntries([
"addShotButton", "shotList", "timelineSummary", "shotProgressBar", "continuityMode", "versionCount",
"versionList", "assemblyPanel", "assemblyList", "assemblyHint", "closeAssemblyButton",
"videoKeyGate", "videoKeyForm", "videoKeyInput", "videoKeyError", "changeVideoKeyButton", "cancelVideoKeyButton",
- "videoAssetForm", "videoAssetUrl", "videoAssetPurpose", "videoAssetSubmit", "videoAssetStatus",
- "videoAssetResult", "videoAssetResultText", "videoAssetList", "videoAssetHistoryCount", "refreshVideoAssets",
+ "genericAssetForm", "genericAssetType", "genericAssetUrl", "genericAssetPurpose", "genericAssetSubmit", "genericAssetStatus",
+ "genericAssetHint", "genericAssetResult", "genericAssetResultText", "genericAssetList", "genericAssetHistoryCount", "refreshGenericAssets",
].map((id) => [id, document.getElementById(id)]));
const reviewRows = [el.reviewFront, el.reviewSide, el.reviewBack];
@@ -70,6 +70,7 @@ let auditFlushTimer = null;
setupClientAudit();
setupVideoKeyGate();
+updateGenericAssetForm();
init();
document.querySelectorAll(".module-tab").forEach((button) => {
@@ -92,7 +93,7 @@ async function init() {
renderScene();
renderStoryboard();
resumePendingReview();
- resumePendingVideoAsset();
+ resumePendingGenericAsset();
if (state.config.mockMode || currentVideoKey()) resumePendingVideo();
} catch (error) {
showToast(error.message, true);
@@ -201,7 +202,8 @@ el.assetForm.addEventListener("submit", async (event) => {
}
});
-el.videoAssetForm.addEventListener("submit", submitVideoAsset);
+el.genericAssetForm.addEventListener("submit", submitGenericAsset);
+el.genericAssetType.addEventListener("change", updateGenericAssetForm);
el.videoForm.addEventListener("submit", async (event) => {
event.preventDefault();
@@ -277,7 +279,7 @@ el.videoForm.addEventListener("submit", async (event) => {
});
el.refreshAssets.addEventListener("click", loadAssets);
-el.refreshVideoAssets.addEventListener("click", loadAssets);
+el.refreshGenericAssets.addEventListener("click", loadAssets);
el.createCharacterButton.addEventListener("click", openCharacterEditor);
el.cancelCharacterButton.addEventListener("click", closeCharacterEditor);
el.saveCharacterButton.addEventListener("click", saveCharacterFromDraft);
@@ -319,12 +321,12 @@ async function loadAssets() {
const total = Number(result.data?.total ?? result.data?.TotalCount ?? items.length);
if (!pageItems.length || items.length >= total || pageItems.length < pageSize) break;
}
- state.assets = items.filter((item) => assetItemType(item) !== "video");
- state.videoAssets = items.filter((item) => assetItemType(item) === "video");
+ state.assets = items.filter((item) => assetItemType(item) === "image" && !isGenericAsset(item));
+ state.genericAssets = items.filter(isGenericAsset);
ingestHistoricalCharacters(state.assets);
renderCharacterLibrary();
renderAssetPicker();
- renderVideoAssetLibrary();
+ renderGenericAssetLibrary();
el.assetHistoryCount.textContent = String(state.assets.length);
el.assetList.innerHTML = "";
if (!state.assets.length) {
@@ -360,7 +362,7 @@ async function loadAssets() {
? "客户令牌无效或已过期,请重新输入"
: error.message;
el.assetList.innerHTML = `
${escapeHtml(message)}
`;
- el.videoAssetList.innerHTML = `${escapeHtml(message)}
`;
+ el.genericAssetList.innerHTML = `${escapeHtml(message)}
`;
if (!state.config?.mockMode) {
el.connectionState.textContent = "素材库连接失败";
el.connectionState.className = "connection blocked";
@@ -373,56 +375,79 @@ function assetItemType(item) {
return String(item?.type || item?.asset_type || item?.AssetType || "image").toLowerCase();
}
-function renderVideoAssetLibrary() {
- el.videoAssetHistoryCount.textContent = String(state.videoAssets.length);
- el.videoAssetList.innerHTML = "";
- if (!state.videoAssets.length) {
- el.videoAssetList.innerHTML = '暂无已就绪视频素材
';
+function isGenericAsset(item) {
+ if (assetItemType(item) === "video") return true;
+ return /^通用图片\s*[·・]/.test(String(item?.purpose || item?.Name || ""));
+}
+
+function genericAssetName(item, sourceUrl) {
+ return String(item.purpose || item.Name || "").replace(/^通用图片\s*[·・]\s*/, "") || fileNameFromUrl(sourceUrl) || "未命名通用素材";
+}
+
+function renderGenericAssetLibrary() {
+ el.genericAssetHistoryCount.textContent = String(state.genericAssets.length);
+ el.genericAssetList.innerHTML = "";
+ if (!state.genericAssets.length) {
+ el.genericAssetList.innerHTML = '暂无已就绪通用素材
';
return;
}
- for (const item of state.videoAssets) {
+ for (const item of state.genericAssets) {
+ const type = assetItemType(item);
const reference = normalizeAssetReference(item);
- const videoUrl = item.original_url || item.URL || "";
- const name = item.purpose || item.Name || fileNameFromUrl(videoUrl) || "未命名视频素材";
+ const sourceUrl = item.original_url || item.URL || "";
+ const name = genericAssetName(item, sourceUrl);
const card = document.createElement("article");
card.className = "video-asset-card";
const preview = document.createElement("div");
preview.className = "video-asset-preview";
- if (videoUrl) {
+ if (sourceUrl && type === "video") {
const video = document.createElement("video");
- video.src = videoUrl;
+ video.src = sourceUrl;
video.controls = true;
video.playsInline = true;
video.preload = "metadata";
preview.appendChild(video);
- } else preview.textContent = "暂无视频预览";
+ } else if (sourceUrl) {
+ const image = document.createElement("img");
+ image.src = sourceUrl;
+ image.alt = name;
+ image.loading = "lazy";
+ preview.appendChild(image);
+ } else preview.textContent = "暂无素材预览";
const copy = document.createElement("div");
copy.className = "video-asset-copy";
- copy.innerHTML = `${escapeHtml(name)}${escapeHtml(reference)}`;
+ copy.innerHTML = `${escapeHtml(name)}${type === "video" ? "视频" : "图片"} · ${escapeHtml(reference)}`;
const actions = document.createElement("div");
actions.className = "video-asset-actions";
const useButton = document.createElement("button");
useButton.type = "button";
useButton.textContent = "用于当前片段";
- useButton.addEventListener("click", () => useVideoAssetInActiveShot(reference, name));
+ useButton.addEventListener("click", () => useGenericAssetInActiveShot(reference, name, type));
const copyButton = document.createElement("button");
copyButton.type = "button";
copyButton.textContent = "复制素材引用";
copyButton.addEventListener("click", async () => {
try { await navigator.clipboard.writeText(reference); } catch { fallbackCopy(reference); }
- showToast("视频素材引用已复制");
+ showToast("素材引用已复制");
});
actions.append(useButton, copyButton);
card.append(preview, copy, actions);
- el.videoAssetList.appendChild(card);
+ el.genericAssetList.appendChild(card);
}
}
-function useVideoAssetInActiveShot(reference, name) {
+function useGenericAssetInActiveShot(reference, name, type) {
const shot = activeShot();
- const current = parseMediaLines(shot.referenceVideoUrls);
- if (!current.includes(reference) && current.length >= 3) return showToast("当前片段最多使用 3 条参考视频", true);
- shot.referenceVideoUrls = [...new Set([...current, reference])].join("\n");
+ if (type === "video") {
+ const current = parseMediaLines(shot.referenceVideoUrls);
+ if (!current.includes(reference) && current.length >= 3) return showToast("当前片段最多使用 3 条参考视频", true);
+ shot.referenceVideoUrls = [...new Set([...current, reference])].join("\n");
+ } else {
+ const current = parseMediaLines(shot.extraImageUrls);
+ const occupied = sceneReferences().length + current.length;
+ if (!current.includes(reference) && occupied >= 9) return showToast("人物图片和其他参考图片合计最多 9 张", true);
+ shot.extraImageUrls = [...new Set([...current, reference])].join("\n");
+ }
saveDramaProject();
switchModule("production");
loadActiveShotIntoForm();
@@ -430,66 +455,76 @@ function useVideoAssetInActiveShot(reference, name) {
showToast(`已将「${name}」用于当前片段`);
}
-async function submitVideoAsset(event) {
+function updateGenericAssetForm() {
+ const isVideo = el.genericAssetType.value === "video";
+ el.genericAssetUrl.placeholder = isVideo ? "https://example.com/reference.mp4" : "https://example.com/reference.jpg";
+ el.genericAssetHint.textContent = isVideo
+ ? "支持 MP4 / MOV,必须可通过公网直接访问。"
+ : "支持 JPG / PNG / WebP 等图片格式,必须可通过公网直接访问。";
+}
+
+async function submitGenericAsset(event) {
event.preventDefault();
- const url = el.videoAssetUrl.value.trim();
- const purpose = el.videoAssetPurpose.value.trim();
- setVideoAssetStatus("processing", "审核中");
- el.videoAssetResult.classList.add("hidden");
- el.videoAssetSubmit.disabled = true;
+ const type = el.genericAssetType.value;
+ const url = el.genericAssetUrl.value.trim();
+ const purpose = el.genericAssetPurpose.value.trim();
+ setGenericAssetStatus("processing", "审核中");
+ el.genericAssetResult.classList.add("hidden");
+ el.genericAssetSubmit.disabled = true;
try {
let result = await api("/api/assets/upload", {
method: "POST",
- body: JSON.stringify({ type: "video", url, purpose }),
+ body: JSON.stringify({ type, category: "generic", url, purpose }),
});
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");
- savePendingVideoAsset(taskId, purpose);
+ if (!taskId) throw new Error("素材接口已受理,但没有返回任务 ID");
+ savePendingGenericAsset(taskId, purpose, type);
result = await pollAssetTask(taskId, false);
}
- await finishVideoAssetUpload(result);
+ await finishGenericAssetUpload(result);
} catch (error) {
- setVideoAssetStatus(error.pending ? "processing" : "error", error.pending ? "仍在审核" : "审核失败");
+ setGenericAssetStatus(error.pending ? "processing" : "error", error.pending ? "仍在审核" : "审核失败");
showToast(error.message, !error.pending);
} finally {
- el.videoAssetSubmit.disabled = false;
+ el.genericAssetSubmit.disabled = false;
}
}
-async function finishVideoAssetUpload(result) {
+async function finishGenericAssetUpload(result) {
const items = getReviewItems(result);
- if (items.length !== 1) throw new Error(result.message || "视频素材接口未返回有效结果");
+ if (items.length !== 1) throw new Error(result.message || "素材接口未返回有效结果");
const item = items[0];
- if (Number(item.submit_review_status) !== 1) throw new Error(item.error_message || "视频素材未通过审核");
+ if (Number(item.submit_review_status) !== 1) throw new Error(item.error_message || "素材未通过审核");
const reference = normalizeAssetReference(item);
if (!reference) throw new Error("审核通过,但未返回可用的 asset:// ID");
- clearPendingVideoAsset();
- setVideoAssetStatus("success", "已入库");
- el.videoAssetResultText.textContent = `素材引用:${reference}`;
- el.videoAssetResult.classList.remove("hidden");
- el.videoAssetForm.reset();
+ clearPendingGenericAsset();
+ setGenericAssetStatus("success", "已入库");
+ el.genericAssetResultText.textContent = `素材引用:${reference}`;
+ el.genericAssetResult.classList.remove("hidden");
+ el.genericAssetForm.reset();
+ updateGenericAssetForm();
await loadAssets();
- showToast("视频素材已通过审核并入库");
+ showToast("通用素材已通过审核并入库");
}
-function savePendingVideoAsset(taskId, purpose) {
- localStorage.setItem(PENDING_VIDEO_ASSET_KEY, JSON.stringify({ taskId, purpose, startedAt: Date.now() }));
+function savePendingGenericAsset(taskId, purpose, type) {
+ localStorage.setItem(PENDING_GENERIC_ASSET_KEY, JSON.stringify({ taskId, purpose, type, startedAt: Date.now() }));
}
-function clearPendingVideoAsset() { localStorage.removeItem(PENDING_VIDEO_ASSET_KEY); }
+function clearPendingGenericAsset() { localStorage.removeItem(PENDING_GENERIC_ASSET_KEY); }
-async function resumePendingVideoAsset() {
+async function resumePendingGenericAsset() {
let pending;
- try { pending = JSON.parse(localStorage.getItem(PENDING_VIDEO_ASSET_KEY) || "null"); } catch { pending = null; }
+ try { pending = JSON.parse(localStorage.getItem(PENDING_GENERIC_ASSET_KEY) || "null"); } catch { pending = null; }
if (!pending?.taskId) return;
- setVideoAssetStatus("processing", "继续查询");
+ setGenericAssetStatus("processing", "继续查询");
try {
const result = await pollAssetTask(pending.taskId, false);
- await finishVideoAssetUpload(result);
+ await finishGenericAssetUpload(result);
} catch (error) {
- setVideoAssetStatus(error.pending ? "processing" : "error", error.pending ? "仍在审核" : "审核失败");
- if (!error.pending) clearPendingVideoAsset();
+ setGenericAssetStatus(error.pending ? "processing" : "error", error.pending ? "仍在审核" : "审核失败");
+ if (!error.pending) clearPendingGenericAsset();
}
}
@@ -584,7 +619,7 @@ function bindCharacterToActiveRole(character) {
}
function switchModule(module) {
- if (!["library", "video-library", "production"].includes(module)) return;
+ if (!["library", "generic-library", "production"].includes(module)) return;
state.activeModule = module;
document.body.dataset.activeModule = module;
document.querySelectorAll('.module-tab').forEach((button) => {
@@ -1310,7 +1345,7 @@ function createMediaInputRow(type, value = "") {
row.className = "media-url-row";
const input = document.createElement("input");
- input.type = type === "video" ? "text" : "url";
+ input.type = "text";
input.value = value;
input.placeholder = placeholder;
input.setAttribute("aria-label", type === "video" ? "参考视频链接" : "其他参考图片链接");
@@ -1722,7 +1757,7 @@ function updateProgress(value, title) {
el.progressBar.style.width = `${safe}%`;
}
function setAssetStatus(kind, text) { el.assetStatus.className = `status-badge ${kind}`; el.assetStatus.textContent = text; }
-function setVideoAssetStatus(kind, text) { el.videoAssetStatus.className = `status-badge ${kind}`; el.videoAssetStatus.textContent = text; }
+function setGenericAssetStatus(kind, text) { el.genericAssetStatus.className = `status-badge ${kind}`; el.genericAssetStatus.textContent = text; }
function setVideoStatus(kind, text) { el.videoStatus.className = `status-badge ${kind}`; el.videoStatus.textContent = text; }
function setStep(active) {
document.querySelectorAll(".step").forEach((step) => {
diff --git a/public/index.html b/public/index.html
index 6526b2d..7f5c901 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,8 +23,8 @@
-