@gradio/core 1.0.0-dev.3 → 1.0.0

package/src/dependency.ts

@@ -36,6 +36,8 @@ export class Dependency {
 	// in the case of chained events, it would be the id of the initial trigger
 	original_trigger_id: number | null = null;
 	show_progress_on: number[] | null = null;
+	component_prop_inputs: number[] = [];
+	show_progress: "full" | "minimal" | "hidden";
 
 	functions: {
 		frontend?: (...args: unknown[]) => Promise<unknown[]>;
@@ -49,6 +51,7 @@ export class Dependency {
 		this.inputs = dep_config.inputs;
 		this.outputs = dep_config.outputs;
 		this.connection_type = dep_config.connection;
+		this.show_progress = dep_config.show_progress;
 		this.functions = {
 			frontend: dep_config.js
 				? process_frontend_fn(
@@ -70,6 +73,7 @@ export class Dependency {
 		this.cancels = dep_config.cancels;
 		this.trigger_modes = dep_config.trigger_mode;
 		this.show_progress_on = dep_config.show_progress_on || null;
+		this.component_prop_inputs = dep_config.component_prop_inputs || [];
 
 		for (let i = 0; i < dep_config.event_specific_args?.length || 0; i++) {
 			const key = dep_config.event_specific_args[i];
@@ -205,12 +209,17 @@ export class DependencyManager {
 		add_to_api_calls: (payload: Payload) => void
 	) {
 		this.add_to_api_calls = add_to_api_calls;
-		this.client = client;
 		this.log_cb = log_cb;
-		// this.update_state_cb = update_state_cb;
-		// this.get_state_cb = get_state_cb;
-		// this.rerender_cb = rerender_cb;
-		this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb);
+		this.update_state_cb = update_state_cb;
+		this.get_state_cb = get_state_cb;
+		this.rerender_cb = rerender_cb;
+		this.reload(
+			dependencies,
+			update_state_cb,
+			get_state_cb,
+			rerender_cb,
+			client
+		);
 	}
 
 	reload(
@@ -223,15 +232,15 @@ export class DependencyManager {
 		const { by_id, by_event } = this.create(dependencies);
 		this.dependencies_by_event = by_event;
 		this.dependencies_by_fn = by_id;
+		this.client = client;
+		this.update_state_cb = update_state;
+		this.get_state_cb = get_state;
+		this.rerender_cb = rerender;
 		for (const [dep_id, dep] of this.dependencies_by_fn) {
 			for (const [output_id] of dep.targets) {
 				this.set_event_args(output_id, dep.event_args);
 			}
 		}
-		this.client = client;
-		this.update_state_cb = update_state;
-		this.get_state_cb = get_state;
-		this.rerender_cb = rerender;
 		this.register_loading_stati(by_id);
 	}
 	register_loading_stati(deps: Map<number, Dependency>): void {
@@ -239,7 +248,8 @@ export class DependencyManager {
 			this.loading_stati.register(
 				dep.id,
 				dep.show_progress_on || dep.outputs,
-				dep.inputs
+				dep.inputs,
+				dep.show_progress
 			);
 		}
 	}
@@ -324,7 +334,10 @@ export class DependencyManager {
 					this.update_loading_stati_state();
 				}
 
-				const data_payload = await this.gather_state(dep.inputs);
+				const data_payload = await this.gather_state(
+					dep.inputs,
+					dep.component_prop_inputs
+				);
 				const unset_args = await Promise.all(
 					dep.targets.map(([output_id]) =>
 						this.set_event_args(output_id, dep.event_args)
@@ -375,7 +388,7 @@ export class DependencyManager {
 					if (dep_submission.type === "void") {
 						unset_args.forEach((fn) => fn());
 					} else if (dep_submission.type === "data") {
-						this.handle_data(dep.outputs, dep_submission.data);
+						await this.handle_data(dep.outputs, dep_submission.data);
 						unset_args.forEach((fn) => fn());
 					} else {
 						let stream_state: "open" | "closed" | "waiting" | null = null;
@@ -408,7 +421,7 @@ export class DependencyManager {
 							index += 1;
 							if (result === null) continue;
 							if (result.type === "data") {
-								this.handle_data(dep.outputs, result.data);
+								await this.handle_data(dep.outputs, result.data);
 							}
 							if (result.type === "status") {
 								if (
@@ -516,6 +529,12 @@ export class DependencyManager {
 							}
 
 							if (result.type === "render") {
+								this.loading_stati.update({
+									status: "complete",
+									fn_index: dep.id,
+									stream_state: null
+								});
+								this.update_loading_stati_state();
 								const { layout, components, render_id, dependencies } =
 									result.data;
 
@@ -660,52 +679,61 @@ export class DependencyManager {
 	 * @param data the data to update the components with
 	 * */
 	async handle_data(outputs: number[], data: unknown[]) {
-		outputs.forEach(async (output_id, i) => {
-			const _data = data[i] === undefined ? NOVALUE : data[i];
-			if (_data === NOVALUE) return;
-
-			if (is_prop_update(_data)) {
-				let pending_visibility_update = false;
-				let pending_visibility_value = null;
-				for (const [update_key, update_value] of Object.entries(_data)) {
-					if (update_key === "__type__") continue;
-					if (update_key === "visible") {
-						pending_visibility_update = true;
-						pending_visibility_value = update_value;
-						continue;
+		await Promise.all(
+			outputs.map(async (output_id, i) => {
+				const _data = data[i] === undefined ? NOVALUE : data[i];
+				if (_data === NOVALUE) return;
+
+				if (is_prop_update(_data)) {
+					let pending_visibility_update = false;
+					let pending_visibility_value = null;
+					for (const [update_key, update_value] of Object.entries(_data)) {
+						if (update_key === "__type__") continue;
+						if (update_key === "visible") {
+							pending_visibility_update = true;
+							pending_visibility_value = update_value;
+							continue;
+						}
+						await this.update_state_cb(
+							outputs[i],
+							{
+								[update_key]: update_value
+							},
+							false
+						);
 					}
-					await this.update_state_cb(
-						outputs[i],
-						{
-							[update_key]: update_value
-						},
-						false
-					);
-				}
-				if (pending_visibility_update) {
-					await this.update_state_cb(
-						outputs[i],
-						{
-							visible: pending_visibility_value
-						},
-						true
-					);
+					if (pending_visibility_update) {
+						await this.update_state_cb(
+							outputs[i],
+							{
+								visible: pending_visibility_value
+							},
+							true
+						);
+					}
+				} else {
+					await this.update_state_cb(output_id, { value: _data }, false);
 				}
-			} else {
-				await this.update_state_cb(output_id, { value: _data }, false);
-			}
-		});
+			})
+		);
 	}
 
 	/**
 	 * Gathers the current state of the inputs
 	 *
 	 * @param ids the ids of the components to gather state from
+	 * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
 	 * @returns an array of the current state of the components, in the same order as the ids
 	 */
-	async gather_state(ids: number[]): Promise<(unknown | null)[]> {
+	async gather_state(
+		ids: number[],
+		prop_indices: number[] = []
+	): Promise<(unknown | null)[]> {
 		return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map(
-			(state) => {
+			(state, index) => {
+				if (prop_indices.includes(index)) {
+					return state ?? null;
+				}
 				return state?.value ?? null;
 			}
 		);
@@ -722,7 +750,8 @@ export class DependencyManager {
 		args: Record<string, unknown>
 	): Promise<() => void> {
 		let current_args: Record<string, unknown> = {};
-		const current_state = await this.get_state_cb(id);
+		const current_state = await this.get_state_cb?.(id);
+		if (!current_state) return () => {};
 		for (const [key] of Object.entries(args)) {
 			current_args[key] = current_state?.[key] ?? null;
 		}

package/src/types.ts

@@ -82,6 +82,7 @@ export interface Dependency {
 	like_user_message: boolean; // dno, this shouldnt be here surely
 	event_specific_args: ("time_limit" | "stream_every" | "like_user_message")[]; // `click(fn, some_arg=val)`
 	js_implementation: string | null; // pythong -> js transpilation
+	component_prop_inputs: number[]; // inputs that request all component props
 }
 
 interface TypeDescription {