Spaces:

k-l-lambda
/

LilyScript

Running

App Files Files Community

k-l-lambda commited on 2 days ago

Commit

51e9bed

1 Parent(s): cc88aa8

put score-player.js at front of other js scripts.

Browse files

Files changed (2) hide show

app.py +14 -5
web/score-player.js +29 -6

app.py CHANGED Viewed

@@ -403,17 +403,26 @@ def build_head ():
 	the vendored copy. Gradio delivers this via its client config and injects it
 	on the frontend, so absolute `/gradio_api/file=` URLs resolve correctly.'''
 	vendor = os.path.join(WEB_DIR, 'vendor')
 	scripts = [
-		os.path.join(vendor, 'lilylet.bundle.js'),
-		os.path.join(vendor, 'verovio.bundle.js'),
 		os.path.join(vendor, 'musicWidgetsBrowser.umd.min.js'),
 		# FluidSynth audio backend: js-synthesizer UMD (window.JSSynth) + our adapter
-		# (window.LilyFluidAudio). Must precede score-player.js, which calls
-		# LilyFluidAudio.init() in initAudio(). The libfluidsynth runtime + gm.sf3 are
 		# loaded on demand by the adapter from web/fluid/ and web/soundfont/.
 		os.path.join(vendor, 'js-synthesizer.min.js'),
 		os.path.join(WEB_DIR, 'fluid-audio.js'),
-		os.path.join(WEB_DIR, 'score-player.js'),
 		# our own CodeMirror 6 editor (CM + grammar-derived lilylet() highlighter) and
 		# the mount/bridge script that wires it to the hidden #ls-editor-state textbox.
 		os.path.join(vendor, 'lyl-editor.bundle.js'),

 	the vendored copy. Gradio delivers this via its client config and injects it
 	on the frontend, so absolute `/gradio_api/file=` URLs resolve correctly.'''
 	vendor = os.path.join(WEB_DIR, 'vendor')
+	# ORDER MATTERS for cold-load UX. score-player.js (28KB) defines window.LilyScore
+	# and self-mounts the player as soon as it executes, replacing the loading spinner.
+	# The heavy deps it uses — verovio.bundle.js (7.6MB!), music-widgets, the FluidSynth
+	# adapter — are accessed LAZILY (initVerovio/initAudio await their globals via
+	# waitForGlobal), so they must NOT block score-player.js from running. We therefore
+	# load score-player.js FIRST; if it sat behind verovio (synchronous <head> order),
+	# a slow cold load would leave the spinner stuck for the whole 7.6MB download before
+	# LilyScore — and the self-mount inside it — could run. lilylet.bundle.js stays ahead
+	# because lylToMei() needs window.LilyletLib synchronously at render time (no waiter).
 	scripts = [
+		os.path.join(WEB_DIR, 'score-player.js'),        # defines LilyScore + self-mounts (load first!)
+		os.path.join(vendor, 'lilylet.bundle.js'),       # window.LilyletLib (used synchronously by lylToMei)
+		os.path.join(vendor, 'verovio.bundle.js'),       # 7.6MB; awaited lazily via VerovioInit
 		os.path.join(vendor, 'musicWidgetsBrowser.umd.min.js'),
 		# FluidSynth audio backend: js-synthesizer UMD (window.JSSynth) + our adapter
+		# (window.LilyFluidAudio). score-player.js awaits these lazily in initAudio()
+		# (no longer a hard ordering requirement). The libfluidsynth runtime + gm.sf3 are
 		# loaded on demand by the adapter from web/fluid/ and web/soundfont/.
 		os.path.join(vendor, 'js-synthesizer.min.js'),
 		os.path.join(WEB_DIR, 'fluid-audio.js'),
 		# our own CodeMirror 6 editor (CM + grammar-derived lilylet() highlighter) and
 		# the mount/bridge script that wires it to the hidden #ls-editor-state textbox.
 		os.path.join(vendor, 'lyl-editor.bundle.js'),

web/score-player.js CHANGED Viewed

@@ -50,17 +50,38 @@
 	function log (msg) { console.log('[LilyScore]', msg); }
 	// ---- Verovio init -------------------------------------------------------
 	async function initVerovio () {
 		if (state.verovioReady) return state.toolkit;
 		if (state._verovioInitPromise) return state._verovioInitPromise;
-		if (!window.VerovioInit) { log('VerovioInit global missing'); return null; }
-		// VerovioInit() awaits the Emscripten WASM module's readyPromise, then
-		// returns a constructed toolkit — the path proven by lilylet-live-editor.
 		state._verovioInitPromise = (async function () {
 			try {
-				const tk = await window.VerovioInit();
 				tk.setOptions({ scale: 40, adjustPageHeight: true, breaks: 'auto', pageWidth: 2100, pageHeight: 2970 });
 				state.toolkit = tk;
 				state.verovioReady = true;
@@ -177,8 +198,10 @@
 	async function initAudio () {
 		if (state.audioReady) return true;
-		const mw = window.musicWidgetsBrowser;
-		if (!mw) { log('musicWidgetsBrowser missing'); return false; }
 		// MIDI/MidiPlayer/MusicNotation come from music-widgets; the *audio backend* is
 		// FluidSynth (js-synthesizer + gm.sf3, 128 GM instruments) via LilyFluidAudio,
 		// which falls back to music-widgets' single-piano MidiAudio while the large GM

 	function log (msg) { console.log('[LilyScore]', msg); }
+	// Wait for a global (set by a vendored <script>) to appear. Resolves with the
+	// value, or null on timeout. Needed because score-player.js now loads BEFORE the
+	// 7.6MB verovio.bundle.js in <head> (so LilyScore is defined — and the player
+	// mounts — early on a cold/slow load, instead of being blocked behind verovio's
+	// download). The verovio-dependent paths therefore can't assume window.VerovioInit
+	// exists yet; they await it here. Poll is cheap (100ms) and self-clearing.
+	function waitForGlobal (name, timeoutMs) {
+		if (window[name]) return Promise.resolve(window[name]);
+		return new Promise(function (resolve) {
+			var start = Date.now();
+			var iv = setInterval(function () {
+				if (window[name]) { clearInterval(iv); resolve(window[name]); }
+				else if (timeoutMs && Date.now() - start > timeoutMs) { clearInterval(iv); resolve(null); }
+			}, 100);
+		});
+	}
 	// ---- Verovio init -------------------------------------------------------
 	async function initVerovio () {
 		if (state.verovioReady) return state.toolkit;
 		if (state._verovioInitPromise) return state._verovioInitPromise;
+		// 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);
+			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.
 			try {
+				const tk = await VInit();
 				tk.setOptions({ scale: 40, adjustPageHeight: true, breaks: 'auto', pageWidth: 2100, pageHeight: 2970 });
 				state.toolkit = tk;
 				state.verovioReady = true;
 	async function initAudio () {
 		if (state.audioReady) return true;
+		// music-widgets + the FluidSynth adapter (js-synthesizer.min.js + fluid-audio.js)
+		// load after us in <head>; wait for the music-widgets global to appear.
+		const mw = await waitForGlobal('musicWidgetsBrowser', 300000);
+		if (!mw) { log('musicWidgetsBrowser missing (timeout)'); return false; }
 		// MIDI/MidiPlayer/MusicNotation come from music-widgets; the *audio backend* is
 		// FluidSynth (js-synthesizer + gm.sf3, 128 GM instruments) via LilyFluidAudio,
 		// which falls back to music-widgets' single-piano MidiAudio while the large GM