@gradio/core 0.0.4 → 0.1.0-beta.2

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";
 
@@ -12,7 +12,7 @@
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";
-	import type { ShareData } from "@gradio/utils";
+	import type { ShareData, ValueData } from "@gradio/utils";
 	import MountComponents from "./MountComponents.svelte";
 
 	import logo from "./images/logo.svg";
@@ -21,7 +21,7 @@
 	import type {
 		LogMessage,
 		RenderMessage,
-		StatusMessage
+		StatusMessage,
 	} from "@gradio/client";
 
 	setupi18n();
@@ -45,36 +45,50 @@
 	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,
 		get_data,
+		modify_stream,
+		get_stream_state,
+		set_time_limit,
 		loading_status,
 		scheduled_updates,
 		create_layout,
-		rerender_layout
+		rerender_layout,
 	} = create_components();
 
-	$: create_layout({
-		components,
-		layout,
-		dependencies,
-		root,
-		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;
@@ -96,7 +110,7 @@
 			return {
 				id: outputs[i],
 				prop: "value_is_output",
-				value: true
+				value: true,
 			};
 		});
 
@@ -119,7 +133,7 @@
 						updates.push({
 							id: outputs[i],
 							prop: update_key,
-							value: update_value
+							value: update_value,
 						});
 					}
 				}
@@ -127,7 +141,7 @@
 				updates.push({
 					id: outputs[i],
 					prop: "value",
-					value
+					value,
 				});
 			}
 		});
@@ -144,7 +158,7 @@
 		fn_index: number,
 		type: ToastMessage["type"],
 		duration: number | null = 10,
-		visible = true
+		visible = true,
 	): ToastMessage & { fn_index: number } {
 		return {
 			message,
@@ -152,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];
 	}
@@ -166,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 {
@@ -208,13 +216,36 @@
 		}
 	}
 
+	async function get_component_value_or_event_data(
+		component_id: number,
+		trigger_id: number | null,
+		event_data: unknown,
+	): Promise<any> {
+		if (
+			component_id === trigger_id &&
+			event_data &&
+			(event_data as ValueData).is_value_data === true
+		) {
+			// @ts-ignore
+			return event_data.value;
+		}
+		return get_data(component_id);
+	}
+
 	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") {
@@ -223,17 +254,21 @@
 
 		let payload: Payload = {
 			fn_index: dep_index,
-			data: await Promise.all(dep.inputs.map((id) => get_data(id))),
+			data: await Promise.all(
+				dep.inputs.map((id) =>
+					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) {
@@ -249,7 +284,7 @@
 					const submission = submit_map.get(fn_index);
 					submission?.cancel();
 					return submission;
-				})
+				}),
 			);
 		} else {
 			if (dep.backend_fn) {
@@ -259,30 +294,55 @@
 
 		function trigger_prediction(dep: Dependency, payload: Payload): void {
 			if (dep.trigger_mode === "once") {
-				if (!dep.pending_request) make_prediction(payload);
+				if (!dep.pending_request)
+					make_prediction(payload, dep.connection == "stream");
 			} else if (dep.trigger_mode === "multiple") {
-				make_prediction(payload);
+				make_prediction(payload, dep.connection == "stream");
 			} else if (dep.trigger_mode === "always_last") {
 				if (!dep.pending_request) {
-					make_prediction(payload);
+					make_prediction(payload, dep.connection == "stream");
 				} else {
 					dep.final_event = payload;
 				}
 			}
 		}
-
-		async function make_prediction(payload: Payload): Promise<void> {
+		$: console.log({ app });
+		async function make_prediction(
+			payload: Payload,
+			streaming = false,
+		): Promise<void> {
 			if (api_recorder_visible) {
 				api_calls = [...api_calls, JSON.parse(JSON.stringify(payload))];
 			}
 
 			let submission: ReturnType<typeof app.submit>;
+			app.set_current_payload(payload);
+			if (streaming) {
+				if (!submit_map.has(dep_index)) {
+					dep.inputs.forEach((id) => modify_stream(id, "waiting"));
+				} else if (
+					submit_map.has(dep_index) &&
+					dep.inputs.some((id) => get_stream_state(id) === "waiting")
+				) {
+					return;
+				} else if (
+					submit_map.has(dep_index) &&
+					dep.inputs.some((id) => get_stream_state(id) === "open")
+				) {
+					await app.post_data(
+						// @ts-ignore
+						`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
+						{ ...payload, session_hash: app.session_hash },
+					);
+					return;
+				}
+			}
 			try {
 				submission = app.submit(
 					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
@@ -292,7 +352,7 @@
 					fn_index,
 					eta: 0,
 					queue: false,
-					queue_position: null
+					queue_position: null,
 				});
 				set_status($loading_status);
 				return;
@@ -316,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);
@@ -348,7 +408,7 @@
 					layout: render_layout,
 					root: root,
 					dependencies: dependencies,
-					render_id: render_id
+					render_id: render_id,
 				});
 			}
 
@@ -356,18 +416,41 @@
 				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,
+			): void {
+				if (
+					status.original_msg === "process_starts" &&
+					dep.connection === "stream"
+				) {
+					modify_stream(id, "open");
+				}
+			}
+
+			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
 				const { fn_index, ...status } = message;
+				if (status.stage === "streaming" && status.time_limit) {
+					dep.inputs.forEach((id) => {
+						set_time_limit(id, status.time_limit);
+					});
+				}
+				dep.inputs.forEach((id) => {
+					open_stream_events(message, id, dep);
+				});
 				//@ts-ignore
 				loading_status.update({
 					...status,
+					time_limit: status.time_limit,
 					status: status.stage,
 					progress: status.progress_data,
-					fn_index
+					fn_index,
 				});
 				set_status($loading_status);
 				if (
@@ -381,7 +464,7 @@
 					showed_duplicate_message = true;
 					messages = [
 						new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
-						...messages
+						...messages,
 					];
 				}
 				if (
@@ -393,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))
@@ -405,19 +488,23 @@
 								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);
 						}
 					});
-
-					// submission.destroy();
+					dep.inputs.forEach((id) => {
+						modify_stream(id, "closed");
+					});
+					submit_map.delete(dep_index);
 				}
 				if (status.broken && is_mobile_device && user_left_page) {
 					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);
@@ -426,7 +513,7 @@
 					if (status.message) {
 						const _message = status.message.replace(
 							MESSAGE_QUOTE_RE,
-							(_, b) => b
+							(_, b) => b,
 						);
 						messages = [
 							new_message(
@@ -434,9 +521,9 @@
 								fn_index,
 								"error",
 								status.duration,
-								status.visible
+								status.visible,
 							),
-							...messages
+							...messages,
 						];
 					}
 					dependencies.map(async (dep) => {
@@ -451,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);
@@ -478,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();
 		}
@@ -503,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");
@@ -522,6 +616,17 @@
 				messages = [new_message(data, -1, event), ...messages];
 			} else if (event == "clear_status") {
 				update_status(id, "complete", data);
+			} else if (event == "close_stream") {
+				const deps = $targets[id]?.[data];
+				deps?.forEach((dep_id) => {
+					if (submit_map.has(dep_id)) {
+						app.post_data(
+							// @ts-ignore
+							`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}/close`,
+							{},
+						);
+					}
+				});
 			} else {
 				const deps = $targets[id]?.[event];
 
@@ -541,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,
+			},
 		]);
 	}
 
@@ -561,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;
@@ -571,7 +676,7 @@
 			updates.push({
 				id: parseInt(id),
 				prop: "loading_status",
-				value: loading_status
+				value: loading_status,
 			});
 		});
 
@@ -581,9 +686,9 @@
 				return {
 					id,
 					prop: "pending",
-					value: pending_status === "pending"
+					value: pending_status === "pending",
 				};
-			}
+			},
 		);
 
 		update_value([...updates, ...additional_updates]);
@@ -592,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>
@@ -602,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}

package/src/MountComponents.svelte

@@ -18,13 +18,15 @@
 	});
 </script>
 
-<Render
-	node={rootNode}
-	{root}
-	{target}
-	{theme_mode}
-	{version}
-	{autoscroll}
-	{max_file_size}
-	{client}
-/>
+{#if rootNode}
+	<Render
+		node={rootNode}
+		{root}
+		{target}
+		{theme_mode}
+		{version}
+		{autoscroll}
+		{max_file_size}
+		{client}
+	/>
+{/if}

package/src/Render.svelte

@@ -36,20 +36,24 @@
 		};
 	});
 
-	$: node.children =
-		node.children &&
-		node.children.filter((v) => {
-			const valid_node = node.type !== "statustracker";
-			if (!valid_node) {
-				filtered_children.push(v);
-			}
-			return valid_node;
-		});
+	$: {
+		if (node) {
+			node.children =
+				node.children &&
+				node.children.filter((v) => {
+					const valid_node = node.type !== "statustracker";
+					if (!valid_node) {
+						filtered_children.push(v);
+					}
+					return valid_node;
+				});
+		}
+	}
 
 	setContext("BLOCK_KEY", parent);
 
 	$: {
-		if (node.type === "form") {
+		if (node && node.type === "form") {
 			if (node.children?.every((c) => !c.props.visible)) {
 				node.props.visible = false;
 			} else {
@@ -58,7 +62,7 @@
 		}
 	}
 
-	$: gradio_class = new Gradio<Record<string, any>>(
+	$: node.props.gradio = new Gradio<Record<string, any>>(
 		node.id,
 		target,
 		theme_mode,
@@ -73,7 +77,7 @@
 </script>
 
 <RenderComponent
-	_id={node.id}
+	_id={node?.id}
 	component={node.component}
 	bind:instance={node.instance}
 	bind:value={node.props.value}
@@ -84,7 +88,6 @@
 	{...node.props}
 	{theme_mode}
 	{root}
-	gradio={gradio_class}
 >
 	{#if node.children && node.children.length}
 		{#each node.children as _node (_node.id)}