Fix multiple trigger bug when function has js (#9188)

* add code * add changeset * lint --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Sep 10, 2024 · 8f8e1c6 · 8f8e1c6
1 parent ac2c015
commit 8f8e1c6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 33 deletions.
diff --git a/.changeset/blue-rooms-run.md b/.changeset/blue-rooms-run.md
@@ -0,0 +1,7 @@
+---
+"@gradio/audio": patch
+"@gradio/core": patch
+"gradio": patch
+---
+
+fix:Fix multiple trigger bug when function has js
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
@@ -97,7 +97,6 @@
 				Boolean
 			) as FileData[]
 		)[0];
-
 		dispatch(event, value);
 	};
 

diff --git a/js/audio/recorder/AudioRecorder.svelte b/js/audio/recorder/AudioRecorder.svelte
@@ -62,17 +62,17 @@
 		edit: undefined;
 	}>();
 
-	$: record?.on("record-start", () => {
+	function record_start_callback(): void {
 		start_interval();
 		timing = true;
 		dispatch("start_recording");
 		if (waveform_options.show_recording_waveform) {
 			let waveformCanvas = microphoneContainer;
 			if (waveformCanvas) waveformCanvas.style.display = "block";
 		}
-	});
+	}
 
-	$: record?.on("record-end", async (blob) => {
+	async function record_end_callback(blob: Blob): Promise<void> {
 		seconds = 0;
 		timing = false;
 		clearInterval(interval);
@@ -91,12 +91,7 @@
 		} catch (e) {
 			console.error(e);
 		}
-	});
-
-	$: record?.on("record-pause", () => {
-		dispatch("pause_recording");
-		clearInterval(interval);
-	});
+	}
 
 	$: record?.on("record-resume", () => {
 		start_interval();
@@ -140,6 +135,25 @@
 
 		record = micWaveform.registerPlugin(RecordPlugin.create());
 		record.startMic();
+		record?.on("record-end", record_end_callback);
+		record?.on("record-start", record_start_callback);
+		record?.on("record-pause", () => {
+			dispatch("pause_recording");
+			clearInterval(interval);
+		});
+
+		record?.on("record-end", (blob) => {
+			recordedAudio = URL.createObjectURL(blob);
+
+			const microphone = microphoneContainer;
+			const recording = recordingContainer;
+
+			if (microphone) microphone.style.display = "none";
+			if (recording && recordedAudio) {
+				recording.innerHTML = "";
+				create_recording_waveform();
+			}
+		});
 	};
 
 	const create_recording_waveform = (): void => {
@@ -152,19 +166,6 @@
 		});
 	};
 
-	$: record?.on("record-end", (blob) => {
-		recordedAudio = URL.createObjectURL(blob);
-
-		const microphone = microphoneContainer;
-		const recording = recordingContainer;
-
-		if (microphone) microphone.style.display = "none";
-		if (recording && recordedAudio) {
-			recording.innerHTML = "";
-			create_recording_waveform();
-		}
-	});
-
 	const handle_trim_audio = async (
 		start: number,
 		end: number

diff --git a/js/core/src/Blocks.svelte b/js/core/src/Blocks.svelte
@@ -238,7 +238,7 @@
 				.then((v: unknown[]) => {
 					if (dep.backend_fn) {
 						payload.data = v;
-						make_prediction(payload);
+						trigger_prediction(dep, payload);
 					} else {
 						handle_update(v, dep_index);
 					}
@@ -253,16 +253,20 @@
 			);
 		} else {
 			if (dep.backend_fn) {
-				if (dep.trigger_mode === "once") {
-					if (!dep.pending_request) make_prediction(payload);
-				} else if (dep.trigger_mode === "multiple") {
+				trigger_prediction(dep, payload);
+			}
+		}
+
+		function trigger_prediction(dep: Dependency, payload: Payload): void {
+			if (dep.trigger_mode === "once") {
+				if (!dep.pending_request) make_prediction(payload);
+			} else if (dep.trigger_mode === "multiple") {
+				make_prediction(payload);
+			} else if (dep.trigger_mode === "always_last") {
+				if (!dep.pending_request) {
 					make_prediction(payload);
-				} else if (dep.trigger_mode === "always_last") {
-					if (!dep.pending_request) {
-						make_prediction(payload);
-					} else {
-						dep.final_event = payload;
-					}
+				} else {
+					dep.final_event = payload;
 				}
 			}
 		}