diff --git a/frontend/app.js b/frontend/app.js index 912c5b6..72c12a8 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -27,6 +27,12 @@ const resultCount = document.querySelector("#resultCount"); const jobMeta = document.querySelector("#jobMeta"); const detailDialog = document.querySelector("#detailDialog"); const closeDialog = document.querySelector("#closeDialog"); +const openSourceButton = document.querySelector("#openSourceButton"); +const sourceDialog = document.querySelector("#sourceDialog"); +const closeSourceDialog = document.querySelector("#closeSourceDialog"); +const sourceTitle = document.querySelector("#sourceTitle"); +const sourceVideo = document.querySelector("#sourceVideo"); +const sourceImage = document.querySelector("#sourceImage"); const methodLabels = new Map(); const methodDescriptions = new Map(); @@ -68,12 +74,17 @@ function renderPreview(file) { previewEmpty.hidden = true; videoPreview.hidden = true; imagePreview.hidden = true; + openSourceButton.hidden = false; if (file.type.startsWith("video/")) { videoPreview.src = currentObjectUrl; videoPreview.hidden = false; + openSourceButton.textContent = "查看原始视频"; + sourceTitle.textContent = "原始视频"; } else { imagePreview.src = currentObjectUrl; imagePreview.hidden = false; + openSourceButton.textContent = "查看原始图像"; + sourceTitle.textContent = "原始图像"; } jobMeta.textContent = `已选择 ${file.name}`; } @@ -213,6 +224,12 @@ function clearAll() { imagePreview.removeAttribute("src"); videoPreview.hidden = true; imagePreview.hidden = true; + sourceVideo.hidden = true; + sourceImage.hidden = true; + sourceVideo.removeAttribute("src"); + sourceImage.removeAttribute("src"); + openSourceButton.hidden = true; + if (sourceDialog.open) sourceDialog.close(); previewEmpty.hidden = false; resultGrid.innerHTML = ""; emptyState.hidden = false; @@ -253,6 +270,20 @@ dropZone.addEventListener("drop", (event) => { sampleButton.addEventListener("click", loadSample); clearButton.addEventListener("click", clearAll); closeDialog.addEventListener("click", () => detailDialog.close()); +closeSourceDialog.addEventListener("click", () => sourceDialog.close()); +openSourceButton.addEventListener("click", () => { + if (!selectedFile || !currentObjectUrl) return; + sourceVideo.hidden = true; + sourceImage.hidden = true; + if (selectedFile.type.startsWith("video/")) { + sourceVideo.src = currentObjectUrl; + sourceVideo.hidden = false; + } else { + sourceImage.src = currentObjectUrl; + sourceImage.hidden = false; + } + sourceDialog.showModal(); +}); form.addEventListener("submit", async (event) => { event.preventDefault(); diff --git a/frontend/index.html b/frontend/index.html index 03042ea..e7598d2 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -85,7 +85,10 @@
Live Workspace