@gradio/core 0.0.4 → 0.1.0-beta.2

package/src/RenderComponent.svelte

@@ -13,7 +13,7 @@
 	export let theme_mode: ThemeMode;
 	export let instance: ComponentMeta["instance"];
 	export let value: any;
-	export let gradio: Gradio;
+	// export let gradio: Gradio;
 	export let elem_id: string;
 	export let elem_classes: string[];
 	export let _id: number;
@@ -32,6 +32,7 @@
 
 				function report(props: string) {
 					return function (propargs: any) {
+						if (!target) return;
 						const ev = s(_id, props, propargs);
 						target.dispatchEvent(ev);
 					};
@@ -61,7 +62,6 @@
 	{...$$restProps}
 	{theme_mode}
 	{root}
-	{gradio}
 >
 	<slot />
 </svelte:component>

package/src/api_docs/ApiDocs.svelte

@@ -59,7 +59,9 @@
 		named_endpoints: any;
 		unnamed_endpoints: any;
 	}> {
-		let response = await fetch(root + "info");
+		let response = await fetch(
+			root.replace(/\/$/, "") + app.api_prefix + "/info"
+		);
 		let data = await response.json();
 		return data;
 	}
@@ -235,6 +237,7 @@
 								{root}
 								{space_id}
 								{username}
+								api_prefix={app.api_prefix}
 							/>
 
 							<ParametersSnippet

package/src/api_docs/CodeSnippet.svelte

@@ -17,6 +17,7 @@
 	export let dependency: Dependency;
 	export let dependency_index: number;
 	export let root: string;
+	export let api_prefix: string;
 	export let space_id: string | null;
 	export let endpoint_parameters: any;
 	export let named: boolean;
@@ -35,6 +36,9 @@
 	let blob_examples: any[] = endpoint_parameters.filter(
 		(param: EndpointParameter) => blob_components.includes(param.component)
 	);
+
+	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
+	$: normalised_root = root.replace(/\/$/, "");
 </script>
 
 <div class="container">
@@ -135,7 +139,7 @@ console.log(result.data);
 				</div>
 
 				<div bind:this={bash_post_code}>
-					<pre>curl -X POST {root}call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
+					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
   "data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
 							<!-- 
 -->{represent_value(
@@ -147,7 +151,7 @@ console.log(result.data);
 						{/each}
 ]{"}"}' \
   | awk -F'"' '{"{"} print $4{"}"}'  \
-  | read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID</pre>
+  | read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
 				</div>
 			</code>
 		</Block>

package/src/css.ts

@@ -1,6 +1,7 @@
 let supports_adopted_stylesheets = false;
 
 if (
+	typeof window !== "undefined" &&
 	"attachShadow" in Element.prototype &&
 	"adoptedStyleSheets" in Document.prototype
 ) {

package/src/init.ts

@@ -18,6 +18,10 @@ export interface UpdateTransaction {
 }
 
 let pending_updates: UpdateTransaction[][] = [];
+const is_browser = typeof window !== "undefined";
+const raf = is_browser
+	? requestAnimationFrame
+	: async (fn: () => Promise<void> | void) => await fn();
 
 /**
  * Create a store with the layout and a map of targets
@@ -28,6 +32,9 @@ export function create_components(): {
 	targets: Writable<TargetMap>;
 	update_value: (updates: UpdateTransaction[]) => void;
 	get_data: (id: number) => any | Promise<any>;
+	modify_stream: (id: number, state: "open" | "waiting" | "closed") => void;
+	get_stream_state: (id: number) => "open" | "waiting" | "closed" | "not_set";
+	set_time_limit: (id: number, time_limit: number | undefined) => void;
 	loading_status: ReturnType<typeof create_loading_status_store>;
 	scheduled_updates: Writable<boolean>;
 	create_layout: (args: {
@@ -39,7 +46,7 @@ export function create_components(): {
 		options: {
 			fill_height: boolean;
 		};
-	}) => void;
+	}) => Promise<void>;
 	rerender_layout: (args: {
 		render_id: number;
 		components: ComponentMeta[];
@@ -64,7 +71,20 @@ export function create_components(): {
 	let keyed_component_values: Record<string | number, any> = {};
 	let _rootNode: ComponentMeta;
 
-	function create_layout({
+	function set_event_specific_args(dependencies: Dependency[]): void {
+		dependencies.forEach((dep) => {
+			dep.targets.forEach((target) => {
+				const instance = instance_map[target[0]];
+				if (instance && dep.event_specific_args?.length > 0) {
+					dep.event_specific_args?.forEach((arg: string) => {
+						instance.props[arg] = dep[arg as keyof Dependency];
+					});
+				}
+			});
+		});
+	}
+
+	async function create_layout({
 		app: _app,
 		components,
 		layout,
@@ -80,7 +100,9 @@ export function create_components(): {
 		options: {
 			fill_height: boolean;
 		};
-	}): void {
+	}): Promise<void> {
+		// make sure the state is settled before proceeding
+		flush();
 		app = _app;
 		store_keyed_values(_components);
 
@@ -130,9 +152,10 @@ export function create_components(): {
 			{} as { [id: number]: ComponentMeta }
 		);
 
-		walk_layout(layout, root).then(() => {
-			layout_store.set(_rootNode);
-		});
+		await walk_layout(layout, root);
+
+		layout_store.set(_rootNode);
+		set_event_specific_args(dependencies);
 	}
 
 	/**
@@ -208,6 +231,8 @@ export function create_components(): {
 		walk_layout(layout, root, current_element.parent).then(() => {
 			layout_store.set(_rootNode);
 		});
+
+		set_event_specific_args(dependencies);
 	}
 
 	async function walk_layout(
@@ -301,7 +326,6 @@ export function create_components(): {
 			}
 			return layout;
 		});
-
 		pending_updates = [];
 		update_scheduled = false;
 		update_scheduled_store.set(false);
@@ -314,7 +338,7 @@ export function create_components(): {
 		if (!update_scheduled) {
 			update_scheduled = true;
 			update_scheduled_store.set(true);
-			requestAnimationFrame(flush);
+			raf(flush);
 		}
 	}
 
@@ -329,15 +353,43 @@ export function create_components(): {
 		return comp.props.value;
 	}
 
+	function modify_stream(
+		id: number,
+		state: "open" | "closed" | "waiting"
+	): void {
+		const comp = _component_map.get(id);
+		if (comp && comp.instance.modify_stream_state) {
+			comp.instance.modify_stream_state(state);
+		}
+	}
+
+	function get_stream_state(
+		id: number
+	): "open" | "closed" | "waiting" | "not_set" {
+		const comp = _component_map.get(id);
+		if (comp && comp.instance.get_stream_state)
+			return comp.instance.get_stream_state();
+		return "not_set";
+	}
+
+	function set_time_limit(id: number, time_limit: number | undefined): void {
+		const comp = _component_map.get(id);
+		if (comp && comp.instance.set_time_limit) {
+			comp.instance.set_time_limit(time_limit);
+		}
+	}
+
 	return {
 		layout: layout_store,
 		targets: target_map,
 		update_value,
 		get_data,
+		modify_stream,
+		get_stream_state,
+		set_time_limit,
 		loading_status,
 		scheduled_updates: update_scheduled_store,
-		create_layout: (...args) =>
-			requestAnimationFrame(() => create_layout(...args)),
+		create_layout: create_layout,
 		rerender_layout
 	};
 }

package/src/lang/en.json

@@ -16,12 +16,14 @@
 		"record": "Record",
 		"no_microphone": "No microphone found",
 		"pause": "Pause",
-		"play": "Play"
+		"play": "Play",
+		"waiting": "Waiting"
 	},
 	"blocks": {
 		"connection_can_break": "On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.",
 		"long_requests_queue": "There is a long queue of requests pending. Duplicate this Space to skip.",
-		"lost_connection": "Lost connection due to leaving page. Rejoining queue..."
+		"lost_connection": "Lost connection due to leaving page. Rejoining queue...",
+		"waiting_for_inputs": "Waiting for file(s) to finish uploading, please retry."
 	},
 	"checkbox": {
 		"checkbox": "Checkbox",
@@ -112,7 +114,7 @@
 		"drop_file": "Drop File Here",
 		"drop_image": "Drop Image Here",
 		"drop_video": "Drop Video Here",
-		"drop_gallery": "Drop Image(s) Here",
+		"drop_gallery": "Drop Media Here",
 		"paste_clipboard": "Paste from Clipboard"
 	}
 }

package/src/lang/zh-CN.json

@@ -16,7 +16,8 @@
 		"record": "录制",
 		"no_microphone": "找不到麦克风",
 		"pause": "暂停",
-		"play": "播放"
+		"play": "播放",
+		"waiting": "等待"
 	},
 	"blocks": {
 		"connection_can_break": "在移动设备上，如果此标签页失去焦点或设备休眠，连接可能会中断，导致您在队列中失去位置。",

package/src/stores.ts

@@ -2,7 +2,7 @@ import { type Writable, writable, get } from "svelte/store";
 
 export interface LoadingStatus {
 	eta: number | null;
-	status: "pending" | "error" | "complete" | "generating";
+	status: "pending" | "error" | "complete" | "generating" | "streaming";
 	queue: boolean;
 	queue_position: number | null;
 	queue_size?: number;
@@ -10,6 +10,7 @@ export interface LoadingStatus {
 	message?: string | null;
 	scroll_to_output?: boolean;
 	show_progress?: "full" | "minimal" | "hidden";
+	time_limit?: number | null | undefined;
 	progress?: {
 		progress: number | null;
 		index: number | null;
@@ -48,7 +49,8 @@ export function create_loading_status_store(): LoadingStatusStore {
 		position = null,
 		eta = null,
 		message = null,
-		progress
+		progress,
+		time_limit = null
 	}: {
 		fn_index: LoadingStatus["fn_index"];
 		status: LoadingStatus["status"];
@@ -58,6 +60,7 @@ export function create_loading_status_store(): LoadingStatusStore {
 		eta?: LoadingStatus["eta"];
 		message?: LoadingStatus["message"];
 		progress?: LoadingStatus["progress"];
+		time_limit?: LoadingStatus["time_limit"];
 	}): void {
 		const outputs = fn_outputs[fn_index];
 		const inputs = fn_inputs[fn_index];

package/src/types.ts

@@ -69,6 +69,11 @@ export interface Dependency {
 	final_event: Payload | null;
 	show_api: boolean;
 	rendered_in: number | null;
+	connection: "stream" | "sse";
+	time_limit: number;
+	stream_every: number;
+	like_user_message: boolean;
+	event_specific_args: string[];
 }
 
 interface TypeDescription {