refined control styles

app.py

@@ -203,17 +203,19 @@ def _log_panel (raw=''):
 	return sys_log
 
 
-def run_generation (prompt, measures, temperature, max_patches, seed, store, top_k=0, top_p=0.9,
-	progress=gr.Progress()):
-	'''Streaming generate callback. Yields updates for (log, editor, file_list, store, seed).
+def run_generation (prompt, measures, temperature, max_patches, seed, store, top_k=0, top_p=0.9):
+	'''Streaming generate callback. Yields updates for (log, editor, file_list, store, seed, gen_btn).
 
 	store: {label: lyl_text} dict held in gr.State; the produced document is added
 	to it under a timestamped label once generation finishes.
 
 	top_k / top_p have fixed defaults (no UI controls); pass them explicitly to override.
 
-	A gr.Progress bar tracks generation: by completed measures when a measure count
-	is requested, else by generated patches out of max_patches.
+	Progress is shown on the Generate button itself: its label becomes
+	"Generating… M/N" (by completed measures when a measure count is requested, else
+	by patches out of max_patches) during the run, and reverts to "Generate" at the
+	end. (Gradio's native progress bar can't render on a Button, so we drive the
+	label directly.)
 
 	The output file is named with the seed used for THIS generation; on completion
 	the seed slider is randomized (final yield) so the next click uses a fresh seed.
@@ -227,7 +229,6 @@ def run_generation (prompt, measures, temperature, max_patches, seed, store, top
 	n_yields = 0
 	mp = int(max_patches)
 	t0 = time.perf_counter()
-	progress(0.0, desc='Starting…')
 	try:
 		gen = get_generator()
 		# drop a marker in the log timeline; _log_panel expands it to the live output,
@@ -238,25 +239,22 @@ def run_generation (prompt, measures, temperature, max_patches, seed, store, top
 			top_k=int(top_k), top_p=float(top_p), measures=meas, seed=int(seed)):
 			if not done:
 				n_yields += 1
-			# progress: by measures (count completed `|` separators vs target) when a
-			# measure count was requested, else by patch budget. clamp to [0,1).
+			# progress on the Generate button label: by measures (completed `|`
+			# separators vs target) when a measure count was requested, else by patches.
 			if meas:
-				frac = raw.count('|') / meas
-				desc = 'measure %d/%d' % (min(raw.count('|'), meas), meas)
+				btn_label = 'Generating… %d/%d' % (min(raw.count('|'), meas), meas)
 			else:
-				frac = max(0, n_yields - 1) / mp
-				desc = 'patch %d/%d' % (max(0, n_yields - 1), mp)
-			progress(min(frac, 0.99) if not done else 1.0, desc=desc)
+				btn_label = 'Generating… %d/%d' % (max(0, n_yields - 1), mp)
 			# The log streams every patch (raw text). The editor, however, must stay
 			# syntactically valid: only sync it at a measure boundary — i.e. when the
 			# accumulated text ends with the measure separator `|` (so it never shows a
 			# half-generated, incomplete measure). `done` forces a final sync.
 			at_boundary = raw.rstrip().endswith('|')
 			editor_update = pretty if (at_boundary or done) else gr.update()
-			yield _log_panel(raw), editor_update, gr.update(), store, gr.update()
+			yield _log_panel(raw), editor_update, gr.update(), store, gr.update(), gr.update(value=btn_label)
 	except Exception as e:
 		LOG.exception('generation failed: %s', e)
-		yield _log_panel(raw), pretty, gr.update(), store, gr.update()
+		yield _log_panel(raw), pretty, gr.update(), store, gr.update(), gr.update(value='Generate')
 		return
 
 	# timing: the stream yields once for prefill + once per generated patch, so the
@@ -278,7 +276,7 @@ def run_generation (prompt, measures, temperature, max_patches, seed, store, top
 	# randomize the seed slider for the next run (the file above already used the
 	# seed this generation ran with, so naming is unaffected)
 	next_seed = random.randint(0, 2147483647)
-	yield _log_panel(raw), pretty, gr.update(choices=list(store.keys()), value=label), store, gr.update(value=next_seed)
+	yield _log_panel(raw), pretty, gr.update(choices=list(store.keys()), value=label), store, gr.update(value=next_seed), gr.update(value='Generate')
 
 
 def load_file (label, store):
@@ -361,11 +359,25 @@ function (text) {
 # must return its args unchanged — returning nothing makes Gradio send null for
 # every input (which breaks e.g. the temperature Slider's preprocessor).
 _JS_GEN_START = '''
-function (...args) { if (window.LilyScore) window.LilyScore.setGenerating(true); return args; }
+function (...args) {
+	if (window.LilyScore) window.LilyScore.setGenerating(true);
+	// turn Generate yellow + Stop red while running
+	['gen-btn', 'stop-btn'].forEach(function (idv) {
+		const b = document.getElementById(idv);
+		if (b) b.classList.add('ls-generating');
+	});
+	return args;
+}
 '''
 
 _JS_GEN_END = '''
-function () { if (window.LilyScore) window.LilyScore.setGenerating(false); }
+function () {
+	if (window.LilyScore) window.LilyScore.setGenerating(false);
+	['gen-btn', 'stop-btn'].forEach(function (idv) {
+		const b = document.getElementById(idv);
+		if (b) b.classList.remove('ls-generating');
+	});
+}
 '''
 
 
@@ -390,6 +402,25 @@ CUSTOM_CSS = '''
 	max-height: 324px;
 	overflow-y: auto;
 }
+/* Generate button turns yellow while a generation is running (the .ls-generating
+   class is toggled by the generation-gate js). !important beats the primary variant. */
+#gen-btn.ls-generating {
+	background: #f5c518 !important;
+	background-image: none !important;
+	border-color: #d4a800 !important;
+	color: #3a2f00 !important;
+}
+/* Stop button: grey by default (theme look), solid red only while generating
+   (the .ls-generating class is toggled by the generation-gate js). */
+#stop-btn.ls-generating {
+	background: #e23b3b !important;
+	background-image: none !important;
+	border-color: #c42b2b !important;
+	color: #fff !important;
+}
+#stop-btn.ls-generating:hover {
+	background: #cf2e2e !important;
+}
 '''
 
 
@@ -423,8 +454,8 @@ def build_ui ():
 						max_patches = gr.Number(label='max patches', value=1024, precision=0)
 						seed = gr.Slider(0, 2147483647, value=42, step=1, label='seed')
 					with gr.Row():
-						gen_btn = gr.Button('Generate', variant='primary')
-						stop_btn = gr.Button('Stop', variant='stop')
+						gen_btn = gr.Button('Generate', variant='primary', elem_id='gen-btn')
+						stop_btn = gr.Button('Stop', variant='stop', elem_id='stop-btn')
 
 				with gr.Accordion('Logs', open=True):
 					log = gr.Textbox(show_label=False, lines=10, max_lines=10,
@@ -465,12 +496,12 @@ def build_ui ():
 		gen_event = gen_btn.click(
 			run_generation,
 			inputs=[prompt, measures, temperature, max_patches, seed, store],
-			outputs=[log, editor, file_list, store, seed],
+			outputs=[log, editor, file_list, store, seed, gen_btn],
 			js=_JS_GEN_START,
-			# "minimal" = a small runtime/progress indicator only (top-right), NOT a
-			# spinner covering the output area. "full" overlays the Logs/editor
-			# outputs and, since we yield every patch, flickers badly.
-			show_progress='minimal',
+			# progress is shown on the Generate button's own label ("Generating… M/N"),
+			# driven by run_generation. Hide Gradio's native progress overlay (it can't
+			# render on a Button and otherwise covers the Logs/editor outputs).
+			show_progress='hidden',
 		)
 		gen_event.then(None, None, None, js=_JS_GEN_END)
 
@@ -479,8 +510,12 @@ def build_ui ():
 		# virtualises long docs in the DOM, so scraping it client-side truncates).
 		editor.change(None, inputs=[editor], outputs=None, js=_JS_RENDER)
 
-		# Stop: cancel generation, then lift the gate so the player returns
-		stop_btn.click(None, None, None, cancels=[gen_event]).then(None, None, None, js=_JS_GEN_END)
+		# Stop: cancel generation, reset the Generate button label (the cancelled
+		# run never reaches its final yield, so it'd otherwise stay "Generating…"),
+		# then lift the gate (js) so the player returns + button colors revert.
+		stop_btn.click(
+			lambda: gr.update(value='Generate'), None, outputs=[gen_btn], cancels=[gen_event],
+		).then(None, None, None, js=_JS_GEN_END)
 		file_list.select(load_file, inputs=[file_list, store], outputs=[editor])
 
 	return demo

web/score-player.css

@@ -27,7 +27,7 @@
 .ls-status.ls-err { color: #c0392b; }
 
 .ls-svg {
-	background: #fff;
+	background: #fffdf2;   /* faint warm/yellow tint behind the score */
 	display: inline-block;
 	min-width: 100%;
 }