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

pngwn · 2024-04-30T14:58:26Z

Description

Closes #8150.

This PR reworks the upload function exported from @gradio/client to instead be an instance method of the client. This means we do not need to pass the upload_fn in and can instead use this.upload_files which uses this.fetch_implementation. This simplifies things significantly as the lite client and core client define their own fetch and stream methods.

To further reduce the complexity of the code base, i decide to pass the client into each component on the gradio namespace. This allows components to fetch/ stream as needed using the client methods (which are set appropriately for their environment) without us needing to pass individual function using svelte's context.

Wherever an upload function is required, the component can simply call it or pass it down.

gradio-pr-bot · 2024-04-30T14:59:14Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/a20e4c4ddca976b10afc450e425e6c3bea8ebaaf/gradio-4.28.3-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@a20e4c4ddca976b10afc450e425e6c3bea8ebaaf#subdirectory=client/python"

gradio-pr-bot · 2024-04-30T14:59:24Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@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`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

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

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

pngwn · 2024-04-30T14:59:25Z

client/js/src/client.ts

+	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
 	}


This tying is temporary but was causing problems for some components. Ignored it until we polyfill.

pngwn · 2024-04-30T14:59:46Z

client/js/src/client.ts

@@ -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);


This is the main change.

client/js/src/utils/upload_files.ts

pngwn · 2024-04-30T15:01:42Z

js/app/src/Render.svelte

+		formatter,
+		client


We pass the clients into the components here.

pngwn · 2024-04-30T15:02:04Z

js/app/src/lite/index.ts

-	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);
-	};
-


We don't need this any more, we just use the client everywhere.

pngwn · 2024-04-30T15:02:29Z

js/audio/Index.svelte

+			upload={gradio.client.upload}
+			stream_handler={gradio.client.eventSource_factory}


Client available on gradio namespace. Rest of the code is just more of this really.

pngwn · 2024-04-30T15:02:51Z

js/app/src/Render.svelte

-		// 	instance_map[id].props[k] = e.detail[k];
-		// }
-	}
-
 	$: {


This was an unused leftover.

pngwn · 2024-04-30T15:03:19Z

js/app/src/Index.svelte

-	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);


Because we use client.x() everywhere now, we don't need this.

much cleaner

pngwn · 2024-04-30T15:03:31Z

js/app/src/Blocks.svelte

@@ -522,8 +521,6 @@
 	function isCustomEvent(event: Event): event is CustomEvent {
 		return "detail" in event;
 	}
-
-	setContext("upload_files", app.upload_files);


ANd we don't need this for the same reason.

pngwn · 2024-04-30T16:39:22Z

storybook should be fine now.

js/gallery/shared/Gallery.svelte

js/image/shared/Webcam.svelte

js/audio/interactive/InteractiveAudio.svelte

js/upload/src/UploadProgress.svelte

js/audio/interactive/InteractiveAudio.svelte

js/gallery/shared/Gallery.svelte

js/upload/src/Upload.svelte

js/uploadbutton/shared/UploadButton.svelte

hannahblair · 2024-04-30T20:57:33Z

There's an issue with the Trim Video snapshot in storybook which is specific to this PR; at first glance I can't see why this would cause it but I can delve into it tmo. Otherwise, looks good - thanks for making the upload logic a lot cleaner! Also, the comments really helped :-)

edit: no worries the trim video snapshot is just a red herring

hannahblair

Just a few nits, otherwise looks good! Thanks for cleaning that up 🧹

Co-authored-by: Hannah <hannahblair@users.noreply.github.com>

…8179) * rework upload to be a class method + pass client into each component * add changeset * Update client/js/src/utils/upload_files.ts * fix storybook * review comments * Apply suggestions from code review Co-authored-by: Hannah <hannahblair@users.noreply.github.com> * format * ts fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Hannah <hannahblair@users.noreply.github.com>

* chatbot components * demoi * add changeset * preprocess fix * add changeset * Make guide for tailwind more verbose (#8152) * Lite wheel optimization (#7855) * Add `pull_request.branches.main` as a trigger of the `publish` workflow * [WIP] Comment out the publish steps * Package and upload the NPM package for debug * Skip the copy_frontend.py hook in the Lite build * add changeset * [WIP] Show gradio files * [WIP] Show gradio files * Comment out installing the gradio and gradio_client libraries * Restore installing gradio_client because it's used by `python js/_website/generate_jsons/generate.py` that follows * Restore installing gradio because it's used by `python js/_website/generate_jsons/generate.py` that follows * Add code * Revert "[WIP] Show gradio files" This reverts commit e15fef2. * Build the gradio wheel with the custom lite target * add changeset * Revert "[WIP] Show gradio files" This reverts commit aef053f. * Revert "Skip the copy_frontend.py hook in the Lite build" This reverts commit ca296d0. * Update .github/actions/install-frontend-deps/action.yml for hatch installation * [WIP] Fix test-functional.yml and .github/actions/install-all-deps/action.yml to call the setup actions in this branch * Revert "[WIP] Fix test-functional.yml and .github/actions/install-all-deps/action.yml to call the setup actions in this branch" This reverts commit 571823b. * Comment-in lines in publish.yml * Move Lite build from publish.yml to deploy-spaces.yml * Use the build_lite option of install-all-deps instead of running the build command * [TMP] Change the branch of action files * Fix the hatch Lite build setting * Return pnpm pack to deploy-space * Revert "[TMP] Change the branch of action files" This reverts commit fe4e1c8. * Remove dependencies for lite build * [TMP] Change the branch of action files * Revert "Remove dependencies for lite build" This reverts commit 856a858. * Install packaging>=23.2 * [TMP] Show packaging version * Fix pip install * Fix * Uninstall packaging once * Use `pip install -U` instead of uninstalling the exiting version * Revert "[TMP] Show packaging version" This reverts commit 910b6bb. * Add `-U` flag * Set packaging version as >=23.2 * Revert the changes on pip install * Set packaging version as >=23.2 in requirements.txt * Revert "Set packaging version as >=23.2" This reverts commit 8aa77c8. * Fix hook name * Revert "Set packaging version as >=23.2 in requirements.txt" This reverts commit fbd605c. * Revert "Revert the changes on pip install" This reverts commit 81ff38a. * Add comments * Revert "[TMP] Change the branch of action files" This reverts commit 0d6aa48. * Revert the trigger of .github/workflows/deploy-spaces.yml * Remove unused `node_auth_token` and `npm_token` inputs from the `install-all-deps` action * [TMP] Trigger CI based on this PR * Remove packging installation * Revert "Remove packging installation" This reverts commit 4a4f18d. * Revert "[TMP] Trigger CI based on this PR" This reverts commit 6cea830. --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com> * Add ETag to `/custom_component` route to control browser caching (#8170) * Add code * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Implement JS Client tests (#8109) * add msw setup and initialisation tests * add changeset * add walk_and_store_blobs improvements and add tests * add changeset * api_info tests * add direct space URL link tests * fix tests * add view_api tests * add post_message test * tweak * add spaces tests * jwt and protocol tests * add post_data tests * test tweaks --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Remove hatch installation in js/app/package.json which is no longer needed (#8174) * Remove hatch installation in js/app/package.json which is no longer needed * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Update test-functional.yml - Fix vulnerability code injection (#8145) * Update test-functional.yml * Update test-functional.yml * tweaks --------- Co-authored-by: pngwn <hello@pngwn.io> * rework upload to be a class method + pass client into each component (#8179) * rework upload to be a class method + pass client into each component * add changeset * Update client/js/src/utils/upload_files.ts * fix storybook * review comments * Apply suggestions from code review Co-authored-by: Hannah <hannahblair@users.noreply.github.com> * format * ts fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Hannah <hannahblair@users.noreply.github.com> * chore(deps): update pnpm to v9 (#8123) * chore(deps): update pnpm to v9 * update workflow --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io> * Use workspace version for code in _website (#8189) * workspace * add changeset * remove circular import from preview * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Pass Error status in /dev/reload stream (#8106) * get error message * Support multiple clients * add changeset * add changeset * add changeset * Display in UI * console.error the python traceback * lint --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Convert sse calls in client from async to sync (#8182) * convert sse calls in client from async to sync * add changeset * more sync * lint * more sync * fix threadpool * fix timeouts * reuse executor * lint --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * run python reload only if python file changed (#8194) * run python reload only if python file changed * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com> * fix: handling SIGINT correctly in reload.py, single entrance of block_thread in blocks.py (#8158) * fix: handling SIGINT, single block_thread and fix popen * Use pass --------- Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com> * Add eventsource polyfill for Node.js and browser environments (#8118) * add msw setup and initialisation tests * add changeset * add eventsource polyfill for node and browser envs * add changeset * add changeset * config tweak * types * update eventsource usage * add changeset * add walk_and_store_blobs improvements and add tests * add changeset * api_info tests * add direct space URL link tests * fix tests * add view_api tests * add post_message test * tweak * add spaces tests * jwt and protocol tests * add post_data tests * test tweaks * dynamically import eventsource * revet eventsource imports * add node test * lockfile * add client test in root pkg file * lcokfile * remove eventsource from js/app * add changeset * remove ts ignore * move eventsource polyfill to eventsource factory * add changeset * tweak --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Ensure connectivity to private HF spaces with SSE protocol (#8181) * add msw setup and initialisation tests * add changeset * add eventsource polyfill for node and browser envs * add changeset * add changeset * config tweak * types * update eventsource usage * add changeset * add walk_and_store_blobs improvements and add tests * add changeset * api_info tests * add direct space URL link tests * fix tests * add view_api tests * add post_message test * tweak * add spaces tests * jwt and protocol tests * add post_data tests * test tweaks * dynamically import eventsource * revet eventsource imports * add jwt param to sse requests * add stream test * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Support custom components in gr.load (#8200) * Add code * add changeset * Update fuzzy-mirrors-scream.md * Update fuzzy-mirrors-scream.md * Fix tests * Update .changeset/fuzzy-mirrors-scream.md Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Fix code --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Refactor analytics to not use api.gradio.app (#8180) * Analytics refactor * add changeset * add changeset * Fix wasm? * Fix python tests' * Revert changes chrome * use util function --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Specify the fastapi version on Lite to avoid ujson installation which is not available on Pyodide yet (#8204) * Specify the fastapi version on Lite to avoid ujson installation which is not available on Pyodide yet * add changeset * Refactoring --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Set the show_api flag on Lite (#8205) * Set the show_api flag on Lite * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Extend Interface.from_pipeline() to support Transformers.js.py pipelines on Lite (#8052) * Extend Interface.from_pipeline() to support Transformers.js.py pipelines on Lite (wip: only object-detection in this commit) * add changeset * Add image-classification and image-segmentation * Add zero-shot-image-classification and zero-shot-object-detection * Add document-question-answering * Add feature-extraction and fill-mask * Add question-answering and summarization * Fix an error message * Add text2text-generation, text-classification, and text-generation * Add translation andtranslation_xx_to_yy * Add zero-shot-classification * Add postprocess_takes_inputs to control the args passed to the postprocess function of each pipeline * Add topk option to image-classification * format_backend * Add audio-classification, automatic-speech-recognition, and zero-shot-audio-classification * Add image-to-text * Add token-classification (with JSON component as an output. Is it correct?) * Ignore import type failure of transformers_js_py * Add image-feature-extraction * Add image-to-image * Add text-to-audio * Add depth-estimation * Remove `render=False` * Reorder the if-blocks following the Transformers.js doc * Update gradio/pipelines_utils.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update gradio/pipelines_utils.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Fix feature-extraction demo * Fix demo title * Add guides/08_gradio-clients-and-lite/gradio-lite-and-transformers-js.md without contents * Rename guides/08_gradio-clients-and-lite/*.md to fix the order * Use pipeline.model.config._name_or_path for the demo title instead of pipeline.model.config.model_type * Fix normal Interface.from_pipeline to use pipeline.model.config.name_or_path as the demo title * Write an article about Gradio-Lite and Transformers.js * Update the doc * tweaks * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * merge * allow the canvas size to be set on the `ImageEditor` (#8127) * add canvas size kwarg to imageeditor * add changeset * fix tests * fix cropsize * changes * notebooks * update docstrings * fix type * fix undefined dimensions * Update image_editor.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * fix type * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Rename `eventSource_Factory` and `fetch_implementation` (#8209) * rename eventSource_factory -> stream_factory + rename event_source -> steam * rename fetch_implementation -> fetch * rename fetch to _fetch due to global.fetch conflict * add changeset * format * format * format * format * fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * remove redundant event source logic (#8211) * remove redundant event source logic * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Only connect to heartbeat if needed (#8169) * Add connect_heartbeat field * fix types * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * chore: update versions (#8172) * fixes * type fixes * type fixes * notebook fix * type ignore * data object model * remove component in tuple * more fixes * extend components * remove test var * extend to all components backend * remove loading data models * conflict fix * test and type fixes * playwright test * PR fixes * final changes * Add pltly for 2e2 test * pass loader to Gradio helper class * fix things * add changeset * checks * more fixy * more fixy * more fixy --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Simon Duerr <dev@simonduerr.eu> Co-authored-by: Yuichiro Tachibana (Tsuchiya) <t.yic.yt@gmail.com> Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com> Co-authored-by: Hannah <hannahblair@users.noreply.github.com> Co-authored-by: Lê Ngọc Hoa <114990730+h2oa@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: James Zhou <61927718+jameszhou02@users.noreply.github.com> Co-authored-by: Tiger3018 <tiger3018of02@gmail.com>

pngwn added 2 commits April 30, 2024 15:54

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

dd024fa

Merge branch 'main' into 89150-upload-files

29e61e2

add changeset

f58afc2

pngwn commented Apr 30, 2024

View reviewed changes

client/js/src/utils/upload_files.ts Outdated Show resolved Hide resolved

Update client/js/src/utils/upload_files.ts

fe847b8

pngwn commented Apr 30, 2024

View reviewed changes

js/app/src/Render.svelte

Comment on lines +81 to +82

formatter,

client

Copy link

Member Author

pngwn Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We pass the clients into the components here.

pngwn commented Apr 30, 2024

View reviewed changes

js/app/src/Render.svelte

// instance_map[id].props[k] = e.detail[k];

// }

}

$: {

Copy link

Member Author

pngwn Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was an unused leftover.

pngwn commented Apr 30, 2024

View reviewed changes

fix storybook

93b15ea