@gradio/core 0.1.0-beta.1 → 0.1.0-beta.2

package/package.json

@@ -1,64 +1,64 @@
 {
   "name": "@gradio/core",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.3.23-beta.1",
-    "@gradio/annotatedimage": "^0.7.2-beta.1",
-    "@gradio/audio": "^0.14.0-beta.1",
-    "@gradio/atoms": "^0.8.1-beta.1",
-    "@gradio/button": "^0.3.0-beta.1",
-    "@gradio/box": "^0.1.25-beta.1",
-    "@gradio/chatbot": "^0.14.0-beta.1",
-    "@gradio/checkbox": "^0.4.0-beta.1",
-    "@gradio/checkboxgroup": "^0.6.0-beta.1",
-    "@gradio/client": "^1.6.0-beta.1",
-    "@gradio/colorpicker": "^0.3.13-beta.1",
-    "@gradio/code": "^0.9.1-beta.1",
+    "@gradio/accordion": "^0.3.23-beta.2",
+    "@gradio/atoms": "^0.9.0-beta.2",
+    "@gradio/annotatedimage": "^0.8.0-beta.2",
+    "@gradio/audio": "^0.14.0-beta.2",
+    "@gradio/box": "^0.2.0-beta.0",
+    "@gradio/button": "^0.3.0-beta.2",
+    "@gradio/checkbox": "^0.4.0-beta.2",
+    "@gradio/chatbot": "^0.14.0-beta.2",
+    "@gradio/checkboxgroup": "^0.6.0-beta.2",
+    "@gradio/client": "^1.6.0-beta.2",
+    "@gradio/code": "^0.10.0-beta.2",
+    "@gradio/dataframe": "^0.11.0-beta.2",
+    "@gradio/colorpicker": "^0.3.13-beta.2",
     "@gradio/column": "^0.2.0-beta.0",
-    "@gradio/dataframe": "^0.10.1-beta.1",
-    "@gradio/dataset": "^0.2.5-beta.1",
-    "@gradio/downloadbutton": "^0.1.28-beta.1",
-    "@gradio/datetime": "^0.1.4-beta.1",
-    "@gradio/dropdown": "^0.7.13-beta.1",
-    "@gradio/fallback": "^0.3.13-beta.1",
-    "@gradio/file": "^0.9.4-beta.1",
-    "@gradio/fileexplorer": "^0.4.19-beta.1",
-    "@gradio/form": "^0.1.25-beta.1",
-    "@gradio/gallery": "^0.13.0-beta.1",
-    "@gradio/highlightedtext": "^0.7.7-beta.1",
+    "@gradio/dataset": "^0.2.5-beta.2",
+    "@gradio/downloadbutton": "^0.1.28-beta.2",
+    "@gradio/dropdown": "^0.7.13-beta.2",
+    "@gradio/fallback": "^0.3.13-beta.2",
+    "@gradio/datetime": "^0.1.4-beta.2",
+    "@gradio/fileexplorer": "^0.5.0-beta.2",
+    "@gradio/file": "^0.10.0-beta.2",
+    "@gradio/form": "^0.1.25-beta.2",
+    "@gradio/gallery": "^0.13.0-beta.2",
     "@gradio/group": "^0.2.0-beta.1",
-    "@gradio/html": "^0.3.6-beta.1",
-    "@gradio/icons": "^0.8.0-beta.1",
-    "@gradio/imageeditor": "^0.11.0-beta.1",
-    "@gradio/image": "^0.16.0-beta.1",
-    "@gradio/json": "^0.4.1-beta.1",
-    "@gradio/label": "^0.3.13-beta.1",
-    "@gradio/markdown": "^0.9.4-beta.1",
-    "@gradio/multimodaltextbox": "^0.6.0-beta.1",
-    "@gradio/model3d": "^0.12.2-beta.1",
-    "@gradio/number": "^0.4.13-beta.1",
-    "@gradio/nativeplot": "^0.3.2-beta.1",
-    "@gradio/paramviewer": "^0.4.22-beta.1",
-    "@gradio/plot": "^0.6.5-beta.1",
-    "@gradio/radio": "^0.6.0-beta.1",
-    "@gradio/row": "^0.1.5-beta.0",
-    "@gradio/simpledropdown": "^0.2.13-beta.1",
-    "@gradio/simpleimage": "^0.7.1-beta.1",
-    "@gradio/slider": "^0.5.0-beta.1",
-    "@gradio/simpletextbox": "^0.2.13-beta.1",
-    "@gradio/state": "^0.1.2-beta.0",
-    "@gradio/statustracker": "^0.8.0-beta.1",
-    "@gradio/tabitem": "^0.3.0-beta.1",
-    "@gradio/tabs": "^0.3.0-beta.1",
-    "@gradio/textbox": "^0.7.0-beta.1",
+    "@gradio/highlightedtext": "^0.7.7-beta.2",
+    "@gradio/html": "^0.4.0-beta.2",
+    "@gradio/icons": "^0.8.0-beta.2",
+    "@gradio/image": "^0.16.0-beta.2",
+    "@gradio/json": "^0.5.0-beta.2",
+    "@gradio/imageeditor": "^0.11.0-beta.2",
+    "@gradio/model3d": "^0.13.0-beta.2",
+    "@gradio/label": "^0.3.13-beta.2",
+    "@gradio/multimodaltextbox": "^0.6.0-beta.2",
+    "@gradio/markdown": "^0.10.0-beta.2",
+    "@gradio/nativeplot": "^0.4.0-beta.2",
+    "@gradio/paramviewer": "^0.4.22-beta.2",
+    "@gradio/plot": "^0.6.5-beta.2",
+    "@gradio/number": "^0.4.13-beta.2",
+    "@gradio/row": "^0.2.0-beta.1",
+    "@gradio/radio": "^0.6.0-beta.2",
+    "@gradio/simpledropdown": "^0.2.13-beta.2",
+    "@gradio/simpleimage": "^0.8.0-beta.2",
+    "@gradio/simpletextbox": "^0.2.13-beta.2",
+    "@gradio/slider": "^0.5.0-beta.2",
+    "@gradio/statustracker": "^0.8.0-beta.2",
+    "@gradio/tabitem": "^0.3.0-beta.2",
+    "@gradio/state": "^0.1.2",
+    "@gradio/tabs": "^0.3.0-beta.2",
+    "@gradio/textbox": "^0.7.0-beta.2",
+    "@gradio/timer": "^0.3.3-beta.2",
     "@gradio/theme": "^0.3.0-beta.1",
-    "@gradio/timer": "^0.3.3-beta.1",
-    "@gradio/upload": "^0.12.4-beta.1",
-    "@gradio/uploadbutton": "^0.6.19-beta.1",
-    "@gradio/utils": "^0.7.0-beta.1",
-    "@gradio/video": "^0.11.0-beta.1",
-    "@gradio/wasm": "^0.13.1-beta.1"
+    "@gradio/upload": "^0.13.0-beta.2",
+    "@gradio/uploadbutton": "^0.7.0-beta.2",
+    "@gradio/utils": "^0.7.0-beta.2",
+    "@gradio/video": "^0.11.0-beta.2",
+    "@gradio/wasm": "^0.14.0-beta.2"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from "svelte";
+	import { tick, onMount } from "svelte";
 	import { _ } from "svelte-i18n";
 	import { Client } from "@gradio/client";
 
@@ -21,7 +21,7 @@
 	import type {
 		LogMessage,
 		RenderMessage,
-		StatusMessage
+		StatusMessage,
 	} from "@gradio/client";
 
 	setupi18n();
@@ -45,8 +45,11 @@
 	export let fill_height = false;
 	export let ready: boolean;
 	export let username: string | null;
+	export let api_prefix: string;
+	export let max_file_size: number;
+	export let initial_layout: LayoutNode | undefined = undefined;
 
-	const {
+	let {
 		layout: _layout,
 		targets,
 		update_value,
@@ -57,27 +60,35 @@
 		loading_status,
 		scheduled_updates,
 		create_layout,
-		rerender_layout
+		rerender_layout,
 	} = create_components();
 
-	$: create_layout({
-		components,
-		layout,
-		dependencies,
-		root: root + app.api_prefix,
-		app,
-		options: {
-			fill_height
-		}
-	});
+	// @ts-ignore
+	$_layout = initial_layout;
+
+	$: components, layout, dependencies, root, app, fill_height, target, run();
 
 	$: {
 		ready = !!$_layout;
 	}
 
-	let params = new URLSearchParams(window.location.search);
-	let api_docs_visible = params.get("view") === "api" && show_api;
-	let api_recorder_visible = params.get("view") === "api-recorder" && show_api;
+	async function run(): Promise<void> {
+		await create_layout({
+			components,
+			layout,
+			dependencies,
+			root: root + api_prefix,
+			app,
+			options: {
+				fill_height,
+			},
+		});
+	}
+
+	export let search_params: URLSearchParams;
+	let api_docs_visible = search_params.get("view") === "api" && show_api;
+	let api_recorder_visible =
+		search_params.get("view") === "api-recorder" && show_api;
 	function set_api_docs_visible(visible: boolean): void {
 		api_recorder_visible = false;
 		api_docs_visible = visible;
@@ -99,7 +110,7 @@
 			return {
 				id: outputs[i],
 				prop: "value_is_output",
-				value: true
+				value: true,
 			};
 		});
 
@@ -122,7 +133,7 @@
 						updates.push({
 							id: outputs[i],
 							prop: update_key,
-							value: update_value
+							value: update_value,
 						});
 					}
 				}
@@ -130,7 +141,7 @@
 				updates.push({
 					id: outputs[i],
 					prop: "value",
-					value
+					value,
 				});
 			}
 		});
@@ -147,7 +158,7 @@
 		fn_index: number,
 		type: ToastMessage["type"],
 		duration: number | null = 10,
-		visible = true
+		visible = true,
 	): ToastMessage & { fn_index: number } {
 		return {
 			message,
@@ -155,13 +166,13 @@
 			type,
 			id: ++_error_id,
 			duration,
-			visible
+			visible,
 		};
 	}
 
 	export function add_new_message(
 		message: string,
-		type: ToastMessage["type"]
+		type: ToastMessage["type"],
 	): void {
 		messages = [new_message(message, -1, type), ...messages];
 	}
@@ -169,31 +180,25 @@
 	let _error_id = -1;
 
 	let user_left_page = false;
-	document.addEventListener("visibilitychange", function () {
-		if (document.visibilityState === "hidden") {
-			user_left_page = true;
-		}
-	});
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
 	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
 	const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+	const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
-	const is_mobile_device =
-		/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-			navigator.userAgent
-		);
+	let is_mobile_device = false;
 	let showed_duplicate_message = false;
 	let showed_mobile_warning = false;
+	let inputs_waiting: number[] = [];
 
 	// as state updates are not synchronous, we need to ensure updates are flushed before triggering any requests
 	function wait_then_trigger_api_call(
 		dep_index: number,
 		trigger_id: number | null = null,
-		event_data: unknown = null
+		event_data: unknown = null,
 	): void {
 		let _unsub = (): void => {};
 		function unsub(): void {
@@ -214,7 +219,7 @@
 	async function get_component_value_or_event_data(
 		component_id: number,
 		trigger_id: number | null,
-		event_data: unknown
+		event_data: unknown,
 	): Promise<any> {
 		if (
 			component_id === trigger_id &&
@@ -230,10 +235,17 @@
 	async function trigger_api_call(
 		dep_index: number,
 		trigger_id: number | null = null,
-		event_data: unknown = null
+		event_data: unknown = null,
 	): Promise<void> {
 		let dep = dependencies.find((dep) => dep.id === dep_index)!;
-
+		if (inputs_waiting.length > 0) {
+			for (const input of inputs_waiting) {
+				if (dep.inputs.includes(input)) {
+					add_new_message(WAITING_FOR_INPUTS_MESSAGE, "warning");
+					return;
+				}
+			}
+		}
 		const current_status = loading_status.get_status_for_fn(dep_index);
 		messages = messages.filter(({ fn_index }) => fn_index !== dep_index);
 		if (current_status === "pending" || current_status === "generating") {
@@ -244,24 +256,24 @@
 			fn_index: dep_index,
 			data: await Promise.all(
 				dep.inputs.map((id) =>
-					get_component_value_or_event_data(id, trigger_id, event_data)
-				)
+					get_component_value_or_event_data(id, trigger_id, event_data),
+				),
 			),
 			event_data: dep.collects_event_data ? event_data : null,
-			trigger_id: trigger_id
+			trigger_id: trigger_id,
 		};
 
 		if (dep.frontend_fn) {
 			dep
 				.frontend_fn(
 					payload.data.concat(
-						await Promise.all(dep.outputs.map((id) => get_data(id)))
-					)
+						await Promise.all(dep.outputs.map((id) => get_data(id))),
+					),
 				)
 				.then((v: unknown[]) => {
 					if (dep.backend_fn) {
 						payload.data = v;
-						make_prediction(payload);
+						trigger_prediction(dep, payload);
 					} else {
 						handle_update(v, dep_index);
 					}
@@ -272,28 +284,32 @@
 					const submission = submit_map.get(fn_index);
 					submission?.cancel();
 					return submission;
-				})
+				}),
 			);
 		} else {
 			if (dep.backend_fn) {
-				if (dep.trigger_mode === "once") {
-					if (!dep.pending_request)
-						make_prediction(payload, dep.connection == "stream");
-				} 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, dep.connection == "stream");
-				} else if (dep.trigger_mode === "always_last") {
-					if (!dep.pending_request) {
-						make_prediction(payload, dep.connection == "stream");
-					} else {
-						dep.final_event = payload;
-					}
+			} else if (dep.trigger_mode === "multiple") {
+				make_prediction(payload, dep.connection == "stream");
+			} else if (dep.trigger_mode === "always_last") {
+				if (!dep.pending_request) {
+					make_prediction(payload, dep.connection == "stream");
+				} else {
+					dep.final_event = payload;
 				}
 			}
 		}
-
+		$: console.log({ app });
 		async function make_prediction(
 			payload: Payload,
-			streaming = false
+			streaming = false,
 		): Promise<void> {
 			if (api_recorder_visible) {
 				api_calls = [...api_calls, JSON.parse(JSON.stringify(payload))];
@@ -315,8 +331,8 @@
 				) {
 					await app.post_data(
 						// @ts-ignore
-						`${app.config.root}/stream/${submit_map.get(dep_index).event_id()}`,
-						{ ...payload, session_hash: app.session_hash }
+						`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
+						{ ...payload, session_hash: app.session_hash },
 					);
 					return;
 				}
@@ -326,7 +342,7 @@
 					payload.fn_index,
 					payload.data as unknown[],
 					payload.event_data,
-					payload.trigger_id
+					payload.trigger_id,
 				);
 			} catch (e) {
 				const fn_index = 0; // Mock value for fn_index
@@ -336,7 +352,7 @@
 					fn_index,
 					eta: 0,
 					queue: false,
-					queue_position: null
+					queue_position: null,
 				});
 				set_status($loading_status);
 				return;
@@ -360,7 +376,7 @@
 				const { data, fn_index } = message;
 				if (dep.pending_request && dep.final_event) {
 					dep.pending_request = false;
-					make_prediction(dep.final_event);
+					make_prediction(dep.final_event, dep.connection == "stream");
 				}
 				dep.pending_request = false;
 				handle_update(data, fn_index);
@@ -392,7 +408,7 @@
 					layout: render_layout,
 					root: root,
 					dependencies: dependencies,
-					render_id: render_id
+					render_id: render_id,
 				});
 			}
 
@@ -400,14 +416,14 @@
 				const { log, fn_index, level, duration, visible } = msg;
 				messages = [
 					new_message(log, fn_index, level, duration, visible),
-					...messages
+					...messages,
 				];
 			}
 
 			function open_stream_events(
 				status: StatusMessage,
 				id: number,
-				dep: Dependency
+				dep: Dependency,
 			): void {
 				if (
 					status.original_msg === "process_starts" &&
@@ -417,6 +433,7 @@
 				}
 			}
 
+			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
 				const { fn_index, ...status } = message;
 				if (status.stage === "streaming" && status.time_limit) {
@@ -433,7 +450,7 @@
 					time_limit: status.time_limit,
 					status: status.stage,
 					progress: status.progress_data,
-					fn_index
+					fn_index,
 				});
 				set_status($loading_status);
 				if (
@@ -447,7 +464,7 @@
 					showed_duplicate_message = true;
 					messages = [
 						new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
-						...messages
+						...messages,
 					];
 				}
 				if (
@@ -459,11 +476,11 @@
 					showed_mobile_warning = true;
 					messages = [
 						new_message(MOBILE_QUEUE_WARNING, fn_index, "warning"),
-						...messages
+						...messages,
 					];
 				}
 
-				if (status.stage === "complete") {
+				if (status.stage === "complete" || status.stage === "generating") {
 					status.changed_state_ids?.forEach((id) => {
 						dependencies
 							.filter((dep) => dep.targets.some(([_id, _]) => _id === id))
@@ -471,6 +488,8 @@
 								wait_then_trigger_api_call(dep.id, payload.trigger_id);
 							});
 					});
+				}
+				if (status.stage === "complete") {
 					dependencies.forEach(async (dep) => {
 						if (dep.trigger_after === fn_index) {
 							wait_then_trigger_api_call(dep.id, payload.trigger_id);
@@ -485,7 +504,7 @@
 					window.setTimeout(() => {
 						messages = [
 							new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-							...messages
+							...messages,
 						];
 					}, 0);
 					wait_then_trigger_api_call(dep.id, payload.trigger_id, event_data);
@@ -494,7 +513,7 @@
 					if (status.message) {
 						const _message = status.message.replace(
 							MESSAGE_QUOTE_RE,
-							(_, b) => b
+							(_, b) => b,
 						);
 						messages = [
 							new_message(
@@ -502,9 +521,9 @@
 								fn_index,
 								"error",
 								status.duration,
-								status.visible
+								status.visible,
 							),
-							...messages
+							...messages,
 						];
 					}
 					dependencies.map(async (dep) => {
@@ -519,13 +538,14 @@
 			}
 		}
 	}
+	/* eslint-enable complexity */
 
 	function trigger_share(title: string | undefined, description: string): void {
 		if (space_id === null) {
 			return;
 		}
 		const discussion_url = new URL(
-			`https://huggingface.co/spaces/${space_id}/discussions/new`
+			`https://huggingface.co/spaces/${space_id}/discussions/new`,
 		);
 		if (title !== undefined && title.length > 0) {
 			discussion_url.searchParams.set("title", title);
@@ -546,7 +566,7 @@
 		if (js) {
 			let blocks_frontend_fn = new AsyncFunction(
 				`let result = await (${js})();
-					return (!Array.isArray(result)) ? [result] : result;`
+					return (!Array.isArray(result)) ? [result] : result;`,
 			);
 			await blocks_frontend_fn();
 		}
@@ -571,12 +591,18 @@
 			}
 		});
 
-		if (render_complete) return;
+		if (!target || render_complete) return;
 
 		target.addEventListener("prop_change", (e: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
 			const { id, prop, value } = e.detail;
 			update_value([{ id, prop, value }]);
+			if (prop === "input_ready" && value === false) {
+				inputs_waiting.push(id);
+			}
+			if (prop === "input_ready" && value === true) {
+				inputs_waiting = inputs_waiting.filter((item) => item !== id);
+			}
 		});
 		target.addEventListener("gradio", (e: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
@@ -596,8 +622,8 @@
 					if (submit_map.has(dep_id)) {
 						app.post_data(
 							// @ts-ignore
-							`${app.config.root}/stream/${submit_map.get(dep_id).event_id()}/close`,
-							{}
+							`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}/close`,
+							{},
 						);
 					}
 				});
@@ -620,15 +646,15 @@
 	function update_status(
 		id: number,
 		status: "error" | "complete" | "pending",
-		data: LoadingStatus
+		data: LoadingStatus,
 	): void {
 		data.status = status;
 		update_value([
 			{
 				id,
 				prop: "loading_status",
-				value: data
-			}
+				value: data,
+			},
 		]);
 	}
 
@@ -640,7 +666,7 @@
 		}[] = [];
 		Object.entries(statuses).forEach(([id, loading_status]) => {
 			let dependency = dependencies.find(
-				(dep) => dep.id == loading_status.fn_index
+				(dep) => dep.id == loading_status.fn_index,
 			);
 			if (dependency === undefined) {
 				return;
@@ -650,7 +676,7 @@
 			updates.push({
 				id: parseInt(id),
 				prop: "loading_status",
-				value: loading_status
+				value: loading_status,
 			});
 		});
 
@@ -660,9 +686,9 @@
 				return {
 					id,
 					prop: "pending",
-					value: pending_status === "pending"
+					value: pending_status === "pending",
 				};
-			}
+			},
 		);
 
 		update_value([...updates, ...additional_updates]);
@@ -671,6 +697,19 @@
 	function isCustomEvent(event: Event): event is CustomEvent {
 		return "detail" in event;
 	}
+
+	onMount(() => {
+		document.addEventListener("visibilitychange", function () {
+			if (document.visibilityState === "hidden") {
+				user_left_page = true;
+			}
+		});
+
+		is_mobile_device =
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+				navigator.userAgent,
+			);
+	});
 </script>
 
 <svelte:head>
@@ -681,19 +720,19 @@
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
 	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
-		{#if $_layout && app.config}
-			<MountComponents
-				rootNode={$_layout}
-				{root}
-				{target}
-				{theme_mode}
-				on:mount={handle_mount}
-				{version}
-				{autoscroll}
-				max_file_size={app.config.max_file_size}
-				client={app}
-			/>
-		{/if}
+		<!-- {#if $_layout} -->
+		<MountComponents
+			rootNode={$_layout}
+			{root}
+			{target}
+			{theme_mode}
+			on:mount={handle_mount}
+			{version}
+			{autoscroll}
+			{max_file_size}
+			client={app}
+		/>
+		<!-- {/if} -->
 	</div>
 
 	{#if show_footer}