added assets loading retry UI.

app.py

@@ -436,10 +436,12 @@ def build_head ():
 		# left under Compose + Logs (robust against Gradio's flex-nesting quirks).
 		os.path.join(WEB_DIR, 'layout-fit.js'),
 	]
-	tags = ['<script>window.__LILYSCRIPT_SOUNDFONT_URL=%r;window.__LILYSCRIPT_FLUID_URL=%r;window.__LILYSCRIPT_LOADING_RENDERER=%s;</script>'
+	tags = ['<script>window.__LILYSCRIPT_SOUNDFONT_URL=%r;window.__LILYSCRIPT_FLUID_URL=%r;window.__LILYSCRIPT_LOADING_RENDERER=%s;window.__LILYSCRIPT_EMPTY_SCORE=%s;window.__LILYSCRIPT_RENDERER_FAILED=%s;</script>'
 		% (_file_url(os.path.join(WEB_DIR, 'soundfont')) + '/',
 		   _file_url(os.path.join(WEB_DIR, 'fluid')) + '/',
-		   json.dumps(T('loading_renderer')))]
+		   json.dumps(T('loading_renderer')),
+		   json.dumps(T('empty_score')),
+		   json.dumps(T('renderer_failed')))]
 	tags.append('<link rel="stylesheet" href="%s">' % _file_url(os.path.join(WEB_DIR, 'score-player.css')))
 	tags.append('<link rel="stylesheet" href="%s">' % _file_url(os.path.join(WEB_DIR, 'lyl-editor.css')))
 	for s in scripts:

lilyscript/lang.py

@@ -69,6 +69,8 @@ _STRINGS = {
 		'open_in_live_editor': '🎹 Open in live-editor',
 		'sheet_music': '## Sheet music',
 		'loading_renderer': 'Loading score renderer…',
+		'empty_score': 'Generate a score, or click one from the Score List to view and play it here.',
+		'renderer_failed': 'Failed to load the score renderer. Click to retry.',
 	},
 	'zh': {
 		'app_title': '## 🎼 LilyScript — 基于 Lilylet 的符号音乐生成\n\n作者 [K.L. Λ](https://k-l-lambda.github.io/), 关于 [Lilylet](https://github.com/k-l-lambda/lilylet)',
@@ -95,6 +97,8 @@ _STRINGS = {
 		'open_in_live_editor': '🎹 在 live-editor 中打开',
 		'sheet_music': '## 乐谱',
 		'loading_renderer': '正在加载乐谱渲染器…',
+		'empty_score': '生成一段乐谱，或从乐谱列表中点击一个，即可在此查看并播放。',
+		'renderer_failed': '乐谱渲染器加载失败，点击重试。',
 	},
 }
 

web/fluid-audio.js

@@ -50,6 +50,7 @@
 	var node = null;          // the synth's AudioNode (kept for diagnostics)
 	var loaded = false;
 	var loadingPromise = null;
+	var failed = false;        // true if the last gm.sf3 load attempt errored (network etc.)
 
 	// Legacy MIDI.js fallback (single-piano), used until FluidSynth finishes loading.
 	var legacy = null;
@@ -99,6 +100,7 @@
 				return;
 			}
 
+			try {
 			// 3) Fetch the 40MB gm.sf3 bytes FIRST, before touching any AudioContext.
 			// This is the key to keeping the fallback audible the whole time: if we
 			// instead created FluidSynth's AudioContext (+ worklet modules) up-front and
@@ -111,7 +113,9 @@
 			// By deferring all FluidSynth context creation until the bytes are in hand,
 			// exactly ONE AudioContext (the legacy fallback) is alive for the whole
 			// download, so its in-gesture resume is unambiguous and it actually sounds.
-			var sfontBuffer = await (await fetch(SOUNDFONT_FILE)).arrayBuffer();
+			var sfResp = await fetch(SOUNDFONT_FILE);
+			if (!sfResp.ok) throw new Error('gm.sf3 HTTP ' + sfResp.status);
+			var sfontBuffer = await sfResp.arrayBuffer();
 			log('gm.sf3 fetched (' + sfontBuffer.byteLength + ' bytes); building FluidSynth');
 
 			// Now build the FluidSynth AudioContext + worklet graph and load the font.
@@ -143,7 +147,16 @@
 			if (legacyReady && legacy && legacy.stopAllNotes) legacy.stopAllNotes();
 
 			loaded = true;
+			failed = false;
 			log('FluidSynth soundfont loaded (gm.sf3)');
+			} catch (err) {
+				// gm.sf3 / FluidSynth load failed (network etc.). Flag it and clear the
+				// in-flight promise so retryLoad() can start a fresh attempt. The legacy
+				// piano fallback (if it loaded) stays audible regardless.
+				failed = true;
+				loadingPromise = null;
+				console.warn('[LilyFluid] gm.sf3 / FluidSynth load failed:', err);
+			}
 		})();
 		return loadingPromise;
 	}
@@ -193,6 +206,10 @@
 		empty: empty,
 		ready: ready,
 		loading: loading,
+		failed: function () { return failed; },
+		// Retry a previously-failed gm.sf3 load. Clears the failed flag and re-runs
+		// loadPlugin (loadingPromise was reset to null in the catch, so this starts fresh).
+		retryLoad: function () { failed = false; return loadPlugin(); },
 		loadPlugin: loadPlugin,
 		resume: resume,
 		noteOn: noteOn,

web/score-player.css

@@ -255,3 +255,87 @@
 		animation: ls-spin 2.4s linear infinite;
 	}
 }
+
+/* Empty-state placeholder: large staff/clef icon + prompt, shown when the renderer is
+   ready but no score is loaded (fresh page or cleared editor). Keeps the panel from
+   sitting blank. Absolutely fills the preview area so the icon + text sit dead-center
+   (the panel is much taller than the content, so flex-centering a normal-flow block
+   would only center within its own small box, leaving it near the top). */
+#ls-score .ls-empty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	text-align: center;
+	user-select: none;
+	pointer-events: none;   /* don't block clicks meant for the panel underneath */
+}
+#ls-score .ls-empty .ls-empty-icon {
+	width: 132px;
+	height: 88px;
+	margin-bottom: 18px;
+	color: #7c5cff;         /* vivid accent (matches the app's purple), not a faint grey */
+	opacity: 0.92;
+}
+#ls-score .ls-empty .ls-empty-text {
+	font-size: 13px;
+	max-width: 300px;
+	line-height: 1.5;
+	color: #c4c4cc;         /* lighter than the icon so the icon reads as the focal point */
+}
+
+/* Renderer-load FAILURE state (network error): shown inside the loading overlay in
+   place of the spinner. A clickable ⟳ retry icon + prompt; re-fetches verovio. */
+#ls-score .ls-renderer-error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+}
+#ls-score .ls-retry-btn {
+	width: 52px;
+	height: 52px;
+	margin-bottom: 14px;
+	border: none;
+	border-radius: 50%;
+	background: #f0ecff;
+	color: #7c5cff;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.15s, transform 0.15s;
+}
+#ls-score .ls-retry-btn:hover { background: #e2dbff; transform: scale(1.05); }
+#ls-score .ls-retry-btn:active { transform: scale(0.97); }
+#ls-score .ls-retry-icon { font-size: 30px; line-height: 1; }
+#ls-score .ls-renderer-error .ls-retry-text {
+	font-size: 13px;
+	max-width: 300px;
+	line-height: 1.5;
+	color: #c0392b;
+}
+
+/* Soundfont (gm.sf3) load FAILURE: the 🎹 badge becomes a clickable retry. The base
+   glyph is dimmed and a ⟳ overlay is shown on top; click handler calls retrySoundfont. */
+#ls-score .ls-sf .ls-sf-retry {
+	display: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-size: 0.95em;
+	font-weight: 700;
+	color: #c0392b;
+}
+#ls-score .ls-sf.ls-sf-err {
+	cursor: pointer;
+	animation: none;
+	filter: grayscale(1);
+	opacity: 0.85;
+}
+#ls-score .ls-sf.ls-sf-err .ls-sf-retry { display: inline; }
+#ls-score .ls-sf.ls-sf-err .ls-sf-check { display: none; }

web/score-player.js

@@ -24,6 +24,31 @@
 	// window.__LILYSCRIPT_LOADING_RENDERER (matches the static placeholder's T('loading_renderer'));
 	// fall back to English if it's absent (e.g. score-player.js loaded standalone).
 	const LOADING_RENDERER_TEXT = window.__LILYSCRIPT_LOADING_RENDERER || 'Loading score renderer…';
+	// Empty-state prompt shown when the renderer is ready but no score is loaded yet.
+	const EMPTY_SCORE_TEXT = window.__LILYSCRIPT_EMPTY_SCORE || 'Generate a score, or click one from the Score List to view and play it here.';
+	// Shown in the panel when verovio (the renderer) fails to load (network error). Clickable to retry.
+	const RENDERER_FAILED_TEXT = window.__LILYSCRIPT_RENDERER_FAILED || 'Failed to load the score renderer. Click to retry.';
+	// Large staff + treble-clef glyph for the empty-state placeholder. Inline SVG (no
+	// asset fetch); currentColor so it inherits the muted placeholder color. The five
+	// horizontal lines are the staff; the ♪/clef is rendered as a centered text glyph.
+	const STAFF_ICON_SVG =
+		'<svg class="ls-empty-icon" viewBox="0 0 120 80" width="120" height="80" aria-hidden="true" fill="none" stroke="currentColor">' +
+		'<g stroke-width="2">' +
+		'<line x1="8" y1="20" x2="112" y2="20"/>' +
+		'<line x1="8" y1="32" x2="112" y2="32"/>' +
+		'<line x1="8" y1="44" x2="112" y2="44"/>' +
+		'<line x1="8" y1="56" x2="112" y2="56"/>' +
+		'<line x1="8" y1="68" x2="112" y2="68"/>' +
+		'</g>' +
+		'<text x="22" y="60" font-size="56" stroke="none" fill="currentColor" font-family="serif">𝄞</text>' +
+		'<g fill="currentColor" stroke="none">' +
+		'<ellipse cx="74" cy="56" rx="7" ry="5" transform="rotate(-20 74 56)"/>' +
+		'<rect x="80" y="26" width="2.4" height="30"/>' +
+		'<ellipse cx="96" cy="44" rx="7" ry="5" transform="rotate(-20 96 44)"/>' +
+		'<rect x="102" y="14" width="2.4" height="30"/>' +
+		'<rect x="80" y="14" width="24" height="6" transform="skewX(-12)"/>' +
+		'</g>' +
+		'</svg>';
 
 	const state = {
 		toolkit: null,        // Verovio toolkit
@@ -79,8 +104,10 @@
 		// Set the promise BEFORE the first await so concurrent callers (the mount-time
 		// warmup + the first render) share ONE init and we never construct verovio twice.
 		state._verovioInitPromise = (async function () {
-			// verovio.bundle.js now loads after us; wait (up to 5 min) for its global.
-			const VInit = await waitForGlobal('VerovioInit', 300000);
+			// verovio.bundle.js now loads after us; wait (up to 60s) for its global. On a
+			// network error the <script> never defines VerovioInit, so this times out → null,
+			// and the caller shows a retry prompt rather than spinning forever.
+			const VInit = await waitForGlobal('VerovioInit', 60000);
 			if (!VInit) { log('VerovioInit global missing (timeout)'); state._verovioInitPromise = null; return null; }
 			// VerovioInit() awaits the Emscripten WASM module's readyPromise, then
 			// returns a constructed toolkit — the path proven by lilylet-live-editor.
@@ -168,7 +195,7 @@
 		const tk = await initVerovio();
 		if (!tk) { setStatus('Verovio not ready', 'err'); return false; }
 		code = (code || '').trim();
-		if (!code) { els.svg.innerHTML = ''; state.lastCode = ''; state.lastMei = null; updatePlayerVisibility(); return false; }
+		if (!code) { els.svg.innerHTML = ''; state.lastCode = ''; state.lastMei = null; updatePlayerVisibility(); updateEmptyState(); return false; }
 		if (code === state.lastCode) return true;
 		setStatus('Rendering…', 'busy');
 		try {
@@ -494,8 +521,18 @@
 		els.sf.classList.remove('ready');
 		function markReady () {
 			els.sf.classList.add('ready');
+			els.sf.classList.remove('ls-sf-err');
 			els.sf.title = 'Sound library ready — full instrument timbres';
 		}
+		// gm.sf3 failed to load: turn the 🎹 badge into a clickable retry (⟳ overlay).
+		// The legacy piano fallback (if loaded) stays audible, so play still works — this
+		// only signals the full GM timbres are unavailable until retried.
+		function markFailed () {
+			els.sf.classList.remove('ready');
+			els.sf.classList.add('ls-sf-err');
+			els.sf.style.cursor = 'pointer';
+			els.sf.title = 'Sound library failed to load — click to retry';
+		}
 		// reflect current backend-audible state on the play button, and recover from a
 		// build race: if a backend is now audible but the player wasn't built yet (the
 		// first buildPlayer ran before audio was ready), build it now so play enables.
@@ -524,6 +561,7 @@
 		var iv = setInterval(function () {
 			syncPlayEnabled();
 			if (F.ready()) markReady();
+			else if (F.failed && F.failed()) markFailed();
 			if (F.ready() && state.player && state.midiData) { clearInterval(iv); state._sfInterval = null; }
 		}, 200);
 		state._sfInterval = iv;
@@ -531,6 +569,20 @@
 		setTimeout(function () { if (state._sfInterval) { clearInterval(state._sfInterval); state._sfInterval = null; } }, 60000);
 	}
 
+	// Retry a failed gm.sf3 / soundfont load (driven by clicking the 🎹 badge in its
+	// error state). Clears the badge error, kicks a fresh load via the backend's
+	// retryLoad(), and restarts the status poller so the badge tracks the new attempt.
+	function retrySoundfont () {
+		var F = state.audio && state.audio.MidiAudio;
+		if (!F || !F.retryLoad) return;
+		els.sf.classList.remove('ls-sf-err');
+		els.sf.title = 'Loading sound library…';
+		// stop the current poller so startSfStatus re-arms cleanly
+		if (state._sfInterval) { clearInterval(state._sfInterval); state._sfInterval = null; }
+		F.retryLoad();
+		startSfStatus();
+	}
+
 	// Show the player bar only when: not generating, a score is rendered, audio
 	// available. While generating we keep SVG visible but hide the transport.
 	function updatePlayerVisibility () {
@@ -571,9 +623,22 @@
 		// would sit blank with no feedback during the wait (the static placeholder is gone,
 		// replaced by this mount). Removed once verovio is ready (setRendererLoading(false)).
 		const loading = document.createElement('div'); loading.className = 'ls-renderer-loading';
-		loading.innerHTML = '<div class="ls-loading-spinner" aria-hidden="true"></div>' +
-			'<div class="ls-loading-text">' + LOADING_RENDERER_TEXT + '</div>';
-		wrap.appendChild(status); wrap.appendChild(svgBox); wrap.appendChild(loading);
+		loading.innerHTML =
+			'<div class="ls-loading-spinner" aria-hidden="true"></div>' +
+			'<div class="ls-loading-text">' + LOADING_RENDERER_TEXT + '</div>' +
+			// error/retry block (hidden until verovio fails to load). The ⟳ icon + text are
+			// clickable to retry; see setRendererError() / retryVerovio().
+			'<div class="ls-renderer-error" style="display:none">' +
+				'<button type="button" class="ls-retry-btn" title="Retry"><span class="ls-retry-icon" aria-hidden="true">⟳</span></button>' +
+				'<div class="ls-retry-text">' + RENDERER_FAILED_TEXT + '</div>' +
+			'</div>';
+		// Empty-state placeholder: a large staff/treble-clef icon + prompt, shown when the
+		// renderer is ready but no score is loaded (fresh page, or editor cleared). Without
+		// it the panel would be blank once the loading spinner clears. Hidden when a score
+		// renders or while generating. Icon is inline SVG so it needs no extra asset fetch.
+		const empty = document.createElement('div'); empty.className = 'ls-empty'; empty.style.display = 'none';
+		empty.innerHTML = STAFF_ICON_SVG + '<div class="ls-empty-text">' + EMPTY_SCORE_TEXT + '</div>';
+		wrap.appendChild(status); wrap.appendChild(svgBox); wrap.appendChild(loading); wrap.appendChild(empty);
 
 		// transport bar (above the score)
 		const player = document.createElement('div'); player.className = 'ls-player'; player.style.display = 'none';
@@ -585,12 +650,15 @@
 			'<div class="ls-progress"><div class="ls-fill"></div></div>' +
 			// sound-library status: pulsing 🎹 while the GM soundfont loads (piano
 			// fallback audible), green 🎹✓ once ready (shown 2s, then faded; hover reveals).
-			'<span class="ls-sf" style="display:none" title="Loading sound library… (grand-piano fallback active)">🎹<span class="ls-sf-check">✓</span></span>';
+			// On load failure it becomes a clickable retry (⟳ overlay, .ls-sf-err); see
+			// startSfStatus() / retrySoundfont().
+			'<span class="ls-sf" style="display:none" title="Loading sound library… (grand-piano fallback active)">🎹<span class="ls-sf-check">✓</span><span class="ls-sf-retry" aria-hidden="true">⟳</span></span>';
 
 		root.appendChild(player); root.appendChild(wrap);
 
 		els.root = root; els.svg = svgBox; els.preview = wrap; els.status = status; els.player = player; els.cursor = cursor;
-		els.loading = loading;
+		els.loading = loading; els.empty = empty;
+		els.rendererError = loading.querySelector('.ls-renderer-error');
 		els.playBtn = player.querySelector('.ls-play');
 		els.pauseBtn = player.querySelector('.ls-pause');
 		els.stopBtn = player.querySelector('.ls-stop');
@@ -602,6 +670,10 @@
 		els.playBtn.addEventListener('click', play);
 		els.pauseBtn.addEventListener('click', pause);
 		els.stopBtn.addEventListener('click', stop);
+		// retry verovio (renderer) on click of the in-panel error prompt
+		els.rendererError.querySelector('.ls-retry-btn').addEventListener('click', retryVerovio);
+		// retry the soundfont when the 🎹 badge is in its error state (clickable then)
+		els.sf.addEventListener('click', function () { if (els.sf.classList.contains('ls-sf-err')) retrySoundfont(); });
 		els.progress.addEventListener('click', function (e) {
 			if (!state.midiData) return;
 			const r = els.progress.getBoundingClientRect();
@@ -631,9 +703,13 @@
 		});
 
 		// Show the renderer-loading spinner until verovio is ready; initVerovio() resolves
-		// when the (possibly still-downloading) verovio bundle has constructed its toolkit.
+		// when the (possibly still-downloading) verovio bundle has constructed its toolkit,
+		// or null on failure/timeout (network error) — in which case show a retry prompt.
 		setRendererLoading(!state.verovioReady);
-		initVerovio().then(function (tk) { setRendererLoading(false); });   // warm up early; clears spinner when ready
+		initVerovio().then(function (tk) {
+			if (tk) setRendererLoading(false);
+			else setRendererError();   // network/load failure → offer a retry (not a blank/empty state)
+		});
 		// Start loading the sound library (FluidSynth GM soundfont, ~40MB) right away
 		// at page mount rather than deferring to the first play — the AudioContext is
 		// created suspended (no autoplay-policy violation) and the fetch/worklet load
@@ -648,6 +724,71 @@
 		if (!els.loading) return;
 		var hasSvg = els.svg && els.svg.querySelector('svg');
 		els.loading.style.display = (flag && !hasSvg) ? '' : 'none';
+		// leaving the loading state (success) clears any prior error UI
+		if (!flag) showRendererErrorBlock(false);
+		updateEmptyState();
+	}
+
+	// Toggle just the spinner-vs-error contents inside the loading overlay.
+	function showRendererErrorBlock (isError) {
+		if (els.rendererError) els.rendererError.style.display = isError ? '' : 'none';
+		var spinner = els.loading && els.loading.querySelector('.ls-loading-spinner');
+		var ltext = els.loading && els.loading.querySelector('.ls-loading-text');
+		if (spinner) spinner.style.display = isError ? 'none' : '';
+		if (ltext) ltext.style.display = isError ? 'none' : '';
+	}
+
+	// Renderer (verovio) failed to load — keep the overlay up but swap the spinner for a
+	// clickable retry prompt. state.verovioReady stays false, so the empty-state stays
+	// suppressed (we must not show "click a score to play" when the renderer is dead).
+	function setRendererError () {
+		state._rendererError = true;
+		if (!els.loading) return;
+		els.loading.style.display = '';        // keep overlay visible
+		showRendererErrorBlock(true);
+		updateEmptyState();
+	}
+
+	// Retry loading verovio: re-fetch the bundle <script> (a failed network load left no
+	// VerovioInit), reset the cached init promise, and re-run initVerovio. Driven by the
+	// retry button in the renderer-error block.
+	function retryVerovio () {
+		if (state.verovioReady) { setRendererLoading(false); return; }
+		state._rendererError = false;
+		state._verovioInitPromise = null;
+		showRendererErrorBlock(false);        // back to spinner while retrying
+		setRendererLoading(true);
+		reloadVendorScript('verovio.bundle.js');
+		initVerovio().then(function (tk) {
+			if (tk) { setRendererLoading(false); if (state.lastCode) render(state.lastCode); }
+			else setRendererError();
+		});
+	}
+
+	// Re-inject a vendored <script> by URL fragment (e.g. 'verovio.bundle.js') so a retry
+	// actually re-downloads it. Reuses the original tag's src; appends a cache-buster so a
+	// previously-failed (and possibly negatively-cached) response isn't served again.
+	function reloadVendorScript (frag) {
+		var orig = null, tags = document.querySelectorAll('script[src]');
+		for (var i = 0; i < tags.length; i++) { if (tags[i].src.indexOf(frag) !== -1) { orig = tags[i]; break; } }
+		var base = orig ? orig.src.split('?')[0] : null;
+		if (!base) { log('retry: original <script> for ' + frag + ' not found'); return; }
+		var s = document.createElement('script');
+		s.src = base + '?retry=' + Date.now();
+		s.async = false;
+		document.head.appendChild(s);
+	}
+
+	// Show the empty-state placeholder (staff icon + prompt) exactly when there is
+	// nothing else to show: renderer ready, no score rendered, not generating, and the
+	// loading spinner isn't up. Keeps the panel from sitting blank before the user picks
+	// or generates a score. Called from every state transition that can change it.
+	function updateEmptyState () {
+		if (!els.empty) return;
+		var hasSvg = els.svg && els.svg.querySelector('svg');
+		var loadingShown = els.loading && els.loading.style.display !== 'none';
+		var show = state.verovioReady && !hasSvg && !loadingShown && !state.generating && !state._rendererError;
+		els.empty.style.display = show ? '' : 'none';
 	}
 
 	// Public API consumed by app.py's injected glue.
@@ -665,6 +806,7 @@
 			if (els.svg) els.svg.classList.toggle('ls-generating-bg', flag);
 			if (flag) { stop(); }
 			updatePlayerVisibility();
+			updateEmptyState();
 		},
 		isReady: function () { return state.verovioReady; },
 	};