diff --git a/backend/gradio_webrtc/webrtc.py b/backend/gradio_webrtc/webrtc.py
index 9ab41d1..9cfbd18 100644
--- a/backend/gradio_webrtc/webrtc.py
+++ b/backend/gradio_webrtc/webrtc.py
@@ -4,7 +4,7 @@ from __future__ import annotations
 
 import asyncio
 from collections.abc import Callable, Sequence
-from typing import TYPE_CHECKING, Any, Literal, cast
+from typing import TYPE_CHECKING, Any, Literal, cast, Generator
 
 
 from aiortc import RTCPeerConnection, RTCSessionDescription
@@ -22,6 +22,7 @@ from gradio.components.base import Component, server
 if TYPE_CHECKING:
     from gradio.components import Timer
     from gradio.blocks import Block
+    from gradio.events import Dependency
 
 
 if wasm_utils.IS_WASM:
@@ -91,6 +92,67 @@ class VideoCallback(VideoStreamTrack):
             traceback.print_exc()
 
 
+class ServerToClientVideo(VideoStreamTrack):
+    """
+    This works for streaming input and output
+    """
+
+    kind = "video"
+
+    def __init__(
+        self,
+        event_handler: Callable,
+    ) -> None:
+        super().__init__()  # don't forget this!
+        self.event_handler = event_handler
+        self.latest_args: str | list[Any] = "not_set"
+        self.generator: Generator[Any, None, Any] | None = None
+
+    def add_frame_to_payload(
+        self, args: list[Any], frame: np.ndarray | None
+    ) -> list[Any]:
+        new_args = []
+        for val in args:
+            if isinstance(val, str) and val == "__webrtc_value__":
+                new_args.append(frame)
+            else:
+                new_args.append(val)
+        return new_args
+
+    def array_to_frame(self, array: np.ndarray) -> VideoFrame:
+        return VideoFrame.from_ndarray(array, format="bgr24")
+
+    async def recv(self):
+        try:
+            
+            pts, time_base = await self.next_timestamp()
+            if self.latest_args == "not_set":
+                frame = self.array_to_frame(np.zeros((480, 640, 3), dtype=np.uint8))
+                frame.pts = pts
+                frame.time_base = time_base
+                return frame
+            elif self.generator is None:
+                self.generator = cast(Generator[Any, None, Any], self.event_handler(*self.latest_args))
+
+            try:
+                next_array = next(self.generator)
+            except StopIteration:
+                print("exception")
+                self.stop()
+                return
+
+            print("pts", pts)
+            print("time_base", time_base)
+            next_frame = self.array_to_frame(next_array)
+            next_frame.pts = pts
+            next_frame.time_base = time_base
+            return next_frame
+        except Exception as e:
+            print(e)
+            import traceback
+            traceback.print_exc()
+
+
 class WebRTC(Component):
     """
     Creates a video component that can be used to upload/record videos (as an input) or display videos (as an output).
@@ -104,7 +166,7 @@ class WebRTC(Component):
 
     pcs: set[RTCPeerConnection] = set([])
     relay = MediaRelay()
-    connections: dict[str, VideoCallback] = {}
+    connections: dict[str, VideoCallback | ServerToClientVideo] = {}
 
     EVENTS = ["tick"]
 
@@ -129,6 +191,7 @@ class WebRTC(Component):
         mirror_webcam: bool = True,
         rtc_configuration: dict[str, Any] | None = None,
         time_limit: float | None = None,
+        mode: Literal["video-in-out", "video-out"] = "video-in-out",
     ):
         """
         Parameters:
@@ -166,6 +229,7 @@ class WebRTC(Component):
         self.mirror_webcam = mirror_webcam
         self.concurrency_limit = 1
         self.rtc_configuration = rtc_configuration
+        self.mode = mode
         self.event_handler: Callable | None = None
         super().__init__(
             label=label,
@@ -200,11 +264,14 @@ class WebRTC(Component):
         Returns:
             VideoData object containing the video and subtitle files.
         """
-        return "__webrtc_value__"
+        return value
 
     def set_output(self, webrtc_id: str, *args):
         if webrtc_id in self.connections:
-            self.connections[webrtc_id].latest_args = ["__webrtc_value__"] + list(args)
+            if self.mode == "video-in-out":
+                self.connections[webrtc_id].latest_args = ["__webrtc_value__"] + list(args)
+            elif self.mode == "video-out":
+                self.connections[webrtc_id].latest_args = list(args)
 
     def stream(
         self,
@@ -215,6 +282,7 @@ class WebRTC(Component):
         concurrency_limit: int | None | Literal["default"] = "default",
         concurrency_id: str | None = None,
         time_limit: float | None = None,
+        trigger: Dependency | None = None,
     ):
         from gradio.blocks import Block
 
@@ -223,34 +291,57 @@ class WebRTC(Component):
         if isinstance(outputs, Block):
             outputs = [outputs]
 
-        if cast(list[Block], inputs)[0] != self:
-            raise ValueError(
-                "In the webrtc stream event, the first input component must be the WebRTC component."
-            )
-
-        if (
-            len(cast(list[Block], outputs)) != 1
-            and cast(list[Block], outputs)[0] != self
-        ):
-            raise ValueError(
-                "In the webrtc stream event, the only output component must be the WebRTC component."
-            )
-
         self.concurrency_limit = (
             1 if concurrency_limit in ["default", None] else concurrency_limit
         )
         self.event_handler = fn
         self.time_limit = time_limit
-        return self.tick(  # type: ignore
-            self.set_output,
-            inputs=inputs,
-            outputs=None,
-            concurrency_id=concurrency_id,
-            concurrency_limit=None,
-            stream_every=0.5,
-            time_limit=None,
-            js=js,
-        )
+        
+        if self.mode == "video-in-out":
+
+            if cast(list[Block], inputs)[0] != self:
+                raise ValueError(
+                    "In the webrtc stream event, the first input component must be the WebRTC component."
+                )
+
+            if (
+                len(cast(list[Block], outputs)) != 1
+                and cast(list[Block], outputs)[0] != self
+            ):
+                raise ValueError(
+                    "In the webrtc stream event, the only output component must be the WebRTC component."
+                )
+            return self.tick(  # type: ignore
+                self.set_output,
+                inputs=inputs,
+                outputs=None,
+                concurrency_id=concurrency_id,
+                concurrency_limit=None,
+                stream_every=0.5,
+                time_limit=None,
+                js=js,
+            )
+        elif self.mode == "video-out":
+            if self in cast(list[Block], inputs):
+                raise ValueError(
+                    "In the video-out stream event, the WebRTC component cannot be an input."
+                )
+            if (
+                len(cast(list[Block], outputs)) != 1
+                and cast(list[Block], outputs)[0] != self
+            ):
+                raise ValueError(
+                    "In the video-out stream, the only output component must be the WebRTC component."
+                )
+            if trigger is None:
+                raise ValueError(
+                    "In the video-out stream event, the trigger parameter must be provided"
+                )
+            trigger(lambda: "start_webrtc_stream", inputs=None, outputs=self)
+            self.tick(
+                self.set_output, inputs=[self] + inputs, outputs=None, concurrency_id=concurrency_id
+            )
+            
 
     @staticmethod
     async def wait_for_time_limit(pc: RTCPeerConnection, time_limit: float):
@@ -293,6 +384,12 @@ class WebRTC(Component):
             )
             self.connections[body["webrtc_id"]] = cb
             pc.addTrack(cb)
+        
+        if self.mode == "video-out":
+            cb = ServerToClientVideo(cast(Callable, self.event_handler))
+            pc.addTrack(cb)
+            self.connections[body["webrtc_id"]] = cb
+
 
         # handle offer
         await pc.setRemoteDescription(offer)
diff --git a/frontend/Index.svelte b/frontend/Index.svelte
index d6e9b89..0dcbeaf 100644
--- a/frontend/Index.svelte
+++ b/frontend/Index.svelte
@@ -5,11 +5,12 @@
 	import Video from "./shared/InteractiveVideo.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
+	import StaticVideo from "./shared/StaticVideo.svelte";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: string;
+	export let value: string = "__webrtc_value__";
 
 	export let label: string;
 	export let root: string;
@@ -27,22 +28,7 @@
 	export let gradio;
 	export let rtc_configuration: Object;
 	export let time_limit: number | null = null;
-	// export let gradio: Gradio<{
-	// 	change: never;
-	// 	clear: never;
-	// 	play: never;
-	// 	pause: never;
-	// 	upload: never;
-	// 	stop: never;
-	// 	end: never;
-	// 	start_recording: never;
-	// 	stop_recording: never;
-	// 	share: ShareData;
-	// 	error: string;
-	// 	warning: string;
-	// 	clear_status: LoadingStatus;
-	// 	tick: never;
-	// }>;
+	export let mode: "video-in-out" | "video-out" = "video-in-out";
 
 	let dragging = false;
 
@@ -71,30 +57,40 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
-	<Video
-		bind:value={value}
-		{label}
-		{show_label}
-		active_source={"webcam"}
-		include_audio={false}
-		{root}
-		{server}
-		{rtc_configuration}
-		{time_limit}
-		on:clear={() => gradio.dispatch("clear")}
-		on:play={() => gradio.dispatch("play")}
-		on:pause={() => gradio.dispatch("pause")}
-		on:upload={() => gradio.dispatch("upload")}
-		on:stop={() => gradio.dispatch("stop")}
-		on:end={() => gradio.dispatch("end")}
-		on:start_recording={() => gradio.dispatch("start_recording")}
-		on:stop_recording={() => gradio.dispatch("stop_recording")}
-		on:tick={() => gradio.dispatch("tick")}
-		on:error={({ detail }) => gradio.dispatch("error", detail)}
-		i18n={gradio.i18n}
-		stream_handler={(...args) => gradio.client.stream(...args)}
-	>
-		<UploadText i18n={gradio.i18n} type="video" />
-	</Video>
+	{#if mode === "video-out"}
+		<StaticVideo
+			bind:value={value}
+			{label}
+			{show_label}
+			{server}
+			{rtc_configuration}
+			on:tick={() => gradio.dispatch("tick")}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+		/>
+	{:else}
+		<Video
+			bind:value={value}
+			{label}
+			{show_label}
+			active_source={"webcam"}
+			include_audio={false}
+			{server}
+			{rtc_configuration}
+			{time_limit}
+			on:clear={() => gradio.dispatch("clear")}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:upload={() => gradio.dispatch("upload")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:end={() => gradio.dispatch("end")}
+			on:start_recording={() => gradio.dispatch("start_recording")}
+			on:stop_recording={() => gradio.dispatch("stop_recording")}
+			on:tick={() => gradio.dispatch("tick")}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			i18n={gradio.i18n}
+			stream_handler={(...args) => gradio.client.stream(...args)}
+		>
+			<UploadText i18n={gradio.i18n} type="video" />
+		</Video>
+	{/if}
 </Block>
-<!-- {/if} -->
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 02890ce..6e7e181 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,21 +9,22 @@
       "version": "0.11.0-beta.3",
       "license": "ISC",
       "dependencies": {
-        "@ffmpeg/ffmpeg": "^0.12.7",
+        "@ffmpeg/ffmpeg": "^0.12.10",
         "@ffmpeg/util": "^0.12.1",
-        "@gradio/atoms": "0.9.0-beta.2",
-        "@gradio/client": "1.6.0-beta.3",
-        "@gradio/icons": "0.8.0-beta.2",
-        "@gradio/image": "0.16.0-beta.3",
-        "@gradio/statustracker": "0.8.0-beta.2",
-        "@gradio/upload": "0.13.0-beta.3",
-        "@gradio/utils": "0.7.0-beta.2",
-        "@gradio/wasm": "0.14.0-beta.2",
-        "hls.js": "^1.5.13",
+        "@gradio/atoms": "0.9.0",
+        "@gradio/client": "1.6.0",
+        "@gradio/icons": "0.8.0",
+        "@gradio/image": "0.16.0",
+        "@gradio/markdown": "^0.10.0",
+        "@gradio/statustracker": "0.8.0",
+        "@gradio/upload": "0.13.0",
+        "@gradio/utils": "0.7.0",
+        "@gradio/wasm": "0.14.0",
+        "hls.js": "^1.5.16",
         "mrmime": "^2.0.0"
       },
       "devDependencies": {
-        "@gradio/preview": "0.11.1"
+        "@gradio/preview": "0.12.0"
       },
       "peerDependencies": {
         "svelte": "^4.0.0"
@@ -537,21 +538,21 @@
       }
     },
     "node_modules/@gradio/atoms": {
-      "version": "0.9.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.9.0-beta.2.tgz",
-      "integrity": "sha512-3Yq23lQGCc2T4jBNVagl4NQsFeRtUo+x17MgmFqq0ciakqbrl3Nhb8feGJi7II6oPj04Hyz5DVuCfHfh8zG73w==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.9.0.tgz",
+      "integrity": "sha512-dIrMl4py7+1s1on52MwCeFq1p07IjbJWg3Y2vR+5FlwjQtQ3hPhP/KH+PrL94WchsUnF6aE2DV7LpjbnZvGtrQ==",
       "dependencies": {
-        "@gradio/icons": "^0.8.0-beta.2",
-        "@gradio/utils": "^0.7.0-beta.2"
+        "@gradio/icons": "^0.8.0",
+        "@gradio/utils": "^0.7.0"
       },
       "peerDependencies": {
         "svelte": "^4.0.0"
       }
     },
     "node_modules/@gradio/client": {
-      "version": "1.6.0-beta.3",
-      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-1.6.0-beta.3.tgz",
-      "integrity": "sha512-mJZVQ4UpfrSu71J4SkbSrpnbRotmB5ziy4fg7zqZhqXwXGZM3cHR9fUGkTFM0eXYnsaeBoiqn+1bcUh32Zcgkg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-1.6.0.tgz",
+      "integrity": "sha512-1258LcF45FFjGCjcn37zDZD1dRrsApTogc7fD9jlSBN8x61s0MPzz6LRCefD2DZ1Is3G+pRu7M6w6XrBNyVVmA==",
       "dependencies": {
         "@types/eventsource": "^1.1.15",
         "bufferutil": "^4.0.7",
@@ -568,25 +569,25 @@
       }
     },
     "node_modules/@gradio/icons": {
-      "version": "0.8.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.8.0-beta.2.tgz",
-      "integrity": "sha512-98t8yKl1HcCM5gpQ50DGDILytuiwXLdGasvzki/VbCFnAGCNOAk0gyFw8K+ubAeC577M8m56b6ieOL1U5be7zA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.8.0.tgz",
+      "integrity": "sha512-lFTFArV/ZXOuYArHX85stdxlRuxeyekB7Ig5Ed3uQX1sv2JwzyQ9ALkauLDWcA6jMcIMCjnV7rZWeTI++IzPAg==",
       "peerDependencies": {
         "svelte": "^4.0.0"
       }
     },
     "node_modules/@gradio/image": {
-      "version": "0.16.0-beta.3",
-      "resolved": "https://registry.npmjs.org/@gradio/image/-/image-0.16.0-beta.3.tgz",
-      "integrity": "sha512-yofNIeW7CO3IcW8fBzDSbYqnTwRsUpiPEZLVRsb1sW0YI6Pv2Z3HzXTQJRLuerjPRnSe1ckyitN7qGB6iX7pIA==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@gradio/image/-/image-0.16.0.tgz",
+      "integrity": "sha512-FONnsxAvJPDGJ8DMFhMrdCiQkCP9m+9NoO3nh5I5mE26Q5bioN+Wdwu/IgQkJVbxo3iok8vu+R2J1jqqB0WM8A==",
       "dependencies": {
-        "@gradio/atoms": "^0.9.0-beta.2",
-        "@gradio/client": "^1.6.0-beta.3",
-        "@gradio/icons": "^0.8.0-beta.2",
-        "@gradio/statustracker": "^0.8.0-beta.2",
-        "@gradio/upload": "^0.13.0-beta.3",
-        "@gradio/utils": "^0.7.0-beta.2",
-        "@gradio/wasm": "^0.14.0-beta.2",
+        "@gradio/atoms": "^0.9.0",
+        "@gradio/client": "^1.6.0",
+        "@gradio/icons": "^0.8.0",
+        "@gradio/statustracker": "^0.8.0",
+        "@gradio/upload": "^0.13.0",
+        "@gradio/utils": "^0.7.0",
+        "@gradio/wasm": "^0.14.0",
         "cropperjs": "^1.5.12",
         "lazy-brush": "^1.0.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -595,10 +596,37 @@
         "svelte": "^4.0.0"
       }
     },
+    "node_modules/@gradio/markdown": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@gradio/markdown/-/markdown-0.10.0.tgz",
+      "integrity": "sha512-ge2aoFWI+Fw/qQfwm1z9OwCBRBmHbOVdK9GSD/1EMURdMpTiYd9SiyaUk7OzJXFSpBxjRQEwejQQL+AjJ7X9KQ==",
+      "dependencies": {
+        "@gradio/atoms": "^0.9.0",
+        "@gradio/icons": "^0.8.0",
+        "@gradio/statustracker": "^0.8.0",
+        "@gradio/utils": "^0.7.0",
+        "@types/dompurify": "^3.0.2",
+        "@types/katex": "^0.16.0",
+        "@types/prismjs": "1.26.4",
+        "amuchina": "^1.0.12",
+        "dom-parser": "^1.1.5",
+        "github-slugger": "^2.0.0",
+        "isomorphic-dompurify": "^2.14.0",
+        "katex": "^0.16.7",
+        "marked": "^12.0.0",
+        "marked-gfm-heading-id": "^3.1.2",
+        "marked-highlight": "^2.0.1",
+        "prismjs": "1.29.0",
+        "sanitize-html": "^2.13.0"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0"
+      }
+    },
     "node_modules/@gradio/preview": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/@gradio/preview/-/preview-0.11.1.tgz",
-      "integrity": "sha512-MsPqwClMhx0xvpgPhpFFL7XpQTwI0YwLhb1xRnunHFnI/H7bf68VP1ASJyhxxAyIDDgU581ihYJtX6YLSfXzdA==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@gradio/preview/-/preview-0.12.0.tgz",
+      "integrity": "sha512-VXmqZxieNuOZiXTFX/Bo+hOwoBRyJH7UaVcgZo5Cy1bXz1LsNZ1+EWNJB4L01u5Ga7UwLdSLrTaVrhF+GGHZ6A==",
       "dev": true,
       "dependencies": {
         "@originjs/vite-plugin-commonjs": "^1.0.3",
@@ -652,13 +680,13 @@
       }
     },
     "node_modules/@gradio/statustracker": {
-      "version": "0.8.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.8.0-beta.2.tgz",
-      "integrity": "sha512-Yk/FWJi/FnLftbk8z5k1+4nmAyG+EjOh652LSx6WD+kMQIBfdziYWQY341fl/y52nUjsn9gXnKD4zdbwWsnMjA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.8.0.tgz",
+      "integrity": "sha512-qQqK03OWOiISJOOR8GTB+t3Ls/LonrtBiZWcTzH0FhmXlJUYGN/vRhgg0oc9ZpLuXutTbCvNcKEu+3PPKFIolA==",
       "dependencies": {
-        "@gradio/atoms": "^0.9.0-beta.2",
-        "@gradio/icons": "^0.8.0-beta.2",
-        "@gradio/utils": "^0.7.0-beta.2",
+        "@gradio/atoms": "^0.9.0",
+        "@gradio/icons": "^0.8.0",
+        "@gradio/utils": "^0.7.0",
         "@types/dompurify": "^3.0.2",
         "dompurify": "^3.0.3"
       },
@@ -667,41 +695,41 @@
       }
     },
     "node_modules/@gradio/theme": {
-      "version": "0.3.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.3.0-beta.1.tgz",
-      "integrity": "sha512-NYLylFmzs1Cf8l1GjrwyhW/iFlm7lWfwRJqqdicVnLppLq2W1RPxiDYOrz8f415ubgT3UihI4ag4qBf3i86Fyw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.3.0.tgz",
+      "integrity": "sha512-PNguiOQFZO4Vim9446b2VRa0wO0ulkz9MUkDJXIdk7Cdx6HZQaqc5hErp/mlDV1scFKQbwTsG+9IzcClTnLXTg==",
       "peerDependencies": {
         "svelte": "^4.0.0"
       }
     },
     "node_modules/@gradio/upload": {
-      "version": "0.13.0-beta.3",
-      "resolved": "https://registry.npmjs.org/@gradio/upload/-/upload-0.13.0-beta.3.tgz",
-      "integrity": "sha512-Yrqe3HX3ErnbqHWjaiMWhggRpq8IG129nIMXZeMBCNECJjgbQOGxXg7r1dY587HFOJNYOp1x+PiE0E1jc7r/hg==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@gradio/upload/-/upload-0.13.0.tgz",
+      "integrity": "sha512-BMBlCWDxTrZ0rNYr2Gxolvlz1Zp+cEbAP1SVhL87g0y5/5A1dO1ZporBdPRcoST57P2ApvqZPpR1HyDAy+iKvA==",
       "dependencies": {
-        "@gradio/atoms": "^0.9.0-beta.2",
-        "@gradio/client": "^1.6.0-beta.3",
-        "@gradio/icons": "^0.8.0-beta.2",
-        "@gradio/utils": "^0.7.0-beta.2",
-        "@gradio/wasm": "^0.14.0-beta.2"
+        "@gradio/atoms": "^0.9.0",
+        "@gradio/client": "^1.6.0",
+        "@gradio/icons": "^0.8.0",
+        "@gradio/utils": "^0.7.0",
+        "@gradio/wasm": "^0.14.0"
       },
       "peerDependencies": {
         "svelte": "^4.0.0"
       }
     },
     "node_modules/@gradio/utils": {
-      "version": "0.7.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.7.0-beta.2.tgz",
-      "integrity": "sha512-9hYPKC2BUz4gbwL/N/vCPFWrbhbrdeAVnwA06w0xk6FdL8ZCKZaEWwqiGnkUoQg4fG9pONlMvy5IfIA5S0J9kg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.7.0.tgz",
+      "integrity": "sha512-cPVt/oz+tdEQ3ya1XoDe7VBX+q4Z1KDI68FxmindW5BWHIfOEVNWZ+6KQTIZhrgl+k4kSHqpZjnahGyFpes9+w==",
       "dependencies": {
-        "@gradio/theme": "^0.3.0-beta.1",
+        "@gradio/theme": "^0.3.0",
         "svelte-i18n": "^3.6.0"
       }
     },
     "node_modules/@gradio/wasm": {
-      "version": "0.14.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@gradio/wasm/-/wasm-0.14.0-beta.2.tgz",
-      "integrity": "sha512-Yuw+injU6mACwsth5LkI3mzLiDqsNLgIAbXVXQC5dcGvM8CHsMREYAJYHsyCznPJ25+1E2c25uDWFsjq8ZGoUQ==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@gradio/wasm/-/wasm-0.14.0.tgz",
+      "integrity": "sha512-7APLdin+K5iriVnG79pfdl5wVb9whoVoe8i/Nio8d/zczKae+aN/HPkAqSEAgb2pJl7BqhfaQ4BzHkzr74F4NA==",
       "dependencies": {
         "@types/path-browserify": "^1.0.0",
         "path-browserify": "^1.0.1",
@@ -1281,6 +1309,11 @@
       "resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.15.tgz",
       "integrity": "sha512-XQmGcbnxUNa06HR3VBVkc9+A2Vpi9ZyLJcdS5dwaQQ/4ZMWFO+5c90FnMUpbtMZwB/FChoYHwuVg8TvkECacTA=="
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
+    },
     "node_modules/@types/mute-stream": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/@types/mute-stream/-/mute-stream-0.0.4.tgz",
@@ -1302,6 +1335,11 @@
       "resolved": "https://registry.npmjs.org/@types/path-browserify/-/path-browserify-1.0.3.tgz",
       "integrity": "sha512-ZmHivEbNCBtAfcrFeBCiTjdIc2dey0l7oCGNGpSuRTy8jP6UVND7oUowlvDujBy8r2Hoa8bfFUOCiPWfmtkfxw=="
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.4",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.4.tgz",
+      "integrity": "sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg=="
+    },
     "node_modules/@types/pug": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
@@ -1346,6 +1384,22 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/amuchina": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/amuchina/-/amuchina-1.0.12.tgz",
+      "integrity": "sha512-Itv2NEwpiV53+bkpviJIC12+8SOlCSLR1HgQCv6wD7ldNFNesm4JSk7XjvTFkeVfLYzqKEZcEBZO1X/V2MYg4A=="
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -1419,6 +1473,11 @@
       "integrity": "sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -1660,6 +1719,17 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1769,6 +1839,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+      "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
+      "dependencies": {
+        "rrweb-cssom": "^0.7.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/d": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
@@ -1781,11 +1862,22 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -1798,6 +1890,11 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+    },
     "node_modules/decode-uri-component": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -1834,6 +1931,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-indent": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -1861,10 +1966,66 @@
       "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
       "dev": true
     },
+    "node_modules/dom-parser": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/dom-parser/-/dom-parser-1.1.5.tgz",
+      "integrity": "sha512-lCiFG48ZUzGXjKN0qhSkxD/i3ndyV6I37zQ3W2VFYLjF1ob8A+QgSsM7Ps2UT0d3LpJxLMmMHiJJ34z5hkKLiA=="
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/dompurify": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
-      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+      "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ=="
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
@@ -1877,6 +2038,17 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
@@ -2316,6 +2488,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/esniff": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
@@ -2381,6 +2564,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2437,6 +2633,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/github-slugger": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2571,9 +2772,73 @@
       "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ=="
     },
     "node_modules/hls.js": {
-      "version": "1.5.15",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.15.tgz",
-      "integrity": "sha512-6cD7xN6bycBHaXz2WyPIaHn/iXFizE5au2yvY5q9aC4wfihxAr16C9fUy4nxh2a3wOw0fEgLRa9dN6wsYjlpNg=="
+      "version": "1.5.16",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.16.tgz",
+      "integrity": "sha512-+wAWr4aeRq9ODN8/Vgz0Cee1Cw6Ysr7vyEkZJCwOJYNwlld7CNmhKE+dLwfpUO2UuotYLGF0of6UFiN6zA7mig=="
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
     "node_modules/immutable": {
       "version": "4.3.7",
@@ -2647,6 +2912,19 @@
       "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
       "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw=="
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@@ -2685,6 +2963,19 @@
         "node": ">=16"
       }
     },
+    "node_modules/isomorphic-dompurify": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-dompurify/-/isomorphic-dompurify-2.16.0.tgz",
+      "integrity": "sha512-cXhX2owp8rPxafCr0ywqy2CGI/4ceLNgWkWBEvUz64KTbtg3oRL2ZRqq/zW0pzt4YtDjkHLbwcp/lozpKzAQjg==",
+      "dependencies": {
+        "@types/dompurify": "^3.0.5",
+        "dompurify": "^3.1.7",
+        "jsdom": "^25.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -2706,6 +2997,56 @@
       "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
       "dev": true
     },
+    "node_modules/jsdom": {
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+      "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
+      "dependencies": {
+        "cssstyle": "^4.1.0",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/tough-cookie": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/jstransformer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
@@ -2716,6 +3057,29 @@
         "promise": "^7.0.1"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.11",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
+      "integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -2991,6 +3355,36 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/marked": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/marked-gfm-heading-id": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-3.2.0.tgz",
+      "integrity": "sha512-Xfxpr5lXLDLY10XqzSCA9l2dDaiabQUgtYM9hw8yunyVsB/xYBRpiic6BOiY/EAJw1ik1eWr1ET1HKOAPZBhXg==",
+      "dependencies": {
+        "github-slugger": "^2.0.0"
+      },
+      "peerDependencies": {
+        "marked": ">=4 <13"
+      }
+    },
+    "node_modules/marked-highlight": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.1.4.tgz",
+      "integrity": "sha512-D1GOkcdzP+1dzjoColL7umojefFrASDuLeyaHS0Zr/Uo9jkr1V6vpLRCzfi1djmEaWyK0SYMFtHnpkZ+cwFT1w==",
+      "peerDependencies": {
+        "marked": ">=4 <15"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -3014,6 +3408,25 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3084,8 +3497,7 @@
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/msw": {
       "version": "2.4.9",
@@ -3152,7 +3564,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3181,6 +3592,11 @@
         "node-gyp-build-test": "build-test.js"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
+      "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3210,6 +3626,22 @@
       "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
       "dev": true
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -3281,8 +3713,7 @@
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
-      "dev": true
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3309,7 +3740,6 @@
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3333,6 +3763,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -3597,6 +4035,11 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg=="
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -3611,10 +4054,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sander": {
       "version": "0.5.1",
@@ -3628,6 +4068,19 @@
         "rimraf": "^2.5.2"
       }
     },
+    "node_modules/sanitize-html": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.13.1.tgz",
+      "integrity": "sha512-ZXtKq89oue4RP7abL9wp/9URJcqQNABB5GGJ2acW1sdO8JTVl92f4ygD7Yc9Ze09VAZhnt2zegeU0tbNsdcLYg==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
     "node_modules/sass": {
       "version": "1.79.3",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.3.tgz",
@@ -3653,6 +4106,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/semiver": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
@@ -4197,6 +4661,11 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+    },
     "node_modules/textlinestream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/textlinestream/-/textlinestream-1.1.1.tgz",
@@ -4244,6 +4713,22 @@
         "globrex": "^0.1.2"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.50",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.50.tgz",
+      "integrity": "sha512-q9GOap6q3KCsLMdOjXhWU5jVZ8/1dIib898JBRLsN+tBhENpBDcAVQbE0epADOjw11FhQQy9AcbqKGBQPUfTQA==",
+      "dependencies": {
+        "tldts-core": "^6.1.50"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.50",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.50.tgz",
+      "integrity": "sha512-na2EcZqmdA2iV9zHV7OHQDxxdciEpxrjbkp+aHmZgnZKHzoElLajP59np5/4+sare9fQBfixgvXKx8ev1d7ytw=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4273,6 +4758,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -4822,6 +5318,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
@@ -4909,6 +5455,19 @@
         }
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ef2b5a0..bde834b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,21 +7,22 @@
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@ffmpeg/ffmpeg": "^0.12.7",
+    "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
-    "@gradio/atoms": "0.9.0-beta.2",
-    "@gradio/client": "1.6.0-beta.3",
-    "@gradio/icons": "0.8.0-beta.2",
-    "@gradio/image": "0.16.0-beta.3",
-    "@gradio/statustracker": "0.8.0-beta.2",
-    "@gradio/upload": "0.13.0-beta.3",
-    "@gradio/utils": "0.7.0-beta.2",
-    "@gradio/wasm": "0.14.0-beta.2",
-    "hls.js": "^1.5.13",
+    "@gradio/atoms": "0.9.0",
+    "@gradio/client": "1.6.0",
+    "@gradio/icons": "0.8.0",
+    "@gradio/image": "0.16.0",
+    "@gradio/markdown": "^0.10.0",
+    "@gradio/statustracker": "0.8.0",
+    "@gradio/upload": "0.13.0",
+    "@gradio/utils": "0.7.0",
+    "@gradio/wasm": "0.14.0",
+    "hls.js": "^1.5.16",
     "mrmime": "^2.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "0.11.1"
+    "@gradio/preview": "0.12.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -46,4 +47,4 @@
     "url": "git+https://github.com/gradio-app/gradio.git",
     "directory": "js/video"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/shared/StaticVideo.svelte b/frontend/shared/StaticVideo.svelte
new file mode 100644
index 0000000..1fd3db5
--- /dev/null
+++ b/frontend/shared/StaticVideo.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { createEventDispatcher, afterUpdate, tick } from "svelte";
+	import {
+		BlockLabel,
+		Empty
+	} from "@gradio/atoms";
+	import { Video } from "@gradio/icons";
+
+	import { start, stop } from "./webrtc_utils";
+
+
+	export let value: string | null = null;
+	export let label: string | undefined = undefined;
+	export let show_label = true;
+	export let rtc_configuration: Object | null = null;
+	export let server: {
+		offer: (body: any) => Promise<any>;
+	};
+
+    let video_element: HTMLVideoElement;
+
+	let _webrtc_id = Math.random().toString(36).substring(2);
+
+	let pc: RTCPeerConnection;
+	
+	const dispatch = createEventDispatcher<{
+		error: string;
+		tick: undefined;
+	}>();
+	
+	let stream_state = "closed";
+	window.setInterval(() => {
+        if (stream_state == "open") {
+            dispatch("tick");
+        }
+    }, 1000);
+
+
+
+	$: console.log("static video value", value);
+	$: if( value === "start_webrtc_stream") {
+		value = _webrtc_id;
+		const fallback_config = {
+                iceServers: [
+                    {
+                        urls: 'stun:stun.l.google.com:19302'
+                    }
+                ]
+            };
+            const configuration = rtc_configuration || fallback_config;
+            console.log("config", configuration);
+            pc = new RTCPeerConnection(configuration);
+            pc.addEventListener("connectionstatechange",
+                async (event) => {
+                   switch(pc.connectionState) {
+                        case "connected":
+                            console.log("connected");
+							stream_state = "open";
+                            break;
+                        case "disconnected":
+                            console.log("closed");
+							stop(pc);
+                            break;
+                        default:
+                            break;
+                   }
+                }
+            )
+		start(null, pc, video_element, server.offer, _webrtc_id).then((connection) => {
+				pc = connection;
+			}).catch(() => {
+                console.log("catching")
+                dispatch("error", "Too many concurrent users. Come back later!");
+            });
+	}
+
+
+</script>
+
+<div class="wrap">
+	<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
+	{#if value === "__webrtc_value__"}
+		<Empty unpadded_box={true} size="large"><Video /></Empty>
+	{/if}
+		<video
+		class:hidden={value === "__webrtc_value__"}
+		bind:this={video_element}
+		autoplay={true}
+		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")}
+		on:load
+		data-testid={$$props["data-testid"]}
+		crossorigin="anonymous"
+	>
+		<track kind="captions" />
+	</video>
+</div>
+
+
+
+<style>
+	.hidden {
+		display: none;
+	}
+
+	.wrap {
+		position: relative;
+		background-color: var(--background-fill-secondary);
+		height: var(--size-full);
+		width: var(--size-full);
+		border-radius: var(--radius-xl);
+	}
+	.wrap :global(video) {
+		height: var(--size-full);
+		width: var(--size-full);
+	}
+</style>
diff --git a/frontend/shared/Webcam.svelte b/frontend/shared/Webcam.svelte
index 6c58007..11b5fbc 100644
--- a/frontend/shared/Webcam.svelte
+++ b/frontend/shared/Webcam.svelte
@@ -161,7 +161,6 @@
 	
     window.setInterval(() => {
         if (stream_state == "open") {
-            console.log("dispatching tick");
             dispatch("tick");
         }
     }, stream_every * 1000);