Support PAUSED Space status when embedding (#4438)

* Support paused status

* fix

* changelog

* Update client/js/src/client.ts

Co-authored-by: pngwn <hello@pngwn.io>

* formatting

* added paused space

* formatting

* logs

* added test space, fixes

* Update client/js/src/client.ts

Co-authored-by: pngwn <hello@pngwn.io>

* remove logs

* fix

---------

Co-authored-by: pngwn <hello@pngwn.io>

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 ## Bug Fixes:
 
+- Add support for PAUSED state in the JS client by [@abidlabs](https://github.com/abidlabs) in [PR 4438](https://github.com/gradio-app/gradio/pull/4438)
 - Ensure Tabs only occupy the space required by [@pngwn](https://github.com/pngwn) in [PR 4419](https://github.com/gradio-app/gradio/pull/4419)
 - Ensure components have the correct empty sizes to prevent empty containers from collapsing by [@pngwn](https://github.com/pngwn) in [PR 4447](https://github.com/gradio-app/gradio/pull/4447).
 - Frontend code no longer crashes when there is a relative URL in an `<a>` element, by [@akx](https://github.com/akx) in [PR 4449](https://github.com/gradio-app/gradio/pull/4449).

client/js/src/client.ts

@@ -1129,9 +1129,18 @@ async function check_space_status(
 
 			setTimeout(() => {
 				check_space_status(id, type, status_callback);
-			}, 1000);
+			}, 1000); // poll for status
+			break;
+		case "PAUSED":
+			status_callback({
+				status: "paused",
+				load_status: "error",
+				message:
+					"This space has been paused by the author. If you would like to try this demo, consider duplicating the space.",
+				detail: stage,
+				discussions_enabled: await discussions_enabled(space_name)
+			});
 			break;
-		// poll for status
 		case "RUNNING":
 		case "RUNNING_BUILDING":
 			status_callback({

client/js/src/types.ts

@@ -67,8 +67,13 @@ export interface SpaceStatusNormal {
 	message: string;
 }
 export interface SpaceStatusError {
-	status: "space_error";
-	detail: "NO_APP_FILE" | "CONFIG_ERROR" | "BUILD_ERROR" | "RUNTIME_ERROR";
+	status: "space_error" | "paused";
+	detail:
+		| "NO_APP_FILE"
+		| "CONFIG_ERROR"
+		| "BUILD_ERROR"
+		| "RUNTIME_ERROR"
+		| "PAUSED";
 	load_status: "error";
 	message: string;
 	discussions_enabled: boolean;

js/_cdn-test/index.html

@@ -267,6 +267,14 @@
 			initial_height="400px"
 			control_page_title="true"
 		></gradio-app>
+
+		<h2>Paused Space</h2>
+		<gradio-app
+			space="abidlabs/audioldm-text-to-audio-generation"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+
 		<h2>Working</h2>
 		<gradio-app
 			space="gradio/live_with_vars"

js/app/src/Index.svelte

@@ -244,18 +244,20 @@
 		| "NO_APP_FILE"
 		| "CONFIG_ERROR"
 		| "BUILD_ERROR"
-		| "RUNTIME_ERROR";
+		| "RUNTIME_ERROR"
+		| "PAUSED";
 
 	const discussion_message = {
 		readable_error: {
-			NO_APP_FILE: "no app file",
-			CONFIG_ERROR: "a config error",
-			BUILD_ERROR: "a build error",
-			RUNTIME_ERROR: "a runtime error"
+			NO_APP_FILE: "there is no app file",
+			CONFIG_ERROR: "there is a config error",
+			BUILD_ERROR: "there is a build error",
+			RUNTIME_ERROR: "there is a runtime error",
+			PAUSED: "the space is paused"
 		} as const,
 		title(error: error_types) {
 			return encodeURIComponent(
-				`Space isn't working because there is ${
+				`Space isn't working because ${
 					this.readable_error[error] || "an error"
 				}`
 			);
@@ -296,7 +298,7 @@
 		>
 			<div class="error" slot="error">
 				<p><strong>{status?.message || ""}</strong></p>
-				{#if status.status === "space_error" && status.discussions_enabled}
+				{#if (status.status === "space_error" || status.status === "paused") && status.discussions_enabled}
 					<p>
 						Please <a
 							href="https://huggingface.co/spaces/{space}/discussions/new?title={discussion_message.title(