diff --git a/web_app/static/script.js b/web_app/static/script.js index 441a4ed..97568bd 100644 --- a/web_app/static/script.js +++ b/web_app/static/script.js @@ -613,7 +613,8 @@ 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'); @@ -635,8 +636,9 @@ 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"); + generateBtn.disabled = false; + generateBtn.textContent = 'Generate Poster'; return; } @@ -669,13 +671,20 @@ async function generatePoster() { posterContainer.innerHTML = ''; posterContainer.appendChild(img); showDownloadButton(imageUrl, data.filename); - loadingOverlay.style.display = 'none'; + generateBtn.disabled = false; + generateBtn.textContent = 'Generate Poster'; + }; + img.onerror = () => { + showToast('Failed to load the poster image.', 'error'); + generateBtn.disabled = false; + generateBtn.textContent = 'Generate Poster'; }; } catch (error) { console.error("Generation failed", error); showToast(`Error: ${error.message}`, "error"); - loadingOverlay.style.display = 'none'; + generateBtn.disabled = false; + generateBtn.textContent = 'Generate Poster'; } } diff --git a/web_app/static/style.css b/web_app/static/style.css index 468eb76..2b5e9af 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.6; + cursor: not-allowed; + transform: none; +} + .secondary-btn { background: transparent; border-color: var(--border-color);