document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('genForm');
const runBtn = document.getElementById('runBtn');
const fileInput = document.getElementById('image');
const dropZone = document.getElementById('dropZone');
const fileNameDisplay = document.getElementById('fileName');
const jobsList = document.getElementById('jobsList');
const refreshBtn = document.getElementById('refreshBtn');
// File Upload Drag & Drop
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.style.borderColor = '#8a2be2';
dropZone.style.background = 'rgba(138, 43, 226, 0.15)';
});
dropZone.addEventListener('dragleave', () => {
dropZone.style.borderColor = 'rgba(255, 255, 255, 0.2)';
dropZone.style.background = 'rgba(15, 23, 42, 0.4)';
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.style.borderColor = 'rgba(255, 255, 255, 0.2)';
dropZone.style.background = 'rgba(15, 23, 42, 0.4)';
if (e.dataTransfer.files.length) {
fileInput.files = e.dataTransfer.files;
updateFileName();
}
});
fileInput.addEventListener('change', updateFileName);
function updateFileName() {
if (fileInput.files.length > 0) {
fileNameDisplay.textContent = fileInput.files[0].name;
fileNameDisplay.style.color = '#34d399';
} else {
fileNameDisplay.textContent = 'No file chosen';
fileNameDisplay.style.color = '#00d2ff';
}
}
// Form Submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
runBtn.disabled = true;
runBtn.innerHTML = `⏳DISPATCHING TO KAGGLE...`;
const formData = new FormData(form);
try {
const response = await fetch('/api/run', {
method: 'POST',
body: formData
});
const data = await response.json();
if (response.ok) {
alert(`🎉 Job successfully dispatched to Kaggle!\nJob ID: ${data.job_id}\n\nYou can safely close this browser or go offline. Your video is being generated in the cloud!`);
form.reset();
fileNameDisplay.textContent = 'No file chosen';
fileNameDisplay.style.color = '#00d2ff';
fetchJobs();
} else {
alert(`❌ Error sending job to Kaggle:\n${data.error || 'Unknown error'}`);
}
} catch (err) {
alert(`❌ Network error:\n${err.message}`);
} finally {
runBtn.disabled = false;
runBtn.innerHTML = `🚀RUN CLOUD GENERATION`;
}
});
// Fetch & Render Jobs
async function fetchJobs() {
refreshBtn.innerHTML = '⏳ Checking...';
try {
const res = await fetch('/api/jobs');
const jobs = await res.json();
renderJobs(jobs);
} catch (err) {
jobsList.innerHTML = `Failed to load jobs. Cloud backend unreachable.
`;
} finally {
refreshBtn.innerHTML = '🔄 Refresh';
}
}
refreshBtn.addEventListener('click', fetchJobs);
function renderJobs(jobs) {
if (!jobs || jobs.length === 0) {
jobsList.innerHTML = `
📂
No Generations Yet
Submit your first script above to start generating videos on Kaggle.
`;
return;
}
// Sort reverse chronological
jobs.reverse();
jobsList.innerHTML = jobs.map(job => {
let statusClass = 'status-running';
let statusIcon = '⚙️';
if (job.status === 'Completed') {
statusClass = 'status-completed';
statusIcon = '✅';
} else if (job.status === 'Failed') {
statusClass = 'status-failed';
statusIcon = '❌';
}
const downloadSection = job.status === 'Completed' ? `
⬇️ Download Stitched Video (.mp4)
` : (job.status === 'Failed' ? `
⚠️ Kaggle kernel failed or timed out. Check Kaggle logs.
` : `
🔄 Processing on Kaggle GPU... You can close this tab!
`);
return `
🎬 ${job.id}
${job.created_at || 'Recently'}
${statusIcon} ${job.status}
"${job.script_preview || 'No script text'}"
${downloadSection}
`;
}).join('');
}
// Auto load on startup and poll every 30s
fetchJobs();
setInterval(fetchJobs, 30000);
});