diff --git a/.changeset/shiny-news-float.md b/.changeset/shiny-news-float.md
new file mode 100644
index 000000000000..62e125ee5a37
--- /dev/null
+++ b/.changeset/shiny-news-float.md
@@ -0,0 +1,13 @@
+---
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/client": minor
+"@gradio/code": minor
+"@gradio/file": minor
+"@gradio/image": minor
+"@gradio/video": minor
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Lite v4
diff --git a/client/js/src/client.ts b/client/js/src/client.ts
index 7ff732df7893..2135324f76b5 100644
--- a/client/js/src/client.ts
+++ b/client/js/src/client.ts
@@ -178,7 +178,7 @@ interface Client {
 
 export function api_factory(
 	fetch_implementation: typeof fetch,
-	WebSocket_factory: (url: URL) => WebSocket
+	EventSource_factory: (url: URL) => EventSource
 ): Client {
 	return { post_data, upload_files, client, handle_blob };
 
@@ -546,7 +546,7 @@ export function api_factory(
 							url.searchParams.set("__sign", jwt);
 						}
 
-						websocket = WebSocket_factory(url);
+						websocket = new WebSocket(url);
 
 						websocket.onclose = (evt) => {
 							if (!evt.wasClean) {
@@ -667,7 +667,7 @@ export function api_factory(
 							)}/queue/join?${url_params ? url_params + "&" : ""}${params}`
 						);
 
-						eventSource = new EventSource(url);
+						eventSource = EventSource_factory(url);
 
 						eventSource.onmessage = async function (event) {
 							const _data = JSON.parse(event.data);
@@ -1007,7 +1007,7 @@ export function api_factory(
 
 export const { post_data, upload_files, client, handle_blob } = api_factory(
 	fetch,
-	(...args) => new WebSocket(...args)
+	(...args) => new EventSource(...args)
 );
 
 function transform_output(
diff --git a/gradio/components/video.py b/gradio/components/video.py
index 273a32b548bc..fc66320ada10 100644
--- a/gradio/components/video.py
+++ b/gradio/components/video.py
@@ -165,16 +165,20 @@ def preprocess(self, payload: VideoData | None) -> str | None:
         uploaded_format = file_name.suffix.replace(".", "")
         needs_formatting = self.format is not None and uploaded_format != self.format
         flip = self.sources == ["webcam"] and self.mirror_webcam
-        duration = processing_utils.get_video_length(file_name)
 
-        if self.min_length is not None and duration < self.min_length:
-            raise gr.Error(
-                f"Video is too short, and must be at least {self.min_length} seconds"
-            )
-        if self.max_length is not None and duration > self.max_length:
-            raise gr.Error(
-                f"Video is too long, and must be at most {self.max_length} seconds"
-            )
+        if self.min_length is not None or self.max_length is not None:
+            # With this if-clause, avoid unnecessary execution of `processing_utils.get_video_length`.
+            # This is necessary for the Wasm-mode, because it uses ffprobe, which is not available in the browser.
+            duration = processing_utils.get_video_length(file_name)
+            if self.min_length is not None and duration < self.min_length:
+                raise gr.Error(
+                    f"Video is too short, and must be at least {self.min_length} seconds"
+                )
+            if self.max_length is not None and duration > self.max_length:
+                raise gr.Error(
+                    f"Video is too long, and must be at most {self.max_length} seconds"
+                )
+
         if needs_formatting or flip:
             format = f".{self.format if needs_formatting else uploaded_format}"
             output_options = ["-vf", "hflip", "-c:a", "copy"] if flip else []
diff --git a/gradio/data_classes.py b/gradio/data_classes.py
index 86b89408eb88..8a87f7ac5a3c 100644
--- a/gradio/data_classes.py
+++ b/gradio/data_classes.py
@@ -11,9 +11,56 @@
 
 from fastapi import Request
 from gradio_client.utils import traverse
-from pydantic import BaseModel, RootModel, ValidationError
 from typing_extensions import Literal
 
+from . import wasm_utils
+
+if not wasm_utils.IS_WASM:
+    from pydantic import BaseModel, RootModel, ValidationError  # type: ignore
+else:
+    # XXX: Currently Pyodide V2 is not available on Pyodide,
+    # so we install V1 for the Wasm version.
+    from typing import Generic, TypeVar
+
+    from pydantic import BaseModel as BaseModelV1
+    from pydantic import ValidationError, schema_of
+
+    # Map V2 method calls to V1 implementations.
+    # Ref: https://docs.pydantic.dev/latest/migration/#changes-to-pydanticbasemodel
+    class BaseModel(BaseModelV1):
+        pass
+
+    BaseModel.model_dump = BaseModel.dict  # type: ignore
+    BaseModel.model_json_schema = BaseModel.schema  # type: ignore
+
+    # RootModel is not available in V1, so we create a dummy class.
+    PydanticUndefined = object()
+    RootModelRootType = TypeVar("RootModelRootType")
+
+    class RootModel(BaseModel, Generic[RootModelRootType]):
+        root: RootModelRootType
+
+        def __init__(self, root: RootModelRootType = PydanticUndefined, **data):
+            if data:
+                if root is not PydanticUndefined:
+                    raise ValueError(
+                        '"RootModel.__init__" accepts either a single positional argument or arbitrary keyword arguments'
+                    )
+                root = data  # type: ignore
+            # XXX: No runtime validation is executed.
+            super().__init__(root=root)  # type: ignore
+
+        def dict(self, **kwargs):
+            return super().dict(**kwargs)["root"]
+
+        @classmethod
+        def schema(cls, **kwargs):
+            # XXX: kwargs are ignored.
+            return schema_of(cls.__fields__["root"].type_)  # type: ignore
+
+    RootModel.model_dump = RootModel.dict  # type: ignore
+    RootModel.model_json_schema = RootModel.schema  # type: ignore
+
 
 class PredictBody(BaseModel):
     class Config:
diff --git a/gradio/processing_utils.py b/gradio/processing_utils.py
index e46318740989..35bdcd19f925 100644
--- a/gradio/processing_utils.py
+++ b/gradio/processing_utils.py
@@ -712,6 +712,10 @@ def convert_video_to_playable_mp4(video_path: str) -> str:
 
 
 def get_video_length(video_path: str | Path):
+    if wasm_utils.IS_WASM:
+        raise wasm_utils.WasmUnsupportedError(
+            "Video duration is not supported in the Wasm mode."
+        )
     duration = subprocess.check_output(
         [
             "ffprobe",
diff --git a/js/app/src/lite/index.ts b/js/app/src/lite/index.ts
index ce9f682e0d2a..163123c4fe20 100644
--- a/js/app/src/lite/index.ts
+++ b/js/app/src/lite/index.ts
@@ -1,9 +1,12 @@
-import "@gradio/theme";
+import "@gradio/theme/src/reset.css";
+import "@gradio/theme/src/global.css";
+import "@gradio/theme/src/pollen.css";
+import "@gradio/theme/src/typography.css";
 import type { SvelteComponent } from "svelte";
 import { WorkerProxy, type WorkerProxyOptions } from "@gradio/wasm";
 import { api_factory } from "@gradio/client";
 import { wasm_proxied_fetch } from "./fetch";
-import { wasm_proxied_WebSocket_factory } from "./websocket";
+import { wasm_proxied_EventSource_factory } from "./sse";
 import { wasm_proxied_mount_css, mount_prebuilt_css } from "./css";
 import type { mount_css } from "../css";
 import Index from "../Index.svelte";
@@ -101,12 +104,12 @@ export function create(options: Options): GradioAppController {
 	const overridden_fetch: typeof fetch = (input, init?) => {
 		return wasm_proxied_fetch(worker_proxy, input, init);
 	};
-	const WebSocket_factory = (url: URL): WebSocket => {
-		return wasm_proxied_WebSocket_factory(worker_proxy, url);
+	const EventSource_factory = (url: URL): EventSource => {
+		return wasm_proxied_EventSource_factory(worker_proxy, url);
 	};
 	const { client, upload_files } = api_factory(
 		overridden_fetch,
-		WebSocket_factory
+		EventSource_factory
 	);
 	const overridden_mount_css: typeof mount_css = async (url, target) => {
 		return wasm_proxied_mount_css(worker_proxy, url, target);
diff --git a/js/app/src/lite/websocket.ts b/js/app/src/lite/sse.ts
similarity index 56%
rename from js/app/src/lite/websocket.ts
rename to js/app/src/lite/sse.ts
index 0e97d5b96633..7b2e6038a689 100644
--- a/js/app/src/lite/websocket.ts
+++ b/js/app/src/lite/sse.ts
@@ -1,4 +1,4 @@
-import type { WorkerProxy } from "@gradio/wasm";
+import { type WorkerProxy, WasmWorkerEventSource } from "@gradio/wasm";
 import { is_self_host } from "@gradio/wasm/network";
 
 /**
@@ -6,14 +6,14 @@ import { is_self_host } from "@gradio/wasm/network";
  * which also falls back to the original WebSocket() for external resource requests.
  */
 
-export function wasm_proxied_WebSocket_factory(
+export function wasm_proxied_EventSource_factory(
 	worker_proxy: WorkerProxy,
 	url: URL
-): WebSocket {
+): EventSource {
 	if (!is_self_host(url)) {
 		console.debug("Fallback to original WebSocket");
-		return new WebSocket(url);
+		return new EventSource(url);
 	}
 
-	return worker_proxy.openWebSocket(url.pathname) as unknown as WebSocket;
+	return new WasmWorkerEventSource(worker_proxy, url) as unknown as EventSource;
 }
diff --git a/js/app/vite.config.ts b/js/app/vite.config.ts
index b60881274664..fed40d27dce7 100644
--- a/js/app/vite.config.ts
+++ b/js/app/vite.config.ts
@@ -47,6 +47,7 @@ export default defineConfig(({ mode }) => {
 		"dev:custom": "../../gradio/templates/frontend"
 	};
 	const production = mode === "production" || mode === "production:lite";
+	const development = mode === "development" || mode === "development:lite";
 	const is_lite = mode.endsWith(":lite");
 
 	return {
@@ -131,7 +132,7 @@ export default defineConfig(({ mode }) => {
 			}
 		},
 		plugins: [
-			resolve_svelte(mode === "development"),
+			resolve_svelte(development && !is_lite),
 
 			svelte({
 				inspector: true,
@@ -150,7 +151,12 @@ export default defineConfig(({ mode }) => {
 					}
 				})
 			}),
-			generate_dev_entry({ enable: mode !== "development" && mode !== "test" }),
+			generate_dev_entry({
+				enable:
+					!development &&
+					!is_lite && // At the moment of https://github.com/gradio-app/gradio/pull/6398, I skipped to make Gradio-lite work custom component. Will do it, and remove this condition.
+					mode !== "test"
+			}),
 			inject_ejs(),
 			generate_cdn_entry({ version: GRADIO_VERSION, cdn_base: CDN_BASE }),
 			handle_ce_css(),
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
index 1652aa599bfa..2db20039d464 100644
--- a/js/audio/interactive/InteractiveAudio.svelte
+++ b/js/audio/interactive/InteractiveAudio.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
-	import { onDestroy, createEventDispatcher } from "svelte";
+	import { getContext, onDestroy, createEventDispatcher } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
-	import { upload, prepare_files, type FileData } from "@gradio/client";
+	import {
+		upload,
+		prepare_files,
+		type FileData,
+		type upload_files
+	} from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Music } from "@gradio/icons";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
@@ -33,6 +38,9 @@
 	export let handle_reset_value: () => void = () => {};
 	export let editable = true;
 
+	// Needed for wasm support
+	const upload_fn = getContext<typeof upload_files>("upload_files");
+
 	$: dispatch("drag", dragging);
 
 	// TODO: make use of this
@@ -87,7 +95,11 @@
 	): Promise<void> => {
 		let _audio_blob = new File(blobs, "audio.wav");
 		const val = await prepare_files([_audio_blob], event === "stream");
-		value = ((await upload(val, root))?.filter(Boolean) as FileData[])[0];
+		value = (
+			(await upload(val, root, undefined, upload_fn))?.filter(
+				Boolean
+			) as FileData[]
+		)[0];
 
 		dispatch(event, value);
 	};
diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
index 4517e85ef0dd..317e0f8ab4d4 100644
--- a/js/audio/player/AudioPlayer.svelte
+++ b/js/audio/player/AudioPlayer.svelte
@@ -57,9 +57,13 @@
 	const create_waveform = (): void => {
 		waveform = WaveSurfer.create({
 			container: container,
-			url: value?.url,
 			...waveform_settings
 		});
+		resolve_wasm_src(value?.url).then((resolved_src) => {
+			if (resolved_src && waveform) {
+				return waveform.load(resolved_src);
+			}
+		});
 	};
 
 	$: if (container !== undefined) {
diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
index e38e8d448fce..247c429ae9d3 100644
--- a/js/audio/static/StaticAudio.svelte
+++ b/js/audio/static/StaticAudio.svelte
@@ -7,6 +7,7 @@
 	import AudioPlayer from "../player/AudioPlayer.svelte";
 	import { createEventDispatcher } from "svelte";
 	import type { FileData } from "@gradio/client";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 	import type { WaveformOptions } from "../shared/types";
 
 	export let value: null | FileData = null;
@@ -39,13 +40,9 @@
 {#if value !== null}
 	<div class="icon-buttons">
 		{#if show_download_button}
-			<a
-				href={value.url}
-				target={window.__is_colab__ ? "_blank" : null}
-				download={value.orig_name || value.path}
-			>
+			<DownloadLink href={value.url} download={value.orig_name || value.path}>
 				<IconButton Icon={Download} label={i18n("common.download")} />
-			</a>
+			</DownloadLink>
 		{/if}
 		{#if show_share_button}
 			<ShareButton
diff --git a/js/code/package.json b/js/code/package.json
index 4819c1faf1dd..b0b9608ec485 100644
--- a/js/code/package.json
+++ b/js/code/package.json
@@ -26,6 +26,7 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
+		"@gradio/wasm": "workspace:^",
 		"@lezer/common": "^1.0.2",
 		"@lezer/highlight": "^1.1.3",
 		"@lezer/markdown": "^1.0.2",
diff --git a/js/code/shared/Download.svelte b/js/code/shared/Download.svelte
index 5f4ee8f8dce0..5639c0a800c0 100644
--- a/js/code/shared/Download.svelte
+++ b/js/code/shared/Download.svelte
@@ -2,6 +2,7 @@
 	import { onDestroy } from "svelte";
 	import { fade } from "svelte/transition";
 	import { Download, Check } from "@gradio/icons";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	export let value: string;
 	export let language: string;
@@ -50,20 +51,21 @@
 	});
 </script>
 
-<a
-	download="file.{ext}"
-	href={download_value}
-	class:copied
-	on:click={copy_feedback}
->
-	<Download />
-	{#if copied}
-		<span class="check" transition:fade><Check /></span>
-	{/if}
-</a>
+<div class="container">
+	<DownloadLink
+		download="file.{ext}"
+		href={download_value}
+		on:click={copy_feedback}
+	>
+		<Download />
+		{#if copied}
+			<span class="check" transition:fade><Check /></span>
+		{/if}
+	</DownloadLink>
+</div>
 
 <style>
-	a {
+	.container {
 		position: relative;
 		cursor: pointer;
 		padding: 5px;
@@ -72,10 +74,6 @@
 		height: 22px;
 	}
 
-	.copied {
-		color: var(--color-green-500);
-	}
-
 	.check {
 		position: absolute;
 		top: 0;
diff --git a/js/file/package.json b/js/file/package.json
index cd0f4eb59233..e8614f331441 100644
--- a/js/file/package.json
+++ b/js/file/package.json
@@ -12,7 +12,8 @@
 		"@gradio/icons": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",
-		"@gradio/utils": "workspace:^"
+		"@gradio/utils": "workspace:^",
+		"@gradio/wasm": "workspace:^"
 	},
 	"main": "./Index.svelte",
 	"main_changeset": true,
diff --git a/js/file/shared/FilePreview.svelte b/js/file/shared/FilePreview.svelte
index 47c7428e0313..f40445f8276c 100644
--- a/js/file/shared/FilePreview.svelte
+++ b/js/file/shared/FilePreview.svelte
@@ -3,6 +3,7 @@
 	import { prettyBytes } from "./utils";
 	import { createEventDispatcher } from "svelte";
 	import type { I18nFormatter, SelectData } from "@gradio/utils";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	const dispatch = createEventDispatcher<{
 		select: SelectData;
@@ -53,15 +54,14 @@
 
 					<td class="download">
 						{#if file.url}
-							<a
+							<DownloadLink
 								href={file.url}
-								target="_blank"
 								download={window.__is_colab__ ? null : file.orig_name}
 							>
 								{@html file.size != null
 									? prettyBytes(file.size)
 									: "(size unknown)"}&nbsp;&#8675;
-							</a>
+							</DownloadLink>
 						{:else}
 							{i18n("file.uploading")}
 						{/if}
@@ -114,17 +114,17 @@
 	.download:hover {
 		text-decoration: underline;
 	}
-	.download > a {
+	.download > :global(a) {
 		color: var(--link-text-color);
 	}
 
-	.download > a:hover {
+	.download > :global(a:hover) {
 		color: var(--link-text-color-hover);
 	}
-	.download > a:visited {
+	.download > :global(a:visited) {
 		color: var(--link-text-color-visited);
 	}
-	.download > a:active {
+	.download > :global(a:active) {
 		color: var(--link-text-color-active);
 	}
 	.selectable {
diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
index 1354ea4aab24..ea1530c9901c 100644
--- a/js/image/shared/Image.svelte
+++ b/js/image/shared/Image.svelte
@@ -5,11 +5,30 @@
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
 	export let src: HTMLImgAttributes["src"] = undefined;
+
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// 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
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
 </script>
 
-{#await resolve_wasm_src(src) then resolved_src}
-	<!-- svelte-ignore a11y-missing-attribute -->
-	<img src={resolved_src} {...$$restProps} />
-{:catch error}
-	<p style="color: red;">{error.message}</p>
-{/await}
+<!-- svelte-ignore a11y-missing-attribute -->
+<img src={resolved_src} {...$$restProps} />
diff --git a/js/image/shared/ImagePreview.svelte b/js/image/shared/ImagePreview.svelte
index cdaa47c80276..fd103504d810 100644
--- a/js/image/shared/ImagePreview.svelte
+++ b/js/image/shared/ImagePreview.svelte
@@ -5,8 +5,10 @@
 	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
+	import Image from "./Image.svelte";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
-	import { Image } from "@gradio/icons";
+	import { Image as ImageIcon } from "@gradio/icons";
 	import { type FileData, normalise_file } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
 
@@ -31,19 +33,19 @@
 	};
 </script>
 
-<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
 {#if value === null || !value.url}
-	<Empty unpadded_box={true} size="large"><Image /></Empty>
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="icon-buttons">
 		{#if show_download_button}
-			<a
-				href={value.url}
-				target={window.__is_colab__ ? "_blank" : null}
-				download={value.orig_name || "image"}
-			>
+			<DownloadLink href={value.url} download={value.orig_name || "image"}>
 				<IconButton Icon={Download} label={i18n("common.download")} />
-			</a>
+			</DownloadLink>
 		{/if}
 		{#if show_share_button}
 			<ShareButton
@@ -60,12 +62,14 @@
 		{/if}
 	</div>
 	<button on:click={handle_click}>
-		<img src={value.url} alt="" class:selectable loading="lazy" />
+		<div class:selectable class="image-container">
+			<Image src={value.url} alt="" loading="lazy" />
+		</div>
 	</button>
 {/if}
 
 <style>
-	img,
+	.image-container :global(img),
 	button {
 		width: var(--size-full);
 		height: var(--size-full);
diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
index b024119eebfe..1eabfe1ad1dc 100644
--- a/js/image/shared/ImageUploader.svelte
+++ b/js/image/shared/ImageUploader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, tick } from "svelte";
 	import { BlockLabel } from "@gradio/atoms";
-	import { Image } from "@gradio/icons";
+	import { Image as ImageIcon } from "@gradio/icons";
 	import type { SelectData, I18nFormatter } from "@gradio/utils";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import {
@@ -15,6 +15,7 @@
 	import { Upload } from "@gradio/upload";
 	import { type FileData, normalise_file } from "@gradio/client";
 	import ClearImage from "./ClearImage.svelte";
+	import Image from "./Image.svelte";
 
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
@@ -140,7 +141,7 @@
 	}
 </script>
 
-<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
 
 <div data-testid="image" class="image-container">
 	{#if value?.url}
@@ -182,13 +183,10 @@
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->
-			<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-			<img
-				src={value.url}
-				alt={value.alt_text}
-				on:click={handle_click}
-				class:selectable
-			/>
+			<!-- svelte-ignore a11y-no-static-element-interactions-->
+			<div class:selectable class="image-frame" on:click={handle_click}>
+				<Image src={value.url} alt={value.alt_text} />
+			</div>
 		{/if}
 	</div>
 	{#if sources.length > 1 || sources.includes("clipboard")}
@@ -207,10 +205,7 @@
 </div>
 
 <style>
-	/* .image-container {
-		height: auto;
-	} */
-	img {
+	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
 	}
diff --git a/js/video/shared/Video.svelte b/js/video/shared/Video.svelte
index 996b03c83051..1d438c962c7d 100644
--- a/js/video/shared/Video.svelte
+++ b/js/video/shared/Video.svelte
@@ -22,50 +22,69 @@
 	export let processingVideo = false;
 
 	const dispatch = createEventDispatcher();
+
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// 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
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
 </script>
 
-{#await resolve_wasm_src(src) then resolved_src}
-	<!--
-	The spread operator with `$$props` or `$$restProps` can't be used here
-	to pass props from the parent component to the <video> element
-	because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
-	For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
-	Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
+<!--
+The spread operator with `$$props` or `$$restProps` can't be used here
+to pass props from the parent component to the <video> element
+because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
+For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
+Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
 -->
-	<div class:hidden={!processingVideo} class="overlay">
-		<span class="load-wrap">
-			<span class="loader" />
-		</span>
-	</div>
-	<video
-		src={resolved_src}
-		{muted}
-		{playsinline}
-		{preload}
-		{autoplay}
-		{controls}
-		on:loadeddata={dispatch.bind(null, "loadeddata")}
-		on:click={dispatch.bind(null, "click")}
-		on:play={dispatch.bind(null, "play")}
-		on:pause={dispatch.bind(null, "pause")}
-		on:ended={dispatch.bind(null, "ended")}
-		on:mouseover={dispatch.bind(null, "mouseover")}
-		on:mouseout={dispatch.bind(null, "mouseout")}
-		on:focus={dispatch.bind(null, "focus")}
-		on:blur={dispatch.bind(null, "blur")}
-		bind:currentTime
-		bind:duration
-		bind:paused
-		bind:this={node}
-		use:loaded={{ autoplay: autoplay ?? false }}
-		data-testid={$$props["data-testid"]}
-		crossorigin="anonymous"
-	>
-		<slot />
-	</video>
-{:catch error}
-	<p style="color: red;">{error.message}</p>
-{/await}
+<div class:hidden={!processingVideo} class="overlay">
+	<span class="load-wrap">
+		<span class="loader" />
+	</span>
+</div>
+<video
+	src={resolved_src}
+	{muted}
+	{playsinline}
+	{preload}
+	{autoplay}
+	{controls}
+	on:loadeddata={dispatch.bind(null, "loadeddata")}
+	on:click={dispatch.bind(null, "click")}
+	on:play={dispatch.bind(null, "play")}
+	on:pause={dispatch.bind(null, "pause")}
+	on:ended={dispatch.bind(null, "ended")}
+	on:mouseover={dispatch.bind(null, "mouseover")}
+	on:mouseout={dispatch.bind(null, "mouseout")}
+	on:focus={dispatch.bind(null, "focus")}
+	on:blur={dispatch.bind(null, "blur")}
+	bind:currentTime
+	bind:duration
+	bind:paused
+	bind:this={node}
+	use:loaded={{ autoplay: autoplay ?? false }}
+	data-testid={$$props["data-testid"]}
+	crossorigin="anonymous"
+>
+	<slot />
+</video>
 
 <style>
 	.overlay {
diff --git a/js/video/shared/VideoPreview.svelte b/js/video/shared/VideoPreview.svelte
index 8a05452ad186..ae1f2d04506b 100644
--- a/js/video/shared/VideoPreview.svelte
+++ b/js/video/shared/VideoPreview.svelte
@@ -4,6 +4,7 @@
 	import type { FileData } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
@@ -67,13 +68,9 @@
 	{/key}
 	<div class="icon-buttons" data-testid="download-div">
 		{#if show_download_button}
-			<a
-				href={value.url}
-				target={window.__is_colab__ ? "_blank" : null}
-				download={value.orig_name || value.path}
-			>
+			<DownloadLink href={value.url} download={value.orig_name || value.path}>
 				<IconButton Icon={Download} label="Download" />
-			</a>
+			</DownloadLink>
 		{/if}
 		{#if show_share_button}
 			<ShareButton
diff --git a/js/wasm/src/asgi-types.ts b/js/wasm/src/asgi-types.ts
new file mode 100644
index 000000000000..3a50c61578af
--- /dev/null
+++ b/js/wasm/src/asgi-types.ts
@@ -0,0 +1,37 @@
+import type { PyProxy } from "pyodide/ffi";
+
+// A reference to an ASGI application instance in Python
+// Ref: https://asgi.readthedocs.io/en/latest/specs/main.html#applications
+export type ASGIScope = Record<string, unknown>;
+export type ASGIApplication = (
+	scope: ASGIScope,
+	receive: () => Promise<ReceiveEvent>,
+	send: (event: PyProxy) => Promise<void> // `event` is a `SendEvent` dict in Python and passed as a `PyProxy` in JS via Pyodide's type conversion (https://pyodide.org/en/stable/usage/type-conversions.html#type-translations-pyproxy-to-js).
+) => Promise<void>;
+
+export type ReceiveEvent = RequestReceiveEvent | DisconnectReceiveEvent;
+// https://asgi.readthedocs.io/en/latest/specs/www.html#request-receive-event
+export interface RequestReceiveEvent {
+	type: "http.request";
+	body?: Uint8Array; // `bytes` in Python
+	more_body?: boolean;
+}
+// https://asgi.readthedocs.io/en/latest/specs/www.html#disconnect-receive-event
+export interface DisconnectReceiveEvent {
+	type: "http.disconnect";
+}
+
+export type SendEvent = ResponseStartSendEvent | ResponseBodySendEvent;
+// https://asgi.readthedocs.io/en/latest/specs/www.html#response-start-send-event
+export interface ResponseStartSendEvent {
+	type: "http.response.start";
+	status: number;
+	headers: Iterable<[Uint8Array, Uint8Array]>;
+	trailers: boolean;
+}
+// https://asgi.readthedocs.io/en/latest/specs/www.html#response-body-send-event
+export interface ResponseBodySendEvent {
+	type: "http.response.body";
+	body: Uint8Array; // `bytes` in Python
+	more_body: boolean;
+}
diff --git a/js/wasm/src/http.ts b/js/wasm/src/http.ts
new file mode 100644
index 000000000000..41db052c7576
--- /dev/null
+++ b/js/wasm/src/http.ts
@@ -0,0 +1,77 @@
+export interface HttpRequest {
+	method: "GET" | "POST" | "PUT" | "DELETE";
+	path: string;
+	query_string: string;
+	headers: Record<string, string>;
+	body?: Uint8Array;
+}
+export interface HttpResponse {
+	status: number;
+	headers: Record<string, string>;
+	body: Uint8Array;
+}
+
+// Inspired by https://github.com/rstudio/shinylive/blob/v0.1.2/src/messageporthttp.ts
+export function headersToASGI(
+	headers: HttpRequest["headers"]
+): [string, string][] {
+	const result: [string, string][] = [];
+	for (const [key, value] of Object.entries(headers)) {
+		result.push([key, value]);
+	}
+	return result;
+}
+
+export function uint8ArrayToString(buf: Uint8Array): string {
+	let result = "";
+	for (let i = 0; i < buf.length; i++) {
+		result += String.fromCharCode(buf[i]);
+	}
+	return result;
+}
+
+export function asgiHeadersToRecord(headers: any): Record<string, string> {
+	headers = headers.map(([key, val]: [Uint8Array, Uint8Array]) => {
+		return [uint8ArrayToString(key), uint8ArrayToString(val)];
+	});
+	return Object.fromEntries(headers);
+}
+
+export function getHeaderValue(
+	headers: HttpRequest["headers"],
+	key: string
+): string | undefined {
+	// The keys in `headers` are case-insensitive.
+	const unifiedKey = key.toLowerCase();
+	for (const [k, v] of Object.entries(headers)) {
+		if (k.toLowerCase() === unifiedKey) {
+			return v;
+		}
+	}
+}
+
+export function logHttpReqRes(
+	request: HttpRequest,
+	response: HttpResponse
+): void {
+	if (Math.floor(response.status / 100) !== 2) {
+		let bodyText: string;
+		let bodyJson: unknown;
+		try {
+			bodyText = new TextDecoder().decode(response.body);
+		} catch (e) {
+			bodyText = "(failed to decode body)";
+		}
+		try {
+			bodyJson = JSON.parse(bodyText);
+		} catch (e) {
+			bodyJson = "(failed to parse body as JSON)";
+		}
+		console.error("Wasm HTTP error", {
+			request,
+			response,
+			bodyText,
+			bodyJson
+		});
+	}
+}
diff --git a/js/wasm/src/index.ts b/js/wasm/src/index.ts
index 201102d49e08..d2d24ffcd50d 100644
--- a/js/wasm/src/index.ts
+++ b/js/wasm/src/index.ts
@@ -1 +1,2 @@
 export { WorkerProxy, type WorkerProxyOptions } from "./worker-proxy";
+export { WasmWorkerEventSource } from "./sse";
diff --git a/js/wasm/src/message-types.ts b/js/wasm/src/message-types.ts
index aa2f7f2b1cb4..8649c9eaf431 100644
--- a/js/wasm/src/message-types.ts
+++ b/js/wasm/src/message-types.ts
@@ -1,15 +1,5 @@
-export interface HttpRequest {
-	method: "GET" | "POST" | "PUT" | "DELETE";
-	path: string;
-	query_string: string;
-	headers: Record<string, string>;
-	body?: Uint8Array;
-}
-export interface HttpResponse {
-	status: number;
-	headers: Record<string, string>;
-	body: Uint8Array;
-}
+import type { ASGIScope } from "./asgi-types";
+
 export interface EmscriptenFile {
 	data: string | ArrayBufferView;
 	opts?: Record<string, string>;
@@ -50,16 +40,10 @@ export interface InMessageRunPythonFile extends InMessageBase {
 		path: string;
 	};
 }
-export interface InMessageHttpRequest extends InMessageBase {
-	type: "http-request";
-	data: {
-		request: HttpRequest;
-	};
-}
-export interface InMessageWebSocket extends InMessageBase {
-	type: "websocket";
+export interface InMessageAsgiRequest extends InMessageBase {
+	type: "asgi-request";
 	data: {
-		path: string;
+		scope: ASGIScope;
 	};
 }
 export interface InMessageFileWrite extends InMessageBase {
@@ -101,8 +85,7 @@ export type InMessage =
 	| InMessageInitApp
 	| InMessageRunPythonCode
 	| InMessageRunPythonFile
-	| InMessageWebSocket
-	| InMessageHttpRequest
+	| InMessageAsgiRequest
 	| InMessageFileWrite
 	| InMessageFileRename
 	| InMessageFileUnlink
diff --git a/js/wasm/src/messageportwebsocket.ts b/js/wasm/src/messageportwebsocket.ts
deleted file mode 100644
index 17b11a7e222b..000000000000
--- a/js/wasm/src/messageportwebsocket.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-// Copied from https://github.com/rstudio/shinylive/blob/v0.1.4/src/messageportwebsocket.ts
-// and modified.
-/*
-MIT License
-
-Copyright (c) 2022 RStudio, PBC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-/**
- * This class provides a standard WebSocket API, but is implemented using a
- * MessagePort. It can represent the server or client side of a WebSocket
- * connection. If server, then ws.accept() should be called after creation
- * in order to initialize the connection.
- */
-export class MessagePortWebSocket extends EventTarget {
-	readyState: number;
-	_port: MessagePort;
-	onopen: ((this: MessagePortWebSocket, ev: Event) => any) | undefined;
-	onmessage:
-		| ((this: MessagePortWebSocket, ev: MessageEvent) => any)
-		| undefined;
-	onerror: ((this: MessagePortWebSocket, ev: Event) => any) | undefined;
-	onclose: ((this: MessagePortWebSocket, ev: CloseEvent) => any) | undefined;
-
-	constructor(port: MessagePort) {
-		super();
-
-		this.readyState = 0;
-
-		this.addEventListener("open", (e) => {
-			if (this.onopen) {
-				this.onopen(e);
-			}
-		});
-		this.addEventListener("message", (e) => {
-			if (this.onmessage) {
-				this.onmessage(e as MessageEvent);
-			}
-		});
-		this.addEventListener("error", (e) => {
-			if (this.onerror) {
-				this.onerror(e);
-			}
-		});
-		this.addEventListener("close", (e) => {
-			if (this.onclose) {
-				this.onclose(e as CloseEvent);
-			}
-		});
-
-		this._port = port;
-		port.addEventListener("message", this._onMessage.bind(this));
-		port.start();
-	}
-
-	// Call on the server side of the connection, to tell the client that
-	// the connection has been established.
-	public accept(): void {
-		if (this.readyState !== 0) {
-			return;
-		}
-
-		this.readyState = 1;
-		this._port.postMessage({ type: "open" });
-	}
-
-	public send(data: unknown): void {
-		if (this.readyState === 0) {
-			throw new DOMException(
-				"Can't send messages while WebSocket is in CONNECTING state",
-				"InvalidStateError"
-			);
-		}
-		if (this.readyState > 1) {
-			return;
-		}
-
-		this._port.postMessage({ type: "message", value: { data } });
-	}
-
-	public close(code?: number, reason?: string): void {
-		if (this.readyState > 1) {
-			return;
-		}
-
-		this.readyState = 2;
-		this._port.postMessage({ type: "close", value: { code, reason } });
-		this.readyState = 3;
-		this.dispatchEvent(
-			new CloseEvent("close", { code, reason, wasClean: true })
-		);
-	}
-
-	private _onMessage(e: MessageEvent): void {
-		const event = e.data;
-		console.debug("MessagePortWebSocket received event:", event);
-		switch (event.type) {
-			case "open":
-				if (this.readyState === 0) {
-					this.readyState = 1;
-					this.dispatchEvent(new Event("open"));
-					return;
-				}
-				break;
-			case "message":
-				if (this.readyState === 1) {
-					this.dispatchEvent(new MessageEvent("message", { ...event.value }));
-					return;
-				}
-				break;
-			case "close":
-				if (this.readyState < 3) {
-					this.readyState = 3;
-					this.dispatchEvent(
-						new CloseEvent("close", { ...event.value, wasClean: true })
-					);
-					return;
-				}
-				break;
-		}
-		// If we got here, we didn't know how to handle this event
-		this._reportError(
-			`Unexpected event '${event.type}' while in readyState ${this.readyState}`,
-			1002
-		);
-	}
-
-	private _reportError(message: string, code?: number): void {
-		this.dispatchEvent(new ErrorEvent("error", { message }));
-		if (typeof code === "number") {
-			this.close(code, message);
-		}
-	}
-}
diff --git a/js/wasm/src/sse.ts b/js/wasm/src/sse.ts
new file mode 100644
index 000000000000..b71d46fedec7
--- /dev/null
+++ b/js/wasm/src/sse.ts
@@ -0,0 +1,212 @@
+import { asgiHeadersToRecord, getHeaderValue } from "./http";
+import type { ASGIScope, ReceiveEvent, SendEvent } from "./asgi-types";
+import type { WorkerProxy } from "./worker-proxy";
+
+export class WasmWorkerEventSource extends EventTarget {
+	/**
+	 * 0 — connecting
+	 * 1 — open
+	 * 2 — closed
+	 * https://developer.mozilla.org/en-US/docs/Web/API/EventSource/readyState
+	 */
+	public readyState: number;
+
+	private port: MessagePort;
+	private url: URL;
+
+	// This class partially implements the EventSource interface (https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface).
+	// Reconnection is not implemented, so this class doesn't maitain a reconnection time and a  last event ID string and the stream interpreter ignores the field related to these, e.g. "id" and "retry".
+
+	onopen: ((this: WasmWorkerEventSource, ev: Event) => any) | undefined;
+	onmessage:
+		| ((this: WasmWorkerEventSource, ev: MessageEvent) => any)
+		| undefined;
+	onerror: ((this: WasmWorkerEventSource, ev: Event) => any) | undefined;
+
+	constructor(workerProxy: WorkerProxy, url: URL) {
+		super();
+		this.url = url;
+		this.readyState = 0;
+
+		this.addEventListener("open", (e) => {
+			if (this.onopen) {
+				this.onopen(e);
+			}
+		});
+		this.addEventListener("message", (e) => {
+			if (this.onmessage) {
+				this.onmessage(e as MessageEvent);
+			}
+		});
+		this.addEventListener("error", (e) => {
+			if (this.onerror) {
+				this.onerror(e);
+			}
+		});
+
+		// https://asgi.readthedocs.io/en/latest/specs/www.html#http-connection-scope
+		const asgiScope: ASGIScope = {
+			type: "http",
+			asgi: {
+				version: "3.0",
+				spec_version: "2.1"
+			},
+			http_version: "1.1",
+			scheme: "http",
+			method: "GET",
+			path: url.pathname,
+			query_string: url.searchParams.toString(),
+			root_path: "",
+			headers: [["accept", "text/event-stream"]]
+		};
+
+		this.port = workerProxy.requestAsgi(asgiScope);
+		this.port.addEventListener("message", this._handleAsgiSendEvent.bind(this));
+		this.port.start();
+		this.port.postMessage({
+			type: "http.request"
+		} satisfies ReceiveEvent);
+	}
+
+	public close(): void {
+		if (this.readyState === 2) {
+			return;
+		}
+
+		this.port.postMessage({
+			type: "http.disconnect"
+		} satisfies ReceiveEvent);
+		this.port.close();
+		this.readyState = 2;
+	}
+
+	private _handleAsgiSendEvent(e: MessageEvent<SendEvent>): void {
+		const asgiSendEvent: SendEvent = e.data;
+
+		if (asgiSendEvent.type === "http.response.start") {
+			const status = asgiSendEvent.status;
+			const headers = asgiHeadersToRecord(asgiSendEvent.headers);
+			console.debug("[MessagePortEventSource] HTTP response start", {
+				status,
+				headers
+			});
+			const contentType = getHeaderValue(headers, "content-type");
+			if (
+				status !== 200 ||
+				contentType == null ||
+				contentType.split(";")[0] !== "text/event-stream"
+			) {
+				// Fail the connection (https://html.spec.whatwg.org/multipage/server-sent-events.html#fail-the-connection)
+				// Queue a task which, if the readyState attribute is set to a value other than CLOSED, sets the readyState attribute to CLOSED and fires an event named error at the EventSource object. Once the user agent has failed the connection, it does not attempt to reconnect.
+				this.readyState = 2;
+				this.dispatchEvent(new Event("error"));
+				return;
+			}
+
+			// Announce the connection (https://html.spec.whatwg.org/multipage/server-sent-events.html#announce-the-connection)
+			// Queue a task which, if the readyState attribute is set to a value other than CLOSED, sets the readyState attribute to OPEN and fires an event named open at the EventSource object.
+			this.readyState = 1;
+			this.dispatchEvent(new Event("open"));
+		} else if (asgiSendEvent.type === "http.response.body") {
+			const body = new TextDecoder().decode(asgiSendEvent.body);
+			console.debug("[MessagePortEventSource] HTTP response body", body);
+			this.interpretEventStream(body);
+
+			if (!asgiSendEvent.more_body) {
+				this.close();
+			}
+		}
+	}
+
+	private interpretEventStream(streamContent: string): void {
+		// This method implements the steps described in the following section of the spec:
+		// "9.2.6 Interpreting an event stream" (https://html.spec.whatwg.org/multipage/server-sent-events.html#event-stream-interpretation)
+		const self = this;
+
+		// The stream must then be parsed by reading everything line by line, with a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair, a single U+000A LINE FEED (LF) character not preceded by a U+000D CARRIAGE RETURN (CR) character, and a single U+000D CARRIAGE RETURN (CR) character not followed by a U+000A LINE FEED (LF) character being the ways in which a line can end.
+		const lines = streamContent.split(/\r\n|\n|\r/);
+		let data = "";
+		let eventType = "";
+		let lastEventId = "";
+
+		for (const line of lines) {
+			if (line === "") {
+				// If the line is empty (a blank line)
+				// Dispatch the event, as defined below.
+				dispatchEvent();
+			} else if (line.startsWith(":")) {
+				// If the line starts with a U+003A COLON character (:)
+				// Ignore the line.
+			} else if (line.includes(":")) {
+				// If the line contains a U+003A COLON character (:)
+				// Collect the characters on the line before the first U+003A COLON character (:), and let field be that string.
+				// Collect the characters on the line after the first U+003A COLON character (:), and let value be that string. If value starts with a U+0020 SPACE character, remove it from value.
+				// Process the field using the steps described below, using field as the field name and value as the field value.
+				const [field, ...rest] = line.split(":");
+				const value = rest.join(":").trimStart();
+				processField(field, value);
+			} else {
+				// Otherwise, the string is not empty but does not contain a U+003A COLON character (:)
+				// Process the field using the steps described below, using the whole line as the field name, and the empty string as the field value.
+				const field = line;
+				const value = "";
+				processField(field, value);
+			}
+		}
+		// Once the end of the file is reached, any pending data must be discarded. (If the file ends in the middle of an event, before the final empty line, the incomplete event is not dispatched.)
+
+		function processField(name: string, value: string): void {
+			// The steps to process the field given a field name and a field value depend on the field name, as given in the following list. Field names must be compared literally, with no case folding performed.
+			if (name === "event") {
+				// Set the event type buffer to field value.
+				eventType = value;
+			} else if (name === "data") {
+				// Append the field value to the data buffer, then append a single U+000A LINE FEED (LF) character to the data buffer.
+				data += value + "\n";
+			} else if (name === "id") {
+				// If the field value does not contain U+0000 NULL, then set the last event ID buffer to the field value. Otherwise, ignore the field.
+				if (!value.includes("\0")) {
+					lastEventId = value;
+				}
+			} else if (name === "retry") {
+				// If the field value consists of only ASCII digits, then interpret the field value as an integer in base ten, and set the event stream's reconnection time to that integer. Otherwise, ignore the field.
+				// XXX: This partial implementation of EventSource doesn't support reconnection, so the reconnection time is not set.
+			} else {
+				// The field is ignored.
+			}
+		}
+
+		function dispatchEvent(): void {
+			// When the user agent is required to dispatch the event, the user agent must process the data buffer, the event type buffer, and the last event ID buffer using steps appropriate for the user agent.
+			// For web browsers, the appropriate steps to dispatch the event are as follows:
+			// 1. Set the last event ID string of the event source to the value of the last event ID buffer. The buffer does not get reset, so the last event ID string of the event source remains set to this value until the next time it is set by the server.
+			// XXX: This partial implementation of EventSource doesn't support reconnection, so the last event ID string of the event source is not set.
+			// 2. If the data buffer is an empty string, set the data buffer and the event type buffer to the empty string and return.
+			if (data === "") {
+				data = "";
+				eventType = "";
+				return;
+			}
+			// 3. If the data buffer's last character is a U+000A LINE FEED (LF) character, then remove the last character from the data buffer.
+			if (data.endsWith("\n")) {
+				data = data.slice(0, -1);
+			}
+			// 4. Let event be the result of creating an event using MessageEvent, in the relevant realm of the EventSource object.
+			// 5. Initialize event's type attribute to "message", its data attribute to data, its origin attribute to the serialization of the origin of the event stream's final URL (i.e., the URL after redirects), and its lastEventId attribute to the last event ID string of the event source.
+			// 6. If the event type buffer has a value other than the empty string, change the type of the newly created event to equal the value of the event type buffer.
+			const event = new MessageEvent(eventType === "" ? "message" : eventType, {
+				data,
+				lastEventId,
+				origin: self.url.origin
+			});
+			// 7. Set the data buffer and the event type buffer to the empty string.
+			data = "";
+			eventType = "";
+			// 8. Queue a task which, if the readyState attribute is set to a value other than CLOSED, dispatches the newly created event at the EventSource object.
+			if (self.readyState !== 2) {
+				console.debug("[MessagePortEventSource] dispatching event", event);
+				self.dispatchEvent(event);
+			}
+		}
+	}
+}
diff --git a/js/wasm/src/webworker/asgi.ts b/js/wasm/src/webworker/asgi.ts
new file mode 100644
index 000000000000..51a2cf22e69d
--- /dev/null
+++ b/js/wasm/src/webworker/asgi.ts
@@ -0,0 +1,35 @@
+import type { PyProxy } from "pyodide/ffi";
+import { AwaitableQueue } from "./awaitable-queue";
+import type {
+	ASGIApplication,
+	ASGIScope,
+	ReceiveEvent,
+	SendEvent
+} from "../asgi-types";
+
+// Connect the `messagePort` to the `asgiApp` so that
+// the `asgiApp` can receive ASGI events (`ReceiveEvent`) from the `messagePort`
+// and send ASGI events (`SendEvent`) to the `messagePort`.
+export function makeAsgiRequest(
+	asgiApp: ASGIApplication,
+	scope: ASGIScope,
+	messagePort: MessagePort
+): Promise<void> {
+	const receiveEventQueue = new AwaitableQueue<ReceiveEvent>();
+
+	messagePort.addEventListener("message", (event) => {
+		receiveEventQueue.enqueue(event.data);
+	});
+	messagePort.start();
+
+	// Set up the ASGI application, passing it the `scope` and the `receive` and `send` functions.
+	// Ref: https://asgi.readthedocs.io/en/latest/specs/main.html#applications
+	async function receiveFromJs(): Promise<ReceiveEvent> {
+		return await receiveEventQueue.dequeue();
+	}
+	async function sendToJs(proxiedEvent: PyProxy): Promise<void> {
+		const event = Object.fromEntries(proxiedEvent.toJs()) as SendEvent;
+		messagePort.postMessage(event);
+	}
+	return asgiApp(scope, receiveFromJs, sendToJs);
+}
diff --git a/js/wasm/src/webworker/http.ts b/js/wasm/src/webworker/http.ts
deleted file mode 100644
index 2cd19bb3745c..000000000000
--- a/js/wasm/src/webworker/http.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import type { PyProxy } from "pyodide/ffi";
-import type { HttpRequest, HttpResponse } from "../message-types";
-
-// Inspired by https://github.com/rstudio/shinylive/blob/v0.1.2/src/messageporthttp.ts
-
-// A reference to an ASGI application instance in Python
-// Ref: https://asgi.readthedocs.io/en/latest/specs/main.html#applications
-type ASGIApplication = (
-	scope: Record<string, unknown>,
-	receive: () => Promise<ReceiveEvent>,
-	send: (event: PyProxy) => Promise<void>
-) => Promise<void>;
-
-type ReceiveEvent = RequestReceiveEvent | DisconnectReceiveEvent;
-// https://asgi.readthedocs.io/en/latest/specs/www.html#request-receive-event
-interface RequestReceiveEvent {
-	type: "http.request";
-	body?: Uint8Array; // `bytes` in Python
-	more_body: boolean;
-}
-// https://asgi.readthedocs.io/en/latest/specs/www.html#disconnect-receive-event
-interface DisconnectReceiveEvent {
-	type: "http.disconnect";
-}
-
-type SendEvent = ResponseStartSendEvent | ResponseBodySendEvent;
-// https://asgi.readthedocs.io/en/latest/specs/www.html#response-start-send-event
-interface ResponseStartSendEvent {
-	type: "http.response.start";
-	status: number;
-	headers: Iterable<[Uint8Array, Uint8Array]>;
-	trailers: boolean;
-}
-// https://asgi.readthedocs.io/en/latest/specs/www.html#response-body-send-event
-interface ResponseBodySendEvent {
-	type: "http.response.body";
-	body: Uint8Array; // `bytes` in Python
-	more_body: boolean;
-}
-
-function headersToASGI(headers: HttpRequest["headers"]): [string, string][] {
-	const result: [string, string][] = [];
-	for (const [key, value] of Object.entries(headers)) {
-		result.push([key, value]);
-	}
-	return result;
-}
-
-export function uint8ArrayToString(buf: Uint8Array): string {
-	let result = "";
-	for (let i = 0; i < buf.length; i++) {
-		result += String.fromCharCode(buf[i]);
-	}
-	return result;
-}
-
-function asgiHeadersToRecord(headers: any): Record<string, string> {
-	headers = headers.map(([key, val]: [Uint8Array, Uint8Array]) => {
-		return [uint8ArrayToString(key), uint8ArrayToString(val)];
-	});
-	return Object.fromEntries(headers);
-}
-
-export const makeHttpRequest = (
-	asgiApp: ASGIApplication,
-	request: HttpRequest
-): Promise<HttpResponse> =>
-	new Promise((resolve, reject) => {
-		let sent = false;
-		async function receiveFromJs(): Promise<ReceiveEvent> {
-			if (sent) {
-				// NOTE: I implemented this block just referring to the spec. However, it is not reached in practice so it's not combat-proven.
-				return {
-					type: "http.disconnect"
-				};
-			}
-
-			const event: RequestReceiveEvent = {
-				type: "http.request",
-				more_body: false
-			};
-			if (request.body) {
-				event.body = request.body;
-			}
-
-			console.debug("receive", event);
-			sent = true;
-			return event;
-		}
-
-		let status: number;
-		let headers: { [key: string]: string };
-		let body: Uint8Array = new Uint8Array();
-		async function sendToJs(proxiedEvent: PyProxy): Promise<void> {
-			const event = Object.fromEntries(proxiedEvent.toJs()) as SendEvent;
-			console.debug("send", event);
-			if (event.type === "http.response.start") {
-				status = event.status;
-				headers = asgiHeadersToRecord(event.headers);
-			} else if (event.type === "http.response.body") {
-				body = new Uint8Array([...body, ...event.body]);
-				if (!event.more_body) {
-					const response: HttpResponse = {
-						status,
-						headers,
-						body
-					};
-					console.debug("HTTP response", response);
-					resolve(response);
-				}
-			} else {
-				throw new Error(`Unhandled ASGI event: ${JSON.stringify(event)}`);
-			}
-		}
-
-		// https://asgi.readthedocs.io/en/latest/specs/www.html#http-connection-scope
-		const scope = {
-			type: "http",
-			asgi: {
-				version: "3.0",
-				spec_version: "2.1"
-			},
-			http_version: "1.1",
-			scheme: "http",
-			method: request.method,
-			path: request.path,
-			query_string: request.query_string,
-			root_path: "",
-			headers: headersToASGI(request.headers)
-		};
-
-		asgiApp(scope, receiveFromJs, sendToJs).catch(reject);
-	});
diff --git a/js/wasm/src/webworker/index.ts b/js/wasm/src/webworker/index.ts
index 0eb82a02cd6f..f2df39a6eced 100644
--- a/js/wasm/src/webworker/index.ts
+++ b/js/wasm/src/webworker/index.ts
@@ -18,8 +18,7 @@ import {
 	resolveAppHomeBasedPath
 } from "./file";
 import { verifyRequirements } from "./requirements";
-import { makeHttpRequest } from "./http";
-import { initWebSocket } from "./websocket";
+import { makeAsgiRequest } from "./asgi";
 import { generateRandomString } from "./random";
 import scriptRunnerPySource from "./py/script_runner.py?raw";
 import unloadModulesPySource from "./py/unload_modules.py?raw";
@@ -80,9 +79,12 @@ async function initializeEnvironment(
 	await micropip.install(["typing-extensions>=4.8.0"]); // Typing extensions needs to be installed first otherwise the versions from the pyodide lockfile is used which is incompatible with the latest fastapi.
 	await micropip.install(["markdown-it-py[linkify]~=2.2.0"]); // On 3rd June 2023, markdown-it-py 3.0.0 has been released. The `gradio` package depends on its `>=2.0.0` version so its 3.x will be resolved. However, it conflicts with `mdit-py-plugins`'s dependency `markdown-it-py >=1.0.0,<3.0.0` and micropip currently can't resolve it. So we explicitly install the compatible version of the library here.
 	await micropip.install(["anyio==3.*"]); // `fastapi` depends on `anyio>=3.4.0,<5` so its 4.* can be installed, but it conflicts with the anyio version `httpx` depends on, `==3.*`. Seems like micropip can't resolve it for now, so we explicitly install the compatible version of the library here.
+	await micropip.add_mock_package("pydantic", "2.4.2"); // PydanticV2 is not supported on Pyodide yet. Mock it here for installing the `gradio` package to pass the version check. Then, install PydanticV1 below.
 	await micropip.install.callKwargs(gradioWheelUrls, {
 		keep_going: true
 	});
+	await micropip.remove_mock_package("pydantic");
+	await micropip.install(["pydantic==1.*"]); // Pydantic is necessary for `gradio` to run, so install v1 here as a fallback. Some tricks has been introduced in `gradio/data_classes.py` to make it work with v1.
 	console.debug("Gradio wheels are loaded.");
 
 	console.debug("Mocking os module methods.");
@@ -350,30 +352,13 @@ function setupMessageHandler(receiver: MessageTransceiver): void {
 					messagePort.postMessage(replyMessage);
 					break;
 				}
-				case "http-request": {
-					const request = msg.data.request;
-					const response = await makeHttpRequest(
+				case "asgi-request": {
+					console.debug("ASGI request", msg.data);
+					makeAsgiRequest(
 						call_asgi_app_from_js.bind(null, appId),
-						request
-					);
-					const replyMessage: ReplyMessageSuccess = {
-						type: "reply:success",
-						data: {
-							response
-						}
-					};
-					messagePort.postMessage(replyMessage);
-					break;
-				}
-				case "websocket": {
-					const { path } = msg.data;
-
-					console.debug("Initialize a WebSocket connection: ", { path });
-					initWebSocket(
-						call_asgi_app_from_js.bind(null, appId),
-						path,
+						msg.data.scope,
 						messagePort
-					); // This promise is not awaited because it won't resolves until the WebSocket connection is closed.
+					); // This promise is not awaited because it won't resolves until the HTTP connection is closed.
 					break;
 				}
 				case "file:write": {
diff --git a/js/wasm/src/webworker/websocket.ts b/js/wasm/src/webworker/websocket.ts
deleted file mode 100644
index 524b66c62557..000000000000
--- a/js/wasm/src/webworker/websocket.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import type { PyProxy } from "pyodide/ffi";
-import { AwaitableQueue } from "./awaitable-queue";
-import { MessagePortWebSocket } from "../messageportwebsocket";
-
-// A reference to an ASGI application instance in Python
-// Ref: https://asgi.readthedocs.io/en/latest/specs/main.html#applications
-type ASGIApplication = (
-	scope: Record<string, unknown>,
-	receive: () => Promise<ReceiveEvent>,
-	send: (event: PyProxy) => Promise<void>
-) => Promise<void>;
-
-// https://asgi.readthedocs.io/en/latest/specs/www.html#connect-receive-event
-interface ConnectReceiveEvent {
-	type: "websocket.connect";
-}
-
-// https://asgi.readthedocs.io/en/latest/specs/www.html#accept-send-event
-interface AcceptSendEvent {
-	type: "websocket.accept";
-	subprotofcol?: string;
-	headers?: Iterable<[Uint8Array, Uint8Array]>;
-}
-
-// https://asgi.readthedocs.io/en/latest/specs/www.html#receive-receive-event
-interface ReceiveReceiveEvent {
-	type: "websocket.receive";
-	bytes?: Uint8Array;
-	text?: string;
-}
-
-// https://asgi.readthedocs.io/en/latest/specs/www.html#send-send-event
-interface SendSendEvent {
-	type: "websocket.send";
-	bytes?: Uint8Array;
-	text?: string;
-}
-
-// https://asgi.readthedocs.io/en/latest/specs/www.html#disconnect-receive-event-ws
-interface DisconnectReceiveEvent {
-	type: "websocket.disconnect";
-	code?: number;
-}
-
-// https://asgi.readthedocs.io/en/latest/specs/www.html#close-send-event
-interface CloseSendEvent {
-	type: "websocket.close";
-	code?: number;
-	reason?: string;
-}
-
-export type ReceiveEvent =
-	| ConnectReceiveEvent
-	| ReceiveReceiveEvent
-	| DisconnectReceiveEvent;
-export type SendEvent = AcceptSendEvent | SendSendEvent | CloseSendEvent;
-
-export function initWebSocket(
-	asgiApp: ASGIApplication,
-	path: string,
-	messagePort: MessagePort
-): Promise<void> {
-	const receiveEventQueue = new AwaitableQueue<ReceiveEvent>();
-
-	const websocket = new MessagePortWebSocket(messagePort);
-
-	websocket.addEventListener("message", (e) => {
-		const me = e as MessageEvent;
-		const asgiEvent: ReceiveReceiveEvent =
-			typeof me.data === "string"
-				? {
-						type: "websocket.receive",
-						text: me.data
-				  }
-				: {
-						type: "websocket.receive",
-						bytes: me.data
-				  };
-		receiveEventQueue.enqueue(asgiEvent);
-	});
-	websocket.addEventListener("close", (e) => {
-		const ce = e as CloseEvent;
-		const asgiEvent: DisconnectReceiveEvent = {
-			type: "websocket.disconnect",
-			code: ce.code
-		};
-		receiveEventQueue.enqueue(asgiEvent);
-	});
-	websocket.addEventListener("error", (e) => {
-		console.error(e);
-	});
-
-	// Enqueue an event to open the connection beforehand, which is
-	// "Sent to the application when the client initially opens a connection and is about to finish the WebSocket handshake."
-	// Ref: https://asgi.readthedocs.io/en/latest/specs/www.html#connect-receive-event
-	receiveEventQueue.enqueue({
-		type: "websocket.connect"
-	});
-
-	// Set up the ASGI application, passing it the `scope` and the `receive` and `send` functions.
-	// Ref: https://asgi.readthedocs.io/en/latest/specs/main.html#applications
-	async function receiveFromJs(): Promise<ReceiveEvent> {
-		return await receiveEventQueue.dequeue();
-	}
-
-	async function sendToJs(proxiedEvent: PyProxy): Promise<void> {
-		const event = Object.fromEntries(proxiedEvent.toJs()) as SendEvent;
-		switch (event.type) {
-			case "websocket.accept": {
-				// Sent by the application when it wishes to accept an incoming connection.
-				// Ref: https://asgi.readthedocs.io/en/latest/specs/www.html#accept-send-event
-				websocket.accept();
-				break;
-			}
-			case "websocket.send": {
-				// Sent by the application to send a data message to the client.
-				// Ref: https://asgi.readthedocs.io/en/latest/specs/www.html#send-send-event
-				websocket.send(event.text ?? event.bytes);
-				break;
-			}
-			case "websocket.close": {
-				// Sent by the application to tell the server to close the connection.
-				// https://asgi.readthedocs.io/en/latest/specs/www.html#close-send-event
-				websocket.close(event.code, event.reason);
-				break;
-			}
-			default: {
-				websocket.close(1002, "ASGI protocol error");
-				// @ts-expect-error
-				throw new Error(`Unhandled ASGI event: ${event.type}`);
-			}
-		}
-	}
-
-	const scope = {
-		type: "websocket",
-		asgi: {
-			version: "3.0",
-			spec_version: "2.1"
-		},
-		path,
-		headers: [],
-		query_string: "",
-		root_path: "http://xxx:99999",
-		client: ["", 0]
-	};
-
-	return asgiApp(scope, receiveFromJs, sendToJs);
-}
diff --git a/js/wasm/src/worker-proxy.ts b/js/wasm/src/worker-proxy.ts
index d2fe4f08942c..3392e4fd67e5 100644
--- a/js/wasm/src/worker-proxy.ts
+++ b/js/wasm/src/worker-proxy.ts
@@ -2,15 +2,20 @@ import { CrossOriginWorkerMaker as Worker } from "./cross-origin-worker";
 import type {
 	EmscriptenFile,
 	EmscriptenFileUrl,
-	HttpRequest,
-	HttpResponse,
 	InMessage,
-	InMessageWebSocket,
+	InMessageAsgiRequest,
 	OutMessage,
 	ReplyMessage
 } from "./message-types";
-import { MessagePortWebSocket } from "./messageportwebsocket";
 import { PromiseDelegate } from "./promise-delegate";
+import {
+	type HttpRequest,
+	type HttpResponse,
+	asgiHeadersToRecord,
+	headersToASGI,
+	logHttpReqRes
+} from "./http";
+import type { ASGIScope, ReceiveEvent, SendEvent } from "./asgi-types";
 
 export interface WorkerProxyOptions {
 	gradioWheelUrl: string;
@@ -158,6 +163,25 @@ export class WorkerProxy extends EventTarget {
 		}
 	}
 
+	// Initialize an ASGI protocol connection with the ASGI app.
+	// The returned `MessagePort` is used to communicate with the ASGI app
+	// via the `postMessage()` API and the `message` event.
+	// `postMessage()` sends a `ReceiveEvent` to the ASGI app (Be careful not to send a `SendEvent`. This is an event the ASGI app "receives".)
+	// The ASGI app sends a `SendEvent` to the `message` event.
+	public requestAsgi(scope: Record<string, unknown>): MessagePort {
+		const channel = new MessageChannel();
+
+		const msg: InMessageAsgiRequest = {
+			type: "asgi-request",
+			data: {
+				scope
+			}
+		};
+		this.postMessageTarget.postMessage(msg, [channel.port2]);
+
+		return channel.port1;
+	}
+
 	public async httpRequest(request: HttpRequest): Promise<HttpResponse> {
 		// Wait for the first run to be done
 		// to avoid the "Gradio app has not been launched." error
@@ -166,50 +190,67 @@ export class WorkerProxy extends EventTarget {
 		await this.firstRunPromiseDelegate.promise;
 
 		console.debug("WorkerProxy.httpRequest()", request);
-		const result = await this.postMessageAsync({
-			type: "http-request",
-			data: {
-				request
-			}
-		});
-		const response = (result as { response: HttpResponse }).response;
-
-		if (Math.floor(response.status / 100) !== 2) {
-			let bodyText: string;
-			let bodyJson: unknown;
-			try {
-				bodyText = new TextDecoder().decode(response.body);
-			} catch (e) {
-				bodyText = "(failed to decode body)";
-			}
-			try {
-				bodyJson = JSON.parse(bodyText);
-			} catch (e) {
-				bodyJson = "(failed to parse body as JSON)";
-			}
-			console.error("Wasm HTTP error", {
-				request,
-				response,
-				bodyText,
-				bodyJson
-			});
-		}
 
-		return response;
-	}
+		// Dispatch an ASGI request to the ASGI app and gather the response data.
+		return new Promise((resolve, reject) => {
+			// https://asgi.readthedocs.io/en/latest/specs/www.html#http-connection-scope
+			const asgiScope: ASGIScope = {
+				type: "http",
+				asgi: {
+					version: "3.0",
+					spec_version: "2.1"
+				},
+				http_version: "1.1",
+				scheme: "http",
+				method: request.method,
+				path: decodeURIComponent(request.path),
+				query_string: decodeURIComponent(request.query_string),
+				root_path: "",
+				headers: headersToASGI(request.headers)
+			};
 
-	public openWebSocket(path: string): MessagePortWebSocket {
-		const channel = new MessageChannel();
+			const asgiMessagePort = this.requestAsgi(asgiScope);
 
-		const msg: InMessageWebSocket = {
-			type: "websocket",
-			data: {
-				path
-			}
-		};
-		this.postMessageTarget.postMessage(msg, [channel.port2]);
+			let status: number;
+			let headers: { [key: string]: string };
+			let body: Uint8Array = new Uint8Array();
+			asgiMessagePort.addEventListener("message", (ev) => {
+				const asgiSendEvent: SendEvent = ev.data;
+
+				console.debug("send from ASGIapp", asgiSendEvent);
+				if (asgiSendEvent.type === "http.response.start") {
+					status = asgiSendEvent.status;
+					headers = asgiHeadersToRecord(asgiSendEvent.headers);
+				} else if (asgiSendEvent.type === "http.response.body") {
+					body = new Uint8Array([...body, ...asgiSendEvent.body]);
+					if (!asgiSendEvent.more_body) {
+						const response: HttpResponse = {
+							status,
+							headers,
+							body
+						};
+						console.debug("HTTP response", response);
+
+						asgiMessagePort.postMessage({
+							type: "http.disconnect"
+						} satisfies ReceiveEvent);
+
+						logHttpReqRes(request, response);
+						resolve(response);
+					}
+				} else {
+					reject(`Unhandled ASGI event: ${JSON.stringify(asgiSendEvent)}`);
+				}
+			});
 
-		return new MessagePortWebSocket(channel.port1);
+			asgiMessagePort.start();
+
+			asgiMessagePort.postMessage({
+				type: "http.request",
+				more_body: false,
+				body: request.body
+			} satisfies ReceiveEvent);
+		});
 	}
 
 	public writeFile(
diff --git a/js/wasm/svelte/DownloadLink.svelte b/js/wasm/svelte/DownloadLink.svelte
new file mode 100644
index 000000000000..5d53a52dc704
--- /dev/null
+++ b/js/wasm/svelte/DownloadLink.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+
+	interface DownloadLinkAttributes
+		extends Omit<HTMLAnchorAttributes, "target"> {
+		download: NonNullable<HTMLAnchorAttributes["download"]>;
+	}
+	type $$Props = DownloadLinkAttributes;
+
+	import { resolve_wasm_src } from ".";
+
+	export let href: DownloadLinkAttributes["href"] = undefined;
+	export let download: DownloadLinkAttributes["download"];
+
+	const dispatch = createEventDispatcher();
+</script>
+
+{#await resolve_wasm_src(href) then resolved_href}
+	<a
+		href={resolved_href}
+		target={window.__is_colab__ ? "_blank" : null}
+		rel="noopener noreferrer"
+		{download}
+		{...$$restProps}
+		on:click={dispatch.bind(null, "click")}
+	>
+		<slot />
+	</a>
+{:catch error}
+	<p style="color: red;">{error.message}</p>
+{/await}
diff --git a/js/wasm/svelte/file-url.ts b/js/wasm/svelte/file-url.ts
index 6781ac0b75d5..d6d3203984e2 100644
--- a/js/wasm/svelte/file-url.ts
+++ b/js/wasm/svelte/file-url.ts
@@ -1,5 +1,6 @@
 import { getWorkerProxyContext } from "./context";
 import { is_self_host } from "../network/host";
+import { getHeaderValue } from "../src/http";
 
 type MediaSrc = string | undefined | null;
 
@@ -37,7 +38,7 @@ export async function resolve_wasm_src(src: MediaSrc): Promise<MediaSrc> {
 				throw new Error(`Failed to get file ${path} from the Wasm worker.`);
 			}
 			const blob = new Blob([response.body], {
-				type: response.headers["Content-Type"]
+				type: getHeaderValue(response.headers, "content-type")
 			});
 			const blobUrl = URL.createObjectURL(blob);
 			return blobUrl;
diff --git a/js/wasm/svelte/index.ts b/js/wasm/svelte/index.ts
index aadb8ee883b6..e84014a278da 100644
--- a/js/wasm/svelte/index.ts
+++ b/js/wasm/svelte/index.ts
@@ -1,2 +1,3 @@
 export * from "./context";
 export * from "./file-url";
+export { default as DownloadLink } from "./DownloadLink.svelte";
diff --git a/js/wasm/tsconfig.json b/js/wasm/tsconfig.json
index e044fdc4f212..1c59445d73b4 100644
--- a/js/wasm/tsconfig.json
+++ b/js/wasm/tsconfig.json
@@ -100,6 +100,6 @@
 		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
 		"skipLibCheck": true /* Skip type checking all .d.ts files. */
 	},
-	"include": ["src/**/*"],
+	"include": ["src/**/*", "../../globals.d.ts"],
 	"exclude": ["src/webworker/**/*"] // The worker code is bundled by Vite separately. See its config file.
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26bb22033725..a99460b4e479 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -717,6 +717,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/wasm':
+        specifier: workspace:^
+        version: link:../wasm
       '@lezer/common':
         specifier: ^1.0.2
         version: 1.0.2
@@ -860,6 +863,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/wasm':
+        specifier: workspace:^
+        version: link:../wasm
 
   js/fileexplorer:
     dependencies: