rework upload to be a class method + pass client into each component

.changeset/huge-rivers-cough.md

@@ -0,0 +1,22 @@
+---
+"@gradio/app": patch
+"@gradio/audio": patch
+"@gradio/client": patch
+"@gradio/dataframe": patch
+"@gradio/file": patch
+"@gradio/gallery": patch
+"@gradio/image": patch
+"@gradio/imageeditor": patch
+"@gradio/model3d": patch
+"@gradio/multimodaltextbox": patch
+"@gradio/simpleimage": patch
+"@gradio/storybook": patch
+"@gradio/tootils": patch
+"@gradio/upload": patch
+"@gradio/uploadbutton": patch
+"@gradio/utils": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+fix:rework upload to be a class method + pass client into each component

client/js/src/client.ts

@@ -14,6 +14,7 @@ import type {
 } from "./types";
 import { view_api } from "./utils/view_api";
 import { upload_files } from "./utils/upload_files";
+import { upload, FileData } from "./upload";
 import { handle_blob } from "./utils/handle_blob";
 import { post_data } from "./utils/post_data";
 import { predict } from "./utils/predict";
@@ -60,10 +61,11 @@ export class Client {
 		return fetch(input, init);
 	}
 
-	eventSource_factory(url: URL): EventSource | null {
+	eventSource_factory(url: URL): EventSource {
 		if (typeof window !== undefined && typeof EventSource !== "undefined") {
 			return new EventSource(url.toString());
 		}
+		// @ts-ignore
 		return null; // todo: polyfill eventsource for node envs
 	}
 
@@ -73,6 +75,12 @@ export class Client {
 		files: (Blob | File)[],
 		upload_id?: string
 	) => Promise<UploadResponse>;
+	upload: (
+		file_data: FileData[],
+		root_url: string,
+		upload_id?: string,
+		max_file_size?: number
+	) => Promise<(FileData | null)[] | null>;
 	handle_blob: (
 		endpoint: string,
 		data: unknown[],
@@ -108,6 +116,7 @@ export class Client {
 		this.predict = predict.bind(this);
 		this.open_stream = open_stream.bind(this);
 		this.resolve_config = resolve_config.bind(this);
+		this.upload = upload.bind(this);
 	}
 
 	private async init(): Promise<void> {

client/js/src/upload.ts

@@ -1,16 +1,12 @@
 import type { UploadResponse } from "./types";
-import { upload_files } from ".";
+import type { Client } from "./client";
 
 export async function upload(
+	this: Client,
 	file_data: FileData[],
 	root_url: string,
 	upload_id?: string,
-	max_file_size?: number,
-	upload_fn: (
-		root_url: string,
-		files: (Blob | File)[],
-		upload_id?: string
-	) => Promise<UploadResponse> = upload_files
+	max_file_size?: number
 ): Promise<(FileData | null)[] | null> {
 	let files = (Array.isArray(file_data) ? file_data : [file_data]).map(
 		(file_data) => file_data.blob!
@@ -28,7 +24,7 @@ export async function upload(
 	}
 
 	return await Promise.all(
-		await upload_fn(root_url, files, upload_id).then(
+		await this.upload_files(root_url, files, upload_id).then(
 			async (response: { files?: string[]; error?: string }) => {
 				if (response.error) {
 					throw new Error(response.error);

client/js/src/utils/upload_files.ts

@@ -11,9 +11,10 @@ export async function upload_files(
 	const headers: {
 		Authorization?: string;
 	} = {};
-	if (this.options.hf_token) {
+	if (this?.options?.hf_token) {
 		headers.Authorization = `Bearer ${this.options.hf_token}`;
 	}
+
 	const chunkSize = 1000;
 	const uploadResponses = [];
 	for (let i = 0; i < files.length; i += chunkSize) {

js/app/src/Blocks.svelte

@@ -2,7 +2,6 @@
 	import { tick } from "svelte";
 	import { _ } from "svelte-i18n";
 	import { Client } from "@gradio/client";
-	import { setContext } from "svelte";
 
 	import type { LoadingStatus, LoadingStatusCollection } from "./stores";
 
@@ -522,8 +521,6 @@
 	function isCustomEvent(event: Event): event is CustomEvent {
 		return "detail" in event;
 	}
-
-	setContext("upload_files", app.upload_files);
 </script>
 
 <svelte:head>
@@ -562,6 +559,7 @@
 				{version}
 				{autoscroll}
 				max_file_size={app.config.max_file_size}
+				client={app}
 			/>
 		{/if}
 	</div>

js/app/src/Index.svelte

@@ -63,7 +63,7 @@
 </script>
 
 <script lang="ts">
-	import { onMount, setContext, createEventDispatcher } from "svelte";
+	import { onMount, createEventDispatcher } from "svelte";
 	import type { SpaceStatus } from "@gradio/client";
 	import Embed from "./Embed.svelte";
 	import type { ThemeMode } from "./types";
@@ -100,11 +100,6 @@
 			loading_text = (event as CustomEvent).detail + "...";
 		});
 	}
-	export let fetch_implementation: typeof fetch = fetch;
-	setContext("fetch_implementation", fetch_implementation);
-	export let EventSource_factory: (url: URL) => EventSource = (url) =>
-		new EventSource(url);
-	setContext("EventSource_factory", EventSource_factory);
 
 	export let space: string | null;
 	export let host: string | null;

js/app/src/MountComponents.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, createEventDispatcher } from "svelte";
+	import type { Client } from "@gradio/client";
 	import Render from "./Render.svelte";
 
 	export let rootNode: any;
@@ -9,6 +10,7 @@
 	export let version: any;
 	export let autoscroll: boolean;
 	export let max_file_size: number | null = null;
+	export let client: Client;
 
 	const dispatch = createEventDispatcher<{ mount?: never }>();
 	onMount(() => {
@@ -24,4 +26,5 @@
 	{version}
 	{autoscroll}
 	{max_file_size}
+	{client}
 />

js/app/src/Render.svelte

@@ -2,6 +2,7 @@
 	import { Gradio, formatter } from "./gradio_helper";
 	import { onMount, createEventDispatcher, setContext } from "svelte";
 	import type { ComponentMeta, ThemeMode } from "./types";
+	import type { Client } from "@gradio/client";
 	import RenderComponent from "./RenderComponent.svelte";
 
 	export let root: string;
@@ -13,6 +14,7 @@
 	export let version: string;
 	export let autoscroll: boolean;
 	export let max_file_size: number | null;
+	export let client: Client;
 
 	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
 	let filtered_children: ComponentMeta[] = [];
@@ -45,12 +47,6 @@
 
 	setContext("BLOCK_KEY", parent);
 
-	function handle_prop_change(e: { detail: Record<string, any> }): void {
-		// for (const k in e.detail) {
-		// 	instance_map[id].props[k] = e.detail[k];
-		// }
-	}
-
 	$: {
 		if (node.type === "form") {
 			if (node.children?.every((c) => !c.props.visible)) {
@@ -70,7 +66,6 @@
 	elem_id={("elem_id" in node.props && node.props.elem_id) ||
 		`component-${node.id}`}
 	elem_classes={("elem_classes" in node.props && node.props.elem_classes) || []}
-	on:prop_change={handle_prop_change}
 	{target}
 	{...node.props}
 	{theme_mode}
@@ -83,7 +78,8 @@
 		root,
 		autoscroll,
 		max_file_size,
-		formatter
+		formatter,
+		client
 	)}
 >
 	{#if node.children && node.children.length}
@@ -98,6 +94,7 @@
 				on:destroy
 				on:mount
 				{max_file_size}
+				{client}
 			/>
 		{/each}
 	{/if}

js/app/src/lite/Playground.svelte

@@ -23,9 +23,7 @@
 	export let mount_css: typeof default_mount_css = default_mount_css;
 	export let Client: typeof ClientType;
 	export let worker_proxy: WorkerProxy | undefined = undefined;
-	export let fetch_implementation: typeof fetch = fetch;
-	export let EventSource_factory: (url: URL) => EventSource = (url) =>
-		new EventSource(url);
+
 	export let space: string | null;
 	export let host: string | null;
 	export let src: string | null;
@@ -217,8 +215,6 @@
 								{mount_css}
 								{Client}
 								bind:worker_proxy
-								{fetch_implementation}
-								{EventSource_factory}
 								{space}
 								{host}
 								{src}

js/app/src/lite/index.ts

@@ -127,13 +127,6 @@ export function create(options: Options): GradioAppController {
 
 	mount_prebuilt_css(document.head);
 
-	const overridden_fetch: typeof fetch = (input, init?) => {
-		return wasm_proxied_fetch(worker_proxy, input, init);
-	};
-	const EventSource_factory = (url: URL): EventSource => {
-		return wasm_proxied_EventSource_factory(worker_proxy, url);
-	};
-
 	class LiteClient extends Client {
 		fetch_implementation(
 			input: RequestInfo | URL,
@@ -223,8 +216,6 @@ export function create(options: Options): GradioAppController {
 			worker_proxy,
 			Client: LiteClient,
 			mount_css: overridden_mount_css,
-			fetch_implementation: overridden_fetch,
-			EventSource_factory,
 			// For playground
 			layout: options.layout
 		};

js/audio/Index.svelte

@@ -225,6 +225,8 @@
 			{waveform_settings}
 			{waveform_options}
 			{trim_region_settings}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.eventSource_factory}
 		>
 			<UploadText i18n={gradio.i18n} type="audio" />
 		</InteractiveAudio>

js/audio/interactive/InteractiveAudio.svelte

@@ -2,10 +2,10 @@
 	import { getContext, onDestroy, createEventDispatcher } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import {
-		upload,
 		prepare_files,
 		type FileData,
-		type upload_files
+		type Client,
+		type upload
 	} from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Music } from "@gradio/icons";
@@ -39,9 +39,8 @@
 	export let handle_reset_value: () => void = () => {};
 	export let editable = true;
 	export let max_file_size: number | null = null;
-
-	// Needed for wasm support
-	const upload_fn = getContext<typeof upload_files>("upload_files");
+	export let upload: Client["upload"];
+	export let stream_handler: Client["eventSource_factory"];
 
 	$: dispatch("drag", dragging);
 
@@ -98,9 +97,9 @@
 		let _audio_blob = new File(blobs, "audio.wav");
 		const val = await prepare_files([_audio_blob], event === "stream");
 		value = (
-			(
-				await upload(val, root, undefined, max_file_size ?? Infinity, upload_fn)
-			)?.filter(Boolean) as FileData[]
+			(await upload(val, root, undefined, max_file_size ?? Infinity))?.filter(
+				Boolean
+			) as FileData[]
 		)[0];
 
 		dispatch(event, value);
@@ -257,6 +256,8 @@
 				on:error={({ detail }) => dispatch("error", detail)}
 				{root}
 				{max_file_size}
+				{upload}
+				{stream_handler}
 			>
 				<slot />
 			</Upload>

js/dataframe/Index.svelte

@@ -150,5 +150,7 @@
 		i18n={gradio.i18n}
 		{line_breaks}
 		{column_widths}
+		upload={gradio.client.upload}
+		stream_handler={gradio.client.eventSource_factory}
 	/>
 </Block>

js/dataframe/package.json

@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/button": "workspace:^",
+		"@gradio/client": "workspace:^",
 		"@gradio/markdown": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",

js/dataframe/shared/Table.svelte

@@ -8,6 +8,7 @@
 	import EditableCell from "./EditableCell.svelte";
 	import type { SelectData } from "@gradio/utils";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
+	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
 	import type {
 		Headers,
@@ -38,6 +39,8 @@
 	export let height = 500;
 	export let line_breaks = true;
 	export let column_widths: string[] = [];
+	export let upload: Client["upload"];
+	export let stream_handler: Client["eventSource_factory"];
 
 	let selected: false | [number, number] = false;
 	export let display_value: string[][] | null = null;
@@ -722,6 +725,8 @@
 			</tbody>
 		</table>
 		<Upload
+			{upload}
+			{stream_handler}
 			flex={false}
 			center={false}
 			boundedheight={false}

js/file/Index.svelte

@@ -87,6 +87,8 @@
 		/>
 	{:else}
 		<FileUpload
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.eventSource_factory}
 			{label}
 			{show_label}
 			{value}