cat-shark
4746e0363f
为视频生成 VR 双眼字幕的单体实现：FastAPI 后端、调度器与全部节点 （提音/转写/翻译/ASS/抽帧/OCR/LLM 过滤）在单进程内运行。 - 节点协议（wov_sdk 数据模型）与分布式版保持一致，预留回退桥梁 - 工作流即数据：DAG 存于 workflows/*.json，模型/链路改动只改数据 - 调度器：拓扑顺序执行、断点续跑（产物重建）、任务暂停/继续 - 抽帧按帧间隔（select 按帧号精确取帧），VLM OCR 与 LLM 过滤使用 自适应线程池弹性并发，并打印数据处理速度进度日志 - 100% 行覆盖率（pytest --cov-fail-under=100）
648 lines
23 KiB
JavaScript
648 lines
23 KiB
JavaScript
// VRSub 静态前端公共脚本：所有页面共用的 API 封装、渲染函数与事件绑定。
|
|
// 首页只负责发起任务；任务管理页展示全部任务的进度、产物下载与失败重试。
|
|
|
|
// 演示"视频字幕生成"工作流的 DAG 定义，预填在工作流编排页。
|
|
const DEMO_WORKFLOW = {
|
|
name: "视频字幕生成",
|
|
version: 1,
|
|
nodes: [
|
|
{
|
|
id: "extract",
|
|
node_type: "ffmpeg-extract",
|
|
params: { sample_rate: 16000, channels: 1 },
|
|
inputs: { video_uri: "input.video_uri" },
|
|
},
|
|
{
|
|
id: "asr",
|
|
node_type: "faster-whisper",
|
|
params: { language: "ja" },
|
|
inputs: { audio_uri: "extract.audio_uri" },
|
|
},
|
|
{
|
|
id: "translate",
|
|
node_type: "llm-translate",
|
|
params: { target_language: "zh-CN" },
|
|
inputs: { srt_uri: "asr.srt_uri" },
|
|
},
|
|
{
|
|
id: "ass",
|
|
node_type: "srt-to-dual-eye-ass",
|
|
params: { resolution: "3840x1920" },
|
|
inputs: { cn_srt_uri: "translate.cn_srt_uri" },
|
|
},
|
|
],
|
|
edges: [
|
|
{ from: "extract", to: "asr" },
|
|
{ from: "asr", to: "translate" },
|
|
{ from: "translate", to: "ass" },
|
|
],
|
|
entry_inputs: { video_uri: "file" },
|
|
final_outputs: {
|
|
cn_srt: "translate.cn_srt_uri",
|
|
ass: "ass.ass_uri",
|
|
},
|
|
};
|
|
|
|
// 统一封装 fetch：自动携带 JSON 头、解析响应并在失败时抛出可读错误。
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(path, {
|
|
headers: { "Content-Type": "application/json", ...(options.headers || {}) },
|
|
...options,
|
|
});
|
|
const data = await response.json().catch(() => null);
|
|
if (!response.ok) {
|
|
// FastAPI 的校验错误 detail 可能是数组，统一序列化为字符串展示。
|
|
const detail = data && data.detail ? JSON.stringify(data.detail) : response.statusText;
|
|
throw new Error(`${response.status} ${detail}`);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
// 转义用户可控文本，防止 XSS 注入到表格或状态 HTML 中。
|
|
function escapeHtml(value) {
|
|
return String(value)
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
// 根据状态生成带语义颜色的徽章 HTML。
|
|
function badge(status) {
|
|
// 统一转小写比较，兼容后端返回的不同大小写。
|
|
const value = String(status).toLowerCase();
|
|
const className =
|
|
value === "completed" || value === "ok"
|
|
? "ok"
|
|
: value === "error" || value === "failed"
|
|
? "error"
|
|
: "warn";
|
|
return `<span class="badge ${className}">${escapeHtml(status)}</span>`;
|
|
}
|
|
|
|
// 把 ISO 时间格式化为本地时间；非法值原样返回。
|
|
function formatTime(value) {
|
|
if (!value) return "";
|
|
const date = new Date(value);
|
|
return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
|
|
}
|
|
|
|
// 计算距给定时间的流逝时长，用于任务页展示已运行时间。
|
|
function formatElapsed(value) {
|
|
if (!value) return "";
|
|
const seconds = Math.floor((Date.now() - new Date(value).getTime()) / 1000);
|
|
if (Number.isNaN(seconds) || seconds < 0) return "";
|
|
if (seconds < 60) return `${seconds} 秒`;
|
|
return `${Math.floor(seconds / 60)} 分钟`;
|
|
}
|
|
|
|
// 健康检查失败时在页面顶部展示后端不可用提示。
|
|
async function loadHealth() {
|
|
try {
|
|
await api("/health");
|
|
} catch (error) {
|
|
const banner = document.createElement("div");
|
|
banner.className = "result";
|
|
banner.textContent = `后端不可用：${error.message}`;
|
|
document.body.prepend(banner);
|
|
}
|
|
}
|
|
|
|
// 加载工作流列表并渲染发布状态与操作按钮。
|
|
async function loadWorkflows() {
|
|
const workflows = await api("/api/admin/workflows");
|
|
const tbody = document.getElementById("workflowList");
|
|
if (!tbody) return;
|
|
tbody.innerHTML = workflows.length
|
|
? workflows
|
|
.map(
|
|
(workflow) => `
|
|
<tr>
|
|
<td>${escapeHtml(workflow.id)}</td>
|
|
<td>${escapeHtml(workflow.name)}</td>
|
|
<td>${escapeHtml(workflow.latest_version)}</td>
|
|
<td>${workflow.published ? badge("ok") : badge("draft")}</td>
|
|
<td>
|
|
<button class="danger" data-delete-workflow="${escapeHtml(workflow.id)}">删除</button>
|
|
${workflow.published ? "" : `<button data-publish-workflow="${escapeHtml(workflow.id)}">发布</button>`}
|
|
</td>
|
|
</tr>`,
|
|
)
|
|
.join("")
|
|
: '<tr><td colspan="5">暂无工作流</td></tr>';
|
|
}
|
|
|
|
// 加载已发布的工作流（应用），填充首页的下拉选择框。
|
|
// 已发布工作流缓存（id → {name, definition}），供按需切换 OCR 面板。
|
|
let workflowApps = [];
|
|
// 需要 crop 的节点 ID（如 frame-extract）与用户框选的 crop 值。
|
|
let cropNodeId = null;
|
|
let selectedCrop = null;
|
|
// 框选模式：开启后才让画布接收鼠标事件，平时不拦截视频控件。
|
|
let drawMode = false;
|
|
// 当前选择的视频文件：change 时保存，提交时使用（避免被重置清空 input 丢失）。
|
|
let selectedVideoFile = null;
|
|
|
|
async function loadWorkflowOptions() {
|
|
const select = document.getElementById("workflowSelect");
|
|
if (!select) return;
|
|
workflowApps = await api("/api/apps");
|
|
select.innerHTML = workflowApps.length
|
|
? workflowApps
|
|
.map(
|
|
(app) =>
|
|
`<option value="${escapeHtml(app.id)}">${escapeHtml(app.name)}</option>`,
|
|
)
|
|
.join("")
|
|
: '<option value="">暂无可用工作流</option>';
|
|
// 切换工作流时按需展示框选面板。
|
|
select.addEventListener("change", onWorkflowChange);
|
|
await onWorkflowChange();
|
|
}
|
|
|
|
// 切换工作流：若 DAG 中存在带 crop 参数的节点（字幕 OCR 流程），
|
|
// 切换到框选面板；否则使用标准上传。
|
|
async function onWorkflowChange() {
|
|
const select = document.getElementById("workflowSelect");
|
|
const ocrCard = document.getElementById("ocrCard");
|
|
const standardCard = document.getElementById("standardCard");
|
|
if (!select || !ocrCard || !standardCard) return;
|
|
cropNodeId = null;
|
|
selectedCrop = null;
|
|
const app = workflowApps.find((item) => item.id === select.value);
|
|
// 数据驱动判断：节点 params 中声明了 crop 即需要框选。
|
|
const cropNode = (app?.definition?.nodes || []).find(
|
|
(node) => node.params && node.params.crop !== undefined,
|
|
);
|
|
const needsCrop = Boolean(cropNode);
|
|
cropNodeId = needsCrop ? cropNode.id : null;
|
|
ocrCard.hidden = !needsCrop;
|
|
standardCard.hidden = needsCrop;
|
|
resetOcrPanel();
|
|
if (needsCrop) {
|
|
document.getElementById("ocrProgress").textContent = "请选择视频并框选字幕区域";
|
|
}
|
|
}
|
|
|
|
// 重置 OCR 面板：清除视频、画布与框选状态。
|
|
function resetOcrPanel() {
|
|
const video = document.getElementById("ocrVideo");
|
|
const canvas = document.getElementById("ocrCanvas");
|
|
const fileInput = document.getElementById("ocrVideoFile");
|
|
const cropValue = document.getElementById("cropValue");
|
|
const submit = document.getElementById("ocrSubmit");
|
|
selectedCrop = null;
|
|
if (video) video.removeAttribute("src");
|
|
if (canvas) {
|
|
canvas.width = 0;
|
|
canvas.height = 0;
|
|
}
|
|
if (fileInput) fileInput.value = "";
|
|
if (cropValue) cropValue.value = "";
|
|
if (submit) submit.disabled = true;
|
|
selectedVideoFile = null;
|
|
exitDrawMode();
|
|
}
|
|
|
|
// 用 crop.js 把画布上的框选矩形归一化为 crop 比例并展示。
|
|
function applyCropRect(rect) {
|
|
const video = document.getElementById("ocrVideo");
|
|
const box = document.getElementById("videoBox");
|
|
if (!video.videoWidth || !box) return;
|
|
const crop = rectToCrop(
|
|
rect,
|
|
video.videoWidth,
|
|
video.videoHeight,
|
|
box.clientWidth,
|
|
box.clientHeight,
|
|
);
|
|
selectedCrop = crop;
|
|
document.getElementById("cropValue").value = crop.join(", ");
|
|
document.getElementById("ocrSubmit").disabled = false;
|
|
document.getElementById("ocrProgress").textContent =
|
|
`已框选 crop=[${crop.join(", ")}]，可提交任务`;
|
|
}
|
|
|
|
// 进入框选模式：暂停视频、隐藏原生控件、启用画布绘制。
|
|
function enterDrawMode() {
|
|
const video = document.getElementById("ocrVideo");
|
|
const canvas = document.getElementById("ocrCanvas");
|
|
const toggle = document.getElementById("ocrDrawMode");
|
|
if (!video.videoWidth) {
|
|
document.getElementById("ocrProgress").textContent = "请先选择视频并定位到有字幕的画面";
|
|
return;
|
|
}
|
|
drawMode = true;
|
|
video.pause();
|
|
video.removeAttribute("controls"); // 隐藏进度条，避免遮挡框选操作。
|
|
canvas.classList.add("drawable");
|
|
if (toggle) toggle.textContent = "退出框选模式";
|
|
document.getElementById("ocrProgress").textContent = "请拖动框选字幕区域";
|
|
}
|
|
|
|
// 退出框选模式：恢复原生控件，画布不再拦截指针。
|
|
function exitDrawMode() {
|
|
const video = document.getElementById("ocrVideo");
|
|
const canvas = document.getElementById("ocrCanvas");
|
|
const toggle = document.getElementById("ocrDrawMode");
|
|
drawMode = false;
|
|
if (video) video.setAttribute("controls", "");
|
|
if (canvas) canvas.classList.remove("drawable");
|
|
if (toggle) toggle.textContent = "进入框选模式";
|
|
}
|
|
|
|
// 初始化 OCR 面板：视频预览 + 画布拖动框选。
|
|
function setupOcrPanel() {
|
|
const fileInput = document.getElementById("ocrVideoFile");
|
|
const video = document.getElementById("ocrVideo");
|
|
const canvas = document.getElementById("ocrCanvas");
|
|
const resetButton = document.getElementById("ocrReset");
|
|
if (!fileInput || !video || !canvas) return;
|
|
|
|
// 选择视频后显示预览并设置画布尺寸与坐标换算。
|
|
// 注意顺序：必须先 reset（会清空旧 src），再设置新 src，否则被清掉。
|
|
fileInput.addEventListener("change", () => {
|
|
const file = fileInput.files[0];
|
|
if (!file) return;
|
|
resetOcrPanel();
|
|
// 重置会清空 input，这里把文件引用保存下来供提交使用。
|
|
selectedVideoFile = file;
|
|
video.src = URL.createObjectURL(file);
|
|
video.load();
|
|
video.onloadedmetadata = () => {
|
|
const box = document.getElementById("videoBox");
|
|
canvas.width = box.clientWidth;
|
|
canvas.height = box.clientHeight;
|
|
document.getElementById("ocrProgress").textContent = "请在预览中拖动框选字幕区域";
|
|
};
|
|
});
|
|
|
|
// 框选模式开关：进入/退出。
|
|
const drawToggle = document.getElementById("ocrDrawMode");
|
|
if (drawToggle) {
|
|
drawToggle.addEventListener("click", () => {
|
|
if (drawMode) {
|
|
exitDrawMode();
|
|
} else {
|
|
enterDrawMode();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 拖动绘制框选矩形：mousedown 起点 → mousemove 更新 → mouseup 生成 crop。
|
|
let startX = 0;
|
|
let startY = 0;
|
|
let drawing = false;
|
|
canvas.addEventListener("mousedown", (event) => {
|
|
if (!drawMode) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
startX = event.clientX - rect.left;
|
|
startY = event.clientY - rect.top;
|
|
drawing = true;
|
|
});
|
|
canvas.addEventListener("mousemove", (event) => {
|
|
if (!drawing || !drawMode) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = event.clientX - rect.left;
|
|
const y = event.clientY - rect.top;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.strokeStyle = "#ff5252";
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(Math.min(startX, x), Math.min(startY, y), Math.abs(x - startX), Math.abs(y - startY));
|
|
});
|
|
canvas.addEventListener("mouseup", (event) => {
|
|
if (!drawing || !drawMode) return;
|
|
drawing = false;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = event.clientX - rect.left;
|
|
const y = event.clientY - rect.top;
|
|
const w = Math.abs(x - startX);
|
|
const h = Math.abs(y - startY);
|
|
if (w < 5 || h < 5) return;
|
|
applyCropRect({
|
|
x: Math.min(startX, x),
|
|
y: Math.min(startY, y),
|
|
w,
|
|
h,
|
|
});
|
|
});
|
|
|
|
// 清除框选：清空画布与 crop，禁用提交。
|
|
resetButton.addEventListener("click", () => {
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
selectedCrop = null;
|
|
document.getElementById("cropValue").value = "";
|
|
document.getElementById("ocrSubmit").disabled = true;
|
|
document.getElementById("ocrProgress").textContent = "请在预览中拖动框选字幕区域";
|
|
});
|
|
}
|
|
|
|
// 提交字幕 OCR 任务：携带 crop 覆盖参数，框选完成才可用。
|
|
async function submitOcr() {
|
|
const fileInput = document.getElementById("ocrVideoFile");
|
|
const progress = document.getElementById("ocrProgress");
|
|
if (!selectedCrop) {
|
|
progress.textContent = "请先框选字幕区域";
|
|
return;
|
|
}
|
|
const file = selectedVideoFile;
|
|
if (!file) {
|
|
progress.textContent = "请先选择视频文件";
|
|
return;
|
|
}
|
|
const workflowId = document.getElementById("workflowSelect").value;
|
|
const form = new FormData();
|
|
form.append("file", file);
|
|
// 把框选的 crop 传给需要它的节点（如 frame-extract）。
|
|
form.append("params", JSON.stringify({ [cropNodeId]: { crop: selectedCrop } }));
|
|
progress.textContent = "上传中...";
|
|
try {
|
|
const response = await fetch(`/api/apps/${encodeURIComponent(workflowId)}/runs`, {
|
|
method: "POST",
|
|
body: form,
|
|
});
|
|
const data = await response.json().catch(() => null);
|
|
if (!response.ok) {
|
|
throw new Error(data && data.detail ? JSON.stringify(data.detail) : response.statusText);
|
|
}
|
|
progress.textContent = `任务 ${data.id} 已创建，正在跳转到任务管理...`;
|
|
window.location.href = `/tasks.html?run=${encodeURIComponent(data.id)}`;
|
|
} catch (error) {
|
|
progress.textContent = `创建失败：${error.message}`;
|
|
}
|
|
}
|
|
|
|
// 渲染单个任务的进度条 HTML；失败任务用红色填充。
|
|
function progressBar(percent, failed) {
|
|
return `<div class="progress"><div class="progress-bar ${failed ? "error" : ""}" style="width:${Math.min(100, percent)}%"></div></div>`;
|
|
}
|
|
|
|
// 为已完成任务生成最终产物下载链接（cn_srt / ass）。
|
|
function artifactLinks(runId, status) {
|
|
if (status !== "COMPLETED") return "-";
|
|
return `
|
|
<div class="downloads-inline">
|
|
<a class="download-link" href="/api/runs/${encodeURIComponent(runId)}/artifacts/cn_srt">中文 SRT</a>
|
|
<a class="download-link" href="/api/runs/${encodeURIComponent(runId)}/artifacts/ass">VR ASS</a>
|
|
</div>`;
|
|
}
|
|
|
|
// 加载最近任务并渲染任务表格：状态、当前节点、进度条、产物与重试。
|
|
async function loadRuns() {
|
|
const tbody = document.getElementById("runList");
|
|
if (!tbody) return;
|
|
const runs = await api("/api/runs");
|
|
tbody.innerHTML = runs.length
|
|
? runs
|
|
.map((run) => {
|
|
const percent = Math.round((run.progress || 0) * 100);
|
|
const failed = run.status === "FAILED";
|
|
// RUNNING/QUEUED 附加耗时或排队提示，其余状态只显示徽章。
|
|
const statusHtml =
|
|
run.status === "RUNNING"
|
|
? `${badge(run.status)} <span class="muted">已运行 ${formatElapsed(run.updated_at)}</span>`
|
|
: run.status === "QUEUED"
|
|
? `${badge(run.status)} <span class="muted">排队中</span>`
|
|
: run.status === "PAUSED"
|
|
? `${badge(run.status)} <span class="muted">已暂停 ${formatElapsed(run.updated_at)}</span>`
|
|
: badge(run.status);
|
|
// 失败任务提供重试，所有任务均可删除。
|
|
// 排队/运行中可暂停，暂停后可继续，失败可重试，所有任务可删除。
|
|
const canPause = run.status === "RUNNING" || run.status === "QUEUED";
|
|
const canResume = run.status === "PAUSED";
|
|
const actions = `
|
|
${canPause ? `<button class="warn" data-pause-run="${escapeHtml(run.id)}">暂停</button>` : ""}
|
|
${canResume ? `<button class="warn" data-resume-run="${escapeHtml(run.id)}">继续</button>` : ""}
|
|
${failed ? `<button class="danger" data-retry-run="${escapeHtml(run.id)}">重试</button>` : ""}
|
|
<button class="danger" data-delete-run="${escapeHtml(run.id)}">删除</button>
|
|
`;
|
|
return `
|
|
<tr>
|
|
<td title="${escapeHtml(run.error || "")}">${escapeHtml(run.id)}</td>
|
|
<td>${escapeHtml(run.workflow_id)}</td>
|
|
<td>${statusHtml}</td>
|
|
<td>${escapeHtml(run.current_node_id || "-")}</td>
|
|
<td>${progressBar(percent, failed)} ${percent}%</td>
|
|
<td>${escapeHtml(formatTime(run.created_at))}</td>
|
|
<td>${artifactLinks(run.id, run.status)}</td>
|
|
<td>${actions}</td>
|
|
</tr>`;
|
|
})
|
|
.join("")
|
|
: '<tr><td colspan="8">暂无任务，请到首页发起。</td></tr>';
|
|
}
|
|
|
|
// 请求后端重试失败任务，成功后刷新列表。
|
|
async function retryRun(runId) {
|
|
try {
|
|
const result = await api(`/api/runs/${runId}/retry`, { method: "POST" });
|
|
alert(`任务 ${result.id} 已重新排队`);
|
|
await loadRuns();
|
|
} catch (error) {
|
|
alert(`重试失败：${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 暂停任务：排队或运行中的任务置为 PAUSED，运行中的任务在节点边界停下。
|
|
async function pauseRun(runId) {
|
|
try {
|
|
const result = await api(`/api/runs/${runId}/pause`, { method: "POST" });
|
|
alert(`任务 ${result.id} 已暂停`);
|
|
await loadRuns();
|
|
} catch (error) {
|
|
alert(`暂停失败：${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 继续任务：PAUSED 恢复排队，由调度器从断点继续执行。
|
|
async function resumeRun(runId) {
|
|
try {
|
|
const result = await api(`/api/runs/${runId}/resume`, { method: "POST" });
|
|
alert(`任务 ${result.id} 已恢复执行`);
|
|
await loadRuns();
|
|
} catch (error) {
|
|
alert(`继续失败：${error.message}`);
|
|
}
|
|
}
|
|
// 删除任务：二次确认后调用后端删除接口并刷新列表。
|
|
async function deleteRun(runId) {
|
|
if (!window.confirm(`确认删除任务 ${runId}？相关产物文件将一并删除。`)) {
|
|
return;
|
|
}
|
|
try {
|
|
await api(`/api/runs/${runId}`, { method: "DELETE" });
|
|
await loadRuns();
|
|
} catch (error) {
|
|
alert(`删除失败：${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 创建或更新工作流：解析 DAG JSON 后提交，随后刷新列表。
|
|
async function createWorkflow() {
|
|
const workflowId = document.getElementById("workflowId").value.trim();
|
|
const name = document.getElementById("workflowName").value.trim();
|
|
const description = document.getElementById("workflowDescription").value.trim();
|
|
let definition;
|
|
try {
|
|
definition = JSON.parse(document.getElementById("workflowDefinition").value);
|
|
} catch (error) {
|
|
alert(`DAG JSON 无效：${error.message}`);
|
|
return;
|
|
}
|
|
try {
|
|
await api("/api/admin/workflows", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
id: workflowId || undefined,
|
|
name,
|
|
description,
|
|
definition,
|
|
}),
|
|
});
|
|
alert("工作流已保存");
|
|
await loadWorkflows();
|
|
} catch (error) {
|
|
alert(`保存失败：${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 发布指定工作流，使其出现在用户应用中心。
|
|
async function publishWorkflow(workflowId) {
|
|
try {
|
|
await api(`/api/admin/workflows/${workflowId}/publish`, { method: "POST" });
|
|
await loadWorkflows();
|
|
} catch (error) {
|
|
alert(`发布失败：${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 删除指定工作流。
|
|
async function deleteWorkflow(workflowId) {
|
|
try {
|
|
await api(`/api/admin/workflows/${workflowId}`, { method: "DELETE" });
|
|
await loadWorkflows();
|
|
} catch (error) {
|
|
alert(`删除失败：${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 首页发起任务：选择工作流并上传视频，创建任务后跳转到任务管理页查看进度。
|
|
async function uploadVideo() {
|
|
const workflowId = document.getElementById("workflowSelect").value;
|
|
const fileInput = document.getElementById("videoFile");
|
|
const progress = document.getElementById("runProgress");
|
|
if (!workflowId) {
|
|
progress.textContent = "暂无可用工作流";
|
|
return;
|
|
}
|
|
if (!fileInput.files.length) {
|
|
progress.textContent = "请先选择视频文件";
|
|
return;
|
|
}
|
|
const form = new FormData();
|
|
form.append("file", fileInput.files[0]);
|
|
progress.textContent = "上传中...";
|
|
try {
|
|
const response = await fetch(`/api/apps/${encodeURIComponent(workflowId)}/runs`, {
|
|
method: "POST",
|
|
body: form,
|
|
});
|
|
const data = await response.json().catch(() => null);
|
|
if (!response.ok) {
|
|
throw new Error(data && data.detail ? JSON.stringify(data.detail) : response.statusText);
|
|
}
|
|
progress.textContent = `任务 ${data.id} 已创建，正在跳转到任务管理...`;
|
|
// 首页只负责发起任务，进度展示交给任务管理页。
|
|
window.location.href = `/tasks.html?run=${encodeURIComponent(data.id)}`;
|
|
} catch (error) {
|
|
progress.textContent = `创建失败：${error.message}`;
|
|
}
|
|
}
|
|
|
|
// 全局点击委托：按按钮上的 data-* 属性分发到对应操作。
|
|
document.addEventListener("click", (event) => {
|
|
const deleteWorkflowButton = event.target.closest("[data-delete-workflow]");
|
|
if (deleteWorkflowButton) {
|
|
deleteWorkflow(deleteWorkflowButton.dataset.deleteWorkflow);
|
|
return;
|
|
}
|
|
const publishWorkflowButton = event.target.closest("[data-publish-workflow]");
|
|
if (publishWorkflowButton) {
|
|
publishWorkflow(publishWorkflowButton.dataset.publishWorkflow);
|
|
return;
|
|
}
|
|
const retryButton = event.target.closest("[data-retry-run]");
|
|
if (retryButton) {
|
|
retryRun(retryButton.dataset.retryRun);
|
|
return;
|
|
}
|
|
const pauseButton = event.target.closest("[data-pause-run]");
|
|
if (pauseButton) {
|
|
pauseRun(pauseButton.dataset.pauseRun);
|
|
return;
|
|
}
|
|
const resumeButton = event.target.closest("[data-resume-run]");
|
|
if (resumeButton) {
|
|
resumeRun(resumeButton.dataset.resumeRun);
|
|
return;
|
|
}
|
|
const deleteRunButton = event.target.closest("[data-delete-run]");
|
|
if (deleteRunButton) {
|
|
deleteRun(deleteRunButton.dataset.deleteRun);
|
|
}
|
|
});
|
|
|
|
// 页面初始化：预填 DAG、绑定按钮事件并加载对应页面数据。
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const workflowDefinition = document.getElementById("workflowDefinition");
|
|
if (workflowDefinition) {
|
|
workflowDefinition.value = JSON.stringify(DEMO_WORKFLOW, null, 2);
|
|
}
|
|
const createWorkflowButton = document.getElementById("createWorkflow");
|
|
if (createWorkflowButton) {
|
|
createWorkflowButton.addEventListener("click", createWorkflow);
|
|
}
|
|
const publishWorkflowButton = document.getElementById("publishWorkflow");
|
|
if (publishWorkflowButton) {
|
|
publishWorkflowButton.addEventListener("click", () => {
|
|
publishWorkflow(document.getElementById("workflowId").value.trim());
|
|
});
|
|
}
|
|
const uploadButton = document.getElementById("uploadVideo");
|
|
if (uploadButton) {
|
|
uploadButton.addEventListener("click", uploadVideo);
|
|
// 首页加载已发布工作流供用户选择。
|
|
await loadWorkflowOptions();
|
|
// 字幕 OCR 面板：视频预览 + 拖动框选（仅需 crop 的工作流展示）。
|
|
setupOcrPanel();
|
|
}
|
|
const ocrSubmitButton = document.getElementById("ocrSubmit");
|
|
if (ocrSubmitButton) {
|
|
ocrSubmitButton.addEventListener("click", submitOcr);
|
|
}
|
|
|
|
await loadHealth();
|
|
if (document.getElementById("workflowList")) {
|
|
await loadWorkflows();
|
|
}
|
|
// 任务管理页：每 3 秒刷新一次全部任务的进度，支持高亮跳转参数 run=ID。
|
|
if (document.getElementById("runList")) {
|
|
await loadRuns();
|
|
const params = new URLSearchParams(window.location.search);
|
|
const target = params.get("run");
|
|
if (target) {
|
|
const row = [...document.querySelectorAll("#runList tr")].find((item) =>
|
|
item.textContent.includes(target),
|
|
);
|
|
if (row) {
|
|
row.scrollIntoView({ block: "center" });
|
|
row.style.background = "#fff7db";
|
|
}
|
|
}
|
|
setInterval(loadRuns, 3000);
|
|
}
|
|
});
|