Upload folder using huggingface_hub

.gitattributes

@@ -38,3 +38,4 @@ src/examples/rgbd.rrd filter=lfs diff=lfs merge=lfs -text
 src/examples/rrt-star.rrd filter=lfs diff=lfs merge=lfs -text
 src/examples/structure_from_motion.rrd filter=lfs diff=lfs merge=lfs -text
 *.rrd filter=lfs diff=lfs merge=lfs -text
+src/backend/gradio_rerun/templates/component/re_viewer-DOCTrs8v.js filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -10,5 +10,4 @@ __tmp/*
 .ruff_cache
 node_modules
 backend/**/templates/
-venv
-.DS_Store
+venv

README.md

@@ -1,26 +1,16 @@
 ---
-tags:
-  [
-    gradio-custom-component,
-    SimpleImage,
-    multimodal data,
-    visualization,
-    machine learning,
-    robotics,
-  ]
+tags: [gradio-custom-component, SimpleImage, multimodal data, visualization, machine learning, robotics]
 title: gradio_rerun
 short_description: Rerun viewer with Gradio
 colorFrom: blue
 colorTo: yellow
 sdk: gradio
-sdk_version: 4.28.3
 pinned: false
 app_file: space.py
 ---
 
 # `gradio_rerun`
-
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a>
+<a href="https://pypi.org/project/gradio_rerun/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_rerun"></a> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
 
 Rerun viewer with Gradio
 
@@ -33,68 +23,154 @@ pip install gradio_rerun
 ## Usage
 
 ```python
+import cv2
+import os
+import tempfile
+import time
+
 import gradio as gr
 from gradio_rerun import Rerun
 
+import rerun as rr
+import rerun.blueprint as rrb
 
-example = Rerun().example_value()
+from color_grid import build_color_grid
 
+# NOTE: Functions that work with Rerun should be decorated with `@rr.thread_local_stream`.
+# This decorator creates a generator-aware thread-local context so that rerun log calls
+# across multiple workers stay isolated.
 
-def predict(url: str, file_path: str | list[str] | None):
-    if url:
-        return url
-    return file_path
 
+# A task can directly log to a binary stream, which is routed to the embedded viewer.
+# Incremental chunks are yielded to the viewer using `yield stream.read()`.
+#
+# This is the preferred way to work with Rerun in Gradio since your data can be immediately and
+# incrementally seen by the viewer. Also, there are no ephemeral RRDs to cleanup or manage.
+@rr.thread_local_stream("rerun_example_streaming_blur")
+def streaming_repeated_blur(img):
+    stream = rr.binary_stream()
 
-with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                file_path = gr.File(file_count="multiple", type="filepath")
-                url = gr.Text(
-                    info="Or use a URL",
-                    label="URL",
-                )
-        with gr.Column():
-            pass
-    btn = gr.Button("Run", scale=0)
+    if img is None:
+        raise gr.Error("Must provide an image to blur.")
+
+    blueprint = rrb.Blueprint(
+        rrb.Horizontal(
+            rrb.Spatial2DView(origin="image/original"),
+            rrb.Spatial2DView(origin="image/blurred"),
+        ),
+        collapse_panels=True,
+    )
+
+    rr.send_blueprint(blueprint)
+
+    rr.set_time_sequence("iteration", 0)
+
+    rr.log("image/original", rr.Image(img))
+    yield stream.read()
+
+    blur = img
+
+    for i in range(100):
+        rr.set_time_sequence("iteration", i)
+
+        # Pretend blurring takes a while so we can see streaming in action.
+        time.sleep(0.1)
+        blur = cv2.GaussianBlur(blur, (5, 5), 0)
+
+        rr.log("image/blurred", rr.Image(blur))
+
+        # Each time we yield bytes from the stream back to Gradio, they
+        # are incrementally sent to the viewer. Make sure to yield any time
+        # you want the user to be able to see progress.
+        yield stream.read()
+
+
+# However, if you have a workflow that creates an RRD file instead, you can still send it
+# directly to the viewer by simply returning the path to the RRD file.
+#
+# This may be helpful if you need to execute a helper tool written in C++ or Rust that can't
+# be easily modified to stream data directly via Gradio.
+#
+# In this case you may want to clean up the RRD file after it's sent to the viewer so that you
+# don't accumulate too many  temporary files.
+@rr.thread_local_stream("rerun_example_cube_rrd")
+def create_cube_rrd(x, y, z, pending_cleanup):
+    cube = build_color_grid(int(x), int(y), int(z), twist=0)
+    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+
+    # We eventually want to clean up the RRD file after it's sent to the viewer, so tracking
+    # any pending files to be cleaned up when the state is deleted.
+    temp = tempfile.NamedTemporaryFile(prefix="cube_", suffix=".rrd", delete=False)
+    pending_cleanup.append(temp.name)
+
+    blueprint = rrb.Spatial3DView(origin="cube")
+    rr.save(temp.name, default_blueprint=blueprint)
+
+    # Just return the name of the file -- Gradio will convert it to a FileData object
+    # and send it to the viewer.
+    return temp.name
+
+
+def cleanup_cube_rrds(pending_cleanup):
+    for f in pending_cleanup:
+        os.unlink(f)
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Streaming"):
+        with gr.Row():
+            img = gr.Image(interactive=True, label="Image")
+            with gr.Column():
+                stream_blur = gr.Button("Stream Repeated Blur")
+
+    with gr.Tab("Dynamic RRD"):
+        pending_cleanup = gr.State(
+            [], time_to_live=10, delete_callback=cleanup_cube_rrds
+        )
+        with gr.Row():
+            x_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="X Count"
+            )
+            y_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Y Count"
+            )
+            z_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Z Count"
+            )
+        with gr.Row():
+            create_rrd = gr.Button("Create RRD")
+
+    with gr.Tab("Hosted RRD"):
+        with gr.Row():
+            # It may be helpful to point the viewer to a hosted RRD file on another server.
+            # If an RRD file is hosted via http, you can just return a URL to the file.
+            choose_rrd = gr.Dropdown(
+                label="RRD",
+                choices=[
+                    f"{rr.bindings.get_app_url()}/examples/arkit_scenes.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/dna.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/plots.rrd",
+                ],
+            )
+
+    # Rerun 0.16 has issues when embedded in a Gradio tab, so we share a viewer between all the tabs.
+    # In 0.17 we can instead scope each viewer to its own tab to clean up these examples further.
     with gr.Row():
-        rerun_viewer = Rerun(height=900)
-
-    inputs = [file_path, url]
-    outputs = [rerun_viewer]
-
-    gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
-
-    gr.Examples(
-        examples=[
-            [
-                None,
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            ],
-            [
-                ["./examples/rgbd.rrd"],
-                None,
-            ],
-            [
-                ["./examples/rrt-star.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
-                None,
-            ],
-        ],
-        fn=predict,
-        inputs=inputs,
-        outputs=outputs,
-        run_on_click=True,
+        viewer = Rerun(
+            streaming=True,
+        )
+
+    stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])
+
+    create_rrd.click(
+        create_cube_rrd,
+        inputs=[x_count, y_count, z_count, pending_cleanup],
+        outputs=[viewer],
     )
 
+    choose_rrd.change(lambda x: x, inputs=[choose_rrd], outputs=[viewer])
+
+
 if __name__ == "__main__":
     demo.launch()
 
@@ -119,12 +195,17 @@ if __name__ == "__main__":
 <td align="left" style="width: 25%;">
 
 ```python
-list[str] | None
+list[pathlib.Path | str]
+    | pathlib.Path
+    | str
+    | bytes
+    | Callable
+    | None
 ```
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">A path or URL for the default value that Rerun component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+<td align="left">Takes a singular or list of RRD resources. Each RRD can be a Path, a string containing a url, or a binary blob containing encoded RRD data. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
 </tr>
 
 <tr>
@@ -166,19 +247,6 @@ bool | None
 <td align="left">if True, will display label.</td>
 </tr>
 
-<tr>
-<td align="left"><code>show_download_button</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If True, will display button to download image.</td>
-</tr>
-
 <tr>
 <td align="left"><code>container</code></td>
 <td align="left" style="width: 25%;">
@@ -232,20 +300,20 @@ int | str
 </tr>
 
 <tr>
-<td align="left"><code>interactive</code></td>
+<td align="left"><code>visible</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+bool
 ```
 
 </td>
-<td align="left"><code>None</code></td>
-<td align="left">if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
 </tr>
 
 <tr>
-<td align="left"><code>visible</code></td>
+<td align="left"><code>streaming</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
@@ -253,8 +321,8 @@ bool
 ```
 
 </td>
-<td align="left"><code>True</code></td>
-<td align="left">If False, component will be hidden.</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the data should be incrementally yielded from the source as `bytes` returned by calling `.read()` on an `rr.binary_stream()`</td>
 </tr>
 
 <tr>
@@ -297,13 +365,8 @@ bool
 </tr>
 </tbody></table>
 
-### Events
 
-| name     | description                                                                                                                                                                                                                                                                           |
-| :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `clear`  | This listener is triggered when the user clears the Rerun using the X button for the component.                                                                                                                                                                                       |
-| `change` | Triggered when the value of the Rerun changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
-| `upload` | This listener is triggered when the user uploads a file into the Rerun.                                                                                                                                                                                                               |
+
 
 ### User function
 
@@ -314,15 +377,19 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As output:** Is passed, a `str` containing the path to the image.
-- **As input:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image.
+- **As output:** Is passed, a RerunData object.
+- **As input:** Should return, expects.
+
+ ```python
+ def predict(
+     value: RerunData | None
+ ) -> list[pathlib.Path | str] | pathlib.Path | str | bytes:
+     return value
+ ```
+ 
 
+## `RerunData`
 ```python
-def predict(
-    value: str | None
-) -> list[gradio.data_classes.FileData]
-   | gradio.data_classes.FileData
-   | str
-   | list[str]:
-    return value
+class RerunData(GradioRootModel):
+    root: list[FileData | str]
 ```

app.py

@@ -1,64 +1,150 @@
+import cv2
+import os
+import tempfile
+import time
+
 import gradio as gr
 from gradio_rerun import Rerun
 
+import rerun as rr
+import rerun.blueprint as rrb
 
-example = Rerun().example_value()
+from color_grid import build_color_grid
 
+# NOTE: Functions that work with Rerun should be decorated with `@rr.thread_local_stream`.
+# This decorator creates a generator-aware thread-local context so that rerun log calls
+# across multiple workers stay isolated.
 
-def predict(url: str, file_path: str | list[str] | None):
-    if url:
-        return url
-    return file_path
 
+# A task can directly log to a binary stream, which is routed to the embedded viewer.
+# Incremental chunks are yielded to the viewer using `yield stream.read()`.
+#
+# This is the preferred way to work with Rerun in Gradio since your data can be immediately and
+# incrementally seen by the viewer. Also, there are no ephemeral RRDs to cleanup or manage.
+@rr.thread_local_stream("rerun_example_streaming_blur")
+def streaming_repeated_blur(img):
+    stream = rr.binary_stream()
 
-with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                file_path = gr.File(file_count="multiple", type="filepath")
-                url = gr.Text(
-                    info="Or use a URL",
-                    label="URL",
-                )
-        with gr.Column():
-            pass
-    btn = gr.Button("Run", scale=0)
+    if img is None:
+        raise gr.Error("Must provide an image to blur.")
+
+    blueprint = rrb.Blueprint(
+        rrb.Horizontal(
+            rrb.Spatial2DView(origin="image/original"),
+            rrb.Spatial2DView(origin="image/blurred"),
+        ),
+        collapse_panels=True,
+    )
+
+    rr.send_blueprint(blueprint)
+
+    rr.set_time_sequence("iteration", 0)
+
+    rr.log("image/original", rr.Image(img))
+    yield stream.read()
+
+    blur = img
+
+    for i in range(100):
+        rr.set_time_sequence("iteration", i)
+
+        # Pretend blurring takes a while so we can see streaming in action.
+        time.sleep(0.1)
+        blur = cv2.GaussianBlur(blur, (5, 5), 0)
+
+        rr.log("image/blurred", rr.Image(blur))
+
+        # Each time we yield bytes from the stream back to Gradio, they
+        # are incrementally sent to the viewer. Make sure to yield any time
+        # you want the user to be able to see progress.
+        yield stream.read()
+
+
+# However, if you have a workflow that creates an RRD file instead, you can still send it
+# directly to the viewer by simply returning the path to the RRD file.
+#
+# This may be helpful if you need to execute a helper tool written in C++ or Rust that can't
+# be easily modified to stream data directly via Gradio.
+#
+# In this case you may want to clean up the RRD file after it's sent to the viewer so that you
+# don't accumulate too many  temporary files.
+@rr.thread_local_stream("rerun_example_cube_rrd")
+def create_cube_rrd(x, y, z, pending_cleanup):
+    cube = build_color_grid(int(x), int(y), int(z), twist=0)
+    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+
+    # We eventually want to clean up the RRD file after it's sent to the viewer, so tracking
+    # any pending files to be cleaned up when the state is deleted.
+    temp = tempfile.NamedTemporaryFile(prefix="cube_", suffix=".rrd", delete=False)
+    pending_cleanup.append(temp.name)
+
+    blueprint = rrb.Spatial3DView(origin="cube")
+    rr.save(temp.name, default_blueprint=blueprint)
+
+    # Just return the name of the file -- Gradio will convert it to a FileData object
+    # and send it to the viewer.
+    return temp.name
+
+
+def cleanup_cube_rrds(pending_cleanup):
+    for f in pending_cleanup:
+        os.unlink(f)
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Streaming"):
+        with gr.Row():
+            img = gr.Image(interactive=True, label="Image")
+            with gr.Column():
+                stream_blur = gr.Button("Stream Repeated Blur")
+
+    with gr.Tab("Dynamic RRD"):
+        pending_cleanup = gr.State(
+            [], time_to_live=10, delete_callback=cleanup_cube_rrds
+        )
+        with gr.Row():
+            x_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="X Count"
+            )
+            y_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Y Count"
+            )
+            z_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Z Count"
+            )
+        with gr.Row():
+            create_rrd = gr.Button("Create RRD")
+
+    with gr.Tab("Hosted RRD"):
+        with gr.Row():
+            # It may be helpful to point the viewer to a hosted RRD file on another server.
+            # If an RRD file is hosted via http, you can just return a URL to the file.
+            choose_rrd = gr.Dropdown(
+                label="RRD",
+                choices=[
+                    f"{rr.bindings.get_app_url()}/examples/arkit_scenes.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/dna.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/plots.rrd",
+                ],
+            )
+
+    # Rerun 0.16 has issues when embedded in a Gradio tab, so we share a viewer between all the tabs.
+    # In 0.17 we can instead scope each viewer to its own tab to clean up these examples further.
     with gr.Row():
-        rerun_viewer = Rerun(height=900)
-
-    inputs = [file_path, url]
-    outputs = [rerun_viewer]
-
-    gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
-
-    gr.Examples(
-        examples=[
-            [
-                None,
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            ],
-            [
-                ["./examples/rgbd.rrd"],
-                None,
-            ],
-            [
-                ["./examples/rrt-star.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
-                None,
-            ],
-        ],
-        fn=predict,
-        inputs=inputs,
-        outputs=outputs,
-        run_on_click=True,
+        viewer = Rerun(
+            streaming=True,
+        )
+
+    stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])
+
+    create_rrd.click(
+        create_cube_rrd,
+        inputs=[x_count, y_count, z_count, pending_cleanup],
+        outputs=[viewer],
     )
 
+    choose_rrd.change(lambda x: x, inputs=[choose_rrd], outputs=[viewer])
+
+
 if __name__ == "__main__":
     demo.launch()

color_grid.py

@@ -0,0 +1,49 @@
+import numpy as np
+from math import cos, sin
+from collections import namedtuple
+
+ColorGrid = namedtuple("ColorGrid", ["positions", "colors"])
+
+
+def build_color_grid(x_count=10, y_count=10, z_count=10, twist=0):
+    """
+    Create a cube of points with colors.
+
+    The total point cloud will have x_count * y_count * z_count points.
+
+    Parameters
+    ----------
+    x_count, y_count, z_count:
+        Number of points in each dimension.
+    twist:
+        Angle to twist from bottom to top of the cube
+
+    """
+
+    grid = np.mgrid[
+        slice(-x_count, x_count, x_count * 1j),
+        slice(-y_count, y_count, y_count * 1j),
+        slice(-z_count, z_count, z_count * 1j),
+    ]
+
+    angle = np.linspace(-float(twist) / 2, float(twist) / 2, z_count)
+    for z in range(z_count):
+        xv, yv, zv = grid[:, :, :, z]
+        rot_xv = xv * cos(angle[z]) - yv * sin(angle[z])
+        rot_yv = xv * sin(angle[z]) + yv * cos(angle[z])
+        grid[:, :, :, z] = [rot_xv, rot_yv, zv]
+
+    positions = np.vstack([xyz.ravel() for xyz in grid])
+
+    colors = np.vstack(
+        [
+            xyz.ravel()
+            for xyz in np.mgrid[
+                slice(0, 255, x_count * 1j),
+                slice(0, 255, y_count * 1j),
+                slice(0, 255, z_count * 1j),
+            ]
+        ]
+    )
+
+    return ColorGrid(positions.T, colors.T.astype(np.uint8))

css.css

@@ -1,156 +1,157 @@
 html {
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  background: #fff;
-  color: #323232;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 }
 
 :root {
-  --space: 1;
-  --vspace: calc(var(--space) * 1rem);
-  --vspace-0: calc(3 * var(--space) * 1rem);
-  --vspace-1: calc(2 * var(--space) * 1rem);
-  --vspace-2: calc(1.5 * var(--space) * 1rem);
-  --vspace-3: calc(0.5 * var(--space) * 1rem);
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
 }
-.gradio-container {
-  max-width: unset !important;
+
+.app {
+	max-width: 748px !important;
 }
 
 .prose p {
-  margin: var(--vspace) 0;
-  line-height: var(--vspace * 2);
-  font-size: 1rem;
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
 }
 
 code {
-  font-family: "Inconsolata", sans-serif;
-  font-size: 16px;
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
 }
 
 h1,
 h1 code {
-  font-weight: 400;
-  line-height: calc(2.5 / var(--space) * var(--vspace));
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
 }
 
 h1 code {
-  background: none;
-  border: none;
-  letter-spacing: 0.05em;
-  padding-bottom: 5px;
-  position: relative;
-  padding: 0;
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
 }
 
 h2 {
-  margin: var(--vspace-1) 0 var(--vspace-2) 0;
-  line-height: 1em;
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
 }
 
 h3,
 h3 code {
-  margin: var(--vspace-1) 0 var(--vspace-2) 0;
-  line-height: 1em;
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
 }
 
 h4,
 h5,
 h6 {
-  margin: var(--vspace-3) 0 var(--vspace-3) 0;
-  line-height: var(--vspace);
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
 }
 
 .bigtitle,
 h1,
 h1 code {
-  font-size: calc(8px * 4.5);
-  word-break: break-word;
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
 }
 
 .title,
 h2,
 h2 code {
-  font-size: calc(8px * 3.375);
-  font-weight: lighter;
-  word-break: break-word;
-  border: none;
-  background: none;
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
 }
 
 .subheading1,
 h3,
 h3 code {
-  font-size: calc(8px * 1.8);
-  font-weight: 600;
-  border: none;
-  background: none;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
 }
 
 h2 code {
-  padding: 0;
-  position: relative;
-  letter-spacing: 0.05em;
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
 }
 
 blockquote {
-  font-size: calc(8px * 1.1667);
-  font-style: italic;
-  line-height: calc(1.1667 * var(--vspace));
-  margin: var(--vspace-2) var(--vspace-2);
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
 }
 
 .subheading2,
 h4 {
-  font-size: calc(8px * 1.4292);
-  text-transform: uppercase;
-  font-weight: 600;
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
 }
 
 .subheading3,
 h5 {
-  font-size: calc(8px * 1.2917);
-  line-height: calc(1.2917 * var(--vspace));
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
 
-  font-weight: lighter;
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
 }
 
 h6 {
-  font-size: calc(8px * 1.1667);
-  font-size: 1.1667em;
-  font-weight: normal;
-  font-style: italic;
-  font-family: "le-monde-livre-classic-byol", serif !important;
-  letter-spacing: 0px !important;
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
 }
 
 #start .md > *:first-child {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 h2 + h3 {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 .md hr {
-  border: none;
-  border-top: 1px solid var(--block-border-color);
-  margin: var(--vspace-2) 0 var(--vspace-2) 0;
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
 }
 .prose ul {
-  margin: var(--vspace-2) 0 var(--vspace-1) 0;
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
 }
 
 .gap {
-  gap: 0;
+	gap: 0;
 }

requirements.txt

@@ -1 +1,2 @@
-gradio_rerun
+gradio_rerun
+opencv-python

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'Rerun': {'description': 'Creates an image component that can be used to upload images (as an input) or display images (as an output).', 'members': {'__init__': {'value': {'type': 'list[str] | None', 'default': 'None', 'description': 'A path or URL for the default value that Rerun component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will display button to download image.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'height': {'type': 'int | str', 'default': '640', 'description': 'height of component in pixels. If a string is provided, will be interpreted as a CSS value. If None, will be set to 640px.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'list[gradio.data_classes.FileData]\n    | gradio.data_classes.FileData\n    | str\n    | list[str]', 'description': 'Expects a `str` or `pathlib.Path` object containing the path to the image.'}}, 'preprocess': {'return': {'type': 'str | None', 'description': 'A `str` containing the path to the image.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the Rerun using the X button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the Rerun changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the Rerun.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Rerun': []}}}
+_docs = {'Rerun': {'description': 'Creates a Rerun viewer component that can be used to display the output of a Rerun stream.', 'members': {'__init__': {'value': {'type': 'list[pathlib.Path | str]\n    | pathlib.Path\n    | str\n    | bytes\n    | Callable\n    | None', 'default': 'None', 'description': 'Takes a singular or list of RRD resources. Each RRD can be a Path, a string containing a url, or a binary blob containing encoded RRD data. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'height': {'type': 'int | str', 'default': '640', 'description': 'height of component in pixels. If a string is provided, will be interpreted as a CSS value. If None, will be set to 640px.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'streaming': {'type': 'bool', 'default': 'False', 'description': 'If True, the data should be incrementally yielded from the source as `bytes` returned by calling `.read()` on an `rr.binary_stream()`'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'list[pathlib.Path | str] | pathlib.Path | str | bytes', 'description': 'Expects'}}, 'preprocess': {'return': {'type': 'RerunData | None', 'description': 'A RerunData object.'}, 'value': None}}, 'events': {}}, '__meta__': {'additional_interfaces': {'RerunData': {'source': 'class RerunData(GradioRootModel):\n    root: list[FileData | str]'}}, 'user_fn_refs': {'Rerun': ['RerunData']}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_rerun`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+<a href="https://pypi.org/project/gradio_rerun/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_rerun"></a> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
 </div>
 
 Rerun viewer with Gradio
@@ -38,68 +38,154 @@ pip install gradio_rerun
 ## Usage
 
 ```python
+import cv2
+import os
+import tempfile
+import time
+
 import gradio as gr
 from gradio_rerun import Rerun
 
+import rerun as rr
+import rerun.blueprint as rrb
 
-example = Rerun().example_value()
+from color_grid import build_color_grid
 
+# NOTE: Functions that work with Rerun should be decorated with `@rr.thread_local_stream`.
+# This decorator creates a generator-aware thread-local context so that rerun log calls
+# across multiple workers stay isolated.
 
-def predict(url: str, file_path: str | list[str] | None):
-    if url:
-        return url
-    return file_path
 
+# A task can directly log to a binary stream, which is routed to the embedded viewer.
+# Incremental chunks are yielded to the viewer using `yield stream.read()`.
+#
+# This is the preferred way to work with Rerun in Gradio since your data can be immediately and
+# incrementally seen by the viewer. Also, there are no ephemeral RRDs to cleanup or manage.
+@rr.thread_local_stream("rerun_example_streaming_blur")
+def streaming_repeated_blur(img):
+    stream = rr.binary_stream()
 
-with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                file_path = gr.File(file_count="multiple", type="filepath")
-                url = gr.Text(
-                    info="Or use a URL",
-                    label="URL",
-                )
-        with gr.Column():
-            pass
-    btn = gr.Button("Run", scale=0)
+    if img is None:
+        raise gr.Error("Must provide an image to blur.")
+
+    blueprint = rrb.Blueprint(
+        rrb.Horizontal(
+            rrb.Spatial2DView(origin="image/original"),
+            rrb.Spatial2DView(origin="image/blurred"),
+        ),
+        collapse_panels=True,
+    )
+
+    rr.send_blueprint(blueprint)
+
+    rr.set_time_sequence("iteration", 0)
+
+    rr.log("image/original", rr.Image(img))
+    yield stream.read()
+
+    blur = img
+
+    for i in range(100):
+        rr.set_time_sequence("iteration", i)
+
+        # Pretend blurring takes a while so we can see streaming in action.
+        time.sleep(0.1)
+        blur = cv2.GaussianBlur(blur, (5, 5), 0)
+
+        rr.log("image/blurred", rr.Image(blur))
+
+        # Each time we yield bytes from the stream back to Gradio, they
+        # are incrementally sent to the viewer. Make sure to yield any time
+        # you want the user to be able to see progress.
+        yield stream.read()
+
+
+# However, if you have a workflow that creates an RRD file instead, you can still send it
+# directly to the viewer by simply returning the path to the RRD file.
+#
+# This may be helpful if you need to execute a helper tool written in C++ or Rust that can't
+# be easily modified to stream data directly via Gradio.
+#
+# In this case you may want to clean up the RRD file after it's sent to the viewer so that you
+# don't accumulate too many  temporary files.
+@rr.thread_local_stream("rerun_example_cube_rrd")
+def create_cube_rrd(x, y, z, pending_cleanup):
+    cube = build_color_grid(int(x), int(y), int(z), twist=0)
+    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+
+    # We eventually want to clean up the RRD file after it's sent to the viewer, so tracking
+    # any pending files to be cleaned up when the state is deleted.
+    temp = tempfile.NamedTemporaryFile(prefix="cube_", suffix=".rrd", delete=False)
+    pending_cleanup.append(temp.name)
+
+    blueprint = rrb.Spatial3DView(origin="cube")
+    rr.save(temp.name, default_blueprint=blueprint)
+
+    # Just return the name of the file -- Gradio will convert it to a FileData object
+    # and send it to the viewer.
+    return temp.name
+
+
+def cleanup_cube_rrds(pending_cleanup):
+    for f in pending_cleanup:
+        os.unlink(f)
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Streaming"):
+        with gr.Row():
+            img = gr.Image(interactive=True, label="Image")
+            with gr.Column():
+                stream_blur = gr.Button("Stream Repeated Blur")
+
+    with gr.Tab("Dynamic RRD"):
+        pending_cleanup = gr.State(
+            [], time_to_live=10, delete_callback=cleanup_cube_rrds
+        )
+        with gr.Row():
+            x_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="X Count"
+            )
+            y_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Y Count"
+            )
+            z_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Z Count"
+            )
+        with gr.Row():
+            create_rrd = gr.Button("Create RRD")
+
+    with gr.Tab("Hosted RRD"):
+        with gr.Row():
+            # It may be helpful to point the viewer to a hosted RRD file on another server.
+            # If an RRD file is hosted via http, you can just return a URL to the file.
+            choose_rrd = gr.Dropdown(
+                label="RRD",
+                choices=[
+                    f"{rr.bindings.get_app_url()}/examples/arkit_scenes.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/dna.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/plots.rrd",
+                ],
+            )
+
+    # Rerun 0.16 has issues when embedded in a Gradio tab, so we share a viewer between all the tabs.
+    # In 0.17 we can instead scope each viewer to its own tab to clean up these examples further.
     with gr.Row():
-        rerun_viewer = Rerun(height=900)
-
-    inputs = [file_path, url]
-    outputs = [rerun_viewer]
-
-    gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
-
-    gr.Examples(
-        examples=[
-            [
-                None,
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            ],
-            [
-                ["./examples/rgbd.rrd"],
-                None,
-            ],
-            [
-                ["./examples/rrt-star.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
-                None,
-            ],
-        ],
-        fn=predict,
-        inputs=inputs,
-        outputs=outputs,
-        run_on_click=True,
+        viewer = Rerun(
+            streaming=True,
+        )
+
+    stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])
+
+    create_rrd.click(
+        create_cube_rrd,
+        inputs=[x_count, y_count, z_count, pending_cleanup],
+        outputs=[viewer],
     )
 
+    choose_rrd.change(lambda x: x, inputs=[choose_rrd], outputs=[viewer])
+
+
 if __name__ == "__main__":
     demo.launch()
 
@@ -113,11 +199,7 @@ if __name__ == "__main__":
 ### Initialization
 """, elem_classes=["md-custom"], header_links=True)
 
-    gr.ParamViewer(value=_docs["Rerun"]["members"]["__init__"], linkify=[])
-
-
-    gr.Markdown("### Events")
-    gr.ParamViewer(value=_docs["Rerun"]["events"], linkify=['Event'])
+    gr.ParamViewer(value=_docs["Rerun"]["members"]["__init__"], linkify=['RerunData'])
 
 
 
@@ -133,16 +215,13 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As input:** Is passed, a `str` containing the path to the image.
-- **As output:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image.
+- **As input:** Is passed, a RerunData object.
+- **As output:** Should return, expects.
 
  ```python
 def predict(
-    value: str | None
-) -> list[gradio.data_classes.FileData]
-    | gradio.data_classes.FileData
-    | str
-    | list[str]:
+    value: RerunData | None
+) -> list[pathlib.Path | str] | pathlib.Path | str | bytes:
     return value
 ```
 """, elem_classes=["md-custom", "Rerun-user-fn"], header_links=True)
@@ -150,10 +229,18 @@ def predict(
 
 
 
+    code_RerunData = gr.Markdown("""
+## `RerunData`
+```python
+class RerunData(GradioRootModel):
+    root: list[FileData | str]
+```""", elem_classes=["md-custom", "RerunData"], header_links=True)
+
     demo.load(None, js=r"""function() {
-    const refs = {};
+    const refs = {
+            RerunData: [], };
     const user_fn_refs = {
-          Rerun: [], };
+          Rerun: ['RerunData'], };
     requestAnimationFrame(() => {
 
         Object.entries(user_fn_refs).forEach(([key, refs]) => {

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_rerun`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+<a href="https://pypi.org/project/gradio_rerun/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_rerun"></a> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
 
 Rerun viewer with Gradio
 
@@ -23,68 +23,154 @@ pip install gradio_rerun
 ## Usage
 
 ```python
+import cv2
+import os
+import tempfile
+import time
+
 import gradio as gr
 from gradio_rerun import Rerun
 
+import rerun as rr
+import rerun.blueprint as rrb
 
-example = Rerun().example_value()
+from color_grid import build_color_grid
 
+# NOTE: Functions that work with Rerun should be decorated with `@rr.thread_local_stream`.
+# This decorator creates a generator-aware thread-local context so that rerun log calls
+# across multiple workers stay isolated.
 
-def predict(url: str, file_path: str | list[str] | None):
-    if url:
-        return url
-    return file_path
 
+# A task can directly log to a binary stream, which is routed to the embedded viewer.
+# Incremental chunks are yielded to the viewer using `yield stream.read()`.
+#
+# This is the preferred way to work with Rerun in Gradio since your data can be immediately and
+# incrementally seen by the viewer. Also, there are no ephemeral RRDs to cleanup or manage.
+@rr.thread_local_stream("rerun_example_streaming_blur")
+def streaming_repeated_blur(img):
+    stream = rr.binary_stream()
 
-with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                file_path = gr.File(file_count="multiple", type="filepath")
-                url = gr.Text(
-                    info="Or use a URL",
-                    label="URL",
-                )
-        with gr.Column():
-            pass
-    btn = gr.Button("Run", scale=0)
+    if img is None:
+        raise gr.Error("Must provide an image to blur.")
+
+    blueprint = rrb.Blueprint(
+        rrb.Horizontal(
+            rrb.Spatial2DView(origin="image/original"),
+            rrb.Spatial2DView(origin="image/blurred"),
+        ),
+        collapse_panels=True,
+    )
+
+    rr.send_blueprint(blueprint)
+
+    rr.set_time_sequence("iteration", 0)
+
+    rr.log("image/original", rr.Image(img))
+    yield stream.read()
+
+    blur = img
+
+    for i in range(100):
+        rr.set_time_sequence("iteration", i)
+
+        # Pretend blurring takes a while so we can see streaming in action.
+        time.sleep(0.1)
+        blur = cv2.GaussianBlur(blur, (5, 5), 0)
+
+        rr.log("image/blurred", rr.Image(blur))
+
+        # Each time we yield bytes from the stream back to Gradio, they
+        # are incrementally sent to the viewer. Make sure to yield any time
+        # you want the user to be able to see progress.
+        yield stream.read()
+
+
+# However, if you have a workflow that creates an RRD file instead, you can still send it
+# directly to the viewer by simply returning the path to the RRD file.
+#
+# This may be helpful if you need to execute a helper tool written in C++ or Rust that can't
+# be easily modified to stream data directly via Gradio.
+#
+# In this case you may want to clean up the RRD file after it's sent to the viewer so that you
+# don't accumulate too many  temporary files.
+@rr.thread_local_stream("rerun_example_cube_rrd")
+def create_cube_rrd(x, y, z, pending_cleanup):
+    cube = build_color_grid(int(x), int(y), int(z), twist=0)
+    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+
+    # We eventually want to clean up the RRD file after it's sent to the viewer, so tracking
+    # any pending files to be cleaned up when the state is deleted.
+    temp = tempfile.NamedTemporaryFile(prefix="cube_", suffix=".rrd", delete=False)
+    pending_cleanup.append(temp.name)
+
+    blueprint = rrb.Spatial3DView(origin="cube")
+    rr.save(temp.name, default_blueprint=blueprint)
+
+    # Just return the name of the file -- Gradio will convert it to a FileData object
+    # and send it to the viewer.
+    return temp.name
+
+
+def cleanup_cube_rrds(pending_cleanup):
+    for f in pending_cleanup:
+        os.unlink(f)
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Streaming"):
+        with gr.Row():
+            img = gr.Image(interactive=True, label="Image")
+            with gr.Column():
+                stream_blur = gr.Button("Stream Repeated Blur")
+
+    with gr.Tab("Dynamic RRD"):
+        pending_cleanup = gr.State(
+            [], time_to_live=10, delete_callback=cleanup_cube_rrds
+        )
+        with gr.Row():
+            x_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="X Count"
+            )
+            y_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Y Count"
+            )
+            z_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Z Count"
+            )
+        with gr.Row():
+            create_rrd = gr.Button("Create RRD")
+
+    with gr.Tab("Hosted RRD"):
+        with gr.Row():
+            # It may be helpful to point the viewer to a hosted RRD file on another server.
+            # If an RRD file is hosted via http, you can just return a URL to the file.
+            choose_rrd = gr.Dropdown(
+                label="RRD",
+                choices=[
+                    f"{rr.bindings.get_app_url()}/examples/arkit_scenes.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/dna.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/plots.rrd",
+                ],
+            )
+
+    # Rerun 0.16 has issues when embedded in a Gradio tab, so we share a viewer between all the tabs.
+    # In 0.17 we can instead scope each viewer to its own tab to clean up these examples further.
     with gr.Row():
-        rerun_viewer = Rerun(height=900)
-
-    inputs = [file_path, url]
-    outputs = [rerun_viewer]
-
-    gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
-
-    gr.Examples(
-        examples=[
-            [
-                None,
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            ],
-            [
-                ["./examples/rgbd.rrd"],
-                None,
-            ],
-            [
-                ["./examples/rrt-star.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
-                None,
-            ],
-        ],
-        fn=predict,
-        inputs=inputs,
-        outputs=outputs,
-        run_on_click=True,
+        viewer = Rerun(
+            streaming=True,
+        )
+
+    stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])
+
+    create_rrd.click(
+        create_cube_rrd,
+        inputs=[x_count, y_count, z_count, pending_cleanup],
+        outputs=[viewer],
     )
 
+    choose_rrd.change(lambda x: x, inputs=[choose_rrd], outputs=[viewer])
+
+
 if __name__ == "__main__":
     demo.launch()
 
@@ -109,12 +195,17 @@ if __name__ == "__main__":
 <td align="left" style="width: 25%;">
 
 ```python
-list[str] | None
+list[pathlib.Path | str]
+    | pathlib.Path
+    | str
+    | bytes
+    | Callable
+    | None
 ```
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">A path or URL for the default value that Rerun component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+<td align="left">Takes a singular or list of RRD resources. Each RRD can be a Path, a string containing a url, or a binary blob containing encoded RRD data. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
 </tr>
 
 <tr>
@@ -156,19 +247,6 @@ bool | None
 <td align="left">if True, will display label.</td>
 </tr>
 
-<tr>
-<td align="left"><code>show_download_button</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">If True, will display button to download image.</td>
-</tr>
-
 <tr>
 <td align="left"><code>container</code></td>
 <td align="left" style="width: 25%;">
@@ -222,20 +300,20 @@ int | str
 </tr>
 
 <tr>
-<td align="left"><code>interactive</code></td>
+<td align="left"><code>visible</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+bool
 ```
 
 </td>
-<td align="left"><code>None</code></td>
-<td align="left">if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
 </tr>
 
 <tr>
-<td align="left"><code>visible</code></td>
+<td align="left"><code>streaming</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
@@ -243,8 +321,8 @@ bool
 ```
 
 </td>
-<td align="left"><code>True</code></td>
-<td align="left">If False, component will be hidden.</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the data should be incrementally yielded from the source as `bytes` returned by calling `.read()` on an `rr.binary_stream()`</td>
 </tr>
 
 <tr>
@@ -288,14 +366,6 @@ bool
 </tbody></table>
 
 
-### Events
-
-| name | description |
-|:-----|:------------|
-| `clear` | This listener is triggered when the user clears the Rerun using the X button for the component. |
-| `change` | Triggered when the value of the Rerun changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
-| `upload` | This listener is triggered when the user uploads a file into the Rerun. |
-
 
 
 ### User function
@@ -307,16 +377,19 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As output:** Is passed, a `str` containing the path to the image.
-- **As input:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image.
+- **As output:** Is passed, a RerunData object.
+- **As input:** Should return, expects.
 
  ```python
  def predict(
-     value: str | None
- ) -> list[gradio.data_classes.FileData]
-    | gradio.data_classes.FileData
-    | str
-    | list[str]:
+     value: RerunData | None
+ ) -> list[pathlib.Path | str] | pathlib.Path | str | bytes:
      return value
  ```
  
+
+## `RerunData`
+```python
+class RerunData(GradioRootModel):
+    root: list[FileData | str]
+```

src/backend/gradio_rerun/rerun.py

@@ -3,73 +3,69 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import Any
+from typing import Any, Callable
 
 from gradio_client import file
-
-from gradio.components.base import Component
+from gradio import processing_utils
+from gradio.components.base import Component, StreamingOutput
 from gradio.data_classes import GradioRootModel, FileData
 from gradio.events import Events
 
 
 class RerunData(GradioRootModel):
     """
-    Data model for Rerun component it can be a list of FileData, FileData, or as list of URLs.
+    Data model for Rerun component is a list of data sources.
+
+    `FileData` is used for data served from Gradio, while `str` is used for URLs Rerun will open from a remote server.
     """
 
-    root: list[FileData] | FileData | str | list[str]
+    root: list[FileData | str]
 
 
-class Rerun(Component):
+class Rerun(Component, StreamingOutput):
     """
-    Creates an image component that can be used to upload images (as an input) or display images (as an output).
+    Creates a Rerun viewer component that can be used to display the output of a Rerun stream.
     """
 
-    EVENTS = [
-        Events.clear,
-        Events.change,
-        Events.upload,
-    ]
+    EVENTS: list[Events] = []
 
     data_model = RerunData
 
     def __init__(
         self,
-        value: list[str] | None = None,
+        value: list[Path | str] | Path | str | bytes | Callable | None = None,
         *,
         label: str | None = None,
         every: float | None = None,
         show_label: bool | None = None,
-        show_download_button: bool = True,
         container: bool = True,
         scale: int | None = None,
         min_width: int = 160,
         height: int | str = 640,
-        interactive: bool | None = None,
         visible: bool = True,
+        streaming: bool = False,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
     ):
         """
         Parameters:
-            value: A path or URL for the default value that Rerun component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            value: Takes a singular or list of RRD resources. Each RRD can be a Path, a string containing a url, or a binary blob containing encoded RRD data. If callable, the function will be called whenever the app loads to set the initial value of the component.
             label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
             show_label: if True, will display label.
-            show_download_button: If True, will display button to download image.
             container: If True, will place the component in a container - providing some extra padding around the border.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
             height: height of component in pixels. If a string is provided, will be interpreted as a CSS value. If None, will be set to 640px.
-            interactive: if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
             visible: If False, component will be hidden.
+            streaming: If True, the data should be incrementally yielded from the source as `bytes` returned by calling `.read()` on an `rr.binary_stream()`
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
         """
-        self.show_download_button = show_download_button
         self.height = height
+        self.streaming = streaming
         super().__init__(
             label=label,
             every=every,
@@ -77,7 +73,7 @@ class Rerun(Component):
             container=container,
             scale=scale,
             min_width=min_width,
-            interactive=interactive,
+            interactive=False,  # Rerun is an output-component only
             visible=visible,
             elem_id=elem_id,
             elem_classes=elem_classes,
@@ -85,39 +81,51 @@ class Rerun(Component):
             value=value,
         )
 
-    def preprocess(self, payload: FileData | list[FileData] | None) -> str | None:
+    def preprocess(self, payload: RerunData | None) -> RerunData | None:
         """
+        This component does not accept input.
+
         Parameters:
-            payload: A FileData object containing the image data.
+            payload: A RerunData object.
         Returns:
-            A `str` containing the path to the image.
+            A RerunData object.
         """
         if payload is None:
             return None
         return payload
 
     def postprocess(
-        self, value: list[FileData] | FileData | str | list[str]
-    ) -> RerunData:
+        self, value: list[Path | str] | Path | str | bytes
+    ) -> RerunData | bytes:
         """
         Parameters:
-            value: Expects a `str` or `pathlib.Path` object containing the path to the image.
+            value: Expects
         Returns:
             A FileData object containing the image data.
         """
         if value is None:
             return RerunData(root=[])
 
+        if isinstance(value, bytes):
+            if self.streaming:
+                return value
+            file_path = processing_utils.save_bytes_to_cache(
+                value, "rrd", cache_dir=self.GRADIO_CACHE
+            )
+            return RerunData(root=[FileData(path=file_path)])
+
         if not isinstance(value, list):
             value = [value]
 
-        def is_url(input: str) -> bool:
+        def is_url(input: Path | str) -> bool:
+            if isinstance(input, Path):
+                return False
             return input.startswith("http://") or input.startswith("https://")
 
         return RerunData(
             root=[
                 FileData(
-                    path=file,
+                    path=str(file),
                     orig_name=Path(file).name,
                     size=Path(file).stat().st_size,
                 )
@@ -127,18 +135,25 @@ class Rerun(Component):
             ]
         )
 
+    def stream_output(
+        self, value, output_id: str, first_chunk: bool
+    ) -> tuple[bytes | None, Any]:
+        output_file = {
+            "path": output_id,
+            "is_stream": True,
+        }
+        if value is None:
+            return None, output_file
+        return value, output_file
+
+    def check_streamable(self):
+        return self.streaming
+
     def example_payload(self) -> Any:
-        return [
-            file(
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd"
-            ),
-            file(
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd"
-            ),
-        ]
+        return []
 
     def example_value(self) -> Any:
         return [
-            "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
+            "https://app.rerun.io/version/0.16.0/examples/detect_and_track_objects.rrd",
+            "https://app.rerun.io/version/0.16.0/examples/dna.rrd",
         ]

src/backend/gradio_rerun/templates/component/index.js

@@ -1,16 +1,16 @@
-let be = null;
+let he = null;
 async function Bt() {
-  return be || (be = (await import("./re_viewer-Ds4oCzjL.js")).WebHandle, be);
+  return he || (he = (await import("./re_viewer-DOCTrs8v.js")).WebHandle, he);
 }
 function Dt() {
-  const n = new Uint8Array(16);
-  return crypto.getRandomValues(n), Array.from(n).map((e) => e.toString(16).padStart(2, "0")).join("");
+  const l = new Uint8Array(16);
+  return crypto.getRandomValues(l), Array.from(l).map((e) => e.toString(16).padStart(2, "0")).join("");
 }
 class Ht {
   /** @type {(import("./re_viewer.js").WebHandle) | null} */
   #e = null;
   /** @type {HTMLCanvasElement | null} */
-  #l = null;
+  #n = null;
   /** @type {'ready' | 'starting' | 'stopped'} */
   #t = "stopped";
   /**
@@ -18,17 +18,24 @@ class Ht {
    *
    * @param {string | string[]} [rrd] URLs to `.rrd` files or WebSocket connections to our SDK.
    * @param {HTMLElement} [parent] The element to attach the canvas onto.
+   * @param {boolean} [hide_welcome_screen] Whether to hide the welcome screen.
    * @returns {Promise<void>}
    */
-  async start(e, t = document.body) {
+  async start(e, t = document.body, n = !1) {
     if (this.#t !== "stopped")
       return;
-    this.#t = "starting", this.#l = document.createElement("canvas"), this.#l.id = Dt(), t.append(this.#l);
-    let l = await Bt();
-    if (this.#t === "starting" && (this.#e = new l(), await this.#e.start(this.#l.id, void 0), this.#t === "starting")) {
+    this.#t = "starting", this.#n = document.createElement("canvas"), this.#n.id = Dt(), t.append(this.#n);
+    let i = await Bt();
+    if (this.#t === "starting" && (this.#e = new i(), await this.#e.start(
+      this.#n.id,
+      void 0,
+      void 0,
+      void 0,
+      n
+    ), this.#t === "starting")) {
       if (this.#e.has_panicked())
         throw new Error(`Web viewer crashed: ${this.#e.panic_message()}`);
-      e && this.open(e);
+      this.#t = "ready", e && this.open(e);
     }
   }
   /**
@@ -45,13 +52,16 @@ class Ht {
    * @see {WebViewer.start}
    *
    * @param {string | string[]} rrd URLs to `.rrd` files or WebSocket connections to our SDK.
+   * @param {{ follow_if_http?: boolean }} options
+   *        - follow_if_http: Whether Rerun should open the resource in "Following" mode when streaming
+   *        from an HTTP url. Defaults to `false`. Ignored for non-HTTP URLs.
    */
-  open(e) {
+  open(e, t = {}) {
     if (!this.#e)
       throw new Error(`attempted to open \`${e}\` in a stopped viewer`);
-    const t = Array.isArray(e) ? e : [e];
-    for (const l of t)
-      if (this.#e.add_receiver(l), this.#e.has_panicked())
+    const n = Array.isArray(e) ? e : [e];
+    for (const i of n)
+      if (this.#e.add_receiver(i, t.follow_if_http), this.#e.has_panicked())
         throw new Error(`Web viewer crashed: ${this.#e.panic_message()}`);
   }
   /**
@@ -67,8 +77,8 @@ class Ht {
     if (!this.#e)
       throw new Error(`attempted to close \`${e}\` in a stopped viewer`);
     const t = Array.isArray(e) ? e : [e];
-    for (const l of t)
-      if (this.#e.remove_receiver(l), this.#e.has_panicked())
+    for (const n of t)
+      if (this.#e.remove_receiver(n), this.#e.has_panicked())
         throw new Error(`Web viewer crashed: ${this.#e.panic_message()}`);
   }
   /**
@@ -77,138 +87,199 @@ class Ht {
    * The same viewer instance may be started multiple times.
    */
   stop() {
-    this.#t !== "stopped" && (this.#t = "stopped", this.#l?.remove(), this.#e?.destroy(), this.#e?.free(), this.#l = null, this.#e = null);
+    this.#t !== "stopped" && (this.#t = "stopped", this.#n?.remove(), this.#e?.destroy(), this.#e?.free(), this.#n = null, this.#e = null);
+  }
+  /**
+   * Opens a new channel for sending log messages.
+   *
+   * The channel can be used to incrementally push `rrd` chunks into the viewer.
+   *
+   * @param {string} channel_name used to identify the channel.
+   *
+   * @returns {LogChannel}
+   */
+  open_channel(e = "rerun-io/web-viewer") {
+    if (!this.#e)
+      throw new Error("...");
+    const t = crypto.randomUUID();
+    this.#e.open_channel(t, e);
+    const n = (o) => {
+      if (!this.#e)
+        throw new Error("...");
+      this.#e.send_rrd_to_channel(t, o);
+    }, i = () => {
+      if (!this.#e)
+        throw new Error("...");
+      this.#e.close_channel(t);
+    }, s = () => this.#t;
+    return new Ot(n, i, s);
+  }
+}
+class Ot {
+  #e;
+  #n;
+  #t;
+  #l = !1;
+  /** @internal
+   *
+   * @param {(data: Uint8Array) => void} on_send
+   * @param {() => void} on_close
+   * @param {() => 'ready' | 'starting' | 'stopped'} get_state
+   */
+  constructor(e, t, n) {
+    this.#e = e, this.#n = t, this.#t = n;
+  }
+  get ready() {
+    return !this.#l && this.#t() === "ready";
+  }
+  /**
+   * Send an `rrd` containing log messages to the viewer.
+   *
+   * Does nothing if `!this.ready`.
+   *
+   * @param {Uint8Array} rrd_bytes Is an rrd file stored in a byte array, received via some other side channel.
+   */
+  send_rrd(e) {
+    this.ready && this.#e(e);
+  }
+  /**
+   * Close the channel.
+   *
+   * Does nothing if `!this.ready`.
+   */
+  close() {
+    this.ready && (this.#n(), this.#l = !0);
   }
 }
 const {
   SvelteComponent: Tt,
-  assign: Rt,
-  create_slot: Xt,
-  detach: Yt,
-  element: Gt,
-  get_all_dirty_from_scope: Ot,
-  get_slot_changes: Ut,
-  get_spread_update: Jt,
-  init: Kt,
-  insert: Qt,
-  safe_not_equal: xt,
+  assign: Ut,
+  create_slot: Jt,
+  detach: Rt,
+  element: Xt,
+  get_all_dirty_from_scope: Yt,
+  get_slot_changes: Gt,
+  get_spread_update: Kt,
+  init: Qt,
+  insert: xt,
+  safe_not_equal: $t,
   set_dynamic_element_data: Pe,
   set_style: V,
   toggle_class: B,
   transition_in: dt,
   transition_out: mt,
-  update_slot_base: $t
+  update_slot_base: en
 } = window.__gradio__svelte__internal;
-function el(n) {
-  let e, t, l;
+function tn(l) {
+  let e, t, n;
   const i = (
     /*#slots*/
-    n[18].default
-  ), s = Xt(
+    l[18].default
+  ), s = Jt(
     i,
-    n,
+    l,
     /*$$scope*/
-    n[17],
+    l[17],
     null
   );
   let o = [
     { "data-testid": (
       /*test_id*/
-      n[7]
+      l[7]
     ) },
     { id: (
       /*elem_id*/
-      n[2]
+      l[2]
     ) },
     {
       class: t = "block " + /*elem_classes*/
-      n[3].join(" ") + " svelte-nl1om8"
+      l[3].join(" ") + " svelte-nl1om8"
     }
   ], a = {};
   for (let r = 0; r < o.length; r += 1)
-    a = Rt(a, o[r]);
+    a = Ut(a, o[r]);
   return {
     c() {
-      e = Gt(
+      e = Xt(
         /*tag*/
-        n[14]
+        l[14]
       ), s && s.c(), Pe(
         /*tag*/
-        n[14]
+        l[14]
       )(e, a), B(
         e,
         "hidden",
         /*visible*/
-        n[10] === !1
+        l[10] === !1
       ), B(
         e,
         "padded",
         /*padding*/
-        n[6]
+        l[6]
       ), B(
         e,
         "border_focus",
         /*border_mode*/
-        n[5] === "focus"
+        l[5] === "focus"
       ), B(
         e,
         "border_contrast",
         /*border_mode*/
-        n[5] === "contrast"
+        l[5] === "contrast"
       ), B(e, "hide-container", !/*explicit_call*/
-      n[8] && !/*container*/
-      n[9]), V(
+      l[8] && !/*container*/
+      l[9]), V(
         e,
         "height",
         /*get_dimension*/
-        n[15](
+        l[15](
           /*height*/
-          n[0]
+          l[0]
         )
       ), V(e, "width", typeof /*width*/
-      n[1] == "number" ? `calc(min(${/*width*/
-      n[1]}px, 100%))` : (
+      l[1] == "number" ? `calc(min(${/*width*/
+      l[1]}px, 100%))` : (
         /*get_dimension*/
-        n[15](
+        l[15](
           /*width*/
-          n[1]
+          l[1]
         )
       )), V(
         e,
         "border-style",
         /*variant*/
-        n[4]
+        l[4]
       ), V(
         e,
         "overflow",
         /*allow_overflow*/
-        n[11] ? "visible" : "hidden"
+        l[11] ? "visible" : "hidden"
       ), V(
         e,
         "flex-grow",
         /*scale*/
-        n[12]
+        l[12]
       ), V(e, "min-width", `calc(min(${/*min_width*/
-      n[13]}px, 100%))`), V(e, "border-width", "var(--block-border-width)");
+      l[13]}px, 100%))`), V(e, "border-width", "var(--block-border-width)");
     },
     m(r, f) {
-      Qt(r, e, f), s && s.m(e, null), l = !0;
+      xt(r, e, f), s && s.m(e, null), n = !0;
     },
     p(r, f) {
-      s && s.p && (!l || f & /*$$scope*/
-      131072) && $t(
+      s && s.p && (!n || f & /*$$scope*/
+      131072) && en(
         s,
         i,
         r,
         /*$$scope*/
         r[17],
-        l ? Ut(
+        n ? Gt(
           i,
           /*$$scope*/
           r[17],
           f,
           null
-        ) : Ot(
+        ) : Yt(
           /*$$scope*/
           r[17]
         ),
@@ -216,18 +287,18 @@ function el(n) {
       ), Pe(
         /*tag*/
         r[14]
-      )(e, a = Jt(o, [
-        (!l || f & /*test_id*/
+      )(e, a = Kt(o, [
+        (!n || f & /*test_id*/
         128) && { "data-testid": (
           /*test_id*/
           r[7]
         ) },
-        (!l || f & /*elem_id*/
+        (!n || f & /*elem_id*/
         4) && { id: (
           /*elem_id*/
           r[2]
         ) },
-        (!l || f & /*elem_classes*/
+        (!n || f & /*elem_classes*/
         8 && t !== (t = "block " + /*elem_classes*/
         r[3].join(" ") + " svelte-nl1om8")) && { class: t }
       ])), B(
@@ -293,55 +364,55 @@ function el(n) {
       r[13]}px, 100%))`);
     },
     i(r) {
-      l || (dt(s, r), l = !0);
+      n || (dt(s, r), n = !0);
     },
     o(r) {
-      mt(s, r), l = !1;
+      mt(s, r), n = !1;
     },
     d(r) {
-      r && Yt(e), s && s.d(r);
+      r && Rt(e), s && s.d(r);
     }
   };
 }
-function tl(n) {
+function nn(l) {
   let e, t = (
     /*tag*/
-    n[14] && el(n)
+    l[14] && tn(l)
   );
   return {
     c() {
       t && t.c();
     },
-    m(l, i) {
-      t && t.m(l, i), e = !0;
+    m(n, i) {
+      t && t.m(n, i), e = !0;
     },
-    p(l, [i]) {
+    p(n, [i]) {
       /*tag*/
-      l[14] && t.p(l, i);
+      n[14] && t.p(n, i);
     },
-    i(l) {
-      e || (dt(t, l), e = !0);
+    i(n) {
+      e || (dt(t, n), e = !0);
     },
-    o(l) {
-      mt(t, l), e = !1;
+    o(n) {
+      mt(t, n), e = !1;
     },
-    d(l) {
-      t && t.d(l);
+    d(n) {
+      t && t.d(n);
     }
   };
 }
-function ll(n, e, t) {
-  let { $$slots: l = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: o = void 0 } = e, { elem_id: a = "" } = e, { elem_classes: r = [] } = e, { variant: f = "solid" } = e, { border_mode: u = "base" } = e, { padding: _ = !0 } = e, { type: k = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: p = !1 } = e, { container: C = !0 } = e, { visible: y = !0 } = e, { allow_overflow: L = !0 } = e, { scale: d = null } = e, { min_width: c = 0 } = e, q = k === "fieldset" ? "fieldset" : "div";
-  const z = (h) => {
-    if (h !== void 0) {
-      if (typeof h == "number")
-        return h + "px";
-      if (typeof h == "string")
-        return h;
+function ln(l, e, t) {
+  let { $$slots: n = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: o = void 0 } = e, { elem_id: a = "" } = e, { elem_classes: r = [] } = e, { variant: f = "solid" } = e, { border_mode: u = "base" } = e, { padding: c = !0 } = e, { type: p = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: y = !1 } = e, { container: L = !0 } = e, { visible: v = !0 } = e, { allow_overflow: F = !0 } = e, { scale: d = null } = e, { min_width: _ = 0 } = e, q = p === "fieldset" ? "fieldset" : "div";
+  const z = (b) => {
+    if (b !== void 0) {
+      if (typeof b == "number")
+        return b + "px";
+      if (typeof b == "string")
+        return b;
     }
   };
-  return n.$$set = (h) => {
-    "height" in h && t(0, s = h.height), "width" in h && t(1, o = h.width), "elem_id" in h && t(2, a = h.elem_id), "elem_classes" in h && t(3, r = h.elem_classes), "variant" in h && t(4, f = h.variant), "border_mode" in h && t(5, u = h.border_mode), "padding" in h && t(6, _ = h.padding), "type" in h && t(16, k = h.type), "test_id" in h && t(7, m = h.test_id), "explicit_call" in h && t(8, p = h.explicit_call), "container" in h && t(9, C = h.container), "visible" in h && t(10, y = h.visible), "allow_overflow" in h && t(11, L = h.allow_overflow), "scale" in h && t(12, d = h.scale), "min_width" in h && t(13, c = h.min_width), "$$scope" in h && t(17, i = h.$$scope);
+  return l.$$set = (b) => {
+    "height" in b && t(0, s = b.height), "width" in b && t(1, o = b.width), "elem_id" in b && t(2, a = b.elem_id), "elem_classes" in b && t(3, r = b.elem_classes), "variant" in b && t(4, f = b.variant), "border_mode" in b && t(5, u = b.border_mode), "padding" in b && t(6, c = b.padding), "type" in b && t(16, p = b.type), "test_id" in b && t(7, m = b.test_id), "explicit_call" in b && t(8, y = b.explicit_call), "container" in b && t(9, L = b.container), "visible" in b && t(10, v = b.visible), "allow_overflow" in b && t(11, F = b.allow_overflow), "scale" in b && t(12, d = b.scale), "min_width" in b && t(13, _ = b.min_width), "$$scope" in b && t(17, i = b.$$scope);
   }, [
     s,
     o,
@@ -349,24 +420,24 @@ function ll(n, e, t) {
     r,
     f,
     u,
-    _,
+    c,
     m,
-    p,
-    C,
     y,
     L,
+    v,
+    F,
     d,
-    c,
+    _,
     q,
     z,
-    k,
+    p,
     i,
-    l
+    n
   ];
 }
-class nl extends Tt {
+class sn extends Tt {
   constructor(e) {
-    super(), Kt(this, e, ll, tl, xt, {
+    super(), Qt(this, e, ln, nn, $t, {
       height: 0,
       width: 1,
       elem_id: 2,
@@ -386,195 +457,195 @@ class nl extends Tt {
   }
 }
 const {
-  SvelteComponent: il,
+  SvelteComponent: fn,
   append: Se,
-  attr: R,
-  bubble: sl,
-  create_component: fl,
-  destroy_component: ol,
-  detach: bt,
-  element: Me,
-  init: rl,
-  insert: ht,
-  listen: al,
-  mount_component: ul,
-  safe_not_equal: cl,
-  set_data: _l,
+  attr: T,
+  bubble: on,
+  create_component: rn,
+  destroy_component: an,
+  detach: ht,
+  element: ze,
+  init: un,
+  insert: bt,
+  listen: cn,
+  mount_component: _n,
+  safe_not_equal: dn,
+  set_data: mn,
   set_style: ee,
-  space: dl,
-  text: ml,
-  toggle_class: S,
-  transition_in: bl,
-  transition_out: hl
+  space: hn,
+  text: bn,
+  toggle_class: M,
+  transition_in: gn,
+  transition_out: wn
 } = window.__gradio__svelte__internal;
-function We(n) {
+function We(l) {
   let e, t;
   return {
     c() {
-      e = Me("span"), t = ml(
+      e = ze("span"), t = bn(
         /*label*/
-        n[1]
-      ), R(e, "class", "svelte-1lrphxw");
+        l[1]
+      ), T(e, "class", "svelte-1lrphxw");
     },
-    m(l, i) {
-      ht(l, e, i), Se(e, t);
+    m(n, i) {
+      bt(n, e, i), Se(e, t);
     },
-    p(l, i) {
+    p(n, i) {
       i & /*label*/
-      2 && _l(
+      2 && mn(
         t,
         /*label*/
-        l[1]
+        n[1]
       );
     },
-    d(l) {
-      l && bt(e);
+    d(n) {
+      n && ht(e);
     }
   };
 }
-function gl(n) {
-  let e, t, l, i, s, o, a, r = (
+function kn(l) {
+  let e, t, n, i, s, o, a, r = (
     /*show_label*/
-    n[2] && We(n)
+    l[2] && We(l)
   );
   return i = new /*Icon*/
-  n[0]({}), {
+  l[0]({}), {
     c() {
-      e = Me("button"), r && r.c(), t = dl(), l = Me("div"), fl(i.$$.fragment), R(l, "class", "svelte-1lrphxw"), S(
-        l,
+      e = ze("button"), r && r.c(), t = hn(), n = ze("div"), rn(i.$$.fragment), T(n, "class", "svelte-1lrphxw"), M(
+        n,
         "small",
         /*size*/
-        n[4] === "small"
-      ), S(
-        l,
+        l[4] === "small"
+      ), M(
+        n,
         "large",
         /*size*/
-        n[4] === "large"
-      ), S(
-        l,
+        l[4] === "large"
+      ), M(
+        n,
         "medium",
         /*size*/
-        n[4] === "medium"
+        l[4] === "medium"
       ), e.disabled = /*disabled*/
-      n[7], R(
+      l[7], T(
         e,
         "aria-label",
         /*label*/
-        n[1]
-      ), R(
+        l[1]
+      ), T(
         e,
         "aria-haspopup",
         /*hasPopup*/
-        n[8]
-      ), R(
+        l[8]
+      ), T(
         e,
         "title",
         /*label*/
-        n[1]
-      ), R(e, "class", "svelte-1lrphxw"), S(
+        l[1]
+      ), T(e, "class", "svelte-1lrphxw"), M(
         e,
         "pending",
         /*pending*/
-        n[3]
-      ), S(
+        l[3]
+      ), M(
         e,
         "padded",
         /*padded*/
-        n[5]
-      ), S(
+        l[5]
+      ), M(
         e,
         "highlight",
         /*highlight*/
-        n[6]
-      ), S(
+        l[6]
+      ), M(
         e,
         "transparent",
         /*transparent*/
-        n[9]
+        l[9]
       ), ee(e, "color", !/*disabled*/
-      n[7] && /*_color*/
-      n[12] ? (
+      l[7] && /*_color*/
+      l[12] ? (
         /*_color*/
-        n[12]
+        l[12]
       ) : "var(--block-label-text-color)"), ee(e, "--bg-color", /*disabled*/
-      n[7] ? "auto" : (
+      l[7] ? "auto" : (
         /*background*/
-        n[10]
+        l[10]
       )), ee(
         e,
         "margin-left",
         /*offset*/
-        n[11] + "px"
+        l[11] + "px"
       );
     },
     m(f, u) {
-      ht(f, e, u), r && r.m(e, null), Se(e, t), Se(e, l), ul(i, l, null), s = !0, o || (a = al(
+      bt(f, e, u), r && r.m(e, null), Se(e, t), Se(e, n), _n(i, n, null), s = !0, o || (a = cn(
         e,
         "click",
         /*click_handler*/
-        n[14]
+        l[14]
       ), o = !0);
     },
     p(f, [u]) {
       /*show_label*/
       f[2] ? r ? r.p(f, u) : (r = We(f), r.c(), r.m(e, t)) : r && (r.d(1), r = null), (!s || u & /*size*/
-      16) && S(
-        l,
+      16) && M(
+        n,
         "small",
         /*size*/
         f[4] === "small"
       ), (!s || u & /*size*/
-      16) && S(
-        l,
+      16) && M(
+        n,
         "large",
         /*size*/
         f[4] === "large"
       ), (!s || u & /*size*/
-      16) && S(
-        l,
+      16) && M(
+        n,
         "medium",
         /*size*/
         f[4] === "medium"
       ), (!s || u & /*disabled*/
       128) && (e.disabled = /*disabled*/
       f[7]), (!s || u & /*label*/
-      2) && R(
+      2) && T(
         e,
         "aria-label",
         /*label*/
         f[1]
       ), (!s || u & /*hasPopup*/
-      256) && R(
+      256) && T(
         e,
         "aria-haspopup",
         /*hasPopup*/
         f[8]
       ), (!s || u & /*label*/
-      2) && R(
+      2) && T(
         e,
         "title",
         /*label*/
         f[1]
       ), (!s || u & /*pending*/
-      8) && S(
+      8) && M(
         e,
         "pending",
         /*pending*/
         f[3]
       ), (!s || u & /*padded*/
-      32) && S(
+      32) && M(
         e,
         "padded",
         /*padded*/
         f[5]
       ), (!s || u & /*highlight*/
-      64) && S(
+      64) && M(
         e,
         "highlight",
         /*highlight*/
         f[6]
       ), (!s || u & /*transparent*/
-      512) && S(
+      512) && M(
         e,
         "transparent",
         /*transparent*/
@@ -599,26 +670,26 @@ function gl(n) {
       );
     },
     i(f) {
-      s || (bl(i.$$.fragment, f), s = !0);
+      s || (gn(i.$$.fragment, f), s = !0);
     },
     o(f) {
-      hl(i.$$.fragment, f), s = !1;
+      wn(i.$$.fragment, f), s = !1;
     },
     d(f) {
-      f && bt(e), r && r.d(), ol(i), o = !1, a();
+      f && ht(e), r && r.d(), an(i), o = !1, a();
     }
   };
 }
-function wl(n, e, t) {
-  let l, { Icon: i } = e, { label: s = "" } = e, { show_label: o = !1 } = e, { pending: a = !1 } = e, { size: r = "small" } = e, { padded: f = !0 } = e, { highlight: u = !1 } = e, { disabled: _ = !1 } = e, { hasPopup: k = !1 } = e, { color: m = "var(--block-label-text-color)" } = e, { transparent: p = !1 } = e, { background: C = "var(--background-fill-primary)" } = e, { offset: y = 0 } = e;
-  function L(d) {
-    sl.call(this, n, d);
+function pn(l, e, t) {
+  let n, { Icon: i } = e, { label: s = "" } = e, { show_label: o = !1 } = e, { pending: a = !1 } = e, { size: r = "small" } = e, { padded: f = !0 } = e, { highlight: u = !1 } = e, { disabled: c = !1 } = e, { hasPopup: p = !1 } = e, { color: m = "var(--block-label-text-color)" } = e, { transparent: y = !1 } = e, { background: L = "var(--background-fill-primary)" } = e, { offset: v = 0 } = e;
+  function F(d) {
+    on.call(this, l, d);
   }
-  return n.$$set = (d) => {
-    "Icon" in d && t(0, i = d.Icon), "label" in d && t(1, s = d.label), "show_label" in d && t(2, o = d.show_label), "pending" in d && t(3, a = d.pending), "size" in d && t(4, r = d.size), "padded" in d && t(5, f = d.padded), "highlight" in d && t(6, u = d.highlight), "disabled" in d && t(7, _ = d.disabled), "hasPopup" in d && t(8, k = d.hasPopup), "color" in d && t(13, m = d.color), "transparent" in d && t(9, p = d.transparent), "background" in d && t(10, C = d.background), "offset" in d && t(11, y = d.offset);
-  }, n.$$.update = () => {
-    n.$$.dirty & /*highlight, color*/
-    8256 && t(12, l = u ? "var(--color-accent)" : m);
+  return l.$$set = (d) => {
+    "Icon" in d && t(0, i = d.Icon), "label" in d && t(1, s = d.label), "show_label" in d && t(2, o = d.show_label), "pending" in d && t(3, a = d.pending), "size" in d && t(4, r = d.size), "padded" in d && t(5, f = d.padded), "highlight" in d && t(6, u = d.highlight), "disabled" in d && t(7, c = d.disabled), "hasPopup" in d && t(8, p = d.hasPopup), "color" in d && t(13, m = d.color), "transparent" in d && t(9, y = d.transparent), "background" in d && t(10, L = d.background), "offset" in d && t(11, v = d.offset);
+  }, l.$$.update = () => {
+    l.$$.dirty & /*highlight, color*/
+    8256 && t(12, n = u ? "var(--color-accent)" : m);
   }, [
     i,
     s,
@@ -627,19 +698,19 @@ function wl(n, e, t) {
     r,
     f,
     u,
-    _,
-    k,
+    c,
     p,
-    C,
     y,
-    l,
+    L,
+    v,
+    n,
     m,
-    L
+    F
   ];
 }
-class kl extends il {
+class yn extends fn {
   constructor(e) {
-    super(), rl(this, e, wl, gl, cl, {
+    super(), un(this, e, pn, kn, dn, {
       Icon: 0,
       label: 1,
       show_label: 2,
@@ -657,40 +728,40 @@ class kl extends il {
   }
 }
 const {
-  SvelteComponent: pl,
+  SvelteComponent: vn,
   append: Ce,
-  attr: E,
-  detach: yl,
-  init: vl,
-  insert: ql,
+  attr: I,
+  detach: qn,
+  init: Cn,
+  insert: Fn,
   noop: Fe,
-  safe_not_equal: Cl,
+  safe_not_equal: Ln,
   set_style: D,
-  svg_element: he
+  svg_element: be
 } = window.__gradio__svelte__internal;
-function Fl(n) {
-  let e, t, l, i;
+function Sn(l) {
+  let e, t, n, i;
   return {
     c() {
-      e = he("svg"), t = he("g"), l = he("path"), i = he("path"), E(l, "d", "M18,6L6.087,17.913"), D(l, "fill", "none"), D(l, "fill-rule", "nonzero"), D(l, "stroke-width", "2px"), E(t, "transform", "matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"), E(i, "d", "M4.364,4.364L19.636,19.636"), D(i, "fill", "none"), D(i, "fill-rule", "nonzero"), D(i, "stroke-width", "2px"), E(e, "width", "100%"), E(e, "height", "100%"), E(e, "viewBox", "0 0 24 24"), E(e, "version", "1.1"), E(e, "xmlns", "http://www.w3.org/2000/svg"), E(e, "xmlns:xlink", "http://www.w3.org/1999/xlink"), E(e, "xml:space", "preserve"), E(e, "stroke", "currentColor"), D(e, "fill-rule", "evenodd"), D(e, "clip-rule", "evenodd"), D(e, "stroke-linecap", "round"), D(e, "stroke-linejoin", "round");
+      e = be("svg"), t = be("g"), n = be("path"), i = be("path"), I(n, "d", "M18,6L6.087,17.913"), D(n, "fill", "none"), D(n, "fill-rule", "nonzero"), D(n, "stroke-width", "2px"), I(t, "transform", "matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"), I(i, "d", "M4.364,4.364L19.636,19.636"), D(i, "fill", "none"), D(i, "fill-rule", "nonzero"), D(i, "stroke-width", "2px"), I(e, "width", "100%"), I(e, "height", "100%"), I(e, "viewBox", "0 0 24 24"), I(e, "version", "1.1"), I(e, "xmlns", "http://www.w3.org/2000/svg"), I(e, "xmlns:xlink", "http://www.w3.org/1999/xlink"), I(e, "xml:space", "preserve"), I(e, "stroke", "currentColor"), D(e, "fill-rule", "evenodd"), D(e, "clip-rule", "evenodd"), D(e, "stroke-linecap", "round"), D(e, "stroke-linejoin", "round");
     },
     m(s, o) {
-      ql(s, e, o), Ce(e, t), Ce(t, l), Ce(e, i);
+      Fn(s, e, o), Ce(e, t), Ce(t, n), Ce(e, i);
     },
     p: Fe,
     i: Fe,
     o: Fe,
     d(s) {
-      s && yl(e);
+      s && qn(e);
     }
   };
 }
-class Ll extends pl {
+class zn extends vn {
   constructor(e) {
-    super(), vl(this, e, null, Fl, Cl, {});
+    super(), Cn(this, e, null, Sn, Ln, {});
   }
 }
-const Sl = [
+const Mn = [
   { color: "red", primary: 600, secondary: 100 },
   { color: "green", primary: 600, secondary: 100 },
   { color: "blue", primary: 600, secondary: 100 },
@@ -994,41 +1065,41 @@ const Sl = [
     950: "#4c0519"
   }
 };
-Sl.reduce(
-  (n, { color: e, primary: t, secondary: l }) => ({
-    ...n,
+Mn.reduce(
+  (l, { color: e, primary: t, secondary: n }) => ({
+    ...l,
     [e]: {
       primary: Be[e][t],
-      secondary: Be[e][l]
+      secondary: Be[e][n]
     }
   }),
   {}
 );
-function ne(n) {
+function le(l) {
   let e = ["", "k", "M", "G", "T", "P", "E", "Z"], t = 0;
-  for (; n > 1e3 && t < e.length - 1; )
-    n /= 1e3, t++;
-  let l = e[t];
-  return (Number.isInteger(n) ? n : n.toFixed(1)) + l;
+  for (; l > 1e3 && t < e.length - 1; )
+    l /= 1e3, t++;
+  let n = e[t];
+  return (Number.isInteger(l) ? l : l.toFixed(1)) + n;
 }
 function ke() {
 }
-function Ml(n, e) {
-  return n != n ? e == e : n !== e || n && typeof n == "object" || typeof n == "function";
+function Vn(l, e) {
+  return l != l ? e == e : l !== e || l && typeof l == "object" || typeof l == "function";
 }
 const gt = typeof window < "u";
-let De = gt ? () => window.performance.now() : () => Date.now(), wt = gt ? (n) => requestAnimationFrame(n) : ke;
+let De = gt ? () => window.performance.now() : () => Date.now(), wt = gt ? (l) => requestAnimationFrame(l) : ke;
 const ie = /* @__PURE__ */ new Set();
-function kt(n) {
+function kt(l) {
   ie.forEach((e) => {
-    e.c(n) || (ie.delete(e), e.f());
+    e.c(l) || (ie.delete(e), e.f());
   }), ie.size !== 0 && wt(kt);
 }
-function Vl(n) {
+function Nn(l) {
   let e;
   return ie.size === 0 && wt(kt), {
     promise: new Promise((t) => {
-      ie.add(e = { c: n, f: t });
+      ie.add(e = { c: l, f: t });
     }),
     abort() {
       ie.delete(e);
@@ -1036,14 +1107,14 @@ function Vl(n) {
   };
 }
 const te = [];
-function zl(n, e = ke) {
+function En(l, e = ke) {
   let t;
-  const l = /* @__PURE__ */ new Set();
+  const n = /* @__PURE__ */ new Set();
   function i(a) {
-    if (Ml(n, a) && (n = a, t)) {
+    if (Vn(l, a) && (l = a, t)) {
       const r = !te.length;
-      for (const f of l)
-        f[1](), te.push(f, n);
+      for (const f of n)
+        f[1](), te.push(f, l);
       if (r) {
         for (let f = 0; f < te.length; f += 2)
           te[f][0](te[f + 1]);
@@ -1052,445 +1123,445 @@ function zl(n, e = ke) {
     }
   }
   function s(a) {
-    i(a(n));
+    i(a(l));
   }
   function o(a, r = ke) {
     const f = [a, r];
-    return l.add(f), l.size === 1 && (t = e(i, s) || ke), a(n), () => {
-      l.delete(f), l.size === 0 && t && (t(), t = null);
+    return n.add(f), n.size === 1 && (t = e(i, s) || ke), a(l), () => {
+      n.delete(f), n.size === 0 && t && (t(), t = null);
     };
   }
   return { set: i, update: s, subscribe: o };
 }
-function He(n) {
-  return Object.prototype.toString.call(n) === "[object Date]";
+function He(l) {
+  return Object.prototype.toString.call(l) === "[object Date]";
 }
-function Ve(n, e, t, l) {
+function Me(l, e, t, n) {
   if (typeof t == "number" || He(t)) {
-    const i = l - t, s = (t - e) / (n.dt || 1 / 60), o = n.opts.stiffness * i, a = n.opts.damping * s, r = (o - a) * n.inv_mass, f = (s + r) * n.dt;
-    return Math.abs(f) < n.opts.precision && Math.abs(i) < n.opts.precision ? l : (n.settled = !1, He(t) ? new Date(t.getTime() + f) : t + f);
+    const i = n - t, s = (t - e) / (l.dt || 1 / 60), o = l.opts.stiffness * i, a = l.opts.damping * s, r = (o - a) * l.inv_mass, f = (s + r) * l.dt;
+    return Math.abs(f) < l.opts.precision && Math.abs(i) < l.opts.precision ? n : (l.settled = !1, He(t) ? new Date(t.getTime() + f) : t + f);
   } else {
     if (Array.isArray(t))
       return t.map(
-        (i, s) => Ve(n, e[s], t[s], l[s])
+        (i, s) => Me(l, e[s], t[s], n[s])
       );
     if (typeof t == "object") {
       const i = {};
       for (const s in t)
-        i[s] = Ve(n, e[s], t[s], l[s]);
+        i[s] = Me(l, e[s], t[s], n[s]);
       return i;
     } else
       throw new Error(`Cannot spring ${typeof t} values`);
   }
 }
-function Te(n, e = {}) {
-  const t = zl(n), { stiffness: l = 0.15, damping: i = 0.8, precision: s = 0.01 } = e;
-  let o, a, r, f = n, u = n, _ = 1, k = 0, m = !1;
-  function p(y, L = {}) {
-    u = y;
+function Oe(l, e = {}) {
+  const t = En(l), { stiffness: n = 0.15, damping: i = 0.8, precision: s = 0.01 } = e;
+  let o, a, r, f = l, u = l, c = 1, p = 0, m = !1;
+  function y(v, F = {}) {
+    u = v;
     const d = r = {};
-    return n == null || L.hard || C.stiffness >= 1 && C.damping >= 1 ? (m = !0, o = De(), f = y, t.set(n = u), Promise.resolve()) : (L.soft && (k = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), _ = 0), a || (o = De(), m = !1, a = Vl((c) => {
+    return l == null || F.hard || L.stiffness >= 1 && L.damping >= 1 ? (m = !0, o = De(), f = v, t.set(l = u), Promise.resolve()) : (F.soft && (p = 1 / ((F.soft === !0 ? 0.5 : +F.soft) * 60), c = 0), a || (o = De(), m = !1, a = Nn((_) => {
       if (m)
         return m = !1, a = null, !1;
-      _ = Math.min(_ + k, 1);
+      c = Math.min(c + p, 1);
       const q = {
-        inv_mass: _,
-        opts: C,
+        inv_mass: c,
+        opts: L,
         settled: !0,
-        dt: (c - o) * 60 / 1e3
-      }, z = Ve(q, f, n, u);
-      return o = c, f = n, t.set(n = z), q.settled && (a = null), !q.settled;
-    })), new Promise((c) => {
+        dt: (_ - o) * 60 / 1e3
+      }, z = Me(q, f, l, u);
+      return o = _, f = l, t.set(l = z), q.settled && (a = null), !q.settled;
+    })), new Promise((_) => {
       a.promise.then(() => {
-        d === r && c();
+        d === r && _();
       });
     }));
   }
-  const C = {
-    set: p,
-    update: (y, L) => p(y(u, n), L),
+  const L = {
+    set: y,
+    update: (v, F) => y(v(u, l), F),
     subscribe: t.subscribe,
-    stiffness: l,
+    stiffness: n,
     damping: i,
     precision: s
   };
-  return C;
+  return L;
 }
 const {
-  SvelteComponent: Nl,
+  SvelteComponent: An,
   append: j,
-  attr: v,
-  component_subscribe: Re,
-  detach: Al,
-  element: El,
-  init: jl,
-  insert: Il,
-  noop: Xe,
-  safe_not_equal: Zl,
+  attr: C,
+  component_subscribe: Te,
+  detach: In,
+  element: jn,
+  init: Zn,
+  insert: Pn,
+  noop: Ue,
+  safe_not_equal: Wn,
   set_style: ge,
-  svg_element: I,
-  toggle_class: Ye
-} = window.__gradio__svelte__internal, { onMount: Pl } = window.__gradio__svelte__internal;
-function Wl(n) {
-  let e, t, l, i, s, o, a, r, f, u, _, k;
+  svg_element: Z,
+  toggle_class: Je
+} = window.__gradio__svelte__internal, { onMount: Bn } = window.__gradio__svelte__internal;
+function Dn(l) {
+  let e, t, n, i, s, o, a, r, f, u, c, p;
   return {
     c() {
-      e = El("div"), t = I("svg"), l = I("g"), i = I("path"), s = I("path"), o = I("path"), a = I("path"), r = I("g"), f = I("path"), u = I("path"), _ = I("path"), k = I("path"), v(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), v(i, "fill", "#FF7C00"), v(i, "fill-opacity", "0.4"), v(i, "class", "svelte-43sxxs"), v(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), v(s, "fill", "#FF7C00"), v(s, "class", "svelte-43sxxs"), v(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), v(o, "fill", "#FF7C00"), v(o, "fill-opacity", "0.4"), v(o, "class", "svelte-43sxxs"), v(a, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), v(a, "fill", "#FF7C00"), v(a, "class", "svelte-43sxxs"), ge(l, "transform", "translate(" + /*$top*/
-      n[1][0] + "px, " + /*$top*/
-      n[1][1] + "px)"), v(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), v(f, "fill", "#FF7C00"), v(f, "fill-opacity", "0.4"), v(f, "class", "svelte-43sxxs"), v(u, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), v(u, "fill", "#FF7C00"), v(u, "class", "svelte-43sxxs"), v(_, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), v(_, "fill", "#FF7C00"), v(_, "fill-opacity", "0.4"), v(_, "class", "svelte-43sxxs"), v(k, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), v(k, "fill", "#FF7C00"), v(k, "class", "svelte-43sxxs"), ge(r, "transform", "translate(" + /*$bottom*/
-      n[2][0] + "px, " + /*$bottom*/
-      n[2][1] + "px)"), v(t, "viewBox", "-1200 -1200 3000 3000"), v(t, "fill", "none"), v(t, "xmlns", "http://www.w3.org/2000/svg"), v(t, "class", "svelte-43sxxs"), v(e, "class", "svelte-43sxxs"), Ye(
+      e = jn("div"), t = Z("svg"), n = Z("g"), i = Z("path"), s = Z("path"), o = Z("path"), a = Z("path"), r = Z("g"), f = Z("path"), u = Z("path"), c = Z("path"), p = Z("path"), C(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), C(i, "fill", "#FF7C00"), C(i, "fill-opacity", "0.4"), C(i, "class", "svelte-43sxxs"), C(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), C(s, "fill", "#FF7C00"), C(s, "class", "svelte-43sxxs"), C(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), C(o, "fill", "#FF7C00"), C(o, "fill-opacity", "0.4"), C(o, "class", "svelte-43sxxs"), C(a, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), C(a, "fill", "#FF7C00"), C(a, "class", "svelte-43sxxs"), ge(n, "transform", "translate(" + /*$top*/
+      l[1][0] + "px, " + /*$top*/
+      l[1][1] + "px)"), C(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), C(f, "fill", "#FF7C00"), C(f, "fill-opacity", "0.4"), C(f, "class", "svelte-43sxxs"), C(u, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), C(u, "fill", "#FF7C00"), C(u, "class", "svelte-43sxxs"), C(c, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), C(c, "fill", "#FF7C00"), C(c, "fill-opacity", "0.4"), C(c, "class", "svelte-43sxxs"), C(p, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), C(p, "fill", "#FF7C00"), C(p, "class", "svelte-43sxxs"), ge(r, "transform", "translate(" + /*$bottom*/
+      l[2][0] + "px, " + /*$bottom*/
+      l[2][1] + "px)"), C(t, "viewBox", "-1200 -1200 3000 3000"), C(t, "fill", "none"), C(t, "xmlns", "http://www.w3.org/2000/svg"), C(t, "class", "svelte-43sxxs"), C(e, "class", "svelte-43sxxs"), Je(
         e,
         "margin",
         /*margin*/
-        n[0]
+        l[0]
       );
     },
-    m(m, p) {
-      Il(m, e, p), j(e, t), j(t, l), j(l, i), j(l, s), j(l, o), j(l, a), j(t, r), j(r, f), j(r, u), j(r, _), j(r, k);
+    m(m, y) {
+      Pn(m, e, y), j(e, t), j(t, n), j(n, i), j(n, s), j(n, o), j(n, a), j(t, r), j(r, f), j(r, u), j(r, c), j(r, p);
     },
-    p(m, [p]) {
-      p & /*$top*/
-      2 && ge(l, "transform", "translate(" + /*$top*/
+    p(m, [y]) {
+      y & /*$top*/
+      2 && ge(n, "transform", "translate(" + /*$top*/
       m[1][0] + "px, " + /*$top*/
-      m[1][1] + "px)"), p & /*$bottom*/
+      m[1][1] + "px)"), y & /*$bottom*/
       4 && ge(r, "transform", "translate(" + /*$bottom*/
       m[2][0] + "px, " + /*$bottom*/
-      m[2][1] + "px)"), p & /*margin*/
-      1 && Ye(
+      m[2][1] + "px)"), y & /*margin*/
+      1 && Je(
         e,
         "margin",
         /*margin*/
         m[0]
       );
     },
-    i: Xe,
-    o: Xe,
+    i: Ue,
+    o: Ue,
     d(m) {
-      m && Al(e);
+      m && In(e);
     }
   };
 }
-function Bl(n, e, t) {
-  let l, i;
-  var s = this && this.__awaiter || function(m, p, C, y) {
-    function L(d) {
-      return d instanceof C ? d : new C(function(c) {
-        c(d);
+function Hn(l, e, t) {
+  let n, i;
+  var s = this && this.__awaiter || function(m, y, L, v) {
+    function F(d) {
+      return d instanceof L ? d : new L(function(_) {
+        _(d);
       });
     }
-    return new (C || (C = Promise))(function(d, c) {
-      function q(M) {
+    return new (L || (L = Promise))(function(d, _) {
+      function q(g) {
         try {
-          h(y.next(M));
-        } catch (T) {
-          c(T);
+          b(v.next(g));
+        } catch (O) {
+          _(O);
         }
       }
-      function z(M) {
+      function z(g) {
         try {
-          h(y.throw(M));
-        } catch (T) {
-          c(T);
+          b(v.throw(g));
+        } catch (O) {
+          _(O);
         }
       }
-      function h(M) {
-        M.done ? d(M.value) : L(M.value).then(q, z);
+      function b(g) {
+        g.done ? d(g.value) : F(g.value).then(q, z);
       }
-      h((y = y.apply(m, p || [])).next());
+      b((v = v.apply(m, y || [])).next());
     });
   };
   let { margin: o = !0 } = e;
-  const a = Te([0, 0]);
-  Re(n, a, (m) => t(1, l = m));
-  const r = Te([0, 0]);
-  Re(n, r, (m) => t(2, i = m));
+  const a = Oe([0, 0]);
+  Te(l, a, (m) => t(1, n = m));
+  const r = Oe([0, 0]);
+  Te(l, r, (m) => t(2, i = m));
   let f;
   function u() {
     return s(this, void 0, void 0, function* () {
       yield Promise.all([a.set([125, 140]), r.set([-125, -140])]), yield Promise.all([a.set([-125, 140]), r.set([125, -140])]), yield Promise.all([a.set([-125, 0]), r.set([125, -0])]), yield Promise.all([a.set([125, 0]), r.set([-125, 0])]);
     });
   }
-  function _() {
+  function c() {
     return s(this, void 0, void 0, function* () {
-      yield u(), f || _();
+      yield u(), f || c();
     });
   }
-  function k() {
+  function p() {
     return s(this, void 0, void 0, function* () {
-      yield Promise.all([a.set([125, 0]), r.set([-125, 0])]), _();
+      yield Promise.all([a.set([125, 0]), r.set([-125, 0])]), c();
     });
   }
-  return Pl(() => (k(), () => f = !0)), n.$$set = (m) => {
+  return Bn(() => (p(), () => f = !0)), l.$$set = (m) => {
     "margin" in m && t(0, o = m.margin);
-  }, [o, l, i, a, r];
+  }, [o, n, i, a, r];
 }
-class Dl extends Nl {
+class On extends An {
   constructor(e) {
-    super(), jl(this, e, Bl, Wl, Zl, { margin: 0 });
+    super(), Zn(this, e, Hn, Dn, Wn, { margin: 0 });
   }
 }
 const {
-  SvelteComponent: Hl,
-  append: J,
+  SvelteComponent: Tn,
+  append: G,
   attr: P,
-  binding_callbacks: Ge,
+  binding_callbacks: Re,
   check_outros: pt,
   create_component: yt,
-  create_slot: Tl,
+  create_slot: Un,
   destroy_component: vt,
   destroy_each: qt,
-  detach: g,
+  detach: w,
   element: H,
   empty: se,
   ensure_array_like: pe,
-  get_all_dirty_from_scope: Rl,
-  get_slot_changes: Xl,
+  get_all_dirty_from_scope: Jn,
+  get_slot_changes: Rn,
   group_outros: Ct,
-  init: Yl,
-  insert: w,
+  init: Xn,
+  insert: k,
   mount_component: Ft,
-  noop: ze,
-  safe_not_equal: Gl,
+  noop: Ve,
+  safe_not_equal: Yn,
   set_data: A,
-  set_style: Y,
+  set_style: J,
   space: W,
-  text: F,
-  toggle_class: N,
+  text: S,
+  toggle_class: E,
   transition_in: K,
   transition_out: Q,
-  update_slot_base: Ol
-} = window.__gradio__svelte__internal, { tick: Ul } = window.__gradio__svelte__internal, { onDestroy: Jl } = window.__gradio__svelte__internal, { createEventDispatcher: Kl } = window.__gradio__svelte__internal, Ql = (n) => ({}), Oe = (n) => ({});
-function Ue(n, e, t) {
-  const l = n.slice();
-  return l[41] = e[t], l[43] = t, l;
+  update_slot_base: Gn
+} = window.__gradio__svelte__internal, { tick: Kn } = window.__gradio__svelte__internal, { onDestroy: Qn } = window.__gradio__svelte__internal, { createEventDispatcher: xn } = window.__gradio__svelte__internal, $n = (l) => ({}), Xe = (l) => ({});
+function Ye(l, e, t) {
+  const n = l.slice();
+  return n[41] = e[t], n[43] = t, n;
 }
-function Je(n, e, t) {
-  const l = n.slice();
-  return l[41] = e[t], l;
+function Ge(l, e, t) {
+  const n = l.slice();
+  return n[41] = e[t], n;
 }
-function xl(n) {
-  let e, t, l, i, s = (
+function el(l) {
+  let e, t, n, i, s = (
     /*i18n*/
-    n[1]("common.error") + ""
+    l[1]("common.error") + ""
   ), o, a, r;
-  t = new kl({
+  t = new yn({
     props: {
-      Icon: Ll,
+      Icon: zn,
       label: (
         /*i18n*/
-        n[1]("common.clear")
+        l[1]("common.clear")
       ),
       disabled: !1
     }
   }), t.$on(
     "click",
     /*click_handler*/
-    n[32]
+    l[32]
   );
   const f = (
     /*#slots*/
-    n[30].error
-  ), u = Tl(
+    l[30].error
+  ), u = Un(
     f,
-    n,
+    l,
     /*$$scope*/
-    n[29],
-    Oe
+    l[29],
+    Xe
   );
   return {
     c() {
-      e = H("div"), yt(t.$$.fragment), l = W(), i = H("span"), o = F(s), a = W(), u && u.c(), P(e, "class", "clear-status svelte-1yk38uw"), P(i, "class", "error svelte-1yk38uw");
+      e = H("div"), yt(t.$$.fragment), n = W(), i = H("span"), o = S(s), a = W(), u && u.c(), P(e, "class", "clear-status svelte-1yk38uw"), P(i, "class", "error svelte-1yk38uw");
     },
-    m(_, k) {
-      w(_, e, k), Ft(t, e, null), w(_, l, k), w(_, i, k), J(i, o), w(_, a, k), u && u.m(_, k), r = !0;
+    m(c, p) {
+      k(c, e, p), Ft(t, e, null), k(c, n, p), k(c, i, p), G(i, o), k(c, a, p), u && u.m(c, p), r = !0;
     },
-    p(_, k) {
+    p(c, p) {
       const m = {};
-      k[0] & /*i18n*/
+      p[0] & /*i18n*/
       2 && (m.label = /*i18n*/
-      _[1]("common.clear")), t.$set(m), (!r || k[0] & /*i18n*/
+      c[1]("common.clear")), t.$set(m), (!r || p[0] & /*i18n*/
       2) && s !== (s = /*i18n*/
-      _[1]("common.error") + "") && A(o, s), u && u.p && (!r || k[0] & /*$$scope*/
-      536870912) && Ol(
+      c[1]("common.error") + "") && A(o, s), u && u.p && (!r || p[0] & /*$$scope*/
+      536870912) && Gn(
         u,
         f,
-        _,
+        c,
         /*$$scope*/
-        _[29],
-        r ? Xl(
+        c[29],
+        r ? Rn(
           f,
           /*$$scope*/
-          _[29],
-          k,
-          Ql
-        ) : Rl(
+          c[29],
+          p,
+          $n
+        ) : Jn(
           /*$$scope*/
-          _[29]
+          c[29]
         ),
-        Oe
+        Xe
       );
     },
-    i(_) {
-      r || (K(t.$$.fragment, _), K(u, _), r = !0);
+    i(c) {
+      r || (K(t.$$.fragment, c), K(u, c), r = !0);
     },
-    o(_) {
-      Q(t.$$.fragment, _), Q(u, _), r = !1;
+    o(c) {
+      Q(t.$$.fragment, c), Q(u, c), r = !1;
     },
-    d(_) {
-      _ && (g(e), g(l), g(i), g(a)), vt(t), u && u.d(_);
+    d(c) {
+      c && (w(e), w(n), w(i), w(a)), vt(t), u && u.d(c);
     }
   };
 }
-function $l(n) {
-  let e, t, l, i, s, o, a, r, f, u = (
+function tl(l) {
+  let e, t, n, i, s, o, a, r, f, u = (
     /*variant*/
-    n[8] === "default" && /*show_eta_bar*/
-    n[18] && /*show_progress*/
-    n[6] === "full" && Ke(n)
+    l[8] === "default" && /*show_eta_bar*/
+    l[18] && /*show_progress*/
+    l[6] === "full" && Ke(l)
   );
-  function _(c, q) {
+  function c(_, q) {
     if (
       /*progress*/
-      c[7]
+      _[7]
     )
-      return ln;
+      return il;
     if (
       /*queue_position*/
-      c[2] !== null && /*queue_size*/
-      c[3] !== void 0 && /*queue_position*/
-      c[2] >= 0
+      _[2] !== null && /*queue_size*/
+      _[3] !== void 0 && /*queue_position*/
+      _[2] >= 0
     )
-      return tn;
+      return ll;
     if (
       /*queue_position*/
-      c[2] === 0
+      _[2] === 0
     )
-      return en;
+      return nl;
   }
-  let k = _(n), m = k && k(n), p = (
+  let p = c(l), m = p && p(l), y = (
     /*timer*/
-    n[5] && $e(n)
+    l[5] && $e(l)
   );
-  const C = [on, fn], y = [];
-  function L(c, q) {
+  const L = [rl, ol], v = [];
+  function F(_, q) {
     return (
       /*last_progress_level*/
-      c[15] != null ? 0 : (
+      _[15] != null ? 0 : (
         /*show_progress*/
-        c[6] === "full" ? 1 : -1
+        _[6] === "full" ? 1 : -1
       )
     );
   }
-  ~(s = L(n)) && (o = y[s] = C[s](n));
+  ~(s = F(l)) && (o = v[s] = L[s](l));
   let d = !/*timer*/
-  n[5] && ft(n);
+  l[5] && ft(l);
   return {
     c() {
-      u && u.c(), e = W(), t = H("div"), m && m.c(), l = W(), p && p.c(), i = W(), o && o.c(), a = W(), d && d.c(), r = se(), P(t, "class", "progress-text svelte-1yk38uw"), N(
+      u && u.c(), e = W(), t = H("div"), m && m.c(), n = W(), y && y.c(), i = W(), o && o.c(), a = W(), d && d.c(), r = se(), P(t, "class", "progress-text svelte-1yk38uw"), E(
         t,
         "meta-text-center",
         /*variant*/
-        n[8] === "center"
-      ), N(
+        l[8] === "center"
+      ), E(
         t,
         "meta-text",
         /*variant*/
-        n[8] === "default"
+        l[8] === "default"
       );
     },
-    m(c, q) {
-      u && u.m(c, q), w(c, e, q), w(c, t, q), m && m.m(t, null), J(t, l), p && p.m(t, null), w(c, i, q), ~s && y[s].m(c, q), w(c, a, q), d && d.m(c, q), w(c, r, q), f = !0;
+    m(_, q) {
+      u && u.m(_, q), k(_, e, q), k(_, t, q), m && m.m(t, null), G(t, n), y && y.m(t, null), k(_, i, q), ~s && v[s].m(_, q), k(_, a, q), d && d.m(_, q), k(_, r, q), f = !0;
     },
-    p(c, q) {
+    p(_, q) {
       /*variant*/
-      c[8] === "default" && /*show_eta_bar*/
-      c[18] && /*show_progress*/
-      c[6] === "full" ? u ? u.p(c, q) : (u = Ke(c), u.c(), u.m(e.parentNode, e)) : u && (u.d(1), u = null), k === (k = _(c)) && m ? m.p(c, q) : (m && m.d(1), m = k && k(c), m && (m.c(), m.m(t, l))), /*timer*/
-      c[5] ? p ? p.p(c, q) : (p = $e(c), p.c(), p.m(t, null)) : p && (p.d(1), p = null), (!f || q[0] & /*variant*/
-      256) && N(
+      _[8] === "default" && /*show_eta_bar*/
+      _[18] && /*show_progress*/
+      _[6] === "full" ? u ? u.p(_, q) : (u = Ke(_), u.c(), u.m(e.parentNode, e)) : u && (u.d(1), u = null), p === (p = c(_)) && m ? m.p(_, q) : (m && m.d(1), m = p && p(_), m && (m.c(), m.m(t, n))), /*timer*/
+      _[5] ? y ? y.p(_, q) : (y = $e(_), y.c(), y.m(t, null)) : y && (y.d(1), y = null), (!f || q[0] & /*variant*/
+      256) && E(
         t,
         "meta-text-center",
         /*variant*/
-        c[8] === "center"
+        _[8] === "center"
       ), (!f || q[0] & /*variant*/
-      256) && N(
+      256) && E(
         t,
         "meta-text",
         /*variant*/
-        c[8] === "default"
+        _[8] === "default"
       );
       let z = s;
-      s = L(c), s === z ? ~s && y[s].p(c, q) : (o && (Ct(), Q(y[z], 1, 1, () => {
-        y[z] = null;
-      }), pt()), ~s ? (o = y[s], o ? o.p(c, q) : (o = y[s] = C[s](c), o.c()), K(o, 1), o.m(a.parentNode, a)) : o = null), /*timer*/
-      c[5] ? d && (d.d(1), d = null) : d ? d.p(c, q) : (d = ft(c), d.c(), d.m(r.parentNode, r));
+      s = F(_), s === z ? ~s && v[s].p(_, q) : (o && (Ct(), Q(v[z], 1, 1, () => {
+        v[z] = null;
+      }), pt()), ~s ? (o = v[s], o ? o.p(_, q) : (o = v[s] = L[s](_), o.c()), K(o, 1), o.m(a.parentNode, a)) : o = null), /*timer*/
+      _[5] ? d && (d.d(1), d = null) : d ? d.p(_, q) : (d = ft(_), d.c(), d.m(r.parentNode, r));
     },
-    i(c) {
+    i(_) {
       f || (K(o), f = !0);
     },
-    o(c) {
+    o(_) {
       Q(o), f = !1;
     },
-    d(c) {
-      c && (g(e), g(t), g(i), g(a), g(r)), u && u.d(c), m && m.d(), p && p.d(), ~s && y[s].d(c), d && d.d(c);
+    d(_) {
+      _ && (w(e), w(t), w(i), w(a), w(r)), u && u.d(_), m && m.d(), y && y.d(), ~s && v[s].d(_), d && d.d(_);
     }
   };
 }
-function Ke(n) {
+function Ke(l) {
   let e, t = `translateX(${/*eta_level*/
-  (n[17] || 0) * 100 - 100}%)`;
+  (l[17] || 0) * 100 - 100}%)`;
   return {
     c() {
-      e = H("div"), P(e, "class", "eta-bar svelte-1yk38uw"), Y(e, "transform", t);
+      e = H("div"), P(e, "class", "eta-bar svelte-1yk38uw"), J(e, "transform", t);
     },
-    m(l, i) {
-      w(l, e, i);
+    m(n, i) {
+      k(n, e, i);
     },
-    p(l, i) {
+    p(n, i) {
       i[0] & /*eta_level*/
       131072 && t !== (t = `translateX(${/*eta_level*/
-      (l[17] || 0) * 100 - 100}%)`) && Y(e, "transform", t);
+      (n[17] || 0) * 100 - 100}%)`) && J(e, "transform", t);
     },
-    d(l) {
-      l && g(e);
+    d(n) {
+      n && w(e);
     }
   };
 }
-function en(n) {
+function nl(l) {
   let e;
   return {
     c() {
-      e = F("processing |");
+      e = S("processing |");
     },
-    m(t, l) {
-      w(t, e, l);
+    m(t, n) {
+      k(t, e, n);
     },
-    p: ze,
+    p: Ve,
     d(t) {
-      t && g(e);
+      t && w(e);
     }
   };
 }
-function tn(n) {
+function ll(l) {
   let e, t = (
     /*queue_position*/
-    n[2] + 1 + ""
-  ), l, i, s, o;
+    l[2] + 1 + ""
+  ), n, i, s, o;
   return {
     c() {
-      e = F("queue: "), l = F(t), i = F("/"), s = F(
+      e = S("queue: "), n = S(t), i = S("/"), s = S(
         /*queue_size*/
-        n[3]
-      ), o = F(" |");
+        l[3]
+      ), o = S(" |");
     },
     m(a, r) {
-      w(a, e, r), w(a, l, r), w(a, i, r), w(a, s, r), w(a, o, r);
+      k(a, e, r), k(a, n, r), k(a, i, r), k(a, s, r), k(a, o, r);
     },
     p(a, r) {
       r[0] & /*queue_position*/
       4 && t !== (t = /*queue_position*/
-      a[2] + 1 + "") && A(l, t), r[0] & /*queue_size*/
+      a[2] + 1 + "") && A(n, t), r[0] & /*queue_size*/
       8 && A(
         s,
         /*queue_size*/
@@ -1498,27 +1569,27 @@ function tn(n) {
       );
     },
     d(a) {
-      a && (g(e), g(l), g(i), g(s), g(o));
+      a && (w(e), w(n), w(i), w(s), w(o));
     }
   };
 }
-function ln(n) {
+function il(l) {
   let e, t = pe(
     /*progress*/
-    n[7]
-  ), l = [];
+    l[7]
+  ), n = [];
   for (let i = 0; i < t.length; i += 1)
-    l[i] = xe(Je(n, t, i));
+    n[i] = xe(Ge(l, t, i));
   return {
     c() {
-      for (let i = 0; i < l.length; i += 1)
-        l[i].c();
+      for (let i = 0; i < n.length; i += 1)
+        n[i].c();
       e = se();
     },
     m(i, s) {
-      for (let o = 0; o < l.length; o += 1)
-        l[o] && l[o].m(i, s);
-      w(i, e, s);
+      for (let o = 0; o < n.length; o += 1)
+        n[o] && n[o].m(i, s);
+      k(i, e, s);
     },
     p(i, s) {
       if (s[0] & /*progress*/
@@ -1529,139 +1600,139 @@ function ln(n) {
         );
         let o;
         for (o = 0; o < t.length; o += 1) {
-          const a = Je(i, t, o);
-          l[o] ? l[o].p(a, s) : (l[o] = xe(a), l[o].c(), l[o].m(e.parentNode, e));
+          const a = Ge(i, t, o);
+          n[o] ? n[o].p(a, s) : (n[o] = xe(a), n[o].c(), n[o].m(e.parentNode, e));
         }
-        for (; o < l.length; o += 1)
-          l[o].d(1);
-        l.length = t.length;
+        for (; o < n.length; o += 1)
+          n[o].d(1);
+        n.length = t.length;
       }
     },
     d(i) {
-      i && g(e), qt(l, i);
+      i && w(e), qt(n, i);
     }
   };
 }
-function Qe(n) {
+function Qe(l) {
   let e, t = (
     /*p*/
-    n[41].unit + ""
-  ), l, i, s = " ", o;
-  function a(u, _) {
+    l[41].unit + ""
+  ), n, i, s = " ", o;
+  function a(u, c) {
     return (
       /*p*/
-      u[41].length != null ? sn : nn
+      u[41].length != null ? fl : sl
     );
   }
-  let r = a(n), f = r(n);
+  let r = a(l), f = r(l);
   return {
     c() {
-      f.c(), e = W(), l = F(t), i = F(" | "), o = F(s);
+      f.c(), e = W(), n = S(t), i = S(" | "), o = S(s);
     },
-    m(u, _) {
-      f.m(u, _), w(u, e, _), w(u, l, _), w(u, i, _), w(u, o, _);
+    m(u, c) {
+      f.m(u, c), k(u, e, c), k(u, n, c), k(u, i, c), k(u, o, c);
     },
-    p(u, _) {
-      r === (r = a(u)) && f ? f.p(u, _) : (f.d(1), f = r(u), f && (f.c(), f.m(e.parentNode, e))), _[0] & /*progress*/
+    p(u, c) {
+      r === (r = a(u)) && f ? f.p(u, c) : (f.d(1), f = r(u), f && (f.c(), f.m(e.parentNode, e))), c[0] & /*progress*/
       128 && t !== (t = /*p*/
-      u[41].unit + "") && A(l, t);
+      u[41].unit + "") && A(n, t);
     },
     d(u) {
-      u && (g(e), g(l), g(i), g(o)), f.d(u);
+      u && (w(e), w(n), w(i), w(o)), f.d(u);
     }
   };
 }
-function nn(n) {
-  let e = ne(
+function sl(l) {
+  let e = le(
     /*p*/
-    n[41].index || 0
+    l[41].index || 0
   ) + "", t;
   return {
     c() {
-      t = F(e);
+      t = S(e);
     },
-    m(l, i) {
-      w(l, t, i);
+    m(n, i) {
+      k(n, t, i);
     },
-    p(l, i) {
+    p(n, i) {
       i[0] & /*progress*/
-      128 && e !== (e = ne(
+      128 && e !== (e = le(
         /*p*/
-        l[41].index || 0
+        n[41].index || 0
       ) + "") && A(t, e);
     },
-    d(l) {
-      l && g(t);
+    d(n) {
+      n && w(t);
     }
   };
 }
-function sn(n) {
-  let e = ne(
+function fl(l) {
+  let e = le(
     /*p*/
-    n[41].index || 0
-  ) + "", t, l, i = ne(
+    l[41].index || 0
+  ) + "", t, n, i = le(
     /*p*/
-    n[41].length
+    l[41].length
   ) + "", s;
   return {
     c() {
-      t = F(e), l = F("/"), s = F(i);
+      t = S(e), n = S("/"), s = S(i);
     },
     m(o, a) {
-      w(o, t, a), w(o, l, a), w(o, s, a);
+      k(o, t, a), k(o, n, a), k(o, s, a);
     },
     p(o, a) {
       a[0] & /*progress*/
-      128 && e !== (e = ne(
+      128 && e !== (e = le(
         /*p*/
         o[41].index || 0
       ) + "") && A(t, e), a[0] & /*progress*/
-      128 && i !== (i = ne(
+      128 && i !== (i = le(
         /*p*/
         o[41].length
       ) + "") && A(s, i);
     },
     d(o) {
-      o && (g(t), g(l), g(s));
+      o && (w(t), w(n), w(s));
     }
   };
 }
-function xe(n) {
+function xe(l) {
   let e, t = (
     /*p*/
-    n[41].index != null && Qe(n)
+    l[41].index != null && Qe(l)
   );
   return {
     c() {
       t && t.c(), e = se();
     },
-    m(l, i) {
-      t && t.m(l, i), w(l, e, i);
+    m(n, i) {
+      t && t.m(n, i), k(n, e, i);
     },
-    p(l, i) {
+    p(n, i) {
       /*p*/
-      l[41].index != null ? t ? t.p(l, i) : (t = Qe(l), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
+      n[41].index != null ? t ? t.p(n, i) : (t = Qe(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
     },
-    d(l) {
-      l && g(e), t && t.d(l);
+    d(n) {
+      n && w(e), t && t.d(n);
     }
   };
 }
-function $e(n) {
+function $e(l) {
   let e, t = (
     /*eta*/
-    n[0] ? `/${/*formatted_eta*/
-    n[19]}` : ""
-  ), l, i;
+    l[0] ? `/${/*formatted_eta*/
+    l[19]}` : ""
+  ), n, i;
   return {
     c() {
-      e = F(
+      e = S(
         /*formatted_timer*/
-        n[20]
-      ), l = F(t), i = F("s");
+        l[20]
+      ), n = S(t), i = S("s");
     },
     m(s, o) {
-      w(s, e, o), w(s, l, o), w(s, i, o);
+      k(s, e, o), k(s, n, o), k(s, i, o);
     },
     p(s, o) {
       o[0] & /*formatted_timer*/
@@ -1672,87 +1743,87 @@ function $e(n) {
       ), o[0] & /*eta, formatted_eta*/
       524289 && t !== (t = /*eta*/
       s[0] ? `/${/*formatted_eta*/
-      s[19]}` : "") && A(l, t);
+      s[19]}` : "") && A(n, t);
     },
     d(s) {
-      s && (g(e), g(l), g(i));
+      s && (w(e), w(n), w(i));
     }
   };
 }
-function fn(n) {
+function ol(l) {
   let e, t;
-  return e = new Dl({
+  return e = new On({
     props: { margin: (
       /*variant*/
-      n[8] === "default"
+      l[8] === "default"
     ) }
   }), {
     c() {
       yt(e.$$.fragment);
     },
-    m(l, i) {
-      Ft(e, l, i), t = !0;
+    m(n, i) {
+      Ft(e, n, i), t = !0;
     },
-    p(l, i) {
+    p(n, i) {
       const s = {};
       i[0] & /*variant*/
       256 && (s.margin = /*variant*/
-      l[8] === "default"), e.$set(s);
+      n[8] === "default"), e.$set(s);
     },
-    i(l) {
-      t || (K(e.$$.fragment, l), t = !0);
+    i(n) {
+      t || (K(e.$$.fragment, n), t = !0);
     },
-    o(l) {
-      Q(e.$$.fragment, l), t = !1;
+    o(n) {
+      Q(e.$$.fragment, n), t = !1;
     },
-    d(l) {
-      vt(e, l);
+    d(n) {
+      vt(e, n);
     }
   };
 }
-function on(n) {
-  let e, t, l, i, s, o = `${/*last_progress_level*/
-  n[15] * 100}%`, a = (
+function rl(l) {
+  let e, t, n, i, s, o = `${/*last_progress_level*/
+  l[15] * 100}%`, a = (
     /*progress*/
-    n[7] != null && et(n)
+    l[7] != null && et(l)
   );
   return {
     c() {
-      e = H("div"), t = H("div"), a && a.c(), l = W(), i = H("div"), s = H("div"), P(t, "class", "progress-level-inner svelte-1yk38uw"), P(s, "class", "progress-bar svelte-1yk38uw"), Y(s, "width", o), P(i, "class", "progress-bar-wrap svelte-1yk38uw"), P(e, "class", "progress-level svelte-1yk38uw");
+      e = H("div"), t = H("div"), a && a.c(), n = W(), i = H("div"), s = H("div"), P(t, "class", "progress-level-inner svelte-1yk38uw"), P(s, "class", "progress-bar svelte-1yk38uw"), J(s, "width", o), P(i, "class", "progress-bar-wrap svelte-1yk38uw"), P(e, "class", "progress-level svelte-1yk38uw");
     },
     m(r, f) {
-      w(r, e, f), J(e, t), a && a.m(t, null), J(e, l), J(e, i), J(i, s), n[31](s);
+      k(r, e, f), G(e, t), a && a.m(t, null), G(e, n), G(e, i), G(i, s), l[31](s);
     },
     p(r, f) {
       /*progress*/
       r[7] != null ? a ? a.p(r, f) : (a = et(r), a.c(), a.m(t, null)) : a && (a.d(1), a = null), f[0] & /*last_progress_level*/
       32768 && o !== (o = `${/*last_progress_level*/
-      r[15] * 100}%`) && Y(s, "width", o);
+      r[15] * 100}%`) && J(s, "width", o);
     },
-    i: ze,
-    o: ze,
+    i: Ve,
+    o: Ve,
     d(r) {
-      r && g(e), a && a.d(), n[31](null);
+      r && w(e), a && a.d(), l[31](null);
     }
   };
 }
-function et(n) {
+function et(l) {
   let e, t = pe(
     /*progress*/
-    n[7]
-  ), l = [];
+    l[7]
+  ), n = [];
   for (let i = 0; i < t.length; i += 1)
-    l[i] = st(Ue(n, t, i));
+    n[i] = st(Ye(l, t, i));
   return {
     c() {
-      for (let i = 0; i < l.length; i += 1)
-        l[i].c();
+      for (let i = 0; i < n.length; i += 1)
+        n[i].c();
       e = se();
     },
     m(i, s) {
-      for (let o = 0; o < l.length; o += 1)
-        l[o] && l[o].m(i, s);
-      w(i, e, s);
+      for (let o = 0; o < n.length; o += 1)
+        n[o] && n[o].m(i, s);
+      k(i, e, s);
     },
     p(i, s) {
       if (s[0] & /*progress_level, progress*/
@@ -1763,123 +1834,123 @@ function et(n) {
         );
         let o;
         for (o = 0; o < t.length; o += 1) {
-          const a = Ue(i, t, o);
-          l[o] ? l[o].p(a, s) : (l[o] = st(a), l[o].c(), l[o].m(e.parentNode, e));
+          const a = Ye(i, t, o);
+          n[o] ? n[o].p(a, s) : (n[o] = st(a), n[o].c(), n[o].m(e.parentNode, e));
         }
-        for (; o < l.length; o += 1)
-          l[o].d(1);
-        l.length = t.length;
+        for (; o < n.length; o += 1)
+          n[o].d(1);
+        n.length = t.length;
       }
     },
     d(i) {
-      i && g(e), qt(l, i);
+      i && w(e), qt(n, i);
     }
   };
 }
-function tt(n) {
-  let e, t, l, i, s = (
+function tt(l) {
+  let e, t, n, i, s = (
     /*i*/
-    n[43] !== 0 && rn()
+    l[43] !== 0 && al()
   ), o = (
     /*p*/
-    n[41].desc != null && lt(n)
+    l[41].desc != null && nt(l)
   ), a = (
     /*p*/
-    n[41].desc != null && /*progress_level*/
-    n[14] && /*progress_level*/
-    n[14][
+    l[41].desc != null && /*progress_level*/
+    l[14] && /*progress_level*/
+    l[14][
       /*i*/
-      n[43]
-    ] != null && nt()
+      l[43]
+    ] != null && lt()
   ), r = (
     /*progress_level*/
-    n[14] != null && it(n)
+    l[14] != null && it(l)
   );
   return {
     c() {
-      s && s.c(), e = W(), o && o.c(), t = W(), a && a.c(), l = W(), r && r.c(), i = se();
+      s && s.c(), e = W(), o && o.c(), t = W(), a && a.c(), n = W(), r && r.c(), i = se();
     },
     m(f, u) {
-      s && s.m(f, u), w(f, e, u), o && o.m(f, u), w(f, t, u), a && a.m(f, u), w(f, l, u), r && r.m(f, u), w(f, i, u);
+      s && s.m(f, u), k(f, e, u), o && o.m(f, u), k(f, t, u), a && a.m(f, u), k(f, n, u), r && r.m(f, u), k(f, i, u);
     },
     p(f, u) {
       /*p*/
-      f[41].desc != null ? o ? o.p(f, u) : (o = lt(f), o.c(), o.m(t.parentNode, t)) : o && (o.d(1), o = null), /*p*/
+      f[41].desc != null ? o ? o.p(f, u) : (o = nt(f), o.c(), o.m(t.parentNode, t)) : o && (o.d(1), o = null), /*p*/
       f[41].desc != null && /*progress_level*/
       f[14] && /*progress_level*/
       f[14][
         /*i*/
         f[43]
-      ] != null ? a || (a = nt(), a.c(), a.m(l.parentNode, l)) : a && (a.d(1), a = null), /*progress_level*/
+      ] != null ? a || (a = lt(), a.c(), a.m(n.parentNode, n)) : a && (a.d(1), a = null), /*progress_level*/
       f[14] != null ? r ? r.p(f, u) : (r = it(f), r.c(), r.m(i.parentNode, i)) : r && (r.d(1), r = null);
     },
     d(f) {
-      f && (g(e), g(t), g(l), g(i)), s && s.d(f), o && o.d(f), a && a.d(f), r && r.d(f);
+      f && (w(e), w(t), w(n), w(i)), s && s.d(f), o && o.d(f), a && a.d(f), r && r.d(f);
     }
   };
 }
-function rn(n) {
+function al(l) {
   let e;
   return {
     c() {
-      e = F(" /");
+      e = S(" /");
     },
-    m(t, l) {
-      w(t, e, l);
+    m(t, n) {
+      k(t, e, n);
     },
     d(t) {
-      t && g(e);
+      t && w(e);
     }
   };
 }
-function lt(n) {
+function nt(l) {
   let e = (
     /*p*/
-    n[41].desc + ""
+    l[41].desc + ""
   ), t;
   return {
     c() {
-      t = F(e);
+      t = S(e);
     },
-    m(l, i) {
-      w(l, t, i);
+    m(n, i) {
+      k(n, t, i);
     },
-    p(l, i) {
+    p(n, i) {
       i[0] & /*progress*/
       128 && e !== (e = /*p*/
-      l[41].desc + "") && A(t, e);
+      n[41].desc + "") && A(t, e);
     },
-    d(l) {
-      l && g(t);
+    d(n) {
+      n && w(t);
     }
   };
 }
-function nt(n) {
+function lt(l) {
   let e;
   return {
     c() {
-      e = F("-");
+      e = S("-");
     },
-    m(t, l) {
-      w(t, e, l);
+    m(t, n) {
+      k(t, e, n);
     },
     d(t) {
-      t && g(e);
+      t && w(e);
     }
   };
 }
-function it(n) {
+function it(l) {
   let e = (100 * /*progress_level*/
-  (n[14][
+  (l[14][
     /*i*/
-    n[43]
-  ] || 0)).toFixed(1) + "", t, l;
+    l[43]
+  ] || 0)).toFixed(1) + "", t, n;
   return {
     c() {
-      t = F(e), l = F("%");
+      t = S(e), n = S("%");
     },
     m(i, s) {
-      w(i, t, s), w(i, l, s);
+      k(i, t, s), k(i, n, s);
     },
     p(i, s) {
       s[0] & /*progress_level*/
@@ -1890,69 +1961,69 @@ function it(n) {
       ] || 0)).toFixed(1) + "") && A(t, e);
     },
     d(i) {
-      i && (g(t), g(l));
+      i && (w(t), w(n));
     }
   };
 }
-function st(n) {
+function st(l) {
   let e, t = (
     /*p*/
-    (n[41].desc != null || /*progress_level*/
-    n[14] && /*progress_level*/
-    n[14][
+    (l[41].desc != null || /*progress_level*/
+    l[14] && /*progress_level*/
+    l[14][
       /*i*/
-      n[43]
-    ] != null) && tt(n)
+      l[43]
+    ] != null) && tt(l)
   );
   return {
     c() {
       t && t.c(), e = se();
     },
-    m(l, i) {
-      t && t.m(l, i), w(l, e, i);
+    m(n, i) {
+      t && t.m(n, i), k(n, e, i);
     },
-    p(l, i) {
+    p(n, i) {
       /*p*/
-      l[41].desc != null || /*progress_level*/
-      l[14] && /*progress_level*/
-      l[14][
+      n[41].desc != null || /*progress_level*/
+      n[14] && /*progress_level*/
+      n[14][
         /*i*/
-        l[43]
-      ] != null ? t ? t.p(l, i) : (t = tt(l), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
+        n[43]
+      ] != null ? t ? t.p(n, i) : (t = tt(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
     },
-    d(l) {
-      l && g(e), t && t.d(l);
+    d(n) {
+      n && w(e), t && t.d(n);
     }
   };
 }
-function ft(n) {
+function ft(l) {
   let e, t;
   return {
     c() {
-      e = H("p"), t = F(
+      e = H("p"), t = S(
         /*loading_text*/
-        n[9]
+        l[9]
       ), P(e, "class", "loading svelte-1yk38uw");
     },
-    m(l, i) {
-      w(l, e, i), J(e, t);
+    m(n, i) {
+      k(n, e, i), G(e, t);
     },
-    p(l, i) {
+    p(n, i) {
       i[0] & /*loading_text*/
       512 && A(
         t,
         /*loading_text*/
-        l[9]
+        n[9]
       );
     },
-    d(l) {
-      l && g(e);
+    d(n) {
+      n && w(e);
     }
   };
 }
-function an(n) {
-  let e, t, l, i, s;
-  const o = [$l, xl], a = [];
+function ul(l) {
+  let e, t, n, i, s;
+  const o = [tl, el], a = [];
   function r(f, u) {
     return (
       /*status*/
@@ -1962,60 +2033,60 @@ function an(n) {
       )
     );
   }
-  return ~(t = r(n)) && (l = a[t] = o[t](n)), {
+  return ~(t = r(l)) && (n = a[t] = o[t](l)), {
     c() {
-      e = H("div"), l && l.c(), P(e, "class", i = "wrap " + /*variant*/
-      n[8] + " " + /*show_progress*/
-      n[6] + " svelte-1yk38uw"), N(e, "hide", !/*status*/
-      n[4] || /*status*/
-      n[4] === "complete" || /*show_progress*/
-      n[6] === "hidden"), N(
+      e = H("div"), n && n.c(), P(e, "class", i = "wrap " + /*variant*/
+      l[8] + " " + /*show_progress*/
+      l[6] + " svelte-1yk38uw"), E(e, "hide", !/*status*/
+      l[4] || /*status*/
+      l[4] === "complete" || /*show_progress*/
+      l[6] === "hidden"), E(
         e,
         "translucent",
         /*variant*/
-        n[8] === "center" && /*status*/
-        (n[4] === "pending" || /*status*/
-        n[4] === "error") || /*translucent*/
-        n[11] || /*show_progress*/
-        n[6] === "minimal"
-      ), N(
+        l[8] === "center" && /*status*/
+        (l[4] === "pending" || /*status*/
+        l[4] === "error") || /*translucent*/
+        l[11] || /*show_progress*/
+        l[6] === "minimal"
+      ), E(
         e,
         "generating",
         /*status*/
-        n[4] === "generating"
-      ), N(
+        l[4] === "generating"
+      ), E(
         e,
         "border",
         /*border*/
-        n[12]
-      ), Y(
+        l[12]
+      ), J(
         e,
         "position",
         /*absolute*/
-        n[10] ? "absolute" : "static"
-      ), Y(
+        l[10] ? "absolute" : "static"
+      ), J(
         e,
         "padding",
         /*absolute*/
-        n[10] ? "0" : "var(--size-8) 0"
+        l[10] ? "0" : "var(--size-8) 0"
       );
     },
     m(f, u) {
-      w(f, e, u), ~t && a[t].m(e, null), n[33](e), s = !0;
+      k(f, e, u), ~t && a[t].m(e, null), l[33](e), s = !0;
     },
     p(f, u) {
-      let _ = t;
-      t = r(f), t === _ ? ~t && a[t].p(f, u) : (l && (Ct(), Q(a[_], 1, 1, () => {
-        a[_] = null;
-      }), pt()), ~t ? (l = a[t], l ? l.p(f, u) : (l = a[t] = o[t](f), l.c()), K(l, 1), l.m(e, null)) : l = null), (!s || u[0] & /*variant, show_progress*/
+      let c = t;
+      t = r(f), t === c ? ~t && a[t].p(f, u) : (n && (Ct(), Q(a[c], 1, 1, () => {
+        a[c] = null;
+      }), pt()), ~t ? (n = a[t], n ? n.p(f, u) : (n = a[t] = o[t](f), n.c()), K(n, 1), n.m(e, null)) : n = null), (!s || u[0] & /*variant, show_progress*/
       320 && i !== (i = "wrap " + /*variant*/
       f[8] + " " + /*show_progress*/
       f[6] + " svelte-1yk38uw")) && P(e, "class", i), (!s || u[0] & /*variant, show_progress, status, show_progress*/
-      336) && N(e, "hide", !/*status*/
+      336) && E(e, "hide", !/*status*/
       f[4] || /*status*/
       f[4] === "complete" || /*show_progress*/
       f[6] === "hidden"), (!s || u[0] & /*variant, show_progress, variant, status, translucent, show_progress*/
-      2384) && N(
+      2384) && E(
         e,
         "translucent",
         /*variant*/
@@ -2025,25 +2096,25 @@ function an(n) {
         f[11] || /*show_progress*/
         f[6] === "minimal"
       ), (!s || u[0] & /*variant, show_progress, status*/
-      336) && N(
+      336) && E(
         e,
         "generating",
         /*status*/
         f[4] === "generating"
       ), (!s || u[0] & /*variant, show_progress, border*/
-      4416) && N(
+      4416) && E(
         e,
         "border",
         /*border*/
         f[12]
       ), u[0] & /*absolute*/
-      1024 && Y(
+      1024 && J(
         e,
         "position",
         /*absolute*/
         f[10] ? "absolute" : "static"
       ), u[0] & /*absolute*/
-      1024 && Y(
+      1024 && J(
         e,
         "padding",
         /*absolute*/
@@ -2051,17 +2122,17 @@ function an(n) {
       );
     },
     i(f) {
-      s || (K(l), s = !0);
+      s || (K(n), s = !0);
     },
     o(f) {
-      Q(l), s = !1;
+      Q(n), s = !1;
     },
     d(f) {
-      f && g(e), ~t && a[t].d(), n[33](null);
+      f && w(e), ~t && a[t].d(), l[33](null);
     }
   };
 }
-var un = function(n, e, t, l) {
+var cl = function(l, e, t, n) {
   function i(s) {
     return s instanceof t ? s : new t(function(o) {
       o(s);
@@ -2070,138 +2141,138 @@ var un = function(n, e, t, l) {
   return new (t || (t = Promise))(function(s, o) {
     function a(u) {
       try {
-        f(l.next(u));
-      } catch (_) {
-        o(_);
+        f(n.next(u));
+      } catch (c) {
+        o(c);
       }
     }
     function r(u) {
       try {
-        f(l.throw(u));
-      } catch (_) {
-        o(_);
+        f(n.throw(u));
+      } catch (c) {
+        o(c);
       }
     }
     function f(u) {
       u.done ? s(u.value) : i(u.value).then(a, r);
     }
-    f((l = l.apply(n, e || [])).next());
+    f((n = n.apply(l, e || [])).next());
   });
 };
 let we = [], Le = !1;
-function cn(n) {
-  return un(this, arguments, void 0, function* (e, t = !0) {
+function _l(l) {
+  return cl(this, arguments, void 0, function* (e, t = !0) {
     if (!(window.__gradio_mode__ === "website" || window.__gradio_mode__ !== "app" && t !== !0)) {
       if (we.push(e), !Le)
         Le = !0;
       else
         return;
-      yield Ul(), requestAnimationFrame(() => {
-        let l = [0, 0];
+      yield Kn(), requestAnimationFrame(() => {
+        let n = [0, 0];
         for (let i = 0; i < we.length; i++) {
           const o = we[i].getBoundingClientRect();
-          (i === 0 || o.top + window.scrollY <= l[0]) && (l[0] = o.top + window.scrollY, l[1] = i);
+          (i === 0 || o.top + window.scrollY <= n[0]) && (n[0] = o.top + window.scrollY, n[1] = i);
         }
-        window.scrollTo({ top: l[0] - 20, behavior: "smooth" }), Le = !1, we = [];
+        window.scrollTo({ top: n[0] - 20, behavior: "smooth" }), Le = !1, we = [];
       });
     }
   });
 }
-function _n(n, e, t) {
-  let l, { $$slots: i = {}, $$scope: s } = e;
+function dl(l, e, t) {
+  let n, { $$slots: i = {}, $$scope: s } = e;
   this && this.__awaiter;
-  const o = Kl();
-  let { i18n: a } = e, { eta: r = null } = e, { queue_position: f } = e, { queue_size: u } = e, { status: _ } = e, { scroll_to_output: k = !1 } = e, { timer: m = !0 } = e, { show_progress: p = "full" } = e, { message: C = null } = e, { progress: y = null } = e, { variant: L = "default" } = e, { loading_text: d = "Loading..." } = e, { absolute: c = !0 } = e, { translucent: q = !1 } = e, { border: z = !1 } = e, { autoscroll: h } = e, M, T = !1, ue = 0, G = 0, x = null, $ = null, Ee = 0, O = null, fe, X = null, je = !0;
+  const o = xn();
+  let { i18n: a } = e, { eta: r = null } = e, { queue_position: f } = e, { queue_size: u } = e, { status: c } = e, { scroll_to_output: p = !1 } = e, { timer: m = !0 } = e, { show_progress: y = "full" } = e, { message: L = null } = e, { progress: v = null } = e, { variant: F = "default" } = e, { loading_text: d = "Loading..." } = e, { absolute: _ = !0 } = e, { translucent: q = !1 } = e, { border: z = !1 } = e, { autoscroll: b } = e, g, O = !1, ue = 0, R = 0, x = null, $ = null, Ae = 0, X = null, fe, U = null, Ie = !0;
   const Nt = () => {
-    t(0, r = t(27, x = t(19, ce = null))), t(25, ue = performance.now()), t(26, G = 0), T = !0, Ie();
+    t(0, r = t(27, x = t(19, ce = null))), t(25, ue = performance.now()), t(26, R = 0), O = !0, je();
   };
-  function Ie() {
+  function je() {
     requestAnimationFrame(() => {
-      t(26, G = (performance.now() - ue) / 1e3), T && Ie();
+      t(26, R = (performance.now() - ue) / 1e3), O && je();
     });
   }
   function Ze() {
-    t(26, G = 0), t(0, r = t(27, x = t(19, ce = null))), T && (T = !1);
+    t(26, R = 0), t(0, r = t(27, x = t(19, ce = null))), O && (O = !1);
   }
-  Jl(() => {
-    T && Ze();
+  Qn(() => {
+    O && Ze();
   });
   let ce = null;
-  function At(b) {
-    Ge[b ? "unshift" : "push"](() => {
-      X = b, t(16, X), t(7, y), t(14, O), t(15, fe);
+  function Et(h) {
+    Re[h ? "unshift" : "push"](() => {
+      U = h, t(16, U), t(7, v), t(14, X), t(15, fe);
     });
   }
-  const Et = () => {
+  const At = () => {
     o("clear_status");
   };
-  function jt(b) {
-    Ge[b ? "unshift" : "push"](() => {
-      M = b, t(13, M);
+  function It(h) {
+    Re[h ? "unshift" : "push"](() => {
+      g = h, t(13, g);
     });
   }
-  return n.$$set = (b) => {
-    "i18n" in b && t(1, a = b.i18n), "eta" in b && t(0, r = b.eta), "queue_position" in b && t(2, f = b.queue_position), "queue_size" in b && t(3, u = b.queue_size), "status" in b && t(4, _ = b.status), "scroll_to_output" in b && t(22, k = b.scroll_to_output), "timer" in b && t(5, m = b.timer), "show_progress" in b && t(6, p = b.show_progress), "message" in b && t(23, C = b.message), "progress" in b && t(7, y = b.progress), "variant" in b && t(8, L = b.variant), "loading_text" in b && t(9, d = b.loading_text), "absolute" in b && t(10, c = b.absolute), "translucent" in b && t(11, q = b.translucent), "border" in b && t(12, z = b.border), "autoscroll" in b && t(24, h = b.autoscroll), "$$scope" in b && t(29, s = b.$$scope);
-  }, n.$$.update = () => {
-    n.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
-    436207617 && (r === null && t(0, r = x), r != null && x !== r && (t(28, $ = (performance.now() - ue) / 1e3 + r), t(19, ce = $.toFixed(1)), t(27, x = r))), n.$$.dirty[0] & /*eta_from_start, timer_diff*/
-    335544320 && t(17, Ee = $ === null || $ <= 0 || !G ? null : Math.min(G / $, 1)), n.$$.dirty[0] & /*progress*/
-    128 && y != null && t(18, je = !1), n.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
-    114816 && (y != null ? t(14, O = y.map((b) => {
-      if (b.index != null && b.length != null)
-        return b.index / b.length;
-      if (b.progress != null)
-        return b.progress;
-    })) : t(14, O = null), O ? (t(15, fe = O[O.length - 1]), X && (fe === 0 ? t(16, X.style.transition = "0", X) : t(16, X.style.transition = "150ms", X))) : t(15, fe = void 0)), n.$$.dirty[0] & /*status*/
-    16 && (_ === "pending" ? Nt() : Ze()), n.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
-    20979728 && M && k && (_ === "pending" || _ === "complete") && cn(M, h), n.$$.dirty[0] & /*status, message*/
-    8388624, n.$$.dirty[0] & /*timer_diff*/
-    67108864 && t(20, l = G.toFixed(1));
+  return l.$$set = (h) => {
+    "i18n" in h && t(1, a = h.i18n), "eta" in h && t(0, r = h.eta), "queue_position" in h && t(2, f = h.queue_position), "queue_size" in h && t(3, u = h.queue_size), "status" in h && t(4, c = h.status), "scroll_to_output" in h && t(22, p = h.scroll_to_output), "timer" in h && t(5, m = h.timer), "show_progress" in h && t(6, y = h.show_progress), "message" in h && t(23, L = h.message), "progress" in h && t(7, v = h.progress), "variant" in h && t(8, F = h.variant), "loading_text" in h && t(9, d = h.loading_text), "absolute" in h && t(10, _ = h.absolute), "translucent" in h && t(11, q = h.translucent), "border" in h && t(12, z = h.border), "autoscroll" in h && t(24, b = h.autoscroll), "$$scope" in h && t(29, s = h.$$scope);
+  }, l.$$.update = () => {
+    l.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
+    436207617 && (r === null && t(0, r = x), r != null && x !== r && (t(28, $ = (performance.now() - ue) / 1e3 + r), t(19, ce = $.toFixed(1)), t(27, x = r))), l.$$.dirty[0] & /*eta_from_start, timer_diff*/
+    335544320 && t(17, Ae = $ === null || $ <= 0 || !R ? null : Math.min(R / $, 1)), l.$$.dirty[0] & /*progress*/
+    128 && v != null && t(18, Ie = !1), l.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
+    114816 && (v != null ? t(14, X = v.map((h) => {
+      if (h.index != null && h.length != null)
+        return h.index / h.length;
+      if (h.progress != null)
+        return h.progress;
+    })) : t(14, X = null), X ? (t(15, fe = X[X.length - 1]), U && (fe === 0 ? t(16, U.style.transition = "0", U) : t(16, U.style.transition = "150ms", U))) : t(15, fe = void 0)), l.$$.dirty[0] & /*status*/
+    16 && (c === "pending" ? Nt() : Ze()), l.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
+    20979728 && g && p && (c === "pending" || c === "complete") && _l(g, b), l.$$.dirty[0] & /*status, message*/
+    8388624, l.$$.dirty[0] & /*timer_diff*/
+    67108864 && t(20, n = R.toFixed(1));
   }, [
     r,
     a,
     f,
     u,
-    _,
+    c,
     m,
-    p,
     y,
-    L,
+    v,
+    F,
     d,
-    c,
+    _,
     q,
     z,
-    M,
-    O,
-    fe,
+    g,
     X,
-    Ee,
-    je,
+    fe,
+    U,
+    Ae,
+    Ie,
     ce,
-    l,
+    n,
     o,
-    k,
-    C,
-    h,
+    p,
+    L,
+    b,
     ue,
-    G,
+    R,
     x,
     $,
     s,
     i,
-    At,
     Et,
-    jt
+    At,
+    It
   ];
 }
-class dn extends Hl {
+class ml extends Tn {
   constructor(e) {
-    super(), Yl(
+    super(), Xn(
       this,
       e,
-      _n,
-      an,
-      Gl,
+      dl,
+      ul,
+      Yn,
       {
         i18n: 1,
         eta: 0,
@@ -2226,61 +2297,61 @@ class dn extends Hl {
   }
 }
 const {
-  SvelteComponent: mn,
-  append: bn,
+  SvelteComponent: hl,
+  append: bl,
   attr: re,
   detach: Lt,
   element: ot,
-  empty: hn,
-  init: gn,
+  empty: gl,
+  init: wl,
   insert: St,
   noop: rt,
-  safe_not_equal: wn,
+  safe_not_equal: kl,
   src_url_equal: at,
-  toggle_class: le
+  toggle_class: ne
 } = window.__gradio__svelte__internal;
-function ut(n) {
-  let e, t, l;
+function ut(l) {
+  let e, t, n;
   return {
     c() {
-      e = ot("div"), t = ot("img"), at(t.src, l = /*value*/
-      n[0].url) || re(t, "src", l), re(t, "alt", ""), re(t, "class", "svelte-giydt1"), re(e, "class", "container svelte-giydt1"), le(
+      e = ot("div"), t = ot("img"), at(t.src, n = /*value*/
+      l[0].url) || re(t, "src", n), re(t, "alt", ""), re(t, "class", "svelte-giydt1"), re(e, "class", "container svelte-giydt1"), ne(
         e,
         "table",
         /*type*/
-        n[1] === "table"
-      ), le(
+        l[1] === "table"
+      ), ne(
         e,
         "gallery",
         /*type*/
-        n[1] === "gallery"
-      ), le(
+        l[1] === "gallery"
+      ), ne(
         e,
         "selected",
         /*selected*/
-        n[2]
+        l[2]
       );
     },
     m(i, s) {
-      St(i, e, s), bn(e, t);
+      St(i, e, s), bl(e, t);
     },
     p(i, s) {
       s & /*value*/
-      1 && !at(t.src, l = /*value*/
-      i[0].url) && re(t, "src", l), s & /*type*/
-      2 && le(
+      1 && !at(t.src, n = /*value*/
+      i[0].url) && re(t, "src", n), s & /*type*/
+      2 && ne(
         e,
         "table",
         /*type*/
         i[1] === "table"
       ), s & /*type*/
-      2 && le(
+      2 && ne(
         e,
         "gallery",
         /*type*/
         i[1] === "gallery"
       ), s & /*selected*/
-      4 && le(
+      4 && ne(
         e,
         "selected",
         /*selected*/
@@ -2292,173 +2363,173 @@ function ut(n) {
     }
   };
 }
-function kn(n) {
+function pl(l) {
   let e, t = (
     /*value*/
-    n[0] && ut(n)
+    l[0] && ut(l)
   );
   return {
     c() {
-      t && t.c(), e = hn();
+      t && t.c(), e = gl();
     },
-    m(l, i) {
-      t && t.m(l, i), St(l, e, i);
+    m(n, i) {
+      t && t.m(n, i), St(n, e, i);
     },
-    p(l, [i]) {
+    p(n, [i]) {
       /*value*/
-      l[0] ? t ? t.p(l, i) : (t = ut(l), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
+      n[0] ? t ? t.p(n, i) : (t = ut(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
     },
     i: rt,
     o: rt,
-    d(l) {
-      l && Lt(e), t && t.d(l);
+    d(n) {
+      n && Lt(e), t && t.d(n);
     }
   };
 }
-function pn(n, e, t) {
-  let { value: l } = e, { type: i } = e, { selected: s = !1 } = e;
-  return n.$$set = (o) => {
-    "value" in o && t(0, l = o.value), "type" in o && t(1, i = o.type), "selected" in o && t(2, s = o.selected);
-  }, [l, i, s];
+function yl(l, e, t) {
+  let { value: n } = e, { type: i } = e, { selected: s = !1 } = e;
+  return l.$$set = (o) => {
+    "value" in o && t(0, n = o.value), "type" in o && t(1, i = o.type), "selected" in o && t(2, s = o.selected);
+  }, [n, i, s];
 }
-class Wn extends mn {
+class Bl extends hl {
   constructor(e) {
-    super(), gn(this, e, pn, kn, wn, { value: 0, type: 1, selected: 2 });
+    super(), wl(this, e, yl, pl, kl, { value: 0, type: 1, selected: 2 });
   }
 }
 const {
-  SvelteComponent: yn,
-  assign: vn,
-  attr: qn,
-  binding_callbacks: Cn,
-  check_outros: Fn,
-  create_component: Mt,
-  destroy_component: Vt,
+  SvelteComponent: vl,
+  assign: ql,
+  attr: Cl,
+  binding_callbacks: Fl,
+  check_outros: Ll,
+  create_component: zt,
+  destroy_component: Mt,
   detach: Ne,
-  element: Ln,
-  empty: Sn,
-  flush: Z,
-  get_spread_object: Mn,
-  get_spread_update: Vn,
-  group_outros: zn,
-  init: Nn,
-  insert: Ae,
-  mount_component: zt,
-  safe_not_equal: An,
+  element: Sl,
+  empty: zl,
+  flush: N,
+  get_spread_object: Ml,
+  get_spread_update: Vl,
+  group_outros: Nl,
+  init: El,
+  insert: Ee,
+  mount_component: Vt,
+  safe_not_equal: Al,
   set_style: ct,
-  space: En,
+  space: Il,
   transition_in: ae,
   transition_out: ye
-} = window.__gradio__svelte__internal, { onMount: jn } = window.__gradio__svelte__internal;
-function _t(n) {
+} = window.__gradio__svelte__internal, { onMount: jl } = window.__gradio__svelte__internal;
+function _t(l) {
   let e, t;
-  return e = new nl({
+  return e = new sn({
     props: {
       visible: (
         /*visible*/
-        n[3]
+        l[3]
       ),
       variant: "solid",
       border_mode: (
         /*dragging*/
-        n[11] ? "focus" : "base"
+        l[12] ? "focus" : "base"
       ),
       padding: !1,
       elem_id: (
         /*elem_id*/
-        n[1]
+        l[1]
       ),
       elem_classes: (
         /*elem_classes*/
-        n[2]
+        l[2]
       ),
       allow_overflow: !1,
       container: (
         /*container*/
-        n[4]
+        l[4]
       ),
       scale: (
         /*scale*/
-        n[5]
+        l[5]
       ),
       min_width: (
         /*min_width*/
-        n[6]
+        l[6]
       ),
-      $$slots: { default: [In] },
-      $$scope: { ctx: n }
+      $$slots: { default: [Zl] },
+      $$scope: { ctx: l }
     }
   }), {
     c() {
-      Mt(e.$$.fragment);
+      zt(e.$$.fragment);
     },
-    m(l, i) {
-      zt(e, l, i), t = !0;
+    m(n, i) {
+      Vt(e, n, i), t = !0;
     },
-    p(l, i) {
+    p(n, i) {
       const s = {};
       i & /*visible*/
       8 && (s.visible = /*visible*/
-      l[3]), i & /*elem_id*/
+      n[3]), i & /*elem_id*/
       2 && (s.elem_id = /*elem_id*/
-      l[1]), i & /*elem_classes*/
+      n[1]), i & /*elem_classes*/
       4 && (s.elem_classes = /*elem_classes*/
-      l[2]), i & /*container*/
+      n[2]), i & /*container*/
       16 && (s.container = /*container*/
-      l[4]), i & /*scale*/
+      n[4]), i & /*scale*/
       32 && (s.scale = /*scale*/
-      l[5]), i & /*min_width*/
+      n[5]), i & /*min_width*/
       64 && (s.min_width = /*min_width*/
-      l[6]), i & /*$$scope, ref, height, gradio, loading_status*/
-      67201 && (s.$$scope = { dirty: i, ctx: l }), e.$set(s);
+      n[6]), i & /*$$scope, ref, height, gradio, patched_loading_status, loading_status*/
+      1052289 && (s.$$scope = { dirty: i, ctx: n }), e.$set(s);
     },
-    i(l) {
-      t || (ae(e.$$.fragment, l), t = !0);
+    i(n) {
+      t || (ae(e.$$.fragment, n), t = !0);
     },
-    o(l) {
-      ye(e.$$.fragment, l), t = !1;
+    o(n) {
+      ye(e.$$.fragment, n), t = !1;
     },
-    d(l) {
-      Vt(e, l);
+    d(n) {
+      Mt(e, n);
     }
   };
 }
-function In(n) {
-  let e, t, l, i;
+function Zl(l) {
+  let e, t, n, i;
   const s = [
     { autoscroll: (
       /*gradio*/
-      n[9].autoscroll
+      l[9].autoscroll
     ) },
     { i18n: (
       /*gradio*/
-      n[9].i18n
+      l[9].i18n
     ) },
-    /*loading_status*/
-    n[7]
+    /*patched_loading_status*/
+    l[10]
   ];
   let o = {};
   for (let a = 0; a < s.length; a += 1)
-    o = vn(o, s[a]);
-  return e = new dn({ props: o }), e.$on(
+    o = ql(o, s[a]);
+  return e = new ml({ props: o }), e.$on(
     "clear_status",
     /*clear_status_handler*/
-    n[14]
+    l[15]
   ), {
     c() {
-      Mt(e.$$.fragment), t = En(), l = Ln("div"), qn(l, "class", "viewer svelte-gu2pck"), ct(
-        l,
+      zt(e.$$.fragment), t = Il(), n = Sl("div"), Cl(n, "class", "viewer svelte-mo2zro"), ct(
+        n,
         "height",
         /*height*/
-        n[0]
+        l[0]
       );
     },
     m(a, r) {
-      zt(e, a, r), Ae(a, t, r), Ae(a, l, r), n[15](l), i = !0;
+      Vt(e, a, r), Ee(a, t, r), Ee(a, n, r), l[16](n), i = !0;
     },
     p(a, r) {
-      const f = r & /*gradio, loading_status*/
-      640 ? Vn(s, [
+      const f = r & /*gradio, patched_loading_status*/
+      1536 ? Vl(s, [
         r & /*gradio*/
         512 && { autoscroll: (
           /*gradio*/
@@ -2469,15 +2540,15 @@ function In(n) {
           /*gradio*/
           a[9].i18n
         ) },
-        r & /*loading_status*/
-        128 && Mn(
-          /*loading_status*/
-          a[7]
+        r & /*patched_loading_status*/
+        1024 && Ml(
+          /*patched_loading_status*/
+          a[10]
         )
       ]) : {};
       e.$set(f), r & /*height*/
       1 && ct(
-        l,
+        n,
         "height",
         /*height*/
         a[0]
@@ -2490,88 +2561,100 @@ function In(n) {
       ye(e.$$.fragment, a), i = !1;
     },
     d(a) {
-      a && (Ne(t), Ne(l)), Vt(e, a), n[15](null);
+      a && (Ne(t), Ne(n)), Mt(e, a), l[16](null);
     }
   };
 }
-function Zn(n) {
-  let e, t, l = !/*interactive*/
-  n[8] && _t(n);
+function Pl(l) {
+  let e, t, n = !/*interactive*/
+  l[8] && _t(l);
   return {
     c() {
-      l && l.c(), e = Sn();
+      n && n.c(), e = zl();
     },
     m(i, s) {
-      l && l.m(i, s), Ae(i, e, s), t = !0;
+      n && n.m(i, s), Ee(i, e, s), t = !0;
     },
     p(i, [s]) {
       /*interactive*/
-      i[8] ? l && (zn(), ye(l, 1, 1, () => {
-        l = null;
-      }), Fn()) : l ? (l.p(i, s), s & /*interactive*/
-      256 && ae(l, 1)) : (l = _t(i), l.c(), ae(l, 1), l.m(e.parentNode, e));
+      i[8] ? n && (Nl(), ye(n, 1, 1, () => {
+        n = null;
+      }), Ll()) : n ? (n.p(i, s), s & /*interactive*/
+      256 && ae(n, 1)) : (n = _t(i), n.c(), ae(n, 1), n.m(e.parentNode, e));
     },
     i(i) {
-      t || (ae(l), t = !0);
+      t || (ae(n), t = !0);
     },
     o(i) {
-      ye(l), t = !1;
+      ye(n), t = !1;
     },
     d(i) {
-      i && Ne(e), l && l.d(i);
+      i && Ne(e), n && n.d(i);
     }
   };
 }
-function Pn(n, e, t) {
-  let { elem_id: l = "" } = e, { elem_classes: i = [] } = e, { visible: s = !0 } = e, { height: o = 640 } = e, { value: a = null } = e, { container: r = !0 } = e, { scale: f = null } = e, { min_width: u = void 0 } = e, { loading_status: _ } = e, { interactive: k } = e, { gradio: m } = e, p, C, y;
-  jn(() => (t(13, C = new Ht()), C.start(void 0, y), () => C.stop()));
-  const L = () => m.dispatch("clear_status", _);
-  function d(c) {
-    Cn[c ? "unshift" : "push"](() => {
-      y = c, t(10, y);
+function Wl(l, e, t) {
+  let { elem_id: n = "" } = e, { elem_classes: i = [] } = e, { visible: s = !0 } = e, { height: o = 640 } = e, { value: a = null } = e, { container: r = !0 } = e, { scale: f = null } = e, { min_width: u = void 0 } = e, { loading_status: c } = e, { interactive: p } = e, { streaming: m } = e, y = null, { gradio: L } = e, v, F, d, _;
+  function q() {
+    if (JSON.stringify(a) !== JSON.stringify(y) && F != null && F.ready)
+      if (y = a, !Array.isArray(a))
+        a.is_stream ? F.open(a.url, { follow_if_http: !0 }) : F.open(a.url);
+      else
+        for (const g of a)
+          typeof g != "string" ? g.url && F.open(g.url) : F.open(g);
+  }
+  jl(() => (F = new Ht(), F.start(void 0, d, !0).then(() => {
+    q();
+  }), () => {
+    F.stop();
+  }));
+  const z = () => L.dispatch("clear_status", c);
+  function b(g) {
+    Fl[g ? "unshift" : "push"](() => {
+      d = g, t(11, d);
     });
   }
-  return n.$$set = (c) => {
-    "elem_id" in c && t(1, l = c.elem_id), "elem_classes" in c && t(2, i = c.elem_classes), "visible" in c && t(3, s = c.visible), "height" in c && t(0, o = c.height), "value" in c && t(12, a = c.value), "container" in c && t(4, r = c.container), "scale" in c && t(5, f = c.scale), "min_width" in c && t(6, u = c.min_width), "loading_status" in c && t(7, _ = c.loading_status), "interactive" in c && t(8, k = c.interactive), "gradio" in c && t(9, m = c.gradio);
-  }, n.$$.update = () => {
-    if (n.$$.dirty & /*height*/
-    1 && t(0, o = typeof o == "number" ? `${o}px` : o), n.$$.dirty & /*value, gradio*/
-    4608 && m.dispatch("change"), n.$$.dirty & /*value, rr*/
-    12288 && a !== null && Array.isArray(a))
-      for (const c of a)
-        typeof c != "string" ? c.url && C.open(c.url) : C.open(c);
+  return l.$$set = (g) => {
+    "elem_id" in g && t(1, n = g.elem_id), "elem_classes" in g && t(2, i = g.elem_classes), "visible" in g && t(3, s = g.visible), "height" in g && t(0, o = g.height), "value" in g && t(13, a = g.value), "container" in g && t(4, r = g.container), "scale" in g && t(5, f = g.scale), "min_width" in g && t(6, u = g.min_width), "loading_status" in g && t(7, c = g.loading_status), "interactive" in g && t(8, p = g.interactive), "streaming" in g && t(14, m = g.streaming), "gradio" in g && t(9, L = g.gradio);
+  }, l.$$.update = () => {
+    l.$$.dirty & /*height*/
+    1 && t(0, o = typeof o == "number" ? `${o}px` : o), l.$$.dirty & /*loading_status, streaming, patched_loading_status*/
+    17536 && (t(10, _ = c), m && _?.status === "generating" && t(10, _.status = "complete", _)), l.$$.dirty & /*value*/
+    8192 && q();
   }, [
     o,
-    l,
+    n,
     i,
     s,
     r,
     f,
     u,
-    _,
-    k,
-    m,
-    y,
+    c,
     p,
-    a,
-    C,
     L,
-    d
+    _,
+    d,
+    v,
+    a,
+    m,
+    z,
+    b
   ];
 }
-class Bn extends yn {
+class Dl extends vl {
   constructor(e) {
-    super(), Nn(this, e, Pn, Zn, An, {
+    super(), El(this, e, Wl, Pl, Al, {
       elem_id: 1,
       elem_classes: 2,
       visible: 3,
       height: 0,
-      value: 12,
+      value: 13,
       container: 4,
       scale: 5,
       min_width: 6,
       loading_status: 7,
       interactive: 8,
+      streaming: 14,
       gradio: 9
     });
   }
@@ -2579,70 +2662,76 @@ class Bn extends yn {
     return this.$$.ctx[1];
   }
   set elem_id(e) {
-    this.$$set({ elem_id: e }), Z();
+    this.$$set({ elem_id: e }), N();
   }
   get elem_classes() {
     return this.$$.ctx[2];
   }
   set elem_classes(e) {
-    this.$$set({ elem_classes: e }), Z();
+    this.$$set({ elem_classes: e }), N();
   }
   get visible() {
     return this.$$.ctx[3];
   }
   set visible(e) {
-    this.$$set({ visible: e }), Z();
+    this.$$set({ visible: e }), N();
   }
   get height() {
     return this.$$.ctx[0];
   }
   set height(e) {
-    this.$$set({ height: e }), Z();
+    this.$$set({ height: e }), N();
   }
   get value() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
   set value(e) {
-    this.$$set({ value: e }), Z();
+    this.$$set({ value: e }), N();
   }
   get container() {
     return this.$$.ctx[4];
   }
   set container(e) {
-    this.$$set({ container: e }), Z();
+    this.$$set({ container: e }), N();
   }
   get scale() {
     return this.$$.ctx[5];
   }
   set scale(e) {
-    this.$$set({ scale: e }), Z();
+    this.$$set({ scale: e }), N();
   }
   get min_width() {
     return this.$$.ctx[6];
   }
   set min_width(e) {
-    this.$$set({ min_width: e }), Z();
+    this.$$set({ min_width: e }), N();
   }
   get loading_status() {
     return this.$$.ctx[7];
   }
   set loading_status(e) {
-    this.$$set({ loading_status: e }), Z();
+    this.$$set({ loading_status: e }), N();
   }
   get interactive() {
     return this.$$.ctx[8];
   }
   set interactive(e) {
-    this.$$set({ interactive: e }), Z();
+    this.$$set({ interactive: e }), N();
+  }
+  get streaming() {
+    return this.$$.ctx[14];
+  }
+  set streaming(e) {
+    this.$$set({ streaming: e }), N();
   }
   get gradio() {
     return this.$$.ctx[9];
   }
   set gradio(e) {
-    this.$$set({ gradio: e }), Z();
+    this.$$set({ gradio: e }), N();
   }
 }
 export {
-  Wn as BaseExample,
-  Bn as default
+  Bl as BaseExample,
+  Dl as default
 };

src/backend/gradio_rerun/templates/component/re_viewer-DOCTrs8v.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:88c5313e5b992d2005e58716dc1e91d45ae0f33b6dfbf66301edd6bf9ea5cf80
+size 29838314

src/backend/gradio_rerun/templates/component/style.css

@@ -1 +1 @@
-/*! tailwindcss v4.0.0-alpha.14 | MIT License | https://tailwindcss.com */@layer theme{:root{--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-family-sans);--default-font-feature-settings:var(--font-family-sans--font-feature-settings);--default-font-variation-settings:var(--font-family-sans--font-variation-settings);--default-mono-font-family:var(--font-family-mono);--default-mono-font-feature-settings:var(--font-family-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-family-mono--font-variation-settings);--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--color-black:#000;--color-white:#fff;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-gray-950:#030712;--color-zinc-50:#fafafa;--color-zinc-100:#f4f4f5;--color-zinc-200:#e4e4e7;--color-zinc-300:#d4d4d8;--color-zinc-400:#a1a1aa;--color-zinc-500:#71717a;--color-zinc-600:#52525b;--color-zinc-700:#3f3f46;--color-zinc-800:#27272a;--color-zinc-900:#18181b;--color-zinc-950:#09090b;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-neutral-950:#0a0a0a;--color-stone-50:#fafaf9;--color-stone-100:#f5f5f4;--color-stone-200:#e7e5e4;--color-stone-300:#d6d3d1;--color-stone-400:#a8a29e;--color-stone-500:#78716c;--color-stone-600:#57534e;--color-stone-700:#44403c;--color-stone-800:#292524;--color-stone-900:#1c1917;--color-stone-950:#0c0a09;--color-red-50:#fef2f2;--color-red-100:#fee2e2;--color-red-200:#fecaca;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-red-900:#7f1d1d;--color-red-950:#450a0a;--color-orange-50:#fff7ed;--color-orange-100:#ffedd5;--color-orange-200:#fed7aa;--color-orange-300:#fdba74;--color-orange-400:#fb923c;--color-orange-500:#f97316;--color-orange-600:#ea580c;--color-orange-700:#c2410c;--color-orange-800:#9a3412;--color-orange-900:#7c2d12;--color-orange-950:#431407;--color-amber-50:#fffbeb;--color-amber-100:#fef3c7;--color-amber-200:#fde68a;--color-amber-300:#fcd34d;--color-amber-400:#fbbf24;--color-amber-500:#f59e0b;--color-amber-600:#d97706;--color-amber-700:#b45309;--color-amber-800:#92400e;--color-amber-900:#78350f;--color-amber-950:#451a03;--color-yellow-50:#fefce8;--color-yellow-100:#fef9c3;--color-yellow-200:#fef08a;--color-yellow-300:#fde047;--color-yellow-400:#facc15;--color-yellow-500:#eab308;--color-yellow-600:#ca8a04;--color-yellow-700:#a16207;--color-yellow-800:#854d0e;--color-yellow-900:#713f12;--color-yellow-950:#422006;--color-lime-50:#f7fee7;--color-lime-100:#ecfccb;--color-lime-200:#d9f99d;--color-lime-300:#bef264;--color-lime-400:#a3e635;--color-lime-500:#84cc16;--color-lime-600:#65a30d;--color-lime-700:#4d7c0f;--color-lime-800:#3f6212;--color-lime-900:#365314;--color-lime-950:#1a2e05;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-500:#22c55e;--color-green-600:#16a34a;--color-green-700:#15803d;--color-green-800:#166534;--color-green-900:#14532d;--color-green-950:#052e16;--color-emerald-50:#ecfdf5;--color-emerald-100:#d1fae5;--color-emerald-200:#a7f3d0;--color-emerald-300:#6ee7b7;--color-emerald-400:#34d399;--color-emerald-500:#10b981;--color-emerald-600:#059669;--color-emerald-700:#047857;--color-emerald-800:#065f46;--color-emerald-900:#064e3b;--color-emerald-950:#022c22;--color-teal-50:#f0fdfa;--color-teal-100:#ccfbf1;--color-teal-200:#99f6e4;--color-teal-300:#5eead4;--color-teal-400:#2dd4bf;--color-teal-500:#14b8a6;--color-teal-600:#0d9488;--color-teal-700:#0f766e;--color-teal-800:#115e59;--color-teal-900:#134e4a;--color-teal-950:#042f2e;--color-cyan-50:#ecfeff;--color-cyan-100:#cffafe;--color-cyan-200:#a5f3fc;--color-cyan-300:#67e8f9;--color-cyan-400:#22d3ee;--color-cyan-500:#06b6d4;--color-cyan-600:#0891b2;--color-cyan-700:#0e7490;--color-cyan-800:#155e75;--color-cyan-900:#164e63;--color-cyan-950:#083344;--color-sky-50:#f0f9ff;--color-sky-100:#e0f2fe;--color-sky-200:#bae6fd;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-sky-700:#0369a1;--color-sky-800:#075985;--color-sky-900:#0c4a6e;--color-sky-950:#082f49;--color-blue-50:#eff6ff;--color-blue-100:#dbeafe;--color-blue-200:#bfdbfe;--color-blue-300:#93c5fd;--color-blue-400:#60a5fa;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-blue-800:#1e40af;--color-blue-900:#1e3a8a;--color-blue-950:#172554;--color-indigo-50:#eef2ff;--color-indigo-100:#e0e7ff;--color-indigo-200:#c7d2fe;--color-indigo-300:#a5b4fc;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-indigo-700:#4338ca;--color-indigo-800:#3730a3;--color-indigo-900:#312e81;--color-indigo-950:#1e1b4b;--color-violet-50:#f5f3ff;--color-violet-100:#ede9fe;--color-violet-200:#ddd6fe;--color-violet-300:#c4b5fd;--color-violet-400:#a78bfa;--color-violet-500:#8b5cf6;--color-violet-600:#7c3aed;--color-violet-700:#6d28d9;--color-violet-800:#5b21b6;--color-violet-900:#4c1d95;--color-violet-950:#2e1065;--color-purple-50:#faf5ff;--color-purple-100:#f3e8ff;--color-purple-200:#e9d5ff;--color-purple-300:#d8b4fe;--color-purple-400:#c084fc;--color-purple-500:#a855f7;--color-purple-600:#9333ea;--color-purple-700:#7e22ce;--color-purple-800:#6b21a8;--color-purple-900:#581c87;--color-purple-950:#3b0764;--color-fuchsia-50:#fdf4ff;--color-fuchsia-100:#fae8ff;--color-fuchsia-200:#f5d0fe;--color-fuchsia-300:#f0abfc;--color-fuchsia-400:#e879f9;--color-fuchsia-500:#d946ef;--color-fuchsia-600:#c026d3;--color-fuchsia-700:#a21caf;--color-fuchsia-800:#86198f;--color-fuchsia-900:#701a75;--color-fuchsia-950:#4a044e;--color-pink-50:#fdf2f8;--color-pink-100:#fce7f3;--color-pink-200:#fbcfe8;--color-pink-300:#f9a8d4;--color-pink-400:#f472b6;--color-pink-500:#ec4899;--color-pink-600:#db2777;--color-pink-700:#be185d;--color-pink-800:#9d174d;--color-pink-900:#831843;--color-pink-950:#500724;--color-rose-50:#fff1f2;--color-rose-100:#ffe4e6;--color-rose-200:#fecdd3;--color-rose-300:#fda4af;--color-rose-400:#fb7185;--color-rose-500:#f43f5e;--color-rose-600:#e11d48;--color-rose-700:#be123c;--color-rose-800:#9f1239;--color-rose-900:#881337;--color-rose-950:#4c0519;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur:8px;--blur-sm:4px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--radius:.25rem;--radius-sm:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-xs:0 1px #0000000d;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-inner:inset 0 2px 4px 0 #0000000d;--inset-shadow-xs:inset 0 1px #0000000d;--inset-shadow-sm:inset 0 1px 1px #0000000d;--inset-shadow:inset 0 2px 4px #0000000d;--drop-shadow:0 1px 2px #0000001a,0 1px 1px #0000000f;--drop-shadow-sm:0 1px 1px #0000000d;--drop-shadow-md:0 4px 3px #00000012,0 2px 2px #0000000f;--drop-shadow-lg:0 10px 8px #0000000a,0 4px 3px #0000001a;--drop-shadow-xl:0 20px 13px #00000008,0 8px 5px #00000014;--drop-shadow-2xl:0 25px 25px #00000026;--spacing-px:1px;--spacing-0:0px;--spacing-0_5:.125rem;--spacing-1:.25rem;--spacing-1_5:.375rem;--spacing-2:.5rem;--spacing-2_5:.625rem;--spacing-3:.75rem;--spacing-3_5:.875rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-11:2.75rem;--spacing-12:3rem;--spacing-14:3.5rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-44:11rem;--spacing-48:12rem;--spacing-52:13rem;--spacing-56:14rem;--spacing-60:15rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--width-3xs:16rem;--width-2xs:18rem;--width-xs:20rem;--width-sm:24rem;--width-md:28rem;--width-lg:32rem;--width-xl:36rem;--width-2xl:42rem;--width-3xl:48rem;--width-4xl:56rem;--width-5xl:64rem;--width-6xl:72rem;--width-7xl:80rem;--width-prose:65ch;--font-family-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-family-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-size-xs:.75rem;--font-size-xs--line-height:1rem;--font-size-sm:.875rem;--font-size-sm--line-height:1.25rem;--font-size-base:1rem;--font-size-base--line-height:1.5rem;--font-size-lg:1.125rem;--font-size-lg--line-height:1.75rem;--font-size-xl:1.25rem;--font-size-xl--line-height:1.75rem;--font-size-2xl:1.5rem;--font-size-2xl--line-height:2rem;--font-size-3xl:1.875rem;--font-size-3xl--line-height:2.25rem;--font-size-4xl:2.25rem;--font-size-4xl--line-height:2.5rem;--font-size-5xl:3rem;--font-size-5xl--line-height:1;--font-size-6xl:3.75rem;--font-size-6xl--line-height:1;--font-size-7xl:4.5rem;--font-size-7xl--line-height:1;--font-size-8xl:6rem;--font-size-8xl--line-height:1;--font-size-9xl:8rem;--font-size-9xl--line-height:1;--letter-spacing-tighter:-.05em;--letter-spacing-tight:-.025em;--letter-spacing-normal:0em;--letter-spacing-wide:.025em;--letter-spacing-wider:.05em;--letter-spacing-widest:.1em;--line-height-none:1;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--line-height-3:.75rem;--line-height-4:1rem;--line-height-5:1.25rem;--line-height-6:1.5rem;--line-height-7:1.75rem;--line-height-8:2rem;--line-height-9:2.25rem;--line-height-10:2.5rem;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--transition-timing-function-linear:linear;--transition-timing-function-in:cubic-bezier(.4,0,1,1);--transition-timing-function-out:cubic-bezier(0,0,.2,1);--transition-timing-function-in-out:cubic-bezier(.4,0,.2,1)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border:1px solid}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.static,.static\/Loader,.static\/Toast,.static\/index,.static\/types{position:static}.block{display:block}.hidden{display:none}.table{display:table}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.border{border-style:var(--tw-border-style);border-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@property --tw-rotate-x{syntax:"<transform-function>";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"<transform-function>";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"<transform-function>";inherits:false;initial-value:rotate(0)}@property --tw-skew-x{syntax:"<transform-function>";inherits:false;initial-value:skew(0)}@property --tw-skew-y{syntax:"<transform-function>";inherits:false;initial-value:skewY(0)}@property --tw-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yk38uw.svelte-1yk38uw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-1yk38uw.svelte-1yk38uw{top:0;right:0;left:0}.wrap.default.svelte-1yk38uw.svelte-1yk38uw{inset:0}.hide.svelte-1yk38uw.svelte-1yk38uw{opacity:0;pointer-events:none}.generating.svelte-1yk38uw.svelte-1yk38uw{animation:svelte-1yk38uw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yk38uw.svelte-1yk38uw{background:none}@keyframes svelte-1yk38uw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yk38uw.svelte-1yk38uw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yk38uw.svelte-1yk38uw{position:absolute;inset:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yk38uw.svelte-1yk38uw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yk38uw.svelte-1yk38uw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yk38uw.svelte-1yk38uw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yk38uw.svelte-1yk38uw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yk38uw.svelte-1yk38uw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yk38uw.svelte-1yk38uw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yk38uw.svelte-1yk38uw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yk38uw .progress-text.svelte-1yk38uw{background:var(--block-background-fill)}.border.svelte-1yk38uw.svelte-1yk38uw{border:1px solid var(--border-color-primary)}.clear-status.svelte-1yk38uw.svelte-1yk38uw{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.container.svelte-giydt1 img{width:100%;height:100%}.container.selected.svelte-giydt1.svelte-giydt1{border-color:var(--border-color-accent)}.container.table.svelte-giydt1.svelte-giydt1{margin:0 auto;border:2px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-giydt1.svelte-giydt1{height:var(--size-20);max-height:var(--size-20);object-fit:cover}.container.svelte-giydt1 img.svelte-giydt1{object-fit:cover}.viewer.svelte-gu2pck{width:100%}div.viewer>canvas{position:initial!important;top:unset!important}
+/*! tailwindcss v4.0.0-alpha.14 | MIT License | https://tailwindcss.com */@layer theme{:root{--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-family-sans);--default-font-feature-settings:var(--font-family-sans--font-feature-settings);--default-font-variation-settings:var(--font-family-sans--font-variation-settings);--default-mono-font-family:var(--font-family-mono);--default-mono-font-feature-settings:var(--font-family-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-family-mono--font-variation-settings);--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--color-black:#000;--color-white:#fff;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-gray-950:#030712;--color-zinc-50:#fafafa;--color-zinc-100:#f4f4f5;--color-zinc-200:#e4e4e7;--color-zinc-300:#d4d4d8;--color-zinc-400:#a1a1aa;--color-zinc-500:#71717a;--color-zinc-600:#52525b;--color-zinc-700:#3f3f46;--color-zinc-800:#27272a;--color-zinc-900:#18181b;--color-zinc-950:#09090b;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-neutral-950:#0a0a0a;--color-stone-50:#fafaf9;--color-stone-100:#f5f5f4;--color-stone-200:#e7e5e4;--color-stone-300:#d6d3d1;--color-stone-400:#a8a29e;--color-stone-500:#78716c;--color-stone-600:#57534e;--color-stone-700:#44403c;--color-stone-800:#292524;--color-stone-900:#1c1917;--color-stone-950:#0c0a09;--color-red-50:#fef2f2;--color-red-100:#fee2e2;--color-red-200:#fecaca;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-red-900:#7f1d1d;--color-red-950:#450a0a;--color-orange-50:#fff7ed;--color-orange-100:#ffedd5;--color-orange-200:#fed7aa;--color-orange-300:#fdba74;--color-orange-400:#fb923c;--color-orange-500:#f97316;--color-orange-600:#ea580c;--color-orange-700:#c2410c;--color-orange-800:#9a3412;--color-orange-900:#7c2d12;--color-orange-950:#431407;--color-amber-50:#fffbeb;--color-amber-100:#fef3c7;--color-amber-200:#fde68a;--color-amber-300:#fcd34d;--color-amber-400:#fbbf24;--color-amber-500:#f59e0b;--color-amber-600:#d97706;--color-amber-700:#b45309;--color-amber-800:#92400e;--color-amber-900:#78350f;--color-amber-950:#451a03;--color-yellow-50:#fefce8;--color-yellow-100:#fef9c3;--color-yellow-200:#fef08a;--color-yellow-300:#fde047;--color-yellow-400:#facc15;--color-yellow-500:#eab308;--color-yellow-600:#ca8a04;--color-yellow-700:#a16207;--color-yellow-800:#854d0e;--color-yellow-900:#713f12;--color-yellow-950:#422006;--color-lime-50:#f7fee7;--color-lime-100:#ecfccb;--color-lime-200:#d9f99d;--color-lime-300:#bef264;--color-lime-400:#a3e635;--color-lime-500:#84cc16;--color-lime-600:#65a30d;--color-lime-700:#4d7c0f;--color-lime-800:#3f6212;--color-lime-900:#365314;--color-lime-950:#1a2e05;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-500:#22c55e;--color-green-600:#16a34a;--color-green-700:#15803d;--color-green-800:#166534;--color-green-900:#14532d;--color-green-950:#052e16;--color-emerald-50:#ecfdf5;--color-emerald-100:#d1fae5;--color-emerald-200:#a7f3d0;--color-emerald-300:#6ee7b7;--color-emerald-400:#34d399;--color-emerald-500:#10b981;--color-emerald-600:#059669;--color-emerald-700:#047857;--color-emerald-800:#065f46;--color-emerald-900:#064e3b;--color-emerald-950:#022c22;--color-teal-50:#f0fdfa;--color-teal-100:#ccfbf1;--color-teal-200:#99f6e4;--color-teal-300:#5eead4;--color-teal-400:#2dd4bf;--color-teal-500:#14b8a6;--color-teal-600:#0d9488;--color-teal-700:#0f766e;--color-teal-800:#115e59;--color-teal-900:#134e4a;--color-teal-950:#042f2e;--color-cyan-50:#ecfeff;--color-cyan-100:#cffafe;--color-cyan-200:#a5f3fc;--color-cyan-300:#67e8f9;--color-cyan-400:#22d3ee;--color-cyan-500:#06b6d4;--color-cyan-600:#0891b2;--color-cyan-700:#0e7490;--color-cyan-800:#155e75;--color-cyan-900:#164e63;--color-cyan-950:#083344;--color-sky-50:#f0f9ff;--color-sky-100:#e0f2fe;--color-sky-200:#bae6fd;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-sky-700:#0369a1;--color-sky-800:#075985;--color-sky-900:#0c4a6e;--color-sky-950:#082f49;--color-blue-50:#eff6ff;--color-blue-100:#dbeafe;--color-blue-200:#bfdbfe;--color-blue-300:#93c5fd;--color-blue-400:#60a5fa;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-blue-800:#1e40af;--color-blue-900:#1e3a8a;--color-blue-950:#172554;--color-indigo-50:#eef2ff;--color-indigo-100:#e0e7ff;--color-indigo-200:#c7d2fe;--color-indigo-300:#a5b4fc;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-indigo-700:#4338ca;--color-indigo-800:#3730a3;--color-indigo-900:#312e81;--color-indigo-950:#1e1b4b;--color-violet-50:#f5f3ff;--color-violet-100:#ede9fe;--color-violet-200:#ddd6fe;--color-violet-300:#c4b5fd;--color-violet-400:#a78bfa;--color-violet-500:#8b5cf6;--color-violet-600:#7c3aed;--color-violet-700:#6d28d9;--color-violet-800:#5b21b6;--color-violet-900:#4c1d95;--color-violet-950:#2e1065;--color-purple-50:#faf5ff;--color-purple-100:#f3e8ff;--color-purple-200:#e9d5ff;--color-purple-300:#d8b4fe;--color-purple-400:#c084fc;--color-purple-500:#a855f7;--color-purple-600:#9333ea;--color-purple-700:#7e22ce;--color-purple-800:#6b21a8;--color-purple-900:#581c87;--color-purple-950:#3b0764;--color-fuchsia-50:#fdf4ff;--color-fuchsia-100:#fae8ff;--color-fuchsia-200:#f5d0fe;--color-fuchsia-300:#f0abfc;--color-fuchsia-400:#e879f9;--color-fuchsia-500:#d946ef;--color-fuchsia-600:#c026d3;--color-fuchsia-700:#a21caf;--color-fuchsia-800:#86198f;--color-fuchsia-900:#701a75;--color-fuchsia-950:#4a044e;--color-pink-50:#fdf2f8;--color-pink-100:#fce7f3;--color-pink-200:#fbcfe8;--color-pink-300:#f9a8d4;--color-pink-400:#f472b6;--color-pink-500:#ec4899;--color-pink-600:#db2777;--color-pink-700:#be185d;--color-pink-800:#9d174d;--color-pink-900:#831843;--color-pink-950:#500724;--color-rose-50:#fff1f2;--color-rose-100:#ffe4e6;--color-rose-200:#fecdd3;--color-rose-300:#fda4af;--color-rose-400:#fb7185;--color-rose-500:#f43f5e;--color-rose-600:#e11d48;--color-rose-700:#be123c;--color-rose-800:#9f1239;--color-rose-900:#881337;--color-rose-950:#4c0519;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur:8px;--blur-sm:4px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--radius:.25rem;--radius-sm:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-xs:0 1px #0000000d;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-inner:inset 0 2px 4px 0 #0000000d;--inset-shadow-xs:inset 0 1px #0000000d;--inset-shadow-sm:inset 0 1px 1px #0000000d;--inset-shadow:inset 0 2px 4px #0000000d;--drop-shadow:0 1px 2px #0000001a,0 1px 1px #0000000f;--drop-shadow-sm:0 1px 1px #0000000d;--drop-shadow-md:0 4px 3px #00000012,0 2px 2px #0000000f;--drop-shadow-lg:0 10px 8px #0000000a,0 4px 3px #0000001a;--drop-shadow-xl:0 20px 13px #00000008,0 8px 5px #00000014;--drop-shadow-2xl:0 25px 25px #00000026;--spacing-px:1px;--spacing-0:0px;--spacing-0_5:.125rem;--spacing-1:.25rem;--spacing-1_5:.375rem;--spacing-2:.5rem;--spacing-2_5:.625rem;--spacing-3:.75rem;--spacing-3_5:.875rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-11:2.75rem;--spacing-12:3rem;--spacing-14:3.5rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-44:11rem;--spacing-48:12rem;--spacing-52:13rem;--spacing-56:14rem;--spacing-60:15rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--width-3xs:16rem;--width-2xs:18rem;--width-xs:20rem;--width-sm:24rem;--width-md:28rem;--width-lg:32rem;--width-xl:36rem;--width-2xl:42rem;--width-3xl:48rem;--width-4xl:56rem;--width-5xl:64rem;--width-6xl:72rem;--width-7xl:80rem;--width-prose:65ch;--font-family-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-family-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-size-xs:.75rem;--font-size-xs--line-height:1rem;--font-size-sm:.875rem;--font-size-sm--line-height:1.25rem;--font-size-base:1rem;--font-size-base--line-height:1.5rem;--font-size-lg:1.125rem;--font-size-lg--line-height:1.75rem;--font-size-xl:1.25rem;--font-size-xl--line-height:1.75rem;--font-size-2xl:1.5rem;--font-size-2xl--line-height:2rem;--font-size-3xl:1.875rem;--font-size-3xl--line-height:2.25rem;--font-size-4xl:2.25rem;--font-size-4xl--line-height:2.5rem;--font-size-5xl:3rem;--font-size-5xl--line-height:1;--font-size-6xl:3.75rem;--font-size-6xl--line-height:1;--font-size-7xl:4.5rem;--font-size-7xl--line-height:1;--font-size-8xl:6rem;--font-size-8xl--line-height:1;--font-size-9xl:8rem;--font-size-9xl--line-height:1;--letter-spacing-tighter:-.05em;--letter-spacing-tight:-.025em;--letter-spacing-normal:0em;--letter-spacing-wide:.025em;--letter-spacing-wider:.05em;--letter-spacing-widest:.1em;--line-height-none:1;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--line-height-3:.75rem;--line-height-4:1rem;--line-height-5:1.25rem;--line-height-6:1.5rem;--line-height-7:1.75rem;--line-height-8:2rem;--line-height-9:2.25rem;--line-height-10:2.5rem;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--transition-timing-function-linear:linear;--transition-timing-function-in:cubic-bezier(.4,0,1,1);--transition-timing-function-out:cubic-bezier(0,0,.2,1);--transition-timing-function-in-out:cubic-bezier(.4,0,.2,1)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border:1px solid}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.static,.static\/Loader,.static\/Toast,.static\/index,.static\/types{position:static}.block{display:block}.hidden{display:none}.table{display:table}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.border{border-style:var(--tw-border-style);border-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@property --tw-rotate-x{syntax:"<transform-function>";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"<transform-function>";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"<transform-function>";inherits:false;initial-value:rotate(0)}@property --tw-skew-x{syntax:"<transform-function>";inherits:false;initial-value:skew(0)}@property --tw-skew-y{syntax:"<transform-function>";inherits:false;initial-value:skewY(0)}@property --tw-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yk38uw.svelte-1yk38uw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-1yk38uw.svelte-1yk38uw{top:0;right:0;left:0}.wrap.default.svelte-1yk38uw.svelte-1yk38uw{inset:0}.hide.svelte-1yk38uw.svelte-1yk38uw{opacity:0;pointer-events:none}.generating.svelte-1yk38uw.svelte-1yk38uw{animation:svelte-1yk38uw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yk38uw.svelte-1yk38uw{background:none}@keyframes svelte-1yk38uw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yk38uw.svelte-1yk38uw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yk38uw.svelte-1yk38uw{position:absolute;inset:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yk38uw.svelte-1yk38uw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yk38uw.svelte-1yk38uw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yk38uw.svelte-1yk38uw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yk38uw.svelte-1yk38uw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yk38uw.svelte-1yk38uw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yk38uw.svelte-1yk38uw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yk38uw.svelte-1yk38uw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yk38uw .progress-text.svelte-1yk38uw{background:var(--block-background-fill)}.border.svelte-1yk38uw.svelte-1yk38uw{border:1px solid var(--border-color-primary)}.clear-status.svelte-1yk38uw.svelte-1yk38uw{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.container.svelte-giydt1 img{width:100%;height:100%}.container.selected.svelte-giydt1.svelte-giydt1{border-color:var(--border-color-accent)}.container.table.svelte-giydt1.svelte-giydt1{margin:0 auto;border:2px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-giydt1.svelte-giydt1{height:var(--size-20);max-height:var(--size-20);object-fit:cover}.container.svelte-giydt1 img.svelte-giydt1{object-fit:cover}div.viewer.svelte-mo2zro{width:100%}div.viewer.svelte-mo2zro>canvas{position:initial!important;top:unset!important;width:100%;height:100%}

src/demo/app.py

@@ -1,64 +1,150 @@
+import cv2
+import os
+import tempfile
+import time
+
 import gradio as gr
 from gradio_rerun import Rerun
 
+import rerun as rr
+import rerun.blueprint as rrb
 
-example = Rerun().example_value()
+from color_grid import build_color_grid
 
+# NOTE: Functions that work with Rerun should be decorated with `@rr.thread_local_stream`.
+# This decorator creates a generator-aware thread-local context so that rerun log calls
+# across multiple workers stay isolated.
 
-def predict(url: str, file_path: str | list[str] | None):
-    if url:
-        return url
-    return file_path
 
+# A task can directly log to a binary stream, which is routed to the embedded viewer.
+# Incremental chunks are yielded to the viewer using `yield stream.read()`.
+#
+# This is the preferred way to work with Rerun in Gradio since your data can be immediately and
+# incrementally seen by the viewer. Also, there are no ephemeral RRDs to cleanup or manage.
+@rr.thread_local_stream("rerun_example_streaming_blur")
+def streaming_repeated_blur(img):
+    stream = rr.binary_stream()
 
-with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                file_path = gr.File(file_count="multiple", type="filepath")
-                url = gr.Text(
-                    info="Or use a URL",
-                    label="URL",
-                )
-        with gr.Column():
-            pass
-    btn = gr.Button("Run", scale=0)
+    if img is None:
+        raise gr.Error("Must provide an image to blur.")
+
+    blueprint = rrb.Blueprint(
+        rrb.Horizontal(
+            rrb.Spatial2DView(origin="image/original"),
+            rrb.Spatial2DView(origin="image/blurred"),
+        ),
+        collapse_panels=True,
+    )
+
+    rr.send_blueprint(blueprint)
+
+    rr.set_time_sequence("iteration", 0)
+
+    rr.log("image/original", rr.Image(img))
+    yield stream.read()
+
+    blur = img
+
+    for i in range(100):
+        rr.set_time_sequence("iteration", i)
+
+        # Pretend blurring takes a while so we can see streaming in action.
+        time.sleep(0.1)
+        blur = cv2.GaussianBlur(blur, (5, 5), 0)
+
+        rr.log("image/blurred", rr.Image(blur))
+
+        # Each time we yield bytes from the stream back to Gradio, they
+        # are incrementally sent to the viewer. Make sure to yield any time
+        # you want the user to be able to see progress.
+        yield stream.read()
+
+
+# However, if you have a workflow that creates an RRD file instead, you can still send it
+# directly to the viewer by simply returning the path to the RRD file.
+#
+# This may be helpful if you need to execute a helper tool written in C++ or Rust that can't
+# be easily modified to stream data directly via Gradio.
+#
+# In this case you may want to clean up the RRD file after it's sent to the viewer so that you
+# don't accumulate too many  temporary files.
+@rr.thread_local_stream("rerun_example_cube_rrd")
+def create_cube_rrd(x, y, z, pending_cleanup):
+    cube = build_color_grid(int(x), int(y), int(z), twist=0)
+    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+
+    # We eventually want to clean up the RRD file after it's sent to the viewer, so tracking
+    # any pending files to be cleaned up when the state is deleted.
+    temp = tempfile.NamedTemporaryFile(prefix="cube_", suffix=".rrd", delete=False)
+    pending_cleanup.append(temp.name)
+
+    blueprint = rrb.Spatial3DView(origin="cube")
+    rr.save(temp.name, default_blueprint=blueprint)
+
+    # Just return the name of the file -- Gradio will convert it to a FileData object
+    # and send it to the viewer.
+    return temp.name
+
+
+def cleanup_cube_rrds(pending_cleanup):
+    for f in pending_cleanup:
+        os.unlink(f)
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Streaming"):
+        with gr.Row():
+            img = gr.Image(interactive=True, label="Image")
+            with gr.Column():
+                stream_blur = gr.Button("Stream Repeated Blur")
+
+    with gr.Tab("Dynamic RRD"):
+        pending_cleanup = gr.State(
+            [], time_to_live=10, delete_callback=cleanup_cube_rrds
+        )
+        with gr.Row():
+            x_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="X Count"
+            )
+            y_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Y Count"
+            )
+            z_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Z Count"
+            )
+        with gr.Row():
+            create_rrd = gr.Button("Create RRD")
+
+    with gr.Tab("Hosted RRD"):
+        with gr.Row():
+            # It may be helpful to point the viewer to a hosted RRD file on another server.
+            # If an RRD file is hosted via http, you can just return a URL to the file.
+            choose_rrd = gr.Dropdown(
+                label="RRD",
+                choices=[
+                    f"{rr.bindings.get_app_url()}/examples/arkit_scenes.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/dna.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/plots.rrd",
+                ],
+            )
+
+    # Rerun 0.16 has issues when embedded in a Gradio tab, so we share a viewer between all the tabs.
+    # In 0.17 we can instead scope each viewer to its own tab to clean up these examples further.
     with gr.Row():
-        rerun_viewer = Rerun(height=900)
-
-    inputs = [file_path, url]
-    outputs = [rerun_viewer]
-
-    gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
-
-    gr.Examples(
-        examples=[
-            [
-                None,
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            ],
-            [
-                ["./examples/rgbd.rrd"],
-                None,
-            ],
-            [
-                ["./examples/rrt-star.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
-                None,
-            ],
-        ],
-        fn=predict,
-        inputs=inputs,
-        outputs=outputs,
-        run_on_click=True,
+        viewer = Rerun(
+            streaming=True,
+        )
+
+    stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])
+
+    create_rrd.click(
+        create_cube_rrd,
+        inputs=[x_count, y_count, z_count, pending_cleanup],
+        outputs=[viewer],
     )
 
+    choose_rrd.change(lambda x: x, inputs=[choose_rrd], outputs=[viewer])
+
+
 if __name__ == "__main__":
     demo.launch()

src/demo/color_grid.py

@@ -0,0 +1,49 @@
+import numpy as np
+from math import cos, sin
+from collections import namedtuple
+
+ColorGrid = namedtuple("ColorGrid", ["positions", "colors"])
+
+
+def build_color_grid(x_count=10, y_count=10, z_count=10, twist=0):
+    """
+    Create a cube of points with colors.
+
+    The total point cloud will have x_count * y_count * z_count points.
+
+    Parameters
+    ----------
+    x_count, y_count, z_count:
+        Number of points in each dimension.
+    twist:
+        Angle to twist from bottom to top of the cube
+
+    """
+
+    grid = np.mgrid[
+        slice(-x_count, x_count, x_count * 1j),
+        slice(-y_count, y_count, y_count * 1j),
+        slice(-z_count, z_count, z_count * 1j),
+    ]
+
+    angle = np.linspace(-float(twist) / 2, float(twist) / 2, z_count)
+    for z in range(z_count):
+        xv, yv, zv = grid[:, :, :, z]
+        rot_xv = xv * cos(angle[z]) - yv * sin(angle[z])
+        rot_yv = xv * sin(angle[z]) + yv * cos(angle[z])
+        grid[:, :, :, z] = [rot_xv, rot_yv, zv]
+
+    positions = np.vstack([xyz.ravel() for xyz in grid])
+
+    colors = np.vstack(
+        [
+            xyz.ravel()
+            for xyz in np.mgrid[
+                slice(0, 255, x_count * 1j),
+                slice(0, 255, y_count * 1j),
+                slice(0, 255, z_count * 1j),
+            ]
+        ]
+    )
+
+    return ColorGrid(positions.T, colors.T.astype(np.uint8))

src/demo/requirements.txt

@@ -1 +1,2 @@
-gradio_rerun
+gradio_rerun
+opencv-python

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'Rerun': {'description': 'Creates an image component that can be used to upload images (as an input) or display images (as an output).', 'members': {'__init__': {'value': {'type': 'list[str] | None', 'default': 'None', 'description': 'A path or URL for the default value that Rerun component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will display button to download image.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'height': {'type': 'int | str', 'default': '640', 'description': 'height of component in pixels. If a string is provided, will be interpreted as a CSS value. If None, will be set to 640px.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'list[gradio.data_classes.FileData]\n    | gradio.data_classes.FileData\n    | str\n    | list[str]', 'description': 'Expects a `str` or `pathlib.Path` object containing the path to the image.'}}, 'preprocess': {'return': {'type': 'str | None', 'description': 'A `str` containing the path to the image.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the Rerun using the X button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the Rerun changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the Rerun.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Rerun': []}}}
+_docs = {'Rerun': {'description': 'Creates a Rerun viewer component that can be used to display the output of a Rerun stream.', 'members': {'__init__': {'value': {'type': 'list[pathlib.Path | str]\n    | pathlib.Path\n    | str\n    | bytes\n    | Callable\n    | None', 'default': 'None', 'description': 'Takes a singular or list of RRD resources. Each RRD can be a Path, a string containing a url, or a binary blob containing encoded RRD data. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'height': {'type': 'int | str', 'default': '640', 'description': 'height of component in pixels. If a string is provided, will be interpreted as a CSS value. If None, will be set to 640px.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'streaming': {'type': 'bool', 'default': 'False', 'description': 'If True, the data should be incrementally yielded from the source as `bytes` returned by calling `.read()` on an `rr.binary_stream()`'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'list[pathlib.Path | str] | pathlib.Path | str | bytes', 'description': 'Expects'}}, 'preprocess': {'return': {'type': 'RerunData | None', 'description': 'A RerunData object.'}, 'value': None}}, 'events': {}}, '__meta__': {'additional_interfaces': {'RerunData': {'source': 'class RerunData(GradioRootModel):\n    root: list[FileData | str]'}}, 'user_fn_refs': {'Rerun': ['RerunData']}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_rerun`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+<a href="https://pypi.org/project/gradio_rerun/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_rerun"></a> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
 </div>
 
 Rerun viewer with Gradio
@@ -38,68 +38,154 @@ pip install gradio_rerun
 ## Usage
 
 ```python
+import cv2
+import os
+import tempfile
+import time
+
 import gradio as gr
 from gradio_rerun import Rerun
 
+import rerun as rr
+import rerun.blueprint as rrb
 
-example = Rerun().example_value()
+from color_grid import build_color_grid
 
+# NOTE: Functions that work with Rerun should be decorated with `@rr.thread_local_stream`.
+# This decorator creates a generator-aware thread-local context so that rerun log calls
+# across multiple workers stay isolated.
 
-def predict(url: str, file_path: str | list[str] | None):
-    if url:
-        return url
-    return file_path
 
+# A task can directly log to a binary stream, which is routed to the embedded viewer.
+# Incremental chunks are yielded to the viewer using `yield stream.read()`.
+#
+# This is the preferred way to work with Rerun in Gradio since your data can be immediately and
+# incrementally seen by the viewer. Also, there are no ephemeral RRDs to cleanup or manage.
+@rr.thread_local_stream("rerun_example_streaming_blur")
+def streaming_repeated_blur(img):
+    stream = rr.binary_stream()
 
-with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                file_path = gr.File(file_count="multiple", type="filepath")
-                url = gr.Text(
-                    info="Or use a URL",
-                    label="URL",
-                )
-        with gr.Column():
-            pass
-    btn = gr.Button("Run", scale=0)
+    if img is None:
+        raise gr.Error("Must provide an image to blur.")
+
+    blueprint = rrb.Blueprint(
+        rrb.Horizontal(
+            rrb.Spatial2DView(origin="image/original"),
+            rrb.Spatial2DView(origin="image/blurred"),
+        ),
+        collapse_panels=True,
+    )
+
+    rr.send_blueprint(blueprint)
+
+    rr.set_time_sequence("iteration", 0)
+
+    rr.log("image/original", rr.Image(img))
+    yield stream.read()
+
+    blur = img
+
+    for i in range(100):
+        rr.set_time_sequence("iteration", i)
+
+        # Pretend blurring takes a while so we can see streaming in action.
+        time.sleep(0.1)
+        blur = cv2.GaussianBlur(blur, (5, 5), 0)
+
+        rr.log("image/blurred", rr.Image(blur))
+
+        # Each time we yield bytes from the stream back to Gradio, they
+        # are incrementally sent to the viewer. Make sure to yield any time
+        # you want the user to be able to see progress.
+        yield stream.read()
+
+
+# However, if you have a workflow that creates an RRD file instead, you can still send it
+# directly to the viewer by simply returning the path to the RRD file.
+#
+# This may be helpful if you need to execute a helper tool written in C++ or Rust that can't
+# be easily modified to stream data directly via Gradio.
+#
+# In this case you may want to clean up the RRD file after it's sent to the viewer so that you
+# don't accumulate too many  temporary files.
+@rr.thread_local_stream("rerun_example_cube_rrd")
+def create_cube_rrd(x, y, z, pending_cleanup):
+    cube = build_color_grid(int(x), int(y), int(z), twist=0)
+    rr.log("cube", rr.Points3D(cube.positions, colors=cube.colors, radii=0.5))
+
+    # We eventually want to clean up the RRD file after it's sent to the viewer, so tracking
+    # any pending files to be cleaned up when the state is deleted.
+    temp = tempfile.NamedTemporaryFile(prefix="cube_", suffix=".rrd", delete=False)
+    pending_cleanup.append(temp.name)
+
+    blueprint = rrb.Spatial3DView(origin="cube")
+    rr.save(temp.name, default_blueprint=blueprint)
+
+    # Just return the name of the file -- Gradio will convert it to a FileData object
+    # and send it to the viewer.
+    return temp.name
+
+
+def cleanup_cube_rrds(pending_cleanup):
+    for f in pending_cleanup:
+        os.unlink(f)
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Streaming"):
+        with gr.Row():
+            img = gr.Image(interactive=True, label="Image")
+            with gr.Column():
+                stream_blur = gr.Button("Stream Repeated Blur")
+
+    with gr.Tab("Dynamic RRD"):
+        pending_cleanup = gr.State(
+            [], time_to_live=10, delete_callback=cleanup_cube_rrds
+        )
+        with gr.Row():
+            x_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="X Count"
+            )
+            y_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Y Count"
+            )
+            z_count = gr.Number(
+                minimum=1, maximum=10, value=5, precision=0, label="Z Count"
+            )
+        with gr.Row():
+            create_rrd = gr.Button("Create RRD")
+
+    with gr.Tab("Hosted RRD"):
+        with gr.Row():
+            # It may be helpful to point the viewer to a hosted RRD file on another server.
+            # If an RRD file is hosted via http, you can just return a URL to the file.
+            choose_rrd = gr.Dropdown(
+                label="RRD",
+                choices=[
+                    f"{rr.bindings.get_app_url()}/examples/arkit_scenes.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/dna.rrd",
+                    f"{rr.bindings.get_app_url()}/examples/plots.rrd",
+                ],
+            )
+
+    # Rerun 0.16 has issues when embedded in a Gradio tab, so we share a viewer between all the tabs.
+    # In 0.17 we can instead scope each viewer to its own tab to clean up these examples further.
     with gr.Row():
-        rerun_viewer = Rerun(height=900)
-
-    inputs = [file_path, url]
-    outputs = [rerun_viewer]
-
-    gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
-
-    gr.Examples(
-        examples=[
-            [
-                None,
-                "https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
-            ],
-            [
-                ["./examples/rgbd.rrd"],
-                None,
-            ],
-            [
-                ["./examples/rrt-star.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd"],
-                None,
-            ],
-            [
-                ["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
-                None,
-            ],
-        ],
-        fn=predict,
-        inputs=inputs,
-        outputs=outputs,
-        run_on_click=True,
+        viewer = Rerun(
+            streaming=True,
+        )
+
+    stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])
+
+    create_rrd.click(
+        create_cube_rrd,
+        inputs=[x_count, y_count, z_count, pending_cleanup],
+        outputs=[viewer],
     )
 
+    choose_rrd.change(lambda x: x, inputs=[choose_rrd], outputs=[viewer])
+
+
 if __name__ == "__main__":
     demo.launch()
 
@@ -113,11 +199,7 @@ if __name__ == "__main__":
 ### Initialization
 """, elem_classes=["md-custom"], header_links=True)
 
-    gr.ParamViewer(value=_docs["Rerun"]["members"]["__init__"], linkify=[])
-
-
-    gr.Markdown("### Events")
-    gr.ParamViewer(value=_docs["Rerun"]["events"], linkify=['Event'])
+    gr.ParamViewer(value=_docs["Rerun"]["members"]["__init__"], linkify=['RerunData'])
 
 
 
@@ -133,16 +215,13 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As input:** Is passed, a `str` containing the path to the image.
-- **As output:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image.
+- **As input:** Is passed, a RerunData object.
+- **As output:** Should return, expects.
 
  ```python
 def predict(
-    value: str | None
-) -> list[gradio.data_classes.FileData]
-    | gradio.data_classes.FileData
-    | str
-    | list[str]:
+    value: RerunData | None
+) -> list[pathlib.Path | str] | pathlib.Path | str | bytes:
     return value
 ```
 """, elem_classes=["md-custom", "Rerun-user-fn"], header_links=True)
@@ -150,10 +229,18 @@ def predict(
 
 
 
+    code_RerunData = gr.Markdown("""
+## `RerunData`
+```python
+class RerunData(GradioRootModel):
+    root: list[FileData | str]
+```""", elem_classes=["md-custom", "RerunData"], header_links=True)
+
     demo.load(None, js=r"""function() {
-    const refs = {};
+    const refs = {
+            RerunData: [], };
     const user_fn_refs = {
-          Rerun: [], };
+          Rerun: ['RerunData'], };
     requestAnimationFrame(() => {
 
         Object.entries(user_fn_refs).forEach(([key, refs]) => {

src/frontend/Index.svelte

@@ -8,7 +8,7 @@
   import "./app.css";
   import type { Gradio } from "@gradio/utils";
 
-  import { WebViewer } from "@rerun-io/web-viewer";
+  import { WebViewer, LogChannel } from "@rerun-io/web-viewer";
   import { onMount } from "svelte";
 
   import { Block } from "@gradio/atoms";
@@ -16,16 +16,24 @@
   import type { FileData } from "@gradio/client";
   import type { LoadingStatus } from "@gradio/statustracker";
 
+  interface BinaryStream {
+    url: string;
+    is_stream: boolean;
+  }
+
   export let elem_id = "";
   export let elem_classes: string[] = [];
   export let visible = true;
   export let height: number | string = 640;
-  export let value: null | FileData[] | string[] = null;
+  export let value: null | BinaryStream | (FileData | string)[] = null;
   export let container = true;
   export let scale: number | null = null;
   export let min_width: number | undefined = undefined;
   export let loading_status: LoadingStatus;
   export let interactive: boolean;
+  export let streaming: boolean;
+
+  let old_value: null | BinaryStream | (FileData | string)[] = null;
 
   export let gradio: Gradio<{
     change: never;
@@ -36,28 +44,60 @@
 
   $: height = typeof height === "number" ? `${height}px` : height;
 
-  $: value, gradio.dispatch("change");
   let dragging: boolean;
   let rr: WebViewer;
   let ref: HTMLDivElement;
+  let patched_loading_status: LoadingStatus;
+
+  function try_load_value() {
+    if (
+      JSON.stringify(value) !== JSON.stringify(old_value) &&
+      rr != undefined &&
+      rr.ready
+    ) {
+      old_value = value;
+      if (!Array.isArray(value)) {
+        if (value.is_stream) {
+          rr.open(value.url, { follow_if_http: true });
+        } else {
+          rr.open(value.url);
+        }
+      } else {
+        for (const file of value) {
+          if (typeof file !== "string") {
+            if (file.url) {
+              rr.open(file.url);
+            }
+          } else {
+            rr.open(file);
+          }
+        }
+      }
+    }
+  }
 
   onMount(() => {
     rr = new WebViewer();
-    rr.start(undefined, ref);
-    return () => rr.stop();
+    rr.start(undefined, ref, true).then(() => {
+      try_load_value();
+    });
+
+    return () => {
+      rr.stop();
+    };
   });
 
-  $: if (value !== null && Array.isArray(value)) {
-    for (const file of value) {
-      if (typeof file !== "string") {
-        if (file.url) {
-          rr.open(file.url);
-        }
-      } else {
-        rr.open(file);
-      }
+  $: {
+    patched_loading_status = loading_status;
+
+    // In streaming mode, we want the UI to be interactive even while the model is generating
+    // so set the status to complete.
+    if (streaming && patched_loading_status?.status === "generating") {
+      patched_loading_status.status = "complete";
     }
   }
+
+  $: value, try_load_value();
 </script>
 
 {#if !interactive}
@@ -76,20 +116,22 @@
     <StatusTracker
       autoscroll={gradio.autoscroll}
       i18n={gradio.i18n}
-      {...loading_status}
+      {...patched_loading_status}
       on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
     />
     <div class="viewer" bind:this={ref} style:height />
   </Block>
 {/if}
 
-<style>
-  .viewer {
+<style lang="scss">
+  div.viewer {
     width: 100%;
-  }
 
-  :global(div.viewer > canvas) {
-    position: initial !important;
-    top: unset !important;
+    :global(> canvas) {
+      position: initial !important;
+      top: unset !important;
+      width: 100%;
+      height: 100%;
+    }
   }
 </style>

src/frontend/package-lock.json

@@ -16,7 +16,7 @@
         "@gradio/upload": "0.9.0",
         "@gradio/utils": "0.4.0",
         "@gradio/wasm": "0.10.0",
-        "@rerun-io/web-viewer": "^0.15.1",
+        "@rerun-io/web-viewer": "^0.16.1",
         "cropperjs": "^1.5.12",
         "lazy-brush": "^1.0.1",
         "resize-observer-polyfill": "^1.5.1",
@@ -28,6 +28,16 @@
         "tailwindcss": "^4.0.0-alpha.14"
       }
     },
+    "../../rerun/rerun_js/web-viewer": {
+      "name": "@rerun-io/web-viewer",
+      "version": "0.16.0",
+      "extraneous": true,
+      "license": "MIT",
+      "devDependencies": {
+        "dts-buddy": "^0.3.0",
+        "typescript": "^5.2.2"
+      }
+    },
     "node_modules/@adobe/css-tools": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
@@ -694,9 +704,10 @@
       }
     },
     "node_modules/@rerun-io/web-viewer": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/@rerun-io/web-viewer/-/web-viewer-0.15.1.tgz",
-      "integrity": "sha512-rE4kZRVd+7FRSItOJkOjpp+a1swDGPQpYF0DY+dqmm1lIu9Ohq13MSKd3WlwKXk+88J/yxpdyxI/1vTRTQ4vjQ=="
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@rerun-io/web-viewer/-/web-viewer-0.16.1.tgz",
+      "integrity": "sha512-S1Vd4ltHf+hTpZ/Z2BzbcHAljmTrx624pVm0o/fV8Af3Yf404kMW5Gjdt/WkLlA8z9jSwYN0B+o0dkoVQRKC4w==",
+      "license": "MIT"
     },
     "node_modules/@rollup/plugin-sucrase": {
       "version": "5.0.2",

src/frontend/package.json

@@ -14,7 +14,7 @@
     "@gradio/upload": "0.9.0",
     "@gradio/utils": "0.4.0",
     "@gradio/wasm": "0.10.0",
-    "@rerun-io/web-viewer": "^0.15.1",
+    "@rerun-io/web-viewer": "^0.16.1",
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
@@ -32,4 +32,4 @@
     "./example": "./Example.svelte",
     "./package.json": "./package.json"
   }
-}
+}

src/pyproject.toml

@@ -8,15 +8,23 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_rerun"
-version = "0.0.1"
+version = "0.0.3"
 description = "Rerun viewer with Gradio"
 readme = "README.md"
 license = "apache-2.0"
 requires-python = ">=3.8"
 authors = [{ name = "Radamés Ajna", email = "[email protected]" }]
-keywords = ["gradio-custom-component", "multimodal data", "visualization", "machine learning", "robotics", "Rerun", "rerun-viewer"]
+keywords = [
+  "gradio-custom-component",
+  "multimodal data",
+  "visualization",
+  "machine learning",
+  "robotics",
+  "Rerun",
+  "rerun-viewer",
+]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<5.0"]
+dependencies = ["gradio>=4.0,<5.0", "rerun-sdk>=0.16.1"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'Operating System :: OS Independent',