Implement orphaned temporary folder re-import and resume feature with web UI modal
This commit is contained in:
+132
@@ -2726,6 +2726,11 @@ async function loadTempInfo() {
|
||||
<div class="queue-item-status-bar" style="border: none; padding: 0;">
|
||||
<span class="status-badge ${statusClass}" style="font-size: 0.7rem; padding: 0.15rem 0.5rem; margin-right: 0.5rem;">${statusLabel}</span>
|
||||
<div class="queue-item-actions">
|
||||
${f.status === "orphaned" ? `
|
||||
<button class="btn btn-primary btn-small btn-reimport-temp" data-job-id="${f.job_id}" data-path="${f.path}">
|
||||
<i class="fa-solid fa-cloud-arrow-down"></i> Re-import
|
||||
</button>
|
||||
` : ''}
|
||||
<button class="btn btn-danger btn-small btn-delete-temp" data-path="${f.path}" ${isActive ? 'disabled style="opacity: 0.5; cursor: not-allowed;" title="Cannot delete active job frames"' : ''}>
|
||||
<i class="fa-solid fa-trash"></i> Delete
|
||||
</button>
|
||||
@@ -2756,6 +2761,13 @@ async function loadTempInfo() {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const reimportBtn = item.querySelector(".btn-reimport-temp");
|
||||
if (reimportBtn) {
|
||||
reimportBtn.addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
showReimportModal(f.job_id, f.path);
|
||||
});
|
||||
}
|
||||
|
||||
listContainer.appendChild(item);
|
||||
@@ -2912,4 +2924,124 @@ async function loadDefaultTempDir() {
|
||||
}
|
||||
}
|
||||
|
||||
async function showReimportModal(jobId, tempPath) {
|
||||
const modal = document.getElementById("reimport-modal");
|
||||
const jobIdInput = document.getElementById("reimport-job-id");
|
||||
const tempDirInput = document.getElementById("reimport-temp-dir");
|
||||
const videoSelect = document.getElementById("reimport-video-select");
|
||||
|
||||
if (!modal || !jobIdInput || !tempDirInput || !videoSelect) return;
|
||||
|
||||
jobIdInput.value = jobId;
|
||||
|
||||
// Resolve custom parent directory if tempPath contains jobId
|
||||
const parentDir = tempPath.substring(0, tempPath.lastIndexOf("/" + jobId));
|
||||
tempDirInput.value = parentDir;
|
||||
|
||||
// Populate video files dropdown
|
||||
videoSelect.innerHTML = '<option value="">-- Loading Uploaded Videos --</option>';
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/uploads");
|
||||
if (res.ok) {
|
||||
const uploads = await res.json();
|
||||
if (uploads.length === 0) {
|
||||
videoSelect.innerHTML = '<option value="">No uploaded videos found. Upload one first.</option>';
|
||||
} else {
|
||||
videoSelect.innerHTML = '<option value="">-- Select a Video File --</option>';
|
||||
|
||||
uploads.forEach(u => {
|
||||
// Reimport requires the absolute path to the uploaded video file
|
||||
const videoPath = `/var/home/david/Documents/vscode/video_upscaler/uploads/${u.original_filename}`;
|
||||
const opt = document.createElement("option");
|
||||
opt.value = videoPath;
|
||||
opt.textContent = `${u.original_filename} (${formatBytes(u.size_bytes)})`;
|
||||
videoSelect.appendChild(opt);
|
||||
});
|
||||
|
||||
// Try to auto-match files by looking for standard uploaded prefix or creation time
|
||||
try {
|
||||
const matches = Array.from(videoSelect.options).filter(opt => opt.value.includes("8d4d3e0e-e5a5-4101-9e2d-550f96c1674f"));
|
||||
if (matches.length > 0) {
|
||||
matches[0].selected = true;
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
} else {
|
||||
videoSelect.innerHTML = '<option value="">Error loading uploads.</option>';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
videoSelect.innerHTML = '<option value="">Error loading uploads.</option>';
|
||||
}
|
||||
|
||||
modal.style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
// Re-import modal close event
|
||||
const reimportModal = document.getElementById("reimport-modal");
|
||||
const reimportCloseBtn = document.getElementById("reimport-modal-close-btn");
|
||||
if (reimportModal && reimportCloseBtn) {
|
||||
reimportCloseBtn.addEventListener("click", () => {
|
||||
reimportModal.style.display = "none";
|
||||
document.body.style.overflow = "";
|
||||
});
|
||||
reimportModal.addEventListener("click", (e) => {
|
||||
if (e.target === reimportModal) {
|
||||
reimportModal.style.display = "none";
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Re-import form submission handler
|
||||
const reimportForm = document.getElementById("reimport-form");
|
||||
if (reimportForm) {
|
||||
reimportForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const jobId = document.getElementById("reimport-job-id").value;
|
||||
const tempDir = document.getElementById("reimport-temp-dir").value;
|
||||
const videoPath = document.getElementById("reimport-video-select").value;
|
||||
const model = document.getElementById("reimport-model-select").value;
|
||||
const faceRestoration = document.getElementById("reimport-face-restoration").checked;
|
||||
const rifeInterpolation = document.getElementById("reimport-rife-interpolation").checked;
|
||||
const audioDenoise = document.getElementById("reimport-audio-denoise").checked;
|
||||
|
||||
if (!videoPath) {
|
||||
alert("Please select a video file.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/system/temp-reimport/${jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
video_path: videoPath,
|
||||
model: model,
|
||||
scale: 4,
|
||||
ai_face_restoration: faceRestoration,
|
||||
ai_rife_interpolation: rifeInterpolation,
|
||||
ai_audio_denoise: audioDenoise,
|
||||
temp_dir: tempDir
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
reimportModal.style.display = "none";
|
||||
document.body.style.overflow = "";
|
||||
loadQueue();
|
||||
loadTempInfo();
|
||||
} else {
|
||||
const err = await res.json();
|
||||
alert("Failed to reimport job: " + (err.detail || "unknown error"));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("Network error occurred.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initializeApp();
|
||||
|
||||
@@ -921,6 +921,54 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Re-import Modal -->
|
||||
<div id="reimport-modal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-card glass-card" style="max-width: 480px;">
|
||||
<div class="modal-header">
|
||||
<h3><i class="fa-solid fa-cloud-arrow-down"></i> Re-import & Resume Job</h3>
|
||||
<button type="button" id="reimport-modal-close-btn" class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="modal-body" style="padding: 1.5rem 0;">
|
||||
<form id="reimport-form">
|
||||
<input type="hidden" id="reimport-job-id">
|
||||
<input type="hidden" id="reimport-temp-dir">
|
||||
|
||||
<div class="form-group" style="margin-bottom: 1.25rem;">
|
||||
<label for="reimport-video-select" style="display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.85rem;">Select Video File:</label>
|
||||
<select id="reimport-video-select" class="form-control" required style="width: 100%; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); padding: 0.5rem; border-radius: 6px;">
|
||||
<!-- Dynamically populated -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-bottom: 1.25rem;">
|
||||
<label for="reimport-model-select" style="display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.85rem;">Upscale Model:</label>
|
||||
<select id="reimport-model-select" class="form-control" style="width: 100%; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); padding: 0.5rem; border-radius: 6px;">
|
||||
<option value="realesrgan-x4plus">Real-ESRGAN x4 Plus (Universal)</option>
|
||||
<option value="realesr-animevideov3">Real-ESRGAN Anime Video v3</option>
|
||||
<option value="realesrgan-x4plus-anime">Real-ESRGAN Anime x4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem;">
|
||||
<label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem;">
|
||||
<input type="checkbox" id="reimport-face-restoration" style="width: 16px; height: 16px; accent-color: var(--primary);"> Enable Face Restoration (GFPGAN)
|
||||
</label>
|
||||
<label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem;">
|
||||
<input type="checkbox" id="reimport-rife-interpolation" style="width: 16px; height: 16px; accent-color: var(--primary);"> Enable Frame Interpolation (RIFE)
|
||||
</label>
|
||||
<label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem;">
|
||||
<input type="checkbox" id="reimport-audio-denoise" style="width: 16px; height: 16px; accent-color: var(--primary);"> Enable Audio Denoising
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 0.75rem;">
|
||||
<i class="fa-solid fa-play"></i> Import & Resume Job
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Javascript Orchestration -->
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user