Merge branch 'main' into load-ci

.changeset/funny-heads-play.md

@@ -0,0 +1,6 @@
+---
+"@gradio/image": patch
+"gradio": patch
+---
+
+fix:Fix webcam

.changeset/long-snakes-notice.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+fix:ImageEditor: Trigger input event even if change event not defined

.changeset/metal-cows-remain.md

@@ -0,0 +1,7 @@
+---
+"@gradio/client": minor
+"@self/app": minor
+"gradio": minor
+---
+
+feat:[ZeroGPU] Handshake-based postMessage

client/js/src/globals.d.ts

@@ -7,5 +7,6 @@ declare global {
 		gradio_api_info: ApiInfo<ApiData> | { api: ApiInfo<ApiData> };
 		__is_colab__: boolean;
 		__gradio_space__: string | null;
+		supports_zerogpu_headers?: boolean;
 	}
 }

client/js/src/types.ts

@@ -254,7 +254,6 @@ export interface Dependency {
 	trigger_mode: "once" | "multiple" | "always_last";
 	final_event: Payload | null;
 	show_api: boolean;
-	zerogpu?: boolean;
 	rendered_in: number | null;
 	connection: "stream" | "sse";
 	time_limit: number;

client/js/src/utils/submit.ts

@@ -566,15 +566,14 @@ export function submit(
 						? `https://moon-${hostname.split(".")[1]}.${hfhubdev}`
 						: `https://huggingface.co`;
 
-					const is_iframe =
+					const is_zerogpu_iframe =
 						typeof window !== "undefined" &&
 						typeof document !== "undefined" &&
-						window.parent != window;
-					const is_zerogpu_space = dependency.zerogpu && config.space_id;
-					const zerogpu_auth_promise =
-						is_iframe && is_zerogpu_space
-							? post_message<Headers>("zerogpu-headers", origin)
-							: Promise.resolve(null);
+						window.parent != window &&
+						window.supports_zerogpu_headers;
+					const zerogpu_auth_promise = is_zerogpu_iframe
+						? post_message<Map<string, string>>("zerogpu-headers", origin)
+						: Promise.resolve(null);
 					const post_data_promise = zerogpu_auth_promise.then((headers) => {
 						return post_data(
 							`${config.root}${api_prefix}/${SSE_DATA_URL}?${url_params}`,

globals.d.ts

@@ -12,6 +12,7 @@ declare global {
 		parentIFrame?: {
 			scrollTo: (x: number, y: number) => void;
 		};
+		supports_zerogpu_headers?: boolean;
 	}
 }
 

gradio/blocks.py

@@ -547,7 +547,6 @@ def __init__(
         self.queue = False if fn is None else queue
         self.scroll_to_output = False if utils.get_space() else scroll_to_output
         self.show_api = show_api
-        self.zero_gpu = hasattr(self.fn, "zerogpu")
         self.types_generator = inspect.isgeneratorfunction(
             self.fn
         ) or inspect.isasyncgenfunction(self.fn)
@@ -608,7 +607,6 @@ def get_config(self):
             "trigger_only_on_success": self.trigger_only_on_success,
             "trigger_mode": self.trigger_mode,
             "show_api": self.show_api,
-            "zerogpu": self.zero_gpu,
             "rendered_in": self.rendered_in._id if self.rendered_in else None,
             "connection": self.connection,
             "time_limit": self.time_limit,

gradio/chat_interface.py

@@ -500,8 +500,6 @@ def _setup_events(self) -> None:
 
         submit_triggers = [self.textbox.submit, self.chatbot.retry]
         submit_fn = self._stream_fn if self.is_generator else self._submit_fn
-        if hasattr(self.fn, "zerogpu"):
-            submit_fn.__func__.zerogpu = self.fn.zerogpu  # type: ignore
 
         synchronize_chat_state_kwargs = {
             "fn": lambda x: x,

js/app/src/routes/[...catchall]/+page.svelte

@@ -215,6 +215,18 @@
 		css_ready = true;
 		window.__is_colab__ = config.is_colab;
 
+		const supports_zerogpu_headers = "supports-zerogpu-headers";
+		window.addEventListener("message", (event) => {
+			if (event.data === supports_zerogpu_headers) {
+				window.supports_zerogpu_headers = true;
+			}
+		});
+		const hostname = window.location.hostname;
+		const origin = hostname.includes(".dev.")
+			? `https://moon-${hostname.split(".")[1]}.dev.spaces.huggingface.tech`
+			: `https://huggingface.co`;
+		window.parent.postMessage(supports_zerogpu_headers, origin);
+
 		dispatch("loaded");
 
 		if (config.dev_mode) {

js/image/shared/Webcam.svelte

@@ -225,15 +225,21 @@
 
 	let webcam_accessed = false;
 
-	function record_video_or_photo(): void {
+	function record_video_or_photo({
+		destroy
+	}: { destroy?: boolean } = {}): void {
 		if (mode === "image" && streaming) {
 			recording = !recording;
 		}
-		if (mode === "image") {
-			take_picture();
-		} else {
-			take_recording();
+
+		if (!destroy) {
+			if (mode === "image") {
+				take_picture();
+			} else {
+				take_recording();
+			}
 		}
+
 		if (!recording && stream) {
 			dispatch("close_stream");
 			stream.getTracks().forEach((track) => track.stop());
@@ -276,7 +282,7 @@
 
 	onDestroy(() => {
 		if (typeof window === "undefined") return;
-		record_video_or_photo();
+		record_video_or_photo({ destroy: true });
 		stream?.getTracks().forEach((track) => track.stop());
 	});
 </script>
@@ -306,7 +312,7 @@
 	{:else}
 		<div class="button-wrap">
 			<button
-				on:click={record_video_or_photo}
+				on:click={() => record_video_or_photo()}
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
 				{#if mode === "video" || streaming}

js/imageeditor/Index.svelte

@@ -214,7 +214,8 @@
 			{brush}
 			{eraser}
 			changeable={attached_events.includes("apply")}
-			realtime={attached_events.includes("change")}
+			realtime={attached_events.includes("change") ||
+				attached_events.includes("input")}
 			i18n={gradio.i18n}
 			{transforms}
 			accept_blobs={server.accept_blobs}