diff --git a/.changeset/weak-games-sing.md b/.changeset/weak-games-sing.md
new file mode 100644
index 0000000000000..e124b979b8496
--- /dev/null
+++ b/.changeset/weak-games-sing.md
@@ -0,0 +1,7 @@
+---
+"@gradio/preview": minor
+"gradio": minor
+"gradio_test": minor
+---
+
+feat:fix cc build
diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml
index 0e44af19801bf..4fdef1073b623 100644
--- a/.github/workflows/backend.yml
+++ b/.github/workflows/backend.yml
@@ -168,6 +168,7 @@ jobs:
       with:
         path: |
           gradio/templates/*
+          gradio/node/*
         key: gradio-lib-front-end-${{ hashFiles('js/**', 'client/js/**')}}
     - name: Install pnpm
       if: steps.frontend-cache.outputs.cache-hit != 'true'
diff --git a/gradio/cli/commands/components/_create_utils.py b/gradio/cli/commands/components/_create_utils.py
index c28dc37820cbd..9974fa1ba55b6 100644
--- a/gradio/cli/commands/components/_create_utils.py
+++ b/gradio/cli/commands/components/_create_utils.py
@@ -191,7 +191,9 @@ def delete_contents(directory: str | Path) -> None:
             shutil.rmtree(child)
 
 
-def _create_frontend(name: str, component: ComponentFiles, directory: Path):
+def _create_frontend(
+    name: str, component: ComponentFiles, directory: Path, package_name: str
+):
     frontend = directory / "frontend"
     frontend.mkdir(exist_ok=True)
 
@@ -217,7 +219,7 @@ def ignore(s, names):
         ignore=ignore,
     )
     source_package_json = json.loads(Path(frontend / "package.json").read_text())
-    source_package_json["name"] = name.lower()
+    source_package_json["name"] = package_name
     source_package_json = _modify_js_deps(source_package_json, "dependencies", p)
     source_package_json = _modify_js_deps(source_package_json, "devDependencies", p)
     (frontend / "package.json").write_text(json.dumps(source_package_json, indent=2))
diff --git a/gradio/cli/commands/components/build.py b/gradio/cli/commands/components/build.py
index 87487e0116606..42ef190ea8395 100644
--- a/gradio/cli/commands/components/build.py
+++ b/gradio/cli/commands/components/build.py
@@ -35,7 +35,9 @@ def _build(
 
             node = shutil.which("node")
             if not node:
-                raise ValueError("node must be installed in order to run dev mode.")
+                raise ValueError(
+                    "node must be installed in order to run build command."
+                )
 
             node_cmds = [
                 node,
@@ -47,7 +49,6 @@ def _build(
                 "--mode",
                 "build",
             ]
-
             pipe = subprocess.run(node_cmds, capture_output=True, text=True)
             if pipe.returncode != 0:
                 live.update(":red_square: Build failed!")
diff --git a/gradio/cli/commands/components/create.py b/gradio/cli/commands/components/create.py
index 88a1e0fb94aea..a99dc7aa82c6c 100644
--- a/gradio/cli/commands/components/create.py
+++ b/gradio/cli/commands/components/create.py
@@ -96,7 +96,9 @@ def _create(
         _create_utils._create_backend(name, component, directory, package_name)
         live.update(":snake: Created backend code", add_sleep=0.2)
 
-        _create_utils._create_frontend(name.lower(), component, directory=directory)
+        _create_utils._create_frontend(
+            name.lower(), component, directory=directory, package_name=package_name
+        )
         live.update(":art: Created frontend code", add_sleep=0.2)
 
         if install:
diff --git a/js/preview/src/build.ts b/js/preview/src/build.ts
index 85eb152aefab9..28d9ffc684802 100644
--- a/js/preview/src/build.ts
+++ b/js/preview/src/build.ts
@@ -2,7 +2,7 @@ import * as fs from "fs";
 import { join } from "path";
 import { build } from "vite";
 import { plugins, make_gradio_plugin } from "./plugins";
-
+import type { PreRenderedChunk } from "rollup";
 import { examine_module } from "./index";
 
 interface BuildOptions {
@@ -29,7 +29,7 @@ export async function make_build({
 
 			const exports: string[][] = [
 				["component", pkg.exports["."] as string],
-				["exmaple", pkg.exports["./example"] as string]
+				["example", pkg.exports["./example"] as string]
 			].filter(([_, path]) => !!path);
 
 			for (const [entry, path] of exports) {
@@ -43,23 +43,29 @@ export async function make_build({
 							emptyOutDir: true,
 							outDir: join(template_dir, entry),
 							lib: {
-								entry: join(source_dir, entry, "index.ts"),
+								entry: join(source_dir, path),
 								fileName: "index.js",
 								formats: ["es"]
 							},
+							minify: true,
 							rollupOptions: {
 								output: {
-									entryFileNames: "[name].js"
+									entryFileNames: (chunkInfo: PreRenderedChunk) => {
+										if (chunkInfo.isEntry) {
+											return "index.js";
+										}
+										return `${chunkInfo.name.toLocaleLowerCase()}.js`;
+									}
 								}
 							}
 						}
 					});
 				} catch (e) {
-					console.error(e);
+					throw e;
 				}
 			}
 		}
 	} catch (e) {
-		console.error(e);
+		throw e;
 	}
 }
diff --git a/js/preview/test/imageslider/backend/imageslider/__init__.py b/js/preview/test/imageslider/backend/imageslider/__init__.py
deleted file mode 100644
index 190fe0e643857..0000000000000
--- a/js/preview/test/imageslider/backend/imageslider/__init__.py
+++ /dev/null
@@ -1,4 +0,0 @@
-
-from .imageslider import ImageSlider
-
-__all__ = ['ImageSlider']
diff --git a/js/preview/test/imageslider/backend/imageslider/imageslider.py b/js/preview/test/imageslider/backend/imageslider/imageslider.py
deleted file mode 100644
index 0b54b42cfbd04..0000000000000
--- a/js/preview/test/imageslider/backend/imageslider/imageslider.py
+++ /dev/null
@@ -1,337 +0,0 @@
-"""gr.Image() component."""
-
-from __future__ import annotations
-
-import warnings
-from pathlib import Path
-from typing import Any, Literal
-
-import numpy as np
-import PIL
-import PIL.ImageOps
-from gradio_client import utils as client_utils
-from gradio_client.documentation import document, set_documentation_group
-from PIL import Image as _Image  # using _ to minimize namespace pollution
-
-from gradio import processing_utils, utils
-from gradio.components.base import Component, StreamingInput, _Keywords
-from gradio.data_classes import FileData
-from gradio.events import Events
-
-set_documentation_group("component")
-_Image.init()  # fixes https://github.com/gradio-app/gradio/issues/2843
-
-
-@document()
-class ImageSlider(StreamingInput, Component):
-    """
-    Creates an image component that can be used to upload/draw images (as an input) or display images (as an output).
-    Preprocessing: passes the uploaded image as a {numpy.array}, {PIL.Image} or {str} filepath depending on `type` -- unless `tool` is `sketch` AND source is one of `upload` or `webcam`. In these cases, a {dict} with keys `image` and `mask` is passed, and the format of the corresponding values depends on `type`.
-    Postprocessing: expects a {numpy.array}, {PIL.Image} or {str} or {pathlib.Path} filepath to an image and displays the image.
-    Examples-format: a {str} filepath to a local file that contains the image.
-    Demos: image_mod, image_mod_default_image
-    Guides: image-classification-in-pytorch, image-classification-in-tensorflow, image-classification-with-vision-transformers, building-a-pictionary_app, create-your-own-friends-with-a-gan
-    """
-
-    EVENTS = [
-        Events.edit,
-        Events.clear,
-        Events.change,
-        Events.stream,
-        Events.select,
-        Events.upload,
-    ]
-    data_model = FileData
-
-    def __init__(
-        self,
-        value: str | _Image.Image | np.ndarray | None = None,
-        *,
-        shape: tuple[int, int] | None = None,
-        height: int | None = None,
-        width: int | None = None,
-        image_mode: Literal[
-            "1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"
-        ] = "RGB",
-        invert_colors: bool = False,
-        source: Literal["upload", "webcam", "canvas"] = "upload",
-        tool: Literal["editor", "select", "sketch", "color-sketch"] | None = None,
-        type: Literal["numpy", "pil", "filepath"] = "numpy",
-        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,
-        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,
-        root_url: str | None = None,
-        _skip_init_processing: bool = False,
-        mirror_webcam: bool = True,
-        brush_radius: float | None = None,
-        brush_color: str = "#000000",
-        mask_opacity: float = 0.7,
-        show_share_button: bool | None = None,
-        **kwargs,
-    ):
-        """
-        Parameters:
-            value: A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            shape: (width, height) shape to crop and resize image when passed to function. If None, matches input image size. Pass None for either width or height to only crop and resize the other.
-            height: Height of the displayed image in pixels.
-            width: Width of the displayed image in pixels.
-            image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning.
-            invert_colors: whether to invert the image as a preprocessing step.
-            source: Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools.
-            tool: Tools used for editing. "editor" allows a full screen editor (and is the default if source is "upload" or "webcam"), "select" provides a cropping and zoom tool, "sketch" allows you to create a binary sketch (and is the default if source="canvas"), and "color-sketch" allows you to created a sketch in different colors. "color-sketch" can be used with source="upload" or "webcam" to allow sketching on an image. "sketch" can also be used with "upload" or "webcam" to create a mask over an image and in that case both the image and mask are passed into the function as a dictionary with keys "image" and "mask" respectively.
-            type: The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image.
-            label: component name in interface.
-            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 width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
-            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.
-            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 when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'.
-            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.
-            root_url: The remote URL that of the Gradio app that this component belongs to. Used in `gr.load()`. Should not be set manually.
-            mirror_webcam: If True webcam will be mirrored. Default is True.
-            brush_radius: Size of the brush for Sketch. Default is None which chooses a sensible default
-            brush_color: Color of the brush for Sketch as hex string. Default is "#000000".
-            mask_opacity: Opacity of mask drawn on image, as a value between 0 and 1.
-            show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
-        """
-        self.brush_radius = brush_radius
-        self.brush_color = brush_color
-        self.mask_opacity = mask_opacity
-        self.mirror_webcam = mirror_webcam
-        valid_types = ["numpy", "pil", "filepath"]
-        if type not in valid_types:
-            raise ValueError(
-                f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
-            )
-        self.type = type
-        self.shape = shape
-        self.height = height
-        self.width = width
-        self.image_mode = image_mode
-        valid_sources = ["upload", "webcam", "canvas"]
-        if source not in valid_sources:
-            raise ValueError(
-                f"Invalid value for parameter `source`: {source}. Please choose from one of: {valid_sources}"
-            )
-        self.source = source
-        if tool is None:
-            self.tool = "sketch" if source == "canvas" else "editor"
-        else:
-            self.tool = tool
-        self.invert_colors = invert_colors
-        self.streaming = streaming
-        self.show_download_button = show_download_button
-        if streaming and source != "webcam":
-            raise ValueError("Image streaming only available if source is 'webcam'.")
-        self.show_share_button = (
-            (utils.get_space() is not None)
-            if show_share_button is None
-            else show_share_button
-        )
-        super().__init__(
-            label=label,
-            every=every,
-            show_label=show_label,
-            container=container,
-            scale=scale,
-            min_width=min_width,
-            interactive=interactive,
-            visible=visible,
-            elem_id=elem_id,
-            elem_classes=elem_classes,
-            render=render,
-            root_url=root_url,
-            _skip_init_processing=_skip_init_processing,
-            value=value,
-            **kwargs,
-        )
-
-    def get_config(self):
-        return {
-            "image_mode": self.image_mode,
-            "shape": self.shape,
-            "height": self.height,
-            "width": self.width,
-            "source": self.source,
-            "tool": self.tool,
-            "value": self.value,
-            "streaming": self.streaming,
-            "mirror_webcam": self.mirror_webcam,
-            "brush_radius": self.brush_radius,
-            "brush_color": self.brush_color,
-            "mask_opacity": self.mask_opacity,
-            "selectable": self.selectable,
-            "show_share_button": self.show_share_button,
-            "show_download_button": self.show_download_button,
-            **Component.get_config(self),
-        }
-
-    @staticmethod
-    def update(
-        value: Any | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
-        height: int | None = None,
-        width: int | None = None,
-        label: str | None = None,
-        show_label: bool | None = None,
-        show_download_button: bool | None = None,
-        container: bool | None = None,
-        scale: int | None = None,
-        min_width: int | None = None,
-        interactive: bool | None = None,
-        visible: bool | None = None,
-        brush_radius: float | None = None,
-        brush_color: str | None = None,
-        mask_opacity: float | None = None,
-        show_share_button: bool | None = None,
-    ):
-        return {
-            "height": height,
-            "width": width,
-            "label": label,
-            "show_label": show_label,
-            "show_download_button": show_download_button,
-            "container": container,
-            "scale": scale,
-            "min_width": min_width,
-            "interactive": interactive,
-            "visible": visible,
-            "value": value,
-            "brush_radius": brush_radius,
-            "brush_color": brush_color,
-            "mask_opacity": mask_opacity,
-            "show_share_button": show_share_button,
-            "__type__": "update",
-        }
-
-    def _format_image(
-        self, im: _Image.Image | None
-    ) -> np.ndarray | _Image.Image | str | None:
-        """Helper method to format an image based on self.type"""
-        if im is None:
-            return im
-        fmt = im.format
-        if self.type == "pil":
-            return im
-        elif self.type == "numpy":
-            return np.array(im)
-        elif self.type == "filepath":
-            path = self.pil_to_temp_file(
-                im, dir=self.DEFAULT_TEMP_DIR, format=fmt or "png"
-            )
-            self.temp_files.add(path)
-            return path
-        else:
-            raise ValueError(
-                "Unknown type: "
-                + str(self.type)
-                + ". Please choose from: 'numpy', 'pil', 'filepath'."
-            )
-
-    def preprocess(
-        self, x: str | dict[str, str]
-    ) -> np.ndarray | _Image.Image | str | dict | None:
-        """
-        Parameters:
-            x: base64 url data, or (if tool == "sketch") a dict of image and mask base64 url data
-        Returns:
-            image in requested format, or (if tool == "sketch") a dict of image and mask in requested format
-        """
-        if x is None:
-            return x
-
-        mask = ""
-        if self.tool == "sketch" and self.source in ["upload", "webcam"]:
-            assert isinstance(x, dict)
-            x, mask = x["image"], x["mask"]
-
-        if isinstance(x, str):
-            im = processing_utils.decode_base64_to_image(x)
-        else:
-            im = PIL.Image.open(self.make_temp_copy_if_needed(x["name"]))
-        with warnings.catch_warnings():
-            warnings.simplefilter("ignore")
-            im = im.convert(self.image_mode)
-        if self.shape is not None:
-            im = processing_utils.resize_and_crop(im, self.shape)
-        if self.invert_colors:
-            im = PIL.ImageOps.invert(im)
-        if (
-            self.source == "webcam"
-            and self.mirror_webcam is True
-            and self.tool != "color-sketch"
-        ):
-            im = PIL.ImageOps.mirror(im)
-
-        if self.tool == "sketch" and self.source in ["upload", "webcam"]:
-            mask_im = processing_utils.decode_base64_to_image(mask)
-
-            if mask_im.mode == "RGBA":  # whiten any opaque pixels in the mask
-                alpha_data = mask_im.getchannel("A").convert("L")
-                mask_im = _Image.merge("RGB", [alpha_data, alpha_data, alpha_data])
-            return {
-                "image": self._format_image(im),
-                "mask": self._format_image(mask_im),
-            }
-
-        return self._format_image(im)
-
-    def postprocess(
-        self, y: np.ndarray | _Image.Image | str | Path | None
-    ) -> str | None:
-        """
-        Parameters:
-            y: image as a numpy array, PIL Image, string/Path filepath, or string URL
-        Returns:
-            base64 url data
-        """
-        if y is None:
-            return None
-        if isinstance(y, np.ndarray):
-            path = self.base64_to_temp_file_if_needed(
-                processing_utils.encode_array_to_base64(y), "file.png"
-            )
-        elif isinstance(y, _Image.Image):
-            path = self.base64_to_temp_file_if_needed(
-                processing_utils.encode_pil_to_base64(y), "file.png"
-            )
-        elif isinstance(y, (str, Path)):
-            name = y if isinstance(y, str) else y.name
-            if client_utils.is_http_url_like(name):
-                path = self.download_temp_copy_if_needed(name)
-            else:
-                path = self.make_temp_copy_if_needed(name)
-        else:
-            raise ValueError("Cannot process this value as an Image")
-        return FileData(name=path, data=None, is_file=True)
-
-    def check_streamable(self):
-        if self.source != "webcam" and self.streaming:
-            raise ValueError("Image streaming only available if source is 'webcam'.")
-
-    def as_example(self, input_data: str | None) -> str:
-        if input_data is None:
-            return ""
-        elif (
-            self.root_url
-        ):  # If an externally hosted image, don't convert to absolute path
-            return input_data
-        return str(utils.abspath(input_data))
-
-    def example_inputs(self) -> Any:
-        return "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
diff --git a/js/preview/test/imageslider/demo/app.py b/js/preview/test/imageslider/demo/app.py
deleted file mode 100644
index 62e6e1c893943..0000000000000
--- a/js/preview/test/imageslider/demo/app.py
+++ /dev/null
@@ -1,9 +0,0 @@
-import gradio as gr
-from imageslider import ImageSlider
-
-with gr.Blocks() as demo:
-    ImageSlider(label="asd", interactive=True)
-    ImageSlider(label="Static", interactive=False)
-
-
-demo.launch()
diff --git a/js/preview/test/imageslider/frontend/CHANGELOG.md b/js/preview/test/imageslider/frontend/CHANGELOG.md
deleted file mode 100644
index 64e63beeb3a0f..0000000000000
--- a/js/preview/test/imageslider/frontend/CHANGELOG.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# imageslider
-
-## 0.2.1-beta.0
-
-### Patch Changes
-
-- Updated dependencies [[`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93), [`465f58957`](https://github.com/gradio-app/gradio/commit/465f58957f70c7cf3e894beef8a117b28339e3c1)]:
-  - @gradio/atoms@0.2.0-beta.4
-  - @gradio/icons@0.2.0-beta.1
-  - @gradio/statustracker@0.3.0-beta.6
-  - @gradio/upload@0.3.0-beta.4
-  - @gradio/utils@0.2.0-beta.4
diff --git a/js/preview/test/imageslider/frontend/example/Image.svelte b/js/preview/test/imageslider/frontend/example/Image.svelte
deleted file mode 100644
index 4544ce0b6882d..0000000000000
--- a/js/preview/test/imageslider/frontend/example/Image.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	export let value: string;
-	export let samples_dir: string;
-	export let type: "gallery" | "table";
-	export let selected = false;
-</script>
-
-<!-- TODO: fix -->
-<!-- svelte-ignore a11y-missing-attribute -->
-<img
-	src={samples_dir + value}
-	class:table={type === "table"}
-	class:gallery={type === "gallery"}
-	class:selected
-/>
-
-<style>
-	img {
-		border-radius: var(--radius-lg);
-		max-width: none;
-	}
-
-	img.selected {
-		border-color: var(--border-color-accent);
-	}
-
-	.table {
-		margin: 0 auto;
-		border: 2px solid var(--border-color-primary);
-		border-radius: var(--radius-lg);
-		width: var(--size-20);
-		height: var(--size-20);
-		object-fit: cover;
-	}
-
-	.gallery {
-		border: 2px solid var(--border-color-primary);
-		max-height: var(--size-20);
-		object-fit: cover;
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/example/index.ts b/js/preview/test/imageslider/frontend/example/index.ts
deleted file mode 100644
index f77af3dcfa039..0000000000000
--- a/js/preview/test/imageslider/frontend/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Image.svelte";
diff --git a/js/preview/test/imageslider/frontend/interactive/Cropper.svelte b/js/preview/test/imageslider/frontend/interactive/Cropper.svelte
deleted file mode 100644
index c26bf2a0775cc..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/Cropper.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import Cropper from "cropperjs";
-	import { onMount, createEventDispatcher } from "svelte";
-
-	export let image: string;
-	let el: HTMLImageElement;
-
-	const dispatch = createEventDispatcher();
-	let cropper: Cropper;
-
-	export function destroy(): void {
-		cropper.destroy();
-	}
-
-	export function create(): void {
-		if (cropper) {
-			destroy();
-		}
-		cropper = new Cropper(el, {
-			autoCropArea: 1,
-			cropend(): void {
-				const image_data = cropper.getCroppedCanvas().toDataURL();
-				dispatch("crop", image_data);
-			}
-		});
-
-		dispatch("crop", image);
-	}
-</script>
-
-<img src={image} bind:this={el} alt="" />
diff --git a/js/preview/test/imageslider/frontend/interactive/Image.svelte b/js/preview/test/imageslider/frontend/interactive/Image.svelte
deleted file mode 100644
index 748e3834a737d..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/Image.svelte
+++ /dev/null
@@ -1,447 +0,0 @@
-<script lang="ts">
-	// @ts-nocheck
-	import { createEventDispatcher, tick, onMount } from "svelte";
-	import { BlockLabel } from "@gradio/atoms";
-	import { Image, Sketch as SketchIcon } from "@gradio/icons";
-	import type { SelectData, I18nFormatter } from "@gradio/utils";
-	import { get_coordinates_of_clicked_image } from "../shared/utils";
-
-	import Cropper from "./Cropper.svelte";
-	import Sketch from "./Sketch.svelte";
-	import Webcam from "./Webcam.svelte";
-	import ModifySketch from "./ModifySketch.svelte";
-	import SketchSettings from "./SketchSettings.svelte";
-	import {
-		Upload,
-		ModifyUpload,
-		type FileData,
-		normalise_file
-	} from "@gradio/upload";
-
-	export let value:
-		| null
-		| { image: string | null; mask: string | null }
-		| FileData;
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-
-	export let source: "canvas" | "webcam" | "upload" = "upload";
-	export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
-	export let shape: [number, number];
-	export let streaming = false;
-	export let pending = false;
-	export let mirror_webcam: boolean;
-	export let brush_radius: number;
-	export let brush_color = "#000000";
-	export let mask_opacity;
-	export let selectable = false;
-	export let root: string;
-	export let i18n: I18nFormatter;
-
-	let sketch: Sketch;
-	let cropper: Cropper;
-
-	if (
-		value &&
-		(source === "upload" || source === "webcam") &&
-		tool === "sketch"
-	) {
-		value = { image: value as string, mask: null };
-	}
-
-	function handle_upload({ detail }: CustomEvent<string>): void {
-		if (tool === "color-sketch") {
-			static_image = detail;
-		} else {
-			value =
-				(source === "upload" || source === "webcam") && tool === "sketch"
-					? { image: detail, mask: null }
-					: detail;
-		}
-		dispatch("upload", detail);
-	}
-
-	function handle_clear({ detail }: CustomEvent<null>): void {
-		value = null;
-		static_image = undefined;
-		dispatch("clear");
-	}
-
-	async function handle_save(
-		{ detail }: { detail: string },
-		initial
-	): Promise<void> {
-		if (mode === "mask") {
-			if (source === "webcam" && initial) {
-				value = {
-					image: detail,
-					mask: null
-				};
-			} else {
-				value = {
-					image: typeof value === "string" ? value : value?.image || null,
-					mask: detail
-				};
-			}
-		} else if (
-			(source === "upload" || source === "webcam") &&
-			tool === "sketch"
-		) {
-			value = { image: detail, mask: null };
-		} else {
-			value = detail;
-		}
-
-		await tick();
-
-		dispatch(streaming ? "stream" : "edit");
-	}
-
-	const dispatch = createEventDispatcher<{
-		change: string | null;
-		stream: string | null;
-		edit: undefined;
-		clear: undefined;
-		drag: boolean;
-		upload: FileData;
-		select: SelectData;
-	}>();
-
-	let dragging = false;
-
-	$: dispatch("drag", dragging);
-
-	let value_: null | FileData = null;
-
-	$: if (value !== value_) {
-		value_ = value;
-		normalise_file(value_, root, null);
-	}
-
-	function handle_image_load(event: Event): void {
-		const element = event.currentTarget as HTMLImageElement;
-		img_width = element.naturalWidth;
-		img_height = element.naturalHeight;
-		container_height = element.getBoundingClientRect().height;
-	}
-
-	async function handle_sketch_clear(): Promise<void> {
-		sketch.clear();
-		await tick();
-		value = null;
-		static_image = undefined;
-	}
-
-	async function handle_mask_clear(): Promise<void> {
-		sketch.clear_mask();
-		await tick();
-	}
-
-	let img_height = 0;
-	let img_width = 0;
-	let container_height = 0;
-
-	let mode;
-
-	$: {
-		if (source === "canvas" && tool === "sketch") {
-			mode = "bw-sketch";
-		} else if (tool === "color-sketch") {
-			mode = "color-sketch";
-		} else if (
-			(source === "upload" || source === "webcam") &&
-			tool === "sketch"
-		) {
-			mode = "mask";
-		} else {
-			mode = "editor";
-		}
-	}
-	let value_img;
-	let max_height;
-	let max_width;
-
-	let static_image = undefined;
-
-	$: {
-		if (value === null || (value.image === null && value.mask === null)) {
-			static_image = undefined;
-		}
-	}
-
-	$: {
-		if (cropper) {
-			if (value) {
-				cropper.image = value;
-				cropper.create();
-			} else {
-				cropper.destroy();
-			}
-		}
-	}
-
-	onMount(async () => {
-		if (tool === "color-sketch" && value && typeof value === "string") {
-			static_image = value;
-			await tick();
-			handle_image_load({ currentTarget: value_img });
-		}
-	});
-
-	function handle_click(evt: MouseEvent): void {
-		let coordinates = get_coordinates_of_clicked_image(evt);
-		if (coordinates) {
-			dispatch("select", { index: coordinates, value: null });
-		}
-	}
-</script>
-
-<BlockLabel
-	{show_label}
-	Icon={source === "canvas" ? SketchIcon : Image}
-	label={label || (source === "canvas" ? "Sketch" : "Image")}
-/>
-
-<div
-	data-testid="image"
-	class="image-container"
-	bind:offsetHeight={max_height}
-	bind:offsetWidth={max_width}
->
-	{#if source === "upload"}
-		<Upload
-			bind:dragging
-			filetype="image/*"
-			on:load={handle_upload}
-			include_file_metadata={false}
-			disable_click={!!value}
-			{root}
-		>
-			{#if (value === null && !static_image) || streaming}
-				<slot />
-			{:else if tool === "select"}
-				<Cropper
-					bind:this={cropper}
-					image={value_.data}
-					on:crop={handle_save}
-				/>
-				<ModifyUpload
-					{i18n}
-					on:clear={(e) => (handle_clear(e), (tool = "editor"))}
-				/>
-			{:else if tool === "editor"}
-				<ModifyUpload
-					{i18n}
-					on:edit={() => (tool = "select")}
-					on:clear={handle_clear}
-					editable
-				/>
-
-				<!-- TODO: fix-->
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-				<img
-					src={value_.data}
-					alt=""
-					class:scale-x-[-1]={source === "webcam" && mirror_webcam}
-					class:selectable
-					on:click={handle_click}
-				/>
-			{:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
-				{#key static_image}
-					<img
-						bind:this={value_img}
-						class="absolute-img"
-						src={static_image || value?.image || value}
-						alt=""
-						on:load={handle_image_load}
-						class:webcam={source === "webcam" && mirror_webcam}
-					/>
-				{/key}
-				{#if img_width > 0}
-					<Sketch
-						{value}
-						bind:this={sketch}
-						bind:brush_radius
-						bind:brush_color
-						{mask_opacity}
-						on:change={handle_save}
-						{mode}
-						width={img_width || max_width}
-						height={img_height || max_height}
-						container_height={container_height || max_height}
-						{value_img}
-						{source}
-						{shape}
-					/>
-					<ModifySketch
-						show_eraser={value_img}
-						on:undo={() => sketch.undo()}
-						on:clear_mask={handle_mask_clear}
-						on:remove_image={handle_sketch_clear}
-					/>
-					{#if tool === "color-sketch" || tool === "sketch"}
-						<SketchSettings
-							bind:brush_radius
-							bind:brush_color
-							container_height={container_height || max_height}
-							img_width={img_width || max_width}
-							img_height={img_height || max_height}
-							{mode}
-						/>
-					{/if}
-				{/if}
-			{:else}
-				<!-- TODO: fix-->
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-				<img
-					src={value.image || value.data}
-					alt="hello"
-					class:webcam={source === "webcam" && mirror_webcam}
-					class:selectable
-					on:click={handle_click}
-				/>
-			{/if}
-		</Upload>
-	{:else if source === "canvas"}
-		<ModifySketch
-			on:undo={() => sketch.undo()}
-			on:remove_image={handle_sketch_clear}
-		/>
-		{#if tool === "color-sketch"}
-			<SketchSettings
-				bind:brush_radius
-				bind:brush_color
-				container_height={container_height || max_height}
-				img_width={img_width || max_width}
-				img_height={img_height || max_height}
-			/>
-		{/if}
-		<Sketch
-			{value}
-			bind:brush_radius
-			bind:brush_color
-			bind:this={sketch}
-			on:change={handle_save}
-			on:clear={handle_sketch_clear}
-			{mode}
-			width={img_width || max_width}
-			height={img_height || max_height}
-			container_height={container_height || max_height}
-			{shape}
-		/>
-	{:else if (value === null && !static_image) || streaming}
-		{#if source === "webcam" && !static_image}
-			<Webcam
-				on:capture={(e) =>
-					tool === "color-sketch" ? handle_upload(e) : handle_save(e, true)}
-				on:stream={handle_save}
-				on:error
-				{streaming}
-				{pending}
-				{mirror_webcam}
-			/>
-		{/if}
-	{:else if tool === "select"}
-		<Cropper bind:this={cropper} image={value.data} on:crop={handle_save} />
-		<ModifyUpload
-			{i18n}
-			on:clear={(e) => (handle_clear(e), (tool = "editor"))}
-		/>
-	{:else if tool === "editor"}
-		<ModifyUpload
-			{i18n}
-			on:edit={() => (tool = "select")}
-			on:clear={handle_clear}
-			editable
-		/>
-
-		<!-- TODO: fix -->
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-		<img
-			src={value_}
-			alt=""
-			class:selectable
-			class:webcam={source === "webcam" && mirror_webcam}
-			on:click={handle_click}
-		/>
-	{:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
-		{#key static_image}
-			<img
-				bind:this={value_img}
-				class="absolute-img"
-				src={static_image || value_}
-				alt=""
-				on:load={handle_image_load}
-				class:webcam={source === "webcam" && mirror_webcam}
-			/>
-		{/key}
-		{#if img_width > 0}
-			<Sketch
-				{value}
-				bind:this={sketch}
-				bind:brush_radius
-				bind:brush_color
-				on:change={handle_save}
-				{mode}
-				width={img_width || max_width}
-				height={img_height || max_height}
-				container_height={container_height || max_height}
-				{value_img}
-				{source}
-			/>
-			<ModifySketch
-				on:undo={() => sketch.undo()}
-				on:remove_image={handle_sketch_clear}
-			/>
-			{#if tool === "color-sketch" || tool === "sketch"}
-				<SketchSettings
-					bind:brush_radius
-					bind:brush_color
-					container_height={container_height || max_height}
-					img_width={img_width || max_width}
-					img_height={img_height || max_height}
-					{mode}
-				/>
-			{/if}
-		{/if}
-	{:else}
-		<!-- TODO: fix -->
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-
-		<img
-			src={value_.image || value_.data}
-			alt=""
-			class:webcam={source === "webcam" && mirror_webcam}
-			class:selectable
-			on:click={handle_click}
-		/>
-	{/if}
-</div>
-
-<style>
-	.image-container,
-	img {
-		width: var(--size-full);
-		height: var(--size-full);
-	}
-	img {
-		object-fit: contain;
-	}
-
-	.selectable {
-		cursor: crosshair;
-	}
-
-	.absolute-img {
-		position: absolute;
-		opacity: 0;
-	}
-
-	.webcam {
-		transform: scaleX(-1);
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/interactive/InteractiveImage.svelte b/js/preview/test/imageslider/frontend/interactive/InteractiveImage.svelte
deleted file mode 100644
index 6c1aeb84673fc..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/InteractiveImage.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData, ShareData } from "@gradio/utils";
-	import Image from "./Image.svelte";
-
-	import { Block } from "@gradio/atoms";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { UploadText } from "@gradio/atoms";
-	import type { FileData } from "js/upload/src";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | FileData = null;
-	export let source: "canvas" | "webcam" | "upload" = "upload";
-	export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
-	export let label: string;
-	export let show_label: boolean;
-	export let streaming: boolean;
-	export let pending: boolean;
-	export let height: number | undefined;
-	export let width: number | undefined;
-	export let mirror_webcam: boolean;
-	export let shape: [number, number];
-	export let brush_radius: number;
-	export let brush_color: string;
-	export let mask_opacity: number;
-	export let selectable = false;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let root: string;
-
-	export let gradio: Gradio<{
-		change: never;
-		error: string;
-		edit: never;
-		stream: never;
-		drag: never;
-		upload: never;
-		clear: never;
-		select: SelectData;
-		share: ShareData;
-	}>;
-
-	$: value, gradio.dispatch("change");
-	let dragging: boolean;
-	const FIXED_HEIGHT = 240;
-
-	$: value = !value ? null : value;
-</script>
-
-<Block
-	{visible}
-	variant={value === null && source === "upload" ? "dashed" : "solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	height={height || (source === "webcam" ? undefined : FIXED_HEIGHT)}
-	{width}
-	allow_overflow={false}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
-
-	<Image
-		{brush_radius}
-		{brush_color}
-		{shape}
-		bind:value
-		{source}
-		{tool}
-		{selectable}
-		{mask_opacity}
-		{root}
-		on:edit={() => gradio.dispatch("edit")}
-		on:clear={() => gradio.dispatch("clear")}
-		on:stream={() => gradio.dispatch("stream")}
-		on:drag={({ detail }) => (dragging = detail)}
-		on:upload={() => gradio.dispatch("upload")}
-		on:select={({ detail }) => gradio.dispatch("select", detail)}
-		on:share={({ detail }) => gradio.dispatch("share", detail)}
-		on:error={({ detail }) => {
-			loading_status = loading_status || {};
-			loading_status.status = "error";
-			gradio.dispatch("error", detail);
-		}}
-		{label}
-		{show_label}
-		{pending}
-		{streaming}
-		{mirror_webcam}
-		i18n={gradio.i18n}
-	>
-		<UploadText i18n={gradio.i18n} type="image" />
-	</Image>
-</Block>
diff --git a/js/preview/test/imageslider/frontend/interactive/ModifySketch.svelte b/js/preview/test/imageslider/frontend/interactive/ModifySketch.svelte
deleted file mode 100644
index 8e603f247e958..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/ModifySketch.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import { IconButton } from "@gradio/atoms";
-	import { Undo, Clear, Erase } from "@gradio/icons";
-
-	const dispatch = createEventDispatcher();
-
-	export let show_eraser = false;
-</script>
-
-<div>
-	<IconButton Icon={Undo} label="Undo" on:click={() => dispatch("undo")} />
-
-	{#if show_eraser}
-		<IconButton
-			Icon={Erase}
-			label="Clear"
-			on:click={(event) => {
-				dispatch("clear_mask");
-				event.stopPropagation();
-			}}
-		/>
-	{/if}
-
-	<IconButton
-		Icon={Clear}
-		label="Remove Image"
-		on:click={(event) => {
-			dispatch("remove_image");
-			event.stopPropagation();
-		}}
-	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/interactive/Sketch.svelte b/js/preview/test/imageslider/frontend/interactive/Sketch.svelte
deleted file mode 100644
index ea2654080f460..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/Sketch.svelte
+++ /dev/null
@@ -1,624 +0,0 @@
-<script>
-	// @ts-nocheck
-	/* eslint-disable */
-
-	import { onMount, onDestroy, createEventDispatcher, tick } from "svelte";
-	import { fade } from "svelte/transition";
-	import { LazyBrush } from "lazy-brush/src";
-	import ResizeObserver from "resize-observer-polyfill";
-
-	const dispatch = createEventDispatcher();
-
-	export let value;
-	export let value_img;
-	export let mode = "sketch";
-	export let brush_color = "#0b0f19";
-	export let brush_radius;
-	export let mask_opacity = 0.7;
-	export let source;
-
-	export let width = 400;
-	export let height = 200;
-	export let container_height = 200;
-	export let shape;
-
-	$: {
-		if (shape && (width || height)) {
-			width = shape[0];
-			height = shape[1];
-		}
-	}
-
-	let mounted;
-
-	let catenary_color = "#aaa";
-
-	let canvas_width = width;
-	let canvas_height = height;
-
-	$: mounted && !value && clear();
-
-	let last_value_img;
-
-	$: {
-		if (mounted && value_img !== last_value_img) {
-			last_value_img = value_img;
-
-			clear();
-
-			setTimeout(() => {
-				if (source === "webcam") {
-					ctx.temp.save();
-					ctx.temp.translate(width, 0);
-					ctx.temp.scale(-1, 1);
-					ctx.temp.drawImage(value_img, 0, 0);
-					ctx.temp.restore();
-				} else {
-					draw_cropped_image();
-				}
-
-				ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
-
-				draw_lines({ lines: lines.slice() });
-				trigger_on_change();
-			}, 50);
-		}
-	}
-
-	function mid_point(p1, p2) {
-		return {
-			x: p1.x + (p2.x - p1.x) / 2,
-			y: p1.y + (p2.y - p1.y) / 2
-		};
-	}
-
-	const canvas_types = [
-		{
-			name: "interface",
-			zIndex: 15
-		},
-		{
-			name: "mask",
-			zIndex: 13,
-			opacity: mask_opacity
-		},
-		{
-			name: "drawing",
-			zIndex: 11
-		},
-		{
-			name: "temp",
-			zIndex: 12
-		}
-	];
-
-	let canvas = {};
-	let ctx = {};
-	let points = [];
-	let lines = [];
-	let mouse_has_moved = true;
-	let values_changed = true;
-	let is_drawing = false;
-	let is_pressing = false;
-	let lazy = null;
-	let canvas_container = null;
-	let canvas_observer = null;
-	let line_count = 0;
-
-	function draw_cropped_image() {
-		if (!shape) {
-			ctx.temp.drawImage(value_img, 0, 0, width, height);
-			return;
-		}
-
-		let _width = value_img.naturalWidth;
-		let _height = value_img.naturalHeight;
-
-		const shape_ratio = shape[0] / shape[1];
-		const image_ratio = _width / _height;
-
-		let x = 0;
-		let y = 0;
-
-		if (shape_ratio < image_ratio) {
-			_width = shape[1] * image_ratio;
-			_height = shape[1];
-			x = (shape[0] - _width) / 2;
-		} else if (shape_ratio > image_ratio) {
-			_width = shape[0];
-			_height = shape[0] / image_ratio;
-			y = (shape[1] - _height) / 2;
-		} else {
-			x = 0;
-			y = 0;
-			_width = shape[0];
-			_height = shape[1];
-		}
-
-		ctx.temp.drawImage(value_img, x, y, _width, _height);
-	}
-
-	onMount(async () => {
-		Object.keys(canvas).forEach((key) => {
-			ctx[key] = canvas[key].getContext("2d");
-		});
-
-		await tick();
-
-		if (value_img) {
-			value_img.addEventListener("load", (_) => {
-				if (source === "webcam") {
-					ctx.temp.save();
-					ctx.temp.translate(width, 0);
-					ctx.temp.scale(-1, 1);
-					ctx.temp.drawImage(value_img, 0, 0);
-					ctx.temp.restore();
-				} else {
-					draw_cropped_image();
-				}
-				ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
-
-				trigger_on_change();
-			});
-
-			setTimeout(() => {
-				if (source === "webcam") {
-					ctx.temp.save();
-					ctx.temp.translate(width, 0);
-					ctx.temp.scale(-1, 1);
-					ctx.temp.drawImage(value_img, 0, 0);
-					ctx.temp.restore();
-				} else {
-					draw_cropped_image();
-				}
-
-				ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
-
-				draw_lines({ lines: lines.slice() });
-				trigger_on_change();
-			}, 100);
-		}
-
-		lazy = new LazyBrush({
-			radius: brush_radius * 0.05,
-			enabled: true,
-			initialPoint: {
-				x: width / 2,
-				y: height / 2
-			}
-		});
-
-		canvas_observer = new ResizeObserver((entries, observer, ...rest) => {
-			handle_canvas_resize(entries, observer);
-		});
-		canvas_observer.observe(canvas_container);
-
-		loop();
-		mounted = true;
-
-		requestAnimationFrame(() => {
-			init();
-			requestAnimationFrame(() => {
-				clear();
-			});
-		});
-	});
-
-	function init() {
-		const initX = width / 2;
-		const initY = height / 2;
-		lazy.update({ x: initX, y: initY }, { both: true });
-		lazy.update({ x: initX, y: initY }, { both: false });
-		mouse_has_moved = true;
-		values_changed = true;
-	}
-
-	onDestroy(() => {
-		mounted = false;
-		canvas_observer.unobserve(canvas_container);
-	});
-
-	function redraw_image(_lines) {
-		clear_canvas();
-
-		if (value_img) {
-			if (source === "webcam") {
-				ctx.temp.save();
-				ctx.temp.translate(width, 0);
-				ctx.temp.scale(-1, 1);
-				ctx.temp.drawImage(value_img, 0, 0);
-				ctx.temp.restore();
-			} else {
-				draw_cropped_image();
-			}
-
-			if (!lines || !lines.length) {
-				ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
-			}
-		}
-
-		draw_lines({ lines: _lines });
-		line_count = _lines.length;
-
-		lines = _lines;
-		ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
-
-		if (lines.length == 0) {
-			dispatch("clear");
-		}
-	}
-
-	export function clear_mask() {
-		const _lines = [];
-
-		redraw_image(_lines);
-		trigger_on_change();
-	}
-
-	export function undo() {
-		const _lines = lines.slice(0, -1);
-
-		redraw_image(_lines);
-		trigger_on_change();
-	}
-
-	let get_save_data = () => {
-		return JSON.stringify({
-			lines: lines,
-			width: canvas_width,
-			height: canvas_height
-		});
-	};
-
-	let draw_lines = ({ lines }) => {
-		lines.forEach((line) => {
-			const { points: _points, brush_color, brush_radius } = line;
-			draw_points({
-				points: _points,
-				brush_color,
-				brush_radius,
-				mask: mode === "mask"
-			});
-		});
-
-		saveLine({ brush_color, brush_radius });
-		if (mode === "mask") {
-			save_mask_line();
-		}
-	};
-
-	let handle_draw_start = (e) => {
-		e.preventDefault();
-		is_pressing = true;
-		const { x, y } = get_pointer_pos(e);
-		if (e.touches && e.touches.length > 0) {
-			lazy.update({ x, y }, { both: true });
-		}
-		handle_pointer_move(x, y);
-		line_count += 1;
-	};
-
-	let handle_draw_move = (e) => {
-		e.preventDefault();
-		const { x, y } = get_pointer_pos(e);
-		handle_pointer_move(x, y);
-	};
-
-	let handle_draw_end = (e) => {
-		e.preventDefault();
-		handle_draw_move(e);
-		is_drawing = false;
-		is_pressing = false;
-		saveLine();
-
-		if (mode === "mask") {
-			save_mask_line();
-		}
-	};
-
-	let old_width = 0;
-	let old_height = 0;
-	let old_container_height = 0;
-	let add_lr_border = false;
-
-	let handle_canvas_resize = async () => {
-		if (shape && canvas_container) {
-			const x = canvas_container?.getBoundingClientRect();
-			const shape_ratio = shape[0] / shape[1];
-			const container_ratio = x.width / x.height;
-			add_lr_border = shape_ratio < container_ratio;
-		}
-
-		if (
-			width === old_width &&
-			height === old_height &&
-			old_container_height === container_height
-		) {
-			return;
-		}
-		const dimensions = { width: width, height: height };
-
-		const container_dimensions = {
-			height: container_height,
-			width: container_height * (dimensions.width / dimensions.height)
-		};
-
-		await Promise.all([
-			set_canvas_size(canvas.interface, dimensions, container_dimensions),
-			set_canvas_size(canvas.drawing, dimensions, container_dimensions),
-			set_canvas_size(canvas.temp, dimensions, container_dimensions),
-			set_canvas_size(canvas.mask, dimensions, container_dimensions, false)
-		]);
-
-		if (!brush_radius) {
-			brush_radius = 20 * (dimensions.width / container_dimensions.width);
-		}
-
-		loop({ once: true });
-
-		setTimeout(() => {
-			old_height = height;
-			old_width = width;
-			old_container_height = container_height;
-		}, 10);
-		await tick();
-
-		clear();
-	};
-
-	$: {
-		if (lazy) {
-			init();
-			lazy.setRadius(brush_radius * 0.05);
-		}
-	}
-
-	$: {
-		if (width || height) {
-			handle_canvas_resize();
-		}
-	}
-
-	let set_canvas_size = async (canvas, dimensions, container, scale = true) => {
-		if (!mounted) return;
-		await tick();
-
-		const dpr = window.devicePixelRatio || 1;
-		canvas.width = dimensions.width * (scale ? dpr : 1);
-		canvas.height = dimensions.height * (scale ? dpr : 1);
-
-		const ctx = canvas.getContext("2d");
-		scale && ctx.scale(dpr, dpr);
-
-		canvas.style.width = `${container.width}px`;
-		canvas.style.height = `${container.height}px`;
-	};
-
-	let get_pointer_pos = (e) => {
-		const rect = canvas.interface.getBoundingClientRect();
-
-		let clientX = e.clientX;
-		let clientY = e.clientY;
-		if (e.changedTouches && e.changedTouches.length > 0) {
-			clientX = e.changedTouches[0].clientX;
-			clientY = e.changedTouches[0].clientY;
-		}
-
-		return {
-			x: ((clientX - rect.left) / rect.width) * width,
-			y: ((clientY - rect.top) / rect.height) * height
-		};
-	};
-
-	let handle_pointer_move = (x, y) => {
-		lazy.update({ x: x, y: y });
-		const is_disabled = !lazy.isEnabled();
-		if ((is_pressing && !is_drawing) || (is_disabled && is_pressing)) {
-			is_drawing = true;
-			points.push(lazy.brush.toObject());
-		}
-		if (is_drawing) {
-			points.push(lazy.brush.toObject());
-			draw_points({
-				points: points,
-				brush_color,
-				brush_radius,
-				mask: mode === "mask"
-			});
-		}
-		mouse_has_moved = true;
-	};
-
-	let draw_points = ({ points, brush_color, brush_radius, mask }) => {
-		if (!points || points.length < 2) return;
-		let target_ctx = mask ? ctx.mask : ctx.temp;
-		target_ctx.lineJoin = "round";
-		target_ctx.lineCap = "round";
-
-		target_ctx.strokeStyle = brush_color;
-		target_ctx.lineWidth = brush_radius;
-		let p1 = points[0];
-		let p2 = points[1];
-		target_ctx.moveTo(p2.x, p2.y);
-		target_ctx.beginPath();
-		for (var i = 1, len = points.length; i < len; i++) {
-			var midPoint = mid_point(p1, p2);
-			target_ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
-			p1 = points[i];
-			p2 = points[i + 1];
-		}
-
-		target_ctx.lineTo(p1.x, p1.y);
-		target_ctx.stroke();
-	};
-
-	let save_mask_line = () => {
-		if (points.length < 1) return;
-		points.length = 0;
-
-		trigger_on_change();
-	};
-
-	let saveLine = () => {
-		if (points.length < 1) return;
-
-		lines.push({
-			points: points.slice(),
-			brush_color: brush_color,
-			brush_radius
-		});
-
-		if (mode !== "mask") {
-			points.length = 0;
-		}
-
-		ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
-
-		trigger_on_change();
-	};
-
-	let trigger_on_change = () => {
-		const x = get_image_data();
-		dispatch("change", x);
-	};
-
-	export function clear() {
-		lines = [];
-		clear_canvas();
-		line_count = 0;
-
-		return true;
-	}
-
-	function clear_canvas() {
-		values_changed = true;
-		ctx.temp.clearRect(0, 0, width, height);
-
-		ctx.temp.fillStyle = mode === "mask" ? "transparent" : "#FFFFFF";
-		ctx.temp.fillRect(0, 0, width, height);
-
-		if (mode === "mask") {
-			ctx.mask.clearRect(0, 0, canvas.mask.width, canvas.mask.height);
-		}
-	}
-
-	let loop = ({ once = false } = {}) => {
-		if (mouse_has_moved || values_changed) {
-			const pointer = lazy.getPointerCoordinates();
-			const brush = lazy.getBrushCoordinates();
-			draw_interface(ctx.interface, pointer, brush);
-			mouse_has_moved = false;
-			values_changed = false;
-		}
-		if (!once) {
-			window.requestAnimationFrame(() => {
-				loop();
-			});
-		}
-	};
-
-	$: brush_dot = brush_radius * 0.075;
-
-	let draw_interface = (ctx, pointer, brush) => {
-		ctx.clearRect(0, 0, width, height);
-
-		// brush preview
-		ctx.beginPath();
-		ctx.fillStyle = brush_color;
-		ctx.arc(brush.x, brush.y, brush_radius / 2, 0, Math.PI * 2, true);
-		ctx.fill();
-
-		// tiny brush point dot
-		ctx.beginPath();
-		ctx.fillStyle = catenary_color;
-		ctx.arc(brush.x, brush.y, brush_dot, 0, Math.PI * 2, true);
-		ctx.fill();
-	};
-
-	export function get_image_data() {
-		return mode === "mask"
-			? canvas.mask.toDataURL("image/png")
-			: canvas.drawing.toDataURL("image/jpg");
-	}
-</script>
-
-<div
-	class="wrap"
-	bind:this={canvas_container}
-	bind:offsetWidth={canvas_width}
-	bind:offsetHeight={canvas_height}
->
-	{#if line_count === 0}
-		<div transition:fade={{ duration: 50 }} class="start-prompt">
-			Start drawing
-		</div>
-	{/if}
-	{#each canvas_types as { name, zIndex, opacity }}
-		<canvas
-			key={name}
-			style=" z-index:{zIndex};"
-			style:opacity
-			class:lr={add_lr_border}
-			class:tb={!add_lr_border}
-			bind:this={canvas[name]}
-			on:mousedown={name === "interface" ? handle_draw_start : undefined}
-			on:mousemove={name === "interface" ? handle_draw_move : undefined}
-			on:mouseup={name === "interface" ? handle_draw_end : undefined}
-			on:mouseout={name === "interface" ? handle_draw_end : undefined}
-			on:blur={name === "interface" ? handle_draw_end : undefined}
-			on:touchstart={name === "interface" ? handle_draw_start : undefined}
-			on:touchmove={name === "interface" ? handle_draw_move : undefined}
-			on:touchend={name === "interface" ? handle_draw_end : undefined}
-			on:touchcancel={name === "interface" ? handle_draw_end : undefined}
-			on:click|stopPropagation
-		/>
-	{/each}
-</div>
-
-<style>
-	canvas {
-		display: block;
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		bottom: 0px;
-		left: 0px;
-		margin: auto;
-	}
-
-	.lr {
-		border-right: 1px solid var(--border-color-primary);
-		border-left: 1px solid var(--border-color-primary);
-	}
-
-	.tb {
-		border-top: 1px solid var(--border-color-primary);
-		border-bottom: 1px solid var(--border-color-primary);
-	}
-
-	canvas:hover {
-		cursor: none;
-	}
-
-	.wrap {
-		position: relative;
-		width: var(--size-full);
-		height: var(--size-full);
-		touch-action: none;
-	}
-
-	.start-prompt {
-		display: flex;
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		bottom: 0px;
-		left: 0px;
-		justify-content: center;
-		align-items: center;
-		z-index: var(--layer-4);
-		touch-action: none;
-		pointer-events: none;
-		color: var(--body-text-color-subdued);
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/interactive/SketchSettings.svelte b/js/preview/test/imageslider/frontend/interactive/SketchSettings.svelte
deleted file mode 100644
index 54303f98177d3..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/SketchSettings.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-	import { IconButton } from "@gradio/atoms";
-	import { Brush, Color } from "@gradio/icons";
-
-	let show_size = false;
-	let show_col = false;
-
-	export let brush_radius = 20;
-	export let brush_color = "#000";
-	export let container_height: number;
-	export let img_width: number;
-	export let img_height: number;
-	export let mode: "mask" | "other" = "other";
-
-	$: width = container_height * (img_width / img_height);
-</script>
-
-<div class="wrap">
-	<span class="brush">
-		<IconButton
-			Icon={Brush}
-			label="Use brush"
-			on:click={() => (show_size = !show_size)}
-		/>
-		{#if show_size}
-			<input
-				aria-label="Brush radius"
-				bind:value={brush_radius}
-				type="range"
-				min={0.5 * (img_width / width)}
-				max={75 * (img_width / width)}
-			/>
-		{/if}
-	</span>
-
-	{#if mode !== "mask"}
-		<span class="col">
-			<IconButton
-				Icon={Color}
-				label="Select brush color"
-				on:click={() => (show_col = !show_col)}
-			/>
-			{#if show_col}
-				<input aria-label="Brush color" bind:value={brush_color} type="color" />
-			{/if}
-		</span>
-	{/if}
-</div>
-
-<style>
-	.wrap {
-		display: flex;
-		position: absolute;
-		top: var(--size-10);
-		right: var(--size-2);
-		flex-direction: column;
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-	.brush {
-		top: 0;
-		right: 0;
-	}
-
-	.brush input {
-		position: absolute;
-		top: 3px;
-		right: calc(100% + 5px);
-	}
-
-	.col input {
-		position: absolute;
-		right: calc(100% + 5px);
-		bottom: -4px;
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/interactive/Webcam.svelte b/js/preview/test/imageslider/frontend/interactive/Webcam.svelte
deleted file mode 100644
index e1ec1195a9002..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/Webcam.svelte
+++ /dev/null
@@ -1,204 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
-	import { Camera, Circle, Square } from "@gradio/icons";
-	import type { I18nFormatter } from "js/utils/src";
-
-	let video_source: HTMLVideoElement;
-	let canvas: HTMLCanvasElement;
-	export let streaming = false;
-	export let pending = false;
-
-	export let mode: "image" | "video" = "image";
-	export let mirror_webcam: boolean;
-	export let include_audio: boolean;
-	export let i18n: I18nFormatter;
-
-	const dispatch = createEventDispatcher<{
-		stream: undefined;
-		capture:
-			| {
-					data: FileReader["result"];
-					name: string;
-					is_example?: boolean;
-					is_file: boolean;
-			  }
-			| string;
-		error: string;
-		start_recording: undefined;
-		stop_recording: undefined;
-	}>();
-
-	onMount(() => (canvas = document.createElement("canvas")));
-
-	async function access_webcam(): Promise<void> {
-		try {
-			stream = await navigator.mediaDevices.getUserMedia({
-				video: true,
-				audio: include_audio
-			});
-			video_source.srcObject = stream;
-			video_source.muted = true;
-			video_source.play();
-		} catch (err) {
-			if (err instanceof DOMException && err.name == "NotAllowedError") {
-				dispatch("error", i18n("image.allow_webcam_access"));
-			} else {
-				throw err;
-			}
-		}
-	}
-
-	function take_picture(): void {
-		var context = canvas.getContext("2d")!;
-
-		if (video_source.videoWidth && video_source.videoHeight) {
-			canvas.width = video_source.videoWidth;
-			canvas.height = video_source.videoHeight;
-			context.drawImage(
-				video_source,
-				0,
-				0,
-				video_source.videoWidth,
-				video_source.videoHeight
-			);
-
-			var data = canvas.toDataURL("image/png");
-			dispatch(streaming ? "stream" : "capture", data);
-		}
-	}
-
-	let recording = false;
-	let recorded_blobs: BlobPart[] = [];
-	let stream: MediaStream;
-	let mimeType: string;
-	let media_recorder: MediaRecorder;
-
-	function take_recording(): void {
-		if (recording) {
-			media_recorder.stop();
-			let video_blob = new Blob(recorded_blobs, { type: mimeType });
-			let ReaderObj = new FileReader();
-			ReaderObj.onload = function (e): void {
-				if (e.target) {
-					dispatch("capture", {
-						data: e.target.result,
-						name: "sample." + mimeType.substring(6),
-						is_example: false,
-						is_file: false
-					});
-					dispatch("stop_recording");
-				}
-			};
-			ReaderObj.readAsDataURL(video_blob);
-		} else {
-			dispatch("start_recording");
-			recorded_blobs = [];
-			let validMimeTypes = ["video/webm", "video/mp4"];
-			for (let validMimeType of validMimeTypes) {
-				if (MediaRecorder.isTypeSupported(validMimeType)) {
-					mimeType = validMimeType;
-					break;
-				}
-			}
-			if (mimeType === null) {
-				console.error("No supported MediaRecorder mimeType");
-				return;
-			}
-			media_recorder = new MediaRecorder(stream, {
-				mimeType: mimeType
-			});
-			media_recorder.addEventListener("dataavailable", function (e) {
-				recorded_blobs.push(e.data);
-			});
-			media_recorder.start(200);
-		}
-		recording = !recording;
-	}
-
-	access_webcam();
-
-	if (streaming && mode === "image") {
-		window.setInterval(() => {
-			if (video_source && !pending) {
-				take_picture();
-			}
-		}, 500);
-	}
-</script>
-
-<div class="wrap">
-	<!-- svelte-ignore a11y-media-has-caption -->
-	<video bind:this={video_source} class:flip={mirror_webcam} />
-	{#if !streaming}
-		<button on:click={mode === "image" ? take_picture : take_recording}>
-			{#if mode === "video"}
-				{#if recording}
-					<div class="icon">
-						<Square />
-					</div>
-				{:else}
-					<div class="icon">
-						<Circle />
-					</div>
-				{/if}
-			{:else}
-				<div class="icon">
-					<Camera />
-				</div>
-			{/if}
-		</button>
-	{/if}
-</div>
-
-<style>
-	.wrap {
-		position: relative;
-		width: var(--size-full);
-		height: var(--size-full);
-		min-height: var(--size-60);
-	}
-
-	video {
-		width: var(--size-full);
-		height: var(--size-full);
-	}
-
-	button {
-		display: flex;
-		position: absolute;
-		right: 0px;
-		bottom: var(--size-2);
-		left: 0px;
-		justify-content: center;
-		align-items: center;
-		margin: auto;
-		box-shadow: var(--shadow-drop-lg);
-		border-radius: var(--radius-xl);
-		background-color: rgba(0, 0, 0, 0.9);
-		width: var(--size-10);
-		height: var(--size-10);
-	}
-
-	@media (--screen-md) {
-		button {
-			bottom: var(--size-4);
-		}
-	}
-
-	@media (--screen-xl) {
-		button {
-			bottom: var(--size-8);
-		}
-	}
-
-	.icon {
-		opacity: 0.8;
-		width: 50%;
-		height: 50%;
-		color: white;
-	}
-
-	.flip {
-		transform: scaleX(-1);
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/interactive/index.ts b/js/preview/test/imageslider/frontend/interactive/index.ts
deleted file mode 100644
index dbae9def8ba49..0000000000000
--- a/js/preview/test/imageslider/frontend/interactive/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Webcam } from "./Webcam.svelte";
-export { default } from "./InteractiveImage.svelte";
diff --git a/js/preview/test/imageslider/frontend/package.json b/js/preview/test/imageslider/frontend/package.json
deleted file mode 100644
index 47718cc42d11c..0000000000000
--- a/js/preview/test/imageslider/frontend/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-	"name": "imageslider",
-	"version": "0.2.1-beta.0",
-	"description": "Gradio UI packages",
-	"type": "module",
-	"main": "./index.svelte",
-	"author": "",
-	"license": "ISC",
-	"private": true,
-	"dependencies": {
-		"@gradio/atoms": "workspace:^",
-		"@gradio/icons": "workspace:^",
-		"@gradio/statustracker": "workspace:^",
-		"@gradio/upload": "workspace:^",
-		"@gradio/utils": "workspace:^",
-		"cropperjs": "^1.5.12",
-		"lazy-brush": "^1.0.1",
-		"resize-observer-polyfill": "^1.5.1"
-	},
-	"main_changeset": true,
-	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
-	}
-}
diff --git a/js/preview/test/imageslider/frontend/shared/utils.ts b/js/preview/test/imageslider/frontend/shared/utils.ts
deleted file mode 100644
index e737479e39f22..0000000000000
--- a/js/preview/test/imageslider/frontend/shared/utils.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const get_coordinates_of_clicked_image = (
-	evt: MouseEvent
-): [number, number] | null => {
-	let image = evt.currentTarget as HTMLImageElement;
-
-	const imageRect = image.getBoundingClientRect();
-	const xScale = image.naturalWidth / imageRect.width;
-	const yScale = image.naturalHeight / imageRect.height;
-	if (xScale > yScale) {
-		const displayed_height = image.naturalHeight / xScale;
-		const y_offset = (imageRect.height - displayed_height) / 2;
-		var x = Math.round((evt.clientX - imageRect.left) * xScale);
-		var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
-	} else {
-		const displayed_width = image.naturalWidth / yScale;
-		const x_offset = (imageRect.width - displayed_width) / 2;
-		var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
-		var y = Math.round((evt.clientY - imageRect.top) * yScale);
-	}
-	if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
-		return null;
-	}
-	return [x, y];
-};
diff --git a/js/preview/test/imageslider/frontend/src/Image.svelte b/js/preview/test/imageslider/frontend/src/Image.svelte
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/js/preview/test/imageslider/frontend/static/ImagePreview.svelte b/js/preview/test/imageslider/frontend/static/ImagePreview.svelte
deleted file mode 100644
index f0c06d1c339f8..0000000000000
--- a/js/preview/test/imageslider/frontend/static/ImagePreview.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import type { SelectData } from "@gradio/utils";
-	import { uploadToHuggingFace } from "@gradio/utils";
-	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
-	import { Download } from "@gradio/icons";
-	import { get_coordinates_of_clicked_image } from "../shared/utils";
-
-	import { Image } from "@gradio/icons";
-	import { type FileData, normalise_file } from "@gradio/upload";
-	import type { I18nFormatter } from "@gradio/utils";
-
-	export let value: null | FileData;
-	let value_: null | FileData;
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-	export let show_download_button = true;
-	export let selectable = false;
-	export let show_share_button = false;
-	export let root: string;
-	export let i18n: I18nFormatter;
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		select: SelectData;
-	}>();
-
-	$: value && dispatch("change", value.data);
-
-	$: if (value !== value_) {
-		value_ = value;
-		normalise_file(value_, root, null);
-	}
-
-	const handle_click = (evt: MouseEvent): void => {
-		let coordinates = get_coordinates_of_clicked_image(evt);
-		if (coordinates) {
-			dispatch("select", { index: coordinates, value: null });
-		}
-	};
-</script>
-
-<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
-{#if value_ === null}
-	<Empty unpadded_box={true} size="large"><Image /></Empty>
-{:else}
-	<div class="icon-buttons">
-		{#if show_download_button}
-			<a
-				href={value_.data}
-				target={window.__is_colab__ ? "_blank" : null}
-				download={"image"}
-			>
-				<IconButton Icon={Download} label={i18n("common.download")} />
-			</a>
-		{/if}
-		{#if show_share_button}
-			<ShareButton
-				{i18n}
-				on:share
-				on:error
-				formatter={async (value) => {
-					if (!value) return "";
-					let url = await uploadToHuggingFace(value, "base64");
-					return `<img src="${url}" />`;
-				}}
-				{value}
-			/>
-		{/if}
-	</div>
-	<!-- TODO: fix -->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-	<img src={value_.data} alt="" class:selectable on:click={handle_click} />
-{/if}
-
-<style>
-	img {
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-	}
-
-	.selectable {
-		cursor: crosshair;
-	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
-</style>
diff --git a/js/preview/test/imageslider/frontend/static/StaticImage.svelte b/js/preview/test/imageslider/frontend/static/StaticImage.svelte
deleted file mode 100644
index 30cae5f8138f4..0000000000000
--- a/js/preview/test/imageslider/frontend/static/StaticImage.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import StaticImage from "./ImagePreview.svelte";
-
-	import { Block } from "@gradio/atoms";
-
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "js/upload/src";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value: null | FileData = null;
-	export let label: string;
-	export let show_label: boolean;
-	export let show_download_button: boolean;
-	export let root: string;
-
-	export let height: number | undefined;
-	export let width: number | undefined;
-
-	export let selectable = false;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let show_share_button = false;
-	export let gradio: Gradio<{
-		change: never;
-		error: string;
-		select: SelectData;
-		share: ShareData;
-	}>;
-
-	$: value, gradio.dispatch("change");
-	let dragging: boolean;
-
-	$: value = !value ? null : value;
-</script>
-
-<Block
-	{visible}
-	variant={"solid"}
-	border_mode={dragging ? "focus" : "base"}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	height={height || undefined}
-	{width}
-	allow_overflow={false}
-	{container}
-	{scale}
-	{min_width}
->
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
-	<StaticImage
-		on:select={({ detail }) => gradio.dispatch("select", detail)}
-		on:share={({ detail }) => gradio.dispatch("share", detail)}
-		on:error={({ detail }) => gradio.dispatch("error", detail)}
-		{root}
-		{value}
-		{label}
-		{show_label}
-		{show_download_button}
-		{selectable}
-		{show_share_button}
-		i18n={gradio.i18n}
-	/>
-</Block>
diff --git a/js/preview/test/imageslider/frontend/static/index.ts b/js/preview/test/imageslider/frontend/static/index.ts
deleted file mode 100644
index 8d950f3e426fd..0000000000000
--- a/js/preview/test/imageslider/frontend/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticImage.svelte";
diff --git a/js/preview/test/imageslider/pyproject.toml b/js/preview/test/imageslider/pyproject.toml
deleted file mode 100644
index 5c39ab3f4e0a2..0000000000000
--- a/js/preview/test/imageslider/pyproject.toml
+++ /dev/null
@@ -1,40 +0,0 @@
-[build-system]
-requires = ["hatchling", "hatch-requirements-txt", "hatch-fancy-pypi-readme>=22.5.0"]
-build-backend = "hatchling.build"
-
-[project]
-name = "imageslider"
-version = "0.0.1"
-description = "Python library for easily interacting with trained machine learning models"
-license = "Apache-2.0"
-requires-python = ">=3.8"
-authors = [
-  { name = "YOUR NAME", email = "YOUREMAIL@domain.com" },
-]
-keywords = ["machine learning", "reproducibility", "visualization"]
-# Add dependencies here
-dependencies = []
-classifiers = [
-  'Development Status :: 3 - Alpha',
-  'License :: OSI Approved :: Apache Software License',
-  'Operating System :: OS Independent',
-  'Programming Language :: Python :: 3',
-  'Programming Language :: Python :: 3 :: Only',
-  'Programming Language :: Python :: 3.8',
-  'Programming Language :: Python :: 3.9',
-  'Programming Language :: Python :: 3.10',
-  'Programming Language :: Python :: 3.11',
-  'Topic :: Scientific/Engineering',
-  'Topic :: Scientific/Engineering :: Artificial Intelligence',
-  'Topic :: Scientific/Engineering :: Visualization',
-]
-
-[tool.hatch.build]
-artifacts = [
-  "/backend/imageslider/templates",
-  "*.pyi"
-]
-packages = ["/backend/imageslider"]
-
-[tool.hatch.metadata]
-allow-direct-references = true
\ No newline at end of file
diff --git a/js/preview/test/newnewtext/.gitignore b/js/preview/test/newnewtext/.gitignore
deleted file mode 100644
index 80a3eb23390b7..0000000000000
--- a/js/preview/test/newnewtext/.gitignore
+++ /dev/null
@@ -1,10 +0,0 @@
-# Python build
-.eggs/
-dist/
-*.pyc
-__pycache__/
-*.py[cod]
-*$py.class
-__tmp/*
-*.pyi
-templates/
\ No newline at end of file
diff --git a/js/preview/test/newnewtext/backend/newnewtext/__init__.py b/js/preview/test/newnewtext/backend/newnewtext/__init__.py
deleted file mode 100644
index 4c7b7a5942bd6..0000000000000
--- a/js/preview/test/newnewtext/backend/newnewtext/__init__.py
+++ /dev/null
@@ -1,4 +0,0 @@
-
-from .newnewtext import NewNewText
-
-__all__ = ['NewNewText']
diff --git a/js/preview/test/newnewtext/backend/newnewtext/newnewtext.py b/js/preview/test/newnewtext/backend/newnewtext/newnewtext.py
deleted file mode 100644
index 68745b63862cf..0000000000000
--- a/js/preview/test/newnewtext/backend/newnewtext/newnewtext.py
+++ /dev/null
@@ -1,196 +0,0 @@
-"""gr.Textbox() component."""
-
-from __future__ import annotations
-
-from typing import Any, Callable, Literal
-
-from gradio_client.documentation import document, set_documentation_group
-
-from gradio.components.base import (
-    Component,
-    FormComponent,
-    _Keywords,
-)
-from gradio.events import Events
-
-set_documentation_group("component")
-
-
-@document()
-class NewNewText(FormComponent):
-    """
-    Creates a textarea for user to enter string input or display string output.
-    Preprocessing: passes textarea value as a {str} into the function.
-    Postprocessing: expects a {str} returned from function and sets textarea value to it.
-    Examples-format: a {str} representing the textbox input.
-
-    Demos: hello_world, diff_texts, sentence_builder
-    Guides: creating-a-chatbot, real-time-speech-recognition
-    """
-
-    EVENTS = [Events.change, Events.input, Events.select, Events.submit, Events.focus]
-
-    def __init__(
-        self,
-        value: str | Callable | None = "",
-        *,
-        lines: int = 1,
-        max_lines: int = 20,
-        placeholder: str | None = None,
-        label: str | None = None,
-        info: str | None = None,
-        every: float | None = None,
-        show_label: bool | None = None,
-        container: bool = True,
-        scale: int | None = None,
-        min_width: int = 160,
-        interactive: bool | None = None,
-        visible: bool = True,
-        elem_id: str | None = None,
-        autofocus: bool = False,
-        elem_classes: list[str] | str | None = None,
-        type: Literal["text", "password", "email"] = "text",
-        text_align: Literal["left", "right"] | None = None,
-        rtl: bool = False,
-        show_copy_button: bool = False,
-        **kwargs,
-    ):
-        """
-        Parameters:
-            value: default text to provide in textarea. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            lines: minimum number of line rows to provide in textarea.
-            max_lines: maximum number of line rows to provide in textarea.
-            placeholder: placeholder hint to provide behind textarea.
-            label: component name in interface.
-            info: additional component description.
-            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.
-            container: If True, will place the component in a container - providing some extra padding around the border.
-            scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
-            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.
-            interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. 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.
-            autofocus: If True, will focus on the textbox when the page loads.
-            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.
-            root_url: The remote URL that of the Gradio app that this component belongs to. Used in `gr.load()`. Should not be set manually.
-            type: The type of textbox. One of: 'text', 'password', 'email', Default is 'text'.
-            text_align: How to align the text in the textbox, can be: "left", "right", or None (default). If None, the alignment is left if `rtl` is False, or right if `rtl` is True. Can only be changed if `type` is "text".
-            rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
-            show_copy_button: If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True.
-        """
-        if type not in ["text", "password", "email"]:
-            raise ValueError('`type` must be one of "text", "password", or "email".')
-
-        self.lines = lines
-        if type == "text":
-            self.max_lines = max(lines, max_lines)
-        else:
-            self.max_lines = 1
-        self.placeholder = placeholder
-        self.show_copy_button = show_copy_button
-        self.autofocus = autofocus
-        super().__init__(
-            label=label,
-            info=info,
-            every=every,
-            show_label=show_label,
-            container=container,
-            scale=scale,
-            min_width=min_width,
-            interactive=interactive,
-            visible=visible,
-            elem_id=elem_id,
-            elem_classes=elem_classes,
-            render=render,
-            root_url=root_url,
-            _skip_init_processing=_skip_init_processing,
-            value=value,
-            **kwargs,
-        )
-        self.type = type
-        self.rtl = rtl
-        self.text_align = text_align
-
-    def get_config(self):
-        return {
-            "lines": self.lines,
-            "max_lines": self.max_lines,
-            "placeholder": self.placeholder,
-            "value": self.value,
-            "type": self.type,
-            "autofocus": self.autofocus,
-            "show_copy_button": self.show_copy_button,
-            "container": self.container,
-            "text_align": self.text_align,
-            "rtl": self.rtl,
-            **Component.get_config(self),
-        }
-
-    @staticmethod
-    def update(
-        value: str | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
-        lines: int | None = None,
-        max_lines: int | None = None,
-        placeholder: str | None = None,
-        label: str | None = None,
-        info: str | None = None,
-        show_label: bool | None = None,
-        container: bool | None = None,
-        scale: int | None = None,
-        min_width: int | None = None,
-        visible: bool | None = None,
-        interactive: bool | None = None,
-        type: Literal["text", "password", "email"] | None = None,
-        text_align: Literal["left", "right"] | None = None,
-        rtl: bool | None = None,
-        show_copy_button: bool | None = None,
-        autofocus: bool | None = None,
-    ):
-        return {
-            "lines": lines,
-            "max_lines": max_lines,
-            "placeholder": placeholder,
-            "label": label,
-            "info": info,
-            "show_label": show_label,
-            "container": container,
-            "scale": scale,
-            "min_width": min_width,
-            "visible": visible,
-            "value": value,
-            "type": type,
-            "interactive": interactive,
-            "show_copy_button": show_copy_button,
-            "autofocus": autofocus,
-            "text_align": text_align,
-            "rtl": rtl,
-            "__type__": "update",
-        }
-
-    def preprocess(self, x: str | None) -> str | None:
-        """
-        Preprocesses input (converts it to a string) before passing it to the function.
-        Parameters:
-            x: text
-        Returns:
-            text
-        """
-        return None if x is None else str(x)
-
-    def postprocess(self, y: str | None) -> str | None:
-        """
-        Postproccess the function output y by converting it to a str before passing it to the frontend.
-        Parameters:
-            y: function output to postprocess.
-        Returns:
-            text
-        """
-        return None if y is None else str(y)
-
-    def api_info(self) -> dict[str, list[str]]:
-        return {"type": "string"}
-
-    def example_inputs(self) -> Any:
-        return "Hello!!"
diff --git a/js/preview/test/newnewtext/demo/__init__.py b/js/preview/test/newnewtext/demo/__init__.py
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/js/preview/test/newnewtext/demo/app.py b/js/preview/test/newnewtext/demo/app.py
deleted file mode 100644
index 9d96f3fb5f23d..0000000000000
--- a/js/preview/test/newnewtext/demo/app.py
+++ /dev/null
@@ -1,7 +0,0 @@
-import gradio as gr
-from newnewtext import NewNewText
-
-with gr.Blocks() as demo:
-    NewNewText()
-
-demo.launch()
diff --git a/js/preview/test/newnewtext/frontend/CHANGELOG.md b/js/preview/test/newnewtext/frontend/CHANGELOG.md
deleted file mode 100644
index 91858c7794976..0000000000000
--- a/js/preview/test/newnewtext/frontend/CHANGELOG.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# newnewtext
-
-## 0.2.0-beta.0
-
-### Features
-
-- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`85ba6de13`](https://github.com/gradio-app/gradio/commit/85ba6de136a45b3e92c74e410bb27e3cbe7138d7) - Adds the ability to build the frontend and backend of custom components in preparation for publishing to pypi using `gradio_component build`.  Thanks [@pngwn](https://github.com/pngwn)!
\ No newline at end of file
diff --git a/js/preview/test/newnewtext/frontend/example/Textbox.svelte b/js/preview/test/newnewtext/frontend/example/Textbox.svelte
deleted file mode 100644
index 1fdf7500fa285..0000000000000
--- a/js/preview/test/newnewtext/frontend/example/Textbox.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-
-	export let value: string;
-	export let type: "gallery" | "table";
-	export let selected = false;
-
-	let size: number;
-	let el: HTMLDivElement;
-
-	function set_styles(element: HTMLElement, el_width: number): void {
-		if (!element || !el_width) return;
-		el.style.setProperty(
-			"--local-text-width",
-			`${el_width < 150 ? el_width : 200}px`
-		);
-		el.style.whiteSpace = "unset";
-	}
-
-	onMount(() => {
-		set_styles(el, size);
-	});
-</script>
-
-<div
-	bind:clientWidth={size}
-	bind:this={el}
-	class:table={type === "table"}
-	class:gallery={type === "gallery"}
-	class:selected
->
-	{value}
-</div>
-
-<style>
-	.gallery {
-		padding: var(--size-1) var(--size-2);
-	}
-
-	div {
-		overflow: hidden;
-		min-width: var(--local-text-width);
-
-		white-space: nowrap;
-	}
-</style>
diff --git a/js/preview/test/newnewtext/frontend/example/index.ts b/js/preview/test/newnewtext/frontend/example/index.ts
deleted file mode 100644
index 42397adf0d930..0000000000000
--- a/js/preview/test/newnewtext/frontend/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Textbox.svelte";
diff --git a/js/preview/test/newnewtext/frontend/interactive/InteractiveTextbox.svelte b/js/preview/test/newnewtext/frontend/interactive/InteractiveTextbox.svelte
deleted file mode 100644
index 47226d4eebe2b..0000000000000
--- a/js/preview/test/newnewtext/frontend/interactive/InteractiveTextbox.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { createEventDispatcher } from "svelte";
-
-	import TextBox from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>();
-
-	export let gradio: Gradio<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>;
-	export let label = "Textbox";
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = "";
-	export let lines: number;
-	export let placeholder = "";
-	export let show_label: boolean;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let show_copy_button = false;
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	{scale}
-	{min_width}
-	allow_overflow={false}
-	padding={container}
->
-	{#if loading_status}
-		<StatusTracker i18n={gradio.i18n} {...loading_status} />
-	{/if}
-
-	<TextBox
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{lines}
-		{type}
-		{rtl}
-		{text_align}
-		max_lines={!max_lines ? lines + 1 : max_lines}
-		{placeholder}
-		{show_copy_button}
-		{autofocus}
-		{container}
-		on:change={() => gradio.dispatch("change", value)}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-	/>
-</Block>
diff --git a/js/preview/test/newnewtext/frontend/interactive/index.ts b/js/preview/test/newnewtext/frontend/interactive/index.ts
deleted file mode 100644
index a036461c736fd..0000000000000
--- a/js/preview/test/newnewtext/frontend/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveTextbox.svelte";
diff --git a/js/preview/test/newnewtext/frontend/package.json b/js/preview/test/newnewtext/frontend/package.json
deleted file mode 100644
index b188ca12a0d4c..0000000000000
--- a/js/preview/test/newnewtext/frontend/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-	"name": "newnewtext",
-	"version": "0.2.0-beta.0",
-	"description": "Gradio UI packages",
-	"type": "module",
-	"main": "index.svelte",
-	"author": "",
-	"license": "ISC",
-	"private": true,
-	"main_changeset": true,
-	"exports": {
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
-	},
-	"dependencies": {
-		"@gradio/atoms": "workspace:^",
-		"@gradio/icons": "workspace:^",
-		"@gradio/statustracker": "workspace:^",
-		"@gradio/utils": "workspace:^"
-	}
-}
diff --git a/js/preview/test/newnewtext/frontend/shared/Dynamic.svelte b/js/preview/test/newnewtext/frontend/shared/Dynamic.svelte
deleted file mode 100644
index 21555e35dbcba..0000000000000
--- a/js/preview/test/newnewtext/frontend/shared/Dynamic.svelte
+++ /dev/null
@@ -1,296 +0,0 @@
-<script lang="ts">
-	import { afterUpdate, createEventDispatcher, tick } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-	import { Copy, Check } from "@gradio/icons";
-	import { fade } from "svelte/transition";
-	import type { SelectData } from "@gradio/utils";
-
-	import("./test").then((m) => {
-		m.fn();
-	});
-
-	export let value = "";
-	export let value_is_output = false;
-	export let lines = 1;
-	export let placeholder = "Type here...";
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let disabled = false;
-	export let show_label = true;
-	export let container = true;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let show_copy_button = false;
-	export let rtl = false;
-	export let autofocus = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-
-	let el: HTMLTextAreaElement | HTMLInputElement;
-	let copied = false;
-	let timer: NodeJS.Timeout;
-
-	$: value, el && lines !== max_lines && resize({ target: el });
-
-	$: if (value === null) value = "";
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: undefined;
-		blur: undefined;
-		select: SelectData;
-		input: undefined;
-		focus: undefined;
-	}>();
-
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
-
-	async function handle_copy(): Promise<void> {
-		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(value);
-			copy_feedback();
-		}
-	}
-
-	function copy_feedback(): void {
-		copied = true;
-		if (timer) clearTimeout(timer);
-		timer = setTimeout(() => {
-			copied = false;
-		}, 1000);
-	}
-
-	function handle_select(event: Event): void {
-		const target: HTMLTextAreaElement | HTMLInputElement = event.target as
-			| HTMLTextAreaElement
-			| HTMLInputElement;
-		const text = target.value;
-		const index: [number, number] = [
-			target.selectionStart as number,
-			target.selectionEnd as number
-		];
-		dispatch("select", { value: text.substring(...index), index: index });
-	}
-
-	async function handle_keypress(e: KeyboardEvent): Promise<void> {
-		await tick();
-		if (e.key === "Enter" && e.shiftKey && lines > 1) {
-			e.preventDefault();
-			dispatch("submit");
-		} else if (
-			e.key === "Enter" &&
-			!e.shiftKey &&
-			lines === 1 &&
-			max_lines >= 1
-		) {
-			e.preventDefault();
-			dispatch("submit");
-		}
-	}
-
-	async function resize(
-		event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
-	): Promise<void> {
-		await tick();
-		if (lines === max_lines || !container) return;
-
-		let max =
-			max_lines === undefined
-				? false
-				: max_lines === undefined // default
-				? 21 * 11
-				: 21 * (max_lines + 1);
-		let min = 21 * (lines + 1);
-
-		const target = event.target as HTMLTextAreaElement;
-		target.style.height = "1px";
-
-		let scroll_height;
-		if (max && target.scrollHeight > max) {
-			scroll_height = max;
-		} else if (target.scrollHeight < min) {
-			scroll_height = min;
-		} else {
-			scroll_height = target.scrollHeight;
-		}
-
-		target.style.height = `${scroll_height}px`;
-	}
-
-	function text_area_resize(
-		_el: HTMLTextAreaElement,
-		_value: string
-	): any | undefined {
-		if (lines === max_lines) return;
-		_el.style.overflowY = "scroll";
-		_el.addEventListener("input", resize);
-
-		if (!_value.trim()) return;
-		resize({ target: _el });
-
-		return {
-			destroy: () => _el.removeEventListener("input", resize)
-		};
-	}
-</script>
-
-<!-- svelte-ignore a11y-autofocus -->
-<label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
-
-	{#if lines === 1 && max_lines === 1}
-		{#if type === "text"}
-			<input
-				data-testid="textbox"
-				type="text"
-				class="scroll-hide"
-				dir={rtl ? "rtl" : "ltr"}
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				style={text_align ? "text-align: " + text_align : ""}
-			/>
-		{:else if type === "password"}
-			<input
-				data-testid="password"
-				type="password"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete=""
-			/>
-		{:else if type === "email"}
-			<input
-				data-testid="textbox"
-				type="email"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete="email"
-			/>
-		{/if}
-	{:else}
-		{#if show_label && show_copy_button}
-			{#if copied}
-				<button in:fade={{ duration: 300 }}><Check /></button>
-			{:else}
-				<button on:click={handle_copy} class="copy-text"><Copy /></button>
-			{/if}
-		{/if}
-		<textarea
-			data-testid="textbox"
-			use:text_area_resize={value}
-			class="scroll-hide"
-			dir={rtl ? "rtl" : "ltr"}
-			bind:value
-			bind:this={el}
-			{placeholder}
-			rows={lines}
-			{disabled}
-			{autofocus}
-			on:keypress={handle_keypress}
-			on:blur
-			on:select={handle_select}
-			on:focus
-			style={text_align ? "text-align: " + text_align : ""}
-		/>
-	{/if}
-</label>
-
-<style>
-	label {
-		display: block;
-		width: 100%;
-	}
-
-	input,
-	textarea {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		background: var(--input-background-fill);
-		padding: var(--input-padding);
-		width: 100%;
-		color: var(--body-text-color);
-		font-weight: var(--input-text-weight);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-		border: none;
-	}
-	label:not(.container),
-	label:not(.container) > input,
-	label:not(.container) > textarea {
-		height: 100%;
-	}
-	.container > input,
-	.container > textarea {
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-	}
-	input:disabled,
-	textarea:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input:focus,
-	textarea:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--input-placeholder-color);
-	}
-	button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
-</style>
diff --git a/js/preview/test/newnewtext/frontend/shared/Textbox.svelte b/js/preview/test/newnewtext/frontend/shared/Textbox.svelte
deleted file mode 100644
index e38f66599a702..0000000000000
--- a/js/preview/test/newnewtext/frontend/shared/Textbox.svelte
+++ /dev/null
@@ -1,300 +0,0 @@
-<script lang="ts">
-	import { afterUpdate, createEventDispatcher, tick } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-	import { Copy, Check } from "@gradio/icons";
-	import { fade } from "svelte/transition";
-	import type { SelectData } from "@gradio/utils";
-
-	import("./test").then((m) => {
-		m.fn();
-	});
-
-	import("./Dynamic.svelte").then((m) => {
-		console.log(m);
-	});
-
-	export let value = "";
-	export let value_is_output = false;
-	export let lines = 1;
-	export let placeholder = "Type here...";
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let disabled = false;
-	export let show_label = true;
-	export let container = true;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let show_copy_button = false;
-	export let rtl = false;
-	export let autofocus = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-
-	let el: HTMLTextAreaElement | HTMLInputElement;
-	let copied = false;
-	let timer: NodeJS.Timeout;
-
-	$: value, el && lines !== max_lines && resize({ target: el });
-
-	$: if (value === null) value = "";
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: undefined;
-		blur: undefined;
-		select: SelectData;
-		input: undefined;
-		focus: undefined;
-	}>();
-
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
-
-	async function handle_copy(): Promise<void> {
-		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(value);
-			copy_feedback();
-		}
-	}
-
-	function copy_feedback(): void {
-		copied = true;
-		if (timer) clearTimeout(timer);
-		timer = setTimeout(() => {
-			copied = false;
-		}, 1000);
-	}
-
-	function handle_select(event: Event): void {
-		const target: HTMLTextAreaElement | HTMLInputElement = event.target as
-			| HTMLTextAreaElement
-			| HTMLInputElement;
-		const text = target.value;
-		const index: [number, number] = [
-			target.selectionStart as number,
-			target.selectionEnd as number
-		];
-		dispatch("select", { value: text.substring(...index), index: index });
-	}
-
-	async function handle_keypress(e: KeyboardEvent): Promise<void> {
-		await tick();
-		if (e.key === "Enter" && e.shiftKey && lines > 1) {
-			e.preventDefault();
-			dispatch("submit");
-		} else if (
-			e.key === "Enter" &&
-			!e.shiftKey &&
-			lines === 1 &&
-			max_lines >= 1
-		) {
-			e.preventDefault();
-			dispatch("submit");
-		}
-	}
-
-	async function resize(
-		event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
-	): Promise<void> {
-		await tick();
-		if (lines === max_lines || !container) return;
-
-		let max =
-			max_lines === undefined
-				? false
-				: max_lines === undefined // default
-				? 21 * 11
-				: 21 * (max_lines + 1);
-		let min = 21 * (lines + 1);
-
-		const target = event.target as HTMLTextAreaElement;
-		target.style.height = "1px";
-
-		let scroll_height;
-		if (max && target.scrollHeight > max) {
-			scroll_height = max;
-		} else if (target.scrollHeight < min) {
-			scroll_height = min;
-		} else {
-			scroll_height = target.scrollHeight;
-		}
-
-		target.style.height = `${scroll_height}px`;
-	}
-
-	function text_area_resize(
-		_el: HTMLTextAreaElement,
-		_value: string
-	): any | undefined {
-		if (lines === max_lines) return;
-		_el.style.overflowY = "scroll";
-		_el.addEventListener("input", resize);
-
-		if (!_value.trim()) return;
-		resize({ target: _el });
-
-		return {
-			destroy: () => _el.removeEventListener("input", resize)
-		};
-	}
-</script>
-
-<!-- svelte-ignore a11y-autofocus -->
-<label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
-
-	{#if lines === 1 && max_lines === 1}
-		{#if type === "text"}
-			<input
-				data-testid="textbox"
-				type="text"
-				class="scroll-hide"
-				dir={rtl ? "rtl" : "ltr"}
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				style={text_align ? "text-align: " + text_align : ""}
-			/>
-		{:else if type === "password"}
-			<input
-				data-testid="password"
-				type="password"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete=""
-			/>
-		{:else if type === "email"}
-			<input
-				data-testid="textbox"
-				type="email"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete="email"
-			/>
-		{/if}
-	{:else}
-		{#if show_label && show_copy_button}
-			{#if copied}
-				<button in:fade={{ duration: 300 }}><Check /></button>
-			{:else}
-				<button on:click={handle_copy} class="copy-text"><Copy /></button>
-			{/if}
-		{/if}
-		<textarea
-			data-testid="textbox"
-			use:text_area_resize={value}
-			class="scroll-hide"
-			dir={rtl ? "rtl" : "ltr"}
-			bind:value
-			bind:this={el}
-			{placeholder}
-			rows={lines}
-			{disabled}
-			{autofocus}
-			on:keypress={handle_keypress}
-			on:blur
-			on:select={handle_select}
-			on:focus
-			style={text_align ? "text-align: " + text_align : ""}
-		/>
-	{/if}
-</label>
-
-<style>
-	label {
-		display: block;
-		width: 100%;
-	}
-
-	input,
-	textarea {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		background: var(--input-background-fill);
-		padding: var(--input-padding);
-		width: 100%;
-		color: var(--body-text-color);
-		font-weight: var(--input-text-weight);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-		border: none;
-	}
-	label:not(.container),
-	label:not(.container) > input,
-	label:not(.container) > textarea {
-		height: 100%;
-	}
-	.container > input,
-	.container > textarea {
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-	}
-	input:disabled,
-	textarea:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input:focus,
-	textarea:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--input-placeholder-color);
-	}
-	button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
-</style>
diff --git a/js/preview/test/newnewtext/frontend/shared/index.ts b/js/preview/test/newnewtext/frontend/shared/index.ts
deleted file mode 100644
index 42397adf0d930..0000000000000
--- a/js/preview/test/newnewtext/frontend/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Textbox.svelte";
diff --git a/js/preview/test/newnewtext/frontend/shared/test.ts b/js/preview/test/newnewtext/frontend/shared/test.ts
deleted file mode 100644
index c4457b82f5911..0000000000000
--- a/js/preview/test/newnewtext/frontend/shared/test.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const fn = () => console.log("hello");
diff --git a/js/preview/test/newnewtext/frontend/static/StaticTextbox.svelte b/js/preview/test/newnewtext/frontend/static/StaticTextbox.svelte
deleted file mode 100644
index 0dd48cab946b0..0000000000000
--- a/js/preview/test/newnewtext/frontend/static/StaticTextbox.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import TextBox from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>;
-	export let label = "Textbox";
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = "";
-	export let lines: number;
-	export let placeholder = "";
-	export let show_label: boolean;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let show_copy_button = false;
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	{scale}
-	{min_width}
-	allow_overflow={false}
-	padding={container}
->
-	{#if loading_status}
-		<StatusTracker i18n={gradio.i18n} {...loading_status} />
-	{/if}
-
-	<TextBox
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{lines}
-		{type}
-		{rtl}
-		{text_align}
-		max_lines={!max_lines ? lines + 1 : max_lines}
-		{placeholder}
-		{show_copy_button}
-		{autofocus}
-		{container}
-		on:change={() => gradio.dispatch("change", value)}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-		disabled
-	/>
-</Block>
diff --git a/js/preview/test/newnewtext/frontend/static/index.ts b/js/preview/test/newnewtext/frontend/static/index.ts
deleted file mode 100644
index 52f5da4ebc99b..0000000000000
--- a/js/preview/test/newnewtext/frontend/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticTextbox.svelte";
diff --git a/js/preview/test/newtext/.gitignore b/js/preview/test/newtext/.gitignore
deleted file mode 100644
index 4162e6e9956a3..0000000000000
--- a/js/preview/test/newtext/.gitignore
+++ /dev/null
@@ -1,9 +0,0 @@
-# Python build
-.eggs/
-dist/
-*.pyc
-__pycache__/
-*.py[cod]
-*$py.class
-__tmp/*
-*.pyi
\ No newline at end of file
diff --git a/js/preview/test/newtext/backend/newtext/__init__.py b/js/preview/test/newtext/backend/newtext/__init__.py
deleted file mode 100644
index bd88007e8da55..0000000000000
--- a/js/preview/test/newtext/backend/newtext/__init__.py
+++ /dev/null
@@ -1,4 +0,0 @@
-
-from .newtext import NewText
-
-__all__ = ['NewText']
diff --git a/js/preview/test/newtext/backend/newtext/newtext.py b/js/preview/test/newtext/backend/newtext/newtext.py
deleted file mode 100644
index a72e51346a151..0000000000000
--- a/js/preview/test/newtext/backend/newtext/newtext.py
+++ /dev/null
@@ -1,21 +0,0 @@
-import gradio as gr
-
-class NewText(gr.components.Component):
-    
-    def preprocess(self, x):
-        return x
-    
-    def postprocess(self, x):
-        return x
-    
-    def get_config(self):
-        return {
-            "value": self.value,
-            **gr.components.Component.get_config(self),
-        }
-
-    def example_inputs(self):
-        return {'foo': 'bar'}
-
-    def api_info(self):
-        return {'type': {}, 'description': 'any valid json'}
\ No newline at end of file
diff --git a/js/preview/test/newtext/demo/__init__.py b/js/preview/test/newtext/demo/__init__.py
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/js/preview/test/newtext/demo/app.py b/js/preview/test/newtext/demo/app.py
deleted file mode 100644
index 70cd4b25e71bf..0000000000000
--- a/js/preview/test/newtext/demo/app.py
+++ /dev/null
@@ -1,10 +0,0 @@
-
-import gradio as gr
-from newtext import NewText
-
-with gr.Blocks() as demo:
-    NewText(interactive=True)
-    NewText(interactive=False)
-    
-
-demo.launch()
diff --git a/js/preview/test/newtext/frontend/CHANGELOG.md b/js/preview/test/newtext/frontend/CHANGELOG.md
deleted file mode 100644
index 41d84b29d990f..0000000000000
--- a/js/preview/test/newtext/frontend/CHANGELOG.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# newtext
-
-## 0.1.0-beta.0
-
-### Features
-
-- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files.  Thanks [@pngwn](https://github.com/pngwn)!
\ No newline at end of file
diff --git a/js/preview/test/newtext/frontend/example/Textbox.svelte b/js/preview/test/newtext/frontend/example/Textbox.svelte
deleted file mode 100644
index 1fdf7500fa285..0000000000000
--- a/js/preview/test/newtext/frontend/example/Textbox.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-
-	export let value: string;
-	export let type: "gallery" | "table";
-	export let selected = false;
-
-	let size: number;
-	let el: HTMLDivElement;
-
-	function set_styles(element: HTMLElement, el_width: number): void {
-		if (!element || !el_width) return;
-		el.style.setProperty(
-			"--local-text-width",
-			`${el_width < 150 ? el_width : 200}px`
-		);
-		el.style.whiteSpace = "unset";
-	}
-
-	onMount(() => {
-		set_styles(el, size);
-	});
-</script>
-
-<div
-	bind:clientWidth={size}
-	bind:this={el}
-	class:table={type === "table"}
-	class:gallery={type === "gallery"}
-	class:selected
->
-	{value}
-</div>
-
-<style>
-	.gallery {
-		padding: var(--size-1) var(--size-2);
-	}
-
-	div {
-		overflow: hidden;
-		min-width: var(--local-text-width);
-
-		white-space: nowrap;
-	}
-</style>
diff --git a/js/preview/test/newtext/frontend/example/index.ts b/js/preview/test/newtext/frontend/example/index.ts
deleted file mode 100644
index ccf7b447f6d29..0000000000000
--- a/js/preview/test/newtext/frontend/example/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./newtext.svelte";
diff --git a/js/preview/test/newtext/frontend/example/newtext.svelte b/js/preview/test/newtext/frontend/example/newtext.svelte
deleted file mode 100644
index 2ccd9894d9605..0000000000000
--- a/js/preview/test/newtext/frontend/example/newtext.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { JsonView } from "@zerodevx/svelte-json-view";
-
-	export let value: any = {};
-</script>
-
-<JsonView json={value} />
diff --git a/js/preview/test/newtext/frontend/interactive/InteractiveTextbox.svelte b/js/preview/test/newtext/frontend/interactive/InteractiveTextbox.svelte
deleted file mode 100644
index 47226d4eebe2b..0000000000000
--- a/js/preview/test/newtext/frontend/interactive/InteractiveTextbox.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { createEventDispatcher } from "svelte";
-
-	import TextBox from "../shared";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>();
-
-	export let gradio: Gradio<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>;
-	export let label = "Textbox";
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = "";
-	export let lines: number;
-	export let placeholder = "";
-	export let show_label: boolean;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let show_copy_button = false;
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	{scale}
-	{min_width}
-	allow_overflow={false}
-	padding={container}
->
-	{#if loading_status}
-		<StatusTracker i18n={gradio.i18n} {...loading_status} />
-	{/if}
-
-	<TextBox
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{lines}
-		{type}
-		{rtl}
-		{text_align}
-		max_lines={!max_lines ? lines + 1 : max_lines}
-		{placeholder}
-		{show_copy_button}
-		{autofocus}
-		{container}
-		on:change={() => gradio.dispatch("change", value)}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-	/>
-</Block>
diff --git a/js/preview/test/newtext/frontend/interactive/index.ts b/js/preview/test/newtext/frontend/interactive/index.ts
deleted file mode 100644
index ccf7b447f6d29..0000000000000
--- a/js/preview/test/newtext/frontend/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./newtext.svelte";
diff --git a/js/preview/test/newtext/frontend/interactive/newtext.svelte b/js/preview/test/newtext/frontend/interactive/newtext.svelte
deleted file mode 100644
index 2ccd9894d9605..0000000000000
--- a/js/preview/test/newtext/frontend/interactive/newtext.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { JsonView } from "@zerodevx/svelte-json-view";
-
-	export let value: any = {};
-</script>
-
-<JsonView json={value} />
diff --git a/js/preview/test/newtext/frontend/package.json b/js/preview/test/newtext/frontend/package.json
deleted file mode 100644
index c2d1cbae87841..0000000000000
--- a/js/preview/test/newtext/frontend/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"name": "newtext",
-	"version": "0.1.0-beta.0",
-	"description": "Custom Component",
-	"type": "module",
-	"main": "./index.svelte",
-	"author": "",
-	"license": "ISC",
-	"private": true,
-	"dependencies": {
-		"@zerodevx/svelte-json-view": "^1.0"
-	},
-	"exports": {
-		".": "./index.svelte",
-		"./package.json": "./package.json",
-		"./interactive": "./interactive/index.ts",
-		"./static": "./static/index.ts",
-		"./example": "./example/index.ts"
-	}
-}
diff --git a/js/preview/test/newtext/frontend/shared/Textbox.svelte b/js/preview/test/newtext/frontend/shared/Textbox.svelte
deleted file mode 100644
index 0829d90e667a9..0000000000000
--- a/js/preview/test/newtext/frontend/shared/Textbox.svelte
+++ /dev/null
@@ -1,293 +0,0 @@
-<script lang="ts">
-	import { afterUpdate, createEventDispatcher, tick } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
-	import { Copy, Check } from "@gradio/icons";
-	import { fade } from "svelte/transition";
-	// import type { SelectData } from "@gradio/utils";
-	// import type { ActionReturn } from "@gradio/tootils";
-
-	export let value = "";
-	export let value_is_output = false;
-	export let lines = 1;
-	export let placeholder = "Type here...";
-	export let label: string;
-	export let info: string | undefined = undefined;
-	export let disabled = false;
-	export let show_label = true;
-	export let container = true;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let show_copy_button = false;
-	export let rtl = false;
-	export let autofocus = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-
-	let el: HTMLTextAreaElement | HTMLInputElement;
-	let copied = false;
-	let timer: NodeJS.Timeout;
-
-	$: value, el && lines !== max_lines && resize({ target: el });
-
-	$: if (value === null) value = "";
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		submit: undefined;
-		blur: undefined;
-		select: SelectData;
-		input: undefined;
-		focus: undefined;
-	}>();
-
-	function handle_change(): void {
-		dispatch("change", value);
-		if (!value_is_output) {
-			dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
-
-	async function handle_copy(): Promise<void> {
-		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(value);
-			copy_feedback();
-		}
-	}
-
-	function copy_feedback(): void {
-		copied = true;
-		if (timer) clearTimeout(timer);
-		timer = setTimeout(() => {
-			copied = false;
-		}, 1000);
-	}
-
-	function handle_select(event: Event): void {
-		const target: HTMLTextAreaElement | HTMLInputElement = event.target as
-			| HTMLTextAreaElement
-			| HTMLInputElement;
-		const text = target.value;
-		const index: [number, number] = [
-			target.selectionStart as number,
-			target.selectionEnd as number
-		];
-		dispatch("select", { value: text.substring(...index), index: index });
-	}
-
-	async function handle_keypress(e: KeyboardEvent): Promise<void> {
-		await tick();
-		if (e.key === "Enter" && e.shiftKey && lines > 1) {
-			e.preventDefault();
-			dispatch("submit");
-		} else if (
-			e.key === "Enter" &&
-			!e.shiftKey &&
-			lines === 1 &&
-			max_lines >= 1
-		) {
-			e.preventDefault();
-			dispatch("submit");
-		}
-	}
-
-	async function resize(
-		event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
-	): Promise<void> {
-		await tick();
-		if (lines === max_lines || !container) return;
-
-		let max =
-			max_lines === undefined
-				? false
-				: max_lines === undefined // default
-				? 21 * 11
-				: 21 * (max_lines + 1);
-		let min = 21 * (lines + 1);
-
-		const target = event.target as HTMLTextAreaElement;
-		target.style.height = "1px";
-
-		let scroll_height;
-		if (max && target.scrollHeight > max) {
-			scroll_height = max;
-		} else if (target.scrollHeight < min) {
-			scroll_height = min;
-		} else {
-			scroll_height = target.scrollHeight;
-		}
-
-		target.style.height = `${scroll_height}px`;
-	}
-
-	function text_area_resize(
-		_el: HTMLTextAreaElement,
-		_value: string
-	): any | undefined {
-		if (lines === max_lines) return;
-		_el.style.overflowY = "scroll";
-		_el.addEventListener("input", resize);
-
-		if (!_value.trim()) return;
-		resize({ target: _el });
-
-		return {
-			destroy: () => _el.removeEventListener("input", resize)
-		};
-	}
-</script>
-
-<!-- svelte-ignore a11y-autofocus -->
-<label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
-
-	{#if lines === 1 && max_lines === 1}
-		{#if type === "text"}
-			<input
-				data-testid="textbox"
-				type="text"
-				class="scroll-hide"
-				dir={rtl ? "rtl" : "ltr"}
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				style={text_align ? "text-align: " + text_align : ""}
-			/>
-		{:else if type === "password"}
-			<input
-				data-testid="password"
-				type="password"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete=""
-			/>
-		{:else if type === "email"}
-			<input
-				data-testid="textbox"
-				type="email"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete="email"
-			/>
-		{/if}
-	{:else}
-		{#if show_label && show_copy_button}
-			{#if copied}
-				<button in:fade={{ duration: 300 }}><Check /></button>
-			{:else}
-				<button on:click={handle_copy} class="copy-text"><Copy /></button>
-			{/if}
-		{/if}
-		<textarea
-			data-testid="textbox"
-			use:text_area_resize={value}
-			class="scroll-hide"
-			dir={rtl ? "rtl" : "ltr"}
-			bind:value
-			bind:this={el}
-			{placeholder}
-			rows={lines}
-			{disabled}
-			{autofocus}
-			on:keypress={handle_keypress}
-			on:blur
-			on:select={handle_select}
-			on:focus
-			style={text_align ? "text-align: " + text_align : ""}
-		/>
-	{/if}
-</label>
-
-<style>
-	label {
-		display: block;
-		width: 100%;
-	}
-
-	input,
-	textarea {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		background: var(--input-background-fill);
-		padding: var(--input-padding);
-		width: 100%;
-		color: var(--body-text-color);
-		font-weight: var(--input-text-weight);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-		border: none;
-	}
-	label:not(.container),
-	label:not(.container) > input,
-	label:not(.container) > textarea {
-		height: 100%;
-	}
-	.container > input,
-	.container > textarea {
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-	}
-	input:disabled,
-	textarea:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input:focus,
-	textarea:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--input-placeholder-color);
-	}
-	button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
-</style>
diff --git a/js/preview/test/newtext/frontend/shared/index.ts b/js/preview/test/newtext/frontend/shared/index.ts
deleted file mode 100644
index ccf7b447f6d29..0000000000000
--- a/js/preview/test/newtext/frontend/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./newtext.svelte";
diff --git a/js/preview/test/newtext/frontend/shared/newtext.svelte b/js/preview/test/newtext/frontend/shared/newtext.svelte
deleted file mode 100644
index 2ccd9894d9605..0000000000000
--- a/js/preview/test/newtext/frontend/shared/newtext.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { JsonView } from "@zerodevx/svelte-json-view";
-
-	export let value: any = {};
-</script>
-
-<JsonView json={value} />
diff --git a/js/preview/test/newtext/frontend/static/StaticTextbox.svelte b/js/preview/test/newtext/frontend/static/StaticTextbox.svelte
deleted file mode 100644
index dfe4907670101..0000000000000
--- a/js/preview/test/newtext/frontend/static/StaticTextbox.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import TextBox from ".";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	export let gradio: Gradio<{
-		change: string;
-		submit: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-	}>;
-	export let label = "Textbox";
-	export let info: string | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let value = "";
-	export let lines: number;
-	export let placeholder = "";
-	export let show_label: boolean;
-	export let max_lines: number;
-	export let type: "text" | "password" | "email" = "text";
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let show_copy_button = false;
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-</script>
-
-<Block
-	{visible}
-	{elem_id}
-	{elem_classes}
-	{scale}
-	{min_width}
-	allow_overflow={false}
-	padding={container}
->
-	{#if loading_status}
-		<StatusTracker i18n={gradio.i18n} {...loading_status} />
-	{/if}
-
-	<TextBox
-		bind:value
-		bind:value_is_output
-		{label}
-		{info}
-		{show_label}
-		{lines}
-		{type}
-		{rtl}
-		{text_align}
-		max_lines={!max_lines ? lines + 1 : max_lines}
-		{placeholder}
-		{show_copy_button}
-		{autofocus}
-		{container}
-		on:change={() => gradio.dispatch("change", value)}
-		on:input={() => gradio.dispatch("input")}
-		on:submit={() => gradio.dispatch("submit")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-		disabled
-	/>
-</Block>
diff --git a/js/preview/test/newtext/frontend/static/index.ts b/js/preview/test/newtext/frontend/static/index.ts
deleted file mode 100644
index ccf7b447f6d29..0000000000000
--- a/js/preview/test/newtext/frontend/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./newtext.svelte";
diff --git a/js/preview/test/newtext/frontend/static/newtext.svelte b/js/preview/test/newtext/frontend/static/newtext.svelte
deleted file mode 100644
index 2ccd9894d9605..0000000000000
--- a/js/preview/test/newtext/frontend/static/newtext.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { JsonView } from "@zerodevx/svelte-json-view";
-
-	export let value: any = {};
-</script>
-
-<JsonView json={value} />
diff --git a/js/preview/test/newtext/pyproject.toml b/js/preview/test/newtext/pyproject.toml
deleted file mode 100644
index f4575586c85a4..0000000000000
--- a/js/preview/test/newtext/pyproject.toml
+++ /dev/null
@@ -1,40 +0,0 @@
-[build-system]
-requires = ["hatchling", "hatch-requirements-txt", "hatch-fancy-pypi-readme>=22.5.0"]
-build-backend = "hatchling.build"
-
-[project]
-name = "newtext"
-version = "0.0.1"
-description = "Python library for easily interacting with trained machine learning models"
-license = "Apache-2.0"
-requires-python = ">=3.8"
-authors = [
-  { name = "YOUR NAME", email = "YOUREMAIL@domain.com" },
-]
-keywords = ["machine learning", "reproducibility", "visualization"]
-# Add dependencies here
-dependencies = []
-classifiers = [
-  'Development Status :: 3 - Alpha',
-  'License :: OSI Approved :: Apache Software License',
-  'Operating System :: OS Independent',
-  'Programming Language :: Python :: 3',
-  'Programming Language :: Python :: 3 :: Only',
-  'Programming Language :: Python :: 3.8',
-  'Programming Language :: Python :: 3.9',
-  'Programming Language :: Python :: 3.10',
-  'Programming Language :: Python :: 3.11',
-  'Topic :: Scientific/Engineering',
-  'Topic :: Scientific/Engineering :: Artificial Intelligence',
-  'Topic :: Scientific/Engineering :: Visualization',
-]
-
-[tool.hatch.build]
-artifacts = [
-  "/backend/newtext/templates",
-  "*.pyi"
-]
-packages = ["/backend/newtext"]
-
-[tool.hatch.metadata]
-allow-direct-references = true
\ No newline at end of file
diff --git a/js/preview/test/imageslider/.gitignore b/js/preview/test/test/.gitignore
similarity index 75%
rename from js/preview/test/imageslider/.gitignore
rename to js/preview/test/test/.gitignore
index 4162e6e9956a3..60188eefb61fa 100644
--- a/js/preview/test/imageslider/.gitignore
+++ b/js/preview/test/test/.gitignore
@@ -1,4 +1,3 @@
-# Python build
 .eggs/
 dist/
 *.pyc
@@ -6,4 +5,5 @@ __pycache__/
 *.py[cod]
 *$py.class
 __tmp/*
-*.pyi
\ No newline at end of file
+*.pyi
+node_modules
\ No newline at end of file
diff --git a/js/preview/test/test/backend/gradio_test/__init__.py b/js/preview/test/test/backend/gradio_test/__init__.py
new file mode 100644
index 0000000000000..50ea907671589
--- /dev/null
+++ b/js/preview/test/test/backend/gradio_test/__init__.py
@@ -0,0 +1,4 @@
+
+from .test import Test
+
+__all__ = ['Test']
diff --git a/js/preview/test/test/backend/gradio_test/test.py b/js/preview/test/test/backend/gradio_test/test.py
new file mode 100644
index 0000000000000..ee340ca1c1c68
--- /dev/null
+++ b/js/preview/test/test/backend/gradio_test/test.py
@@ -0,0 +1,15 @@
+from gradio.components.base import Component
+
+
+class Test(Component):
+    def preprocess(self, x):
+        return x
+
+    def postprocess(self, x):
+        return x
+
+    def example_inputs(self):
+        return {"foo": "bar"}
+
+    def api_info(self):
+        return {"type": {}, "description": "any valid json"}
diff --git a/js/preview/test/imageslider/demo/__init__.py b/js/preview/test/test/demo/__init__.py
similarity index 100%
rename from js/preview/test/imageslider/demo/__init__.py
rename to js/preview/test/test/demo/__init__.py
diff --git a/js/preview/test/test/demo/app.py b/js/preview/test/test/demo/app.py
new file mode 100644
index 0000000000000..021e922fd81e9
--- /dev/null
+++ b/js/preview/test/test/demo/app.py
@@ -0,0 +1,13 @@
+
+import gradio as gr
+from gradio_test import Test
+
+
+example = Test().example_inputs()
+
+with gr.Blocks() as demo:
+    Test(value=example, interactive=True)
+    Test(value=example, interactive=False)
+
+
+demo.launch()
diff --git a/js/preview/test/test/frontend/Example.svelte b/js/preview/test/test/frontend/Example.svelte
new file mode 100644
index 0000000000000..6b6a4a08c938f
--- /dev/null
+++ b/js/preview/test/test/frontend/Example.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>
diff --git a/js/preview/test/test/frontend/Index.svelte b/js/preview/test/test/frontend/Index.svelte
new file mode 100644
index 0000000000000..604245af31bef
--- /dev/null
+++ b/js/preview/test/test/frontend/Index.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { JsonView } from "@zerodevx/svelte-json-view";
+
+	import type { Gradio } from "@gradio/utils";
+	import { Block, Info } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import type { SelectData } from "@gradio/utils";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value = false;
+	// export let value_is_output = false;
+	// export let label = "Checkbox";
+	// export let info: string | undefined = undefined;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let gradio: Gradio<{
+		change: never;
+		select: SelectData;
+		input: never;
+	}>;
+</script>
+
+<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+
+	<JsonView json={value} />
+</Block>
diff --git a/js/preview/test/test/frontend/package-lock.json b/js/preview/test/test/frontend/package-lock.json
new file mode 100644
index 0000000000000..b75a26b4ecfc3
--- /dev/null
+++ b/js/preview/test/test/frontend/package-lock.json
@@ -0,0 +1,1574 @@
+{
+  "name": "gradio_test",
+  "version": "0.2.0-beta.6",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gradio_test",
+      "version": "0.2.0-beta.6",
+      "license": "ISC",
+      "dependencies": {
+        "@gradio/atoms": "0.2.0-beta.4",
+        "@gradio/statustracker": "0.3.0-beta.6",
+        "@gradio/utils": "0.2.0-beta.4",
+        "@zerodevx/svelte-json-view": "^1.0.7"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.5.tgz",
+      "integrity": "sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.5.tgz",
+      "integrity": "sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.5.tgz",
+      "integrity": "sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.5.tgz",
+      "integrity": "sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.5.tgz",
+      "integrity": "sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.5.tgz",
+      "integrity": "sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.5.tgz",
+      "integrity": "sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.5.tgz",
+      "integrity": "sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.5.tgz",
+      "integrity": "sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.5.tgz",
+      "integrity": "sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.5.tgz",
+      "integrity": "sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.5.tgz",
+      "integrity": "sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.5.tgz",
+      "integrity": "sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.5.tgz",
+      "integrity": "sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.5.tgz",
+      "integrity": "sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz",
+      "integrity": "sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.5.tgz",
+      "integrity": "sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.5.tgz",
+      "integrity": "sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.5.tgz",
+      "integrity": "sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.5.tgz",
+      "integrity": "sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.5.tgz",
+      "integrity": "sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz",
+      "integrity": "sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@gradio/atoms": {
+      "version": "0.2.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.2.0-beta.4.tgz",
+      "integrity": "sha512-xZfP9oPmb7iiuGl7KB4vVELSVk9f3w5Y9KRIxkAaMb+oeRpmb5uDtKQPAxntpm0W9rKAZmYG+DIWhInlu1eeKA==",
+      "dependencies": {
+        "@gradio/icons": "^0.2.0-beta.1",
+        "@gradio/utils": "^0.2.0-beta.4"
+      }
+    },
+    "node_modules/@gradio/column": {
+      "version": "0.1.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@gradio/column/-/column-0.1.0-beta.2.tgz",
+      "integrity": "sha512-vL0GECdNL4wAaO/o0JcF3fm2xyMrx5DJWXUiPq/sUwqZwwB95srPGKBVTmVja3HproVXCBEnTzPQmRlrwWK67w=="
+    },
+    "node_modules/@gradio/icons": {
+      "version": "0.2.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.2.0-beta.1.tgz",
+      "integrity": "sha512-6nwP1NIi0u4YQoSoaqC/rY0wuCvJHsnK+8aHDOE37070JpzBGuxB/VUlEgO7trNz5zI/EJy2htIRYsqz1vKmXA=="
+    },
+    "node_modules/@gradio/statustracker": {
+      "version": "0.3.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.3.0-beta.6.tgz",
+      "integrity": "sha512-AIhaMCnr2uibHdqRrs4K8ZUvZK0q5e430TcvoduLOkaoOrkfnqetrHaHdOLNBz+H4kJlXJRsmt7ZZYV4wwMXRQ==",
+      "dependencies": {
+        "@gradio/atoms": "^0.2.0-beta.4",
+        "@gradio/column": "^0.1.0-beta.2",
+        "@gradio/icons": "^0.2.0-beta.1",
+        "@gradio/utils": "^0.2.0-beta.4"
+      }
+    },
+    "node_modules/@gradio/theme": {
+      "version": "0.2.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.2.0-beta.2.tgz",
+      "integrity": "sha512-yKrA8eE02URtXUC9w98lBW8tqZk5oGumbBH7bFKOAhsrv1sbVZKir18P4a2/EL4XJ6Um36MwhPB3D5ipMniV5g=="
+    },
+    "node_modules/@gradio/utils": {
+      "version": "0.2.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.2.0-beta.4.tgz",
+      "integrity": "sha512-jaOY3IQs1MnWRagXBICHXl5ZDKFqgF4XMfgsZNjTQxTG6THFOCsrUc14X1BNmXWkh9zVXJJTZcXifekj8O6LZQ==",
+      "dependencies": {
+        "@gradio/theme": "^0.2.0-beta.2",
+        "svelte-i18n": "^3.6.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.3.tgz",
+      "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==",
+      "peer": true
+    },
+    "node_modules/@zerodevx/svelte-json-view": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@zerodevx/svelte-json-view/-/svelte-json-view-1.0.7.tgz",
+      "integrity": "sha512-yW0MV+9BCKOwzt3h86y3xDqYdI5st+Rxk+L5pa0Utq7nlPD+VvxyhL7R1gJoLxQvWwjyAvY/fyUCFTdwDyI14w==",
+      "peerDependencies": {
+        "svelte": "^3.57.0 || ^4.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
+      "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/cli-color": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.3.tgz",
+      "integrity": "sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.61",
+        "es6-iterator": "^2.0.3",
+        "memoizee": "^0.4.15",
+        "timers-ext": "^0.1.7"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
+    "node_modules/es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.5.tgz",
+      "integrity": "sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.19.5",
+        "@esbuild/android-arm64": "0.19.5",
+        "@esbuild/android-x64": "0.19.5",
+        "@esbuild/darwin-arm64": "0.19.5",
+        "@esbuild/darwin-x64": "0.19.5",
+        "@esbuild/freebsd-arm64": "0.19.5",
+        "@esbuild/freebsd-x64": "0.19.5",
+        "@esbuild/linux-arm": "0.19.5",
+        "@esbuild/linux-arm64": "0.19.5",
+        "@esbuild/linux-ia32": "0.19.5",
+        "@esbuild/linux-loong64": "0.19.5",
+        "@esbuild/linux-mips64el": "0.19.5",
+        "@esbuild/linux-ppc64": "0.19.5",
+        "@esbuild/linux-riscv64": "0.19.5",
+        "@esbuild/linux-s390x": "0.19.5",
+        "@esbuild/linux-x64": "0.19.5",
+        "@esbuild/netbsd-x64": "0.19.5",
+        "@esbuild/openbsd-x64": "0.19.5",
+        "@esbuild/sunos-x64": "0.19.5",
+        "@esbuild/win32-arm64": "0.19.5",
+        "@esbuild/win32-ia32": "0.19.5",
+        "@esbuild/win32-x64": "0.19.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
+    "node_modules/globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "node_modules/lru-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
+    "node_modules/memoizee": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
+      "integrity": "sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.53",
+        "es6-weak-map": "^2.0.3",
+        "event-emitter": "^0.3.5",
+        "is-promise": "^2.2.2",
+        "lru-queue": "^0.1.0",
+        "next-tick": "^1.1.0",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.2.tgz",
+      "integrity": "sha512-My2tytF2e2NnHSpn2M7/3VdXT4JdTglYVUuSuK/mXL2XtulPYbeBfl8Dm1QiaKRn0zoULRnL+EtfZHHP0k4H3A==",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^3.2.1",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svelte-i18n": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-3.7.4.tgz",
+      "integrity": "sha512-yGRCNo+eBT4cPuU7IVsYTYjxB7I2V8qgUZPlHnNctJj5IgbJgV78flsRzpjZ/8iUYZrS49oCt7uxlU3AZv/N5Q==",
+      "dependencies": {
+        "cli-color": "^2.0.3",
+        "deepmerge": "^4.2.2",
+        "esbuild": "^0.19.2",
+        "estree-walker": "^2",
+        "intl-messageformat": "^9.13.0",
+        "sade": "^1.8.1",
+        "tiny-glob": "^0.2.9"
+      },
+      "bin": {
+        "svelte-i18n": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "svelte": "^3 || ^4"
+      }
+    },
+    "node_modules/svelte-i18n/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/timers-ext": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
+      "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.46",
+        "next-tick": "1"
+      }
+    },
+    "node_modules/tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dependencies": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    }
+  },
+  "dependencies": {
+    "@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@esbuild/android-arm": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.5.tgz",
+      "integrity": "sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==",
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.5.tgz",
+      "integrity": "sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==",
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.5.tgz",
+      "integrity": "sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==",
+      "optional": true
+    },
+    "@esbuild/darwin-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.5.tgz",
+      "integrity": "sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==",
+      "optional": true
+    },
+    "@esbuild/darwin-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.5.tgz",
+      "integrity": "sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==",
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.5.tgz",
+      "integrity": "sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==",
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.5.tgz",
+      "integrity": "sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==",
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.5.tgz",
+      "integrity": "sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==",
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.5.tgz",
+      "integrity": "sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==",
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.5.tgz",
+      "integrity": "sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==",
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.5.tgz",
+      "integrity": "sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==",
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.5.tgz",
+      "integrity": "sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==",
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.5.tgz",
+      "integrity": "sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==",
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.5.tgz",
+      "integrity": "sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==",
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.5.tgz",
+      "integrity": "sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==",
+      "optional": true
+    },
+    "@esbuild/linux-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz",
+      "integrity": "sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==",
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.5.tgz",
+      "integrity": "sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==",
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.5.tgz",
+      "integrity": "sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==",
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.5.tgz",
+      "integrity": "sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==",
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.5.tgz",
+      "integrity": "sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==",
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.5.tgz",
+      "integrity": "sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==",
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz",
+      "integrity": "sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==",
+      "optional": true
+    },
+    "@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "requires": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@gradio/atoms": {
+      "version": "0.2.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.2.0-beta.4.tgz",
+      "integrity": "sha512-xZfP9oPmb7iiuGl7KB4vVELSVk9f3w5Y9KRIxkAaMb+oeRpmb5uDtKQPAxntpm0W9rKAZmYG+DIWhInlu1eeKA==",
+      "requires": {
+        "@gradio/icons": "^0.2.0-beta.1",
+        "@gradio/utils": "^0.2.0-beta.4"
+      }
+    },
+    "@gradio/column": {
+      "version": "0.1.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@gradio/column/-/column-0.1.0-beta.2.tgz",
+      "integrity": "sha512-vL0GECdNL4wAaO/o0JcF3fm2xyMrx5DJWXUiPq/sUwqZwwB95srPGKBVTmVja3HproVXCBEnTzPQmRlrwWK67w=="
+    },
+    "@gradio/icons": {
+      "version": "0.2.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.2.0-beta.1.tgz",
+      "integrity": "sha512-6nwP1NIi0u4YQoSoaqC/rY0wuCvJHsnK+8aHDOE37070JpzBGuxB/VUlEgO7trNz5zI/EJy2htIRYsqz1vKmXA=="
+    },
+    "@gradio/statustracker": {
+      "version": "0.3.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.3.0-beta.6.tgz",
+      "integrity": "sha512-AIhaMCnr2uibHdqRrs4K8ZUvZK0q5e430TcvoduLOkaoOrkfnqetrHaHdOLNBz+H4kJlXJRsmt7ZZYV4wwMXRQ==",
+      "requires": {
+        "@gradio/atoms": "^0.2.0-beta.4",
+        "@gradio/column": "^0.1.0-beta.2",
+        "@gradio/icons": "^0.2.0-beta.1",
+        "@gradio/utils": "^0.2.0-beta.4"
+      }
+    },
+    "@gradio/theme": {
+      "version": "0.2.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.2.0-beta.2.tgz",
+      "integrity": "sha512-yKrA8eE02URtXUC9w98lBW8tqZk5oGumbBH7bFKOAhsrv1sbVZKir18P4a2/EL4XJ6Um36MwhPB3D5ipMniV5g=="
+    },
+    "@gradio/utils": {
+      "version": "0.2.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.2.0-beta.4.tgz",
+      "integrity": "sha512-jaOY3IQs1MnWRagXBICHXl5ZDKFqgF4XMfgsZNjTQxTG6THFOCsrUc14X1BNmXWkh9zVXJJTZcXifekj8O6LZQ==",
+      "requires": {
+        "@gradio/theme": "^0.2.0-beta.2",
+        "svelte-i18n": "^3.6.0"
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "peer": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "peer": true
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "@types/estree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.3.tgz",
+      "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==",
+      "peer": true
+    },
+    "@zerodevx/svelte-json-view": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@zerodevx/svelte-json-view/-/svelte-json-view-1.0.7.tgz",
+      "integrity": "sha512-yW0MV+9BCKOwzt3h86y3xDqYdI5st+Rxk+L5pa0Utq7nlPD+VvxyhL7R1gJoLxQvWwjyAvY/fyUCFTdwDyI14w==",
+      "requires": {}
+    },
+    "acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "peer": true
+    },
+    "aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "axobject-query": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
+      "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
+      "peer": true,
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "cli-color": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.3.tgz",
+      "integrity": "sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==",
+      "requires": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.61",
+        "es6-iterator": "^2.0.3",
+        "memoizee": "^0.4.15",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "requires": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+    },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true
+    },
+    "es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "requires": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
+    "es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "esbuild": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.5.tgz",
+      "integrity": "sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==",
+      "requires": {
+        "@esbuild/android-arm": "0.19.5",
+        "@esbuild/android-arm64": "0.19.5",
+        "@esbuild/android-x64": "0.19.5",
+        "@esbuild/darwin-arm64": "0.19.5",
+        "@esbuild/darwin-x64": "0.19.5",
+        "@esbuild/freebsd-arm64": "0.19.5",
+        "@esbuild/freebsd-x64": "0.19.5",
+        "@esbuild/linux-arm": "0.19.5",
+        "@esbuild/linux-arm64": "0.19.5",
+        "@esbuild/linux-ia32": "0.19.5",
+        "@esbuild/linux-loong64": "0.19.5",
+        "@esbuild/linux-mips64el": "0.19.5",
+        "@esbuild/linux-ppc64": "0.19.5",
+        "@esbuild/linux-riscv64": "0.19.5",
+        "@esbuild/linux-s390x": "0.19.5",
+        "@esbuild/linux-x64": "0.19.5",
+        "@esbuild/netbsd-x64": "0.19.5",
+        "@esbuild/openbsd-x64": "0.19.5",
+        "@esbuild/sunos-x64": "0.19.5",
+        "@esbuild/win32-arm64": "0.19.5",
+        "@esbuild/win32-ia32": "0.19.5",
+        "@esbuild/win32-x64": "0.19.5"
+      }
+    },
+    "estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "requires": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "requires": {
+        "type": "^2.7.2"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.7.2",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+        }
+      }
+    },
+    "globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
+    "locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "lru-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "requires": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "magic-string": {
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
+    "memoizee": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
+      "integrity": "sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==",
+      "requires": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.53",
+        "es6-weak-map": "^2.0.3",
+        "event-emitter": "^0.3.5",
+        "is-promise": "^2.2.2",
+        "lru-queue": "^0.1.0",
+        "next-tick": "^1.1.0",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
+    },
+    "next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "requires": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "peer": true
+    },
+    "svelte": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.2.tgz",
+      "integrity": "sha512-My2tytF2e2NnHSpn2M7/3VdXT4JdTglYVUuSuK/mXL2XtulPYbeBfl8Dm1QiaKRn0zoULRnL+EtfZHHP0k4H3A==",
+      "peer": true,
+      "requires": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^3.2.1",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "svelte-i18n": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-3.7.4.tgz",
+      "integrity": "sha512-yGRCNo+eBT4cPuU7IVsYTYjxB7I2V8qgUZPlHnNctJj5IgbJgV78flsRzpjZ/8iUYZrS49oCt7uxlU3AZv/N5Q==",
+      "requires": {
+        "cli-color": "^2.0.3",
+        "deepmerge": "^4.2.2",
+        "esbuild": "^0.19.2",
+        "estree-walker": "^2",
+        "intl-messageformat": "^9.13.0",
+        "sade": "^1.8.1",
+        "tiny-glob": "^0.2.9"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        }
+      }
+    },
+    "timers-ext": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
+      "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
+      "requires": {
+        "es5-ext": "~0.10.46",
+        "next-tick": "1"
+      }
+    },
+    "tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "requires": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    }
+  }
+}
diff --git a/js/preview/test/test/frontend/package.json b/js/preview/test/test/frontend/package.json
new file mode 100644
index 0000000000000..3e93476579e60
--- /dev/null
+++ b/js/preview/test/test/frontend/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "gradio_test",
+  "version": "0.2.0-beta.6",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.2.0-beta.4",
+    "@gradio/statustracker": "0.3.0-beta.6",
+    "@gradio/utils": "0.2.0-beta.4",
+    "@zerodevx/svelte-json-view": "^1.0.7"
+  }
+}
\ No newline at end of file
diff --git a/js/preview/test/newnewtext/pyproject.toml b/js/preview/test/test/pyproject.toml
similarity index 59%
rename from js/preview/test/newnewtext/pyproject.toml
rename to js/preview/test/test/pyproject.toml
index 52101fd8d4ebc..c160f63b92f08 100644
--- a/js/preview/test/newnewtext/pyproject.toml
+++ b/js/preview/test/test/pyproject.toml
@@ -1,19 +1,27 @@
 [build-system]
-requires = ["hatchling", "hatch-requirements-txt", "hatch-fancy-pypi-readme>=22.5.0"]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
 build-backend = "hatchling.build"
 
 [project]
-name = "newnewtext"
+name = "gradio_test"
 version = "0.0.1"
 description = "Python library for easily interacting with trained machine learning models"
 license = "Apache-2.0"
 requires-python = ">=3.8"
-authors = [
-  { name = "YOUR NAME", email = "YOUREMAIL@domain.com" },
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = [
+  "machine learning",
+  "reproducibility",
+  "visualization",
+  "gradio",
+  "gradio custom component",
 ]
-keywords = ["machine learning", "reproducibility", "visualization"]
 # Add dependencies here
-dependencies = []
+dependencies = ["gradio"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'License :: OSI Approved :: Apache Software License',
@@ -29,12 +37,11 @@ classifiers = [
   'Topic :: Scientific/Engineering :: Visualization',
 ]
 
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
 [tool.hatch.build]
-artifacts = [
-  "/backend/newnewtext/templates",
-  "*.pyi"
-]
-packages = ["/backend/newnewtext"]
+artifacts = ["/backend/gradio_test/templates", "*.pyi", "backend/gradio_test/templates", "backend/gradio_test/templates"]
 
-[tool.hatch.metadata]
-allow-direct-references = true
\ No newline at end of file
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_test"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af4de79661a60..e215d0fc23cbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1187,52 +1187,19 @@ importers:
         specifier: ^0.15.3
         version: 0.15.3(svelte@4.2.2)
 
-  js/preview/test/imageslider/frontend:
+  js/preview/test/test/frontend:
     dependencies:
       '@gradio/atoms':
-        specifier: workspace:^
+        specifier: 0.2.0-beta.4
         version: link:../../../../atoms
-      '@gradio/icons':
-        specifier: workspace:^
-        version: link:../../../../icons
       '@gradio/statustracker':
-        specifier: workspace:^
+        specifier: 0.3.0-beta.6
         version: link:../../../../statustracker
-      '@gradio/upload':
-        specifier: workspace:^
-        version: link:../../../../upload
       '@gradio/utils':
-        specifier: workspace:^
+        specifier: 0.2.0-beta.4
         version: link:../../../../utils
-      cropperjs:
-        specifier: ^1.5.12
-        version: 1.5.12
-      lazy-brush:
-        specifier: ^1.0.1
-        version: 1.0.1
-      resize-observer-polyfill:
-        specifier: ^1.5.1
-        version: 1.5.1
-
-  js/preview/test/newnewtext/frontend:
-    dependencies:
-      '@gradio/atoms':
-        specifier: workspace:^
-        version: link:../../../../atoms
-      '@gradio/icons':
-        specifier: workspace:^
-        version: link:../../../../icons
-      '@gradio/statustracker':
-        specifier: workspace:^
-        version: link:../../../../statustracker
-      '@gradio/utils':
-        specifier: workspace:^
-        version: link:../../../../utils
-
-  js/preview/test/newtext/frontend:
-    dependencies:
       '@zerodevx/svelte-json-view':
-        specifier: ^1.0
+        specifier: ^1.0.7
         version: 1.0.7(svelte@4.2.2)
 
   js/radio:
@@ -7074,7 +7041,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.2)(vite@4.5.0)
       debug: 4.3.4
       svelte: 4.2.2
-      vite: 4.5.0(@types/node@20.3.2)(less@4.1.3)
+      vite: 4.5.0(@types/node@20.3.1)(less@4.1.3)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.60.0)(sugarss@4.0.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7152,7 +7119,7 @@ packages:
       magic-string: 0.30.5
       svelte: 4.2.2
       svelte-hmr: 0.15.3(svelte@4.2.2)
-      vite: 4.5.0(@types/node@20.3.2)(less@4.1.3)
+      vite: 4.5.0(@types/node@20.3.1)(less@4.1.3)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.60.0)(sugarss@4.0.1)
       vitefu: 0.2.4(vite@4.5.0)
     transitivePeerDependencies:
       - supports-color
@@ -7163,7 +7130,7 @@ packages:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.6(postcss@8.4.21)
+      tailwindcss: 3.1.6(postcss@8.4.27)
 
   /@tailwindcss/typography@0.5.4(tailwindcss@3.1.6):
     resolution: {integrity: sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==}
@@ -13331,6 +13298,7 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
+    dev: true
 
   /postcss-import@14.1.0(postcss@8.4.27):
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
@@ -13342,7 +13310,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: false
 
   /postcss-js@4.0.0(postcss@8.4.21):
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -13352,6 +13319,7 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.21
+    dev: true
 
   /postcss-js@4.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -13361,7 +13329,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.27
-    dev: false
 
   /postcss-less@6.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==}
@@ -13387,6 +13354,7 @@ packages:
       lilconfig: 2.0.6
       postcss: 8.4.21
       yaml: 1.10.2
+    dev: true
 
   /postcss-load-config@3.1.4(postcss@8.4.27):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -13403,7 +13371,6 @@ packages:
       lilconfig: 2.0.6
       postcss: 8.4.27
       yaml: 1.10.2
-    dev: false
 
   /postcss-loader@7.3.3(postcss@8.4.27)(webpack@5.88.1):
     resolution: {integrity: sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==}
@@ -13468,6 +13435,7 @@ packages:
     dependencies:
       postcss: 8.4.21
       postcss-selector-parser: 6.0.9
+    dev: true
 
   /postcss-nested@5.0.6(postcss@8.4.27):
     resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
@@ -13477,7 +13445,6 @@ packages:
     dependencies:
       postcss: 8.4.27
       postcss-selector-parser: 6.0.9
-    dev: false
 
   /postcss-prefix-selector@1.16.0(postcss@8.4.21):
     resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==}
@@ -15306,6 +15273,7 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
+    dev: true
 
   /tailwindcss@3.1.6(postcss@8.4.27):
     resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
@@ -15338,7 +15306,6 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: false
 
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
diff --git a/test/test_gradio_component_cli.py b/test/test_gradio_component_cli.py
index e1d096fdd164e..6d641bd7007a8 100644
--- a/test/test_gradio_component_cli.py
+++ b/test/test_gradio_component_cli.py
@@ -1,8 +1,10 @@
 import textwrap
+from pathlib import Path
 
 import pytest
 
 from gradio.cli.commands.components._create_utils import OVERRIDES
+from gradio.cli.commands.components.build import _build
 from gradio.cli.commands.components.create import _create
 from gradio.cli.commands.components.show import _show
 
@@ -80,3 +82,21 @@ def test_show(capsys):
     assert "Layout" in stdout
     assert "Dataframe" not in stdout
     assert "Dataset" not in stdout
+
+
+@pytest.mark.xfail
+def test_build(tmp_path):
+    _create(
+        "TestTextbox",
+        template="Textbox",
+        directory=tmp_path,
+        overwrite=True,
+        install=True,
+    )
+    _build(tmp_path, build_frontend=True)
+    template_dir: Path = (
+        tmp_path.resolve() / "backend" / "gradio_testtextbox" / "templates"
+    )
+    assert template_dir.exists() and template_dir.is_dir()
+    assert list(template_dir.glob("**/index.js"))
+    assert (tmp_path / "dist").exists() and list((tmp_path / "dist").glob("*.whl"))