From 94aa271ab11fc3426a7e143ebaa757eb30c9911d Mon Sep 17 00:00:00 2001
From: aliabid94 <aabid94@gmail.com>
Date: Mon, 22 Jan 2024 11:53:19 -0800
Subject: [PATCH] Improve rapid generation performance via UI throttling
 (#7084)

* changes

* add changeset

---------

Co-authored-by: Ali Abid <aliabid@Alis-MacBook-Pro.local>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/flat-suns-cry.md |  6 ++++++
 js/app/src/Blocks.svelte    | 43 ++++++++++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/flat-suns-cry.md

diff --git a/.changeset/flat-suns-cry.md b/.changeset/flat-suns-cry.md
new file mode 100644
index 0000000000..643e83a5ac
--- /dev/null
+++ b/.changeset/flat-suns-cry.md
@@ -0,0 +1,6 @@
+---
+"@gradio/app": minor
+"gradio": minor
+---
+
+feat:Improve rapid generation performance via UI throttling
diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
index c22f753317..5065a8bc2b 100644
--- a/js/app/src/Blocks.svelte
+++ b/js/app/src/Blocks.svelte
@@ -305,6 +305,43 @@
 		});
 	}
 
+	function throttle<T extends (...args: any[]) => any>(
+		func: T,
+		limit: number
+	): (...funcArgs: Parameters<T>) => void {
+		let lastFunc: ReturnType<typeof setTimeout>;
+		let lastRan: number;
+		let lastThis: any;
+		let lastArgs: IArguments | null;
+
+		return function (this: any, ...args: Parameters<T>) {
+			if (!lastRan) {
+				func.apply(this, args);
+				lastRan = Date.now();
+			} else {
+				clearTimeout(lastFunc);
+				lastThis = this;
+				lastArgs = arguments;
+
+				lastFunc = setTimeout(
+					() => {
+						if (Date.now() - lastRan >= limit) {
+							if (lastArgs) {
+								func.apply(lastThis, Array.prototype.slice.call(lastArgs));
+							}
+							lastRan = Date.now();
+						}
+					},
+					Math.max(limit - (Date.now() - lastRan), 0)
+				);
+			}
+		};
+	}
+
+	const refresh = throttle(() => {
+		rootNode = rootNode;
+	}, 50);
+
 	async function handle_update(
 		data: any,
 		fn_index: number,
@@ -317,7 +354,7 @@
 			output.props.value_is_output = true;
 		});
 
-		rootNode = rootNode;
+		refresh();
 		await tick();
 		data?.forEach((value: any, i: number) => {
 			const output = instance_map[outputs[i]];
@@ -340,7 +377,7 @@
 				output.props.value = value;
 			}
 		});
-		rootNode = rootNode;
+		refresh();
 	}
 
 	let submit_map: Map<number, ReturnType<typeof app.submit>> = new Map();
@@ -355,7 +392,7 @@
 			obj.props = {};
 		}
 		obj.props[prop] = val;
-		rootNode = rootNode;
+		refresh();
 	}
 	let handled_dependencies: number[][] = [];