Lite: Support AnnotatedImage on Wasm (#6133)

* Make AnnotatedImage Wasm-compatible

* add changeset

* Fix AnnotatedImage.svelte to render `<img>`s immediately and update their `src` values after those are resolved asynchronously

* Fix comments

* add changeset

* Rename a variable for consistency with `Image.svelte`

* Fix a variable name

* Rename  to

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

.changeset/bumpy-cloths-dream.md

@@ -0,0 +1,8 @@
+---
+"@gradio/annotatedimage": minor
+"@gradio/image": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Lite: Support AnnotatedImage on Wasm

js/annotatedimage/Index.svelte

@@ -6,6 +6,7 @@
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { type FileData, normalise_file } from "@gradio/client";
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -40,19 +41,60 @@
 	let active: string | null = null;
 	export let loading_status: LoadingStatus;
 
+	// `value` can be updated before the Promises from `resolve_wasm_src` are resolved.
+	// In such a case, the resolved values for the old `value` have to be discarded,
+	// This variable `latest_promise` is used to pick up only the values resolved for the latest `value`.
+	let latest_promise: Promise<unknown> | null = null;
 	$: {
 		if (value !== old_value) {
 			old_value = value;
 			gradio.dispatch("change");
 		}
 		if (value) {
-			_value = {
+			const normalized_value = {
 				image: normalise_file(value.image, root, proxy_url) as FileData,
 				annotations: value.annotations.map((ann) => ({
 					image: normalise_file(ann.image, root, proxy_url) as FileData,
 					label: ann.label
 				}))
 			};
+			_value = normalized_value;
+
+			// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed values immediately
+			// without waiting for `resolve_wasm_src()` to resolve.
+			// If it waits, a blank image is displayed until the async task finishes
+			// and it leads to undesirable flickering.
+			// So set `_value` immediately above, and update it with the resolved values below later.
+			const image_url_promise = resolve_wasm_src(normalized_value.image.url);
+			const annotation_urls_promise = Promise.all(
+				normalized_value.annotations.map((ann) =>
+					resolve_wasm_src(ann.image.url)
+				)
+			);
+			const current_promise = Promise.all([
+				image_url_promise,
+				annotation_urls_promise
+			]);
+			latest_promise = current_promise;
+			current_promise.then(([image_url, annotation_urls]) => {
+				if (latest_promise !== current_promise) {
+					return;
+				}
+				const async_resolved_value: typeof _value = {
+					image: {
+						...normalized_value.image,
+						url: image_url ?? undefined
+					},
+					annotations: normalized_value.annotations.map((ann, i) => ({
+						...ann,
+						image: {
+							...ann.image,
+							url: annotation_urls[i] ?? undefined
+						}
+					}))
+				};
+				_value = async_resolved_value;
+			});
 		} else {
 			_value = null;
 		}

js/annotatedimage/package.json

@@ -17,6 +17,7 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
-		"@gradio/client": "workspace:^"
+		"@gradio/client": "workspace:^",
+		"@gradio/wasm": "workspace:^"
 	}
 }

js/image/shared/Image.svelte

@@ -18,7 +18,7 @@
 	$: {
 		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
 		// without waiting for `resolve_wasm_src()` to resolve.
-		// If it waits, a black image is displayed until the async task finishes
+		// If it waits, a blank image is displayed until the async task finishes
 		// and it leads to undesirable flickering.
 		// So set `src` to `resolved_src` here.
 		resolved_src = src;

js/video/shared/Video.svelte

@@ -30,7 +30,7 @@
 	$: {
 		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
 		// without waiting for `resolve_wasm_src()` to resolve.
-		// If it waits, a black image is displayed until the async task finishes
+		// If it waits, a blank element is displayed until the async task finishes
 		// and it leads to undesirable flickering.
 		// So set `src` to `resolved_src` here.
 		resolved_src = src;

pnpm-lock.yaml

@@ -357,6 +357,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/wasm':
+        specifier: workspace:^
+        version: link:../wasm
 
   js/app:
     dependencies: