diff --git a/web_app/static/script.js b/web_app/static/script.js index 441a4ed..8ef0642 100644 --- a/web_app/static/script.js +++ b/web_app/static/script.js @@ -613,12 +613,14 @@ function handleLyricLineClick(lineNumber) { async function generatePoster() { if (!currentMetadata) return; - loadingOverlay.style.display = 'flex'; + generateBtn.disabled = true; + generateBtn.textContent = 'Generating...'; - const indexingToggle = document.getElementById('indexingToggle'); - const accentToggle = document.getElementById('accentToggle'); + try { + const indexingToggle = document.getElementById('indexingToggle'); + const accentToggle = document.getElementById('accentToggle'); - let payload = { + let payload = { track_id: currentMetadata.id, metadata: currentMetadata, theme: themeInput.value, @@ -635,7 +637,6 @@ async function generatePoster() { const end = endVal; if (isNaN(start) || isNaN(end) || start >= end) { - loadingOverlay.style.display = 'none'; showToast("Please enter a valid range (Start must be less than End).", "error"); return; } @@ -648,8 +649,7 @@ async function generatePoster() { payload.indexing = indexingToggle ? indexingToggle.checked : false; } - try { - const response = await fetch('/api/generate', { + const response = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) @@ -669,13 +669,14 @@ async function generatePoster() { posterContainer.innerHTML = ''; posterContainer.appendChild(img); showDownloadButton(imageUrl, data.filename); - loadingOverlay.style.display = 'none'; }; } catch (error) { console.error("Generation failed", error); showToast(`Error: ${error.message}`, "error"); - loadingOverlay.style.display = 'none'; + } finally { + generateBtn.disabled = false; + generateBtn.textContent = 'Generate Poster'; } } diff --git a/web_app/static/style.css b/web_app/static/style.css index 468eb76..04cbd63 100644 --- a/web_app/static/style.css +++ b/web_app/static/style.css @@ -166,6 +166,12 @@ header p { transform: translateY(-1px); } +.primary-btn:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + .secondary-btn { background: transparent; border-color: var(--border-color);