Make the HTTP requests for the Wasm worker wait for the initial run_code() or run_file() to finish

.changeset/crazy-dancers-allow.md

@@ -0,0 +1,5 @@
+---
+"@gradio/wasm": minor
+---
+
+feat:Make the HTTP requests for the Wasm worker wait for the initial `run_code()` or `run_file()` to finish

js/wasm/src/promise-delegate.ts

@@ -0,0 +1,26 @@
+type PromiseImplFn<T> = ConstructorParameters<typeof Promise<T>>[0];
+
+export class PromiseDelegate<T> {
+	private promiseInternal: Promise<T>;
+	private resolveInternal!: Parameters<PromiseImplFn<T>>[0];
+	private rejectInternal!: Parameters<PromiseImplFn<T>>[1];
+
+	constructor() {
+		this.promiseInternal = new Promise((resolve, reject) => {
+			this.resolveInternal = resolve;
+			this.rejectInternal = reject;
+		});
+	}
+
+	get promise(): Promise<T> {
+		return this.promiseInternal;
+	}
+
+	public resolve(value: T): void {
+		this.resolveInternal(value);
+	}
+
+	public reject(reason: unknown): void {
+		this.rejectInternal(reason);
+	}
+}

js/wasm/src/worker-proxy.ts

@@ -9,6 +9,7 @@ import type {
 	ReplyMessage
 } from "./message-types";
 import { MessagePortWebSocket } from "./messageportwebsocket";
+import { PromiseDelegate } from "./promise-delegate";
 
 export interface WorkerProxyOptions {
 	gradioWheelUrl: string;
@@ -20,6 +21,8 @@ export interface WorkerProxyOptions {
 export class WorkerProxy {
 	private worker: globalThis.Worker;
 
+	private firstRunPromiseDelegate = new PromiseDelegate<void>();
+
 	constructor(options: WorkerProxyOptions) {
 		console.debug("WorkerProxy.constructor(): Create a new worker.");
 		// Loading a worker here relies on Vite's support for WebWorkers (https://vitejs.dev/guide/features.html#web-workers),
@@ -49,6 +52,7 @@ export class WorkerProxy {
 				code
 			}
 		});
+		this.firstRunPromiseDelegate.resolve();
 	}
 
 	public async runPythonFile(path: string): Promise<void> {
@@ -58,6 +62,7 @@ export class WorkerProxy {
 				path
 			}
 		});
+		this.firstRunPromiseDelegate.resolve();
 	}
 
 	// A wrapper for this.worker.postMessage(). Unlike that function, which
@@ -84,6 +89,12 @@ export class WorkerProxy {
 	}
 
 	public async httpRequest(request: HttpRequest): Promise<HttpResponse> {
+		// Wait for the first run to be done
+		// to avoid the "Gradio app has not been launched." error
+		// in case running the code takes long time.
+		// Ref: https://github.com/gradio-app/gradio/issues/5957
+		await this.firstRunPromiseDelegate.promise;
+
 		console.debug("WorkerProxy.httpRequest()", request);
 		const result = await this.postMessageAsync({
 			type: "http-request",