diff --git a/.gitattributes b/.gitattributes
index a6344aac8c09253b3b630fb776ae94478aa0275b..e14e93b551a368b588bdb3fa5277d1e6bfecc321 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/images/demo_2.png filter=lfs diff=lfs merge=lfs -text
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..cf4d3f8ac1ee2c37659877ab3276c0666b1a0672
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,16 @@
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY --link --chown=1000 . .
+
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+ENV TRANSFORMERS_CACHE=/tmp/cache/
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV PYTHONUNBUFFERED=1 	GRADIO_ALLOW_FLAGGING=never 	GRADIO_NUM_PORTS=1 	GRADIO_SERVER_NAME=0.0.0.0     GRADIO_SERVER_PORT=7860 	SYSTEM=spaces
+
+CMD ["python", "space.py"]
diff --git a/README.md b/README.md
index 3e9a62edef27af8122c71e94b1912c95f7f4037e..3d6f6df83f6414db16553bf59e9eced9cf77fdf1 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,17 @@
+
 ---
-title: Gradio Image Annotation
-emoji: 🐨
-colorFrom: blue
-colorTo: blue
+tags: [gradio-custom-component,gradio-template-Image,bounding box,annotator,annotate,boxes]
+title: gradio_image_annotation V0.0.3
+colorFrom: gray
+colorTo: red
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Name: gradio_image_annotation
+
+Description: A Gradio component that can be used to annotate images with bounding boxes.
+
+Install with: pip install gradio_image_annotation
\ No newline at end of file
diff --git a/__init__.py b/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/__pycache__/__init__.cpython-311.pyc b/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..c5b21b30a2fd35d9ca9ce08671a154413232a473
Binary files /dev/null and b/__pycache__/__init__.cpython-311.pyc differ
diff --git a/__pycache__/app.cpython-311.pyc b/__pycache__/app.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..01a33fd1122c78fc6e24242712efedbc2b17b36d
Binary files /dev/null and b/__pycache__/app.cpython-311.pyc differ
diff --git a/app.py b/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..dde08fb03dde9e961cd56affd730cab75e56f552
--- /dev/null
+++ b/app.py
@@ -0,0 +1,56 @@
+import gradio as gr
+from gradio_image_annotation import image_annotator
+
+example = {
+    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+    "boxes": [
+        {
+            "xmin": 30,
+            "ymin": 70,
+            "xmax": 530,
+            "ymax": 500,
+            "label": "Gradio",
+            "color": (250, 185, 0),
+        }
+    ]
+}
+
+
+def crop(annotations):
+    if annotations["boxes"]:
+        box = annotations["boxes"][0]
+        return annotations["image"][
+            box["ymin"]:box["ymax"],
+            box["xmin"]:box["xmax"]
+        ]
+    return None
+
+
+def get_boxes_json(annotations):
+    return [
+        {k: box[k]
+            for k in box if k in ("xmin", "ymin", "xmax", "ymax", "label")}
+        for box in annotations["boxes"]
+    ]
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Crop"):
+        with gr.Row():
+            annotator_crop = image_annotator(example, image_type="numpy")
+            image_crop = gr.Image()
+        button_crop = gr.Button("Crop")
+        button_crop.click(crop, annotator_crop, image_crop)
+    with gr.Tab("Object annotation"):
+        annotator = image_annotator(
+            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            label_list=["Person", "Vehicle"],
+            label_colors=[(0, 255, 0), (255, 0, 0)],
+        )
+        button_get = gr.Button("Get bounding boxes")
+        json_boxes = gr.JSON()
+        button_get.click(get_boxes_json, annotator, json_boxes)
+
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/css.css b/css.css
new file mode 100644
index 0000000000000000000000000000000000000000..f7256be42f9884d89b499b0f5a6cfcbed3d54c80
--- /dev/null
+++ b/css.css
@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a792cc81f289b7c6975628799d0562c984ac81b6
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1 @@
+gradio_image_annotation==0.0.3.post1
\ No newline at end of file
diff --git a/space.py b/space.py
new file mode 100644
index 0000000000000000000000000000000000000000..d09d257f8e03a4946ceda41d0fdcda86ee8d3b4f
--- /dev/null
+++ b/space.py
@@ -0,0 +1,178 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'image_annotator': {'description': 'Creates a component to annotate images with bounding boxes. The bounding boxes can be created and edited by the user or be passed by code.\nIt is also possible to predefine a set of valid classes and colors.', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': "A dict or None. The dictionary must contain a key 'image' with either an URL to an image, a numpy image or a PIL image. Optionally it may contain a key 'boxes' with a list of boxes. Each box must be a dict wit the keys: 'xmin', 'ymin', 'xmax' and 'ymax' with the absolute image coordinates of the box. Optionally can also include the keys 'label' and 'color' describing the label and color of the box. Color must be a tuple of RGB values (e.g. `(255,255,255)`)."}, 'boxes_alpha': {'type': 'float | None', 'default': 'None', 'description': 'Opacity of the bounding boxes 0 and 1.'}, 'label_list': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of valid labels.'}, 'label_colors': {'type': 'list[str] | None', 'default': 'None', 'description': 'Optional list of colors for each label when `label_list` is used. Colors must be a tuple of RGB values (e.g. `(255,255,255)`).'}, 'box_min_size': {'type': 'int | None', 'default': 'None', 'description': 'Minimum valid bounding box size.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.'}, 'image_mode': {'type': '"1"\n    | "L"\n    | "P"\n    | "RGB"\n    | "RGBA"\n    | "CMYK"\n    | "YCbCr"\n    | "LAB"\n    | "HSV"\n    | "I"\n    | "F"', 'default': '"RGB"', 'description': '"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.'}, 'sources': {'type': 'list["upload" | "clipboard"] | None', 'default': '["upload", "clipboard"]', 'description': 'List of sources for the image. "upload" creates a box where user can drop an image file, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "clipboard"].'}, 'image_type': {'type': '"numpy" | "pil" | "filepath"', 'default': '"numpy"', 'description': 'The format the image is converted 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. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'True', 'description': 'if True, will allow users to upload and annotate an image; if False, can only be used to display annotated images.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will show a button to download the image.'}, 'show_share_button': {'type': 'bool | None', 'default': 'None', 'description': '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.'}, 'show_clear_button': {'type': 'bool | None', 'default': 'True', 'description': 'If True, will show a clear button.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': 'A dict with an image and an optional list of boxes or None.'}}, 'preprocess': {'return': {'type': 'dict | None', 'description': 'A dict with the image and boxes or None.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the image_annotator using the X button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the image_annotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the image_annotator.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'image_annotator': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_image_annotation`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_image_annotation/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_image_annotation"></a>  
+</div>
+
+A Gradio component that can be used to annotate images with bounding boxes.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_image_annotation
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_image_annotation import image_annotator
+
+example = {
+    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+    "boxes": [
+        {
+            "xmin": 30,
+            "ymin": 70,
+            "xmax": 530,
+            "ymax": 500,
+            "label": "Gradio",
+            "color": (250, 185, 0),
+        }
+    ]
+}
+
+
+def crop(annotations):
+    if annotations["boxes"]:
+        box = annotations["boxes"][0]
+        return annotations["image"][
+            box["ymin"]:box["ymax"],
+            box["xmin"]:box["xmax"]
+        ]
+    return None
+
+
+def get_boxes_json(annotations):
+    return [
+        {k: box[k]
+            for k in box if k in ("xmin", "ymin", "xmax", "ymax", "label")}
+        for box in annotations["boxes"]
+    ]
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Crop"):
+        with gr.Row():
+            annotator_crop = image_annotator(example, image_type="numpy")
+            image_crop = gr.Image()
+        button_crop = gr.Button("Crop")
+        button_crop.click(crop, annotator_crop, image_crop)
+    with gr.Tab("Object annotation"):
+        annotator = image_annotator(
+            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            label_list=["Person", "Vehicle"],
+            label_colors=[(0, 255, 0), (255, 0, 0)],
+        )
+        button_get = gr.Button("Get bounding boxes")
+        json_boxes = gr.JSON()
+        button_get.click(get_boxes_json, annotator, json_boxes)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `image_annotator`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["image_annotator"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["image_annotator"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, a dict with the image and boxes or None.
+- **As output:** Should return, a dict with an image and an optional list of boxes or None.
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "image_annotator-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          image_annotator: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()
diff --git a/src/.github/workflows/python-publish.yml b/src/.github/workflows/python-publish.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bdaab28a48d6b2941815b3490922e36514ff4cd0
--- /dev/null
+++ b/src/.github/workflows/python-publish.yml
@@ -0,0 +1,39 @@
+# This workflow will upload a Python Package using Twine when a release is created
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-python#publishing-to-package-registries
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+name: Upload Python Package
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Set up Python
+      uses: actions/setup-python@v3
+      with:
+        python-version: '3.x'
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install build
+    - name: Build package
+      run: python -m build
+    - name: Publish package
+      uses: pypa/gh-action-pypi-publish@27b31702a0e7fc50959f5ad993c78deac1bdfc29
+      with:
+        user: __token__
+        password: ${{ secrets.PYPI_API_TOKEN }}
diff --git a/src/.gitignore b/src/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..60188eefb61faf29c12a14228941da079044292f
--- /dev/null
+++ b/src/.gitignore
@@ -0,0 +1,9 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+node_modules
\ No newline at end of file
diff --git a/src/LICENSE b/src/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..4e99bb556aeadeb02eee677a0e1fd685ec273d95
--- /dev/null
+++ b/src/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Edgar Gracia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/README.md b/src/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ddd1cacf7b045e1e81184cfd7f40082ee3a6e348
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,431 @@
+
+# `gradio_image_annotation`
+<a href="https://pypi.org/project/gradio_image_annotation/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_image_annotation"></a>  
+
+A Gradio component that can be used to annotate images with bounding boxes.
+
+## Installation
+
+```bash
+pip install gradio_image_annotation
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_image_annotation import image_annotator
+
+example = {
+    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+    "boxes": [
+        {
+            "xmin": 30,
+            "ymin": 70,
+            "xmax": 530,
+            "ymax": 500,
+            "label": "Gradio",
+            "color": (250, 185, 0),
+        }
+    ]
+}
+
+
+def crop(annotations):
+    if annotations["boxes"]:
+        box = annotations["boxes"][0]
+        return annotations["image"][
+            box["ymin"]:box["ymax"],
+            box["xmin"]:box["xmax"]
+        ]
+    return None
+
+
+def get_boxes_json(annotations):
+    return [
+        {k: box[k]
+            for k in box if k in ("xmin", "ymin", "xmax", "ymax", "label")}
+        for box in annotations["boxes"]
+    ]
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Crop"):
+        with gr.Row():
+            annotator_crop = image_annotator(example, image_type="numpy")
+            image_crop = gr.Image()
+        button_crop = gr.Button("Crop")
+        button_crop.click(crop, annotator_crop, image_crop)
+    with gr.Tab("Object annotation"):
+        annotator = image_annotator(
+            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            label_list=["Person", "Vehicle"],
+            label_colors=[(0, 255, 0), (255, 0, 0)],
+        )
+        button_get = gr.Button("Get bounding boxes")
+        json_boxes = gr.JSON()
+        button_get.click(get_boxes_json, annotator, json_boxes)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `image_annotator`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A dict or None. The dictionary must contain a key 'image' with either an URL to an image, a numpy image or a PIL image. Optionally it may contain a key 'boxes' with a list of boxes. Each box must be a dict wit the keys: 'xmin', 'ymin', 'xmax' and 'ymax' with the absolute image coordinates of the box. Optionally can also include the keys 'label' and 'color' describing the label and color of the box. Color must be a tuple of RGB values (e.g. `(255,255,255)`).</td>
+</tr>
+
+<tr>
+<td align="left"><code>boxes_alpha</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Opacity of the bounding boxes 0 and 1.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label_list</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of valid labels.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label_colors</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Optional list of colors for each label when `label_list` is used. Colors must be a tuple of RGB values (e.g. `(255,255,255)`).</td>
+</tr>
+
+<tr>
+<td align="left"><code>box_min_size</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Minimum valid bounding box size.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>image_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"1"
+    | "L"
+    | "P"
+    | "RGB"
+    | "RGBA"
+    | "CMYK"
+    | "YCbCr"
+    | "LAB"
+    | "HSV"
+    | "I"
+    | "F"
+```
+
+</td>
+<td align="left"><code>"RGB"</code></td>
+<td align="left">"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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>sources</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list["upload" | "clipboard"] | None
+```
+
+</td>
+<td align="left"><code>["upload", "clipboard"]</code></td>
+<td align="left">List of sources for the image. "upload" creates a box where user can drop an image file, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "clipboard"].</td>
+</tr>
+
+<tr>
+<td align="left"><code>image_type</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"numpy" | "pil" | "filepath"
+```
+
+</td>
+<td align="left"><code>"numpy"</code></td>
+<td align="left">The format the image is converted 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. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">if True, will allow users to upload and annotate an image; if False, can only be used to display annotated images.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a button to download the image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_share_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_clear_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a clear button.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the image_annotator using the X button for the component. |
+| `change` | Triggered when the value of the image_annotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `upload` | This listener is triggered when the user uploads a file into the image_annotator. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, a dict with the image and boxes or None.
+- **As input:** Should return, a dict with an image and an optional list of boxes or None.
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 
+## Screenshots
+![](https://raw.githubusercontent.com/edgarGracia/gradio_image_annotator/main/images/demo_1.png)
+![](https://raw.githubusercontent.com/edgarGracia/gradio_image_annotator/main/images/demo_2.png)
diff --git a/src/backend/gradio_image_annotation/__init__.py b/src/backend/gradio_image_annotation/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..a8cd17fb506d514bc249f743f2a8f0dbaca166dc
--- /dev/null
+++ b/src/backend/gradio_image_annotation/__init__.py
@@ -0,0 +1,4 @@
+
+from .image_annotator import image_annotator
+
+__all__ = ['image_annotator']
diff --git a/src/backend/gradio_image_annotation/image_annotator.py b/src/backend/gradio_image_annotation/image_annotator.py
new file mode 100644
index 0000000000000000000000000000000000000000..ec57f9f1426e728d81e84b8f9f0d9e0b07a91930
--- /dev/null
+++ b/src/backend/gradio_image_annotation/image_annotator.py
@@ -0,0 +1,293 @@
+from __future__ import annotations
+
+import re
+import warnings
+from pathlib import Path
+from typing import Any, List, Literal, cast
+
+import numpy as np
+import PIL.Image
+from PIL import ImageOps
+
+from gradio import image_utils, utils
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from gradio.events import Events
+
+PIL.Image.init()  # fixes https://github.com/gradio-app/gradio/issues/2843
+
+
+class AnnotatedImageData(GradioModel):
+    image: FileData
+    boxes: List[dict] = []
+
+
+def rgb2hex(r,g,b):
+    def clip(x):
+        return max(min(x, 255), 0)
+    return "#{:02x}{:02x}{:02x}".format(clip(r),clip(g),clip(b))
+
+
+class image_annotator(Component):
+    """
+    Creates a component to annotate images with bounding boxes. The bounding boxes can be created and edited by the user or be passed by code.
+    It is also possible to predefine a set of valid classes and colors.
+    """
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.upload,
+    ]
+
+    data_model = AnnotatedImageData
+
+    def __init__(
+        self,
+        value: dict | None = None,
+        *,
+        boxes_alpha: float | None = None,
+        label_list: list[str] | None = None,
+        label_colors: list[str] | None = None,
+        box_min_size: int | None = None,
+        height: int | str | None = None,
+        width: int | str | None = None,
+        image_mode: Literal[
+            "1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"
+        ] = "RGB",
+        sources: list[Literal["upload", "clipboard"]] | None = ["upload", "clipboard"],
+        image_type: Literal["numpy", "pil", "filepath"] = "numpy",
+        label: str | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = True,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        show_share_button: bool | None = None,
+        show_clear_button: bool | None = True,
+    ):
+        """
+        Parameters:
+            value: A dict or None. The dictionary must contain a key 'image' with either an URL to an image, a numpy image or a PIL image. Optionally it may contain a key 'boxes' with a list of boxes. Each box must be a dict wit the keys: 'xmin', 'ymin', 'xmax' and 'ymax' with the absolute image coordinates of the box. Optionally can also include the keys 'label' and 'color' describing the label and color of the box. Color must be a tuple of RGB values (e.g. `(255,255,255)`).
+            boxes_alpha: Opacity of the bounding boxes 0 and 1.
+            label_list: List of valid labels.
+            label_colors: Optional list of colors for each label when `label_list` is used. Colors must be a tuple of RGB values (e.g. `(255,255,255)`).
+            box_min_size: Minimum valid bounding box size.
+            height: The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            width: The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            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.
+            sources: List of sources for the image. "upload" creates a box where user can drop an image file, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "clipboard"].
+            image_type: The format the image is converted 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. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will allow users to upload and annotate an image; if False, can only be used to display annotated images.
+            visible: If False, component will be hidden.
+            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.
+            show_label: if True, will display label.
+            show_download_button: If True, will show a button to download the image.
+            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.
+            show_clear_button: If True, will show a clear button.
+        """
+        
+        valid_types = ["numpy", "pil", "filepath"]
+        if image_type not in valid_types:
+            raise ValueError(
+                f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
+            )
+        self.image_type = image_type
+        self.height = height
+        self.width = width
+        self.image_mode = image_mode
+        
+        self.sources = sources
+        valid_sources = ["upload", "clipboard", None]
+        if isinstance(sources, str):
+            self.sources = [sources]
+        if self.sources is None:
+            self.sources = []
+        if self.sources is not None:
+            for source in self.sources:
+                if source not in valid_sources:
+                    raise ValueError(
+                        f"`sources` must a list consisting of elements in {valid_sources}"
+                    )
+        
+        self.show_download_button = show_download_button
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
+        self.show_clear_button = show_clear_button
+
+        self.boxes_alpha = boxes_alpha
+        self.box_min_size = box_min_size
+        if label_list:
+            self.label_list = [(l, i) for i, l in enumerate(label_list)]
+        else:
+            self.label_list = None
+        
+        # Parse colors
+        self.label_colors = label_colors
+        if self.label_colors:
+            if (not isinstance(self.label_colors, list)
+                or self.label_list is None
+                or len(self.label_colors) != len(self.label_list)):
+                raise ValueError("``label_colors`` must be a list with the "
+                                 "same length as ``label_list``")
+            for i, color in enumerate(self.label_colors):
+                if isinstance(color, str):
+                    if len(color) != 7 or color[0] != "#":
+                        raise ValueError(f"Invalid color value {color}")
+                elif isinstance(color, (list, tuple)):
+                    self.label_colors[i] = rgb2hex(*color)
+
+        super().__init__(
+            label=label,
+            every=None,
+            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,
+            value=value,
+        )
+
+    def preprocess_image(self, image: FileData | None) -> str | None:
+        if image is None:
+            return None
+        file_path = Path(image.path)
+        if image.orig_name:
+            p = Path(image.orig_name)
+            name = p.stem
+            suffix = p.suffix.replace(".", "")
+            if suffix in ["jpg", "jpeg"]:
+                suffix = "jpeg"
+        else:
+            name = "image"
+            suffix = "png"
+
+        if suffix.lower() == "svg":
+            return str(file_path)
+        
+        im = PIL.Image.open(file_path)
+        exif = im.getexif()
+        # 274 is the code for image rotation and 1 means "correct orientation"
+        if exif.get(274, 1) != 1 and hasattr(ImageOps, "exif_transpose"):
+            try:
+                im = ImageOps.exif_transpose(im)
+            except Exception:
+                warnings.warn(
+                    f"Failed to transpose image {file_path} based on EXIF data."
+                )
+        with warnings.catch_warnings():
+            warnings.simplefilter("ignore")
+            im = im.convert(self.image_mode)
+        return image_utils.format_image(
+            im,
+            cast(Literal["numpy", "pil", "filepath"], self.image_type),
+            self.GRADIO_CACHE,
+            name=name,
+            format=suffix,
+        )
+
+    def preprocess_boxes(self, boxes: List[dict] | None) -> list:
+        if not boxes:
+            return []
+        for box in boxes:
+            if "color" in box:
+                match = re.match(r'rgb\((\d+), (\d+), (\d+)\)', box["color"])
+                if match:
+                    box["color"] = tuple(int(match.group(i)) for i in range(1, 4))
+            scale_factor = box["scaleFactor"] if "scaleFactor" in box else 1
+            box["xmin"] = round(box["xmin"] / scale_factor)
+            box["ymin"] = round(box["ymin"] / scale_factor)
+            box["xmax"] = round(box["xmax"] / scale_factor)
+            box["ymax"] = round(box["ymax"] / scale_factor)
+        return boxes
+
+    def preprocess(self, payload: AnnotatedImageData | None) -> dict | None:
+        """
+        Parameters:
+            payload: an AnnotatedImageData object.
+        Returns:
+            A dict with the image and boxes or None.
+        """
+        if payload is None:
+            return None
+        
+        ret_value = {
+            "image": self.preprocess_image(payload.image),
+            "boxes": self.preprocess_boxes(payload.boxes)
+        }
+        return ret_value
+
+    def postprocess(self, value: dict | None) -> AnnotatedImageData | None:
+        """
+        Parameters:
+            value: A dict with an image and an optional list of boxes or None.
+        Returns:
+            Returns an AnnotatedImageData object.
+        """
+        # Check value
+        if value is None:
+            return None
+        if not isinstance(value, dict):
+            raise ValueError(f"``value`` must be a dict. Got {type(value)}")
+    
+        # Check and get boxes
+        boxes = value.setdefault("boxes", [])
+        if boxes:
+            if not isinstance(value["boxes"], (list, tuple)):
+                raise ValueError(f"'boxes' must be a list of dicts. Got "
+                                 f"{type(value['boxes'])}")
+            for box in value["boxes"]:
+                if (not isinstance(box, dict)
+                    or not set(box.keys()).issubset({"label", "xmin", "ymin", "xmax", "ymax", "color"})
+                    or not set(box.keys()).issuperset({"xmin", "ymin", "xmax", "ymax"})
+                    ):
+                    raise ValueError("Box must be a dict with the following "
+                                     "keys: 'xmin', 'ymin', 'xmax', 'ymax', "
+                                     f"['label', 'color']'. Got {box}")
+
+        # Check and parse image
+        image = value.setdefault("image", None)
+        if image is not None:
+            if isinstance(image, str) and image.lower().endswith(".svg"):
+                image = FileData(path=image, orig_name=Path(image).name)
+            else:
+                saved = image_utils.save_image(image, self.GRADIO_CACHE)
+                orig_name = Path(saved).name if Path(saved).exists() else None
+                image = FileData(path=saved, orig_name=orig_name)
+        else:
+            raise ValueError(f"An image must be provided. Got {value}")
+        
+        return AnnotatedImageData(image=image, boxes=boxes)
+
+    def example_inputs(self) -> Any:
+        return {
+            "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+            "boxes": [
+                {
+                    "xmin": 30,
+                    "ymin": 70,
+                    "xmax": 530,
+                    "ymax": 500,
+                    "label": "Gradio",
+                    "color": (250,185,0),
+                }
+            ]
+        }
diff --git a/src/backend/gradio_image_annotation/image_annotator.pyi b/src/backend/gradio_image_annotation/image_annotator.pyi
new file mode 100644
index 0000000000000000000000000000000000000000..87a098e5e81389b279fe630a5af47e4d93b40d58
--- /dev/null
+++ b/src/backend/gradio_image_annotation/image_annotator.pyi
@@ -0,0 +1,411 @@
+"""gr.Image() component."""
+
+from __future__ import annotations
+
+import warnings
+from pathlib import Path
+from typing import Any, Literal, cast
+
+import numpy as np
+import PIL.Image
+from gradio_client.documentation import document
+from PIL import ImageOps
+
+from gradio import image_utils, utils
+from gradio.components.base import Component, StreamingInput
+from gradio.data_classes import FileData
+from gradio.events import Events
+
+PIL.Image.init()  # fixes https://github.com/gradio-app/gradio/issues/2843
+
+
+class image_annotator(Component):
+    """
+    Creates a component to annotate images with bounding boxes. The bounding boxes can be created and edited by the user or be passed by code.
+    It is also possible to predefine a set of valid classes and colors.
+    """
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.upload,
+    ]
+
+    data_model = AnnotatedImageData
+
+    def __init__(
+        self,
+        value: dict | None = None,
+        *,
+        boxes_alpha: float | None = None,
+        label_list: list[str] | None = None,
+        label_colors: list[str] | None = None,
+        box_min_size: int | None = None,
+        height: int | str | None = None,
+        width: int | str | None = None,
+        image_mode: Literal[
+            "1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"
+        ] = "RGB",
+        sources: list[Literal["upload", "clipboard"]] | None = ["upload", "clipboard"],
+        image_type: Literal["numpy", "pil", "filepath"] = "numpy",
+        label: str | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = True,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        show_share_button: bool | None = None,
+        show_clear_button: bool | None = True,
+    ):
+        """
+        Parameters:
+            value: A dict or None. The dictionary must contain a key 'image' with either an URL to an image, a numpy image or a PIL image. Optionally it may contain a key 'boxes' with a list of boxes. Each box must be a dict wit the keys: 'xmin', 'ymin', 'xmax' and 'ymax' with the absolute image coordinates of the box. Optionally can also include the keys 'label' and 'color' describing the label and color of the box. Color must be a tuple of RGB values (e.g. `(255,255,255)`).
+            boxes_alpha: Opacity of the bounding boxes 0 and 1.
+            label_list: List of valid labels.
+            label_colors: Optional list of colors for each label when `label_list` is used. Colors must be a tuple of RGB values (e.g. `(255,255,255)`).
+            box_min_size: Minimum valid bounding box size.
+            height: The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            width: The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            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.
+            sources: List of sources for the image. "upload" creates a box where user can drop an image file, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "clipboard"].
+            image_type: The format the image is converted 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. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will allow users to upload and annotate an image; if False, can only be used to display annotated images.
+            visible: If False, component will be hidden.
+            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.
+            show_label: if True, will display label.
+            show_download_button: If True, will show a button to download the image.
+            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.
+            show_clear_button: If True, will show a clear button.
+        """
+        
+        valid_types = ["numpy", "pil", "filepath"]
+        if image_type not in valid_types:
+            raise ValueError(
+                f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
+            )
+        self.image_type = image_type
+        self.height = height
+        self.width = width
+        self.image_mode = image_mode
+        
+        self.sources = sources
+        valid_sources = ["upload", "clipboard", None]
+        if isinstance(sources, str):
+            self.sources = [sources]
+        if self.sources is None:
+            self.sources = []
+        if self.sources is not None:
+            for source in self.sources:
+                if source not in valid_sources:
+                    raise ValueError(
+                        f"`sources` must a list consisting of elements in {valid_sources}"
+                    )
+        
+        self.show_download_button = show_download_button
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
+        self.show_clear_button = show_clear_button
+
+        self.boxes_alpha = boxes_alpha
+        self.box_min_size = box_min_size
+        if label_list:
+            self.label_list = [(l, i) for i, l in enumerate(label_list)]
+        else:
+            self.label_list = None
+        
+        # Parse colors
+        self.label_colors = label_colors
+        if self.label_colors:
+            if (not isinstance(self.label_colors, list)
+                or self.label_list is None
+                or len(self.label_colors) != len(self.label_list)):
+                raise ValueError("``label_colors`` must be a list with the "
+                                 "same length as ``label_list``")
+            for i, color in enumerate(self.label_colors):
+                if isinstance(color, str):
+                    if len(color) != 7 or color[0] != "#":
+                        raise ValueError(f"Invalid color value {color}")
+                elif isinstance(color, (list, tuple)):
+                    self.label_colors[i] = rgb2hex(*color)
+
+        super().__init__(
+            label=label,
+            every=None,
+            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,
+            value=value,
+        )
+
+    def preprocess_image(self, image: FileData | None) -> str | None:
+        if image is None:
+            return None
+        file_path = Path(image.path)
+        if image.orig_name:
+            p = Path(image.orig_name)
+            name = p.stem
+            suffix = p.suffix.replace(".", "")
+            if suffix in ["jpg", "jpeg"]:
+                suffix = "jpeg"
+        else:
+            name = "image"
+            suffix = "png"
+
+        if suffix.lower() == "svg":
+            return str(file_path)
+        
+        im = PIL.Image.open(file_path)
+        exif = im.getexif()
+        # 274 is the code for image rotation and 1 means "correct orientation"
+        if exif.get(274, 1) != 1 and hasattr(ImageOps, "exif_transpose"):
+            try:
+                im = ImageOps.exif_transpose(im)
+            except Exception:
+                warnings.warn(
+                    f"Failed to transpose image {file_path} based on EXIF data."
+                )
+        with warnings.catch_warnings():
+            warnings.simplefilter("ignore")
+            im = im.convert(self.image_mode)
+        return image_utils.format_image(
+            im,
+            cast(Literal["numpy", "pil", "filepath"], self.image_type),
+            self.GRADIO_CACHE,
+            name=name,
+            format=suffix,
+        )
+
+    def preprocess_boxes(self, boxes: List[dict] | None) -> list:
+        if not boxes:
+            return []
+        for box in boxes:
+            if "color" in box:
+                match = re.match(r'rgb\((\d+), (\d+), (\d+)\)', box["color"])
+                if match:
+                    box["color"] = tuple(int(match.group(i)) for i in range(1, 4))
+            scale_factor = box["scaleFactor"] if "scaleFactor" in box else 1
+            box["xmin"] = round(box["xmin"] / scale_factor)
+            box["ymin"] = round(box["ymin"] / scale_factor)
+            box["xmax"] = round(box["xmax"] / scale_factor)
+            box["ymax"] = round(box["ymax"] / scale_factor)
+        return boxes
+
+    def preprocess(self, payload: AnnotatedImageData | None) -> dict | None:
+        """
+        Parameters:
+            payload: an AnnotatedImageData object.
+        Returns:
+            A dict with the image and boxes or None.
+        """
+        if payload is None:
+            return None
+        
+        ret_value = {
+            "image": self.preprocess_image(payload.image),
+            "boxes": self.preprocess_boxes(payload.boxes)
+        }
+        return ret_value
+
+    def postprocess(self, value: dict | None) -> AnnotatedImageData | None:
+        """
+        Parameters:
+            value: A dict with an image and an optional list of boxes or None.
+        Returns:
+            Returns an AnnotatedImageData object.
+        """
+        # Check value
+        if value is None:
+            return None
+        if not isinstance(value, dict):
+            raise ValueError(f"``value`` must be a dict. Got {type(value)}")
+    
+        # Check and get boxes
+        boxes = value.setdefault("boxes", [])
+        if boxes:
+            if not isinstance(value["boxes"], (list, tuple)):
+                raise ValueError(f"'boxes' must be a list of dicts. Got "
+                                 f"{type(value['boxes'])}")
+            for box in value["boxes"]:
+                if (not isinstance(box, dict)
+                    or not set(box.keys()).issubset({"label", "xmin", "ymin", "xmax", "ymax", "color"})
+                    or not set(box.keys()).issuperset({"xmin", "ymin", "xmax", "ymax"})
+                    ):
+                    raise ValueError("Box must be a dict with the following "
+                                     "keys: 'xmin', 'ymin', 'xmax', 'ymax', "
+                                     f"['label', 'color']'. Got {box}")
+
+        # Check and parse image
+        image = value.setdefault("image", None)
+        if image is not None:
+            if isinstance(image, str) and image.lower().endswith(".svg"):
+                image = FileData(path=image, orig_name=Path(image).name)
+            else:
+                saved = image_utils.save_image(image, self.GRADIO_CACHE)
+                orig_name = Path(saved).name if Path(saved).exists() else None
+                image = FileData(path=saved, orig_name=orig_name)
+        else:
+            raise ValueError(f"An image must be provided. Got {value}")
+        
+        return AnnotatedImageData(image=image, boxes=boxes)
+
+    def example_inputs(self) -> Any:
+        return {
+            "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+            "boxes": [
+                {
+                    "xmin": 30,
+                    "ymin": 70,
+                    "xmax": 530,
+                    "ymax": 500,
+                    "label": "Gradio",
+                    "color": (250,185,0),
+                }
+            ]
+        }
+
+    
+    def clear(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def change(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def upload(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
diff --git a/src/backend/gradio_image_annotation/templates/component/__vite-browser-external-2447137e.js b/src/backend/gradio_image_annotation/templates/component/__vite-browser-external-2447137e.js
new file mode 100644
index 0000000000000000000000000000000000000000..a935c1d40fdca65888380f1b1716fc086957bbe9
--- /dev/null
+++ b/src/backend/gradio_image_annotation/templates/component/__vite-browser-external-2447137e.js
@@ -0,0 +1,4 @@
+const e = {};
+export {
+  e as default
+};
diff --git a/src/backend/gradio_image_annotation/templates/component/index.js b/src/backend/gradio_image_annotation/templates/component/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..513f8955f74f5179814a41b2e0fa9108ea998944
--- /dev/null
+++ b/src/backend/gradio_image_annotation/templates/component/index.js
@@ -0,0 +1,12778 @@
+const {
+  SvelteComponent: Va,
+  assign: Xa,
+  create_slot: Wa,
+  detach: Za,
+  element: Ya,
+  get_all_dirty_from_scope: Ja,
+  get_slot_changes: Qa,
+  get_spread_update: Ka,
+  init: $a,
+  insert: eu,
+  safe_not_equal: tu,
+  set_dynamic_element_data: Es,
+  set_style: Pe,
+  toggle_class: tt,
+  transition_in: pr,
+  transition_out: wr,
+  update_slot_base: nu
+} = window.__gradio__svelte__internal;
+function iu(t) {
+  let e, n, i;
+  const l = (
+    /*#slots*/
+    t[18].default
+  ), s = Wa(
+    l,
+    t,
+    /*$$scope*/
+    t[17],
+    null
+  );
+  let o = [
+    { "data-testid": (
+      /*test_id*/
+      t[7]
+    ) },
+    { id: (
+      /*elem_id*/
+      t[2]
+    ) },
+    {
+      class: n = "block " + /*elem_classes*/
+      t[3].join(" ") + " svelte-1t38q2d"
+    }
+  ], r = {};
+  for (let a = 0; a < o.length; a += 1)
+    r = Xa(r, o[a]);
+  return {
+    c() {
+      e = Ya(
+        /*tag*/
+        t[14]
+      ), s && s.c(), Es(
+        /*tag*/
+        t[14]
+      )(e, r), tt(
+        e,
+        "hidden",
+        /*visible*/
+        t[10] === !1
+      ), tt(
+        e,
+        "padded",
+        /*padding*/
+        t[6]
+      ), tt(
+        e,
+        "border_focus",
+        /*border_mode*/
+        t[5] === "focus"
+      ), tt(e, "hide-container", !/*explicit_call*/
+      t[8] && !/*container*/
+      t[9]), Pe(
+        e,
+        "height",
+        /*get_dimension*/
+        t[15](
+          /*height*/
+          t[0]
+        )
+      ), Pe(e, "width", typeof /*width*/
+      t[1] == "number" ? `calc(min(${/*width*/
+      t[1]}px, 100%))` : (
+        /*get_dimension*/
+        t[15](
+          /*width*/
+          t[1]
+        )
+      )), Pe(
+        e,
+        "border-style",
+        /*variant*/
+        t[4]
+      ), Pe(
+        e,
+        "overflow",
+        /*allow_overflow*/
+        t[11] ? "visible" : "hidden"
+      ), Pe(
+        e,
+        "flex-grow",
+        /*scale*/
+        t[12]
+      ), Pe(e, "min-width", `calc(min(${/*min_width*/
+      t[13]}px, 100%))`), Pe(e, "border-width", "var(--block-border-width)");
+    },
+    m(a, u) {
+      eu(a, e, u), s && s.m(e, null), i = !0;
+    },
+    p(a, u) {
+      s && s.p && (!i || u & /*$$scope*/
+      131072) && nu(
+        s,
+        l,
+        a,
+        /*$$scope*/
+        a[17],
+        i ? Qa(
+          l,
+          /*$$scope*/
+          a[17],
+          u,
+          null
+        ) : Ja(
+          /*$$scope*/
+          a[17]
+        ),
+        null
+      ), Es(
+        /*tag*/
+        a[14]
+      )(e, r = Ka(o, [
+        (!i || u & /*test_id*/
+        128) && { "data-testid": (
+          /*test_id*/
+          a[7]
+        ) },
+        (!i || u & /*elem_id*/
+        4) && { id: (
+          /*elem_id*/
+          a[2]
+        ) },
+        (!i || u & /*elem_classes*/
+        8 && n !== (n = "block " + /*elem_classes*/
+        a[3].join(" ") + " svelte-1t38q2d")) && { class: n }
+      ])), tt(
+        e,
+        "hidden",
+        /*visible*/
+        a[10] === !1
+      ), tt(
+        e,
+        "padded",
+        /*padding*/
+        a[6]
+      ), tt(
+        e,
+        "border_focus",
+        /*border_mode*/
+        a[5] === "focus"
+      ), tt(e, "hide-container", !/*explicit_call*/
+      a[8] && !/*container*/
+      a[9]), u & /*height*/
+      1 && Pe(
+        e,
+        "height",
+        /*get_dimension*/
+        a[15](
+          /*height*/
+          a[0]
+        )
+      ), u & /*width*/
+      2 && Pe(e, "width", typeof /*width*/
+      a[1] == "number" ? `calc(min(${/*width*/
+      a[1]}px, 100%))` : (
+        /*get_dimension*/
+        a[15](
+          /*width*/
+          a[1]
+        )
+      )), u & /*variant*/
+      16 && Pe(
+        e,
+        "border-style",
+        /*variant*/
+        a[4]
+      ), u & /*allow_overflow*/
+      2048 && Pe(
+        e,
+        "overflow",
+        /*allow_overflow*/
+        a[11] ? "visible" : "hidden"
+      ), u & /*scale*/
+      4096 && Pe(
+        e,
+        "flex-grow",
+        /*scale*/
+        a[12]
+      ), u & /*min_width*/
+      8192 && Pe(e, "min-width", `calc(min(${/*min_width*/
+      a[13]}px, 100%))`);
+    },
+    i(a) {
+      i || (pr(s, a), i = !0);
+    },
+    o(a) {
+      wr(s, a), i = !1;
+    },
+    d(a) {
+      a && Za(e), s && s.d(a);
+    }
+  };
+}
+function lu(t) {
+  let e, n = (
+    /*tag*/
+    t[14] && iu(t)
+  );
+  return {
+    c() {
+      n && n.c();
+    },
+    m(i, l) {
+      n && n.m(i, l), e = !0;
+    },
+    p(i, [l]) {
+      /*tag*/
+      i[14] && n.p(i, l);
+    },
+    i(i) {
+      e || (pr(n, i), e = !0);
+    },
+    o(i) {
+      wr(n, i), e = !1;
+    },
+    d(i) {
+      n && n.d(i);
+    }
+  };
+}
+function su(t, e, n) {
+  let { $$slots: i = {}, $$scope: l } = e, { height: s = void 0 } = e, { width: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: a = [] } = e, { variant: u = "solid" } = e, { border_mode: f = "base" } = e, { padding: _ = !0 } = e, { type: h = "normal" } = e, { test_id: c = void 0 } = e, { explicit_call: d = !1 } = e, { container: m = !0 } = e, { visible: b = !0 } = e, { allow_overflow: p = !0 } = e, { scale: y = null } = e, { min_width: w = 0 } = e, C = h === "fieldset" ? "fieldset" : "div";
+  const P = (E) => {
+    if (E !== void 0) {
+      if (typeof E == "number")
+        return E + "px";
+      if (typeof E == "string")
+        return E;
+    }
+  };
+  return t.$$set = (E) => {
+    "height" in E && n(0, s = E.height), "width" in E && n(1, o = E.width), "elem_id" in E && n(2, r = E.elem_id), "elem_classes" in E && n(3, a = E.elem_classes), "variant" in E && n(4, u = E.variant), "border_mode" in E && n(5, f = E.border_mode), "padding" in E && n(6, _ = E.padding), "type" in E && n(16, h = E.type), "test_id" in E && n(7, c = E.test_id), "explicit_call" in E && n(8, d = E.explicit_call), "container" in E && n(9, m = E.container), "visible" in E && n(10, b = E.visible), "allow_overflow" in E && n(11, p = E.allow_overflow), "scale" in E && n(12, y = E.scale), "min_width" in E && n(13, w = E.min_width), "$$scope" in E && n(17, l = E.$$scope);
+  }, [
+    s,
+    o,
+    r,
+    a,
+    u,
+    f,
+    _,
+    c,
+    d,
+    m,
+    b,
+    p,
+    y,
+    w,
+    C,
+    P,
+    h,
+    l,
+    i
+  ];
+}
+class ou extends Va {
+  constructor(e) {
+    super(), $a(this, e, su, lu, tu, {
+      height: 0,
+      width: 1,
+      elem_id: 2,
+      elem_classes: 3,
+      variant: 4,
+      border_mode: 5,
+      padding: 6,
+      type: 16,
+      test_id: 7,
+      explicit_call: 8,
+      container: 9,
+      visible: 10,
+      allow_overflow: 11,
+      scale: 12,
+      min_width: 13
+    });
+  }
+}
+const {
+  SvelteComponent: ru,
+  attr: au,
+  create_slot: uu,
+  detach: fu,
+  element: cu,
+  get_all_dirty_from_scope: _u,
+  get_slot_changes: hu,
+  init: du,
+  insert: mu,
+  safe_not_equal: gu,
+  transition_in: bu,
+  transition_out: pu,
+  update_slot_base: wu
+} = window.__gradio__svelte__internal;
+function vu(t) {
+  let e, n;
+  const i = (
+    /*#slots*/
+    t[1].default
+  ), l = uu(
+    i,
+    t,
+    /*$$scope*/
+    t[0],
+    null
+  );
+  return {
+    c() {
+      e = cu("div"), l && l.c(), au(e, "class", "svelte-1hnfib2");
+    },
+    m(s, o) {
+      mu(s, e, o), l && l.m(e, null), n = !0;
+    },
+    p(s, [o]) {
+      l && l.p && (!n || o & /*$$scope*/
+      1) && wu(
+        l,
+        i,
+        s,
+        /*$$scope*/
+        s[0],
+        n ? hu(
+          i,
+          /*$$scope*/
+          s[0],
+          o,
+          null
+        ) : _u(
+          /*$$scope*/
+          s[0]
+        ),
+        null
+      );
+    },
+    i(s) {
+      n || (bu(l, s), n = !0);
+    },
+    o(s) {
+      pu(l, s), n = !1;
+    },
+    d(s) {
+      s && fu(e), l && l.d(s);
+    }
+  };
+}
+function yu(t, e, n) {
+  let { $$slots: i = {}, $$scope: l } = e;
+  return t.$$set = (s) => {
+    "$$scope" in s && n(0, l = s.$$scope);
+  }, [l, i];
+}
+class Eu extends ru {
+  constructor(e) {
+    super(), du(this, e, yu, vu, gu, {});
+  }
+}
+const {
+  SvelteComponent: ku,
+  attr: ks,
+  check_outros: Su,
+  create_component: Cu,
+  create_slot: Au,
+  destroy_component: Bu,
+  detach: ui,
+  element: Tu,
+  empty: Hu,
+  get_all_dirty_from_scope: Pu,
+  get_slot_changes: Nu,
+  group_outros: Lu,
+  init: Iu,
+  insert: fi,
+  mount_component: Mu,
+  safe_not_equal: Ou,
+  set_data: Du,
+  space: Ru,
+  text: Uu,
+  toggle_class: Rt,
+  transition_in: vn,
+  transition_out: ci,
+  update_slot_base: Fu
+} = window.__gradio__svelte__internal;
+function Ss(t) {
+  let e, n;
+  return e = new Eu({
+    props: {
+      $$slots: { default: [qu] },
+      $$scope: { ctx: t }
+    }
+  }), {
+    c() {
+      Cu(e.$$.fragment);
+    },
+    m(i, l) {
+      Mu(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l & /*$$scope, info*/
+      10 && (s.$$scope = { dirty: l, ctx: i }), e.$set(s);
+    },
+    i(i) {
+      n || (vn(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      ci(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Bu(e, i);
+    }
+  };
+}
+function qu(t) {
+  let e;
+  return {
+    c() {
+      e = Uu(
+        /*info*/
+        t[1]
+      );
+    },
+    m(n, i) {
+      fi(n, e, i);
+    },
+    p(n, i) {
+      i & /*info*/
+      2 && Du(
+        e,
+        /*info*/
+        n[1]
+      );
+    },
+    d(n) {
+      n && ui(e);
+    }
+  };
+}
+function zu(t) {
+  let e, n, i, l;
+  const s = (
+    /*#slots*/
+    t[2].default
+  ), o = Au(
+    s,
+    t,
+    /*$$scope*/
+    t[3],
+    null
+  );
+  let r = (
+    /*info*/
+    t[1] && Ss(t)
+  );
+  return {
+    c() {
+      e = Tu("span"), o && o.c(), n = Ru(), r && r.c(), i = Hu(), ks(e, "data-testid", "block-info"), ks(e, "class", "svelte-22c38v"), Rt(e, "sr-only", !/*show_label*/
+      t[0]), Rt(e, "hide", !/*show_label*/
+      t[0]), Rt(
+        e,
+        "has-info",
+        /*info*/
+        t[1] != null
+      );
+    },
+    m(a, u) {
+      fi(a, e, u), o && o.m(e, null), fi(a, n, u), r && r.m(a, u), fi(a, i, u), l = !0;
+    },
+    p(a, [u]) {
+      o && o.p && (!l || u & /*$$scope*/
+      8) && Fu(
+        o,
+        s,
+        a,
+        /*$$scope*/
+        a[3],
+        l ? Nu(
+          s,
+          /*$$scope*/
+          a[3],
+          u,
+          null
+        ) : Pu(
+          /*$$scope*/
+          a[3]
+        ),
+        null
+      ), (!l || u & /*show_label*/
+      1) && Rt(e, "sr-only", !/*show_label*/
+      a[0]), (!l || u & /*show_label*/
+      1) && Rt(e, "hide", !/*show_label*/
+      a[0]), (!l || u & /*info*/
+      2) && Rt(
+        e,
+        "has-info",
+        /*info*/
+        a[1] != null
+      ), /*info*/
+      a[1] ? r ? (r.p(a, u), u & /*info*/
+      2 && vn(r, 1)) : (r = Ss(a), r.c(), vn(r, 1), r.m(i.parentNode, i)) : r && (Lu(), ci(r, 1, 1, () => {
+        r = null;
+      }), Su());
+    },
+    i(a) {
+      l || (vn(o, a), vn(r), l = !0);
+    },
+    o(a) {
+      ci(o, a), ci(r), l = !1;
+    },
+    d(a) {
+      a && (ui(e), ui(n), ui(i)), o && o.d(a), r && r.d(a);
+    }
+  };
+}
+function ju(t, e, n) {
+  let { $$slots: i = {}, $$scope: l } = e, { show_label: s = !0 } = e, { info: o = void 0 } = e;
+  return t.$$set = (r) => {
+    "show_label" in r && n(0, s = r.show_label), "info" in r && n(1, o = r.info), "$$scope" in r && n(3, l = r.$$scope);
+  }, [s, o, i, l];
+}
+class vr extends ku {
+  constructor(e) {
+    super(), Iu(this, e, ju, zu, Ou, { show_label: 0, info: 1 });
+  }
+}
+const {
+  SvelteComponent: Gu,
+  append: Zi,
+  attr: Vn,
+  create_component: xu,
+  destroy_component: Vu,
+  detach: Xu,
+  element: Cs,
+  init: Wu,
+  insert: Zu,
+  mount_component: Yu,
+  safe_not_equal: Ju,
+  set_data: Qu,
+  space: Ku,
+  text: $u,
+  toggle_class: nt,
+  transition_in: ef,
+  transition_out: tf
+} = window.__gradio__svelte__internal;
+function nf(t) {
+  let e, n, i, l, s, o;
+  return i = new /*Icon*/
+  t[1]({}), {
+    c() {
+      e = Cs("label"), n = Cs("span"), xu(i.$$.fragment), l = Ku(), s = $u(
+        /*label*/
+        t[0]
+      ), Vn(n, "class", "svelte-9gxdi0"), Vn(e, "for", ""), Vn(e, "data-testid", "block-label"), Vn(e, "class", "svelte-9gxdi0"), nt(e, "hide", !/*show_label*/
+      t[2]), nt(e, "sr-only", !/*show_label*/
+      t[2]), nt(
+        e,
+        "float",
+        /*float*/
+        t[4]
+      ), nt(
+        e,
+        "hide-label",
+        /*disable*/
+        t[3]
+      );
+    },
+    m(r, a) {
+      Zu(r, e, a), Zi(e, n), Yu(i, n, null), Zi(e, l), Zi(e, s), o = !0;
+    },
+    p(r, [a]) {
+      (!o || a & /*label*/
+      1) && Qu(
+        s,
+        /*label*/
+        r[0]
+      ), (!o || a & /*show_label*/
+      4) && nt(e, "hide", !/*show_label*/
+      r[2]), (!o || a & /*show_label*/
+      4) && nt(e, "sr-only", !/*show_label*/
+      r[2]), (!o || a & /*float*/
+      16) && nt(
+        e,
+        "float",
+        /*float*/
+        r[4]
+      ), (!o || a & /*disable*/
+      8) && nt(
+        e,
+        "hide-label",
+        /*disable*/
+        r[3]
+      );
+    },
+    i(r) {
+      o || (ef(i.$$.fragment, r), o = !0);
+    },
+    o(r) {
+      tf(i.$$.fragment, r), o = !1;
+    },
+    d(r) {
+      r && Xu(e), Vu(i);
+    }
+  };
+}
+function lf(t, e, n) {
+  let { label: i = null } = e, { Icon: l } = e, { show_label: s = !0 } = e, { disable: o = !1 } = e, { float: r = !0 } = e;
+  return t.$$set = (a) => {
+    "label" in a && n(0, i = a.label), "Icon" in a && n(1, l = a.Icon), "show_label" in a && n(2, s = a.show_label), "disable" in a && n(3, o = a.disable), "float" in a && n(4, r = a.float);
+  }, [i, l, s, o, r];
+}
+class sf extends Gu {
+  constructor(e) {
+    super(), Wu(this, e, lf, nf, Ju, {
+      label: 0,
+      Icon: 1,
+      show_label: 2,
+      disable: 3,
+      float: 4
+    });
+  }
+}
+const {
+  SvelteComponent: of,
+  append: Ol,
+  attr: Qe,
+  bubble: rf,
+  create_component: af,
+  destroy_component: uf,
+  detach: yr,
+  element: Dl,
+  init: ff,
+  insert: Er,
+  listen: cf,
+  mount_component: _f,
+  safe_not_equal: hf,
+  set_data: df,
+  set_style: Xn,
+  space: mf,
+  text: gf,
+  toggle_class: Oe,
+  transition_in: bf,
+  transition_out: pf
+} = window.__gradio__svelte__internal;
+function As(t) {
+  let e, n;
+  return {
+    c() {
+      e = Dl("span"), n = gf(
+        /*label*/
+        t[1]
+      ), Qe(e, "class", "svelte-lpi64a");
+    },
+    m(i, l) {
+      Er(i, e, l), Ol(e, n);
+    },
+    p(i, l) {
+      l & /*label*/
+      2 && df(
+        n,
+        /*label*/
+        i[1]
+      );
+    },
+    d(i) {
+      i && yr(e);
+    }
+  };
+}
+function wf(t) {
+  let e, n, i, l, s, o, r, a = (
+    /*show_label*/
+    t[2] && As(t)
+  );
+  return l = new /*Icon*/
+  t[0]({}), {
+    c() {
+      e = Dl("button"), a && a.c(), n = mf(), i = Dl("div"), af(l.$$.fragment), Qe(i, "class", "svelte-lpi64a"), Oe(
+        i,
+        "small",
+        /*size*/
+        t[4] === "small"
+      ), Oe(
+        i,
+        "large",
+        /*size*/
+        t[4] === "large"
+      ), e.disabled = /*disabled*/
+      t[7], Qe(
+        e,
+        "aria-label",
+        /*label*/
+        t[1]
+      ), Qe(
+        e,
+        "aria-haspopup",
+        /*hasPopup*/
+        t[8]
+      ), Qe(
+        e,
+        "title",
+        /*label*/
+        t[1]
+      ), Qe(e, "class", "svelte-lpi64a"), Oe(
+        e,
+        "pending",
+        /*pending*/
+        t[3]
+      ), Oe(
+        e,
+        "padded",
+        /*padded*/
+        t[5]
+      ), Oe(
+        e,
+        "highlight",
+        /*highlight*/
+        t[6]
+      ), Oe(
+        e,
+        "transparent",
+        /*transparent*/
+        t[9]
+      ), Xn(e, "color", !/*disabled*/
+      t[7] && /*_color*/
+      t[11] ? (
+        /*_color*/
+        t[11]
+      ) : "var(--block-label-text-color)"), Xn(e, "--bg-color", /*disabled*/
+      t[7] ? "auto" : (
+        /*background*/
+        t[10]
+      ));
+    },
+    m(u, f) {
+      Er(u, e, f), a && a.m(e, null), Ol(e, n), Ol(e, i), _f(l, i, null), s = !0, o || (r = cf(
+        e,
+        "click",
+        /*click_handler*/
+        t[13]
+      ), o = !0);
+    },
+    p(u, [f]) {
+      /*show_label*/
+      u[2] ? a ? a.p(u, f) : (a = As(u), a.c(), a.m(e, n)) : a && (a.d(1), a = null), (!s || f & /*size*/
+      16) && Oe(
+        i,
+        "small",
+        /*size*/
+        u[4] === "small"
+      ), (!s || f & /*size*/
+      16) && Oe(
+        i,
+        "large",
+        /*size*/
+        u[4] === "large"
+      ), (!s || f & /*disabled*/
+      128) && (e.disabled = /*disabled*/
+      u[7]), (!s || f & /*label*/
+      2) && Qe(
+        e,
+        "aria-label",
+        /*label*/
+        u[1]
+      ), (!s || f & /*hasPopup*/
+      256) && Qe(
+        e,
+        "aria-haspopup",
+        /*hasPopup*/
+        u[8]
+      ), (!s || f & /*label*/
+      2) && Qe(
+        e,
+        "title",
+        /*label*/
+        u[1]
+      ), (!s || f & /*pending*/
+      8) && Oe(
+        e,
+        "pending",
+        /*pending*/
+        u[3]
+      ), (!s || f & /*padded*/
+      32) && Oe(
+        e,
+        "padded",
+        /*padded*/
+        u[5]
+      ), (!s || f & /*highlight*/
+      64) && Oe(
+        e,
+        "highlight",
+        /*highlight*/
+        u[6]
+      ), (!s || f & /*transparent*/
+      512) && Oe(
+        e,
+        "transparent",
+        /*transparent*/
+        u[9]
+      ), f & /*disabled, _color*/
+      2176 && Xn(e, "color", !/*disabled*/
+      u[7] && /*_color*/
+      u[11] ? (
+        /*_color*/
+        u[11]
+      ) : "var(--block-label-text-color)"), f & /*disabled, background*/
+      1152 && Xn(e, "--bg-color", /*disabled*/
+      u[7] ? "auto" : (
+        /*background*/
+        u[10]
+      ));
+    },
+    i(u) {
+      s || (bf(l.$$.fragment, u), s = !0);
+    },
+    o(u) {
+      pf(l.$$.fragment, u), s = !1;
+    },
+    d(u) {
+      u && yr(e), a && a.d(), uf(l), o = !1, r();
+    }
+  };
+}
+function vf(t, e, n) {
+  let i, { Icon: l } = e, { label: s = "" } = e, { show_label: o = !1 } = e, { pending: r = !1 } = e, { size: a = "small" } = e, { padded: u = !0 } = e, { highlight: f = !1 } = e, { disabled: _ = !1 } = e, { hasPopup: h = !1 } = e, { color: c = "var(--block-label-text-color)" } = e, { transparent: d = !1 } = e, { background: m = "var(--background-fill-primary)" } = e;
+  function b(p) {
+    rf.call(this, t, p);
+  }
+  return t.$$set = (p) => {
+    "Icon" in p && n(0, l = p.Icon), "label" in p && n(1, s = p.label), "show_label" in p && n(2, o = p.show_label), "pending" in p && n(3, r = p.pending), "size" in p && n(4, a = p.size), "padded" in p && n(5, u = p.padded), "highlight" in p && n(6, f = p.highlight), "disabled" in p && n(7, _ = p.disabled), "hasPopup" in p && n(8, h = p.hasPopup), "color" in p && n(12, c = p.color), "transparent" in p && n(9, d = p.transparent), "background" in p && n(10, m = p.background);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*highlight, color*/
+    4160 && n(11, i = f ? "var(--color-accent)" : c);
+  }, [
+    l,
+    s,
+    o,
+    r,
+    a,
+    u,
+    f,
+    _,
+    h,
+    d,
+    m,
+    i,
+    c,
+    b
+  ];
+}
+class as extends of {
+  constructor(e) {
+    super(), ff(this, e, vf, wf, hf, {
+      Icon: 0,
+      label: 1,
+      show_label: 2,
+      pending: 3,
+      size: 4,
+      padded: 5,
+      highlight: 6,
+      disabled: 7,
+      hasPopup: 8,
+      color: 12,
+      transparent: 9,
+      background: 10
+    });
+  }
+}
+const {
+  SvelteComponent: yf,
+  append: Ef,
+  attr: Yi,
+  binding_callbacks: kf,
+  create_slot: Sf,
+  detach: Cf,
+  element: Bs,
+  get_all_dirty_from_scope: Af,
+  get_slot_changes: Bf,
+  init: Tf,
+  insert: Hf,
+  safe_not_equal: Pf,
+  toggle_class: it,
+  transition_in: Nf,
+  transition_out: Lf,
+  update_slot_base: If
+} = window.__gradio__svelte__internal;
+function Mf(t) {
+  let e, n, i;
+  const l = (
+    /*#slots*/
+    t[5].default
+  ), s = Sf(
+    l,
+    t,
+    /*$$scope*/
+    t[4],
+    null
+  );
+  return {
+    c() {
+      e = Bs("div"), n = Bs("div"), s && s.c(), Yi(n, "class", "icon svelte-3w3rth"), Yi(e, "class", "empty svelte-3w3rth"), Yi(e, "aria-label", "Empty value"), it(
+        e,
+        "small",
+        /*size*/
+        t[0] === "small"
+      ), it(
+        e,
+        "large",
+        /*size*/
+        t[0] === "large"
+      ), it(
+        e,
+        "unpadded_box",
+        /*unpadded_box*/
+        t[1]
+      ), it(
+        e,
+        "small_parent",
+        /*parent_height*/
+        t[3]
+      );
+    },
+    m(o, r) {
+      Hf(o, e, r), Ef(e, n), s && s.m(n, null), t[6](e), i = !0;
+    },
+    p(o, [r]) {
+      s && s.p && (!i || r & /*$$scope*/
+      16) && If(
+        s,
+        l,
+        o,
+        /*$$scope*/
+        o[4],
+        i ? Bf(
+          l,
+          /*$$scope*/
+          o[4],
+          r,
+          null
+        ) : Af(
+          /*$$scope*/
+          o[4]
+        ),
+        null
+      ), (!i || r & /*size*/
+      1) && it(
+        e,
+        "small",
+        /*size*/
+        o[0] === "small"
+      ), (!i || r & /*size*/
+      1) && it(
+        e,
+        "large",
+        /*size*/
+        o[0] === "large"
+      ), (!i || r & /*unpadded_box*/
+      2) && it(
+        e,
+        "unpadded_box",
+        /*unpadded_box*/
+        o[1]
+      ), (!i || r & /*parent_height*/
+      8) && it(
+        e,
+        "small_parent",
+        /*parent_height*/
+        o[3]
+      );
+    },
+    i(o) {
+      i || (Nf(s, o), i = !0);
+    },
+    o(o) {
+      Lf(s, o), i = !1;
+    },
+    d(o) {
+      o && Cf(e), s && s.d(o), t[6](null);
+    }
+  };
+}
+function Of(t) {
+  let e, n = t[0], i = 1;
+  for (; i < t.length; ) {
+    const l = t[i], s = t[i + 1];
+    if (i += 2, (l === "optionalAccess" || l === "optionalCall") && n == null)
+      return;
+    l === "access" || l === "optionalAccess" ? (e = n, n = s(n)) : (l === "call" || l === "optionalCall") && (n = s((...o) => n.call(e, ...o)), e = void 0);
+  }
+  return n;
+}
+function Df(t, e, n) {
+  let i, { $$slots: l = {}, $$scope: s } = e, { size: o = "small" } = e, { unpadded_box: r = !1 } = e, a;
+  function u(_) {
+    if (!_)
+      return !1;
+    const { height: h } = _.getBoundingClientRect(), { height: c } = Of([
+      _,
+      "access",
+      (d) => d.parentElement,
+      "optionalAccess",
+      (d) => d.getBoundingClientRect,
+      "call",
+      (d) => d()
+    ]) || { height: h };
+    return h > c + 2;
+  }
+  function f(_) {
+    kf[_ ? "unshift" : "push"](() => {
+      a = _, n(2, a);
+    });
+  }
+  return t.$$set = (_) => {
+    "size" in _ && n(0, o = _.size), "unpadded_box" in _ && n(1, r = _.unpadded_box), "$$scope" in _ && n(4, s = _.$$scope);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*el*/
+    4 && n(3, i = u(a));
+  }, [o, r, a, i, s, l, f];
+}
+class Rf extends yf {
+  constructor(e) {
+    super(), Tf(this, e, Df, Mf, Pf, { size: 0, unpadded_box: 1 });
+  }
+}
+const {
+  SvelteComponent: Uf,
+  append: Ji,
+  attr: Ue,
+  detach: Ff,
+  init: qf,
+  insert: zf,
+  noop: Qi,
+  safe_not_equal: jf,
+  set_style: Ge,
+  svg_element: Wn
+} = window.__gradio__svelte__internal;
+function Gf(t) {
+  let e, n, i, l;
+  return {
+    c() {
+      e = Wn("svg"), n = Wn("g"), i = Wn("path"), l = Wn("path"), Ue(i, "d", "M18,6L6.087,17.913"), Ge(i, "fill", "none"), Ge(i, "fill-rule", "nonzero"), Ge(i, "stroke-width", "2px"), Ue(n, "transform", "matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"), Ue(l, "d", "M4.364,4.364L19.636,19.636"), Ge(l, "fill", "none"), Ge(l, "fill-rule", "nonzero"), Ge(l, "stroke-width", "2px"), Ue(e, "width", "100%"), Ue(e, "height", "100%"), Ue(e, "viewBox", "0 0 24 24"), Ue(e, "version", "1.1"), Ue(e, "xmlns", "http://www.w3.org/2000/svg"), Ue(e, "xmlns:xlink", "http://www.w3.org/1999/xlink"), Ue(e, "xml:space", "preserve"), Ue(e, "stroke", "currentColor"), Ge(e, "fill-rule", "evenodd"), Ge(e, "clip-rule", "evenodd"), Ge(e, "stroke-linecap", "round"), Ge(e, "stroke-linejoin", "round");
+    },
+    m(s, o) {
+      zf(s, e, o), Ji(e, n), Ji(n, i), Ji(e, l);
+    },
+    p: Qi,
+    i: Qi,
+    o: Qi,
+    d(s) {
+      s && Ff(e);
+    }
+  };
+}
+class kr extends Uf {
+  constructor(e) {
+    super(), qf(this, e, null, Gf, jf, {});
+  }
+}
+const {
+  SvelteComponent: xf,
+  append: Vf,
+  attr: mn,
+  detach: Xf,
+  init: Wf,
+  insert: Zf,
+  noop: Ki,
+  safe_not_equal: Yf,
+  svg_element: Ts
+} = window.__gradio__svelte__internal;
+function Jf(t) {
+  let e, n;
+  return {
+    c() {
+      e = Ts("svg"), n = Ts("path"), mn(n, "d", "M23,20a5,5,0,0,0-3.89,1.89L11.8,17.32a4.46,4.46,0,0,0,0-2.64l7.31-4.57A5,5,0,1,0,18,7a4.79,4.79,0,0,0,.2,1.32l-7.31,4.57a5,5,0,1,0,0,6.22l7.31,4.57A4.79,4.79,0,0,0,18,25a5,5,0,1,0,5-5ZM23,4a3,3,0,1,1-3,3A3,3,0,0,1,23,4ZM7,19a3,3,0,1,1,3-3A3,3,0,0,1,7,19Zm16,9a3,3,0,1,1,3-3A3,3,0,0,1,23,28Z"), mn(n, "fill", "currentColor"), mn(e, "id", "icon"), mn(e, "xmlns", "http://www.w3.org/2000/svg"), mn(e, "viewBox", "0 0 32 32");
+    },
+    m(i, l) {
+      Zf(i, e, l), Vf(e, n);
+    },
+    p: Ki,
+    i: Ki,
+    o: Ki,
+    d(i) {
+      i && Xf(e);
+    }
+  };
+}
+class Qf extends xf {
+  constructor(e) {
+    super(), Wf(this, e, null, Jf, Yf, {});
+  }
+}
+const {
+  SvelteComponent: Kf,
+  append: $f,
+  attr: Ut,
+  detach: ec,
+  init: tc,
+  insert: nc,
+  noop: $i,
+  safe_not_equal: ic,
+  svg_element: Hs
+} = window.__gradio__svelte__internal;
+function lc(t) {
+  let e, n;
+  return {
+    c() {
+      e = Hs("svg"), n = Hs("path"), Ut(n, "fill", "currentColor"), Ut(n, "d", "M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"), Ut(e, "xmlns", "http://www.w3.org/2000/svg"), Ut(e, "width", "100%"), Ut(e, "height", "100%"), Ut(e, "viewBox", "0 0 32 32");
+    },
+    m(i, l) {
+      nc(i, e, l), $f(e, n);
+    },
+    p: $i,
+    i: $i,
+    o: $i,
+    d(i) {
+      i && ec(e);
+    }
+  };
+}
+class sc extends Kf {
+  constructor(e) {
+    super(), tc(this, e, null, lc, ic, {});
+  }
+}
+const {
+  SvelteComponent: oc,
+  append: rc,
+  attr: Ft,
+  detach: ac,
+  init: uc,
+  insert: fc,
+  noop: el,
+  safe_not_equal: cc,
+  svg_element: Ps
+} = window.__gradio__svelte__internal;
+function _c(t) {
+  let e, n;
+  return {
+    c() {
+      e = Ps("svg"), n = Ps("path"), Ft(n, "d", "M5 8l4 4 4-4z"), Ft(e, "class", "dropdown-arrow svelte-145leq6"), Ft(e, "xmlns", "http://www.w3.org/2000/svg"), Ft(e, "width", "100%"), Ft(e, "height", "100%"), Ft(e, "viewBox", "0 0 18 18");
+    },
+    m(i, l) {
+      fc(i, e, l), rc(e, n);
+    },
+    p: el,
+    i: el,
+    o: el,
+    d(i) {
+      i && ac(e);
+    }
+  };
+}
+class hc extends oc {
+  constructor(e) {
+    super(), uc(this, e, null, _c, cc, {});
+  }
+}
+const {
+  SvelteComponent: dc,
+  append: mc,
+  attr: Fe,
+  detach: gc,
+  init: bc,
+  insert: pc,
+  noop: tl,
+  safe_not_equal: wc,
+  svg_element: Ns
+} = window.__gradio__svelte__internal;
+function vc(t) {
+  let e, n;
+  return {
+    c() {
+      e = Ns("svg"), n = Ns("path"), Fe(n, "d", "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"), Fe(e, "xmlns", "http://www.w3.org/2000/svg"), Fe(e, "width", "100%"), Fe(e, "height", "100%"), Fe(e, "viewBox", "0 0 24 24"), Fe(e, "fill", "none"), Fe(e, "stroke", "currentColor"), Fe(e, "stroke-width", "1.5"), Fe(e, "stroke-linecap", "round"), Fe(e, "stroke-linejoin", "round"), Fe(e, "class", "feather feather-edit-2");
+    },
+    m(i, l) {
+      pc(i, e, l), mc(e, n);
+    },
+    p: tl,
+    i: tl,
+    o: tl,
+    d(i) {
+      i && gc(e);
+    }
+  };
+}
+class yc extends dc {
+  constructor(e) {
+    super(), bc(this, e, null, vc, wc, {});
+  }
+}
+const {
+  SvelteComponent: Ec,
+  append: nl,
+  attr: oe,
+  detach: kc,
+  init: Sc,
+  insert: Cc,
+  noop: il,
+  safe_not_equal: Ac,
+  svg_element: Zn
+} = window.__gradio__svelte__internal;
+function Bc(t) {
+  let e, n, i, l;
+  return {
+    c() {
+      e = Zn("svg"), n = Zn("rect"), i = Zn("circle"), l = Zn("polyline"), oe(n, "x", "3"), oe(n, "y", "3"), oe(n, "width", "18"), oe(n, "height", "18"), oe(n, "rx", "2"), oe(n, "ry", "2"), oe(i, "cx", "8.5"), oe(i, "cy", "8.5"), oe(i, "r", "1.5"), oe(l, "points", "21 15 16 10 5 21"), oe(e, "xmlns", "http://www.w3.org/2000/svg"), oe(e, "width", "100%"), oe(e, "height", "100%"), oe(e, "viewBox", "0 0 24 24"), oe(e, "fill", "none"), oe(e, "stroke", "currentColor"), oe(e, "stroke-width", "1.5"), oe(e, "stroke-linecap", "round"), oe(e, "stroke-linejoin", "round"), oe(e, "class", "feather feather-image");
+    },
+    m(s, o) {
+      Cc(s, e, o), nl(e, n), nl(e, i), nl(e, l);
+    },
+    p: il,
+    i: il,
+    o: il,
+    d(s) {
+      s && kc(e);
+    }
+  };
+}
+let Sr = class extends Ec {
+  constructor(e) {
+    super(), Sc(this, e, null, Bc, Ac, {});
+  }
+};
+const {
+  SvelteComponent: Tc,
+  append: Hc,
+  attr: qt,
+  detach: Pc,
+  init: Nc,
+  insert: Lc,
+  noop: ll,
+  safe_not_equal: Ic,
+  svg_element: Ls
+} = window.__gradio__svelte__internal;
+function Mc(t) {
+  let e, n;
+  return {
+    c() {
+      e = Ls("svg"), n = Ls("path"), qt(n, "fill", "currentColor"), qt(n, "d", "M13.75 2a2.25 2.25 0 0 1 2.236 2.002V4h1.764A2.25 2.25 0 0 1 20 6.25V11h-1.5V6.25a.75.75 0 0 0-.75-.75h-2.129c-.404.603-1.091 1-1.871 1h-3.5c-.78 0-1.467-.397-1.871-1H6.25a.75.75 0 0 0-.75.75v13.5c0 .414.336.75.75.75h4.78a3.99 3.99 0 0 0 .505 1.5H6.25A2.25 2.25 0 0 1 4 19.75V6.25A2.25 2.25 0 0 1 6.25 4h1.764a2.25 2.25 0 0 1 2.236-2h3.5Zm2.245 2.096L16 4.25c0-.052-.002-.103-.005-.154ZM13.75 3.5h-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5ZM15 12a3 3 0 0 0-3 3v5c0 .556.151 1.077.415 1.524l3.494-3.494a2.25 2.25 0 0 1 3.182 0l3.494 3.494c.264-.447.415-.968.415-1.524v-5a3 3 0 0 0-3-3h-5Zm0 11a2.985 2.985 0 0 1-1.524-.415l3.494-3.494a.75.75 0 0 1 1.06 0l3.494 3.494A2.985 2.985 0 0 1 20 23h-5Zm5-7a1 1 0 1 1 0-2a1 1 0 0 1 0 2Z"), qt(e, "xmlns", "http://www.w3.org/2000/svg"), qt(e, "width", "100%"), qt(e, "height", "100%"), qt(e, "viewBox", "0 0 24 24");
+    },
+    m(i, l) {
+      Lc(i, e, l), Hc(e, n);
+    },
+    p: ll,
+    i: ll,
+    o: ll,
+    d(i) {
+      i && Pc(e);
+    }
+  };
+}
+class Cr extends Tc {
+  constructor(e) {
+    super(), Nc(this, e, null, Mc, Ic, {});
+  }
+}
+const {
+  SvelteComponent: Oc,
+  append: Yn,
+  attr: re,
+  detach: Dc,
+  init: Rc,
+  insert: Uc,
+  noop: sl,
+  safe_not_equal: Fc,
+  svg_element: gn
+} = window.__gradio__svelte__internal;
+function qc(t) {
+  let e, n, i, l, s;
+  return {
+    c() {
+      e = gn("svg"), n = gn("path"), i = gn("path"), l = gn("line"), s = gn("line"), re(n, "d", "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"), re(i, "d", "M19 10v2a7 7 0 0 1-14 0v-2"), re(l, "x1", "12"), re(l, "y1", "19"), re(l, "x2", "12"), re(l, "y2", "23"), re(s, "x1", "8"), re(s, "y1", "23"), re(s, "x2", "16"), re(s, "y2", "23"), re(e, "xmlns", "http://www.w3.org/2000/svg"), re(e, "width", "100%"), re(e, "height", "100%"), re(e, "viewBox", "0 0 24 24"), re(e, "fill", "none"), re(e, "stroke", "currentColor"), re(e, "stroke-width", "2"), re(e, "stroke-linecap", "round"), re(e, "stroke-linejoin", "round"), re(e, "class", "feather feather-mic");
+    },
+    m(o, r) {
+      Uc(o, e, r), Yn(e, n), Yn(e, i), Yn(e, l), Yn(e, s);
+    },
+    p: sl,
+    i: sl,
+    o: sl,
+    d(o) {
+      o && Dc(e);
+    }
+  };
+}
+class zc extends Oc {
+  constructor(e) {
+    super(), Rc(this, e, null, qc, Fc, {});
+  }
+}
+const {
+  SvelteComponent: jc,
+  append: ol,
+  attr: be,
+  detach: Gc,
+  init: xc,
+  insert: Vc,
+  noop: rl,
+  safe_not_equal: Xc,
+  svg_element: Jn
+} = window.__gradio__svelte__internal;
+function Wc(t) {
+  let e, n, i, l;
+  return {
+    c() {
+      e = Jn("svg"), n = Jn("path"), i = Jn("polyline"), l = Jn("line"), be(n, "d", "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"), be(i, "points", "17 8 12 3 7 8"), be(l, "x1", "12"), be(l, "y1", "3"), be(l, "x2", "12"), be(l, "y2", "15"), be(e, "xmlns", "http://www.w3.org/2000/svg"), be(e, "width", "90%"), be(e, "height", "90%"), be(e, "viewBox", "0 0 24 24"), be(e, "fill", "none"), be(e, "stroke", "currentColor"), be(e, "stroke-width", "2"), be(e, "stroke-linecap", "round"), be(e, "stroke-linejoin", "round"), be(e, "class", "feather feather-upload");
+    },
+    m(s, o) {
+      Vc(s, e, o), ol(e, n), ol(e, i), ol(e, l);
+    },
+    p: rl,
+    i: rl,
+    o: rl,
+    d(s) {
+      s && Gc(e);
+    }
+  };
+}
+let Ar = class extends jc {
+  constructor(e) {
+    super(), xc(this, e, null, Wc, Xc, {});
+  }
+};
+const {
+  SvelteComponent: Zc,
+  append: Is,
+  attr: lt,
+  detach: Yc,
+  init: Jc,
+  insert: Qc,
+  noop: al,
+  safe_not_equal: Kc,
+  svg_element: ul
+} = window.__gradio__svelte__internal;
+function $c(t) {
+  let e, n, i;
+  return {
+    c() {
+      e = ul("svg"), n = ul("path"), i = ul("path"), lt(n, "fill", "currentColor"), lt(n, "d", "M12 2c-4.963 0-9 4.038-9 9c0 3.328 1.82 6.232 4.513 7.79l-2.067 1.378A1 1 0 0 0 6 22h12a1 1 0 0 0 .555-1.832l-2.067-1.378C19.18 17.232 21 14.328 21 11c0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7c0-3.86 3.141-7 7-7s7 3.14 7 7c0 3.859-3.141 7-7 7z"), lt(i, "fill", "currentColor"), lt(i, "d", "M12 6c-2.757 0-5 2.243-5 5s2.243 5 5 5s5-2.243 5-5s-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3z"), lt(e, "xmlns", "http://www.w3.org/2000/svg"), lt(e, "width", "100%"), lt(e, "height", "100%"), lt(e, "viewBox", "0 0 24 24");
+    },
+    m(l, s) {
+      Qc(l, e, s), Is(e, n), Is(e, i);
+    },
+    p: al,
+    i: al,
+    o: al,
+    d(l) {
+      l && Yc(e);
+    }
+  };
+}
+class e_ extends Zc {
+  constructor(e) {
+    super(), Jc(this, e, null, $c, Kc, {});
+  }
+}
+const t_ = [
+  { color: "red", primary: 600, secondary: 100 },
+  { color: "green", primary: 600, secondary: 100 },
+  { color: "blue", primary: 600, secondary: 100 },
+  { color: "yellow", primary: 500, secondary: 100 },
+  { color: "purple", primary: 600, secondary: 100 },
+  { color: "teal", primary: 600, secondary: 100 },
+  { color: "orange", primary: 600, secondary: 100 },
+  { color: "cyan", primary: 600, secondary: 100 },
+  { color: "lime", primary: 500, secondary: 100 },
+  { color: "pink", primary: 600, secondary: 100 }
+], Ms = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000",
+  white: "#fff",
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  gray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  },
+  stone: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917",
+    950: "#0c0a09"
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  },
+  amber: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12",
+    950: "#422006"
+  },
+  lime: {
+    50: "#f7fee7",
+    100: "#ecfccb",
+    200: "#d9f99d",
+    300: "#bef264",
+    400: "#a3e635",
+    500: "#84cc16",
+    600: "#65a30d",
+    700: "#4d7c0f",
+    800: "#3f6212",
+    900: "#365314",
+    950: "#1a2e05"
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  emerald: {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b",
+    950: "#022c22"
+  },
+  teal: {
+    50: "#f0fdfa",
+    100: "#ccfbf1",
+    200: "#99f6e4",
+    300: "#5eead4",
+    400: "#2dd4bf",
+    500: "#14b8a6",
+    600: "#0d9488",
+    700: "#0f766e",
+    800: "#115e59",
+    900: "#134e4a",
+    950: "#042f2e"
+  },
+  cyan: {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+    800: "#155e75",
+    900: "#164e63",
+    950: "#083344"
+  },
+  sky: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e",
+    950: "#082f49"
+  },
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  indigo: {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81",
+    950: "#1e1b4b"
+  },
+  violet: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  },
+  purple: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  },
+  fuchsia: {
+    50: "#fdf4ff",
+    100: "#fae8ff",
+    200: "#f5d0fe",
+    300: "#f0abfc",
+    400: "#e879f9",
+    500: "#d946ef",
+    600: "#c026d3",
+    700: "#a21caf",
+    800: "#86198f",
+    900: "#701a75",
+    950: "#4a044e"
+  },
+  pink: {
+    50: "#fdf2f8",
+    100: "#fce7f3",
+    200: "#fbcfe8",
+    300: "#f9a8d4",
+    400: "#f472b6",
+    500: "#ec4899",
+    600: "#db2777",
+    700: "#be185d",
+    800: "#9d174d",
+    900: "#831843",
+    950: "#500724"
+  },
+  rose: {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337",
+    950: "#4c0519"
+  }
+};
+t_.reduce(
+  (t, { color: e, primary: n, secondary: i }) => ({
+    ...t,
+    [e]: {
+      primary: Ms[e][n],
+      secondary: Ms[e][i]
+    }
+  }),
+  {}
+);
+function n_(t) {
+  let e, n = t[0], i = 1;
+  for (; i < t.length; ) {
+    const l = t[i], s = t[i + 1];
+    if (i += 2, (l === "optionalAccess" || l === "optionalCall") && n == null)
+      return;
+    l === "access" || l === "optionalAccess" ? (e = n, n = s(n)) : (l === "call" || l === "optionalCall") && (n = s((...o) => n.call(e, ...o)), e = void 0);
+  }
+  return n;
+}
+class _i extends Error {
+  constructor(e) {
+    super(e), this.name = "ShareError";
+  }
+}
+async function i_(t, e) {
+  if (window.__gradio_space__ == null)
+    throw new _i("Must be on Spaces to share.");
+  let n, i, l;
+  if (e === "url") {
+    const a = await fetch(t);
+    n = await a.blob(), i = a.headers.get("content-type") || "", l = a.headers.get("content-disposition") || "";
+  } else
+    n = l_(t), i = t.split(";")[0].split(":")[1], l = "file" + i.split("/")[1];
+  const s = new File([n], l, { type: i }), o = await fetch("https://huggingface.co/uploads", {
+    method: "POST",
+    body: s,
+    headers: {
+      "Content-Type": s.type,
+      "X-Requested-With": "XMLHttpRequest"
+    }
+  });
+  if (!o.ok) {
+    if (n_([o, "access", (a) => a.headers, "access", (a) => a.get, "call", (a) => a("content-type"), "optionalAccess", (a) => a.includes, "call", (a) => a("application/json")])) {
+      const a = await o.json();
+      throw new _i(`Upload failed: ${a.error}`);
+    }
+    throw new _i("Upload failed.");
+  }
+  return await o.text();
+}
+function l_(t) {
+  for (var e = t.split(","), n = e[0].match(/:(.*?);/)[1], i = atob(e[1]), l = i.length, s = new Uint8Array(l); l--; )
+    s[l] = i.charCodeAt(l);
+  return new Blob([s], { type: n });
+}
+const {
+  SvelteComponent: s_,
+  create_component: o_,
+  destroy_component: r_,
+  init: a_,
+  mount_component: u_,
+  safe_not_equal: f_,
+  transition_in: c_,
+  transition_out: __
+} = window.__gradio__svelte__internal, { createEventDispatcher: h_ } = window.__gradio__svelte__internal;
+function d_(t) {
+  let e, n;
+  return e = new as({
+    props: {
+      Icon: Qf,
+      label: (
+        /*i18n*/
+        t[2]("common.share")
+      ),
+      pending: (
+        /*pending*/
+        t[3]
+      )
+    }
+  }), e.$on(
+    "click",
+    /*click_handler*/
+    t[5]
+  ), {
+    c() {
+      o_(e.$$.fragment);
+    },
+    m(i, l) {
+      u_(e, i, l), n = !0;
+    },
+    p(i, [l]) {
+      const s = {};
+      l & /*i18n*/
+      4 && (s.label = /*i18n*/
+      i[2]("common.share")), l & /*pending*/
+      8 && (s.pending = /*pending*/
+      i[3]), e.$set(s);
+    },
+    i(i) {
+      n || (c_(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      __(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      r_(e, i);
+    }
+  };
+}
+function m_(t, e, n) {
+  const i = h_();
+  let { formatter: l } = e, { value: s } = e, { i18n: o } = e, r = !1;
+  const a = async () => {
+    try {
+      n(3, r = !0);
+      const u = await l(s);
+      i("share", { description: u });
+    } catch (u) {
+      console.error(u);
+      let f = u instanceof _i ? u.message : "Share failed.";
+      i("error", f);
+    } finally {
+      n(3, r = !1);
+    }
+  };
+  return t.$$set = (u) => {
+    "formatter" in u && n(0, l = u.formatter), "value" in u && n(1, s = u.value), "i18n" in u && n(2, o = u.i18n);
+  }, [l, s, o, r, i, a];
+}
+class g_ extends s_ {
+  constructor(e) {
+    super(), a_(this, e, m_, d_, f_, { formatter: 0, value: 1, i18n: 2 });
+  }
+}
+const {
+  SvelteComponent: b_,
+  append: St,
+  attr: Rl,
+  check_outros: p_,
+  create_component: Br,
+  destroy_component: Tr,
+  detach: hi,
+  element: Ul,
+  group_outros: w_,
+  init: v_,
+  insert: di,
+  mount_component: Hr,
+  safe_not_equal: y_,
+  set_data: Fl,
+  space: ql,
+  text: yn,
+  toggle_class: Os,
+  transition_in: pi,
+  transition_out: wi
+} = window.__gradio__svelte__internal;
+function E_(t) {
+  let e, n;
+  return e = new Ar({}), {
+    c() {
+      Br(e.$$.fragment);
+    },
+    m(i, l) {
+      Hr(e, i, l), n = !0;
+    },
+    i(i) {
+      n || (pi(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      wi(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Tr(e, i);
+    }
+  };
+}
+function k_(t) {
+  let e, n;
+  return e = new Cr({}), {
+    c() {
+      Br(e.$$.fragment);
+    },
+    m(i, l) {
+      Hr(e, i, l), n = !0;
+    },
+    i(i) {
+      n || (pi(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      wi(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Tr(e, i);
+    }
+  };
+}
+function Ds(t) {
+  let e, n, i = (
+    /*i18n*/
+    t[1]("common.or") + ""
+  ), l, s, o, r = (
+    /*message*/
+    (t[2] || /*i18n*/
+    t[1]("upload_text.click_to_upload")) + ""
+  ), a;
+  return {
+    c() {
+      e = Ul("span"), n = yn("- "), l = yn(i), s = yn(" -"), o = ql(), a = yn(r), Rl(e, "class", "or svelte-kzcjhc");
+    },
+    m(u, f) {
+      di(u, e, f), St(e, n), St(e, l), St(e, s), di(u, o, f), di(u, a, f);
+    },
+    p(u, f) {
+      f & /*i18n*/
+      2 && i !== (i = /*i18n*/
+      u[1]("common.or") + "") && Fl(l, i), f & /*message, i18n*/
+      6 && r !== (r = /*message*/
+      (u[2] || /*i18n*/
+      u[1]("upload_text.click_to_upload")) + "") && Fl(a, r);
+    },
+    d(u) {
+      u && (hi(e), hi(o), hi(a));
+    }
+  };
+}
+function S_(t) {
+  let e, n, i, l, s, o = (
+    /*i18n*/
+    t[1](
+      /*defs*/
+      t[5][
+        /*type*/
+        t[0]
+      ] || /*defs*/
+      t[5].file
+    ) + ""
+  ), r, a, u;
+  const f = [k_, E_], _ = [];
+  function h(d, m) {
+    return (
+      /*type*/
+      d[0] === "clipboard" ? 0 : 1
+    );
+  }
+  i = h(t), l = _[i] = f[i](t);
+  let c = (
+    /*mode*/
+    t[3] !== "short" && Ds(t)
+  );
+  return {
+    c() {
+      e = Ul("div"), n = Ul("span"), l.c(), s = ql(), r = yn(o), a = ql(), c && c.c(), Rl(n, "class", "icon-wrap svelte-kzcjhc"), Os(
+        n,
+        "hovered",
+        /*hovered*/
+        t[4]
+      ), Rl(e, "class", "wrap svelte-kzcjhc");
+    },
+    m(d, m) {
+      di(d, e, m), St(e, n), _[i].m(n, null), St(e, s), St(e, r), St(e, a), c && c.m(e, null), u = !0;
+    },
+    p(d, [m]) {
+      let b = i;
+      i = h(d), i !== b && (w_(), wi(_[b], 1, 1, () => {
+        _[b] = null;
+      }), p_(), l = _[i], l || (l = _[i] = f[i](d), l.c()), pi(l, 1), l.m(n, null)), (!u || m & /*hovered*/
+      16) && Os(
+        n,
+        "hovered",
+        /*hovered*/
+        d[4]
+      ), (!u || m & /*i18n, type*/
+      3) && o !== (o = /*i18n*/
+      d[1](
+        /*defs*/
+        d[5][
+          /*type*/
+          d[0]
+        ] || /*defs*/
+        d[5].file
+      ) + "") && Fl(r, o), /*mode*/
+      d[3] !== "short" ? c ? c.p(d, m) : (c = Ds(d), c.c(), c.m(e, null)) : c && (c.d(1), c = null);
+    },
+    i(d) {
+      u || (pi(l), u = !0);
+    },
+    o(d) {
+      wi(l), u = !1;
+    },
+    d(d) {
+      d && hi(e), _[i].d(), c && c.d();
+    }
+  };
+}
+function C_(t, e, n) {
+  let { type: i = "file" } = e, { i18n: l } = e, { message: s = void 0 } = e, { mode: o = "full" } = e, { hovered: r = !1 } = e;
+  const a = {
+    image: "upload_text.drop_image",
+    video: "upload_text.drop_video",
+    audio: "upload_text.drop_audio",
+    file: "upload_text.drop_file",
+    csv: "upload_text.drop_csv",
+    gallery: "upload_text.drop_gallery",
+    clipboard: "upload_text.paste_clipboard"
+  };
+  return t.$$set = (u) => {
+    "type" in u && n(0, i = u.type), "i18n" in u && n(1, l = u.i18n), "message" in u && n(2, s = u.message), "mode" in u && n(3, o = u.mode), "hovered" in u && n(4, r = u.hovered);
+  }, [i, l, s, o, r, a];
+}
+class Pr extends b_ {
+  constructor(e) {
+    super(), v_(this, e, C_, S_, y_, {
+      type: 0,
+      i18n: 1,
+      message: 2,
+      mode: 3,
+      hovered: 4
+    });
+  }
+}
+const {
+  SvelteComponent: A_,
+  append: fl,
+  attr: Ye,
+  check_outros: En,
+  create_component: Li,
+  destroy_component: Ii,
+  detach: fn,
+  element: Un,
+  empty: B_,
+  group_outros: kn,
+  init: T_,
+  insert: cn,
+  listen: Mi,
+  mount_component: Oi,
+  safe_not_equal: H_,
+  space: cl,
+  toggle_class: ct,
+  transition_in: fe,
+  transition_out: Ae
+} = window.__gradio__svelte__internal;
+function Rs(t) {
+  let e, n = (
+    /*sources*/
+    t[1].includes("upload")
+  ), i, l = (
+    /*sources*/
+    t[1].includes("microphone")
+  ), s, o = (
+    /*sources*/
+    t[1].includes("webcam")
+  ), r, a = (
+    /*sources*/
+    t[1].includes("clipboard")
+  ), u, f = n && Us(t), _ = l && Fs(t), h = o && qs(t), c = a && zs(t);
+  return {
+    c() {
+      e = Un("span"), f && f.c(), i = cl(), _ && _.c(), s = cl(), h && h.c(), r = cl(), c && c.c(), Ye(e, "class", "source-selection svelte-1jp3vgd"), Ye(e, "data-testid", "source-select");
+    },
+    m(d, m) {
+      cn(d, e, m), f && f.m(e, null), fl(e, i), _ && _.m(e, null), fl(e, s), h && h.m(e, null), fl(e, r), c && c.m(e, null), u = !0;
+    },
+    p(d, m) {
+      m & /*sources*/
+      2 && (n = /*sources*/
+      d[1].includes("upload")), n ? f ? (f.p(d, m), m & /*sources*/
+      2 && fe(f, 1)) : (f = Us(d), f.c(), fe(f, 1), f.m(e, i)) : f && (kn(), Ae(f, 1, 1, () => {
+        f = null;
+      }), En()), m & /*sources*/
+      2 && (l = /*sources*/
+      d[1].includes("microphone")), l ? _ ? (_.p(d, m), m & /*sources*/
+      2 && fe(_, 1)) : (_ = Fs(d), _.c(), fe(_, 1), _.m(e, s)) : _ && (kn(), Ae(_, 1, 1, () => {
+        _ = null;
+      }), En()), m & /*sources*/
+      2 && (o = /*sources*/
+      d[1].includes("webcam")), o ? h ? (h.p(d, m), m & /*sources*/
+      2 && fe(h, 1)) : (h = qs(d), h.c(), fe(h, 1), h.m(e, r)) : h && (kn(), Ae(h, 1, 1, () => {
+        h = null;
+      }), En()), m & /*sources*/
+      2 && (a = /*sources*/
+      d[1].includes("clipboard")), a ? c ? (c.p(d, m), m & /*sources*/
+      2 && fe(c, 1)) : (c = zs(d), c.c(), fe(c, 1), c.m(e, null)) : c && (kn(), Ae(c, 1, 1, () => {
+        c = null;
+      }), En());
+    },
+    i(d) {
+      u || (fe(f), fe(_), fe(h), fe(c), u = !0);
+    },
+    o(d) {
+      Ae(f), Ae(_), Ae(h), Ae(c), u = !1;
+    },
+    d(d) {
+      d && fn(e), f && f.d(), _ && _.d(), h && h.d(), c && c.d();
+    }
+  };
+}
+function Us(t) {
+  let e, n, i, l, s;
+  return n = new Ar({}), {
+    c() {
+      e = Un("button"), Li(n.$$.fragment), Ye(e, "class", "icon svelte-1jp3vgd"), Ye(e, "aria-label", "Upload file"), ct(
+        e,
+        "selected",
+        /*active_source*/
+        t[0] === "upload" || !/*active_source*/
+        t[0]
+      );
+    },
+    m(o, r) {
+      cn(o, e, r), Oi(n, e, null), i = !0, l || (s = Mi(
+        e,
+        "click",
+        /*click_handler*/
+        t[6]
+      ), l = !0);
+    },
+    p(o, r) {
+      (!i || r & /*active_source*/
+      1) && ct(
+        e,
+        "selected",
+        /*active_source*/
+        o[0] === "upload" || !/*active_source*/
+        o[0]
+      );
+    },
+    i(o) {
+      i || (fe(n.$$.fragment, o), i = !0);
+    },
+    o(o) {
+      Ae(n.$$.fragment, o), i = !1;
+    },
+    d(o) {
+      o && fn(e), Ii(n), l = !1, s();
+    }
+  };
+}
+function Fs(t) {
+  let e, n, i, l, s;
+  return n = new zc({}), {
+    c() {
+      e = Un("button"), Li(n.$$.fragment), Ye(e, "class", "icon svelte-1jp3vgd"), Ye(e, "aria-label", "Record audio"), ct(
+        e,
+        "selected",
+        /*active_source*/
+        t[0] === "microphone"
+      );
+    },
+    m(o, r) {
+      cn(o, e, r), Oi(n, e, null), i = !0, l || (s = Mi(
+        e,
+        "click",
+        /*click_handler_1*/
+        t[7]
+      ), l = !0);
+    },
+    p(o, r) {
+      (!i || r & /*active_source*/
+      1) && ct(
+        e,
+        "selected",
+        /*active_source*/
+        o[0] === "microphone"
+      );
+    },
+    i(o) {
+      i || (fe(n.$$.fragment, o), i = !0);
+    },
+    o(o) {
+      Ae(n.$$.fragment, o), i = !1;
+    },
+    d(o) {
+      o && fn(e), Ii(n), l = !1, s();
+    }
+  };
+}
+function qs(t) {
+  let e, n, i, l, s;
+  return n = new e_({}), {
+    c() {
+      e = Un("button"), Li(n.$$.fragment), Ye(e, "class", "icon svelte-1jp3vgd"), Ye(e, "aria-label", "Capture from camera"), ct(
+        e,
+        "selected",
+        /*active_source*/
+        t[0] === "webcam"
+      );
+    },
+    m(o, r) {
+      cn(o, e, r), Oi(n, e, null), i = !0, l || (s = Mi(
+        e,
+        "click",
+        /*click_handler_2*/
+        t[8]
+      ), l = !0);
+    },
+    p(o, r) {
+      (!i || r & /*active_source*/
+      1) && ct(
+        e,
+        "selected",
+        /*active_source*/
+        o[0] === "webcam"
+      );
+    },
+    i(o) {
+      i || (fe(n.$$.fragment, o), i = !0);
+    },
+    o(o) {
+      Ae(n.$$.fragment, o), i = !1;
+    },
+    d(o) {
+      o && fn(e), Ii(n), l = !1, s();
+    }
+  };
+}
+function zs(t) {
+  let e, n, i, l, s;
+  return n = new Cr({}), {
+    c() {
+      e = Un("button"), Li(n.$$.fragment), Ye(e, "class", "icon svelte-1jp3vgd"), Ye(e, "aria-label", "Paste from clipboard"), ct(
+        e,
+        "selected",
+        /*active_source*/
+        t[0] === "clipboard"
+      );
+    },
+    m(o, r) {
+      cn(o, e, r), Oi(n, e, null), i = !0, l || (s = Mi(
+        e,
+        "click",
+        /*click_handler_3*/
+        t[9]
+      ), l = !0);
+    },
+    p(o, r) {
+      (!i || r & /*active_source*/
+      1) && ct(
+        e,
+        "selected",
+        /*active_source*/
+        o[0] === "clipboard"
+      );
+    },
+    i(o) {
+      i || (fe(n.$$.fragment, o), i = !0);
+    },
+    o(o) {
+      Ae(n.$$.fragment, o), i = !1;
+    },
+    d(o) {
+      o && fn(e), Ii(n), l = !1, s();
+    }
+  };
+}
+function P_(t) {
+  let e, n, i = (
+    /*unique_sources*/
+    t[2].length > 1 && Rs(t)
+  );
+  return {
+    c() {
+      i && i.c(), e = B_();
+    },
+    m(l, s) {
+      i && i.m(l, s), cn(l, e, s), n = !0;
+    },
+    p(l, [s]) {
+      /*unique_sources*/
+      l[2].length > 1 ? i ? (i.p(l, s), s & /*unique_sources*/
+      4 && fe(i, 1)) : (i = Rs(l), i.c(), fe(i, 1), i.m(e.parentNode, e)) : i && (kn(), Ae(i, 1, 1, () => {
+        i = null;
+      }), En());
+    },
+    i(l) {
+      n || (fe(i), n = !0);
+    },
+    o(l) {
+      Ae(i), n = !1;
+    },
+    d(l) {
+      l && fn(e), i && i.d(l);
+    }
+  };
+}
+function N_(t, e, n) {
+  let i, { sources: l } = e, { active_source: s } = e, { handle_clear: o = () => {
+  } } = e, { handle_select: r = () => {
+  } } = e;
+  async function a(c) {
+    o(), n(0, s = c), r(c);
+  }
+  const u = () => a("upload"), f = () => a("microphone"), _ = () => a("webcam"), h = () => a("clipboard");
+  return t.$$set = (c) => {
+    "sources" in c && n(1, l = c.sources), "active_source" in c && n(0, s = c.active_source), "handle_clear" in c && n(4, o = c.handle_clear), "handle_select" in c && n(5, r = c.handle_select);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*sources*/
+    2 && n(2, i = [...new Set(l)]);
+  }, [
+    s,
+    l,
+    i,
+    a,
+    o,
+    r,
+    u,
+    f,
+    _,
+    h
+  ];
+}
+class L_ extends A_ {
+  constructor(e) {
+    super(), T_(this, e, N_, P_, H_, {
+      sources: 1,
+      active_source: 0,
+      handle_clear: 4,
+      handle_select: 5
+    });
+  }
+}
+function Kt(t) {
+  let e = ["", "k", "M", "G", "T", "P", "E", "Z"], n = 0;
+  for (; t > 1e3 && n < e.length - 1; )
+    t /= 1e3, n++;
+  let i = e[n];
+  return (Number.isInteger(t) ? t : t.toFixed(1)) + i;
+}
+function Ht() {
+}
+function I_(t) {
+  return t();
+}
+function M_(t) {
+  t.forEach(I_);
+}
+function O_(t) {
+  return typeof t == "function";
+}
+function D_(t, e) {
+  return t != t ? e == e : t !== e || t && typeof t == "object" || typeof t == "function";
+}
+function R_(t, ...e) {
+  if (t == null) {
+    for (const i of e)
+      i(void 0);
+    return Ht;
+  }
+  const n = t.subscribe(...e);
+  return n.unsubscribe ? () => n.unsubscribe() : n;
+}
+function js(t) {
+  const e = typeof t == "string" && t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+  return e ? [parseFloat(e[1]), e[2] || "px"] : [
+    /** @type {number} */
+    t,
+    "px"
+  ];
+}
+const Nr = typeof window < "u";
+let Gs = Nr ? () => window.performance.now() : () => Date.now(), Lr = Nr ? (t) => requestAnimationFrame(t) : Ht;
+const nn = /* @__PURE__ */ new Set();
+function Ir(t) {
+  nn.forEach((e) => {
+    e.c(t) || (nn.delete(e), e.f());
+  }), nn.size !== 0 && Lr(Ir);
+}
+function U_(t) {
+  let e;
+  return nn.size === 0 && Lr(Ir), {
+    promise: new Promise((n) => {
+      nn.add(e = { c: t, f: n });
+    }),
+    abort() {
+      nn.delete(e);
+    }
+  };
+}
+function F_(t) {
+  const e = t - 1;
+  return e * e * e + 1;
+}
+function xs(t, { delay: e = 0, duration: n = 400, easing: i = F_, x: l = 0, y: s = 0, opacity: o = 0 } = {}) {
+  const r = getComputedStyle(t), a = +r.opacity, u = r.transform === "none" ? "" : r.transform, f = a * (1 - o), [_, h] = js(l), [c, d] = js(s);
+  return {
+    delay: e,
+    duration: n,
+    easing: i,
+    css: (m, b) => `
+			transform: ${u} translate(${(1 - m) * _}${h}, ${(1 - m) * c}${d});
+			opacity: ${a - f * b}`
+  };
+}
+const zt = [];
+function q_(t, e) {
+  return {
+    subscribe: Fn(t, e).subscribe
+  };
+}
+function Fn(t, e = Ht) {
+  let n;
+  const i = /* @__PURE__ */ new Set();
+  function l(r) {
+    if (D_(t, r) && (t = r, n)) {
+      const a = !zt.length;
+      for (const u of i)
+        u[1](), zt.push(u, t);
+      if (a) {
+        for (let u = 0; u < zt.length; u += 2)
+          zt[u][0](zt[u + 1]);
+        zt.length = 0;
+      }
+    }
+  }
+  function s(r) {
+    l(r(t));
+  }
+  function o(r, a = Ht) {
+    const u = [r, a];
+    return i.add(u), i.size === 1 && (n = e(l, s) || Ht), r(t), () => {
+      i.delete(u), i.size === 0 && n && (n(), n = null);
+    };
+  }
+  return { set: l, update: s, subscribe: o };
+}
+function _n(t, e, n) {
+  const i = !Array.isArray(t), l = i ? [t] : t;
+  if (!l.every(Boolean))
+    throw new Error("derived() expects stores as input, got a falsy value");
+  const s = e.length < 2;
+  return q_(n, (o, r) => {
+    let a = !1;
+    const u = [];
+    let f = 0, _ = Ht;
+    const h = () => {
+      if (f)
+        return;
+      _();
+      const d = e(i ? u[0] : u, o, r);
+      s ? o(d) : _ = O_(d) ? d : Ht;
+    }, c = l.map(
+      (d, m) => R_(
+        d,
+        (b) => {
+          u[m] = b, f &= ~(1 << m), a && h();
+        },
+        () => {
+          f |= 1 << m;
+        }
+      )
+    );
+    return a = !0, h(), function() {
+      M_(c), _(), a = !1;
+    };
+  });
+}
+function Vs(t) {
+  return Object.prototype.toString.call(t) === "[object Date]";
+}
+function zl(t, e, n, i) {
+  if (typeof n == "number" || Vs(n)) {
+    const l = i - n, s = (n - e) / (t.dt || 1 / 60), o = t.opts.stiffness * l, r = t.opts.damping * s, a = (o - r) * t.inv_mass, u = (s + a) * t.dt;
+    return Math.abs(u) < t.opts.precision && Math.abs(l) < t.opts.precision ? i : (t.settled = !1, Vs(n) ? new Date(n.getTime() + u) : n + u);
+  } else {
+    if (Array.isArray(n))
+      return n.map(
+        (l, s) => zl(t, e[s], n[s], i[s])
+      );
+    if (typeof n == "object") {
+      const l = {};
+      for (const s in n)
+        l[s] = zl(t, e[s], n[s], i[s]);
+      return l;
+    } else
+      throw new Error(`Cannot spring ${typeof n} values`);
+  }
+}
+function Xs(t, e = {}) {
+  const n = Fn(t), { stiffness: i = 0.15, damping: l = 0.8, precision: s = 0.01 } = e;
+  let o, r, a, u = t, f = t, _ = 1, h = 0, c = !1;
+  function d(b, p = {}) {
+    f = b;
+    const y = a = {};
+    return t == null || p.hard || m.stiffness >= 1 && m.damping >= 1 ? (c = !0, o = Gs(), u = b, n.set(t = f), Promise.resolve()) : (p.soft && (h = 1 / ((p.soft === !0 ? 0.5 : +p.soft) * 60), _ = 0), r || (o = Gs(), c = !1, r = U_((w) => {
+      if (c)
+        return c = !1, r = null, !1;
+      _ = Math.min(_ + h, 1);
+      const C = {
+        inv_mass: _,
+        opts: m,
+        settled: !0,
+        dt: (w - o) * 60 / 1e3
+      }, P = zl(C, u, t, f);
+      return o = w, u = t, n.set(t = P), C.settled && (r = null), !C.settled;
+    })), new Promise((w) => {
+      r.promise.then(() => {
+        y === a && w();
+      });
+    }));
+  }
+  const m = {
+    set: d,
+    update: (b, p) => d(b(f, t), p),
+    subscribe: n.subscribe,
+    stiffness: i,
+    damping: l,
+    precision: s
+  };
+  return m;
+}
+const {
+  SvelteComponent: z_,
+  append: qe,
+  attr: z,
+  component_subscribe: Ws,
+  detach: j_,
+  element: G_,
+  init: x_,
+  insert: V_,
+  noop: Zs,
+  safe_not_equal: X_,
+  set_style: Qn,
+  svg_element: ze,
+  toggle_class: Ys
+} = window.__gradio__svelte__internal, { onMount: W_ } = window.__gradio__svelte__internal;
+function Z_(t) {
+  let e, n, i, l, s, o, r, a, u, f, _, h;
+  return {
+    c() {
+      e = G_("div"), n = ze("svg"), i = ze("g"), l = ze("path"), s = ze("path"), o = ze("path"), r = ze("path"), a = ze("g"), u = ze("path"), f = ze("path"), _ = ze("path"), h = ze("path"), z(l, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), z(l, "fill", "#FF7C00"), z(l, "fill-opacity", "0.4"), z(l, "class", "svelte-43sxxs"), z(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), z(s, "fill", "#FF7C00"), z(s, "class", "svelte-43sxxs"), z(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), z(o, "fill", "#FF7C00"), z(o, "fill-opacity", "0.4"), z(o, "class", "svelte-43sxxs"), z(r, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), z(r, "fill", "#FF7C00"), z(r, "class", "svelte-43sxxs"), Qn(i, "transform", "translate(" + /*$top*/
+      t[1][0] + "px, " + /*$top*/
+      t[1][1] + "px)"), z(u, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), z(u, "fill", "#FF7C00"), z(u, "fill-opacity", "0.4"), z(u, "class", "svelte-43sxxs"), z(f, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), z(f, "fill", "#FF7C00"), z(f, "class", "svelte-43sxxs"), z(_, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), z(_, "fill", "#FF7C00"), z(_, "fill-opacity", "0.4"), z(_, "class", "svelte-43sxxs"), z(h, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), z(h, "fill", "#FF7C00"), z(h, "class", "svelte-43sxxs"), Qn(a, "transform", "translate(" + /*$bottom*/
+      t[2][0] + "px, " + /*$bottom*/
+      t[2][1] + "px)"), z(n, "viewBox", "-1200 -1200 3000 3000"), z(n, "fill", "none"), z(n, "xmlns", "http://www.w3.org/2000/svg"), z(n, "class", "svelte-43sxxs"), z(e, "class", "svelte-43sxxs"), Ys(
+        e,
+        "margin",
+        /*margin*/
+        t[0]
+      );
+    },
+    m(c, d) {
+      V_(c, e, d), qe(e, n), qe(n, i), qe(i, l), qe(i, s), qe(i, o), qe(i, r), qe(n, a), qe(a, u), qe(a, f), qe(a, _), qe(a, h);
+    },
+    p(c, [d]) {
+      d & /*$top*/
+      2 && Qn(i, "transform", "translate(" + /*$top*/
+      c[1][0] + "px, " + /*$top*/
+      c[1][1] + "px)"), d & /*$bottom*/
+      4 && Qn(a, "transform", "translate(" + /*$bottom*/
+      c[2][0] + "px, " + /*$bottom*/
+      c[2][1] + "px)"), d & /*margin*/
+      1 && Ys(
+        e,
+        "margin",
+        /*margin*/
+        c[0]
+      );
+    },
+    i: Zs,
+    o: Zs,
+    d(c) {
+      c && j_(e);
+    }
+  };
+}
+function Y_(t, e, n) {
+  let i, l, { margin: s = !0 } = e;
+  const o = Xs([0, 0]);
+  Ws(t, o, (h) => n(1, i = h));
+  const r = Xs([0, 0]);
+  Ws(t, r, (h) => n(2, l = h));
+  let a;
+  async function u() {
+    await Promise.all([o.set([125, 140]), r.set([-125, -140])]), await Promise.all([o.set([-125, 140]), r.set([125, -140])]), await Promise.all([o.set([-125, 0]), r.set([125, -0])]), await Promise.all([o.set([125, 0]), r.set([-125, 0])]);
+  }
+  async function f() {
+    await u(), a || f();
+  }
+  async function _() {
+    await Promise.all([o.set([125, 0]), r.set([-125, 0])]), f();
+  }
+  return W_(() => (_(), () => a = !0)), t.$$set = (h) => {
+    "margin" in h && n(0, s = h.margin);
+  }, [s, i, l, o, r];
+}
+class J_ extends z_ {
+  constructor(e) {
+    super(), x_(this, e, Y_, Z_, X_, { margin: 0 });
+  }
+}
+const {
+  SvelteComponent: Q_,
+  append: Ct,
+  attr: We,
+  binding_callbacks: Js,
+  check_outros: Mr,
+  create_component: K_,
+  create_slot: $_,
+  destroy_component: eh,
+  destroy_each: Or,
+  detach: M,
+  element: Ke,
+  empty: hn,
+  ensure_array_like: vi,
+  get_all_dirty_from_scope: th,
+  get_slot_changes: nh,
+  group_outros: Dr,
+  init: ih,
+  insert: O,
+  mount_component: lh,
+  noop: jl,
+  safe_not_equal: sh,
+  set_data: Re,
+  set_style: at,
+  space: Ze,
+  text: le,
+  toggle_class: De,
+  transition_in: ln,
+  transition_out: sn,
+  update_slot_base: oh
+} = window.__gradio__svelte__internal, { tick: rh } = window.__gradio__svelte__internal, { onDestroy: ah } = window.__gradio__svelte__internal, uh = (t) => ({}), Qs = (t) => ({});
+function Ks(t, e, n) {
+  const i = t.slice();
+  return i[38] = e[n], i[40] = n, i;
+}
+function $s(t, e, n) {
+  const i = t.slice();
+  return i[38] = e[n], i;
+}
+function fh(t) {
+  let e, n = (
+    /*i18n*/
+    t[1]("common.error") + ""
+  ), i, l, s;
+  const o = (
+    /*#slots*/
+    t[29].error
+  ), r = $_(
+    o,
+    t,
+    /*$$scope*/
+    t[28],
+    Qs
+  );
+  return {
+    c() {
+      e = Ke("span"), i = le(n), l = Ze(), r && r.c(), We(e, "class", "error svelte-1yserjw");
+    },
+    m(a, u) {
+      O(a, e, u), Ct(e, i), O(a, l, u), r && r.m(a, u), s = !0;
+    },
+    p(a, u) {
+      (!s || u[0] & /*i18n*/
+      2) && n !== (n = /*i18n*/
+      a[1]("common.error") + "") && Re(i, n), r && r.p && (!s || u[0] & /*$$scope*/
+      268435456) && oh(
+        r,
+        o,
+        a,
+        /*$$scope*/
+        a[28],
+        s ? nh(
+          o,
+          /*$$scope*/
+          a[28],
+          u,
+          uh
+        ) : th(
+          /*$$scope*/
+          a[28]
+        ),
+        Qs
+      );
+    },
+    i(a) {
+      s || (ln(r, a), s = !0);
+    },
+    o(a) {
+      sn(r, a), s = !1;
+    },
+    d(a) {
+      a && (M(e), M(l)), r && r.d(a);
+    }
+  };
+}
+function ch(t) {
+  let e, n, i, l, s, o, r, a, u, f = (
+    /*variant*/
+    t[8] === "default" && /*show_eta_bar*/
+    t[18] && /*show_progress*/
+    t[6] === "full" && eo(t)
+  );
+  function _(w, C) {
+    if (
+      /*progress*/
+      w[7]
+    )
+      return dh;
+    if (
+      /*queue_position*/
+      w[2] !== null && /*queue_size*/
+      w[3] !== void 0 && /*queue_position*/
+      w[2] >= 0
+    )
+      return hh;
+    if (
+      /*queue_position*/
+      w[2] === 0
+    )
+      return _h;
+  }
+  let h = _(t), c = h && h(t), d = (
+    /*timer*/
+    t[5] && io(t)
+  );
+  const m = [ph, bh], b = [];
+  function p(w, C) {
+    return (
+      /*last_progress_level*/
+      w[15] != null ? 0 : (
+        /*show_progress*/
+        w[6] === "full" ? 1 : -1
+      )
+    );
+  }
+  ~(s = p(t)) && (o = b[s] = m[s](t));
+  let y = !/*timer*/
+  t[5] && fo(t);
+  return {
+    c() {
+      f && f.c(), e = Ze(), n = Ke("div"), c && c.c(), i = Ze(), d && d.c(), l = Ze(), o && o.c(), r = Ze(), y && y.c(), a = hn(), We(n, "class", "progress-text svelte-1yserjw"), De(
+        n,
+        "meta-text-center",
+        /*variant*/
+        t[8] === "center"
+      ), De(
+        n,
+        "meta-text",
+        /*variant*/
+        t[8] === "default"
+      );
+    },
+    m(w, C) {
+      f && f.m(w, C), O(w, e, C), O(w, n, C), c && c.m(n, null), Ct(n, i), d && d.m(n, null), O(w, l, C), ~s && b[s].m(w, C), O(w, r, C), y && y.m(w, C), O(w, a, C), u = !0;
+    },
+    p(w, C) {
+      /*variant*/
+      w[8] === "default" && /*show_eta_bar*/
+      w[18] && /*show_progress*/
+      w[6] === "full" ? f ? f.p(w, C) : (f = eo(w), f.c(), f.m(e.parentNode, e)) : f && (f.d(1), f = null), h === (h = _(w)) && c ? c.p(w, C) : (c && c.d(1), c = h && h(w), c && (c.c(), c.m(n, i))), /*timer*/
+      w[5] ? d ? d.p(w, C) : (d = io(w), d.c(), d.m(n, null)) : d && (d.d(1), d = null), (!u || C[0] & /*variant*/
+      256) && De(
+        n,
+        "meta-text-center",
+        /*variant*/
+        w[8] === "center"
+      ), (!u || C[0] & /*variant*/
+      256) && De(
+        n,
+        "meta-text",
+        /*variant*/
+        w[8] === "default"
+      );
+      let P = s;
+      s = p(w), s === P ? ~s && b[s].p(w, C) : (o && (Dr(), sn(b[P], 1, 1, () => {
+        b[P] = null;
+      }), Mr()), ~s ? (o = b[s], o ? o.p(w, C) : (o = b[s] = m[s](w), o.c()), ln(o, 1), o.m(r.parentNode, r)) : o = null), /*timer*/
+      w[5] ? y && (y.d(1), y = null) : y ? y.p(w, C) : (y = fo(w), y.c(), y.m(a.parentNode, a));
+    },
+    i(w) {
+      u || (ln(o), u = !0);
+    },
+    o(w) {
+      sn(o), u = !1;
+    },
+    d(w) {
+      w && (M(e), M(n), M(l), M(r), M(a)), f && f.d(w), c && c.d(), d && d.d(), ~s && b[s].d(w), y && y.d(w);
+    }
+  };
+}
+function eo(t) {
+  let e, n = `translateX(${/*eta_level*/
+  (t[17] || 0) * 100 - 100}%)`;
+  return {
+    c() {
+      e = Ke("div"), We(e, "class", "eta-bar svelte-1yserjw"), at(e, "transform", n);
+    },
+    m(i, l) {
+      O(i, e, l);
+    },
+    p(i, l) {
+      l[0] & /*eta_level*/
+      131072 && n !== (n = `translateX(${/*eta_level*/
+      (i[17] || 0) * 100 - 100}%)`) && at(e, "transform", n);
+    },
+    d(i) {
+      i && M(e);
+    }
+  };
+}
+function _h(t) {
+  let e;
+  return {
+    c() {
+      e = le("processing |");
+    },
+    m(n, i) {
+      O(n, e, i);
+    },
+    p: jl,
+    d(n) {
+      n && M(e);
+    }
+  };
+}
+function hh(t) {
+  let e, n = (
+    /*queue_position*/
+    t[2] + 1 + ""
+  ), i, l, s, o;
+  return {
+    c() {
+      e = le("queue: "), i = le(n), l = le("/"), s = le(
+        /*queue_size*/
+        t[3]
+      ), o = le(" |");
+    },
+    m(r, a) {
+      O(r, e, a), O(r, i, a), O(r, l, a), O(r, s, a), O(r, o, a);
+    },
+    p(r, a) {
+      a[0] & /*queue_position*/
+      4 && n !== (n = /*queue_position*/
+      r[2] + 1 + "") && Re(i, n), a[0] & /*queue_size*/
+      8 && Re(
+        s,
+        /*queue_size*/
+        r[3]
+      );
+    },
+    d(r) {
+      r && (M(e), M(i), M(l), M(s), M(o));
+    }
+  };
+}
+function dh(t) {
+  let e, n = vi(
+    /*progress*/
+    t[7]
+  ), i = [];
+  for (let l = 0; l < n.length; l += 1)
+    i[l] = no($s(t, n, l));
+  return {
+    c() {
+      for (let l = 0; l < i.length; l += 1)
+        i[l].c();
+      e = hn();
+    },
+    m(l, s) {
+      for (let o = 0; o < i.length; o += 1)
+        i[o] && i[o].m(l, s);
+      O(l, e, s);
+    },
+    p(l, s) {
+      if (s[0] & /*progress*/
+      128) {
+        n = vi(
+          /*progress*/
+          l[7]
+        );
+        let o;
+        for (o = 0; o < n.length; o += 1) {
+          const r = $s(l, n, o);
+          i[o] ? i[o].p(r, s) : (i[o] = no(r), i[o].c(), i[o].m(e.parentNode, e));
+        }
+        for (; o < i.length; o += 1)
+          i[o].d(1);
+        i.length = n.length;
+      }
+    },
+    d(l) {
+      l && M(e), Or(i, l);
+    }
+  };
+}
+function to(t) {
+  let e, n = (
+    /*p*/
+    t[38].unit + ""
+  ), i, l, s = " ", o;
+  function r(f, _) {
+    return (
+      /*p*/
+      f[38].length != null ? gh : mh
+    );
+  }
+  let a = r(t), u = a(t);
+  return {
+    c() {
+      u.c(), e = Ze(), i = le(n), l = le(" | "), o = le(s);
+    },
+    m(f, _) {
+      u.m(f, _), O(f, e, _), O(f, i, _), O(f, l, _), O(f, o, _);
+    },
+    p(f, _) {
+      a === (a = r(f)) && u ? u.p(f, _) : (u.d(1), u = a(f), u && (u.c(), u.m(e.parentNode, e))), _[0] & /*progress*/
+      128 && n !== (n = /*p*/
+      f[38].unit + "") && Re(i, n);
+    },
+    d(f) {
+      f && (M(e), M(i), M(l), M(o)), u.d(f);
+    }
+  };
+}
+function mh(t) {
+  let e = Kt(
+    /*p*/
+    t[38].index || 0
+  ) + "", n;
+  return {
+    c() {
+      n = le(e);
+    },
+    m(i, l) {
+      O(i, n, l);
+    },
+    p(i, l) {
+      l[0] & /*progress*/
+      128 && e !== (e = Kt(
+        /*p*/
+        i[38].index || 0
+      ) + "") && Re(n, e);
+    },
+    d(i) {
+      i && M(n);
+    }
+  };
+}
+function gh(t) {
+  let e = Kt(
+    /*p*/
+    t[38].index || 0
+  ) + "", n, i, l = Kt(
+    /*p*/
+    t[38].length
+  ) + "", s;
+  return {
+    c() {
+      n = le(e), i = le("/"), s = le(l);
+    },
+    m(o, r) {
+      O(o, n, r), O(o, i, r), O(o, s, r);
+    },
+    p(o, r) {
+      r[0] & /*progress*/
+      128 && e !== (e = Kt(
+        /*p*/
+        o[38].index || 0
+      ) + "") && Re(n, e), r[0] & /*progress*/
+      128 && l !== (l = Kt(
+        /*p*/
+        o[38].length
+      ) + "") && Re(s, l);
+    },
+    d(o) {
+      o && (M(n), M(i), M(s));
+    }
+  };
+}
+function no(t) {
+  let e, n = (
+    /*p*/
+    t[38].index != null && to(t)
+  );
+  return {
+    c() {
+      n && n.c(), e = hn();
+    },
+    m(i, l) {
+      n && n.m(i, l), O(i, e, l);
+    },
+    p(i, l) {
+      /*p*/
+      i[38].index != null ? n ? n.p(i, l) : (n = to(i), n.c(), n.m(e.parentNode, e)) : n && (n.d(1), n = null);
+    },
+    d(i) {
+      i && M(e), n && n.d(i);
+    }
+  };
+}
+function io(t) {
+  let e, n = (
+    /*eta*/
+    t[0] ? `/${/*formatted_eta*/
+    t[19]}` : ""
+  ), i, l;
+  return {
+    c() {
+      e = le(
+        /*formatted_timer*/
+        t[20]
+      ), i = le(n), l = le("s");
+    },
+    m(s, o) {
+      O(s, e, o), O(s, i, o), O(s, l, o);
+    },
+    p(s, o) {
+      o[0] & /*formatted_timer*/
+      1048576 && Re(
+        e,
+        /*formatted_timer*/
+        s[20]
+      ), o[0] & /*eta, formatted_eta*/
+      524289 && n !== (n = /*eta*/
+      s[0] ? `/${/*formatted_eta*/
+      s[19]}` : "") && Re(i, n);
+    },
+    d(s) {
+      s && (M(e), M(i), M(l));
+    }
+  };
+}
+function bh(t) {
+  let e, n;
+  return e = new J_({
+    props: { margin: (
+      /*variant*/
+      t[8] === "default"
+    ) }
+  }), {
+    c() {
+      K_(e.$$.fragment);
+    },
+    m(i, l) {
+      lh(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*variant*/
+      256 && (s.margin = /*variant*/
+      i[8] === "default"), e.$set(s);
+    },
+    i(i) {
+      n || (ln(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      sn(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      eh(e, i);
+    }
+  };
+}
+function ph(t) {
+  let e, n, i, l, s, o = `${/*last_progress_level*/
+  t[15] * 100}%`, r = (
+    /*progress*/
+    t[7] != null && lo(t)
+  );
+  return {
+    c() {
+      e = Ke("div"), n = Ke("div"), r && r.c(), i = Ze(), l = Ke("div"), s = Ke("div"), We(n, "class", "progress-level-inner svelte-1yserjw"), We(s, "class", "progress-bar svelte-1yserjw"), at(s, "width", o), We(l, "class", "progress-bar-wrap svelte-1yserjw"), We(e, "class", "progress-level svelte-1yserjw");
+    },
+    m(a, u) {
+      O(a, e, u), Ct(e, n), r && r.m(n, null), Ct(e, i), Ct(e, l), Ct(l, s), t[30](s);
+    },
+    p(a, u) {
+      /*progress*/
+      a[7] != null ? r ? r.p(a, u) : (r = lo(a), r.c(), r.m(n, null)) : r && (r.d(1), r = null), u[0] & /*last_progress_level*/
+      32768 && o !== (o = `${/*last_progress_level*/
+      a[15] * 100}%`) && at(s, "width", o);
+    },
+    i: jl,
+    o: jl,
+    d(a) {
+      a && M(e), r && r.d(), t[30](null);
+    }
+  };
+}
+function lo(t) {
+  let e, n = vi(
+    /*progress*/
+    t[7]
+  ), i = [];
+  for (let l = 0; l < n.length; l += 1)
+    i[l] = uo(Ks(t, n, l));
+  return {
+    c() {
+      for (let l = 0; l < i.length; l += 1)
+        i[l].c();
+      e = hn();
+    },
+    m(l, s) {
+      for (let o = 0; o < i.length; o += 1)
+        i[o] && i[o].m(l, s);
+      O(l, e, s);
+    },
+    p(l, s) {
+      if (s[0] & /*progress_level, progress*/
+      16512) {
+        n = vi(
+          /*progress*/
+          l[7]
+        );
+        let o;
+        for (o = 0; o < n.length; o += 1) {
+          const r = Ks(l, n, o);
+          i[o] ? i[o].p(r, s) : (i[o] = uo(r), i[o].c(), i[o].m(e.parentNode, e));
+        }
+        for (; o < i.length; o += 1)
+          i[o].d(1);
+        i.length = n.length;
+      }
+    },
+    d(l) {
+      l && M(e), Or(i, l);
+    }
+  };
+}
+function so(t) {
+  let e, n, i, l, s = (
+    /*i*/
+    t[40] !== 0 && wh()
+  ), o = (
+    /*p*/
+    t[38].desc != null && oo(t)
+  ), r = (
+    /*p*/
+    t[38].desc != null && /*progress_level*/
+    t[14] && /*progress_level*/
+    t[14][
+      /*i*/
+      t[40]
+    ] != null && ro()
+  ), a = (
+    /*progress_level*/
+    t[14] != null && ao(t)
+  );
+  return {
+    c() {
+      s && s.c(), e = Ze(), o && o.c(), n = Ze(), r && r.c(), i = Ze(), a && a.c(), l = hn();
+    },
+    m(u, f) {
+      s && s.m(u, f), O(u, e, f), o && o.m(u, f), O(u, n, f), r && r.m(u, f), O(u, i, f), a && a.m(u, f), O(u, l, f);
+    },
+    p(u, f) {
+      /*p*/
+      u[38].desc != null ? o ? o.p(u, f) : (o = oo(u), o.c(), o.m(n.parentNode, n)) : o && (o.d(1), o = null), /*p*/
+      u[38].desc != null && /*progress_level*/
+      u[14] && /*progress_level*/
+      u[14][
+        /*i*/
+        u[40]
+      ] != null ? r || (r = ro(), r.c(), r.m(i.parentNode, i)) : r && (r.d(1), r = null), /*progress_level*/
+      u[14] != null ? a ? a.p(u, f) : (a = ao(u), a.c(), a.m(l.parentNode, l)) : a && (a.d(1), a = null);
+    },
+    d(u) {
+      u && (M(e), M(n), M(i), M(l)), s && s.d(u), o && o.d(u), r && r.d(u), a && a.d(u);
+    }
+  };
+}
+function wh(t) {
+  let e;
+  return {
+    c() {
+      e = le(" /");
+    },
+    m(n, i) {
+      O(n, e, i);
+    },
+    d(n) {
+      n && M(e);
+    }
+  };
+}
+function oo(t) {
+  let e = (
+    /*p*/
+    t[38].desc + ""
+  ), n;
+  return {
+    c() {
+      n = le(e);
+    },
+    m(i, l) {
+      O(i, n, l);
+    },
+    p(i, l) {
+      l[0] & /*progress*/
+      128 && e !== (e = /*p*/
+      i[38].desc + "") && Re(n, e);
+    },
+    d(i) {
+      i && M(n);
+    }
+  };
+}
+function ro(t) {
+  let e;
+  return {
+    c() {
+      e = le("-");
+    },
+    m(n, i) {
+      O(n, e, i);
+    },
+    d(n) {
+      n && M(e);
+    }
+  };
+}
+function ao(t) {
+  let e = (100 * /*progress_level*/
+  (t[14][
+    /*i*/
+    t[40]
+  ] || 0)).toFixed(1) + "", n, i;
+  return {
+    c() {
+      n = le(e), i = le("%");
+    },
+    m(l, s) {
+      O(l, n, s), O(l, i, s);
+    },
+    p(l, s) {
+      s[0] & /*progress_level*/
+      16384 && e !== (e = (100 * /*progress_level*/
+      (l[14][
+        /*i*/
+        l[40]
+      ] || 0)).toFixed(1) + "") && Re(n, e);
+    },
+    d(l) {
+      l && (M(n), M(i));
+    }
+  };
+}
+function uo(t) {
+  let e, n = (
+    /*p*/
+    (t[38].desc != null || /*progress_level*/
+    t[14] && /*progress_level*/
+    t[14][
+      /*i*/
+      t[40]
+    ] != null) && so(t)
+  );
+  return {
+    c() {
+      n && n.c(), e = hn();
+    },
+    m(i, l) {
+      n && n.m(i, l), O(i, e, l);
+    },
+    p(i, l) {
+      /*p*/
+      i[38].desc != null || /*progress_level*/
+      i[14] && /*progress_level*/
+      i[14][
+        /*i*/
+        i[40]
+      ] != null ? n ? n.p(i, l) : (n = so(i), n.c(), n.m(e.parentNode, e)) : n && (n.d(1), n = null);
+    },
+    d(i) {
+      i && M(e), n && n.d(i);
+    }
+  };
+}
+function fo(t) {
+  let e, n;
+  return {
+    c() {
+      e = Ke("p"), n = le(
+        /*loading_text*/
+        t[9]
+      ), We(e, "class", "loading svelte-1yserjw");
+    },
+    m(i, l) {
+      O(i, e, l), Ct(e, n);
+    },
+    p(i, l) {
+      l[0] & /*loading_text*/
+      512 && Re(
+        n,
+        /*loading_text*/
+        i[9]
+      );
+    },
+    d(i) {
+      i && M(e);
+    }
+  };
+}
+function vh(t) {
+  let e, n, i, l, s;
+  const o = [ch, fh], r = [];
+  function a(u, f) {
+    return (
+      /*status*/
+      u[4] === "pending" ? 0 : (
+        /*status*/
+        u[4] === "error" ? 1 : -1
+      )
+    );
+  }
+  return ~(n = a(t)) && (i = r[n] = o[n](t)), {
+    c() {
+      e = Ke("div"), i && i.c(), We(e, "class", l = "wrap " + /*variant*/
+      t[8] + " " + /*show_progress*/
+      t[6] + " svelte-1yserjw"), De(e, "hide", !/*status*/
+      t[4] || /*status*/
+      t[4] === "complete" || /*show_progress*/
+      t[6] === "hidden"), De(
+        e,
+        "translucent",
+        /*variant*/
+        t[8] === "center" && /*status*/
+        (t[4] === "pending" || /*status*/
+        t[4] === "error") || /*translucent*/
+        t[11] || /*show_progress*/
+        t[6] === "minimal"
+      ), De(
+        e,
+        "generating",
+        /*status*/
+        t[4] === "generating"
+      ), De(
+        e,
+        "border",
+        /*border*/
+        t[12]
+      ), at(
+        e,
+        "position",
+        /*absolute*/
+        t[10] ? "absolute" : "static"
+      ), at(
+        e,
+        "padding",
+        /*absolute*/
+        t[10] ? "0" : "var(--size-8) 0"
+      );
+    },
+    m(u, f) {
+      O(u, e, f), ~n && r[n].m(e, null), t[31](e), s = !0;
+    },
+    p(u, f) {
+      let _ = n;
+      n = a(u), n === _ ? ~n && r[n].p(u, f) : (i && (Dr(), sn(r[_], 1, 1, () => {
+        r[_] = null;
+      }), Mr()), ~n ? (i = r[n], i ? i.p(u, f) : (i = r[n] = o[n](u), i.c()), ln(i, 1), i.m(e, null)) : i = null), (!s || f[0] & /*variant, show_progress*/
+      320 && l !== (l = "wrap " + /*variant*/
+      u[8] + " " + /*show_progress*/
+      u[6] + " svelte-1yserjw")) && We(e, "class", l), (!s || f[0] & /*variant, show_progress, status, show_progress*/
+      336) && De(e, "hide", !/*status*/
+      u[4] || /*status*/
+      u[4] === "complete" || /*show_progress*/
+      u[6] === "hidden"), (!s || f[0] & /*variant, show_progress, variant, status, translucent, show_progress*/
+      2384) && De(
+        e,
+        "translucent",
+        /*variant*/
+        u[8] === "center" && /*status*/
+        (u[4] === "pending" || /*status*/
+        u[4] === "error") || /*translucent*/
+        u[11] || /*show_progress*/
+        u[6] === "minimal"
+      ), (!s || f[0] & /*variant, show_progress, status*/
+      336) && De(
+        e,
+        "generating",
+        /*status*/
+        u[4] === "generating"
+      ), (!s || f[0] & /*variant, show_progress, border*/
+      4416) && De(
+        e,
+        "border",
+        /*border*/
+        u[12]
+      ), f[0] & /*absolute*/
+      1024 && at(
+        e,
+        "position",
+        /*absolute*/
+        u[10] ? "absolute" : "static"
+      ), f[0] & /*absolute*/
+      1024 && at(
+        e,
+        "padding",
+        /*absolute*/
+        u[10] ? "0" : "var(--size-8) 0"
+      );
+    },
+    i(u) {
+      s || (ln(i), s = !0);
+    },
+    o(u) {
+      sn(i), s = !1;
+    },
+    d(u) {
+      u && M(e), ~n && r[n].d(), t[31](null);
+    }
+  };
+}
+let Kn = [], _l = !1;
+async function yh(t, e = !0) {
+  if (!(window.__gradio_mode__ === "website" || window.__gradio_mode__ !== "app" && e !== !0)) {
+    if (Kn.push(t), !_l)
+      _l = !0;
+    else
+      return;
+    await rh(), requestAnimationFrame(() => {
+      let n = [0, 0];
+      for (let i = 0; i < Kn.length; i++) {
+        const s = Kn[i].getBoundingClientRect();
+        (i === 0 || s.top + window.scrollY <= n[0]) && (n[0] = s.top + window.scrollY, n[1] = i);
+      }
+      window.scrollTo({ top: n[0] - 20, behavior: "smooth" }), _l = !1, Kn = [];
+    });
+  }
+}
+function Eh(t, e, n) {
+  let i, { $$slots: l = {}, $$scope: s } = e, { i18n: o } = e, { eta: r = null } = e, { queue_position: a } = e, { queue_size: u } = e, { status: f } = e, { scroll_to_output: _ = !1 } = e, { timer: h = !0 } = e, { show_progress: c = "full" } = e, { message: d = null } = e, { progress: m = null } = e, { variant: b = "default" } = e, { loading_text: p = "Loading..." } = e, { absolute: y = !0 } = e, { translucent: w = !1 } = e, { border: C = !1 } = e, { autoscroll: P } = e, E, N = !1, v = 0, A = 0, B = null, L = null, x = 0, J = null, ce, te = null, ke = !0;
+  const ye = () => {
+    n(0, r = n(26, B = n(19, S = null))), n(24, v = performance.now()), n(25, A = 0), N = !0, me();
+  };
+  function me() {
+    requestAnimationFrame(() => {
+      n(25, A = (performance.now() - v) / 1e3), N && me();
+    });
+  }
+  function _e() {
+    n(25, A = 0), n(0, r = n(26, B = n(19, S = null))), N && (N = !1);
+  }
+  ah(() => {
+    N && _e();
+  });
+  let S = null;
+  function k(g) {
+    Js[g ? "unshift" : "push"](() => {
+      te = g, n(16, te), n(7, m), n(14, J), n(15, ce);
+    });
+  }
+  function I(g) {
+    Js[g ? "unshift" : "push"](() => {
+      E = g, n(13, E);
+    });
+  }
+  return t.$$set = (g) => {
+    "i18n" in g && n(1, o = g.i18n), "eta" in g && n(0, r = g.eta), "queue_position" in g && n(2, a = g.queue_position), "queue_size" in g && n(3, u = g.queue_size), "status" in g && n(4, f = g.status), "scroll_to_output" in g && n(21, _ = g.scroll_to_output), "timer" in g && n(5, h = g.timer), "show_progress" in g && n(6, c = g.show_progress), "message" in g && n(22, d = g.message), "progress" in g && n(7, m = g.progress), "variant" in g && n(8, b = g.variant), "loading_text" in g && n(9, p = g.loading_text), "absolute" in g && n(10, y = g.absolute), "translucent" in g && n(11, w = g.translucent), "border" in g && n(12, C = g.border), "autoscroll" in g && n(23, P = g.autoscroll), "$$scope" in g && n(28, s = g.$$scope);
+  }, t.$$.update = () => {
+    t.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
+    218103809 && (r === null && n(0, r = B), r != null && B !== r && (n(27, L = (performance.now() - v) / 1e3 + r), n(19, S = L.toFixed(1)), n(26, B = r))), t.$$.dirty[0] & /*eta_from_start, timer_diff*/
+    167772160 && n(17, x = L === null || L <= 0 || !A ? null : Math.min(A / L, 1)), t.$$.dirty[0] & /*progress*/
+    128 && m != null && n(18, ke = !1), t.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
+    114816 && (m != null ? n(14, J = m.map((g) => {
+      if (g.index != null && g.length != null)
+        return g.index / g.length;
+      if (g.progress != null)
+        return g.progress;
+    })) : n(14, J = null), J ? (n(15, ce = J[J.length - 1]), te && (ce === 0 ? n(16, te.style.transition = "0", te) : n(16, te.style.transition = "150ms", te))) : n(15, ce = void 0)), t.$$.dirty[0] & /*status*/
+    16 && (f === "pending" ? ye() : _e()), t.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
+    10493968 && E && _ && (f === "pending" || f === "complete") && yh(E, P), t.$$.dirty[0] & /*status, message*/
+    4194320, t.$$.dirty[0] & /*timer_diff*/
+    33554432 && n(20, i = A.toFixed(1));
+  }, [
+    r,
+    o,
+    a,
+    u,
+    f,
+    h,
+    c,
+    m,
+    b,
+    p,
+    y,
+    w,
+    C,
+    E,
+    J,
+    ce,
+    te,
+    x,
+    ke,
+    S,
+    i,
+    _,
+    d,
+    P,
+    v,
+    A,
+    B,
+    L,
+    s,
+    l,
+    k,
+    I
+  ];
+}
+class kh extends Q_ {
+  constructor(e) {
+    super(), ih(
+      this,
+      e,
+      Eh,
+      vh,
+      sh,
+      {
+        i18n: 1,
+        eta: 0,
+        queue_position: 2,
+        queue_size: 3,
+        status: 4,
+        scroll_to_output: 21,
+        timer: 5,
+        show_progress: 6,
+        message: 22,
+        progress: 7,
+        variant: 8,
+        loading_text: 9,
+        absolute: 10,
+        translucent: 11,
+        border: 12,
+        autoscroll: 23
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+class Sh {
+  constructor() {
+    this.boxes = [];
+  }
+}
+const { setContext: ub, getContext: Ch } = window.__gradio__svelte__internal, Ah = "WORKER_PROXY_CONTEXT_KEY";
+function Rr() {
+  return Ch(Ah);
+}
+function Bh(t) {
+  return t.host === window.location.host || t.host === "localhost:7860" || t.host === "127.0.0.1:7860" || // Ref: https://github.com/gradio-app/gradio/blob/v3.32.0/js/app/src/Index.svelte#L194
+  t.host === "lite.local";
+}
+function Ur(t, e) {
+  const n = e.toLowerCase();
+  for (const [i, l] of Object.entries(t))
+    if (i.toLowerCase() === n)
+      return l;
+}
+function Fr(t) {
+  if (t == null)
+    return !1;
+  const e = new URL(t);
+  return !(!Bh(e) || e.protocol !== "http:" && e.protocol !== "https:");
+}
+async function Th(t) {
+  if (t == null || !Fr(t))
+    return t;
+  const e = Rr();
+  if (e == null)
+    return t;
+  const i = new URL(t).pathname;
+  return e.httpRequest({
+    method: "GET",
+    path: i,
+    headers: {},
+    query_string: ""
+  }).then((l) => {
+    if (l.status !== 200)
+      throw new Error(`Failed to get file ${i} from the Wasm worker.`);
+    const s = new Blob([l.body], {
+      type: Ur(l.headers, "content-type")
+    });
+    return URL.createObjectURL(s);
+  });
+}
+const {
+  SvelteComponent: Hh,
+  assign: yi,
+  check_outros: qr,
+  compute_rest_props: co,
+  create_slot: us,
+  detach: Di,
+  element: zr,
+  empty: jr,
+  exclude_internal_props: Ph,
+  get_all_dirty_from_scope: fs,
+  get_slot_changes: cs,
+  get_spread_update: Gr,
+  group_outros: xr,
+  init: Nh,
+  insert: Ri,
+  listen: Vr,
+  prevent_default: Lh,
+  safe_not_equal: Ih,
+  set_attributes: Ei,
+  transition_in: Pt,
+  transition_out: Nt,
+  update_slot_base: _s
+} = window.__gradio__svelte__internal, { createEventDispatcher: Mh } = window.__gradio__svelte__internal;
+function Oh(t) {
+  let e, n, i, l, s;
+  const o = (
+    /*#slots*/
+    t[8].default
+  ), r = us(
+    o,
+    t,
+    /*$$scope*/
+    t[7],
+    null
+  );
+  let a = [
+    { href: (
+      /*href*/
+      t[0]
+    ) },
+    {
+      target: n = typeof window < "u" && window.__is_colab__ ? "_blank" : null
+    },
+    { rel: "noopener noreferrer" },
+    { download: (
+      /*download*/
+      t[1]
+    ) },
+    /*$$restProps*/
+    t[6]
+  ], u = {};
+  for (let f = 0; f < a.length; f += 1)
+    u = yi(u, a[f]);
+  return {
+    c() {
+      e = zr("a"), r && r.c(), Ei(e, u);
+    },
+    m(f, _) {
+      Ri(f, e, _), r && r.m(e, null), i = !0, l || (s = Vr(
+        e,
+        "click",
+        /*dispatch*/
+        t[3].bind(null, "click")
+      ), l = !0);
+    },
+    p(f, _) {
+      r && r.p && (!i || _ & /*$$scope*/
+      128) && _s(
+        r,
+        o,
+        f,
+        /*$$scope*/
+        f[7],
+        i ? cs(
+          o,
+          /*$$scope*/
+          f[7],
+          _,
+          null
+        ) : fs(
+          /*$$scope*/
+          f[7]
+        ),
+        null
+      ), Ei(e, u = Gr(a, [
+        (!i || _ & /*href*/
+        1) && { href: (
+          /*href*/
+          f[0]
+        ) },
+        { target: n },
+        { rel: "noopener noreferrer" },
+        (!i || _ & /*download*/
+        2) && { download: (
+          /*download*/
+          f[1]
+        ) },
+        _ & /*$$restProps*/
+        64 && /*$$restProps*/
+        f[6]
+      ]));
+    },
+    i(f) {
+      i || (Pt(r, f), i = !0);
+    },
+    o(f) {
+      Nt(r, f), i = !1;
+    },
+    d(f) {
+      f && Di(e), r && r.d(f), l = !1, s();
+    }
+  };
+}
+function Dh(t) {
+  let e, n, i, l;
+  const s = [Uh, Rh], o = [];
+  function r(a, u) {
+    return (
+      /*is_downloading*/
+      a[2] ? 0 : 1
+    );
+  }
+  return e = r(t), n = o[e] = s[e](t), {
+    c() {
+      n.c(), i = jr();
+    },
+    m(a, u) {
+      o[e].m(a, u), Ri(a, i, u), l = !0;
+    },
+    p(a, u) {
+      let f = e;
+      e = r(a), e === f ? o[e].p(a, u) : (xr(), Nt(o[f], 1, 1, () => {
+        o[f] = null;
+      }), qr(), n = o[e], n ? n.p(a, u) : (n = o[e] = s[e](a), n.c()), Pt(n, 1), n.m(i.parentNode, i));
+    },
+    i(a) {
+      l || (Pt(n), l = !0);
+    },
+    o(a) {
+      Nt(n), l = !1;
+    },
+    d(a) {
+      a && Di(i), o[e].d(a);
+    }
+  };
+}
+function Rh(t) {
+  let e, n, i, l;
+  const s = (
+    /*#slots*/
+    t[8].default
+  ), o = us(
+    s,
+    t,
+    /*$$scope*/
+    t[7],
+    null
+  );
+  let r = [
+    /*$$restProps*/
+    t[6],
+    { href: (
+      /*href*/
+      t[0]
+    ) }
+  ], a = {};
+  for (let u = 0; u < r.length; u += 1)
+    a = yi(a, r[u]);
+  return {
+    c() {
+      e = zr("a"), o && o.c(), Ei(e, a);
+    },
+    m(u, f) {
+      Ri(u, e, f), o && o.m(e, null), n = !0, i || (l = Vr(e, "click", Lh(
+        /*wasm_click_handler*/
+        t[5]
+      )), i = !0);
+    },
+    p(u, f) {
+      o && o.p && (!n || f & /*$$scope*/
+      128) && _s(
+        o,
+        s,
+        u,
+        /*$$scope*/
+        u[7],
+        n ? cs(
+          s,
+          /*$$scope*/
+          u[7],
+          f,
+          null
+        ) : fs(
+          /*$$scope*/
+          u[7]
+        ),
+        null
+      ), Ei(e, a = Gr(r, [
+        f & /*$$restProps*/
+        64 && /*$$restProps*/
+        u[6],
+        (!n || f & /*href*/
+        1) && { href: (
+          /*href*/
+          u[0]
+        ) }
+      ]));
+    },
+    i(u) {
+      n || (Pt(o, u), n = !0);
+    },
+    o(u) {
+      Nt(o, u), n = !1;
+    },
+    d(u) {
+      u && Di(e), o && o.d(u), i = !1, l();
+    }
+  };
+}
+function Uh(t) {
+  let e;
+  const n = (
+    /*#slots*/
+    t[8].default
+  ), i = us(
+    n,
+    t,
+    /*$$scope*/
+    t[7],
+    null
+  );
+  return {
+    c() {
+      i && i.c();
+    },
+    m(l, s) {
+      i && i.m(l, s), e = !0;
+    },
+    p(l, s) {
+      i && i.p && (!e || s & /*$$scope*/
+      128) && _s(
+        i,
+        n,
+        l,
+        /*$$scope*/
+        l[7],
+        e ? cs(
+          n,
+          /*$$scope*/
+          l[7],
+          s,
+          null
+        ) : fs(
+          /*$$scope*/
+          l[7]
+        ),
+        null
+      );
+    },
+    i(l) {
+      e || (Pt(i, l), e = !0);
+    },
+    o(l) {
+      Nt(i, l), e = !1;
+    },
+    d(l) {
+      i && i.d(l);
+    }
+  };
+}
+function Fh(t) {
+  let e, n, i, l, s;
+  const o = [Dh, Oh], r = [];
+  function a(u, f) {
+    return f & /*href*/
+    1 && (e = null), e == null && (e = !!/*worker_proxy*/
+    (u[4] && Fr(
+      /*href*/
+      u[0]
+    ))), e ? 0 : 1;
+  }
+  return n = a(t, -1), i = r[n] = o[n](t), {
+    c() {
+      i.c(), l = jr();
+    },
+    m(u, f) {
+      r[n].m(u, f), Ri(u, l, f), s = !0;
+    },
+    p(u, [f]) {
+      let _ = n;
+      n = a(u, f), n === _ ? r[n].p(u, f) : (xr(), Nt(r[_], 1, 1, () => {
+        r[_] = null;
+      }), qr(), i = r[n], i ? i.p(u, f) : (i = r[n] = o[n](u), i.c()), Pt(i, 1), i.m(l.parentNode, l));
+    },
+    i(u) {
+      s || (Pt(i), s = !0);
+    },
+    o(u) {
+      Nt(i), s = !1;
+    },
+    d(u) {
+      u && Di(l), r[n].d(u);
+    }
+  };
+}
+function qh(t, e, n) {
+  const i = ["href", "download"];
+  let l = co(e, i), { $$slots: s = {}, $$scope: o } = e, { href: r = void 0 } = e, { download: a } = e;
+  const u = Mh();
+  let f = !1;
+  const _ = Rr();
+  async function h() {
+    if (f)
+      return;
+    if (u("click"), r == null)
+      throw new Error("href is not defined.");
+    if (_ == null)
+      throw new Error("Wasm worker proxy is not available.");
+    const d = new URL(r).pathname;
+    n(2, f = !0), _.httpRequest({
+      method: "GET",
+      path: d,
+      headers: {},
+      query_string: ""
+    }).then((m) => {
+      if (m.status !== 200)
+        throw new Error(`Failed to get file ${d} from the Wasm worker.`);
+      const b = new Blob(
+        [m.body],
+        {
+          type: Ur(m.headers, "content-type")
+        }
+      ), p = URL.createObjectURL(b), y = document.createElement("a");
+      y.href = p, y.download = a, y.click(), URL.revokeObjectURL(p);
+    }).finally(() => {
+      n(2, f = !1);
+    });
+  }
+  return t.$$set = (c) => {
+    e = yi(yi({}, e), Ph(c)), n(6, l = co(e, i)), "href" in c && n(0, r = c.href), "download" in c && n(1, a = c.download), "$$scope" in c && n(7, o = c.$$scope);
+  }, [
+    r,
+    a,
+    f,
+    u,
+    _,
+    h,
+    l,
+    o,
+    s
+  ];
+}
+class zh extends Hh {
+  constructor(e) {
+    super(), Nh(this, e, qh, Fh, Ih, { href: 0, download: 1 });
+  }
+}
+var hl = new Intl.Collator(0, { numeric: 1 }).compare;
+function _o(t, e, n) {
+  return t = t.split("."), e = e.split("."), hl(t[0], e[0]) || hl(t[1], e[1]) || (e[2] = e.slice(2).join("."), n = /[.-]/.test(t[2] = t.slice(2).join(".")), n == /[.-]/.test(e[2]) ? hl(t[2], e[2]) : n ? -1 : 1);
+}
+function Xr(t, e, n) {
+  return e.startsWith("http://") || e.startsWith("https://") ? n ? t : e : t + e;
+}
+function dl(t) {
+  if (t.startsWith("http")) {
+    const { protocol: e, host: n } = new URL(t);
+    return n.endsWith("hf.space") ? {
+      ws_protocol: "wss",
+      host: n,
+      http_protocol: e
+    } : {
+      ws_protocol: e === "https:" ? "wss" : "ws",
+      http_protocol: e,
+      host: n
+    };
+  } else if (t.startsWith("file:"))
+    return {
+      ws_protocol: "ws",
+      http_protocol: "http:",
+      host: "lite.local"
+      // Special fake hostname only used for this case. This matches the hostname allowed in `is_self_host()` in `js/wasm/network/host.ts`.
+    };
+  return {
+    ws_protocol: "wss",
+    http_protocol: "https:",
+    host: t
+  };
+}
+const Wr = /^[^\/]*\/[^\/]*$/, jh = /.*hf\.space\/{0,1}$/;
+async function Gh(t, e) {
+  const n = {};
+  e && (n.Authorization = `Bearer ${e}`);
+  const i = t.trim();
+  if (Wr.test(i))
+    try {
+      const l = await fetch(
+        `https://huggingface.co/api/spaces/${i}/host`,
+        { headers: n }
+      );
+      if (l.status !== 200)
+        throw new Error("Space metadata could not be loaded.");
+      const s = (await l.json()).host;
+      return {
+        space_id: t,
+        ...dl(s)
+      };
+    } catch (l) {
+      throw new Error("Space metadata could not be loaded." + l.message);
+    }
+  if (jh.test(i)) {
+    const { ws_protocol: l, http_protocol: s, host: o } = dl(i);
+    return {
+      space_id: o.replace(".hf.space", ""),
+      ws_protocol: l,
+      http_protocol: s,
+      host: o
+    };
+  }
+  return {
+    space_id: !1,
+    ...dl(i)
+  };
+}
+function xh(t) {
+  let e = {};
+  return t.forEach(({ api_name: n }, i) => {
+    n && (e[n] = i);
+  }), e;
+}
+const Vh = /^(?=[^]*\b[dD]iscussions{0,1}\b)(?=[^]*\b[dD]isabled\b)[^]*$/;
+async function ho(t) {
+  try {
+    const n = (await fetch(
+      `https://huggingface.co/api/spaces/${t}/discussions`,
+      {
+        method: "HEAD"
+      }
+    )).headers.get("x-error-message");
+    return !(n && Vh.test(n));
+  } catch {
+    return !1;
+  }
+}
+function Xh(t, e, n, i) {
+  if (e.length === 0) {
+    if (n === "replace")
+      return i;
+    if (n === "append")
+      return t + i;
+    throw new Error(`Unsupported action: ${n}`);
+  }
+  let l = t;
+  for (let o = 0; o < e.length - 1; o++)
+    l = l[e[o]];
+  const s = e[e.length - 1];
+  switch (n) {
+    case "replace":
+      l[s] = i;
+      break;
+    case "append":
+      l[s] += i;
+      break;
+    case "add":
+      Array.isArray(l) ? l.splice(Number(s), 0, i) : l[s] = i;
+      break;
+    case "delete":
+      Array.isArray(l) ? l.splice(Number(s), 1) : delete l[s];
+      break;
+    default:
+      throw new Error(`Unknown action: ${n}`);
+  }
+  return t;
+}
+function Wh(t, e) {
+  return e.forEach(([n, i, l]) => {
+    t = Xh(t, i, n, l);
+  }), t;
+}
+async function Zh(t, e, n, i = Qh) {
+  let l = (Array.isArray(t) ? t : [t]).map(
+    (s) => s.blob
+  );
+  return await Promise.all(
+    await i(e, l, void 0, n).then(
+      async (s) => {
+        if (s.error)
+          throw new Error(s.error);
+        return s.files ? s.files.map((o, r) => new hs({
+          ...t[r],
+          path: o,
+          url: e + "/file=" + o
+        })) : [];
+      }
+    )
+  );
+}
+async function Yh(t, e) {
+  return t.map(
+    (n, i) => new hs({
+      path: n.name,
+      orig_name: n.name,
+      blob: n,
+      size: n.size,
+      mime_type: n.type,
+      is_stream: e
+    })
+  );
+}
+class hs {
+  constructor({
+    path: e,
+    url: n,
+    orig_name: i,
+    size: l,
+    blob: s,
+    is_stream: o,
+    mime_type: r,
+    alt_text: a
+  }) {
+    this.path = e, this.url = n, this.orig_name = i, this.size = l, this.blob = n ? void 0 : s, this.is_stream = o, this.mime_type = r, this.alt_text = a;
+  }
+}
+const Zr = "This application is too busy. Keep trying!", gt = "Connection errored out.";
+let Yr;
+function Jh(t, e) {
+  return { post_data: n, upload_files: i, client: l, handle_blob: s };
+  async function n(o, r, a) {
+    const u = { "Content-Type": "application/json" };
+    a && (u.Authorization = `Bearer ${a}`);
+    try {
+      var f = await t(o, {
+        method: "POST",
+        body: JSON.stringify(r),
+        headers: u
+      });
+    } catch {
+      return [{ error: gt }, 500];
+    }
+    let _, h;
+    try {
+      _ = await f.json(), h = f.status;
+    } catch (c) {
+      _ = { error: `Could not parse server response: ${c}` }, h = 500;
+    }
+    return [_, h];
+  }
+  async function i(o, r, a, u) {
+    const f = {};
+    a && (f.Authorization = `Bearer ${a}`);
+    const _ = 1e3, h = [];
+    for (let d = 0; d < r.length; d += _) {
+      const m = r.slice(d, d + _), b = new FormData();
+      m.forEach((y) => {
+        b.append("files", y);
+      });
+      try {
+        const y = u ? `${o}/upload?upload_id=${u}` : `${o}/upload`;
+        var c = await t(y, {
+          method: "POST",
+          body: b,
+          headers: f
+        });
+      } catch {
+        return { error: gt };
+      }
+      const p = await c.json();
+      h.push(...p);
+    }
+    return { files: h };
+  }
+  async function l(o, r = {}) {
+    return new Promise(async (a) => {
+      const { status_callback: u, hf_token: f } = r, _ = {
+        predict: ce,
+        submit: te,
+        view_api: _e,
+        component_server: me
+      };
+      if ((typeof window > "u" || !("WebSocket" in window)) && !global.Websocket) {
+        const S = await import("./wrapper-6f348d45-f837cf34.js");
+        Yr = (await import("./__vite-browser-external-2447137e.js")).Blob, global.WebSocket = S.WebSocket;
+      }
+      const { ws_protocol: h, http_protocol: c, host: d, space_id: m } = await Gh(o, f), b = Math.random().toString(36).substring(2), p = {};
+      let y = !1, w = {}, C = {}, P = null;
+      const E = {}, N = /* @__PURE__ */ new Set();
+      let v, A = {}, B = !1;
+      f && m && (B = await $h(m, f));
+      async function L(S) {
+        if (v = S, window.location.protocol === "https:" && (v.root = v.root.replace("http://", "https://")), A = xh((S == null ? void 0 : S.dependencies) || []), v.auth_required)
+          return {
+            config: v,
+            ..._
+          };
+        try {
+          x = await _e(v);
+        } catch (k) {
+          console.error(`Could not get api details: ${k.message}`);
+        }
+        return {
+          config: v,
+          ..._
+        };
+      }
+      let x;
+      async function J(S) {
+        if (u && u(S), S.status === "running")
+          try {
+            v = await po(
+              t,
+              `${c}//${d}`,
+              f
+            );
+            const k = await L(v);
+            a(k);
+          } catch (k) {
+            console.error(k), u && u({
+              status: "error",
+              message: "Could not load this space.",
+              load_status: "error",
+              detail: "NOT_FOUND"
+            });
+          }
+      }
+      try {
+        v = await po(
+          t,
+          `${c}//${d}`,
+          f
+        );
+        const S = await L(v);
+        a(S);
+      } catch (S) {
+        console.error(S), m ? xl(
+          m,
+          Wr.test(m) ? "space_name" : "subdomain",
+          J
+        ) : u && u({
+          status: "error",
+          message: "Could not load this space.",
+          load_status: "error",
+          detail: "NOT_FOUND"
+        });
+      }
+      function ce(S, k, I) {
+        let g = !1, T = !1, ae;
+        if (typeof S == "number")
+          ae = v.dependencies[S];
+        else {
+          const Q = S.replace(/^\//, "");
+          ae = v.dependencies[A[Q]];
+        }
+        if (ae.types.continuous)
+          throw new Error(
+            "Cannot call predict on this function as it may run forever. Use submit instead"
+          );
+        return new Promise((Q, Se) => {
+          const He = te(S, k, I);
+          let D;
+          He.on("data", (H) => {
+            T && (He.destroy(), Q(H)), g = !0, D = H;
+          }).on("status", (H) => {
+            H.stage === "error" && Se(H), H.stage === "complete" && (T = !0, g && (He.destroy(), Q(D)));
+          });
+        });
+      }
+      function te(S, k, I, g = null) {
+        let T, ae;
+        if (typeof S == "number")
+          T = S, ae = x.unnamed_endpoints[T];
+        else {
+          const K = S.replace(/^\//, "");
+          T = A[K], ae = x.named_endpoints[S.trim()];
+        }
+        if (typeof T != "number")
+          throw new Error(
+            "There is no endpoint matching that name of fn_index matching that number."
+          );
+        let Q, Se, He = v.protocol ?? "ws";
+        const D = typeof S == "number" ? "/predict" : S;
+        let H, R = null, j = !1;
+        const X = {};
+        let he = "";
+        typeof window < "u" && (he = new URLSearchParams(window.location.search).toString()), s(`${v.root}`, k, ae, f).then(
+          (K) => {
+            if (H = {
+              data: K || [],
+              event_data: I,
+              fn_index: T,
+              trigger_id: g
+            }, e0(T, v))
+              q({
+                type: "status",
+                endpoint: D,
+                stage: "pending",
+                queue: !1,
+                fn_index: T,
+                time: /* @__PURE__ */ new Date()
+              }), n(
+                `${v.root}/run${D.startsWith("/") ? D : `/${D}`}${he ? "?" + he : ""}`,
+                {
+                  ...H,
+                  session_hash: b
+                },
+                f
+              ).then(([ne, Y]) => {
+                const de = ne.data;
+                Y == 200 ? (q({
+                  type: "data",
+                  endpoint: D,
+                  fn_index: T,
+                  data: de,
+                  time: /* @__PURE__ */ new Date()
+                }), q({
+                  type: "status",
+                  endpoint: D,
+                  fn_index: T,
+                  stage: "complete",
+                  eta: ne.average_duration,
+                  queue: !1,
+                  time: /* @__PURE__ */ new Date()
+                })) : q({
+                  type: "status",
+                  stage: "error",
+                  endpoint: D,
+                  fn_index: T,
+                  message: ne.error,
+                  queue: !1,
+                  time: /* @__PURE__ */ new Date()
+                });
+              }).catch((ne) => {
+                q({
+                  type: "status",
+                  stage: "error",
+                  message: ne.message,
+                  endpoint: D,
+                  fn_index: T,
+                  queue: !1,
+                  time: /* @__PURE__ */ new Date()
+                });
+              });
+            else if (He == "ws") {
+              q({
+                type: "status",
+                stage: "pending",
+                queue: !0,
+                endpoint: D,
+                fn_index: T,
+                time: /* @__PURE__ */ new Date()
+              });
+              let ne = new URL(`${h}://${Xr(
+                d,
+                v.path,
+                !0
+              )}
+							/queue/join${he ? "?" + he : ""}`);
+              B && ne.searchParams.set("__sign", B), Q = new WebSocket(ne), Q.onclose = (Y) => {
+                Y.wasClean || q({
+                  type: "status",
+                  stage: "error",
+                  broken: !0,
+                  message: gt,
+                  queue: !0,
+                  endpoint: D,
+                  fn_index: T,
+                  time: /* @__PURE__ */ new Date()
+                });
+              }, Q.onmessage = function(Y) {
+                const de = JSON.parse(Y.data), { type: ue, status: V, data: Z } = ml(
+                  de,
+                  p[T]
+                );
+                if (ue === "update" && V && !j)
+                  q({
+                    type: "status",
+                    endpoint: D,
+                    fn_index: T,
+                    time: /* @__PURE__ */ new Date(),
+                    ...V
+                  }), V.stage === "error" && Q.close();
+                else if (ue === "hash") {
+                  Q.send(JSON.stringify({ fn_index: T, session_hash: b }));
+                  return;
+                } else
+                  ue === "data" ? Q.send(JSON.stringify({ ...H, session_hash: b })) : ue === "complete" ? j = V : ue === "log" ? q({
+                    type: "log",
+                    log: Z.log,
+                    level: Z.level,
+                    endpoint: D,
+                    fn_index: T
+                  }) : ue === "generating" && q({
+                    type: "status",
+                    time: /* @__PURE__ */ new Date(),
+                    ...V,
+                    stage: V == null ? void 0 : V.stage,
+                    queue: !0,
+                    endpoint: D,
+                    fn_index: T
+                  });
+                Z && (q({
+                  type: "data",
+                  time: /* @__PURE__ */ new Date(),
+                  data: Z.data,
+                  endpoint: D,
+                  fn_index: T
+                }), j && (q({
+                  type: "status",
+                  time: /* @__PURE__ */ new Date(),
+                  ...j,
+                  stage: V == null ? void 0 : V.stage,
+                  queue: !0,
+                  endpoint: D,
+                  fn_index: T
+                }), Q.close()));
+              }, _o(v.version || "2.0.0", "3.6") < 0 && addEventListener(
+                "open",
+                () => Q.send(JSON.stringify({ hash: b }))
+              );
+            } else if (He == "sse") {
+              q({
+                type: "status",
+                stage: "pending",
+                queue: !0,
+                endpoint: D,
+                fn_index: T,
+                time: /* @__PURE__ */ new Date()
+              });
+              var ge = new URLSearchParams({
+                fn_index: T.toString(),
+                session_hash: b
+              }).toString();
+              let ne = new URL(
+                `${v.root}/queue/join?${he ? he + "&" : ""}${ge}`
+              );
+              Se = e(ne), Se.onmessage = async function(Y) {
+                const de = JSON.parse(Y.data), { type: ue, status: V, data: Z } = ml(
+                  de,
+                  p[T]
+                );
+                if (ue === "update" && V && !j)
+                  q({
+                    type: "status",
+                    endpoint: D,
+                    fn_index: T,
+                    time: /* @__PURE__ */ new Date(),
+                    ...V
+                  }), V.stage === "error" && Se.close();
+                else if (ue === "data") {
+                  R = de.event_id;
+                  let [mt, xa] = await n(
+                    `${v.root}/queue/data`,
+                    {
+                      ...H,
+                      session_hash: b,
+                      event_id: R
+                    },
+                    f
+                  );
+                  xa !== 200 && (q({
+                    type: "status",
+                    stage: "error",
+                    message: gt,
+                    queue: !0,
+                    endpoint: D,
+                    fn_index: T,
+                    time: /* @__PURE__ */ new Date()
+                  }), Se.close());
+                } else
+                  ue === "complete" ? j = V : ue === "log" ? q({
+                    type: "log",
+                    log: Z.log,
+                    level: Z.level,
+                    endpoint: D,
+                    fn_index: T
+                  }) : ue === "generating" && q({
+                    type: "status",
+                    time: /* @__PURE__ */ new Date(),
+                    ...V,
+                    stage: V == null ? void 0 : V.stage,
+                    queue: !0,
+                    endpoint: D,
+                    fn_index: T
+                  });
+                Z && (q({
+                  type: "data",
+                  time: /* @__PURE__ */ new Date(),
+                  data: Z.data,
+                  endpoint: D,
+                  fn_index: T
+                }), j && (q({
+                  type: "status",
+                  time: /* @__PURE__ */ new Date(),
+                  ...j,
+                  stage: V == null ? void 0 : V.stage,
+                  queue: !0,
+                  endpoint: D,
+                  fn_index: T
+                }), Se.close()));
+              };
+            } else
+              (He == "sse_v1" || He == "sse_v2") && (q({
+                type: "status",
+                stage: "pending",
+                queue: !0,
+                endpoint: D,
+                fn_index: T,
+                time: /* @__PURE__ */ new Date()
+              }), n(
+                `${v.root}/queue/join?${he}`,
+                {
+                  ...H,
+                  session_hash: b
+                },
+                f
+              ).then(([ne, Y]) => {
+                if (Y === 503)
+                  q({
+                    type: "status",
+                    stage: "error",
+                    message: Zr,
+                    queue: !0,
+                    endpoint: D,
+                    fn_index: T,
+                    time: /* @__PURE__ */ new Date()
+                  });
+                else if (Y !== 200)
+                  q({
+                    type: "status",
+                    stage: "error",
+                    message: gt,
+                    queue: !0,
+                    endpoint: D,
+                    fn_index: T,
+                    time: /* @__PURE__ */ new Date()
+                  });
+                else {
+                  R = ne.event_id;
+                  let de = async function(ue) {
+                    try {
+                      const { type: V, status: Z, data: mt } = ml(
+                        ue,
+                        p[T]
+                      );
+                      if (V == "heartbeat")
+                        return;
+                      if (V === "update" && Z && !j)
+                        q({
+                          type: "status",
+                          endpoint: D,
+                          fn_index: T,
+                          time: /* @__PURE__ */ new Date(),
+                          ...Z
+                        });
+                      else if (V === "complete")
+                        j = Z;
+                      else if (V == "unexpected_error")
+                        console.error("Unexpected error", Z == null ? void 0 : Z.message), q({
+                          type: "status",
+                          stage: "error",
+                          message: (Z == null ? void 0 : Z.message) || "An Unexpected Error Occurred!",
+                          queue: !0,
+                          endpoint: D,
+                          fn_index: T,
+                          time: /* @__PURE__ */ new Date()
+                        });
+                      else if (V === "log") {
+                        q({
+                          type: "log",
+                          log: mt.log,
+                          level: mt.level,
+                          endpoint: D,
+                          fn_index: T
+                        });
+                        return;
+                      } else
+                        V === "generating" && (q({
+                          type: "status",
+                          time: /* @__PURE__ */ new Date(),
+                          ...Z,
+                          stage: Z == null ? void 0 : Z.stage,
+                          queue: !0,
+                          endpoint: D,
+                          fn_index: T
+                        }), mt && He === "sse_v2" && Me(R, mt));
+                      mt && (q({
+                        type: "data",
+                        time: /* @__PURE__ */ new Date(),
+                        data: mt.data,
+                        endpoint: D,
+                        fn_index: T
+                      }), j && q({
+                        type: "status",
+                        time: /* @__PURE__ */ new Date(),
+                        ...j,
+                        stage: Z == null ? void 0 : Z.stage,
+                        queue: !0,
+                        endpoint: D,
+                        fn_index: T
+                      })), ((Z == null ? void 0 : Z.stage) === "complete" || (Z == null ? void 0 : Z.stage) === "error") && (E[R] && delete E[R], R in C && delete C[R]);
+                    } catch (V) {
+                      console.error("Unexpected client exception", V), q({
+                        type: "status",
+                        stage: "error",
+                        message: "An Unexpected Error Occurred!",
+                        queue: !0,
+                        endpoint: D,
+                        fn_index: T,
+                        time: /* @__PURE__ */ new Date()
+                      }), ye();
+                    }
+                  };
+                  R in w && (w[R].forEach(
+                    (ue) => de(ue)
+                  ), delete w[R]), E[R] = de, N.add(R), y || ke();
+                }
+              }));
+          }
+        );
+        function Me(K, ge) {
+          !C[K] ? (C[K] = [], ge.data.forEach((Y, de) => {
+            C[K][de] = Y;
+          })) : ge.data.forEach((Y, de) => {
+            let ue = Wh(
+              C[K][de],
+              Y
+            );
+            C[K][de] = ue, ge.data[de] = ue;
+          });
+        }
+        function q(K) {
+          const ne = X[K.type] || [];
+          ne == null || ne.forEach((Y) => Y(K));
+        }
+        function Vi(K, ge) {
+          const ne = X, Y = ne[K] || [];
+          return ne[K] = Y, Y == null || Y.push(ge), { on: Vi, off: xn, cancel: Xi, destroy: Wi };
+        }
+        function xn(K, ge) {
+          const ne = X;
+          let Y = ne[K] || [];
+          return Y = Y == null ? void 0 : Y.filter((de) => de !== ge), ne[K] = Y, { on: Vi, off: xn, cancel: Xi, destroy: Wi };
+        }
+        async function Xi() {
+          const K = {
+            stage: "complete",
+            queue: !1,
+            time: /* @__PURE__ */ new Date()
+          };
+          j = K, q({
+            ...K,
+            type: "status",
+            endpoint: D,
+            fn_index: T
+          });
+          let ge = {};
+          He === "ws" ? (Q && Q.readyState === 0 ? Q.addEventListener("open", () => {
+            Q.close();
+          }) : Q.close(), ge = { fn_index: T, session_hash: b }) : (Se.close(), ge = { event_id: R });
+          try {
+            await t(`${v.root}/reset`, {
+              headers: { "Content-Type": "application/json" },
+              method: "POST",
+              body: JSON.stringify(ge)
+            });
+          } catch {
+            console.warn(
+              "The `/reset` endpoint could not be called. Subsequent endpoint results may be unreliable."
+            );
+          }
+        }
+        function Wi() {
+          for (const K in X)
+            X[K].forEach((ge) => {
+              xn(K, ge);
+            });
+        }
+        return {
+          on: Vi,
+          off: xn,
+          cancel: Xi,
+          destroy: Wi
+        };
+      }
+      function ke() {
+        y = !0;
+        let S = new URLSearchParams({
+          session_hash: b
+        }).toString(), k = new URL(`${v.root}/queue/data?${S}`);
+        P = e(k), P.onmessage = async function(I) {
+          let g = JSON.parse(I.data);
+          const T = g.event_id;
+          if (!T)
+            await Promise.all(
+              Object.keys(E).map(
+                (ae) => E[ae](g)
+              )
+            );
+          else if (E[T]) {
+            g.msg === "process_completed" && (N.delete(T), N.size === 0 && ye());
+            let ae = E[T];
+            window.setTimeout(ae, 0, g);
+          } else
+            w[T] || (w[T] = []), w[T].push(g);
+        }, P.onerror = async function(I) {
+          await Promise.all(
+            Object.keys(E).map(
+              (g) => E[g]({
+                msg: "unexpected_error",
+                message: gt
+              })
+            )
+          ), ye();
+        };
+      }
+      function ye() {
+        y = !1, P == null || P.close();
+      }
+      async function me(S, k, I) {
+        var g;
+        const T = { "Content-Type": "application/json" };
+        f && (T.Authorization = `Bearer ${f}`);
+        let ae, Q = v.components.find(
+          (D) => D.id === S
+        );
+        (g = Q == null ? void 0 : Q.props) != null && g.root_url ? ae = Q.props.root_url : ae = v.root;
+        const Se = await t(
+          `${ae}/component_server/`,
+          {
+            method: "POST",
+            body: JSON.stringify({
+              data: I,
+              component_id: S,
+              fn_name: k,
+              session_hash: b
+            }),
+            headers: T
+          }
+        );
+        if (!Se.ok)
+          throw new Error(
+            "Could not connect to component server: " + Se.statusText
+          );
+        return await Se.json();
+      }
+      async function _e(S) {
+        if (x)
+          return x;
+        const k = { "Content-Type": "application/json" };
+        f && (k.Authorization = `Bearer ${f}`);
+        let I;
+        if (_o(S.version || "2.0.0", "3.30") < 0 ? I = await t(
+          "https://gradio-space-api-fetcher-v2.hf.space/api",
+          {
+            method: "POST",
+            body: JSON.stringify({
+              serialize: !1,
+              config: JSON.stringify(S)
+            }),
+            headers: k
+          }
+        ) : I = await t(`${S.root}/info`, {
+          headers: k
+        }), !I.ok)
+          throw new Error(gt);
+        let g = await I.json();
+        return "api" in g && (g = g.api), g.named_endpoints["/predict"] && !g.unnamed_endpoints[0] && (g.unnamed_endpoints[0] = g.named_endpoints["/predict"]), Kh(g, S, A);
+      }
+    });
+  }
+  async function s(o, r, a, u) {
+    const f = await Gl(
+      r,
+      void 0,
+      [],
+      !0,
+      a
+    );
+    return Promise.all(
+      f.map(async ({ path: _, blob: h, type: c }) => {
+        if (h) {
+          const d = (await i(o, [h], u)).files[0];
+          return { path: _, file_url: d, type: c, name: h == null ? void 0 : h.name };
+        }
+        return { path: _, type: c };
+      })
+    ).then((_) => (_.forEach(({ path: h, file_url: c, type: d, name: m }) => {
+      if (d === "Gallery")
+        bo(r, c, h);
+      else if (c) {
+        const b = new hs({ path: c, orig_name: m });
+        bo(r, b, h);
+      }
+    }), r));
+  }
+}
+const { post_data: fb, upload_files: Qh, client: cb, handle_blob: _b } = Jh(
+  fetch,
+  (...t) => new EventSource(...t)
+);
+function mo(t, e, n, i) {
+  switch (t.type) {
+    case "string":
+      return "string";
+    case "boolean":
+      return "boolean";
+    case "number":
+      return "number";
+  }
+  if (n === "JSONSerializable" || n === "StringSerializable")
+    return "any";
+  if (n === "ListStringSerializable")
+    return "string[]";
+  if (e === "Image")
+    return i === "parameter" ? "Blob | File | Buffer" : "string";
+  if (n === "FileSerializable")
+    return (t == null ? void 0 : t.type) === "array" ? i === "parameter" ? "(Blob | File | Buffer)[]" : "{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}[]" : i === "parameter" ? "Blob | File | Buffer" : "{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}";
+  if (n === "GallerySerializable")
+    return i === "parameter" ? "[(Blob | File | Buffer), (string | null)][]" : "[{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}, (string | null))][]";
+}
+function go(t, e) {
+  return e === "GallerySerializable" ? "array of [file, label] tuples" : e === "ListStringSerializable" ? "array of strings" : e === "FileSerializable" ? "array of files or single file" : t.description;
+}
+function Kh(t, e, n) {
+  const i = {
+    named_endpoints: {},
+    unnamed_endpoints: {}
+  };
+  for (const l in t) {
+    const s = t[l];
+    for (const o in s) {
+      const r = e.dependencies[o] ? o : n[o.replace("/", "")], a = s[o];
+      i[l][o] = {}, i[l][o].parameters = {}, i[l][o].returns = {}, i[l][o].type = e.dependencies[r].types, i[l][o].parameters = a.parameters.map(
+        ({ label: u, component: f, type: _, serializer: h }) => ({
+          label: u,
+          component: f,
+          type: mo(_, f, h, "parameter"),
+          description: go(_, h)
+        })
+      ), i[l][o].returns = a.returns.map(
+        ({ label: u, component: f, type: _, serializer: h }) => ({
+          label: u,
+          component: f,
+          type: mo(_, f, h, "return"),
+          description: go(_, h)
+        })
+      );
+    }
+  }
+  return i;
+}
+async function $h(t, e) {
+  try {
+    return (await (await fetch(`https://huggingface.co/api/spaces/${t}/jwt`, {
+      headers: {
+        Authorization: `Bearer ${e}`
+      }
+    })).json()).token || !1;
+  } catch (n) {
+    return console.error(n), !1;
+  }
+}
+function bo(t, e, n) {
+  for (; n.length > 1; )
+    t = t[n.shift()];
+  t[n.shift()] = e;
+}
+async function Gl(t, e = void 0, n = [], i = !1, l = void 0) {
+  if (Array.isArray(t)) {
+    let s = [];
+    return await Promise.all(
+      t.map(async (o, r) => {
+        var a;
+        let u = n.slice();
+        u.push(r);
+        const f = await Gl(
+          t[r],
+          i ? ((a = l == null ? void 0 : l.parameters[r]) == null ? void 0 : a.component) || void 0 : e,
+          u,
+          !1,
+          l
+        );
+        s = s.concat(f);
+      })
+    ), s;
+  } else {
+    if (globalThis.Buffer && t instanceof globalThis.Buffer)
+      return [
+        {
+          path: n,
+          blob: e === "Image" ? !1 : new Yr([t]),
+          type: e
+        }
+      ];
+    if (typeof t == "object") {
+      let s = [];
+      for (let o in t)
+        if (t.hasOwnProperty(o)) {
+          let r = n.slice();
+          r.push(o), s = s.concat(
+            await Gl(
+              t[o],
+              void 0,
+              r,
+              !1,
+              l
+            )
+          );
+        }
+      return s;
+    }
+  }
+  return [];
+}
+function e0(t, e) {
+  var n, i, l, s;
+  return !(((i = (n = e == null ? void 0 : e.dependencies) == null ? void 0 : n[t]) == null ? void 0 : i.queue) === null ? e.enable_queue : (s = (l = e == null ? void 0 : e.dependencies) == null ? void 0 : l[t]) != null && s.queue) || !1;
+}
+async function po(t, e, n) {
+  const i = {};
+  if (n && (i.Authorization = `Bearer ${n}`), typeof window < "u" && window.gradio_config && location.origin !== "http://localhost:9876" && !window.gradio_config.dev_mode) {
+    const l = window.gradio_config.root, s = window.gradio_config;
+    return s.root = Xr(e, s.root, !1), { ...s, path: l };
+  } else if (e) {
+    let l = await t(`${e}/config`, {
+      headers: i
+    });
+    if (l.status === 200) {
+      const s = await l.json();
+      return s.path = s.path ?? "", s.root = e, s;
+    }
+    throw new Error("Could not get config.");
+  }
+  throw new Error("No config or app endpoint found");
+}
+async function xl(t, e, n) {
+  let i = e === "subdomain" ? `https://huggingface.co/api/spaces/by-subdomain/${t}` : `https://huggingface.co/api/spaces/${t}`, l, s;
+  try {
+    if (l = await fetch(i), s = l.status, s !== 200)
+      throw new Error();
+    l = await l.json();
+  } catch {
+    n({
+      status: "error",
+      load_status: "error",
+      message: "Could not get space status",
+      detail: "NOT_FOUND"
+    });
+    return;
+  }
+  if (!l || s !== 200)
+    return;
+  const {
+    runtime: { stage: o },
+    id: r
+  } = l;
+  switch (o) {
+    case "STOPPED":
+    case "SLEEPING":
+      n({
+        status: "sleeping",
+        load_status: "pending",
+        message: "Space is asleep. Waking it up...",
+        detail: o
+      }), setTimeout(() => {
+        xl(t, e, n);
+      }, 1e3);
+      break;
+    case "PAUSED":
+      n({
+        status: "paused",
+        load_status: "error",
+        message: "This space has been paused by the author. If you would like to try this demo, consider duplicating the space.",
+        detail: o,
+        discussions_enabled: await ho(r)
+      });
+      break;
+    case "RUNNING":
+    case "RUNNING_BUILDING":
+      n({
+        status: "running",
+        load_status: "complete",
+        message: "",
+        detail: o
+      });
+      break;
+    case "BUILDING":
+      n({
+        status: "building",
+        load_status: "pending",
+        message: "Space is building...",
+        detail: o
+      }), setTimeout(() => {
+        xl(t, e, n);
+      }, 1e3);
+      break;
+    default:
+      n({
+        status: "space_error",
+        load_status: "error",
+        message: "This space is experiencing an issue.",
+        detail: o,
+        discussions_enabled: await ho(r)
+      });
+      break;
+  }
+}
+function ml(t, e) {
+  switch (t.msg) {
+    case "send_data":
+      return { type: "data" };
+    case "send_hash":
+      return { type: "hash" };
+    case "queue_full":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          message: Zr,
+          stage: "error",
+          code: t.code,
+          success: t.success
+        }
+      };
+    case "heartbeat":
+      return {
+        type: "heartbeat"
+      };
+    case "unexpected_error":
+      return {
+        type: "unexpected_error",
+        status: {
+          queue: !0,
+          message: t.message,
+          stage: "error",
+          success: !1
+        }
+      };
+    case "estimation":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          stage: e || "pending",
+          code: t.code,
+          size: t.queue_size,
+          position: t.rank,
+          eta: t.rank_eta,
+          success: t.success
+        }
+      };
+    case "progress":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          stage: "pending",
+          code: t.code,
+          progress_data: t.progress_data,
+          success: t.success
+        }
+      };
+    case "log":
+      return { type: "log", data: t };
+    case "process_generating":
+      return {
+        type: "generating",
+        status: {
+          queue: !0,
+          message: t.success ? null : t.output.error,
+          stage: t.success ? "generating" : "error",
+          code: t.code,
+          progress_data: t.progress_data,
+          eta: t.average_duration
+        },
+        data: t.success ? t.output : null
+      };
+    case "process_completed":
+      return "error" in t.output ? {
+        type: "update",
+        status: {
+          queue: !0,
+          message: t.output.error,
+          stage: "error",
+          code: t.code,
+          success: t.success
+        }
+      } : {
+        type: "complete",
+        status: {
+          queue: !0,
+          message: t.success ? void 0 : t.output.error,
+          stage: t.success ? "complete" : "error",
+          code: t.code,
+          progress_data: t.progress_data
+        },
+        data: t.success ? t.output : null
+      };
+    case "process_starts":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          stage: "pending",
+          code: t.code,
+          size: t.rank,
+          position: 0,
+          success: t.success,
+          eta: t.eta
+        }
+      };
+  }
+  return { type: "none", status: { stage: "error", queue: !0 } };
+}
+function t0(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var n0 = function(e) {
+  return i0(e) && !l0(e);
+};
+function i0(t) {
+  return !!t && typeof t == "object";
+}
+function l0(t) {
+  var e = Object.prototype.toString.call(t);
+  return e === "[object RegExp]" || e === "[object Date]" || r0(t);
+}
+var s0 = typeof Symbol == "function" && Symbol.for, o0 = s0 ? Symbol.for("react.element") : 60103;
+function r0(t) {
+  return t.$$typeof === o0;
+}
+function a0(t) {
+  return Array.isArray(t) ? [] : {};
+}
+function Mn(t, e) {
+  return e.clone !== !1 && e.isMergeableObject(t) ? on(a0(t), t, e) : t;
+}
+function u0(t, e, n) {
+  return t.concat(e).map(function(i) {
+    return Mn(i, n);
+  });
+}
+function f0(t, e) {
+  if (!e.customMerge)
+    return on;
+  var n = e.customMerge(t);
+  return typeof n == "function" ? n : on;
+}
+function c0(t) {
+  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(t).filter(function(e) {
+    return Object.propertyIsEnumerable.call(t, e);
+  }) : [];
+}
+function wo(t) {
+  return Object.keys(t).concat(c0(t));
+}
+function Jr(t, e) {
+  try {
+    return e in t;
+  } catch {
+    return !1;
+  }
+}
+function _0(t, e) {
+  return Jr(t, e) && !(Object.hasOwnProperty.call(t, e) && Object.propertyIsEnumerable.call(t, e));
+}
+function h0(t, e, n) {
+  var i = {};
+  return n.isMergeableObject(t) && wo(t).forEach(function(l) {
+    i[l] = Mn(t[l], n);
+  }), wo(e).forEach(function(l) {
+    _0(t, l) || (Jr(t, l) && n.isMergeableObject(e[l]) ? i[l] = f0(l, n)(t[l], e[l], n) : i[l] = Mn(e[l], n));
+  }), i;
+}
+function on(t, e, n) {
+  n = n || {}, n.arrayMerge = n.arrayMerge || u0, n.isMergeableObject = n.isMergeableObject || n0, n.cloneUnlessOtherwiseSpecified = Mn;
+  var i = Array.isArray(e), l = Array.isArray(t), s = i === l;
+  return s ? i ? n.arrayMerge(t, e, n) : h0(t, e, n) : Mn(e, n);
+}
+on.all = function(e, n) {
+  if (!Array.isArray(e))
+    throw new Error("first argument should be an array");
+  return e.reduce(function(i, l) {
+    return on(i, l, n);
+  }, {});
+};
+var d0 = on, m0 = d0;
+const g0 = /* @__PURE__ */ t0(m0);
+var Vl = function(t, e) {
+  return Vl = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(n, i) {
+    n.__proto__ = i;
+  } || function(n, i) {
+    for (var l in i)
+      Object.prototype.hasOwnProperty.call(i, l) && (n[l] = i[l]);
+  }, Vl(t, e);
+};
+function Ui(t, e) {
+  if (typeof e != "function" && e !== null)
+    throw new TypeError("Class extends value " + String(e) + " is not a constructor or null");
+  Vl(t, e);
+  function n() {
+    this.constructor = t;
+  }
+  t.prototype = e === null ? Object.create(e) : (n.prototype = e.prototype, new n());
+}
+var G = function() {
+  return G = Object.assign || function(e) {
+    for (var n, i = 1, l = arguments.length; i < l; i++) {
+      n = arguments[i];
+      for (var s in n)
+        Object.prototype.hasOwnProperty.call(n, s) && (e[s] = n[s]);
+    }
+    return e;
+  }, G.apply(this, arguments);
+};
+function gl(t, e, n) {
+  if (n || arguments.length === 2)
+    for (var i = 0, l = e.length, s; i < l; i++)
+      (s || !(i in e)) && (s || (s = Array.prototype.slice.call(e, 0, i)), s[i] = e[i]);
+  return t.concat(s || Array.prototype.slice.call(e));
+}
+var U;
+(function(t) {
+  t[t.EXPECT_ARGUMENT_CLOSING_BRACE = 1] = "EXPECT_ARGUMENT_CLOSING_BRACE", t[t.EMPTY_ARGUMENT = 2] = "EMPTY_ARGUMENT", t[t.MALFORMED_ARGUMENT = 3] = "MALFORMED_ARGUMENT", t[t.EXPECT_ARGUMENT_TYPE = 4] = "EXPECT_ARGUMENT_TYPE", t[t.INVALID_ARGUMENT_TYPE = 5] = "INVALID_ARGUMENT_TYPE", t[t.EXPECT_ARGUMENT_STYLE = 6] = "EXPECT_ARGUMENT_STYLE", t[t.INVALID_NUMBER_SKELETON = 7] = "INVALID_NUMBER_SKELETON", t[t.INVALID_DATE_TIME_SKELETON = 8] = "INVALID_DATE_TIME_SKELETON", t[t.EXPECT_NUMBER_SKELETON = 9] = "EXPECT_NUMBER_SKELETON", t[t.EXPECT_DATE_TIME_SKELETON = 10] = "EXPECT_DATE_TIME_SKELETON", t[t.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE = 11] = "UNCLOSED_QUOTE_IN_ARGUMENT_STYLE", t[t.EXPECT_SELECT_ARGUMENT_OPTIONS = 12] = "EXPECT_SELECT_ARGUMENT_OPTIONS", t[t.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE = 13] = "EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE", t[t.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE = 14] = "INVALID_PLURAL_ARGUMENT_OFFSET_VALUE", t[t.EXPECT_SELECT_ARGUMENT_SELECTOR = 15] = "EXPECT_SELECT_ARGUMENT_SELECTOR", t[t.EXPECT_PLURAL_ARGUMENT_SELECTOR = 16] = "EXPECT_PLURAL_ARGUMENT_SELECTOR", t[t.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT = 17] = "EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT", t[t.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT = 18] = "EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT", t[t.INVALID_PLURAL_ARGUMENT_SELECTOR = 19] = "INVALID_PLURAL_ARGUMENT_SELECTOR", t[t.DUPLICATE_PLURAL_ARGUMENT_SELECTOR = 20] = "DUPLICATE_PLURAL_ARGUMENT_SELECTOR", t[t.DUPLICATE_SELECT_ARGUMENT_SELECTOR = 21] = "DUPLICATE_SELECT_ARGUMENT_SELECTOR", t[t.MISSING_OTHER_CLAUSE = 22] = "MISSING_OTHER_CLAUSE", t[t.INVALID_TAG = 23] = "INVALID_TAG", t[t.INVALID_TAG_NAME = 25] = "INVALID_TAG_NAME", t[t.UNMATCHED_CLOSING_TAG = 26] = "UNMATCHED_CLOSING_TAG", t[t.UNCLOSED_TAG = 27] = "UNCLOSED_TAG";
+})(U || (U = {}));
+var ee;
+(function(t) {
+  t[t.literal = 0] = "literal", t[t.argument = 1] = "argument", t[t.number = 2] = "number", t[t.date = 3] = "date", t[t.time = 4] = "time", t[t.select = 5] = "select", t[t.plural = 6] = "plural", t[t.pound = 7] = "pound", t[t.tag = 8] = "tag";
+})(ee || (ee = {}));
+var rn;
+(function(t) {
+  t[t.number = 0] = "number", t[t.dateTime = 1] = "dateTime";
+})(rn || (rn = {}));
+function vo(t) {
+  return t.type === ee.literal;
+}
+function b0(t) {
+  return t.type === ee.argument;
+}
+function Qr(t) {
+  return t.type === ee.number;
+}
+function Kr(t) {
+  return t.type === ee.date;
+}
+function $r(t) {
+  return t.type === ee.time;
+}
+function ea(t) {
+  return t.type === ee.select;
+}
+function ta(t) {
+  return t.type === ee.plural;
+}
+function p0(t) {
+  return t.type === ee.pound;
+}
+function na(t) {
+  return t.type === ee.tag;
+}
+function ia(t) {
+  return !!(t && typeof t == "object" && t.type === rn.number);
+}
+function Xl(t) {
+  return !!(t && typeof t == "object" && t.type === rn.dateTime);
+}
+var la = /[ \xA0\u1680\u2000-\u200A\u202F\u205F\u3000]/, w0 = /(?:[Eec]{1,6}|G{1,5}|[Qq]{1,5}|(?:[yYur]+|U{1,5})|[ML]{1,5}|d{1,2}|D{1,3}|F{1}|[abB]{1,5}|[hkHK]{1,2}|w{1,2}|W{1}|m{1,2}|s{1,2}|[zZOvVxX]{1,4})(?=([^']*'[^']*')*[^']*$)/g;
+function v0(t) {
+  var e = {};
+  return t.replace(w0, function(n) {
+    var i = n.length;
+    switch (n[0]) {
+      case "G":
+        e.era = i === 4 ? "long" : i === 5 ? "narrow" : "short";
+        break;
+      case "y":
+        e.year = i === 2 ? "2-digit" : "numeric";
+        break;
+      case "Y":
+      case "u":
+      case "U":
+      case "r":
+        throw new RangeError("`Y/u/U/r` (year) patterns are not supported, use `y` instead");
+      case "q":
+      case "Q":
+        throw new RangeError("`q/Q` (quarter) patterns are not supported");
+      case "M":
+      case "L":
+        e.month = ["numeric", "2-digit", "short", "long", "narrow"][i - 1];
+        break;
+      case "w":
+      case "W":
+        throw new RangeError("`w/W` (week) patterns are not supported");
+      case "d":
+        e.day = ["numeric", "2-digit"][i - 1];
+        break;
+      case "D":
+      case "F":
+      case "g":
+        throw new RangeError("`D/F/g` (day) patterns are not supported, use `d` instead");
+      case "E":
+        e.weekday = i === 4 ? "short" : i === 5 ? "narrow" : "short";
+        break;
+      case "e":
+        if (i < 4)
+          throw new RangeError("`e..eee` (weekday) patterns are not supported");
+        e.weekday = ["short", "long", "narrow", "short"][i - 4];
+        break;
+      case "c":
+        if (i < 4)
+          throw new RangeError("`c..ccc` (weekday) patterns are not supported");
+        e.weekday = ["short", "long", "narrow", "short"][i - 4];
+        break;
+      case "a":
+        e.hour12 = !0;
+        break;
+      case "b":
+      case "B":
+        throw new RangeError("`b/B` (period) patterns are not supported, use `a` instead");
+      case "h":
+        e.hourCycle = "h12", e.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "H":
+        e.hourCycle = "h23", e.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "K":
+        e.hourCycle = "h11", e.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "k":
+        e.hourCycle = "h24", e.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "j":
+      case "J":
+      case "C":
+        throw new RangeError("`j/J/C` (hour) patterns are not supported, use `h/H/K/k` instead");
+      case "m":
+        e.minute = ["numeric", "2-digit"][i - 1];
+        break;
+      case "s":
+        e.second = ["numeric", "2-digit"][i - 1];
+        break;
+      case "S":
+      case "A":
+        throw new RangeError("`S/A` (second) patterns are not supported, use `s` instead");
+      case "z":
+        e.timeZoneName = i < 4 ? "short" : "long";
+        break;
+      case "Z":
+      case "O":
+      case "v":
+      case "V":
+      case "X":
+      case "x":
+        throw new RangeError("`Z/O/v/V/X/x` (timeZone) patterns are not supported, use `z` instead");
+    }
+    return "";
+  }), e;
+}
+var y0 = /[\t-\r \x85\u200E\u200F\u2028\u2029]/i;
+function E0(t) {
+  if (t.length === 0)
+    throw new Error("Number skeleton cannot be empty");
+  for (var e = t.split(y0).filter(function(h) {
+    return h.length > 0;
+  }), n = [], i = 0, l = e; i < l.length; i++) {
+    var s = l[i], o = s.split("/");
+    if (o.length === 0)
+      throw new Error("Invalid number skeleton");
+    for (var r = o[0], a = o.slice(1), u = 0, f = a; u < f.length; u++) {
+      var _ = f[u];
+      if (_.length === 0)
+        throw new Error("Invalid number skeleton");
+    }
+    n.push({ stem: r, options: a });
+  }
+  return n;
+}
+function k0(t) {
+  return t.replace(/^(.*?)-/, "");
+}
+var yo = /^\.(?:(0+)(\*)?|(#+)|(0+)(#+))$/g, sa = /^(@+)?(\+|#+)?[rs]?$/g, S0 = /(\*)(0+)|(#+)(0+)|(0+)/g, oa = /^(0+)$/;
+function Eo(t) {
+  var e = {};
+  return t[t.length - 1] === "r" ? e.roundingPriority = "morePrecision" : t[t.length - 1] === "s" && (e.roundingPriority = "lessPrecision"), t.replace(sa, function(n, i, l) {
+    return typeof l != "string" ? (e.minimumSignificantDigits = i.length, e.maximumSignificantDigits = i.length) : l === "+" ? e.minimumSignificantDigits = i.length : i[0] === "#" ? e.maximumSignificantDigits = i.length : (e.minimumSignificantDigits = i.length, e.maximumSignificantDigits = i.length + (typeof l == "string" ? l.length : 0)), "";
+  }), e;
+}
+function ra(t) {
+  switch (t) {
+    case "sign-auto":
+      return {
+        signDisplay: "auto"
+      };
+    case "sign-accounting":
+    case "()":
+      return {
+        currencySign: "accounting"
+      };
+    case "sign-always":
+    case "+!":
+      return {
+        signDisplay: "always"
+      };
+    case "sign-accounting-always":
+    case "()!":
+      return {
+        signDisplay: "always",
+        currencySign: "accounting"
+      };
+    case "sign-except-zero":
+    case "+?":
+      return {
+        signDisplay: "exceptZero"
+      };
+    case "sign-accounting-except-zero":
+    case "()?":
+      return {
+        signDisplay: "exceptZero",
+        currencySign: "accounting"
+      };
+    case "sign-never":
+    case "+_":
+      return {
+        signDisplay: "never"
+      };
+  }
+}
+function C0(t) {
+  var e;
+  if (t[0] === "E" && t[1] === "E" ? (e = {
+    notation: "engineering"
+  }, t = t.slice(2)) : t[0] === "E" && (e = {
+    notation: "scientific"
+  }, t = t.slice(1)), e) {
+    var n = t.slice(0, 2);
+    if (n === "+!" ? (e.signDisplay = "always", t = t.slice(2)) : n === "+?" && (e.signDisplay = "exceptZero", t = t.slice(2)), !oa.test(t))
+      throw new Error("Malformed concise eng/scientific notation");
+    e.minimumIntegerDigits = t.length;
+  }
+  return e;
+}
+function ko(t) {
+  var e = {}, n = ra(t);
+  return n || e;
+}
+function A0(t) {
+  for (var e = {}, n = 0, i = t; n < i.length; n++) {
+    var l = i[n];
+    switch (l.stem) {
+      case "percent":
+      case "%":
+        e.style = "percent";
+        continue;
+      case "%x100":
+        e.style = "percent", e.scale = 100;
+        continue;
+      case "currency":
+        e.style = "currency", e.currency = l.options[0];
+        continue;
+      case "group-off":
+      case ",_":
+        e.useGrouping = !1;
+        continue;
+      case "precision-integer":
+      case ".":
+        e.maximumFractionDigits = 0;
+        continue;
+      case "measure-unit":
+      case "unit":
+        e.style = "unit", e.unit = k0(l.options[0]);
+        continue;
+      case "compact-short":
+      case "K":
+        e.notation = "compact", e.compactDisplay = "short";
+        continue;
+      case "compact-long":
+      case "KK":
+        e.notation = "compact", e.compactDisplay = "long";
+        continue;
+      case "scientific":
+        e = G(G(G({}, e), { notation: "scientific" }), l.options.reduce(function(a, u) {
+          return G(G({}, a), ko(u));
+        }, {}));
+        continue;
+      case "engineering":
+        e = G(G(G({}, e), { notation: "engineering" }), l.options.reduce(function(a, u) {
+          return G(G({}, a), ko(u));
+        }, {}));
+        continue;
+      case "notation-simple":
+        e.notation = "standard";
+        continue;
+      case "unit-width-narrow":
+        e.currencyDisplay = "narrowSymbol", e.unitDisplay = "narrow";
+        continue;
+      case "unit-width-short":
+        e.currencyDisplay = "code", e.unitDisplay = "short";
+        continue;
+      case "unit-width-full-name":
+        e.currencyDisplay = "name", e.unitDisplay = "long";
+        continue;
+      case "unit-width-iso-code":
+        e.currencyDisplay = "symbol";
+        continue;
+      case "scale":
+        e.scale = parseFloat(l.options[0]);
+        continue;
+      case "integer-width":
+        if (l.options.length > 1)
+          throw new RangeError("integer-width stems only accept a single optional option");
+        l.options[0].replace(S0, function(a, u, f, _, h, c) {
+          if (u)
+            e.minimumIntegerDigits = f.length;
+          else {
+            if (_ && h)
+              throw new Error("We currently do not support maximum integer digits");
+            if (c)
+              throw new Error("We currently do not support exact integer digits");
+          }
+          return "";
+        });
+        continue;
+    }
+    if (oa.test(l.stem)) {
+      e.minimumIntegerDigits = l.stem.length;
+      continue;
+    }
+    if (yo.test(l.stem)) {
+      if (l.options.length > 1)
+        throw new RangeError("Fraction-precision stems only accept a single optional option");
+      l.stem.replace(yo, function(a, u, f, _, h, c) {
+        return f === "*" ? e.minimumFractionDigits = u.length : _ && _[0] === "#" ? e.maximumFractionDigits = _.length : h && c ? (e.minimumFractionDigits = h.length, e.maximumFractionDigits = h.length + c.length) : (e.minimumFractionDigits = u.length, e.maximumFractionDigits = u.length), "";
+      });
+      var s = l.options[0];
+      s === "w" ? e = G(G({}, e), { trailingZeroDisplay: "stripIfInteger" }) : s && (e = G(G({}, e), Eo(s)));
+      continue;
+    }
+    if (sa.test(l.stem)) {
+      e = G(G({}, e), Eo(l.stem));
+      continue;
+    }
+    var o = ra(l.stem);
+    o && (e = G(G({}, e), o));
+    var r = C0(l.stem);
+    r && (e = G(G({}, e), r));
+  }
+  return e;
+}
+var $n = {
+  AX: [
+    "H"
+  ],
+  BQ: [
+    "H"
+  ],
+  CP: [
+    "H"
+  ],
+  CZ: [
+    "H"
+  ],
+  DK: [
+    "H"
+  ],
+  FI: [
+    "H"
+  ],
+  ID: [
+    "H"
+  ],
+  IS: [
+    "H"
+  ],
+  ML: [
+    "H"
+  ],
+  NE: [
+    "H"
+  ],
+  RU: [
+    "H"
+  ],
+  SE: [
+    "H"
+  ],
+  SJ: [
+    "H"
+  ],
+  SK: [
+    "H"
+  ],
+  AS: [
+    "h",
+    "H"
+  ],
+  BT: [
+    "h",
+    "H"
+  ],
+  DJ: [
+    "h",
+    "H"
+  ],
+  ER: [
+    "h",
+    "H"
+  ],
+  GH: [
+    "h",
+    "H"
+  ],
+  IN: [
+    "h",
+    "H"
+  ],
+  LS: [
+    "h",
+    "H"
+  ],
+  PG: [
+    "h",
+    "H"
+  ],
+  PW: [
+    "h",
+    "H"
+  ],
+  SO: [
+    "h",
+    "H"
+  ],
+  TO: [
+    "h",
+    "H"
+  ],
+  VU: [
+    "h",
+    "H"
+  ],
+  WS: [
+    "h",
+    "H"
+  ],
+  "001": [
+    "H",
+    "h"
+  ],
+  AL: [
+    "h",
+    "H",
+    "hB"
+  ],
+  TD: [
+    "h",
+    "H",
+    "hB"
+  ],
+  "ca-ES": [
+    "H",
+    "h",
+    "hB"
+  ],
+  CF: [
+    "H",
+    "h",
+    "hB"
+  ],
+  CM: [
+    "H",
+    "h",
+    "hB"
+  ],
+  "fr-CA": [
+    "H",
+    "h",
+    "hB"
+  ],
+  "gl-ES": [
+    "H",
+    "h",
+    "hB"
+  ],
+  "it-CH": [
+    "H",
+    "h",
+    "hB"
+  ],
+  "it-IT": [
+    "H",
+    "h",
+    "hB"
+  ],
+  LU: [
+    "H",
+    "h",
+    "hB"
+  ],
+  NP: [
+    "H",
+    "h",
+    "hB"
+  ],
+  PF: [
+    "H",
+    "h",
+    "hB"
+  ],
+  SC: [
+    "H",
+    "h",
+    "hB"
+  ],
+  SM: [
+    "H",
+    "h",
+    "hB"
+  ],
+  SN: [
+    "H",
+    "h",
+    "hB"
+  ],
+  TF: [
+    "H",
+    "h",
+    "hB"
+  ],
+  VA: [
+    "H",
+    "h",
+    "hB"
+  ],
+  CY: [
+    "h",
+    "H",
+    "hb",
+    "hB"
+  ],
+  GR: [
+    "h",
+    "H",
+    "hb",
+    "hB"
+  ],
+  CO: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  DO: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  KP: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  KR: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  NA: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  PA: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  PR: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  VE: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  AC: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  AI: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  BW: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  BZ: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  CC: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  CK: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  CX: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  DG: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  FK: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  GB: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  GG: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  GI: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  IE: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  IM: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  IO: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  JE: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  LT: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  MK: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  MN: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  MS: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NF: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NG: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NR: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NU: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  PN: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  SH: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  SX: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  TA: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  ZA: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  "af-ZA": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  AR: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  CL: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  CR: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  CU: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  EA: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-BO": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-BR": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-EC": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-ES": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-GQ": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-PE": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  GT: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  HN: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  IC: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  KG: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  KM: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  LK: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  MA: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  MX: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  NI: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  PY: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  SV: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  UY: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  JP: [
+    "H",
+    "h",
+    "K"
+  ],
+  AD: [
+    "H",
+    "hB"
+  ],
+  AM: [
+    "H",
+    "hB"
+  ],
+  AO: [
+    "H",
+    "hB"
+  ],
+  AT: [
+    "H",
+    "hB"
+  ],
+  AW: [
+    "H",
+    "hB"
+  ],
+  BE: [
+    "H",
+    "hB"
+  ],
+  BF: [
+    "H",
+    "hB"
+  ],
+  BJ: [
+    "H",
+    "hB"
+  ],
+  BL: [
+    "H",
+    "hB"
+  ],
+  BR: [
+    "H",
+    "hB"
+  ],
+  CG: [
+    "H",
+    "hB"
+  ],
+  CI: [
+    "H",
+    "hB"
+  ],
+  CV: [
+    "H",
+    "hB"
+  ],
+  DE: [
+    "H",
+    "hB"
+  ],
+  EE: [
+    "H",
+    "hB"
+  ],
+  FR: [
+    "H",
+    "hB"
+  ],
+  GA: [
+    "H",
+    "hB"
+  ],
+  GF: [
+    "H",
+    "hB"
+  ],
+  GN: [
+    "H",
+    "hB"
+  ],
+  GP: [
+    "H",
+    "hB"
+  ],
+  GW: [
+    "H",
+    "hB"
+  ],
+  HR: [
+    "H",
+    "hB"
+  ],
+  IL: [
+    "H",
+    "hB"
+  ],
+  IT: [
+    "H",
+    "hB"
+  ],
+  KZ: [
+    "H",
+    "hB"
+  ],
+  MC: [
+    "H",
+    "hB"
+  ],
+  MD: [
+    "H",
+    "hB"
+  ],
+  MF: [
+    "H",
+    "hB"
+  ],
+  MQ: [
+    "H",
+    "hB"
+  ],
+  MZ: [
+    "H",
+    "hB"
+  ],
+  NC: [
+    "H",
+    "hB"
+  ],
+  NL: [
+    "H",
+    "hB"
+  ],
+  PM: [
+    "H",
+    "hB"
+  ],
+  PT: [
+    "H",
+    "hB"
+  ],
+  RE: [
+    "H",
+    "hB"
+  ],
+  RO: [
+    "H",
+    "hB"
+  ],
+  SI: [
+    "H",
+    "hB"
+  ],
+  SR: [
+    "H",
+    "hB"
+  ],
+  ST: [
+    "H",
+    "hB"
+  ],
+  TG: [
+    "H",
+    "hB"
+  ],
+  TR: [
+    "H",
+    "hB"
+  ],
+  WF: [
+    "H",
+    "hB"
+  ],
+  YT: [
+    "H",
+    "hB"
+  ],
+  BD: [
+    "h",
+    "hB",
+    "H"
+  ],
+  PK: [
+    "h",
+    "hB",
+    "H"
+  ],
+  AZ: [
+    "H",
+    "hB",
+    "h"
+  ],
+  BA: [
+    "H",
+    "hB",
+    "h"
+  ],
+  BG: [
+    "H",
+    "hB",
+    "h"
+  ],
+  CH: [
+    "H",
+    "hB",
+    "h"
+  ],
+  GE: [
+    "H",
+    "hB",
+    "h"
+  ],
+  LI: [
+    "H",
+    "hB",
+    "h"
+  ],
+  ME: [
+    "H",
+    "hB",
+    "h"
+  ],
+  RS: [
+    "H",
+    "hB",
+    "h"
+  ],
+  UA: [
+    "H",
+    "hB",
+    "h"
+  ],
+  UZ: [
+    "H",
+    "hB",
+    "h"
+  ],
+  XK: [
+    "H",
+    "hB",
+    "h"
+  ],
+  AG: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  AU: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BB: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BS: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  CA: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  DM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  "en-001": [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  FJ: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  FM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GD: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GU: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GY: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  JM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  KI: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  KN: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  KY: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  LC: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  LR: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  MH: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  MP: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  MW: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  NZ: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SB: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SG: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SL: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SS: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SZ: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  TC: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  TT: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  UM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  US: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  VC: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  VG: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  VI: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  ZM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BO: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  EC: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  ES: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  GQ: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  PE: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  AE: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  "ar-001": [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  BH: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  DZ: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  EG: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  EH: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  HK: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  IQ: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  JO: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  KW: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  LB: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  LY: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  MO: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  MR: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  OM: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  PH: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  PS: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  QA: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  SA: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  SD: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  SY: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  TN: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  YE: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  AF: [
+    "H",
+    "hb",
+    "hB",
+    "h"
+  ],
+  LA: [
+    "H",
+    "hb",
+    "hB",
+    "h"
+  ],
+  CN: [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  LV: [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  TL: [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  "zu-ZA": [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  CD: [
+    "hB",
+    "H"
+  ],
+  IR: [
+    "hB",
+    "H"
+  ],
+  "hi-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  "kn-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  "ml-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  "te-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  KH: [
+    "hB",
+    "h",
+    "H",
+    "hb"
+  ],
+  "ta-IN": [
+    "hB",
+    "h",
+    "hb",
+    "H"
+  ],
+  BN: [
+    "hb",
+    "hB",
+    "h",
+    "H"
+  ],
+  MY: [
+    "hb",
+    "hB",
+    "h",
+    "H"
+  ],
+  ET: [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  "gu-IN": [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  "mr-IN": [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  "pa-IN": [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  TW: [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  KE: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ],
+  MM: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ],
+  TZ: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ],
+  UG: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ]
+};
+function B0(t, e) {
+  for (var n = "", i = 0; i < t.length; i++) {
+    var l = t.charAt(i);
+    if (l === "j") {
+      for (var s = 0; i + 1 < t.length && t.charAt(i + 1) === l; )
+        s++, i++;
+      var o = 1 + (s & 1), r = s < 2 ? 1 : 3 + (s >> 1), a = "a", u = T0(e);
+      for ((u == "H" || u == "k") && (r = 0); r-- > 0; )
+        n += a;
+      for (; o-- > 0; )
+        n = u + n;
+    } else
+      l === "J" ? n += "H" : n += l;
+  }
+  return n;
+}
+function T0(t) {
+  var e = t.hourCycle;
+  if (e === void 0 && // @ts-ignore hourCycle(s) is not identified yet
+  t.hourCycles && // @ts-ignore
+  t.hourCycles.length && (e = t.hourCycles[0]), e)
+    switch (e) {
+      case "h24":
+        return "k";
+      case "h23":
+        return "H";
+      case "h12":
+        return "h";
+      case "h11":
+        return "K";
+      default:
+        throw new Error("Invalid hourCycle");
+    }
+  var n = t.language, i;
+  n !== "root" && (i = t.maximize().region);
+  var l = $n[i || ""] || $n[n || ""] || $n["".concat(n, "-001")] || $n["001"];
+  return l[0];
+}
+var bl, H0 = new RegExp("^".concat(la.source, "*")), P0 = new RegExp("".concat(la.source, "*$"));
+function F(t, e) {
+  return { start: t, end: e };
+}
+var N0 = !!String.prototype.startsWith, L0 = !!String.fromCodePoint, I0 = !!Object.fromEntries, M0 = !!String.prototype.codePointAt, O0 = !!String.prototype.trimStart, D0 = !!String.prototype.trimEnd, R0 = !!Number.isSafeInteger, U0 = R0 ? Number.isSafeInteger : function(t) {
+  return typeof t == "number" && isFinite(t) && Math.floor(t) === t && Math.abs(t) <= 9007199254740991;
+}, Wl = !0;
+try {
+  var F0 = ua("([^\\p{White_Space}\\p{Pattern_Syntax}]*)", "yu");
+  Wl = ((bl = F0.exec("a")) === null || bl === void 0 ? void 0 : bl[0]) === "a";
+} catch {
+  Wl = !1;
+}
+var So = N0 ? (
+  // Native
+  function(e, n, i) {
+    return e.startsWith(n, i);
+  }
+) : (
+  // For IE11
+  function(e, n, i) {
+    return e.slice(i, i + n.length) === n;
+  }
+), Zl = L0 ? String.fromCodePoint : (
+  // IE11
+  function() {
+    for (var e = [], n = 0; n < arguments.length; n++)
+      e[n] = arguments[n];
+    for (var i = "", l = e.length, s = 0, o; l > s; ) {
+      if (o = e[s++], o > 1114111)
+        throw RangeError(o + " is not a valid code point");
+      i += o < 65536 ? String.fromCharCode(o) : String.fromCharCode(((o -= 65536) >> 10) + 55296, o % 1024 + 56320);
+    }
+    return i;
+  }
+), Co = (
+  // native
+  I0 ? Object.fromEntries : (
+    // Ponyfill
+    function(e) {
+      for (var n = {}, i = 0, l = e; i < l.length; i++) {
+        var s = l[i], o = s[0], r = s[1];
+        n[o] = r;
+      }
+      return n;
+    }
+  )
+), aa = M0 ? (
+  // Native
+  function(e, n) {
+    return e.codePointAt(n);
+  }
+) : (
+  // IE 11
+  function(e, n) {
+    var i = e.length;
+    if (!(n < 0 || n >= i)) {
+      var l = e.charCodeAt(n), s;
+      return l < 55296 || l > 56319 || n + 1 === i || (s = e.charCodeAt(n + 1)) < 56320 || s > 57343 ? l : (l - 55296 << 10) + (s - 56320) + 65536;
+    }
+  }
+), q0 = O0 ? (
+  // Native
+  function(e) {
+    return e.trimStart();
+  }
+) : (
+  // Ponyfill
+  function(e) {
+    return e.replace(H0, "");
+  }
+), z0 = D0 ? (
+  // Native
+  function(e) {
+    return e.trimEnd();
+  }
+) : (
+  // Ponyfill
+  function(e) {
+    return e.replace(P0, "");
+  }
+);
+function ua(t, e) {
+  return new RegExp(t, e);
+}
+var Yl;
+if (Wl) {
+  var Ao = ua("([^\\p{White_Space}\\p{Pattern_Syntax}]*)", "yu");
+  Yl = function(e, n) {
+    var i;
+    Ao.lastIndex = n;
+    var l = Ao.exec(e);
+    return (i = l[1]) !== null && i !== void 0 ? i : "";
+  };
+} else
+  Yl = function(e, n) {
+    for (var i = []; ; ) {
+      var l = aa(e, n);
+      if (l === void 0 || fa(l) || V0(l))
+        break;
+      i.push(l), n += l >= 65536 ? 2 : 1;
+    }
+    return Zl.apply(void 0, i);
+  };
+var j0 = (
+  /** @class */
+  function() {
+    function t(e, n) {
+      n === void 0 && (n = {}), this.message = e, this.position = { offset: 0, line: 1, column: 1 }, this.ignoreTag = !!n.ignoreTag, this.locale = n.locale, this.requiresOtherClause = !!n.requiresOtherClause, this.shouldParseSkeletons = !!n.shouldParseSkeletons;
+    }
+    return t.prototype.parse = function() {
+      if (this.offset() !== 0)
+        throw Error("parser can only be used once");
+      return this.parseMessage(0, "", !1);
+    }, t.prototype.parseMessage = function(e, n, i) {
+      for (var l = []; !this.isEOF(); ) {
+        var s = this.char();
+        if (s === 123) {
+          var o = this.parseArgument(e, i);
+          if (o.err)
+            return o;
+          l.push(o.val);
+        } else {
+          if (s === 125 && e > 0)
+            break;
+          if (s === 35 && (n === "plural" || n === "selectordinal")) {
+            var r = this.clonePosition();
+            this.bump(), l.push({
+              type: ee.pound,
+              location: F(r, this.clonePosition())
+            });
+          } else if (s === 60 && !this.ignoreTag && this.peek() === 47) {
+            if (i)
+              break;
+            return this.error(U.UNMATCHED_CLOSING_TAG, F(this.clonePosition(), this.clonePosition()));
+          } else if (s === 60 && !this.ignoreTag && Jl(this.peek() || 0)) {
+            var o = this.parseTag(e, n);
+            if (o.err)
+              return o;
+            l.push(o.val);
+          } else {
+            var o = this.parseLiteral(e, n);
+            if (o.err)
+              return o;
+            l.push(o.val);
+          }
+        }
+      }
+      return { val: l, err: null };
+    }, t.prototype.parseTag = function(e, n) {
+      var i = this.clonePosition();
+      this.bump();
+      var l = this.parseTagName();
+      if (this.bumpSpace(), this.bumpIf("/>"))
+        return {
+          val: {
+            type: ee.literal,
+            value: "<".concat(l, "/>"),
+            location: F(i, this.clonePosition())
+          },
+          err: null
+        };
+      if (this.bumpIf(">")) {
+        var s = this.parseMessage(e + 1, n, !0);
+        if (s.err)
+          return s;
+        var o = s.val, r = this.clonePosition();
+        if (this.bumpIf("</")) {
+          if (this.isEOF() || !Jl(this.char()))
+            return this.error(U.INVALID_TAG, F(r, this.clonePosition()));
+          var a = this.clonePosition(), u = this.parseTagName();
+          return l !== u ? this.error(U.UNMATCHED_CLOSING_TAG, F(a, this.clonePosition())) : (this.bumpSpace(), this.bumpIf(">") ? {
+            val: {
+              type: ee.tag,
+              value: l,
+              children: o,
+              location: F(i, this.clonePosition())
+            },
+            err: null
+          } : this.error(U.INVALID_TAG, F(r, this.clonePosition())));
+        } else
+          return this.error(U.UNCLOSED_TAG, F(i, this.clonePosition()));
+      } else
+        return this.error(U.INVALID_TAG, F(i, this.clonePosition()));
+    }, t.prototype.parseTagName = function() {
+      var e = this.offset();
+      for (this.bump(); !this.isEOF() && x0(this.char()); )
+        this.bump();
+      return this.message.slice(e, this.offset());
+    }, t.prototype.parseLiteral = function(e, n) {
+      for (var i = this.clonePosition(), l = ""; ; ) {
+        var s = this.tryParseQuote(n);
+        if (s) {
+          l += s;
+          continue;
+        }
+        var o = this.tryParseUnquoted(e, n);
+        if (o) {
+          l += o;
+          continue;
+        }
+        var r = this.tryParseLeftAngleBracket();
+        if (r) {
+          l += r;
+          continue;
+        }
+        break;
+      }
+      var a = F(i, this.clonePosition());
+      return {
+        val: { type: ee.literal, value: l, location: a },
+        err: null
+      };
+    }, t.prototype.tryParseLeftAngleBracket = function() {
+      return !this.isEOF() && this.char() === 60 && (this.ignoreTag || // If at the opening tag or closing tag position, bail.
+      !G0(this.peek() || 0)) ? (this.bump(), "<") : null;
+    }, t.prototype.tryParseQuote = function(e) {
+      if (this.isEOF() || this.char() !== 39)
+        return null;
+      switch (this.peek()) {
+        case 39:
+          return this.bump(), this.bump(), "'";
+        case 123:
+        case 60:
+        case 62:
+        case 125:
+          break;
+        case 35:
+          if (e === "plural" || e === "selectordinal")
+            break;
+          return null;
+        default:
+          return null;
+      }
+      this.bump();
+      var n = [this.char()];
+      for (this.bump(); !this.isEOF(); ) {
+        var i = this.char();
+        if (i === 39)
+          if (this.peek() === 39)
+            n.push(39), this.bump();
+          else {
+            this.bump();
+            break;
+          }
+        else
+          n.push(i);
+        this.bump();
+      }
+      return Zl.apply(void 0, n);
+    }, t.prototype.tryParseUnquoted = function(e, n) {
+      if (this.isEOF())
+        return null;
+      var i = this.char();
+      return i === 60 || i === 123 || i === 35 && (n === "plural" || n === "selectordinal") || i === 125 && e > 0 ? null : (this.bump(), Zl(i));
+    }, t.prototype.parseArgument = function(e, n) {
+      var i = this.clonePosition();
+      if (this.bump(), this.bumpSpace(), this.isEOF())
+        return this.error(U.EXPECT_ARGUMENT_CLOSING_BRACE, F(i, this.clonePosition()));
+      if (this.char() === 125)
+        return this.bump(), this.error(U.EMPTY_ARGUMENT, F(i, this.clonePosition()));
+      var l = this.parseIdentifierIfPossible().value;
+      if (!l)
+        return this.error(U.MALFORMED_ARGUMENT, F(i, this.clonePosition()));
+      if (this.bumpSpace(), this.isEOF())
+        return this.error(U.EXPECT_ARGUMENT_CLOSING_BRACE, F(i, this.clonePosition()));
+      switch (this.char()) {
+        case 125:
+          return this.bump(), {
+            val: {
+              type: ee.argument,
+              // value does not include the opening and closing braces.
+              value: l,
+              location: F(i, this.clonePosition())
+            },
+            err: null
+          };
+        case 44:
+          return this.bump(), this.bumpSpace(), this.isEOF() ? this.error(U.EXPECT_ARGUMENT_CLOSING_BRACE, F(i, this.clonePosition())) : this.parseArgumentOptions(e, n, l, i);
+        default:
+          return this.error(U.MALFORMED_ARGUMENT, F(i, this.clonePosition()));
+      }
+    }, t.prototype.parseIdentifierIfPossible = function() {
+      var e = this.clonePosition(), n = this.offset(), i = Yl(this.message, n), l = n + i.length;
+      this.bumpTo(l);
+      var s = this.clonePosition(), o = F(e, s);
+      return { value: i, location: o };
+    }, t.prototype.parseArgumentOptions = function(e, n, i, l) {
+      var s, o = this.clonePosition(), r = this.parseIdentifierIfPossible().value, a = this.clonePosition();
+      switch (r) {
+        case "":
+          return this.error(U.EXPECT_ARGUMENT_TYPE, F(o, a));
+        case "number":
+        case "date":
+        case "time": {
+          this.bumpSpace();
+          var u = null;
+          if (this.bumpIf(",")) {
+            this.bumpSpace();
+            var f = this.clonePosition(), _ = this.parseSimpleArgStyleIfPossible();
+            if (_.err)
+              return _;
+            var h = z0(_.val);
+            if (h.length === 0)
+              return this.error(U.EXPECT_ARGUMENT_STYLE, F(this.clonePosition(), this.clonePosition()));
+            var c = F(f, this.clonePosition());
+            u = { style: h, styleLocation: c };
+          }
+          var d = this.tryParseArgumentClose(l);
+          if (d.err)
+            return d;
+          var m = F(l, this.clonePosition());
+          if (u && So(u == null ? void 0 : u.style, "::", 0)) {
+            var b = q0(u.style.slice(2));
+            if (r === "number") {
+              var _ = this.parseNumberSkeletonFromString(b, u.styleLocation);
+              return _.err ? _ : {
+                val: { type: ee.number, value: i, location: m, style: _.val },
+                err: null
+              };
+            } else {
+              if (b.length === 0)
+                return this.error(U.EXPECT_DATE_TIME_SKELETON, m);
+              var p = b;
+              this.locale && (p = B0(b, this.locale));
+              var h = {
+                type: rn.dateTime,
+                pattern: p,
+                location: u.styleLocation,
+                parsedOptions: this.shouldParseSkeletons ? v0(p) : {}
+              }, y = r === "date" ? ee.date : ee.time;
+              return {
+                val: { type: y, value: i, location: m, style: h },
+                err: null
+              };
+            }
+          }
+          return {
+            val: {
+              type: r === "number" ? ee.number : r === "date" ? ee.date : ee.time,
+              value: i,
+              location: m,
+              style: (s = u == null ? void 0 : u.style) !== null && s !== void 0 ? s : null
+            },
+            err: null
+          };
+        }
+        case "plural":
+        case "selectordinal":
+        case "select": {
+          var w = this.clonePosition();
+          if (this.bumpSpace(), !this.bumpIf(","))
+            return this.error(U.EXPECT_SELECT_ARGUMENT_OPTIONS, F(w, G({}, w)));
+          this.bumpSpace();
+          var C = this.parseIdentifierIfPossible(), P = 0;
+          if (r !== "select" && C.value === "offset") {
+            if (!this.bumpIf(":"))
+              return this.error(U.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, F(this.clonePosition(), this.clonePosition()));
+            this.bumpSpace();
+            var _ = this.tryParseDecimalInteger(U.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, U.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);
+            if (_.err)
+              return _;
+            this.bumpSpace(), C = this.parseIdentifierIfPossible(), P = _.val;
+          }
+          var E = this.tryParsePluralOrSelectOptions(e, r, n, C);
+          if (E.err)
+            return E;
+          var d = this.tryParseArgumentClose(l);
+          if (d.err)
+            return d;
+          var N = F(l, this.clonePosition());
+          return r === "select" ? {
+            val: {
+              type: ee.select,
+              value: i,
+              options: Co(E.val),
+              location: N
+            },
+            err: null
+          } : {
+            val: {
+              type: ee.plural,
+              value: i,
+              options: Co(E.val),
+              offset: P,
+              pluralType: r === "plural" ? "cardinal" : "ordinal",
+              location: N
+            },
+            err: null
+          };
+        }
+        default:
+          return this.error(U.INVALID_ARGUMENT_TYPE, F(o, a));
+      }
+    }, t.prototype.tryParseArgumentClose = function(e) {
+      return this.isEOF() || this.char() !== 125 ? this.error(U.EXPECT_ARGUMENT_CLOSING_BRACE, F(e, this.clonePosition())) : (this.bump(), { val: !0, err: null });
+    }, t.prototype.parseSimpleArgStyleIfPossible = function() {
+      for (var e = 0, n = this.clonePosition(); !this.isEOF(); ) {
+        var i = this.char();
+        switch (i) {
+          case 39: {
+            this.bump();
+            var l = this.clonePosition();
+            if (!this.bumpUntil("'"))
+              return this.error(U.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE, F(l, this.clonePosition()));
+            this.bump();
+            break;
+          }
+          case 123: {
+            e += 1, this.bump();
+            break;
+          }
+          case 125: {
+            if (e > 0)
+              e -= 1;
+            else
+              return {
+                val: this.message.slice(n.offset, this.offset()),
+                err: null
+              };
+            break;
+          }
+          default:
+            this.bump();
+            break;
+        }
+      }
+      return {
+        val: this.message.slice(n.offset, this.offset()),
+        err: null
+      };
+    }, t.prototype.parseNumberSkeletonFromString = function(e, n) {
+      var i = [];
+      try {
+        i = E0(e);
+      } catch {
+        return this.error(U.INVALID_NUMBER_SKELETON, n);
+      }
+      return {
+        val: {
+          type: rn.number,
+          tokens: i,
+          location: n,
+          parsedOptions: this.shouldParseSkeletons ? A0(i) : {}
+        },
+        err: null
+      };
+    }, t.prototype.tryParsePluralOrSelectOptions = function(e, n, i, l) {
+      for (var s, o = !1, r = [], a = /* @__PURE__ */ new Set(), u = l.value, f = l.location; ; ) {
+        if (u.length === 0) {
+          var _ = this.clonePosition();
+          if (n !== "select" && this.bumpIf("=")) {
+            var h = this.tryParseDecimalInteger(U.EXPECT_PLURAL_ARGUMENT_SELECTOR, U.INVALID_PLURAL_ARGUMENT_SELECTOR);
+            if (h.err)
+              return h;
+            f = F(_, this.clonePosition()), u = this.message.slice(_.offset, this.offset());
+          } else
+            break;
+        }
+        if (a.has(u))
+          return this.error(n === "select" ? U.DUPLICATE_SELECT_ARGUMENT_SELECTOR : U.DUPLICATE_PLURAL_ARGUMENT_SELECTOR, f);
+        u === "other" && (o = !0), this.bumpSpace();
+        var c = this.clonePosition();
+        if (!this.bumpIf("{"))
+          return this.error(n === "select" ? U.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT : U.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT, F(this.clonePosition(), this.clonePosition()));
+        var d = this.parseMessage(e + 1, n, i);
+        if (d.err)
+          return d;
+        var m = this.tryParseArgumentClose(c);
+        if (m.err)
+          return m;
+        r.push([
+          u,
+          {
+            value: d.val,
+            location: F(c, this.clonePosition())
+          }
+        ]), a.add(u), this.bumpSpace(), s = this.parseIdentifierIfPossible(), u = s.value, f = s.location;
+      }
+      return r.length === 0 ? this.error(n === "select" ? U.EXPECT_SELECT_ARGUMENT_SELECTOR : U.EXPECT_PLURAL_ARGUMENT_SELECTOR, F(this.clonePosition(), this.clonePosition())) : this.requiresOtherClause && !o ? this.error(U.MISSING_OTHER_CLAUSE, F(this.clonePosition(), this.clonePosition())) : { val: r, err: null };
+    }, t.prototype.tryParseDecimalInteger = function(e, n) {
+      var i = 1, l = this.clonePosition();
+      this.bumpIf("+") || this.bumpIf("-") && (i = -1);
+      for (var s = !1, o = 0; !this.isEOF(); ) {
+        var r = this.char();
+        if (r >= 48 && r <= 57)
+          s = !0, o = o * 10 + (r - 48), this.bump();
+        else
+          break;
+      }
+      var a = F(l, this.clonePosition());
+      return s ? (o *= i, U0(o) ? { val: o, err: null } : this.error(n, a)) : this.error(e, a);
+    }, t.prototype.offset = function() {
+      return this.position.offset;
+    }, t.prototype.isEOF = function() {
+      return this.offset() === this.message.length;
+    }, t.prototype.clonePosition = function() {
+      return {
+        offset: this.position.offset,
+        line: this.position.line,
+        column: this.position.column
+      };
+    }, t.prototype.char = function() {
+      var e = this.position.offset;
+      if (e >= this.message.length)
+        throw Error("out of bound");
+      var n = aa(this.message, e);
+      if (n === void 0)
+        throw Error("Offset ".concat(e, " is at invalid UTF-16 code unit boundary"));
+      return n;
+    }, t.prototype.error = function(e, n) {
+      return {
+        val: null,
+        err: {
+          kind: e,
+          message: this.message,
+          location: n
+        }
+      };
+    }, t.prototype.bump = function() {
+      if (!this.isEOF()) {
+        var e = this.char();
+        e === 10 ? (this.position.line += 1, this.position.column = 1, this.position.offset += 1) : (this.position.column += 1, this.position.offset += e < 65536 ? 1 : 2);
+      }
+    }, t.prototype.bumpIf = function(e) {
+      if (So(this.message, e, this.offset())) {
+        for (var n = 0; n < e.length; n++)
+          this.bump();
+        return !0;
+      }
+      return !1;
+    }, t.prototype.bumpUntil = function(e) {
+      var n = this.offset(), i = this.message.indexOf(e, n);
+      return i >= 0 ? (this.bumpTo(i), !0) : (this.bumpTo(this.message.length), !1);
+    }, t.prototype.bumpTo = function(e) {
+      if (this.offset() > e)
+        throw Error("targetOffset ".concat(e, " must be greater than or equal to the current offset ").concat(this.offset()));
+      for (e = Math.min(e, this.message.length); ; ) {
+        var n = this.offset();
+        if (n === e)
+          break;
+        if (n > e)
+          throw Error("targetOffset ".concat(e, " is at invalid UTF-16 code unit boundary"));
+        if (this.bump(), this.isEOF())
+          break;
+      }
+    }, t.prototype.bumpSpace = function() {
+      for (; !this.isEOF() && fa(this.char()); )
+        this.bump();
+    }, t.prototype.peek = function() {
+      if (this.isEOF())
+        return null;
+      var e = this.char(), n = this.offset(), i = this.message.charCodeAt(n + (e >= 65536 ? 2 : 1));
+      return i ?? null;
+    }, t;
+  }()
+);
+function Jl(t) {
+  return t >= 97 && t <= 122 || t >= 65 && t <= 90;
+}
+function G0(t) {
+  return Jl(t) || t === 47;
+}
+function x0(t) {
+  return t === 45 || t === 46 || t >= 48 && t <= 57 || t === 95 || t >= 97 && t <= 122 || t >= 65 && t <= 90 || t == 183 || t >= 192 && t <= 214 || t >= 216 && t <= 246 || t >= 248 && t <= 893 || t >= 895 && t <= 8191 || t >= 8204 && t <= 8205 || t >= 8255 && t <= 8256 || t >= 8304 && t <= 8591 || t >= 11264 && t <= 12271 || t >= 12289 && t <= 55295 || t >= 63744 && t <= 64975 || t >= 65008 && t <= 65533 || t >= 65536 && t <= 983039;
+}
+function fa(t) {
+  return t >= 9 && t <= 13 || t === 32 || t === 133 || t >= 8206 && t <= 8207 || t === 8232 || t === 8233;
+}
+function V0(t) {
+  return t >= 33 && t <= 35 || t === 36 || t >= 37 && t <= 39 || t === 40 || t === 41 || t === 42 || t === 43 || t === 44 || t === 45 || t >= 46 && t <= 47 || t >= 58 && t <= 59 || t >= 60 && t <= 62 || t >= 63 && t <= 64 || t === 91 || t === 92 || t === 93 || t === 94 || t === 96 || t === 123 || t === 124 || t === 125 || t === 126 || t === 161 || t >= 162 && t <= 165 || t === 166 || t === 167 || t === 169 || t === 171 || t === 172 || t === 174 || t === 176 || t === 177 || t === 182 || t === 187 || t === 191 || t === 215 || t === 247 || t >= 8208 && t <= 8213 || t >= 8214 && t <= 8215 || t === 8216 || t === 8217 || t === 8218 || t >= 8219 && t <= 8220 || t === 8221 || t === 8222 || t === 8223 || t >= 8224 && t <= 8231 || t >= 8240 && t <= 8248 || t === 8249 || t === 8250 || t >= 8251 && t <= 8254 || t >= 8257 && t <= 8259 || t === 8260 || t === 8261 || t === 8262 || t >= 8263 && t <= 8273 || t === 8274 || t === 8275 || t >= 8277 && t <= 8286 || t >= 8592 && t <= 8596 || t >= 8597 && t <= 8601 || t >= 8602 && t <= 8603 || t >= 8604 && t <= 8607 || t === 8608 || t >= 8609 && t <= 8610 || t === 8611 || t >= 8612 && t <= 8613 || t === 8614 || t >= 8615 && t <= 8621 || t === 8622 || t >= 8623 && t <= 8653 || t >= 8654 && t <= 8655 || t >= 8656 && t <= 8657 || t === 8658 || t === 8659 || t === 8660 || t >= 8661 && t <= 8691 || t >= 8692 && t <= 8959 || t >= 8960 && t <= 8967 || t === 8968 || t === 8969 || t === 8970 || t === 8971 || t >= 8972 && t <= 8991 || t >= 8992 && t <= 8993 || t >= 8994 && t <= 9e3 || t === 9001 || t === 9002 || t >= 9003 && t <= 9083 || t === 9084 || t >= 9085 && t <= 9114 || t >= 9115 && t <= 9139 || t >= 9140 && t <= 9179 || t >= 9180 && t <= 9185 || t >= 9186 && t <= 9254 || t >= 9255 && t <= 9279 || t >= 9280 && t <= 9290 || t >= 9291 && t <= 9311 || t >= 9472 && t <= 9654 || t === 9655 || t >= 9656 && t <= 9664 || t === 9665 || t >= 9666 && t <= 9719 || t >= 9720 && t <= 9727 || t >= 9728 && t <= 9838 || t === 9839 || t >= 9840 && t <= 10087 || t === 10088 || t === 10089 || t === 10090 || t === 10091 || t === 10092 || t === 10093 || t === 10094 || t === 10095 || t === 10096 || t === 10097 || t === 10098 || t === 10099 || t === 10100 || t === 10101 || t >= 10132 && t <= 10175 || t >= 10176 && t <= 10180 || t === 10181 || t === 10182 || t >= 10183 && t <= 10213 || t === 10214 || t === 10215 || t === 10216 || t === 10217 || t === 10218 || t === 10219 || t === 10220 || t === 10221 || t === 10222 || t === 10223 || t >= 10224 && t <= 10239 || t >= 10240 && t <= 10495 || t >= 10496 && t <= 10626 || t === 10627 || t === 10628 || t === 10629 || t === 10630 || t === 10631 || t === 10632 || t === 10633 || t === 10634 || t === 10635 || t === 10636 || t === 10637 || t === 10638 || t === 10639 || t === 10640 || t === 10641 || t === 10642 || t === 10643 || t === 10644 || t === 10645 || t === 10646 || t === 10647 || t === 10648 || t >= 10649 && t <= 10711 || t === 10712 || t === 10713 || t === 10714 || t === 10715 || t >= 10716 && t <= 10747 || t === 10748 || t === 10749 || t >= 10750 && t <= 11007 || t >= 11008 && t <= 11055 || t >= 11056 && t <= 11076 || t >= 11077 && t <= 11078 || t >= 11079 && t <= 11084 || t >= 11085 && t <= 11123 || t >= 11124 && t <= 11125 || t >= 11126 && t <= 11157 || t === 11158 || t >= 11159 && t <= 11263 || t >= 11776 && t <= 11777 || t === 11778 || t === 11779 || t === 11780 || t === 11781 || t >= 11782 && t <= 11784 || t === 11785 || t === 11786 || t === 11787 || t === 11788 || t === 11789 || t >= 11790 && t <= 11798 || t === 11799 || t >= 11800 && t <= 11801 || t === 11802 || t === 11803 || t === 11804 || t === 11805 || t >= 11806 && t <= 11807 || t === 11808 || t === 11809 || t === 11810 || t === 11811 || t === 11812 || t === 11813 || t === 11814 || t === 11815 || t === 11816 || t === 11817 || t >= 11818 && t <= 11822 || t === 11823 || t >= 11824 && t <= 11833 || t >= 11834 && t <= 11835 || t >= 11836 && t <= 11839 || t === 11840 || t === 11841 || t === 11842 || t >= 11843 && t <= 11855 || t >= 11856 && t <= 11857 || t === 11858 || t >= 11859 && t <= 11903 || t >= 12289 && t <= 12291 || t === 12296 || t === 12297 || t === 12298 || t === 12299 || t === 12300 || t === 12301 || t === 12302 || t === 12303 || t === 12304 || t === 12305 || t >= 12306 && t <= 12307 || t === 12308 || t === 12309 || t === 12310 || t === 12311 || t === 12312 || t === 12313 || t === 12314 || t === 12315 || t === 12316 || t === 12317 || t >= 12318 && t <= 12319 || t === 12320 || t === 12336 || t === 64830 || t === 64831 || t >= 65093 && t <= 65094;
+}
+function Ql(t) {
+  t.forEach(function(e) {
+    if (delete e.location, ea(e) || ta(e))
+      for (var n in e.options)
+        delete e.options[n].location, Ql(e.options[n].value);
+    else
+      Qr(e) && ia(e.style) || (Kr(e) || $r(e)) && Xl(e.style) ? delete e.style.location : na(e) && Ql(e.children);
+  });
+}
+function X0(t, e) {
+  e === void 0 && (e = {}), e = G({ shouldParseSkeletons: !0, requiresOtherClause: !0 }, e);
+  var n = new j0(t, e).parse();
+  if (n.err) {
+    var i = SyntaxError(U[n.err.kind]);
+    throw i.location = n.err.location, i.originalMessage = n.err.message, i;
+  }
+  return e != null && e.captureLocation || Ql(n.val), n.val;
+}
+function pl(t, e) {
+  var n = e && e.cache ? e.cache : K0, i = e && e.serializer ? e.serializer : Q0, l = e && e.strategy ? e.strategy : Z0;
+  return l(t, {
+    cache: n,
+    serializer: i
+  });
+}
+function W0(t) {
+  return t == null || typeof t == "number" || typeof t == "boolean";
+}
+function ca(t, e, n, i) {
+  var l = W0(i) ? i : n(i), s = e.get(l);
+  return typeof s > "u" && (s = t.call(this, i), e.set(l, s)), s;
+}
+function _a(t, e, n) {
+  var i = Array.prototype.slice.call(arguments, 3), l = n(i), s = e.get(l);
+  return typeof s > "u" && (s = t.apply(this, i), e.set(l, s)), s;
+}
+function ds(t, e, n, i, l) {
+  return n.bind(e, t, i, l);
+}
+function Z0(t, e) {
+  var n = t.length === 1 ? ca : _a;
+  return ds(t, this, n, e.cache.create(), e.serializer);
+}
+function Y0(t, e) {
+  return ds(t, this, _a, e.cache.create(), e.serializer);
+}
+function J0(t, e) {
+  return ds(t, this, ca, e.cache.create(), e.serializer);
+}
+var Q0 = function() {
+  return JSON.stringify(arguments);
+};
+function ms() {
+  this.cache = /* @__PURE__ */ Object.create(null);
+}
+ms.prototype.get = function(t) {
+  return this.cache[t];
+};
+ms.prototype.set = function(t, e) {
+  this.cache[t] = e;
+};
+var K0 = {
+  create: function() {
+    return new ms();
+  }
+}, wl = {
+  variadic: Y0,
+  monadic: J0
+}, an;
+(function(t) {
+  t.MISSING_VALUE = "MISSING_VALUE", t.INVALID_VALUE = "INVALID_VALUE", t.MISSING_INTL_API = "MISSING_INTL_API";
+})(an || (an = {}));
+var Fi = (
+  /** @class */
+  function(t) {
+    Ui(e, t);
+    function e(n, i, l) {
+      var s = t.call(this, n) || this;
+      return s.code = i, s.originalMessage = l, s;
+    }
+    return e.prototype.toString = function() {
+      return "[formatjs Error: ".concat(this.code, "] ").concat(this.message);
+    }, e;
+  }(Error)
+), Bo = (
+  /** @class */
+  function(t) {
+    Ui(e, t);
+    function e(n, i, l, s) {
+      return t.call(this, 'Invalid values for "'.concat(n, '": "').concat(i, '". Options are "').concat(Object.keys(l).join('", "'), '"'), an.INVALID_VALUE, s) || this;
+    }
+    return e;
+  }(Fi)
+), $0 = (
+  /** @class */
+  function(t) {
+    Ui(e, t);
+    function e(n, i, l) {
+      return t.call(this, 'Value for "'.concat(n, '" must be of type ').concat(i), an.INVALID_VALUE, l) || this;
+    }
+    return e;
+  }(Fi)
+), ed = (
+  /** @class */
+  function(t) {
+    Ui(e, t);
+    function e(n, i) {
+      return t.call(this, 'The intl string context variable "'.concat(n, '" was not provided to the string "').concat(i, '"'), an.MISSING_VALUE, i) || this;
+    }
+    return e;
+  }(Fi)
+), Ee;
+(function(t) {
+  t[t.literal = 0] = "literal", t[t.object = 1] = "object";
+})(Ee || (Ee = {}));
+function td(t) {
+  return t.length < 2 ? t : t.reduce(function(e, n) {
+    var i = e[e.length - 1];
+    return !i || i.type !== Ee.literal || n.type !== Ee.literal ? e.push(n) : i.value += n.value, e;
+  }, []);
+}
+function nd(t) {
+  return typeof t == "function";
+}
+function mi(t, e, n, i, l, s, o) {
+  if (t.length === 1 && vo(t[0]))
+    return [
+      {
+        type: Ee.literal,
+        value: t[0].value
+      }
+    ];
+  for (var r = [], a = 0, u = t; a < u.length; a++) {
+    var f = u[a];
+    if (vo(f)) {
+      r.push({
+        type: Ee.literal,
+        value: f.value
+      });
+      continue;
+    }
+    if (p0(f)) {
+      typeof s == "number" && r.push({
+        type: Ee.literal,
+        value: n.getNumberFormat(e).format(s)
+      });
+      continue;
+    }
+    var _ = f.value;
+    if (!(l && _ in l))
+      throw new ed(_, o);
+    var h = l[_];
+    if (b0(f)) {
+      (!h || typeof h == "string" || typeof h == "number") && (h = typeof h == "string" || typeof h == "number" ? String(h) : ""), r.push({
+        type: typeof h == "string" ? Ee.literal : Ee.object,
+        value: h
+      });
+      continue;
+    }
+    if (Kr(f)) {
+      var c = typeof f.style == "string" ? i.date[f.style] : Xl(f.style) ? f.style.parsedOptions : void 0;
+      r.push({
+        type: Ee.literal,
+        value: n.getDateTimeFormat(e, c).format(h)
+      });
+      continue;
+    }
+    if ($r(f)) {
+      var c = typeof f.style == "string" ? i.time[f.style] : Xl(f.style) ? f.style.parsedOptions : i.time.medium;
+      r.push({
+        type: Ee.literal,
+        value: n.getDateTimeFormat(e, c).format(h)
+      });
+      continue;
+    }
+    if (Qr(f)) {
+      var c = typeof f.style == "string" ? i.number[f.style] : ia(f.style) ? f.style.parsedOptions : void 0;
+      c && c.scale && (h = h * (c.scale || 1)), r.push({
+        type: Ee.literal,
+        value: n.getNumberFormat(e, c).format(h)
+      });
+      continue;
+    }
+    if (na(f)) {
+      var d = f.children, m = f.value, b = l[m];
+      if (!nd(b))
+        throw new $0(m, "function", o);
+      var p = mi(d, e, n, i, l, s), y = b(p.map(function(P) {
+        return P.value;
+      }));
+      Array.isArray(y) || (y = [y]), r.push.apply(r, y.map(function(P) {
+        return {
+          type: typeof P == "string" ? Ee.literal : Ee.object,
+          value: P
+        };
+      }));
+    }
+    if (ea(f)) {
+      var w = f.options[h] || f.options.other;
+      if (!w)
+        throw new Bo(f.value, h, Object.keys(f.options), o);
+      r.push.apply(r, mi(w.value, e, n, i, l));
+      continue;
+    }
+    if (ta(f)) {
+      var w = f.options["=".concat(h)];
+      if (!w) {
+        if (!Intl.PluralRules)
+          throw new Fi(`Intl.PluralRules is not available in this environment.
+Try polyfilling it using "@formatjs/intl-pluralrules"
+`, an.MISSING_INTL_API, o);
+        var C = n.getPluralRules(e, { type: f.pluralType }).select(h - (f.offset || 0));
+        w = f.options[C] || f.options.other;
+      }
+      if (!w)
+        throw new Bo(f.value, h, Object.keys(f.options), o);
+      r.push.apply(r, mi(w.value, e, n, i, l, h - (f.offset || 0)));
+      continue;
+    }
+  }
+  return td(r);
+}
+function id(t, e) {
+  return e ? G(G(G({}, t || {}), e || {}), Object.keys(t).reduce(function(n, i) {
+    return n[i] = G(G({}, t[i]), e[i] || {}), n;
+  }, {})) : t;
+}
+function ld(t, e) {
+  return e ? Object.keys(t).reduce(function(n, i) {
+    return n[i] = id(t[i], e[i]), n;
+  }, G({}, t)) : t;
+}
+function vl(t) {
+  return {
+    create: function() {
+      return {
+        get: function(e) {
+          return t[e];
+        },
+        set: function(e, n) {
+          t[e] = n;
+        }
+      };
+    }
+  };
+}
+function sd(t) {
+  return t === void 0 && (t = {
+    number: {},
+    dateTime: {},
+    pluralRules: {}
+  }), {
+    getNumberFormat: pl(function() {
+      for (var e, n = [], i = 0; i < arguments.length; i++)
+        n[i] = arguments[i];
+      return new ((e = Intl.NumberFormat).bind.apply(e, gl([void 0], n, !1)))();
+    }, {
+      cache: vl(t.number),
+      strategy: wl.variadic
+    }),
+    getDateTimeFormat: pl(function() {
+      for (var e, n = [], i = 0; i < arguments.length; i++)
+        n[i] = arguments[i];
+      return new ((e = Intl.DateTimeFormat).bind.apply(e, gl([void 0], n, !1)))();
+    }, {
+      cache: vl(t.dateTime),
+      strategy: wl.variadic
+    }),
+    getPluralRules: pl(function() {
+      for (var e, n = [], i = 0; i < arguments.length; i++)
+        n[i] = arguments[i];
+      return new ((e = Intl.PluralRules).bind.apply(e, gl([void 0], n, !1)))();
+    }, {
+      cache: vl(t.pluralRules),
+      strategy: wl.variadic
+    })
+  };
+}
+var od = (
+  /** @class */
+  function() {
+    function t(e, n, i, l) {
+      var s = this;
+      if (n === void 0 && (n = t.defaultLocale), this.formatterCache = {
+        number: {},
+        dateTime: {},
+        pluralRules: {}
+      }, this.format = function(o) {
+        var r = s.formatToParts(o);
+        if (r.length === 1)
+          return r[0].value;
+        var a = r.reduce(function(u, f) {
+          return !u.length || f.type !== Ee.literal || typeof u[u.length - 1] != "string" ? u.push(f.value) : u[u.length - 1] += f.value, u;
+        }, []);
+        return a.length <= 1 ? a[0] || "" : a;
+      }, this.formatToParts = function(o) {
+        return mi(s.ast, s.locales, s.formatters, s.formats, o, void 0, s.message);
+      }, this.resolvedOptions = function() {
+        return {
+          locale: s.resolvedLocale.toString()
+        };
+      }, this.getAst = function() {
+        return s.ast;
+      }, this.locales = n, this.resolvedLocale = t.resolveLocale(n), typeof e == "string") {
+        if (this.message = e, !t.__parse)
+          throw new TypeError("IntlMessageFormat.__parse must be set to process `message` of type `string`");
+        this.ast = t.__parse(e, {
+          ignoreTag: l == null ? void 0 : l.ignoreTag,
+          locale: this.resolvedLocale
+        });
+      } else
+        this.ast = e;
+      if (!Array.isArray(this.ast))
+        throw new TypeError("A message must be provided as a String or AST.");
+      this.formats = ld(t.formats, i), this.formatters = l && l.formatters || sd(this.formatterCache);
+    }
+    return Object.defineProperty(t, "defaultLocale", {
+      get: function() {
+        return t.memoizedDefaultLocale || (t.memoizedDefaultLocale = new Intl.NumberFormat().resolvedOptions().locale), t.memoizedDefaultLocale;
+      },
+      enumerable: !1,
+      configurable: !0
+    }), t.memoizedDefaultLocale = null, t.resolveLocale = function(e) {
+      var n = Intl.NumberFormat.supportedLocalesOf(e);
+      return n.length > 0 ? new Intl.Locale(n[0]) : new Intl.Locale(typeof e == "string" ? e : e[0]);
+    }, t.__parse = X0, t.formats = {
+      number: {
+        integer: {
+          maximumFractionDigits: 0
+        },
+        currency: {
+          style: "currency"
+        },
+        percent: {
+          style: "percent"
+        }
+      },
+      date: {
+        short: {
+          month: "numeric",
+          day: "numeric",
+          year: "2-digit"
+        },
+        medium: {
+          month: "short",
+          day: "numeric",
+          year: "numeric"
+        },
+        long: {
+          month: "long",
+          day: "numeric",
+          year: "numeric"
+        },
+        full: {
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          year: "numeric"
+        }
+      },
+      time: {
+        short: {
+          hour: "numeric",
+          minute: "numeric"
+        },
+        medium: {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric"
+        },
+        long: {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+          timeZoneName: "short"
+        },
+        full: {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+          timeZoneName: "short"
+        }
+      }
+    }, t;
+  }()
+);
+function rd(t, e) {
+  if (e == null)
+    return;
+  if (e in t)
+    return t[e];
+  const n = e.split(".");
+  let i = t;
+  for (let l = 0; l < n.length; l++)
+    if (typeof i == "object") {
+      if (l > 0) {
+        const s = n.slice(l, n.length).join(".");
+        if (s in i) {
+          i = i[s];
+          break;
+        }
+      }
+      i = i[n[l]];
+    } else
+      i = void 0;
+  return i;
+}
+const ut = {}, ad = (t, e, n) => n && (e in ut || (ut[e] = {}), t in ut[e] || (ut[e][t] = n), n), ha = (t, e) => {
+  if (e == null)
+    return;
+  if (e in ut && t in ut[e])
+    return ut[e][t];
+  const n = qi(e);
+  for (let i = 0; i < n.length; i++) {
+    const l = n[i], s = fd(l, t);
+    if (s)
+      return ad(t, e, s);
+  }
+};
+let gs;
+const qn = Fn({});
+function ud(t) {
+  return gs[t] || null;
+}
+function da(t) {
+  return t in gs;
+}
+function fd(t, e) {
+  if (!da(t))
+    return null;
+  const n = ud(t);
+  return rd(n, e);
+}
+function cd(t) {
+  if (t == null)
+    return;
+  const e = qi(t);
+  for (let n = 0; n < e.length; n++) {
+    const i = e[n];
+    if (da(i))
+      return i;
+  }
+}
+function _d(t, ...e) {
+  delete ut[t], qn.update((n) => (n[t] = g0.all([n[t] || {}, ...e]), n));
+}
+_n(
+  [qn],
+  ([t]) => Object.keys(t)
+);
+qn.subscribe((t) => gs = t);
+const gi = {};
+function hd(t, e) {
+  gi[t].delete(e), gi[t].size === 0 && delete gi[t];
+}
+function ma(t) {
+  return gi[t];
+}
+function dd(t) {
+  return qi(t).map((e) => {
+    const n = ma(e);
+    return [e, n ? [...n] : []];
+  }).filter(([, e]) => e.length > 0);
+}
+function Kl(t) {
+  return t == null ? !1 : qi(t).some(
+    (e) => {
+      var n;
+      return (n = ma(e)) == null ? void 0 : n.size;
+    }
+  );
+}
+function md(t, e) {
+  return Promise.all(
+    e.map((i) => (hd(t, i), i().then((l) => l.default || l)))
+  ).then((i) => _d(t, ...i));
+}
+const bn = {};
+function ga(t) {
+  if (!Kl(t))
+    return t in bn ? bn[t] : Promise.resolve();
+  const e = dd(t);
+  return bn[t] = Promise.all(
+    e.map(
+      ([n, i]) => md(n, i)
+    )
+  ).then(() => {
+    if (Kl(t))
+      return ga(t);
+    delete bn[t];
+  }), bn[t];
+}
+const gd = {
+  number: {
+    scientific: { notation: "scientific" },
+    engineering: { notation: "engineering" },
+    compactLong: { notation: "compact", compactDisplay: "long" },
+    compactShort: { notation: "compact", compactDisplay: "short" }
+  },
+  date: {
+    short: { month: "numeric", day: "numeric", year: "2-digit" },
+    medium: { month: "short", day: "numeric", year: "numeric" },
+    long: { month: "long", day: "numeric", year: "numeric" },
+    full: { weekday: "long", month: "long", day: "numeric", year: "numeric" }
+  },
+  time: {
+    short: { hour: "numeric", minute: "numeric" },
+    medium: { hour: "numeric", minute: "numeric", second: "numeric" },
+    long: {
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short"
+    },
+    full: {
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short"
+    }
+  }
+}, bd = {
+  fallbackLocale: null,
+  loadingDelay: 200,
+  formats: gd,
+  warnOnMissingMessages: !0,
+  handleMissingMessage: void 0,
+  ignoreTag: !0
+}, pd = bd;
+function un() {
+  return pd;
+}
+const yl = Fn(!1);
+var wd = Object.defineProperty, vd = Object.defineProperties, yd = Object.getOwnPropertyDescriptors, To = Object.getOwnPropertySymbols, Ed = Object.prototype.hasOwnProperty, kd = Object.prototype.propertyIsEnumerable, Ho = (t, e, n) => e in t ? wd(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, Sd = (t, e) => {
+  for (var n in e || (e = {}))
+    Ed.call(e, n) && Ho(t, n, e[n]);
+  if (To)
+    for (var n of To(e))
+      kd.call(e, n) && Ho(t, n, e[n]);
+  return t;
+}, Cd = (t, e) => vd(t, yd(e));
+let $l;
+const ki = Fn(null);
+function Po(t) {
+  return t.split("-").map((e, n, i) => i.slice(0, n + 1).join("-")).reverse();
+}
+function qi(t, e = un().fallbackLocale) {
+  const n = Po(t);
+  return e ? [.../* @__PURE__ */ new Set([...n, ...Po(e)])] : n;
+}
+function Dt() {
+  return $l ?? void 0;
+}
+ki.subscribe((t) => {
+  $l = t ?? void 0, typeof window < "u" && t != null && document.documentElement.setAttribute("lang", t);
+});
+const Ad = (t) => {
+  if (t && cd(t) && Kl(t)) {
+    const { loadingDelay: e } = un();
+    let n;
+    return typeof window < "u" && Dt() != null && e ? n = window.setTimeout(
+      () => yl.set(!0),
+      e
+    ) : yl.set(!0), ga(t).then(() => {
+      ki.set(t);
+    }).finally(() => {
+      clearTimeout(n), yl.set(!1);
+    });
+  }
+  return ki.set(t);
+}, zn = Cd(Sd({}, ki), {
+  set: Ad
+}), zi = (t) => {
+  const e = /* @__PURE__ */ Object.create(null);
+  return (i) => {
+    const l = JSON.stringify(i);
+    return l in e ? e[l] : e[l] = t(i);
+  };
+};
+var Bd = Object.defineProperty, Si = Object.getOwnPropertySymbols, ba = Object.prototype.hasOwnProperty, pa = Object.prototype.propertyIsEnumerable, No = (t, e, n) => e in t ? Bd(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, bs = (t, e) => {
+  for (var n in e || (e = {}))
+    ba.call(e, n) && No(t, n, e[n]);
+  if (Si)
+    for (var n of Si(e))
+      pa.call(e, n) && No(t, n, e[n]);
+  return t;
+}, dn = (t, e) => {
+  var n = {};
+  for (var i in t)
+    ba.call(t, i) && e.indexOf(i) < 0 && (n[i] = t[i]);
+  if (t != null && Si)
+    for (var i of Si(t))
+      e.indexOf(i) < 0 && pa.call(t, i) && (n[i] = t[i]);
+  return n;
+};
+const On = (t, e) => {
+  const { formats: n } = un();
+  if (t in n && e in n[t])
+    return n[t][e];
+  throw new Error(`[svelte-i18n] Unknown "${e}" ${t} format.`);
+}, Td = zi(
+  (t) => {
+    var e = t, { locale: n, format: i } = e, l = dn(e, ["locale", "format"]);
+    if (n == null)
+      throw new Error('[svelte-i18n] A "locale" must be set to format numbers');
+    return i && (l = On("number", i)), new Intl.NumberFormat(n, l);
+  }
+), Hd = zi(
+  (t) => {
+    var e = t, { locale: n, format: i } = e, l = dn(e, ["locale", "format"]);
+    if (n == null)
+      throw new Error('[svelte-i18n] A "locale" must be set to format dates');
+    return i ? l = On("date", i) : Object.keys(l).length === 0 && (l = On("date", "short")), new Intl.DateTimeFormat(n, l);
+  }
+), Pd = zi(
+  (t) => {
+    var e = t, { locale: n, format: i } = e, l = dn(e, ["locale", "format"]);
+    if (n == null)
+      throw new Error(
+        '[svelte-i18n] A "locale" must be set to format time values'
+      );
+    return i ? l = On("time", i) : Object.keys(l).length === 0 && (l = On("time", "short")), new Intl.DateTimeFormat(n, l);
+  }
+), Nd = (t = {}) => {
+  var e = t, {
+    locale: n = Dt()
+  } = e, i = dn(e, [
+    "locale"
+  ]);
+  return Td(bs({ locale: n }, i));
+}, Ld = (t = {}) => {
+  var e = t, {
+    locale: n = Dt()
+  } = e, i = dn(e, [
+    "locale"
+  ]);
+  return Hd(bs({ locale: n }, i));
+}, Id = (t = {}) => {
+  var e = t, {
+    locale: n = Dt()
+  } = e, i = dn(e, [
+    "locale"
+  ]);
+  return Pd(bs({ locale: n }, i));
+}, Md = zi(
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  (t, e = Dt()) => new od(t, e, un().formats, {
+    ignoreTag: un().ignoreTag
+  })
+), Od = (t, e = {}) => {
+  var n, i, l, s;
+  let o = e;
+  typeof t == "object" && (o = t, t = o.id);
+  const {
+    values: r,
+    locale: a = Dt(),
+    default: u
+  } = o;
+  if (a == null)
+    throw new Error(
+      "[svelte-i18n] Cannot format a message without first setting the initial locale."
+    );
+  let f = ha(t, a);
+  if (!f)
+    f = (s = (l = (i = (n = un()).handleMissingMessage) == null ? void 0 : i.call(n, { locale: a, id: t, defaultValue: u })) != null ? l : u) != null ? s : t;
+  else if (typeof f != "string")
+    return console.warn(
+      `[svelte-i18n] Message with id "${t}" must be of type "string", found: "${typeof f}". Gettin its value through the "$format" method is deprecated; use the "json" method instead.`
+    ), f;
+  if (!r)
+    return f;
+  let _ = f;
+  try {
+    _ = Md(f, a).format(r);
+  } catch (h) {
+    h instanceof Error && console.warn(
+      `[svelte-i18n] Message "${t}" has syntax error:`,
+      h.message
+    );
+  }
+  return _;
+}, Dd = (t, e) => Id(e).format(t), Rd = (t, e) => Ld(e).format(t), Ud = (t, e) => Nd(e).format(t), Fd = (t, e = Dt()) => ha(t, e);
+_n([zn, qn], () => Od);
+_n([zn], () => Dd);
+_n([zn], () => Rd);
+_n([zn], () => Ud);
+_n([zn, qn], () => Fd);
+const {
+  SvelteComponent: qd,
+  append: Te,
+  attr: Et,
+  detach: wa,
+  element: kt,
+  init: zd,
+  insert: va,
+  noop: Lo,
+  safe_not_equal: jd,
+  set_data: Ci,
+  set_style: El,
+  space: es,
+  text: $t,
+  toggle_class: Io
+} = window.__gradio__svelte__internal, { onMount: Gd, createEventDispatcher: xd, getContext: Vd } = window.__gradio__svelte__internal;
+function Mo(t) {
+  let e, n, i, l, s = Sn(
+    /*file_to_display*/
+    t[2]
+  ) + "", o, r, a, u, f = (
+    /*file_to_display*/
+    t[2].orig_name + ""
+  ), _;
+  return {
+    c() {
+      e = kt("div"), n = kt("span"), i = kt("div"), l = kt("progress"), o = $t(s), a = es(), u = kt("span"), _ = $t(f), El(l, "visibility", "hidden"), El(l, "height", "0"), El(l, "width", "0"), l.value = r = Sn(
+        /*file_to_display*/
+        t[2]
+      ), Et(l, "max", "100"), Et(l, "class", "svelte-cr2edf"), Et(i, "class", "progress-bar svelte-cr2edf"), Et(u, "class", "file-name svelte-cr2edf"), Et(e, "class", "file svelte-cr2edf");
+    },
+    m(h, c) {
+      va(h, e, c), Te(e, n), Te(n, i), Te(i, l), Te(l, o), Te(e, a), Te(e, u), Te(u, _);
+    },
+    p(h, c) {
+      c & /*file_to_display*/
+      4 && s !== (s = Sn(
+        /*file_to_display*/
+        h[2]
+      ) + "") && Ci(o, s), c & /*file_to_display*/
+      4 && r !== (r = Sn(
+        /*file_to_display*/
+        h[2]
+      )) && (l.value = r), c & /*file_to_display*/
+      4 && f !== (f = /*file_to_display*/
+      h[2].orig_name + "") && Ci(_, f);
+    },
+    d(h) {
+      h && wa(e);
+    }
+  };
+}
+function Xd(t) {
+  let e, n, i, l = (
+    /*files_with_progress*/
+    t[0].length + ""
+  ), s, o, r = (
+    /*files_with_progress*/
+    t[0].length > 1 ? "files" : "file"
+  ), a, u, f, _ = (
+    /*file_to_display*/
+    t[2] && Mo(t)
+  );
+  return {
+    c() {
+      e = kt("div"), n = kt("span"), i = $t("Uploading "), s = $t(l), o = es(), a = $t(r), u = $t("..."), f = es(), _ && _.c(), Et(n, "class", "uploading svelte-cr2edf"), Et(e, "class", "wrap svelte-cr2edf"), Io(
+        e,
+        "progress",
+        /*progress*/
+        t[1]
+      );
+    },
+    m(h, c) {
+      va(h, e, c), Te(e, n), Te(n, i), Te(n, s), Te(n, o), Te(n, a), Te(n, u), Te(e, f), _ && _.m(e, null);
+    },
+    p(h, [c]) {
+      c & /*files_with_progress*/
+      1 && l !== (l = /*files_with_progress*/
+      h[0].length + "") && Ci(s, l), c & /*files_with_progress*/
+      1 && r !== (r = /*files_with_progress*/
+      h[0].length > 1 ? "files" : "file") && Ci(a, r), /*file_to_display*/
+      h[2] ? _ ? _.p(h, c) : (_ = Mo(h), _.c(), _.m(e, null)) : _ && (_.d(1), _ = null), c & /*progress*/
+      2 && Io(
+        e,
+        "progress",
+        /*progress*/
+        h[1]
+      );
+    },
+    i: Lo,
+    o: Lo,
+    d(h) {
+      h && wa(e), _ && _.d();
+    }
+  };
+}
+function Sn(t) {
+  return t.progress * 100 / (t.size || 0) || 0;
+}
+function Wd(t) {
+  let e = 0;
+  return t.forEach((n) => {
+    e += Sn(n);
+  }), document.documentElement.style.setProperty("--upload-progress-width", (e / t.length).toFixed(2) + "%"), e / t.length;
+}
+function Zd(t, e, n) {
+  let { upload_id: i } = e, { root: l } = e, { files: s } = e, o, r = !1, a, u, f = s.map((d) => ({ ...d, progress: 0 }));
+  const _ = xd();
+  function h(d, m) {
+    n(0, f = f.map((b) => (b.orig_name === d && (b.progress += m), b)));
+  }
+  const c = Vd("EventSource_factory");
+  return Gd(() => {
+    o = c(new URL(`${l}/upload_progress?upload_id=${i}`)), o.onmessage = async function(d) {
+      const m = JSON.parse(d.data);
+      r || n(1, r = !0), m.msg === "done" ? (o.close(), _("done")) : (n(6, a = m), h(m.orig_name, m.chunk_size));
+    };
+  }), t.$$set = (d) => {
+    "upload_id" in d && n(3, i = d.upload_id), "root" in d && n(4, l = d.root), "files" in d && n(5, s = d.files);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*files_with_progress*/
+    1 && Wd(f), t.$$.dirty & /*current_file_upload, files_with_progress*/
+    65 && n(2, u = a || f[0]);
+  }, [
+    f,
+    r,
+    u,
+    i,
+    l,
+    s,
+    a
+  ];
+}
+class Yd extends qd {
+  constructor(e) {
+    super(), zd(this, e, Zd, Xd, jd, { upload_id: 3, root: 4, files: 5 });
+  }
+}
+const {
+  SvelteComponent: Jd,
+  append: Oo,
+  attr: we,
+  binding_callbacks: Qd,
+  bubble: bt,
+  check_outros: ya,
+  create_component: Kd,
+  create_slot: Ea,
+  destroy_component: $d,
+  detach: ji,
+  element: ts,
+  empty: ka,
+  get_all_dirty_from_scope: Sa,
+  get_slot_changes: Ca,
+  group_outros: Aa,
+  init: em,
+  insert: Gi,
+  listen: Ne,
+  mount_component: tm,
+  prevent_default: pt,
+  run_all: nm,
+  safe_not_equal: im,
+  set_style: Ba,
+  space: lm,
+  stop_propagation: wt,
+  toggle_class: ve,
+  transition_in: ft,
+  transition_out: Lt,
+  update_slot_base: Ta
+} = window.__gradio__svelte__internal, { createEventDispatcher: sm, tick: om, getContext: rm } = window.__gradio__svelte__internal;
+function am(t) {
+  let e, n, i, l, s, o, r, a, u, f;
+  const _ = (
+    /*#slots*/
+    t[22].default
+  ), h = Ea(
+    _,
+    t,
+    /*$$scope*/
+    t[21],
+    null
+  );
+  return {
+    c() {
+      e = ts("button"), h && h.c(), n = lm(), i = ts("input"), we(i, "aria-label", "file upload"), we(i, "data-testid", "file-upload"), we(i, "type", "file"), we(
+        i,
+        "accept",
+        /*accept_file_types*/
+        t[12]
+      ), i.multiple = l = /*file_count*/
+      t[5] === "multiple" || void 0, we(i, "webkitdirectory", s = /*file_count*/
+      t[5] === "directory" || void 0), we(i, "mozdirectory", o = /*file_count*/
+      t[5] === "directory" || void 0), we(i, "class", "svelte-1aq8tno"), we(e, "tabindex", r = /*hidden*/
+      t[7] ? -1 : 0), we(e, "class", "svelte-1aq8tno"), ve(
+        e,
+        "hidden",
+        /*hidden*/
+        t[7]
+      ), ve(
+        e,
+        "center",
+        /*center*/
+        t[3]
+      ), ve(
+        e,
+        "boundedheight",
+        /*boundedheight*/
+        t[2]
+      ), ve(
+        e,
+        "flex",
+        /*flex*/
+        t[4]
+      ), Ba(e, "height", "100%");
+    },
+    m(c, d) {
+      Gi(c, e, d), h && h.m(e, null), Oo(e, n), Oo(e, i), t[30](i), a = !0, u || (f = [
+        Ne(
+          i,
+          "change",
+          /*load_files_from_upload*/
+          t[15]
+        ),
+        Ne(e, "drag", wt(pt(
+          /*drag_handler*/
+          t[23]
+        ))),
+        Ne(e, "dragstart", wt(pt(
+          /*dragstart_handler*/
+          t[24]
+        ))),
+        Ne(e, "dragend", wt(pt(
+          /*dragend_handler*/
+          t[25]
+        ))),
+        Ne(e, "dragover", wt(pt(
+          /*dragover_handler*/
+          t[26]
+        ))),
+        Ne(e, "dragenter", wt(pt(
+          /*dragenter_handler*/
+          t[27]
+        ))),
+        Ne(e, "dragleave", wt(pt(
+          /*dragleave_handler*/
+          t[28]
+        ))),
+        Ne(e, "drop", wt(pt(
+          /*drop_handler*/
+          t[29]
+        ))),
+        Ne(
+          e,
+          "click",
+          /*open_file_upload*/
+          t[9]
+        ),
+        Ne(
+          e,
+          "drop",
+          /*loadFilesFromDrop*/
+          t[16]
+        ),
+        Ne(
+          e,
+          "dragenter",
+          /*updateDragging*/
+          t[14]
+        ),
+        Ne(
+          e,
+          "dragleave",
+          /*updateDragging*/
+          t[14]
+        )
+      ], u = !0);
+    },
+    p(c, d) {
+      h && h.p && (!a || d[0] & /*$$scope*/
+      2097152) && Ta(
+        h,
+        _,
+        c,
+        /*$$scope*/
+        c[21],
+        a ? Ca(
+          _,
+          /*$$scope*/
+          c[21],
+          d,
+          null
+        ) : Sa(
+          /*$$scope*/
+          c[21]
+        ),
+        null
+      ), (!a || d[0] & /*accept_file_types*/
+      4096) && we(
+        i,
+        "accept",
+        /*accept_file_types*/
+        c[12]
+      ), (!a || d[0] & /*file_count*/
+      32 && l !== (l = /*file_count*/
+      c[5] === "multiple" || void 0)) && (i.multiple = l), (!a || d[0] & /*file_count*/
+      32 && s !== (s = /*file_count*/
+      c[5] === "directory" || void 0)) && we(i, "webkitdirectory", s), (!a || d[0] & /*file_count*/
+      32 && o !== (o = /*file_count*/
+      c[5] === "directory" || void 0)) && we(i, "mozdirectory", o), (!a || d[0] & /*hidden*/
+      128 && r !== (r = /*hidden*/
+      c[7] ? -1 : 0)) && we(e, "tabindex", r), (!a || d[0] & /*hidden*/
+      128) && ve(
+        e,
+        "hidden",
+        /*hidden*/
+        c[7]
+      ), (!a || d[0] & /*center*/
+      8) && ve(
+        e,
+        "center",
+        /*center*/
+        c[3]
+      ), (!a || d[0] & /*boundedheight*/
+      4) && ve(
+        e,
+        "boundedheight",
+        /*boundedheight*/
+        c[2]
+      ), (!a || d[0] & /*flex*/
+      16) && ve(
+        e,
+        "flex",
+        /*flex*/
+        c[4]
+      );
+    },
+    i(c) {
+      a || (ft(h, c), a = !0);
+    },
+    o(c) {
+      Lt(h, c), a = !1;
+    },
+    d(c) {
+      c && ji(e), h && h.d(c), t[30](null), u = !1, nm(f);
+    }
+  };
+}
+function um(t) {
+  let e, n, i = !/*hidden*/
+  t[7] && Do(t);
+  return {
+    c() {
+      i && i.c(), e = ka();
+    },
+    m(l, s) {
+      i && i.m(l, s), Gi(l, e, s), n = !0;
+    },
+    p(l, s) {
+      /*hidden*/
+      l[7] ? i && (Aa(), Lt(i, 1, 1, () => {
+        i = null;
+      }), ya()) : i ? (i.p(l, s), s[0] & /*hidden*/
+      128 && ft(i, 1)) : (i = Do(l), i.c(), ft(i, 1), i.m(e.parentNode, e));
+    },
+    i(l) {
+      n || (ft(i), n = !0);
+    },
+    o(l) {
+      Lt(i), n = !1;
+    },
+    d(l) {
+      l && ji(e), i && i.d(l);
+    }
+  };
+}
+function fm(t) {
+  let e, n, i, l, s;
+  const o = (
+    /*#slots*/
+    t[22].default
+  ), r = Ea(
+    o,
+    t,
+    /*$$scope*/
+    t[21],
+    null
+  );
+  return {
+    c() {
+      e = ts("button"), r && r.c(), we(e, "tabindex", n = /*hidden*/
+      t[7] ? -1 : 0), we(e, "class", "svelte-1aq8tno"), ve(
+        e,
+        "hidden",
+        /*hidden*/
+        t[7]
+      ), ve(
+        e,
+        "center",
+        /*center*/
+        t[3]
+      ), ve(
+        e,
+        "boundedheight",
+        /*boundedheight*/
+        t[2]
+      ), ve(
+        e,
+        "flex",
+        /*flex*/
+        t[4]
+      ), Ba(e, "height", "100%");
+    },
+    m(a, u) {
+      Gi(a, e, u), r && r.m(e, null), i = !0, l || (s = Ne(
+        e,
+        "click",
+        /*paste_clipboard*/
+        t[8]
+      ), l = !0);
+    },
+    p(a, u) {
+      r && r.p && (!i || u[0] & /*$$scope*/
+      2097152) && Ta(
+        r,
+        o,
+        a,
+        /*$$scope*/
+        a[21],
+        i ? Ca(
+          o,
+          /*$$scope*/
+          a[21],
+          u,
+          null
+        ) : Sa(
+          /*$$scope*/
+          a[21]
+        ),
+        null
+      ), (!i || u[0] & /*hidden*/
+      128 && n !== (n = /*hidden*/
+      a[7] ? -1 : 0)) && we(e, "tabindex", n), (!i || u[0] & /*hidden*/
+      128) && ve(
+        e,
+        "hidden",
+        /*hidden*/
+        a[7]
+      ), (!i || u[0] & /*center*/
+      8) && ve(
+        e,
+        "center",
+        /*center*/
+        a[3]
+      ), (!i || u[0] & /*boundedheight*/
+      4) && ve(
+        e,
+        "boundedheight",
+        /*boundedheight*/
+        a[2]
+      ), (!i || u[0] & /*flex*/
+      16) && ve(
+        e,
+        "flex",
+        /*flex*/
+        a[4]
+      );
+    },
+    i(a) {
+      i || (ft(r, a), i = !0);
+    },
+    o(a) {
+      Lt(r, a), i = !1;
+    },
+    d(a) {
+      a && ji(e), r && r.d(a), l = !1, s();
+    }
+  };
+}
+function Do(t) {
+  let e, n;
+  return e = new Yd({
+    props: {
+      root: (
+        /*root*/
+        t[6]
+      ),
+      upload_id: (
+        /*upload_id*/
+        t[10]
+      ),
+      files: (
+        /*file_data*/
+        t[11]
+      )
+    }
+  }), {
+    c() {
+      Kd(e.$$.fragment);
+    },
+    m(i, l) {
+      tm(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*root*/
+      64 && (s.root = /*root*/
+      i[6]), l[0] & /*upload_id*/
+      1024 && (s.upload_id = /*upload_id*/
+      i[10]), l[0] & /*file_data*/
+      2048 && (s.files = /*file_data*/
+      i[11]), e.$set(s);
+    },
+    i(i) {
+      n || (ft(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      Lt(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      $d(e, i);
+    }
+  };
+}
+function cm(t) {
+  let e, n, i, l;
+  const s = [fm, um, am], o = [];
+  function r(a, u) {
+    return (
+      /*filetype*/
+      a[0] === "clipboard" ? 0 : (
+        /*uploading*/
+        a[1] ? 1 : 2
+      )
+    );
+  }
+  return e = r(t), n = o[e] = s[e](t), {
+    c() {
+      n.c(), i = ka();
+    },
+    m(a, u) {
+      o[e].m(a, u), Gi(a, i, u), l = !0;
+    },
+    p(a, u) {
+      let f = e;
+      e = r(a), e === f ? o[e].p(a, u) : (Aa(), Lt(o[f], 1, 1, () => {
+        o[f] = null;
+      }), ya(), n = o[e], n ? n.p(a, u) : (n = o[e] = s[e](a), n.c()), ft(n, 1), n.m(i.parentNode, i));
+    },
+    i(a) {
+      l || (ft(n), l = !0);
+    },
+    o(a) {
+      Lt(n), l = !1;
+    },
+    d(a) {
+      a && ji(i), o[e].d(a);
+    }
+  };
+}
+function Ro(t) {
+  let e, n = t[0], i = 1;
+  for (; i < t.length; ) {
+    const l = t[i], s = t[i + 1];
+    if (i += 2, (l === "optionalAccess" || l === "optionalCall") && n == null)
+      return;
+    l === "access" || l === "optionalAccess" ? (e = n, n = s(n)) : (l === "call" || l === "optionalCall") && (n = s((...o) => n.call(e, ...o)), e = void 0);
+  }
+  return n;
+}
+function _m(t, e, n) {
+  if (!t || t === "*" || t === "file/*")
+    return !0;
+  let i;
+  if (typeof t == "string")
+    i = t.split(",").map((l) => l.trim());
+  else if (Array.isArray(t))
+    i = t;
+  else
+    return !1;
+  return i.includes(e) || i.some((l) => {
+    const [s] = l.split("/").map((o) => o.trim());
+    return l.endsWith("/*") && n.startsWith(s + "/");
+  });
+}
+function hm(t, e, n) {
+  let { $$slots: i = {}, $$scope: l } = e, { filetype: s = null } = e, { dragging: o = !1 } = e, { boundedheight: r = !0 } = e, { center: a = !0 } = e, { flex: u = !0 } = e, { file_count: f = "single" } = e, { disable_click: _ = !1 } = e, { root: h } = e, { hidden: c = !1 } = e, { format: d = "file" } = e, { uploading: m = !1 } = e, b, p, y;
+  const w = rm("upload_files");
+  let C;
+  const P = sm();
+  function E() {
+    n(17, o = !o);
+  }
+  function N() {
+    navigator.clipboard.read().then(async (k) => {
+      for (let I = 0; I < k.length; I++) {
+        const g = k[I].types.find((T) => T.startsWith("image/"));
+        if (g) {
+          k[I].getType(g).then(async (T) => {
+            const ae = new File([T], `clipboard.${g.replace("image/", "")}`);
+            await B([ae]);
+          });
+          break;
+        }
+      }
+    });
+  }
+  function v() {
+    _ || (n(13, C.value = "", C), C.click());
+  }
+  async function A(k) {
+    await om(), n(10, b = Math.random().toString(36).substring(2, 15)), n(1, m = !0);
+    const I = await Zh(k, h, b, w);
+    return P("load", f === "single" ? Ro([I, "optionalAccess", (g) => g[0]]) : I), n(1, m = !1), I || [];
+  }
+  async function B(k) {
+    if (!k.length)
+      return;
+    let I = k.map((g) => new File([g], g.name));
+    return n(11, p = await Yh(I)), await A(p);
+  }
+  async function L(k) {
+    const I = k.target;
+    if (I.files)
+      if (d != "blob")
+        await B(Array.from(I.files));
+      else {
+        if (f === "single") {
+          P("load", I.files[0]);
+          return;
+        }
+        P("load", I.files);
+      }
+  }
+  async function x(k) {
+    if (n(17, o = !1), !Ro([k, "access", (g) => g.dataTransfer, "optionalAccess", (g) => g.files]))
+      return;
+    const I = Array.from(k.dataTransfer.files).filter((g) => {
+      const T = "." + g.name.split(".").pop();
+      return T && _m(s, T, g.type) || (T && Array.isArray(s) ? s.includes(T) : T === s) ? !0 : (P("error", `Invalid file type only ${s} allowed.`), !1);
+    });
+    await B(I);
+  }
+  function J(k) {
+    bt.call(this, t, k);
+  }
+  function ce(k) {
+    bt.call(this, t, k);
+  }
+  function te(k) {
+    bt.call(this, t, k);
+  }
+  function ke(k) {
+    bt.call(this, t, k);
+  }
+  function ye(k) {
+    bt.call(this, t, k);
+  }
+  function me(k) {
+    bt.call(this, t, k);
+  }
+  function _e(k) {
+    bt.call(this, t, k);
+  }
+  function S(k) {
+    Qd[k ? "unshift" : "push"](() => {
+      C = k, n(13, C);
+    });
+  }
+  return t.$$set = (k) => {
+    "filetype" in k && n(0, s = k.filetype), "dragging" in k && n(17, o = k.dragging), "boundedheight" in k && n(2, r = k.boundedheight), "center" in k && n(3, a = k.center), "flex" in k && n(4, u = k.flex), "file_count" in k && n(5, f = k.file_count), "disable_click" in k && n(18, _ = k.disable_click), "root" in k && n(6, h = k.root), "hidden" in k && n(7, c = k.hidden), "format" in k && n(19, d = k.format), "uploading" in k && n(1, m = k.uploading), "$$scope" in k && n(21, l = k.$$scope);
+  }, t.$$.update = () => {
+    t.$$.dirty[0] & /*filetype*/
+    1 && (s == null || typeof s == "string" ? n(12, y = s) : (n(0, s = s.map((k) => k.startsWith(".") ? k : k + "/*")), n(12, y = s.join(", "))));
+  }, [
+    s,
+    m,
+    r,
+    a,
+    u,
+    f,
+    h,
+    c,
+    N,
+    v,
+    b,
+    p,
+    y,
+    C,
+    E,
+    L,
+    x,
+    o,
+    _,
+    d,
+    B,
+    l,
+    i,
+    J,
+    ce,
+    te,
+    ke,
+    ye,
+    me,
+    _e,
+    S
+  ];
+}
+class dm extends Jd {
+  constructor(e) {
+    super(), em(
+      this,
+      e,
+      hm,
+      cm,
+      im,
+      {
+        filetype: 0,
+        dragging: 17,
+        boundedheight: 2,
+        center: 3,
+        flex: 4,
+        file_count: 5,
+        disable_click: 18,
+        root: 6,
+        hidden: 7,
+        format: 19,
+        uploading: 1,
+        paste_clipboard: 8,
+        open_file_upload: 9,
+        load_files: 20
+      },
+      null,
+      [-1, -1]
+    );
+  }
+  get paste_clipboard() {
+    return this.$$.ctx[8];
+  }
+  get open_file_upload() {
+    return this.$$.ctx[9];
+  }
+  get load_files() {
+    return this.$$.ctx[20];
+  }
+}
+const {
+  SvelteComponent: mm,
+  append: Uo,
+  attr: pe,
+  detach: gm,
+  init: bm,
+  insert: pm,
+  noop: kl,
+  safe_not_equal: wm,
+  set_style: st,
+  svg_element: Sl
+} = window.__gradio__svelte__internal;
+function vm(t) {
+  let e, n, i;
+  return {
+    c() {
+      e = Sl("svg"), n = Sl("line"), i = Sl("line"), pe(n, "x1", "4"), pe(n, "y1", "12"), pe(n, "x2", "20"), pe(n, "y2", "12"), st(n, "fill", "none"), st(n, "stroke-width", "2px"), pe(i, "x1", "12"), pe(i, "y1", "4"), pe(i, "x2", "12"), pe(i, "y2", "20"), st(i, "fill", "none"), st(i, "stroke-width", "2px"), pe(e, "width", "100%"), pe(e, "height", "100%"), pe(e, "viewBox", "0 0 24 24"), pe(e, "version", "1.1"), pe(e, "xmlns", "http://www.w3.org/2000/svg"), pe(e, "xmlns:xlink", "http://www.w3.org/1999/xlink"), pe(e, "xml:space", "preserve"), pe(e, "stroke", "currentColor"), st(e, "fill-rule", "evenodd"), st(e, "clip-rule", "evenodd"), st(e, "stroke-linecap", "round"), st(e, "stroke-linejoin", "round");
+    },
+    m(l, s) {
+      pm(l, e, s), Uo(e, n), Uo(e, i);
+    },
+    p: kl,
+    i: kl,
+    o: kl,
+    d(l) {
+      l && gm(e);
+    }
+  };
+}
+class ym extends mm {
+  constructor(e) {
+    super(), bm(this, e, null, vm, wm, {});
+  }
+}
+const {
+  SvelteComponent: Em,
+  append: Fo,
+  attr: Cl,
+  bubble: qo,
+  create_component: km,
+  destroy_component: Sm,
+  detach: Ha,
+  element: zo,
+  init: Cm,
+  insert: Pa,
+  listen: Al,
+  mount_component: Am,
+  run_all: Bm,
+  safe_not_equal: Tm,
+  set_data: Hm,
+  set_input_value: jo,
+  space: Pm,
+  text: Nm,
+  transition_in: Lm,
+  transition_out: Im
+} = window.__gradio__svelte__internal, { createEventDispatcher: Mm, afterUpdate: Om } = window.__gradio__svelte__internal;
+function Dm(t) {
+  let e;
+  return {
+    c() {
+      e = Nm(
+        /*label*/
+        t[1]
+      );
+    },
+    m(n, i) {
+      Pa(n, e, i);
+    },
+    p(n, i) {
+      i & /*label*/
+      2 && Hm(
+        e,
+        /*label*/
+        n[1]
+      );
+    },
+    d(n) {
+      n && Ha(e);
+    }
+  };
+}
+function Rm(t) {
+  let e, n, i, l, s, o, r;
+  return n = new vr({
+    props: {
+      show_label: (
+        /*show_label*/
+        t[4]
+      ),
+      info: (
+        /*info*/
+        t[2]
+      ),
+      $$slots: { default: [Dm] },
+      $$scope: { ctx: t }
+    }
+  }), {
+    c() {
+      e = zo("label"), km(n.$$.fragment), i = Pm(), l = zo("input"), Cl(l, "type", "color"), l.disabled = /*disabled*/
+      t[3], Cl(l, "class", "svelte-16l8u73"), Cl(e, "class", "block");
+    },
+    m(a, u) {
+      Pa(a, e, u), Am(n, e, null), Fo(e, i), Fo(e, l), jo(
+        l,
+        /*value*/
+        t[0]
+      ), s = !0, o || (r = [
+        Al(
+          l,
+          "input",
+          /*input_input_handler*/
+          t[8]
+        ),
+        Al(
+          l,
+          "focus",
+          /*focus_handler*/
+          t[6]
+        ),
+        Al(
+          l,
+          "blur",
+          /*blur_handler*/
+          t[7]
+        )
+      ], o = !0);
+    },
+    p(a, [u]) {
+      const f = {};
+      u & /*show_label*/
+      16 && (f.show_label = /*show_label*/
+      a[4]), u & /*info*/
+      4 && (f.info = /*info*/
+      a[2]), u & /*$$scope, label*/
+      2050 && (f.$$scope = { dirty: u, ctx: a }), n.$set(f), (!s || u & /*disabled*/
+      8) && (l.disabled = /*disabled*/
+      a[3]), u & /*value*/
+      1 && jo(
+        l,
+        /*value*/
+        a[0]
+      );
+    },
+    i(a) {
+      s || (Lm(n.$$.fragment, a), s = !0);
+    },
+    o(a) {
+      Im(n.$$.fragment, a), s = !1;
+    },
+    d(a) {
+      a && Ha(e), Sm(n), o = !1, Bm(r);
+    }
+  };
+}
+function Um(t, e, n) {
+  let { value: i = "#000000" } = e, { value_is_output: l = !1 } = e, { label: s } = e, { info: o = void 0 } = e, { disabled: r = !1 } = e, { show_label: a = !0 } = e;
+  const u = Mm();
+  function f() {
+    u("change", i), l || u("input");
+  }
+  Om(() => {
+    n(5, l = !1);
+  });
+  function _(d) {
+    qo.call(this, t, d);
+  }
+  function h(d) {
+    qo.call(this, t, d);
+  }
+  function c() {
+    i = this.value, n(0, i);
+  }
+  return t.$$set = (d) => {
+    "value" in d && n(0, i = d.value), "value_is_output" in d && n(5, l = d.value_is_output), "label" in d && n(1, s = d.label), "info" in d && n(2, o = d.info), "disabled" in d && n(3, r = d.disabled), "show_label" in d && n(4, a = d.show_label);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*value*/
+    1 && f();
+  }, [
+    i,
+    s,
+    o,
+    r,
+    a,
+    l,
+    _,
+    h,
+    c
+  ];
+}
+class Fm extends Em {
+  constructor(e) {
+    super(), Cm(this, e, Um, Rm, Tm, {
+      value: 0,
+      value_is_output: 5,
+      label: 1,
+      info: 2,
+      disabled: 3,
+      show_label: 4
+    });
+  }
+}
+new Intl.Collator(0, { numeric: 1 }).compare;
+const {
+  SvelteComponent: qm,
+  append: Na,
+  attr: ie,
+  bubble: zm,
+  check_outros: jm,
+  create_slot: La,
+  detach: jn,
+  element: xi,
+  empty: Gm,
+  get_all_dirty_from_scope: Ia,
+  get_slot_changes: Ma,
+  group_outros: xm,
+  init: Vm,
+  insert: Gn,
+  listen: Xm,
+  safe_not_equal: Wm,
+  set_style: Be,
+  space: Oa,
+  src_url_equal: Ai,
+  toggle_class: en,
+  transition_in: Bi,
+  transition_out: Ti,
+  update_slot_base: Da
+} = window.__gradio__svelte__internal;
+function Zm(t) {
+  let e, n, i, l, s, o, r = (
+    /*icon*/
+    t[7] && Go(t)
+  );
+  const a = (
+    /*#slots*/
+    t[12].default
+  ), u = La(
+    a,
+    t,
+    /*$$scope*/
+    t[11],
+    null
+  );
+  return {
+    c() {
+      e = xi("button"), r && r.c(), n = Oa(), u && u.c(), ie(e, "class", i = /*size*/
+      t[4] + " " + /*variant*/
+      t[3] + " " + /*elem_classes*/
+      t[1].join(" ") + " svelte-8huxfn"), ie(
+        e,
+        "id",
+        /*elem_id*/
+        t[0]
+      ), e.disabled = /*disabled*/
+      t[8], en(e, "hidden", !/*visible*/
+      t[2]), Be(
+        e,
+        "flex-grow",
+        /*scale*/
+        t[9]
+      ), Be(
+        e,
+        "width",
+        /*scale*/
+        t[9] === 0 ? "fit-content" : null
+      ), Be(e, "min-width", typeof /*min_width*/
+      t[10] == "number" ? `calc(min(${/*min_width*/
+      t[10]}px, 100%))` : null);
+    },
+    m(f, _) {
+      Gn(f, e, _), r && r.m(e, null), Na(e, n), u && u.m(e, null), l = !0, s || (o = Xm(
+        e,
+        "click",
+        /*click_handler*/
+        t[13]
+      ), s = !0);
+    },
+    p(f, _) {
+      /*icon*/
+      f[7] ? r ? r.p(f, _) : (r = Go(f), r.c(), r.m(e, n)) : r && (r.d(1), r = null), u && u.p && (!l || _ & /*$$scope*/
+      2048) && Da(
+        u,
+        a,
+        f,
+        /*$$scope*/
+        f[11],
+        l ? Ma(
+          a,
+          /*$$scope*/
+          f[11],
+          _,
+          null
+        ) : Ia(
+          /*$$scope*/
+          f[11]
+        ),
+        null
+      ), (!l || _ & /*size, variant, elem_classes*/
+      26 && i !== (i = /*size*/
+      f[4] + " " + /*variant*/
+      f[3] + " " + /*elem_classes*/
+      f[1].join(" ") + " svelte-8huxfn")) && ie(e, "class", i), (!l || _ & /*elem_id*/
+      1) && ie(
+        e,
+        "id",
+        /*elem_id*/
+        f[0]
+      ), (!l || _ & /*disabled*/
+      256) && (e.disabled = /*disabled*/
+      f[8]), (!l || _ & /*size, variant, elem_classes, visible*/
+      30) && en(e, "hidden", !/*visible*/
+      f[2]), _ & /*scale*/
+      512 && Be(
+        e,
+        "flex-grow",
+        /*scale*/
+        f[9]
+      ), _ & /*scale*/
+      512 && Be(
+        e,
+        "width",
+        /*scale*/
+        f[9] === 0 ? "fit-content" : null
+      ), _ & /*min_width*/
+      1024 && Be(e, "min-width", typeof /*min_width*/
+      f[10] == "number" ? `calc(min(${/*min_width*/
+      f[10]}px, 100%))` : null);
+    },
+    i(f) {
+      l || (Bi(u, f), l = !0);
+    },
+    o(f) {
+      Ti(u, f), l = !1;
+    },
+    d(f) {
+      f && jn(e), r && r.d(), u && u.d(f), s = !1, o();
+    }
+  };
+}
+function Ym(t) {
+  let e, n, i, l, s = (
+    /*icon*/
+    t[7] && xo(t)
+  );
+  const o = (
+    /*#slots*/
+    t[12].default
+  ), r = La(
+    o,
+    t,
+    /*$$scope*/
+    t[11],
+    null
+  );
+  return {
+    c() {
+      e = xi("a"), s && s.c(), n = Oa(), r && r.c(), ie(
+        e,
+        "href",
+        /*link*/
+        t[6]
+      ), ie(e, "rel", "noopener noreferrer"), ie(
+        e,
+        "aria-disabled",
+        /*disabled*/
+        t[8]
+      ), ie(e, "class", i = /*size*/
+      t[4] + " " + /*variant*/
+      t[3] + " " + /*elem_classes*/
+      t[1].join(" ") + " svelte-8huxfn"), ie(
+        e,
+        "id",
+        /*elem_id*/
+        t[0]
+      ), en(e, "hidden", !/*visible*/
+      t[2]), en(
+        e,
+        "disabled",
+        /*disabled*/
+        t[8]
+      ), Be(
+        e,
+        "flex-grow",
+        /*scale*/
+        t[9]
+      ), Be(
+        e,
+        "pointer-events",
+        /*disabled*/
+        t[8] ? "none" : null
+      ), Be(
+        e,
+        "width",
+        /*scale*/
+        t[9] === 0 ? "fit-content" : null
+      ), Be(e, "min-width", typeof /*min_width*/
+      t[10] == "number" ? `calc(min(${/*min_width*/
+      t[10]}px, 100%))` : null);
+    },
+    m(a, u) {
+      Gn(a, e, u), s && s.m(e, null), Na(e, n), r && r.m(e, null), l = !0;
+    },
+    p(a, u) {
+      /*icon*/
+      a[7] ? s ? s.p(a, u) : (s = xo(a), s.c(), s.m(e, n)) : s && (s.d(1), s = null), r && r.p && (!l || u & /*$$scope*/
+      2048) && Da(
+        r,
+        o,
+        a,
+        /*$$scope*/
+        a[11],
+        l ? Ma(
+          o,
+          /*$$scope*/
+          a[11],
+          u,
+          null
+        ) : Ia(
+          /*$$scope*/
+          a[11]
+        ),
+        null
+      ), (!l || u & /*link*/
+      64) && ie(
+        e,
+        "href",
+        /*link*/
+        a[6]
+      ), (!l || u & /*disabled*/
+      256) && ie(
+        e,
+        "aria-disabled",
+        /*disabled*/
+        a[8]
+      ), (!l || u & /*size, variant, elem_classes*/
+      26 && i !== (i = /*size*/
+      a[4] + " " + /*variant*/
+      a[3] + " " + /*elem_classes*/
+      a[1].join(" ") + " svelte-8huxfn")) && ie(e, "class", i), (!l || u & /*elem_id*/
+      1) && ie(
+        e,
+        "id",
+        /*elem_id*/
+        a[0]
+      ), (!l || u & /*size, variant, elem_classes, visible*/
+      30) && en(e, "hidden", !/*visible*/
+      a[2]), (!l || u & /*size, variant, elem_classes, disabled*/
+      282) && en(
+        e,
+        "disabled",
+        /*disabled*/
+        a[8]
+      ), u & /*scale*/
+      512 && Be(
+        e,
+        "flex-grow",
+        /*scale*/
+        a[9]
+      ), u & /*disabled*/
+      256 && Be(
+        e,
+        "pointer-events",
+        /*disabled*/
+        a[8] ? "none" : null
+      ), u & /*scale*/
+      512 && Be(
+        e,
+        "width",
+        /*scale*/
+        a[9] === 0 ? "fit-content" : null
+      ), u & /*min_width*/
+      1024 && Be(e, "min-width", typeof /*min_width*/
+      a[10] == "number" ? `calc(min(${/*min_width*/
+      a[10]}px, 100%))` : null);
+    },
+    i(a) {
+      l || (Bi(r, a), l = !0);
+    },
+    o(a) {
+      Ti(r, a), l = !1;
+    },
+    d(a) {
+      a && jn(e), s && s.d(), r && r.d(a);
+    }
+  };
+}
+function Go(t) {
+  let e, n, i;
+  return {
+    c() {
+      e = xi("img"), ie(e, "class", "button-icon svelte-8huxfn"), Ai(e.src, n = /*icon*/
+      t[7].url) || ie(e, "src", n), ie(e, "alt", i = `${/*value*/
+      t[5]} icon`);
+    },
+    m(l, s) {
+      Gn(l, e, s);
+    },
+    p(l, s) {
+      s & /*icon*/
+      128 && !Ai(e.src, n = /*icon*/
+      l[7].url) && ie(e, "src", n), s & /*value*/
+      32 && i !== (i = `${/*value*/
+      l[5]} icon`) && ie(e, "alt", i);
+    },
+    d(l) {
+      l && jn(e);
+    }
+  };
+}
+function xo(t) {
+  let e, n, i;
+  return {
+    c() {
+      e = xi("img"), ie(e, "class", "button-icon svelte-8huxfn"), Ai(e.src, n = /*icon*/
+      t[7].url) || ie(e, "src", n), ie(e, "alt", i = `${/*value*/
+      t[5]} icon`);
+    },
+    m(l, s) {
+      Gn(l, e, s);
+    },
+    p(l, s) {
+      s & /*icon*/
+      128 && !Ai(e.src, n = /*icon*/
+      l[7].url) && ie(e, "src", n), s & /*value*/
+      32 && i !== (i = `${/*value*/
+      l[5]} icon`) && ie(e, "alt", i);
+    },
+    d(l) {
+      l && jn(e);
+    }
+  };
+}
+function Jm(t) {
+  let e, n, i, l;
+  const s = [Ym, Zm], o = [];
+  function r(a, u) {
+    return (
+      /*link*/
+      a[6] && /*link*/
+      a[6].length > 0 ? 0 : 1
+    );
+  }
+  return e = r(t), n = o[e] = s[e](t), {
+    c() {
+      n.c(), i = Gm();
+    },
+    m(a, u) {
+      o[e].m(a, u), Gn(a, i, u), l = !0;
+    },
+    p(a, [u]) {
+      let f = e;
+      e = r(a), e === f ? o[e].p(a, u) : (xm(), Ti(o[f], 1, 1, () => {
+        o[f] = null;
+      }), jm(), n = o[e], n ? n.p(a, u) : (n = o[e] = s[e](a), n.c()), Bi(n, 1), n.m(i.parentNode, i));
+    },
+    i(a) {
+      l || (Bi(n), l = !0);
+    },
+    o(a) {
+      Ti(n), l = !1;
+    },
+    d(a) {
+      a && jn(i), o[e].d(a);
+    }
+  };
+}
+function Qm(t, e, n) {
+  let { $$slots: i = {}, $$scope: l } = e, { elem_id: s = "" } = e, { elem_classes: o = [] } = e, { visible: r = !0 } = e, { variant: a = "secondary" } = e, { size: u = "lg" } = e, { value: f = null } = e, { link: _ = null } = e, { icon: h = null } = e, { disabled: c = !1 } = e, { scale: d = null } = e, { min_width: m = void 0 } = e;
+  function b(p) {
+    zm.call(this, t, p);
+  }
+  return t.$$set = (p) => {
+    "elem_id" in p && n(0, s = p.elem_id), "elem_classes" in p && n(1, o = p.elem_classes), "visible" in p && n(2, r = p.visible), "variant" in p && n(3, a = p.variant), "size" in p && n(4, u = p.size), "value" in p && n(5, f = p.value), "link" in p && n(6, _ = p.link), "icon" in p && n(7, h = p.icon), "disabled" in p && n(8, c = p.disabled), "scale" in p && n(9, d = p.scale), "min_width" in p && n(10, m = p.min_width), "$$scope" in p && n(11, l = p.$$scope);
+  }, [
+    s,
+    o,
+    r,
+    a,
+    u,
+    f,
+    _,
+    h,
+    c,
+    d,
+    m,
+    l,
+    i,
+    b
+  ];
+}
+class Vo extends qm {
+  constructor(e) {
+    super(), Vm(this, e, Qm, Jm, Wm, {
+      elem_id: 0,
+      elem_classes: 1,
+      visible: 2,
+      variant: 3,
+      size: 4,
+      value: 5,
+      link: 6,
+      icon: 7,
+      disabled: 8,
+      scale: 9,
+      min_width: 10
+    });
+  }
+}
+const {
+  SvelteComponent: Km,
+  add_render_callback: Ra,
+  append: ei,
+  attr: Ie,
+  binding_callbacks: Xo,
+  check_outros: $m,
+  create_bidirectional_transition: Wo,
+  destroy_each: e1,
+  detach: Bn,
+  element: Hi,
+  empty: t1,
+  ensure_array_like: Zo,
+  group_outros: n1,
+  init: i1,
+  insert: Tn,
+  listen: ns,
+  prevent_default: l1,
+  run_all: s1,
+  safe_not_equal: o1,
+  set_data: r1,
+  set_style: jt,
+  space: is,
+  text: a1,
+  toggle_class: xe,
+  transition_in: Bl,
+  transition_out: Yo
+} = window.__gradio__svelte__internal, { createEventDispatcher: u1 } = window.__gradio__svelte__internal;
+function Jo(t, e, n) {
+  const i = t.slice();
+  return i[24] = e[n], i;
+}
+function Qo(t) {
+  let e, n, i, l, s, o = Zo(
+    /*filtered_indices*/
+    t[1]
+  ), r = [];
+  for (let a = 0; a < o.length; a += 1)
+    r[a] = Ko(Jo(t, o, a));
+  return {
+    c() {
+      e = Hi("ul");
+      for (let a = 0; a < r.length; a += 1)
+        r[a].c();
+      Ie(e, "class", "options svelte-yuohum"), Ie(e, "role", "listbox"), jt(
+        e,
+        "bottom",
+        /*bottom*/
+        t[9]
+      ), jt(e, "max-height", `calc(${/*max_height*/
+      t[10]}px - var(--window-padding))`), jt(
+        e,
+        "width",
+        /*input_width*/
+        t[8] + "px"
+      );
+    },
+    m(a, u) {
+      Tn(a, e, u);
+      for (let f = 0; f < r.length; f += 1)
+        r[f] && r[f].m(e, null);
+      t[20](e), i = !0, l || (s = ns(e, "mousedown", l1(
+        /*mousedown_handler*/
+        t[19]
+      )), l = !0);
+    },
+    p(a, u) {
+      if (u & /*filtered_indices, choices, selected_indices, active_index*/
+      51) {
+        o = Zo(
+          /*filtered_indices*/
+          a[1]
+        );
+        let f;
+        for (f = 0; f < o.length; f += 1) {
+          const _ = Jo(a, o, f);
+          r[f] ? r[f].p(_, u) : (r[f] = Ko(_), r[f].c(), r[f].m(e, null));
+        }
+        for (; f < r.length; f += 1)
+          r[f].d(1);
+        r.length = o.length;
+      }
+      u & /*bottom*/
+      512 && jt(
+        e,
+        "bottom",
+        /*bottom*/
+        a[9]
+      ), u & /*max_height*/
+      1024 && jt(e, "max-height", `calc(${/*max_height*/
+      a[10]}px - var(--window-padding))`), u & /*input_width*/
+      256 && jt(
+        e,
+        "width",
+        /*input_width*/
+        a[8] + "px"
+      );
+    },
+    i(a) {
+      i || (a && Ra(() => {
+        i && (n || (n = Wo(e, xs, { duration: 200, y: 5 }, !0)), n.run(1));
+      }), i = !0);
+    },
+    o(a) {
+      a && (n || (n = Wo(e, xs, { duration: 200, y: 5 }, !1)), n.run(0)), i = !1;
+    },
+    d(a) {
+      a && Bn(e), e1(r, a), t[20](null), a && n && n.end(), l = !1, s();
+    }
+  };
+}
+function Ko(t) {
+  let e, n, i, l = (
+    /*choices*/
+    t[0][
+      /*index*/
+      t[24]
+    ][0] + ""
+  ), s, o, r, a, u;
+  return {
+    c() {
+      e = Hi("li"), n = Hi("span"), n.textContent = "✓", i = is(), s = a1(l), o = is(), Ie(n, "class", "inner-item svelte-yuohum"), xe(n, "hide", !/*selected_indices*/
+      t[4].includes(
+        /*index*/
+        t[24]
+      )), Ie(e, "class", "item svelte-yuohum"), Ie(e, "data-index", r = /*index*/
+      t[24]), Ie(e, "aria-label", a = /*choices*/
+      t[0][
+        /*index*/
+        t[24]
+      ][0]), Ie(e, "data-testid", "dropdown-option"), Ie(e, "role", "option"), Ie(e, "aria-selected", u = /*selected_indices*/
+      t[4].includes(
+        /*index*/
+        t[24]
+      )), xe(
+        e,
+        "selected",
+        /*selected_indices*/
+        t[4].includes(
+          /*index*/
+          t[24]
+        )
+      ), xe(
+        e,
+        "active",
+        /*index*/
+        t[24] === /*active_index*/
+        t[5]
+      ), xe(
+        e,
+        "bg-gray-100",
+        /*index*/
+        t[24] === /*active_index*/
+        t[5]
+      ), xe(
+        e,
+        "dark:bg-gray-600",
+        /*index*/
+        t[24] === /*active_index*/
+        t[5]
+      );
+    },
+    m(f, _) {
+      Tn(f, e, _), ei(e, n), ei(e, i), ei(e, s), ei(e, o);
+    },
+    p(f, _) {
+      _ & /*selected_indices, filtered_indices*/
+      18 && xe(n, "hide", !/*selected_indices*/
+      f[4].includes(
+        /*index*/
+        f[24]
+      )), _ & /*choices, filtered_indices*/
+      3 && l !== (l = /*choices*/
+      f[0][
+        /*index*/
+        f[24]
+      ][0] + "") && r1(s, l), _ & /*filtered_indices*/
+      2 && r !== (r = /*index*/
+      f[24]) && Ie(e, "data-index", r), _ & /*choices, filtered_indices*/
+      3 && a !== (a = /*choices*/
+      f[0][
+        /*index*/
+        f[24]
+      ][0]) && Ie(e, "aria-label", a), _ & /*selected_indices, filtered_indices*/
+      18 && u !== (u = /*selected_indices*/
+      f[4].includes(
+        /*index*/
+        f[24]
+      )) && Ie(e, "aria-selected", u), _ & /*selected_indices, filtered_indices*/
+      18 && xe(
+        e,
+        "selected",
+        /*selected_indices*/
+        f[4].includes(
+          /*index*/
+          f[24]
+        )
+      ), _ & /*filtered_indices, active_index*/
+      34 && xe(
+        e,
+        "active",
+        /*index*/
+        f[24] === /*active_index*/
+        f[5]
+      ), _ & /*filtered_indices, active_index*/
+      34 && xe(
+        e,
+        "bg-gray-100",
+        /*index*/
+        f[24] === /*active_index*/
+        f[5]
+      ), _ & /*filtered_indices, active_index*/
+      34 && xe(
+        e,
+        "dark:bg-gray-600",
+        /*index*/
+        f[24] === /*active_index*/
+        f[5]
+      );
+    },
+    d(f) {
+      f && Bn(e);
+    }
+  };
+}
+function f1(t) {
+  let e, n, i, l, s;
+  Ra(
+    /*onwindowresize*/
+    t[17]
+  );
+  let o = (
+    /*show_options*/
+    t[2] && !/*disabled*/
+    t[3] && Qo(t)
+  );
+  return {
+    c() {
+      e = Hi("div"), n = is(), o && o.c(), i = t1(), Ie(e, "class", "reference");
+    },
+    m(r, a) {
+      Tn(r, e, a), t[18](e), Tn(r, n, a), o && o.m(r, a), Tn(r, i, a), l || (s = [
+        ns(
+          window,
+          "scroll",
+          /*scroll_listener*/
+          t[12]
+        ),
+        ns(
+          window,
+          "resize",
+          /*onwindowresize*/
+          t[17]
+        )
+      ], l = !0);
+    },
+    p(r, [a]) {
+      /*show_options*/
+      r[2] && !/*disabled*/
+      r[3] ? o ? (o.p(r, a), a & /*show_options, disabled*/
+      12 && Bl(o, 1)) : (o = Qo(r), o.c(), Bl(o, 1), o.m(i.parentNode, i)) : o && (n1(), Yo(o, 1, 1, () => {
+        o = null;
+      }), $m());
+    },
+    i(r) {
+      Bl(o);
+    },
+    o(r) {
+      Yo(o);
+    },
+    d(r) {
+      r && (Bn(e), Bn(n), Bn(i)), t[18](null), o && o.d(r), l = !1, s1(s);
+    }
+  };
+}
+function ti(t) {
+  let e, n = t[0], i = 1;
+  for (; i < t.length; ) {
+    const l = t[i], s = t[i + 1];
+    if (i += 2, (l === "optionalAccess" || l === "optionalCall") && n == null)
+      return;
+    l === "access" || l === "optionalAccess" ? (e = n, n = s(n)) : (l === "call" || l === "optionalCall") && (n = s((...o) => n.call(e, ...o)), e = void 0);
+  }
+  return n;
+}
+function c1(t, e, n) {
+  let { choices: i } = e, { filtered_indices: l } = e, { show_options: s = !1 } = e, { disabled: o = !1 } = e, { selected_indices: r = [] } = e, { active_index: a = null } = e, u, f, _, h, c, d, m, b, p;
+  function y() {
+    const { top: B, bottom: L } = c.getBoundingClientRect();
+    n(14, u = B), n(15, f = p - L);
+  }
+  let w = null;
+  function C() {
+    s && (w !== null && clearTimeout(w), w = setTimeout(
+      () => {
+        y(), w = null;
+      },
+      10
+    ));
+  }
+  const P = u1();
+  function E() {
+    n(11, p = window.innerHeight);
+  }
+  function N(B) {
+    Xo[B ? "unshift" : "push"](() => {
+      c = B, n(6, c);
+    });
+  }
+  const v = (B) => P("change", B);
+  function A(B) {
+    Xo[B ? "unshift" : "push"](() => {
+      d = B, n(7, d);
+    });
+  }
+  return t.$$set = (B) => {
+    "choices" in B && n(0, i = B.choices), "filtered_indices" in B && n(1, l = B.filtered_indices), "show_options" in B && n(2, s = B.show_options), "disabled" in B && n(3, o = B.disabled), "selected_indices" in B && n(4, r = B.selected_indices), "active_index" in B && n(5, a = B.active_index);
+  }, t.$$.update = () => {
+    if (t.$$.dirty & /*show_options, refElement, listElement, selected_indices, distance_from_bottom, distance_from_top, input_height*/
+    114900) {
+      if (s && c) {
+        if (d && r.length > 0) {
+          let L = d.querySelectorAll("li");
+          for (const x of Array.from(L))
+            if (x.getAttribute("data-index") === r[0].toString()) {
+              ti([
+                d,
+                "optionalAccess",
+                (J) => J.scrollTo,
+                "optionalCall",
+                (J) => J(0, x.offsetTop)
+              ]);
+              break;
+            }
+        }
+        y();
+        const B = ti([
+          c,
+          "access",
+          (L) => L.parentElement,
+          "optionalAccess",
+          (L) => L.getBoundingClientRect,
+          "call",
+          (L) => L()
+        ]);
+        n(16, _ = ti([B, "optionalAccess", (L) => L.height]) || 0), n(8, h = ti([B, "optionalAccess", (L) => L.width]) || 0);
+      }
+      f > u ? (n(10, b = f), n(9, m = null)) : (n(9, m = `${f + _}px`), n(10, b = u - _));
+    }
+  }, [
+    i,
+    l,
+    s,
+    o,
+    r,
+    a,
+    c,
+    d,
+    h,
+    m,
+    b,
+    p,
+    C,
+    P,
+    u,
+    f,
+    _,
+    E,
+    N,
+    v,
+    A
+  ];
+}
+class _1 extends Km {
+  constructor(e) {
+    super(), i1(this, e, c1, f1, o1, {
+      choices: 0,
+      filtered_indices: 1,
+      show_options: 2,
+      disabled: 3,
+      selected_indices: 4,
+      active_index: 5
+    });
+  }
+}
+function h1(t, e) {
+  return (t % e + e) % e;
+}
+function $o(t, e) {
+  return t.reduce((n, i, l) => ((!e || i[0].toLowerCase().includes(e.toLowerCase())) && n.push(l), n), []);
+}
+function d1(t, e, n) {
+  t("change", e), n || t("input");
+}
+function m1(t, e, n) {
+  if (t.key === "Escape")
+    return [!1, e];
+  if ((t.key === "ArrowDown" || t.key === "ArrowUp") && n.length >= 0)
+    if (e === null)
+      e = t.key === "ArrowDown" ? n[0] : n[n.length - 1];
+    else {
+      const i = n.indexOf(e), l = t.key === "ArrowUp" ? -1 : 1;
+      e = n[h1(i + l, n.length)];
+    }
+  return [!0, e];
+}
+const {
+  SvelteComponent: g1,
+  append: vt,
+  attr: Le,
+  binding_callbacks: b1,
+  check_outros: p1,
+  create_component: ls,
+  destroy_component: ss,
+  detach: ps,
+  element: Vt,
+  group_outros: w1,
+  init: v1,
+  insert: ws,
+  listen: pn,
+  mount_component: os,
+  run_all: y1,
+  safe_not_equal: E1,
+  set_data: k1,
+  set_input_value: er,
+  space: Tl,
+  text: S1,
+  toggle_class: Gt,
+  transition_in: Xt,
+  transition_out: Cn
+} = window.__gradio__svelte__internal, { onMount: C1 } = window.__gradio__svelte__internal, { createEventDispatcher: A1, afterUpdate: B1 } = window.__gradio__svelte__internal;
+function T1(t) {
+  let e;
+  return {
+    c() {
+      e = S1(
+        /*label*/
+        t[0]
+      );
+    },
+    m(n, i) {
+      ws(n, e, i);
+    },
+    p(n, i) {
+      i[0] & /*label*/
+      1 && k1(
+        e,
+        /*label*/
+        n[0]
+      );
+    },
+    d(n) {
+      n && ps(e);
+    }
+  };
+}
+function tr(t) {
+  let e, n, i;
+  return n = new hc({}), {
+    c() {
+      e = Vt("div"), ls(n.$$.fragment), Le(e, "class", "icon-wrap svelte-1m1zvyj");
+    },
+    m(l, s) {
+      ws(l, e, s), os(n, e, null), i = !0;
+    },
+    i(l) {
+      i || (Xt(n.$$.fragment, l), i = !0);
+    },
+    o(l) {
+      Cn(n.$$.fragment, l), i = !1;
+    },
+    d(l) {
+      l && ps(e), ss(n);
+    }
+  };
+}
+function H1(t) {
+  let e, n, i, l, s, o, r, a, u, f, _, h, c, d;
+  n = new vr({
+    props: {
+      show_label: (
+        /*show_label*/
+        t[4]
+      ),
+      info: (
+        /*info*/
+        t[1]
+      ),
+      $$slots: { default: [T1] },
+      $$scope: { ctx: t }
+    }
+  });
+  let m = !/*disabled*/
+  t[3] && tr();
+  return _ = new _1({
+    props: {
+      show_options: (
+        /*show_options*/
+        t[12]
+      ),
+      choices: (
+        /*choices*/
+        t[2]
+      ),
+      filtered_indices: (
+        /*filtered_indices*/
+        t[10]
+      ),
+      disabled: (
+        /*disabled*/
+        t[3]
+      ),
+      selected_indices: (
+        /*selected_index*/
+        t[11] === null ? [] : [
+          /*selected_index*/
+          t[11]
+        ]
+      ),
+      active_index: (
+        /*active_index*/
+        t[14]
+      )
+    }
+  }), _.$on(
+    "change",
+    /*handle_option_selected*/
+    t[16]
+  ), {
+    c() {
+      e = Vt("div"), ls(n.$$.fragment), i = Tl(), l = Vt("div"), s = Vt("div"), o = Vt("div"), r = Vt("input"), u = Tl(), m && m.c(), f = Tl(), ls(_.$$.fragment), Le(r, "role", "listbox"), Le(r, "aria-controls", "dropdown-options"), Le(
+        r,
+        "aria-expanded",
+        /*show_options*/
+        t[12]
+      ), Le(
+        r,
+        "aria-label",
+        /*label*/
+        t[0]
+      ), Le(r, "class", "border-none svelte-1m1zvyj"), r.disabled = /*disabled*/
+      t[3], Le(r, "autocomplete", "off"), r.readOnly = a = !/*filterable*/
+      t[7], Gt(r, "subdued", !/*choices_names*/
+      t[13].includes(
+        /*input_text*/
+        t[9]
+      ) && !/*allow_custom_value*/
+      t[6]), Le(o, "class", "secondary-wrap svelte-1m1zvyj"), Le(s, "class", "wrap-inner svelte-1m1zvyj"), Gt(
+        s,
+        "show_options",
+        /*show_options*/
+        t[12]
+      ), Le(l, "class", "wrap svelte-1m1zvyj"), Le(e, "class", "svelte-1m1zvyj"), Gt(
+        e,
+        "container",
+        /*container*/
+        t[5]
+      );
+    },
+    m(b, p) {
+      ws(b, e, p), os(n, e, null), vt(e, i), vt(e, l), vt(l, s), vt(s, o), vt(o, r), er(
+        r,
+        /*input_text*/
+        t[9]
+      ), t[29](r), vt(o, u), m && m.m(o, null), vt(l, f), os(_, l, null), h = !0, c || (d = [
+        pn(
+          r,
+          "input",
+          /*input_input_handler*/
+          t[28]
+        ),
+        pn(
+          r,
+          "keydown",
+          /*handle_key_down*/
+          t[19]
+        ),
+        pn(
+          r,
+          "keyup",
+          /*keyup_handler*/
+          t[30]
+        ),
+        pn(
+          r,
+          "blur",
+          /*handle_blur*/
+          t[18]
+        ),
+        pn(
+          r,
+          "focus",
+          /*handle_focus*/
+          t[17]
+        )
+      ], c = !0);
+    },
+    p(b, p) {
+      const y = {};
+      p[0] & /*show_label*/
+      16 && (y.show_label = /*show_label*/
+      b[4]), p[0] & /*info*/
+      2 && (y.info = /*info*/
+      b[1]), p[0] & /*label*/
+      1 | p[1] & /*$$scope*/
+      4 && (y.$$scope = { dirty: p, ctx: b }), n.$set(y), (!h || p[0] & /*show_options*/
+      4096) && Le(
+        r,
+        "aria-expanded",
+        /*show_options*/
+        b[12]
+      ), (!h || p[0] & /*label*/
+      1) && Le(
+        r,
+        "aria-label",
+        /*label*/
+        b[0]
+      ), (!h || p[0] & /*disabled*/
+      8) && (r.disabled = /*disabled*/
+      b[3]), (!h || p[0] & /*filterable*/
+      128 && a !== (a = !/*filterable*/
+      b[7])) && (r.readOnly = a), p[0] & /*input_text*/
+      512 && r.value !== /*input_text*/
+      b[9] && er(
+        r,
+        /*input_text*/
+        b[9]
+      ), (!h || p[0] & /*choices_names, input_text, allow_custom_value*/
+      8768) && Gt(r, "subdued", !/*choices_names*/
+      b[13].includes(
+        /*input_text*/
+        b[9]
+      ) && !/*allow_custom_value*/
+      b[6]), /*disabled*/
+      b[3] ? m && (w1(), Cn(m, 1, 1, () => {
+        m = null;
+      }), p1()) : m ? p[0] & /*disabled*/
+      8 && Xt(m, 1) : (m = tr(), m.c(), Xt(m, 1), m.m(o, null)), (!h || p[0] & /*show_options*/
+      4096) && Gt(
+        s,
+        "show_options",
+        /*show_options*/
+        b[12]
+      );
+      const w = {};
+      p[0] & /*show_options*/
+      4096 && (w.show_options = /*show_options*/
+      b[12]), p[0] & /*choices*/
+      4 && (w.choices = /*choices*/
+      b[2]), p[0] & /*filtered_indices*/
+      1024 && (w.filtered_indices = /*filtered_indices*/
+      b[10]), p[0] & /*disabled*/
+      8 && (w.disabled = /*disabled*/
+      b[3]), p[0] & /*selected_index*/
+      2048 && (w.selected_indices = /*selected_index*/
+      b[11] === null ? [] : [
+        /*selected_index*/
+        b[11]
+      ]), p[0] & /*active_index*/
+      16384 && (w.active_index = /*active_index*/
+      b[14]), _.$set(w), (!h || p[0] & /*container*/
+      32) && Gt(
+        e,
+        "container",
+        /*container*/
+        b[5]
+      );
+    },
+    i(b) {
+      h || (Xt(n.$$.fragment, b), Xt(m), Xt(_.$$.fragment, b), h = !0);
+    },
+    o(b) {
+      Cn(n.$$.fragment, b), Cn(m), Cn(_.$$.fragment, b), h = !1;
+    },
+    d(b) {
+      b && ps(e), ss(n), t[29](null), m && m.d(), ss(_), c = !1, y1(d);
+    }
+  };
+}
+function P1(t, e, n) {
+  let { label: i } = e, { info: l = void 0 } = e, { value: s = [] } = e, o = [], { value_is_output: r = !1 } = e, { choices: a } = e, u, { disabled: f = !1 } = e, { show_label: _ } = e, { container: h = !0 } = e, { allow_custom_value: c = !1 } = e, { filterable: d = !0 } = e, m, b = !1, p, y, w = "", C = "", P = !1, E = [], N = null, v = null, A;
+  const B = A1();
+  s ? (A = a.map((S) => S[1]).indexOf(s), v = A, v === -1 ? (o = s, v = null) : ([w, o] = a[v], C = w), x()) : a.length > 0 && (A = 0, v = 0, [w, s] = a[v], o = s, C = w);
+  function L() {
+    n(13, p = a.map((S) => S[0])), n(24, y = a.map((S) => S[1]));
+  }
+  function x() {
+    L(), s === void 0 || Array.isArray(s) && s.length === 0 ? (n(9, w = ""), n(11, v = null)) : y.includes(s) ? (n(9, w = p[y.indexOf(s)]), n(11, v = y.indexOf(s))) : c ? (n(9, w = s), n(11, v = null)) : (n(9, w = ""), n(11, v = null)), n(27, A = v);
+  }
+  function J(S) {
+    if (n(11, v = parseInt(S.detail.target.dataset.index)), isNaN(v)) {
+      n(11, v = null);
+      return;
+    }
+    n(12, b = !1), n(14, N = null), m.blur();
+  }
+  function ce(S) {
+    n(10, E = a.map((k, I) => I)), n(12, b = !0), B("focus");
+  }
+  function te() {
+    c ? n(20, s = w) : n(9, w = p[y.indexOf(s)]), n(12, b = !1), n(14, N = null), B("blur");
+  }
+  function ke(S) {
+    n(12, [b, N] = m1(S, N, E), b, (n(14, N), n(2, a), n(23, u), n(6, c), n(9, w), n(10, E), n(8, m), n(25, C), n(11, v), n(27, A), n(26, P), n(24, y))), S.key === "Enter" && (N !== null ? (n(11, v = N), n(12, b = !1), m.blur(), n(14, N = null)) : p.includes(w) ? (n(11, v = p.indexOf(w)), n(12, b = !1), n(14, N = null), m.blur()) : c && (n(20, s = w), n(11, v = null), n(12, b = !1), n(14, N = null), m.blur()), B("enter", s));
+  }
+  B1(() => {
+    n(21, r = !1), n(26, P = !0);
+  }), C1(() => {
+    m.focus();
+  });
+  function ye() {
+    w = this.value, n(9, w), n(11, v), n(27, A), n(26, P), n(2, a), n(24, y);
+  }
+  function me(S) {
+    b1[S ? "unshift" : "push"](() => {
+      m = S, n(8, m);
+    });
+  }
+  const _e = (S) => B("key_up", { key: S.key, input_value: w });
+  return t.$$set = (S) => {
+    "label" in S && n(0, i = S.label), "info" in S && n(1, l = S.info), "value" in S && n(20, s = S.value), "value_is_output" in S && n(21, r = S.value_is_output), "choices" in S && n(2, a = S.choices), "disabled" in S && n(3, f = S.disabled), "show_label" in S && n(4, _ = S.show_label), "container" in S && n(5, h = S.container), "allow_custom_value" in S && n(6, c = S.allow_custom_value), "filterable" in S && n(7, d = S.filterable);
+  }, t.$$.update = () => {
+    t.$$.dirty[0] & /*selected_index, old_selected_index, initialized, choices, choices_values*/
+    218105860 && v !== A && v !== null && P && (n(9, [w, s] = a[v], w, (n(20, s), n(11, v), n(27, A), n(26, P), n(2, a), n(24, y))), n(27, A = v), B("select", {
+      index: v,
+      value: y[v],
+      selected: !0
+    })), t.$$.dirty[0] & /*value, old_value, value_is_output*/
+    7340032 && s != o && (x(), d1(B, s, r), n(22, o = s)), t.$$.dirty[0] & /*choices*/
+    4 && L(), t.$$.dirty[0] & /*choices, old_choices, allow_custom_value, input_text, filtered_indices, filter_input*/
+    8390468 && a !== u && (c || x(), n(23, u = a), n(10, E = $o(a, w)), !c && E.length > 0 && n(14, N = E[0]), m == document.activeElement && n(12, b = !0)), t.$$.dirty[0] & /*input_text, old_input_text, choices, allow_custom_value, filtered_indices*/
+    33556036 && w !== C && (n(10, E = $o(a, w)), n(25, C = w), !c && E.length > 0 && n(14, N = E[0]));
+  }, [
+    i,
+    l,
+    a,
+    f,
+    _,
+    h,
+    c,
+    d,
+    m,
+    w,
+    E,
+    v,
+    b,
+    p,
+    N,
+    B,
+    J,
+    ce,
+    te,
+    ke,
+    s,
+    r,
+    o,
+    u,
+    y,
+    C,
+    P,
+    A,
+    ye,
+    me,
+    _e
+  ];
+}
+class N1 extends g1 {
+  constructor(e) {
+    super(), v1(
+      this,
+      e,
+      P1,
+      H1,
+      E1,
+      {
+        label: 0,
+        info: 1,
+        value: 20,
+        value_is_output: 21,
+        choices: 2,
+        disabled: 3,
+        show_label: 4,
+        container: 5,
+        allow_custom_value: 6,
+        filterable: 7
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+const {
+  SvelteComponent: L1,
+  append: Je,
+  attr: ni,
+  create_component: ii,
+  destroy_component: li,
+  detach: vs,
+  element: yt,
+  init: I1,
+  insert: ys,
+  mount_component: si,
+  safe_not_equal: M1,
+  set_style: oi,
+  space: Hl,
+  text: Ua,
+  transition_in: ri,
+  transition_out: ai
+} = window.__gradio__svelte__internal, { createEventDispatcher: O1 } = window.__gradio__svelte__internal, { onMount: D1, onDestroy: R1 } = window.__gradio__svelte__internal;
+function U1(t) {
+  let e;
+  return {
+    c() {
+      e = Ua("Cancel");
+    },
+    m(n, i) {
+      ys(n, e, i);
+    },
+    d(n) {
+      n && vs(e);
+    }
+  };
+}
+function F1(t) {
+  let e;
+  return {
+    c() {
+      e = Ua("OK");
+    },
+    m(n, i) {
+      ys(n, e, i);
+    },
+    d(n) {
+      n && vs(e);
+    }
+  };
+}
+function q1(t) {
+  let e, n, i, l, s, o, r, a, u, f, _, h, c, d, m;
+  return s = new N1({
+    props: {
+      value: (
+        /*label*/
+        t[0]
+      ),
+      label: "Label",
+      choices: (
+        /*choices*/
+        t[2]
+      ),
+      show_label: !1,
+      allow_custom_value: !0
+    }
+  }), s.$on(
+    "change",
+    /*onDropDownChange*/
+    t[4]
+  ), s.$on(
+    "enter",
+    /*onDropDownEnter*/
+    t[6]
+  ), a = new Fm({
+    props: {
+      value: (
+        /*color*/
+        t[1]
+      ),
+      label: "Color",
+      show_label: !1
+    }
+  }), a.$on(
+    "change",
+    /*onColorChange*/
+    t[5]
+  ), _ = new Vo({
+    props: {
+      $$slots: { default: [U1] },
+      $$scope: { ctx: t }
+    }
+  }), _.$on(
+    "click",
+    /*click_handler*/
+    t[8]
+  ), d = new Vo({
+    props: {
+      variant: "primary",
+      $$slots: { default: [F1] },
+      $$scope: { ctx: t }
+    }
+  }), d.$on(
+    "click",
+    /*click_handler_1*/
+    t[9]
+  ), {
+    c() {
+      e = yt("div"), n = yt("div"), i = yt("span"), l = yt("div"), ii(s.$$.fragment), o = Hl(), r = yt("div"), ii(a.$$.fragment), u = Hl(), f = yt("div"), ii(_.$$.fragment), h = Hl(), c = yt("div"), ii(d.$$.fragment), oi(l, "margin-right", "10px"), oi(r, "margin-right", "40px"), oi(r, "margin-bottom", "8px"), oi(f, "margin-right", "8px"), ni(i, "class", "model-content svelte-hkn2q1"), ni(n, "class", "modal-container svelte-hkn2q1"), ni(e, "class", "modal svelte-hkn2q1"), ni(e, "id", "model-box-edit");
+    },
+    m(b, p) {
+      ys(b, e, p), Je(e, n), Je(n, i), Je(i, l), si(s, l, null), Je(i, o), Je(i, r), si(a, r, null), Je(i, u), Je(i, f), si(_, f, null), Je(i, h), Je(i, c), si(d, c, null), m = !0;
+    },
+    p(b, [p]) {
+      const y = {};
+      p & /*label*/
+      1 && (y.value = /*label*/
+      b[0]), p & /*choices*/
+      4 && (y.choices = /*choices*/
+      b[2]), s.$set(y);
+      const w = {};
+      p & /*color*/
+      2 && (w.value = /*color*/
+      b[1]), a.$set(w);
+      const C = {};
+      p & /*$$scope*/
+      4096 && (C.$$scope = { dirty: p, ctx: b }), _.$set(C);
+      const P = {};
+      p & /*$$scope*/
+      4096 && (P.$$scope = { dirty: p, ctx: b }), d.$set(P);
+    },
+    i(b) {
+      m || (ri(s.$$.fragment, b), ri(a.$$.fragment, b), ri(_.$$.fragment, b), ri(d.$$.fragment, b), m = !0);
+    },
+    o(b) {
+      ai(s.$$.fragment, b), ai(a.$$.fragment, b), ai(_.$$.fragment, b), ai(d.$$.fragment, b), m = !1;
+    },
+    d(b) {
+      b && vs(e), li(s), li(a), li(_), li(d);
+    }
+  };
+}
+function z1(t, e, n) {
+  let { label: i = "" } = e, { choices: l = [] } = e, { choicesColors: s = [] } = e, { color: o = "" } = e;
+  const r = O1();
+  function a(m) {
+    r("change", { label: i, color: o, ok: m });
+  }
+  function u(m) {
+    const { detail: b } = m;
+    let p = b;
+    Number.isInteger(p) ? (Array.isArray(s) && p < s.length && n(1, o = s[p]), Array.isArray(l) && p < l.length && n(0, i = l[p][0])) : n(0, i = p);
+  }
+  function f(m) {
+    const { detail: b } = m;
+    n(1, o = b);
+  }
+  function _(m) {
+    u(m), a(!0);
+  }
+  function h(m) {
+    switch (m.key) {
+      case "Enter":
+        a(!0);
+        break;
+    }
+  }
+  D1(() => {
+    document.addEventListener("keydown", h);
+  }), R1(() => {
+    document.removeEventListener("keydown", h);
+  });
+  const c = () => a(!1), d = () => a(!0);
+  return t.$$set = (m) => {
+    "label" in m && n(0, i = m.label), "choices" in m && n(2, l = m.choices), "choicesColors" in m && n(7, s = m.choicesColors), "color" in m && n(1, o = m.color);
+  }, [
+    i,
+    o,
+    l,
+    a,
+    u,
+    f,
+    _,
+    s,
+    c,
+    d
+  ];
+}
+class Fa extends L1 {
+  constructor(e) {
+    super(), I1(this, e, z1, q1, M1, {
+      label: 0,
+      choices: 2,
+      choicesColors: 7,
+      color: 1
+    });
+  }
+}
+const Ve = (t, e, n) => Math.min(Math.max(t, e), n);
+function Pl(t, e) {
+  if (t.startsWith("rgba"))
+    return t.replace(/[\d.]+$/, e.toString());
+  const n = t.match(/\d+/g);
+  if (!n || n.length !== 3)
+    return `rgba(50, 50, 50, ${e})`;
+  const [i, l, s] = n;
+  return `rgba(${i}, ${l}, ${s}, ${e})`;
+}
+class Nl {
+  constructor(e, n, i, l, s, o, r, a, u, f, _ = "rgb(255, 255, 255)", h = 0.5, c = 25, d = 1) {
+    this.stopDrag = () => {
+      this.isDragging = !1, document.removeEventListener("mousemove", this.handleDrag), document.removeEventListener("mouseup", this.stopDrag);
+    }, this.handleDrag = (m) => {
+      if (this.isDragging) {
+        let b = m.clientX - this.offsetMouseX - this.xmin, p = m.clientY - this.offsetMouseY - this.ymin;
+        const y = this.canvasXmax - this.canvasXmin, w = this.canvasYmax - this.canvasYmin;
+        b = Ve(b, -this.xmin, y - this.xmax), p = Ve(p, -this.ymin, w - this.ymax), this.xmin += b, this.ymin += p, this.xmax += b, this.ymax += p, this.updateHandles(), this.renderCallBack();
+      }
+    }, this.handleResize = (m) => {
+      if (this.isResizing) {
+        const b = m.clientX, p = m.clientY, y = b - this.resizeHandles[this.resizingHandleIndex].xmin - this.offsetMouseX, w = p - this.resizeHandles[this.resizingHandleIndex].ymin - this.offsetMouseY, C = this.canvasXmax - this.canvasXmin, P = this.canvasYmax - this.canvasYmin;
+        switch (this.resizingHandleIndex) {
+          case 0:
+            this.xmin += y, this.ymin += w, this.xmin = Ve(this.xmin, 0, this.xmax - this.minSize), this.ymin = Ve(this.ymin, 0, this.ymax - this.minSize);
+            break;
+          case 1:
+            this.xmax += y, this.ymin += w, this.xmax = Ve(this.xmax, this.xmin + this.minSize, C), this.ymin = Ve(this.ymin, 0, this.ymax - this.minSize);
+            break;
+          case 2:
+            this.xmax += y, this.ymax += w, this.xmax = Ve(this.xmax, this.xmin + this.minSize, C), this.ymax = Ve(this.ymax, this.ymin + this.minSize, P);
+            break;
+          case 3:
+            this.xmin += y, this.ymax += w, this.xmin = Ve(this.xmin, 0, this.xmax - this.minSize), this.ymax = Ve(this.ymax, this.ymin + this.minSize, P);
+            break;
+        }
+        this.updateHandles(), this.renderCallBack();
+      }
+    }, this.stopResize = () => {
+      this.isResizing = !1, document.removeEventListener("mousemove", this.handleResize), document.removeEventListener("mouseup", this.stopResize);
+    }, this.renderCallBack = e, this.canvasXmin = n, this.canvasYmin = i, this.canvasXmax = l, this.canvasYmax = s, this.scaleFactor = d, this.label = o, this.isDragging = !1, [this.xmin, this.ymin] = this.toBoxCoordinates(r, a), [this.xmax, this.ymax] = this.toBoxCoordinates(u, f), this.isResizing = !1, this.isSelected = !1, this.offsetMouseX = 0, this.offsetMouseY = 0, this.resizeHandleSize = 8, this.updateHandles(), this.resizingHandleIndex = -1, this.minSize = c, this.color = _, this.alpha = h;
+  }
+  toJSON() {
+    return {
+      label: this.label,
+      xmin: this.xmin,
+      ymin: this.ymin,
+      xmax: this.xmax,
+      ymax: this.ymax,
+      color: this.color,
+      scaleFactor: this.scaleFactor
+    };
+  }
+  setSelected(e) {
+    this.isSelected = e;
+  }
+  setScaleFactor(e) {
+    let n = e / this.scaleFactor;
+    this.xmin = Math.round(this.xmin * n), this.ymin = Math.round(this.ymin * n), this.xmax = Math.round(this.xmax * n), this.ymax = Math.round(this.ymax * n), this.updateHandles(), this.scaleFactor = e;
+  }
+  updateHandles() {
+    const e = this.resizeHandleSize / 2;
+    this.resizeHandles = [
+      {
+        xmin: this.xmin - e,
+        ymin: this.ymin - e,
+        xmax: this.xmin + e,
+        ymax: this.ymin + e
+      },
+      {
+        xmin: this.xmax - e,
+        ymin: this.ymin - e,
+        xmax: this.xmax + e,
+        ymax: this.ymin + e
+      },
+      {
+        xmin: this.xmax - e,
+        ymin: this.ymax - e,
+        xmax: this.xmax + e,
+        ymax: this.ymax + e
+      },
+      {
+        xmin: this.xmin - e,
+        ymin: this.ymax - e,
+        xmax: this.xmin + e,
+        ymax: this.ymax + e
+      }
+    ];
+  }
+  getWidth() {
+    return this.xmax - this.xmin;
+  }
+  getHeight() {
+    return this.ymax - this.ymin;
+  }
+  toCanvasCoordinates(e, n) {
+    return e = e + this.canvasXmin, n = n + this.canvasYmin, [e, n];
+  }
+  toBoxCoordinates(e, n) {
+    return e = e - this.canvasXmin, n = n - this.canvasYmin, [e, n];
+  }
+  render(e) {
+    let n, i;
+    if (e.beginPath(), [n, i] = this.toCanvasCoordinates(this.xmin, this.ymin), e.rect(n, i, this.getWidth(), this.getHeight()), e.fillStyle = Pl(this.color, this.alpha), e.fill(), this.isSelected ? e.lineWidth = 4 : e.lineWidth = 2, e.strokeStyle = Pl(this.color, 1), e.stroke(), e.closePath(), this.label !== null && this.label.trim() !== "") {
+      this.isSelected ? e.font = "bold 14px Arial" : e.font = "12px Arial";
+      const l = e.measureText(this.label).width + 10, s = 20;
+      let o = this.xmin, r = this.ymin - s;
+      e.fillStyle = "white", [o, r] = this.toCanvasCoordinates(o, r), e.fillRect(o, r, l, s), e.lineWidth = 1, e.strokeStyle = "black", e.strokeRect(o, r, l, s), e.fillStyle = "black", e.fillText(this.label, o + 5, r + 15);
+    }
+    e.fillStyle = Pl(this.color, 1);
+    for (const l of this.resizeHandles)
+      [n, i] = this.toCanvasCoordinates(l.xmin, l.ymin), e.fillRect(
+        n,
+        i,
+        l.xmax - l.xmin,
+        l.ymax - l.ymin
+      );
+  }
+  startDrag(e) {
+    this.isDragging = !0, this.offsetMouseX = e.clientX - this.xmin, this.offsetMouseY = e.clientY - this.ymin, document.addEventListener("mousemove", this.handleDrag), document.addEventListener("mouseup", this.stopDrag);
+  }
+  isPointInsideBox(e, n) {
+    return [e, n] = this.toBoxCoordinates(e, n), e >= this.xmin && e <= this.xmax && n >= this.ymin && n <= this.ymax;
+  }
+  indexOfPointInsideHandle(e, n) {
+    [e, n] = this.toBoxCoordinates(e, n);
+    for (let i = 0; i < this.resizeHandles.length; i++) {
+      const l = this.resizeHandles[i];
+      if (e >= l.xmin && e <= l.xmax && n >= l.ymin && n <= l.ymax)
+        return this.resizingHandleIndex = i, i;
+    }
+    return -1;
+  }
+  startResize(e, n) {
+    this.resizingHandleIndex = e, this.isResizing = !0, this.offsetMouseX = n.clientX - this.resizeHandles[e].xmin, this.offsetMouseY = n.clientY - this.resizeHandles[e].ymin, document.addEventListener("mousemove", this.handleResize), document.addEventListener("mouseup", this.stopResize);
+  }
+}
+const Xe = [
+  "rgb(255, 168, 77)",
+  "rgb(92, 172, 238)",
+  "rgb(255, 99, 71)",
+  "rgb(118, 238, 118)",
+  "rgb(255, 145, 164)",
+  "rgb(0, 191, 255)",
+  "rgb(255, 218, 185)",
+  "rgb(255, 69, 0)",
+  "rgb(34, 139, 34)",
+  "rgb(255, 240, 245)",
+  "rgb(255, 193, 37)",
+  "rgb(255, 193, 7)",
+  "rgb(255, 250, 138)"
+];
+const {
+  SvelteComponent: j1,
+  append: Wt,
+  attr: At,
+  binding_callbacks: G1,
+  bubble: nr,
+  check_outros: Ll,
+  create_component: Hn,
+  destroy_component: Pn,
+  detach: Zt,
+  element: tn,
+  empty: x1,
+  group_outros: Il,
+  init: V1,
+  insert: Yt,
+  listen: rt,
+  mount_component: Nn,
+  noop: X1,
+  run_all: qa,
+  safe_not_equal: W1,
+  space: Ln,
+  transition_in: Ce,
+  transition_out: je
+} = window.__gradio__svelte__internal, { onMount: Z1, onDestroy: Y1, createEventDispatcher: J1 } = window.__gradio__svelte__internal;
+function ir(t) {
+  let e, n, i, l, s, o, r, a, u, f, _, h;
+  return i = new ym({}), o = new yc({}), u = new kr({}), {
+    c() {
+      e = tn("span"), n = tn("button"), Hn(i.$$.fragment), l = Ln(), s = tn("button"), Hn(o.$$.fragment), r = Ln(), a = tn("button"), Hn(u.$$.fragment), At(n, "class", "icon svelte-182gnnj"), At(s, "class", "icon svelte-182gnnj"), At(a, "class", "icon svelte-182gnnj"), At(e, "class", "canvas-control svelte-182gnnj");
+    },
+    m(c, d) {
+      Yt(c, e, d), Wt(e, n), Nn(i, n, null), Wt(e, l), Wt(e, s), Nn(o, s, null), Wt(e, r), Wt(e, a), Nn(u, a, null), f = !0, _ || (h = [
+        rt(
+          n,
+          "click",
+          /*click_handler*/
+          t[22]
+        ),
+        rt(
+          s,
+          "click",
+          /*click_handler_1*/
+          t[23]
+        ),
+        rt(
+          a,
+          "click",
+          /*click_handler_2*/
+          t[24]
+        )
+      ], _ = !0);
+    },
+    p: X1,
+    i(c) {
+      f || (Ce(i.$$.fragment, c), Ce(o.$$.fragment, c), Ce(u.$$.fragment, c), f = !0);
+    },
+    o(c) {
+      je(i.$$.fragment, c), je(o.$$.fragment, c), je(u.$$.fragment, c), f = !1;
+    },
+    d(c) {
+      c && Zt(e), Pn(i), Pn(o), Pn(u), _ = !1, qa(h);
+    }
+  };
+}
+function lr(t) {
+  let e, n;
+  return e = new Fa({
+    props: {
+      choices: (
+        /*choices*/
+        t[2]
+      ),
+      choicesColors: (
+        /*choicesColors*/
+        t[3]
+      ),
+      label: (
+        /*selectedBox*/
+        t[5] >= 0 && /*selectedBox*/
+        t[5] < /*value*/
+        t[0].boxes.length ? (
+          /*value*/
+          t[0].boxes[
+            /*selectedBox*/
+            t[5]
+          ].label
+        ) : ""
+      ),
+      color: (
+        /*selectedBox*/
+        t[5] >= 0 && /*selectedBox*/
+        t[5] < /*value*/
+        t[0].boxes.length ? Dn(
+          /*value*/
+          t[0].boxes[
+            /*selectedBox*/
+            t[5]
+          ].color
+        ) : ""
+      )
+    }
+  }), e.$on(
+    "change",
+    /*onModalEditChange*/
+    t[14]
+  ), e.$on(
+    "enter{onModalEditChange}",
+    /*enter_onModalEditChange_handler*/
+    t[25]
+  ), {
+    c() {
+      Hn(e.$$.fragment);
+    },
+    m(i, l) {
+      Nn(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*choices*/
+      4 && (s.choices = /*choices*/
+      i[2]), l[0] & /*choicesColors*/
+      8 && (s.choicesColors = /*choicesColors*/
+      i[3]), l[0] & /*selectedBox, value*/
+      33 && (s.label = /*selectedBox*/
+      i[5] >= 0 && /*selectedBox*/
+      i[5] < /*value*/
+      i[0].boxes.length ? (
+        /*value*/
+        i[0].boxes[
+          /*selectedBox*/
+          i[5]
+        ].label
+      ) : ""), l[0] & /*selectedBox, value*/
+      33 && (s.color = /*selectedBox*/
+      i[5] >= 0 && /*selectedBox*/
+      i[5] < /*value*/
+      i[0].boxes.length ? Dn(
+        /*value*/
+        i[0].boxes[
+          /*selectedBox*/
+          i[5]
+        ].color
+      ) : ""), e.$set(s);
+    },
+    i(i) {
+      n || (Ce(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      je(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Pn(e, i);
+    }
+  };
+}
+function sr(t) {
+  let e, n;
+  return e = new Fa({
+    props: {
+      choices: (
+        /*choices*/
+        t[2]
+      ),
+      choicesColors: (
+        /*choicesColors*/
+        t[3]
+      ),
+      color: Array.isArray(
+        /*choicesColors*/
+        t[3]
+      ) && /*choicesColors*/
+      t[3].length > 0 ? (
+        /*choicesColors*/
+        t[3][0]
+      ) : Dn(Xe[
+        /*value*/
+        t[0].boxes.length % Xe.length
+      ])
+    }
+  }), e.$on(
+    "change",
+    /*onModalNewChange*/
+    t[11]
+  ), e.$on(
+    "enter{onModalNewChange}",
+    /*enter_onModalNewChange_handler*/
+    t[26]
+  ), {
+    c() {
+      Hn(e.$$.fragment);
+    },
+    m(i, l) {
+      Nn(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*choices*/
+      4 && (s.choices = /*choices*/
+      i[2]), l[0] & /*choicesColors*/
+      8 && (s.choicesColors = /*choicesColors*/
+      i[3]), l[0] & /*choicesColors, value*/
+      9 && (s.color = Array.isArray(
+        /*choicesColors*/
+        i[3]
+      ) && /*choicesColors*/
+      i[3].length > 0 ? (
+        /*choicesColors*/
+        i[3][0]
+      ) : Dn(Xe[
+        /*value*/
+        i[0].boxes.length % Xe.length
+      ])), e.$set(s);
+    },
+    i(i) {
+      n || (Ce(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      je(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Pn(e, i);
+    }
+  };
+}
+function Q1(t) {
+  let e, n, i, l, s, o, r, a, u, f = (
+    /*interactive*/
+    t[1] && ir(t)
+  ), _ = (
+    /*editModalVisible*/
+    t[6] && lr(t)
+  ), h = (
+    /*newModalVisible*/
+    t[7] && sr(t)
+  );
+  return {
+    c() {
+      e = tn("div"), n = tn("canvas"), i = Ln(), f && f.c(), l = Ln(), _ && _.c(), s = Ln(), h && h.c(), o = x1(), At(n, "class", "canvas-annotator svelte-182gnnj"), At(e, "class", "canvas-container svelte-182gnnj"), At(e, "tabindex", "-1");
+    },
+    m(c, d) {
+      Yt(c, e, d), Wt(e, n), t[21](n), Yt(c, i, d), f && f.m(c, d), Yt(c, l, d), _ && _.m(c, d), Yt(c, s, d), h && h.m(c, d), Yt(c, o, d), r = !0, a || (u = [
+        rt(
+          n,
+          "mousedown",
+          /*handleMouseDown*/
+          t[8]
+        ),
+        rt(
+          n,
+          "mouseup",
+          /*handleMouseUp*/
+          t[9]
+        ),
+        rt(
+          n,
+          "dblclick",
+          /*handleDoubleClick*/
+          t[13]
+        ),
+        rt(
+          e,
+          "focusin",
+          /*handleCanvasFocus*/
+          t[16]
+        ),
+        rt(
+          e,
+          "focusout",
+          /*handleCanvasBlur*/
+          t[17]
+        )
+      ], a = !0);
+    },
+    p(c, d) {
+      /*interactive*/
+      c[1] ? f ? (f.p(c, d), d[0] & /*interactive*/
+      2 && Ce(f, 1)) : (f = ir(c), f.c(), Ce(f, 1), f.m(l.parentNode, l)) : f && (Il(), je(f, 1, 1, () => {
+        f = null;
+      }), Ll()), /*editModalVisible*/
+      c[6] ? _ ? (_.p(c, d), d[0] & /*editModalVisible*/
+      64 && Ce(_, 1)) : (_ = lr(c), _.c(), Ce(_, 1), _.m(s.parentNode, s)) : _ && (Il(), je(_, 1, 1, () => {
+        _ = null;
+      }), Ll()), /*newModalVisible*/
+      c[7] ? h ? (h.p(c, d), d[0] & /*newModalVisible*/
+      128 && Ce(h, 1)) : (h = sr(c), h.c(), Ce(h, 1), h.m(o.parentNode, o)) : h && (Il(), je(h, 1, 1, () => {
+        h = null;
+      }), Ll());
+    },
+    i(c) {
+      r || (Ce(f), Ce(_), Ce(h), r = !0);
+    },
+    o(c) {
+      je(f), je(_), je(h), r = !1;
+    },
+    d(c) {
+      c && (Zt(e), Zt(i), Zt(l), Zt(s), Zt(o)), t[21](null), f && f.d(c), _ && _.d(c), h && h.d(c), a = !1, qa(u);
+    }
+  };
+}
+function or(t) {
+  var e = parseInt(t.slice(1, 3), 16), n = parseInt(t.slice(3, 5), 16), i = parseInt(t.slice(5, 7), 16);
+  return "rgb(" + e + ", " + n + ", " + i + ")";
+}
+function Dn(t) {
+  const e = t.match(/(\d+(\.\d+)?)/g), n = parseInt(e[0]), i = parseInt(e[1]), l = parseInt(e[2]);
+  return "#" + (1 << 24 | n << 16 | i << 8 | l).toString(16).slice(1);
+}
+function K1(t, e, n) {
+  let { imageUrl: i = null } = e, { interactive: l } = e, { boxAlpha: s = 0.5 } = e, { boxMinSize: o = 25 } = e, { value: r } = e, { choices: a = [] } = e, { choicesColors: u = [] } = e, f, _, h = null, c = -1, d = 0, m = 0, b = 0, p = 0, y = 1, w = 0, C = 0, P = !1, E = !1;
+  const N = J1();
+  function v() {
+    if (_) {
+      _.clearRect(0, 0, f.width, f.height), h !== null && _.drawImage(h, d, m, w, C);
+      for (const H of r.boxes.slice().reverse())
+        H.render(_);
+    }
+  }
+  function A(H) {
+    n(5, c = H), r.boxes.forEach((R) => {
+      R.setSelected(!1);
+    }), H >= 0 && H < r.boxes.length && r.boxes[H].setSelected(!0), v();
+  }
+  function B(H) {
+    if (!l)
+      return;
+    const R = f.getBoundingClientRect(), j = H.clientX - R.left, X = H.clientY - R.top;
+    for (const [he, Me] of r.boxes.entries()) {
+      const q = Me.indexOfPointInsideHandle(j, X);
+      if (q >= 0) {
+        A(he), Me.startResize(q, H);
+        return;
+      }
+    }
+    for (const [he, Me] of r.boxes.entries())
+      if (Me.isPointInsideBox(j, X)) {
+        A(he), Me.startDrag(H);
+        return;
+      }
+    A(-1);
+  }
+  function L(H) {
+    N("change");
+  }
+  function x(H) {
+    if (l)
+      switch (H.key) {
+        case "Delete":
+          me();
+          break;
+      }
+  }
+  function J() {
+    n(7, E = !0);
+  }
+  function ce(H) {
+    n(7, E = !1);
+    const { detail: R } = H;
+    let j = R.label, X = R.color;
+    if (R.ok) {
+      X === null || X === "" ? X = Xe[r.boxes.length % Xe.length] : X = or(X);
+      let Me = new Nl(v, d, m, b, p, j, Math.round(f.width / 3), Math.round(f.height / 3), Math.round(2 * f.width / 3), Math.round(2 * f.height / 3), X, s, o, y);
+      n(0, r.boxes = [Me, ...r.boxes], r), v(), N("change");
+    }
+  }
+  function te() {
+    c >= 0 && c < r.boxes.length && n(6, P = !0);
+  }
+  function ke(H) {
+    l && te();
+  }
+  function ye(H) {
+    n(6, P = !1);
+    const { detail: R } = H;
+    let j = R.label, X = R.color;
+    if (R.ok && c >= 0 && c < r.boxes.length) {
+      let Me = r.boxes[c];
+      Me.label = j, Me.color = or(X), v(), N("change");
+    }
+  }
+  function me() {
+    c >= 0 && c < r.boxes.length && (r.boxes.splice(c, 1), A(-1), N("change"));
+  }
+  function _e() {
+    if (f) {
+      if (y = 1, n(4, f.width = f.clientWidth, f), h !== null)
+        if (h.width > f.width)
+          y = f.width / h.width, w = h.width * y, C = h.height * y, d = 0, m = 0, b = w, p = C, n(4, f.height = C, f);
+        else {
+          w = h.width, C = h.height;
+          var H = (f.width - w) / 2;
+          d = H, m = 0, b = H + w, p = h.height, n(4, f.height = C, f);
+        }
+      else
+        d = 0, m = 0, b = f.width, p = f.height, n(4, f.height = f.clientHeight, f);
+      if (b > 0 && p > 0)
+        for (const R of r.boxes)
+          R.canvasXmin = d, R.canvasYmin = m, R.canvasXmax = b, R.canvasYmax = p, R.setScaleFactor(y);
+      v(), N("change");
+    }
+  }
+  const S = new ResizeObserver(_e);
+  function k() {
+    let H = [];
+    for (let R = 0; R < r.boxes.length; R++) {
+      let j = r.boxes[R];
+      if (!(j instanceof Nl)) {
+        let X = "", he = "";
+        j.hasOwnProperty("color") ? (X = j.color, Array.isArray(X) && X.length === 3 && (X = `rgb(${X[0]}, ${X[1]}, ${X[2]})`)) : X = Xe[H.length % Xe.length], j.hasOwnProperty("label") && (he = j.label), j = new Nl(v, d, m, b, p, he, j.xmin, j.ymin, j.xmax, j.ymax, X, s, o, y);
+      }
+      H.push(j);
+    }
+    n(0, r.boxes = H, r);
+  }
+  Z1(() => {
+    if (Array.isArray(a) && a.length > 0 && (!Array.isArray(u) || u.length == 0))
+      for (let H = 0; H < a.length; H++) {
+        let R = Xe[H % Xe.length];
+        u.push(Dn(R));
+      }
+    _ = f.getContext("2d"), S.observe(f), i !== null && (h = new Image(), h.src = i, h.onload = function() {
+      _e(), v();
+    }), _e(), v();
+  });
+  function I() {
+    document.addEventListener("keydown", x);
+  }
+  function g() {
+    document.removeEventListener("keydown", x);
+  }
+  Y1(() => {
+    document.removeEventListener("keydown", x);
+  });
+  function T(H) {
+    G1[H ? "unshift" : "push"](() => {
+      f = H, n(4, f);
+    });
+  }
+  const ae = () => J(), Q = () => te(), Se = () => me();
+  function He(H) {
+    nr.call(this, t, H);
+  }
+  function D(H) {
+    nr.call(this, t, H);
+  }
+  return t.$$set = (H) => {
+    "imageUrl" in H && n(18, i = H.imageUrl), "interactive" in H && n(1, l = H.interactive), "boxAlpha" in H && n(19, s = H.boxAlpha), "boxMinSize" in H && n(20, o = H.boxMinSize), "value" in H && n(0, r = H.value), "choices" in H && n(2, a = H.choices), "choicesColors" in H && n(3, u = H.choicesColors);
+  }, t.$$.update = () => {
+    t.$$.dirty[0] & /*value*/
+    1 && k();
+  }, [
+    r,
+    l,
+    a,
+    u,
+    f,
+    c,
+    P,
+    E,
+    B,
+    L,
+    J,
+    ce,
+    te,
+    ke,
+    ye,
+    me,
+    I,
+    g,
+    i,
+    s,
+    o,
+    T,
+    ae,
+    Q,
+    Se,
+    He,
+    D
+  ];
+}
+class $1 extends j1 {
+  constructor(e) {
+    super(), V1(
+      this,
+      e,
+      K1,
+      Q1,
+      W1,
+      {
+        imageUrl: 18,
+        interactive: 1,
+        boxAlpha: 19,
+        boxMinSize: 20,
+        value: 0,
+        choices: 2,
+        choicesColors: 3
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+const {
+  SvelteComponent: eg,
+  add_flush_callback: tg,
+  bind: ng,
+  binding_callbacks: ig,
+  create_component: lg,
+  destroy_component: sg,
+  init: og,
+  mount_component: rg,
+  safe_not_equal: ag,
+  transition_in: ug,
+  transition_out: fg
+} = window.__gradio__svelte__internal, { createEventDispatcher: cg } = window.__gradio__svelte__internal;
+function _g(t) {
+  let e, n, i;
+  function l(o) {
+    t[10](o);
+  }
+  let s = {
+    interactive: (
+      /*interactive*/
+      t[1]
+    ),
+    boxAlpha: (
+      /*boxesAlpha*/
+      t[2]
+    ),
+    choices: (
+      /*labelList*/
+      t[3]
+    ),
+    choicesColors: (
+      /*labelColors*/
+      t[4]
+    ),
+    boxMinSize: (
+      /*boxMinSize*/
+      t[5]
+    ),
+    imageUrl: (
+      /*resolved_src*/
+      t[6]
+    )
+  };
+  return (
+    /*value*/
+    t[0] !== void 0 && (s.value = /*value*/
+    t[0]), e = new $1({ props: s }), ig.push(() => ng(e, "value", l)), e.$on(
+      "change",
+      /*change_handler*/
+      t[11]
+    ), {
+      c() {
+        lg(e.$$.fragment);
+      },
+      m(o, r) {
+        rg(e, o, r), i = !0;
+      },
+      p(o, [r]) {
+        const a = {};
+        r & /*interactive*/
+        2 && (a.interactive = /*interactive*/
+        o[1]), r & /*boxesAlpha*/
+        4 && (a.boxAlpha = /*boxesAlpha*/
+        o[2]), r & /*labelList*/
+        8 && (a.choices = /*labelList*/
+        o[3]), r & /*labelColors*/
+        16 && (a.choicesColors = /*labelColors*/
+        o[4]), r & /*boxMinSize*/
+        32 && (a.boxMinSize = /*boxMinSize*/
+        o[5]), r & /*resolved_src*/
+        64 && (a.imageUrl = /*resolved_src*/
+        o[6]), !n && r & /*value*/
+        1 && (n = !0, a.value = /*value*/
+        o[0], tg(() => n = !1)), e.$set(a);
+      },
+      i(o) {
+        i || (ug(e.$$.fragment, o), i = !0);
+      },
+      o(o) {
+        fg(e.$$.fragment, o), i = !1;
+      },
+      d(o) {
+        sg(e, o);
+      }
+    }
+  );
+}
+function hg(t, e, n) {
+  let { src: i = void 0 } = e, { interactive: l } = e, { boxesAlpha: s } = e, { labelList: o } = e, { labelColors: r } = e, { boxMinSize: a } = e, { value: u } = e, f, _;
+  const h = cg();
+  function c(m) {
+    u = m, n(0, u);
+  }
+  const d = () => h("change");
+  return t.$$set = (m) => {
+    "src" in m && n(8, i = m.src), "interactive" in m && n(1, l = m.interactive), "boxesAlpha" in m && n(2, s = m.boxesAlpha), "labelList" in m && n(3, o = m.labelList), "labelColors" in m && n(4, r = m.labelColors), "boxMinSize" in m && n(5, a = m.boxMinSize), "value" in m && n(0, u = m.value);
+  }, t.$$.update = () => {
+    if (t.$$.dirty & /*src, latest_src*/
+    768) {
+      n(6, f = i), n(9, _ = i);
+      const m = i;
+      Th(m).then((b) => {
+        _ === m && n(6, f = b);
+      });
+    }
+  }, [
+    u,
+    l,
+    s,
+    o,
+    r,
+    a,
+    f,
+    h,
+    i,
+    _,
+    c,
+    d
+  ];
+}
+class za extends eg {
+  constructor(e) {
+    super(), og(this, e, hg, _g, ag, {
+      src: 8,
+      interactive: 1,
+      boxesAlpha: 2,
+      labelList: 3,
+      labelColors: 4,
+      boxMinSize: 5,
+      value: 0
+    });
+  }
+}
+const {
+  SvelteComponent: dg,
+  add_flush_callback: Pi,
+  append: wn,
+  attr: An,
+  bind: Ni,
+  binding_callbacks: Rn,
+  bubble: Ml,
+  check_outros: Jt,
+  create_component: _t,
+  create_slot: mg,
+  destroy_component: ht,
+  detach: Bt,
+  element: In,
+  empty: gg,
+  get_all_dirty_from_scope: bg,
+  get_slot_changes: pg,
+  group_outros: Qt,
+  init: wg,
+  insert: Tt,
+  mount_component: dt,
+  noop: vg,
+  safe_not_equal: yg,
+  space: xt,
+  toggle_class: rr,
+  transition_in: W,
+  transition_out: se,
+  update_slot_base: Eg
+} = window.__gradio__svelte__internal, { createEventDispatcher: kg } = window.__gradio__svelte__internal;
+function ar(t) {
+  let e, n;
+  return e = new zh({
+    props: {
+      href: (
+        /*value*/
+        t[1].image.url
+      ),
+      download: (
+        /*value*/
+        t[1].image.orig_name || "image"
+      ),
+      $$slots: { default: [Sg] },
+      $$scope: { ctx: t }
+    }
+  }), {
+    c() {
+      _t(e.$$.fragment);
+    },
+    m(i, l) {
+      dt(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*value*/
+      2 && (s.href = /*value*/
+      i[1].image.url), l[0] & /*value*/
+      2 && (s.download = /*value*/
+      i[1].image.orig_name || "image"), l[0] & /*i18n*/
+      256 | l[1] & /*$$scope*/
+      16 && (s.$$scope = { dirty: l, ctx: i }), e.$set(s);
+    },
+    i(i) {
+      n || (W(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      se(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      ht(e, i);
+    }
+  };
+}
+function Sg(t) {
+  let e, n;
+  return e = new as({
+    props: {
+      Icon: sc,
+      label: (
+        /*i18n*/
+        t[8]("common.download")
+      )
+    }
+  }), {
+    c() {
+      _t(e.$$.fragment);
+    },
+    m(i, l) {
+      dt(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*i18n*/
+      256 && (s.label = /*i18n*/
+      i[8]("common.download")), e.$set(s);
+    },
+    i(i) {
+      n || (W(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      se(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      ht(e, i);
+    }
+  };
+}
+function ur(t) {
+  let e, n;
+  return e = new g_({
+    props: {
+      i18n: (
+        /*i18n*/
+        t[8]
+      ),
+      formatter: (
+        /*func*/
+        t[25]
+      ),
+      value: (
+        /*value*/
+        t[1]
+      )
+    }
+  }), e.$on(
+    "share",
+    /*share_handler*/
+    t[26]
+  ), e.$on(
+    "error",
+    /*error_handler*/
+    t[27]
+  ), {
+    c() {
+      _t(e.$$.fragment);
+    },
+    m(i, l) {
+      dt(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*i18n*/
+      256 && (s.i18n = /*i18n*/
+      i[8]), l[0] & /*value*/
+      2 && (s.value = /*value*/
+      i[1]), e.$set(s);
+    },
+    i(i) {
+      n || (W(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      se(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      ht(e, i);
+    }
+  };
+}
+function fr(t) {
+  let e, n, i;
+  return n = new as({
+    props: { Icon: kr, label: "Remove Image" }
+  }), n.$on(
+    "click",
+    /*clear*/
+    t[23]
+  ), {
+    c() {
+      e = In("div"), _t(n.$$.fragment);
+    },
+    m(l, s) {
+      Tt(l, e, s), dt(n, e, null), i = !0;
+    },
+    p: vg,
+    i(l) {
+      i || (W(n.$$.fragment, l), i = !0);
+    },
+    o(l) {
+      se(n.$$.fragment, l), i = !1;
+    },
+    d(l) {
+      l && Bt(e), ht(n);
+    }
+  };
+}
+function cr(t) {
+  let e;
+  const n = (
+    /*#slots*/
+    t[24].default
+  ), i = mg(
+    n,
+    t,
+    /*$$scope*/
+    t[35],
+    null
+  );
+  return {
+    c() {
+      i && i.c();
+    },
+    m(l, s) {
+      i && i.m(l, s), e = !0;
+    },
+    p(l, s) {
+      i && i.p && (!e || s[1] & /*$$scope*/
+      16) && Eg(
+        i,
+        n,
+        l,
+        /*$$scope*/
+        l[35],
+        e ? pg(
+          n,
+          /*$$scope*/
+          l[35],
+          s,
+          null
+        ) : bg(
+          /*$$scope*/
+          l[35]
+        ),
+        null
+      );
+    },
+    i(l) {
+      e || (W(i, l), e = !0);
+    },
+    o(l) {
+      se(i, l), e = !1;
+    },
+    d(l) {
+      i && i.d(l);
+    }
+  };
+}
+function Cg(t) {
+  let e, n, i = (
+    /*value*/
+    t[1] === null && cr(t)
+  );
+  return {
+    c() {
+      i && i.c(), e = gg();
+    },
+    m(l, s) {
+      i && i.m(l, s), Tt(l, e, s), n = !0;
+    },
+    p(l, s) {
+      /*value*/
+      l[1] === null ? i ? (i.p(l, s), s[0] & /*value*/
+      2 && W(i, 1)) : (i = cr(l), i.c(), W(i, 1), i.m(e.parentNode, e)) : i && (Qt(), se(i, 1, 1, () => {
+        i = null;
+      }), Jt());
+    },
+    i(l) {
+      n || (W(i), n = !0);
+    },
+    o(l) {
+      se(i), n = !1;
+    },
+    d(l) {
+      l && Bt(e), i && i.d(l);
+    }
+  };
+}
+function _r(t) {
+  let e, n, i, l;
+  function s(r) {
+    t[32](r);
+  }
+  let o = {
+    boxesAlpha: (
+      /*boxesAlpha*/
+      t[12]
+    ),
+    labelList: (
+      /*labelList*/
+      t[13]
+    ),
+    labelColors: (
+      /*labelColors*/
+      t[14]
+    ),
+    boxMinSize: (
+      /*boxMinSize*/
+      t[15]
+    ),
+    interactive: (
+      /*interactive*/
+      t[7]
+    ),
+    src: (
+      /*value*/
+      t[1].image.url
+    )
+  };
+  return (
+    /*value*/
+    t[1] !== void 0 && (o.value = /*value*/
+    t[1]), n = new za({ props: o }), Rn.push(() => Ni(n, "value", s)), n.$on(
+      "change",
+      /*change_handler*/
+      t[33]
+    ), {
+      c() {
+        e = In("div"), _t(n.$$.fragment), An(e, "class", "image-frame svelte-1gjdske"), rr(
+          e,
+          "selectable",
+          /*selectable*/
+          t[5]
+        );
+      },
+      m(r, a) {
+        Tt(r, e, a), dt(n, e, null), l = !0;
+      },
+      p(r, a) {
+        const u = {};
+        a[0] & /*boxesAlpha*/
+        4096 && (u.boxesAlpha = /*boxesAlpha*/
+        r[12]), a[0] & /*labelList*/
+        8192 && (u.labelList = /*labelList*/
+        r[13]), a[0] & /*labelColors*/
+        16384 && (u.labelColors = /*labelColors*/
+        r[14]), a[0] & /*boxMinSize*/
+        32768 && (u.boxMinSize = /*boxMinSize*/
+        r[15]), a[0] & /*interactive*/
+        128 && (u.interactive = /*interactive*/
+        r[7]), a[0] & /*value*/
+        2 && (u.src = /*value*/
+        r[1].image.url), !i && a[0] & /*value*/
+        2 && (i = !0, u.value = /*value*/
+        r[1], Pi(() => i = !1)), n.$set(u), (!l || a[0] & /*selectable*/
+        32) && rr(
+          e,
+          "selectable",
+          /*selectable*/
+          r[5]
+        );
+      },
+      i(r) {
+        l || (W(n.$$.fragment, r), l = !0);
+      },
+      o(r) {
+        se(n.$$.fragment, r), l = !1;
+      },
+      d(r) {
+        r && Bt(e), ht(n);
+      }
+    }
+  );
+}
+function hr(t) {
+  let e, n, i;
+  function l(o) {
+    t[34](o);
+  }
+  let s = {
+    sources: (
+      /*sources*/
+      t[4]
+    ),
+    handle_clear: (
+      /*handle_clear*/
+      t[20]
+    ),
+    handle_select: (
+      /*handle_select_source*/
+      t[22]
+    )
+  };
+  return (
+    /*active_source*/
+    t[0] !== void 0 && (s.active_source = /*active_source*/
+    t[0]), e = new L_({ props: s }), Rn.push(() => Ni(e, "active_source", l)), {
+      c() {
+        _t(e.$$.fragment);
+      },
+      m(o, r) {
+        dt(e, o, r), i = !0;
+      },
+      p(o, r) {
+        const a = {};
+        r[0] & /*sources*/
+        16 && (a.sources = /*sources*/
+        o[4]), !n && r[0] & /*active_source*/
+        1 && (n = !0, a.active_source = /*active_source*/
+        o[0], Pi(() => n = !1)), e.$set(a);
+      },
+      i(o) {
+        i || (W(e.$$.fragment, o), i = !0);
+      },
+      o(o) {
+        se(e.$$.fragment, o), i = !1;
+      },
+      d(o) {
+        ht(e, o);
+      }
+    }
+  );
+}
+function Ag(t) {
+  let e, n, i, l, s, o, r, a, u, f, _, h, c, d = (
+    /*sources*/
+    (t[4].length > 1 || /*sources*/
+    t[4].includes("clipboard")) && /*value*/
+    t[1] === null && /*interactive*/
+    t[7]
+  ), m;
+  e = new sf({
+    props: {
+      show_label: (
+        /*show_label*/
+        t[3]
+      ),
+      Icon: Sr,
+      label: (
+        /*label*/
+        t[2] || "Image Annotator"
+      )
+    }
+  });
+  let b = (
+    /*showDownloadButton*/
+    t[10] && /*value*/
+    t[1] !== null && ar(t)
+  ), p = (
+    /*showShareButton*/
+    t[9] && /*value*/
+    t[1] !== null && ur(t)
+  ), y = (
+    /*showClearButton*/
+    t[11] && /*value*/
+    t[1] !== null && /*interactive*/
+    t[7] && fr(t)
+  );
+  function w(v) {
+    t[29](v);
+  }
+  function C(v) {
+    t[30](v);
+  }
+  let P = {
+    hidden: (
+      /*value*/
+      t[1] !== null
+    ),
+    filetype: (
+      /*active_source*/
+      t[0] === "clipboard" ? "clipboard" : "image/*"
+    ),
+    root: (
+      /*root*/
+      t[6]
+    ),
+    disable_click: !/*sources*/
+    t[4].includes("upload"),
+    $$slots: { default: [Cg] },
+    $$scope: { ctx: t }
+  };
+  /*uploading*/
+  t[16] !== void 0 && (P.uploading = /*uploading*/
+  t[16]), /*dragging*/
+  t[17] !== void 0 && (P.dragging = /*dragging*/
+  t[17]), u = new dm({ props: P }), t[28](u), Rn.push(() => Ni(u, "uploading", w)), Rn.push(() => Ni(u, "dragging", C)), u.$on(
+    "load",
+    /*handle_upload*/
+    t[19]
+  ), u.$on(
+    "error",
+    /*error_handler_1*/
+    t[31]
+  );
+  let E = (
+    /*value*/
+    t[1] !== null && _r(t)
+  ), N = d && hr(t);
+  return {
+    c() {
+      _t(e.$$.fragment), n = xt(), i = In("div"), b && b.c(), l = xt(), p && p.c(), s = xt(), y && y.c(), o = xt(), r = In("div"), a = In("div"), _t(u.$$.fragment), h = xt(), E && E.c(), c = xt(), N && N.c(), An(i, "class", "icon-buttons svelte-1gjdske"), An(a, "class", "upload-container svelte-1gjdske"), An(r, "data-testid", "image"), An(r, "class", "image-container svelte-1gjdske");
+    },
+    m(v, A) {
+      dt(e, v, A), Tt(v, n, A), Tt(v, i, A), b && b.m(i, null), wn(i, l), p && p.m(i, null), wn(i, s), y && y.m(i, null), Tt(v, o, A), Tt(v, r, A), wn(r, a), dt(u, a, null), wn(a, h), E && E.m(a, null), wn(r, c), N && N.m(r, null), m = !0;
+    },
+    p(v, A) {
+      const B = {};
+      A[0] & /*show_label*/
+      8 && (B.show_label = /*show_label*/
+      v[3]), A[0] & /*label*/
+      4 && (B.label = /*label*/
+      v[2] || "Image Annotator"), e.$set(B), /*showDownloadButton*/
+      v[10] && /*value*/
+      v[1] !== null ? b ? (b.p(v, A), A[0] & /*showDownloadButton, value*/
+      1026 && W(b, 1)) : (b = ar(v), b.c(), W(b, 1), b.m(i, l)) : b && (Qt(), se(b, 1, 1, () => {
+        b = null;
+      }), Jt()), /*showShareButton*/
+      v[9] && /*value*/
+      v[1] !== null ? p ? (p.p(v, A), A[0] & /*showShareButton, value*/
+      514 && W(p, 1)) : (p = ur(v), p.c(), W(p, 1), p.m(i, s)) : p && (Qt(), se(p, 1, 1, () => {
+        p = null;
+      }), Jt()), /*showClearButton*/
+      v[11] && /*value*/
+      v[1] !== null && /*interactive*/
+      v[7] ? y ? (y.p(v, A), A[0] & /*showClearButton, value, interactive*/
+      2178 && W(y, 1)) : (y = fr(v), y.c(), W(y, 1), y.m(i, null)) : y && (Qt(), se(y, 1, 1, () => {
+        y = null;
+      }), Jt());
+      const L = {};
+      A[0] & /*value*/
+      2 && (L.hidden = /*value*/
+      v[1] !== null), A[0] & /*active_source*/
+      1 && (L.filetype = /*active_source*/
+      v[0] === "clipboard" ? "clipboard" : "image/*"), A[0] & /*root*/
+      64 && (L.root = /*root*/
+      v[6]), A[0] & /*sources*/
+      16 && (L.disable_click = !/*sources*/
+      v[4].includes("upload")), A[0] & /*value*/
+      2 | A[1] & /*$$scope*/
+      16 && (L.$$scope = { dirty: A, ctx: v }), !f && A[0] & /*uploading*/
+      65536 && (f = !0, L.uploading = /*uploading*/
+      v[16], Pi(() => f = !1)), !_ && A[0] & /*dragging*/
+      131072 && (_ = !0, L.dragging = /*dragging*/
+      v[17], Pi(() => _ = !1)), u.$set(L), /*value*/
+      v[1] !== null ? E ? (E.p(v, A), A[0] & /*value*/
+      2 && W(E, 1)) : (E = _r(v), E.c(), W(E, 1), E.m(a, null)) : E && (Qt(), se(E, 1, 1, () => {
+        E = null;
+      }), Jt()), A[0] & /*sources, value, interactive*/
+      146 && (d = /*sources*/
+      (v[4].length > 1 || /*sources*/
+      v[4].includes("clipboard")) && /*value*/
+      v[1] === null && /*interactive*/
+      v[7]), d ? N ? (N.p(v, A), A[0] & /*sources, value, interactive*/
+      146 && W(N, 1)) : (N = hr(v), N.c(), W(N, 1), N.m(r, null)) : N && (Qt(), se(N, 1, 1, () => {
+        N = null;
+      }), Jt());
+    },
+    i(v) {
+      m || (W(e.$$.fragment, v), W(b), W(p), W(y), W(u.$$.fragment, v), W(E), W(N), m = !0);
+    },
+    o(v) {
+      se(e.$$.fragment, v), se(b), se(p), se(y), se(u.$$.fragment, v), se(E), se(N), m = !1;
+    },
+    d(v) {
+      v && (Bt(n), Bt(i), Bt(o), Bt(r)), ht(e, v), b && b.d(), p && p.d(), y && y.d(), t[28](null), ht(u), E && E.d(), N && N.d();
+    }
+  };
+}
+function Bg(t, e, n) {
+  let { $$slots: i = {}, $$scope: l } = e, { value: s } = e, { label: o = void 0 } = e, { show_label: r } = e, { sources: a = ["upload", "clipboard"] } = e, { selectable: u = !1 } = e, { root: f } = e, { interactive: _ } = e, { i18n: h } = e, { showShareButton: c } = e, { showDownloadButton: d } = e, { showClearButton: m } = e, { boxesAlpha: b } = e, { labelList: p } = e, { labelColors: y } = e, { boxMinSize: w } = e, C, P = !1, { active_source: E = null } = e;
+  function N({ detail: g }) {
+    n(1, s = new Sh()), n(1, s.image = g, s), A("upload");
+  }
+  function v() {
+    x(), A("clear"), A("change");
+  }
+  const A = kg();
+  let B = !1;
+  async function L(g) {
+    switch (g) {
+      case "clipboard":
+        C.paste_clipboard();
+        break;
+    }
+  }
+  function x() {
+    n(1, s = null);
+  }
+  const J = async (g) => g === null ? "" : `<img src="${await i_(g.image, "base64")}" />`;
+  function ce(g) {
+    Ml.call(this, t, g);
+  }
+  function te(g) {
+    Ml.call(this, t, g);
+  }
+  function ke(g) {
+    Rn[g ? "unshift" : "push"](() => {
+      C = g, n(18, C);
+    });
+  }
+  function ye(g) {
+    P = g, n(16, P);
+  }
+  function me(g) {
+    B = g, n(17, B);
+  }
+  function _e(g) {
+    Ml.call(this, t, g);
+  }
+  function S(g) {
+    s = g, n(1, s);
+  }
+  const k = () => A("change");
+  function I(g) {
+    E = g, n(0, E), n(4, a);
+  }
+  return t.$$set = (g) => {
+    "value" in g && n(1, s = g.value), "label" in g && n(2, o = g.label), "show_label" in g && n(3, r = g.show_label), "sources" in g && n(4, a = g.sources), "selectable" in g && n(5, u = g.selectable), "root" in g && n(6, f = g.root), "interactive" in g && n(7, _ = g.interactive), "i18n" in g && n(8, h = g.i18n), "showShareButton" in g && n(9, c = g.showShareButton), "showDownloadButton" in g && n(10, d = g.showDownloadButton), "showClearButton" in g && n(11, m = g.showClearButton), "boxesAlpha" in g && n(12, b = g.boxesAlpha), "labelList" in g && n(13, p = g.labelList), "labelColors" in g && n(14, y = g.labelColors), "boxMinSize" in g && n(15, w = g.boxMinSize), "active_source" in g && n(0, E = g.active_source), "$$scope" in g && n(35, l = g.$$scope);
+  }, t.$$.update = () => {
+    t.$$.dirty[0] & /*uploading*/
+    65536 && P && x(), t.$$.dirty[0] & /*dragging*/
+    131072 && A("drag", B), t.$$.dirty[0] & /*active_source, sources*/
+    17 && !E && a && n(0, E = a[0]);
+  }, [
+    E,
+    s,
+    o,
+    r,
+    a,
+    u,
+    f,
+    _,
+    h,
+    c,
+    d,
+    m,
+    b,
+    p,
+    y,
+    w,
+    P,
+    B,
+    C,
+    N,
+    v,
+    A,
+    L,
+    x,
+    i,
+    J,
+    ce,
+    te,
+    ke,
+    ye,
+    me,
+    _e,
+    S,
+    k,
+    I,
+    l
+  ];
+}
+class Tg extends dg {
+  constructor(e) {
+    super(), wg(
+      this,
+      e,
+      Bg,
+      Ag,
+      yg,
+      {
+        value: 1,
+        label: 2,
+        show_label: 3,
+        sources: 4,
+        selectable: 5,
+        root: 6,
+        interactive: 7,
+        i18n: 8,
+        showShareButton: 9,
+        showDownloadButton: 10,
+        showClearButton: 11,
+        boxesAlpha: 12,
+        labelList: 13,
+        labelColors: 14,
+        boxMinSize: 15,
+        active_source: 0
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+const {
+  SvelteComponent: Hg,
+  attr: Pg,
+  check_outros: Ng,
+  create_component: Lg,
+  destroy_component: Ig,
+  detach: Mg,
+  element: Og,
+  group_outros: Dg,
+  init: Rg,
+  insert: Ug,
+  mount_component: Fg,
+  safe_not_equal: qg,
+  toggle_class: ot,
+  transition_in: bi,
+  transition_out: rs
+} = window.__gradio__svelte__internal;
+function dr(t) {
+  let e, n;
+  return e = new za({
+    props: {
+      src: (
+        /*samples_dir*/
+        t[1] + /*value*/
+        t[0].path
+      ),
+      alt: ""
+    }
+  }), {
+    c() {
+      Lg(e.$$.fragment);
+    },
+    m(i, l) {
+      Fg(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l & /*samples_dir, value*/
+      3 && (s.src = /*samples_dir*/
+      i[1] + /*value*/
+      i[0].path), e.$set(s);
+    },
+    i(i) {
+      n || (bi(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      rs(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Ig(e, i);
+    }
+  };
+}
+function zg(t) {
+  let e, n, i = (
+    /*value*/
+    t[0] && dr(t)
+  );
+  return {
+    c() {
+      e = Og("div"), i && i.c(), Pg(e, "class", "container svelte-1sgcyba"), ot(
+        e,
+        "table",
+        /*type*/
+        t[2] === "table"
+      ), ot(
+        e,
+        "gallery",
+        /*type*/
+        t[2] === "gallery"
+      ), ot(
+        e,
+        "selected",
+        /*selected*/
+        t[3]
+      ), ot(
+        e,
+        "border",
+        /*value*/
+        t[0]
+      );
+    },
+    m(l, s) {
+      Ug(l, e, s), i && i.m(e, null), n = !0;
+    },
+    p(l, [s]) {
+      /*value*/
+      l[0] ? i ? (i.p(l, s), s & /*value*/
+      1 && bi(i, 1)) : (i = dr(l), i.c(), bi(i, 1), i.m(e, null)) : i && (Dg(), rs(i, 1, 1, () => {
+        i = null;
+      }), Ng()), (!n || s & /*type*/
+      4) && ot(
+        e,
+        "table",
+        /*type*/
+        l[2] === "table"
+      ), (!n || s & /*type*/
+      4) && ot(
+        e,
+        "gallery",
+        /*type*/
+        l[2] === "gallery"
+      ), (!n || s & /*selected*/
+      8) && ot(
+        e,
+        "selected",
+        /*selected*/
+        l[3]
+      ), (!n || s & /*value*/
+      1) && ot(
+        e,
+        "border",
+        /*value*/
+        l[0]
+      );
+    },
+    i(l) {
+      n || (bi(i), n = !0);
+    },
+    o(l) {
+      rs(i), n = !1;
+    },
+    d(l) {
+      l && Mg(e), i && i.d();
+    }
+  };
+}
+function jg(t, e, n) {
+  let { value: i } = e, { samples_dir: l } = e, { type: s } = e, { selected: o = !1 } = e;
+  return t.$$set = (r) => {
+    "value" in r && n(0, i = r.value), "samples_dir" in r && n(1, l = r.samples_dir), "type" in r && n(2, s = r.type), "selected" in r && n(3, o = r.selected);
+  }, [i, l, s, o];
+}
+class hb extends Hg {
+  constructor(e) {
+    super(), Rg(this, e, jg, zg, qg, {
+      value: 0,
+      samples_dir: 1,
+      type: 2,
+      selected: 3
+    });
+  }
+}
+const {
+  SvelteComponent: Gg,
+  add_flush_callback: mr,
+  assign: xg,
+  bind: gr,
+  binding_callbacks: br,
+  check_outros: Vg,
+  create_component: It,
+  destroy_component: Mt,
+  detach: ja,
+  empty: Xg,
+  flush: $,
+  get_spread_object: Wg,
+  get_spread_update: Zg,
+  group_outros: Yg,
+  init: Jg,
+  insert: Ga,
+  mount_component: Ot,
+  safe_not_equal: Qg,
+  space: Kg,
+  transition_in: $e,
+  transition_out: et
+} = window.__gradio__svelte__internal;
+function $g(t) {
+  let e, n;
+  return e = new Rf({
+    props: {
+      unpadded_box: !0,
+      size: "large",
+      $$slots: { default: [nb] },
+      $$scope: { ctx: t }
+    }
+  }), {
+    c() {
+      It(e.$$.fragment);
+    },
+    m(i, l) {
+      Ot(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[1] & /*$$scope*/
+      32 && (s.$$scope = { dirty: l, ctx: i }), e.$set(s);
+    },
+    i(i) {
+      n || ($e(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      et(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Mt(e, i);
+    }
+  };
+}
+function eb(t) {
+  let e, n;
+  return e = new Pr({
+    props: {
+      i18n: (
+        /*gradio*/
+        t[23].i18n
+      ),
+      type: "clipboard",
+      mode: "short"
+    }
+  }), {
+    c() {
+      It(e.$$.fragment);
+    },
+    m(i, l) {
+      Ot(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*gradio*/
+      8388608 && (s.i18n = /*gradio*/
+      i[23].i18n), e.$set(s);
+    },
+    i(i) {
+      n || ($e(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      et(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Mt(e, i);
+    }
+  };
+}
+function tb(t) {
+  let e, n;
+  return e = new Pr({
+    props: {
+      i18n: (
+        /*gradio*/
+        t[23].i18n
+      ),
+      type: "image"
+    }
+  }), {
+    c() {
+      It(e.$$.fragment);
+    },
+    m(i, l) {
+      Ot(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*gradio*/
+      8388608 && (s.i18n = /*gradio*/
+      i[23].i18n), e.$set(s);
+    },
+    i(i) {
+      n || ($e(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      et(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Mt(e, i);
+    }
+  };
+}
+function nb(t) {
+  let e, n;
+  return e = new Sr({}), {
+    c() {
+      It(e.$$.fragment);
+    },
+    m(i, l) {
+      Ot(e, i, l), n = !0;
+    },
+    i(i) {
+      n || ($e(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      et(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Mt(e, i);
+    }
+  };
+}
+function ib(t) {
+  let e, n, i, l;
+  const s = [tb, eb, $g], o = [];
+  function r(a, u) {
+    return (
+      /*active_source*/
+      a[25] === "upload" ? 0 : (
+        /*active_source*/
+        a[25] === "clipboard" ? 1 : 2
+      )
+    );
+  }
+  return e = r(t), n = o[e] = s[e](t), {
+    c() {
+      n.c(), i = Xg();
+    },
+    m(a, u) {
+      o[e].m(a, u), Ga(a, i, u), l = !0;
+    },
+    p(a, u) {
+      let f = e;
+      e = r(a), e === f ? o[e].p(a, u) : (Yg(), et(o[f], 1, 1, () => {
+        o[f] = null;
+      }), Vg(), n = o[e], n ? n.p(a, u) : (n = o[e] = s[e](a), n.c()), $e(n, 1), n.m(i.parentNode, i));
+    },
+    i(a) {
+      l || ($e(n), l = !0);
+    },
+    o(a) {
+      et(n), l = !1;
+    },
+    d(a) {
+      a && ja(i), o[e].d(a);
+    }
+  };
+}
+function lb(t) {
+  let e, n, i, l, s, o;
+  const r = [
+    {
+      autoscroll: (
+        /*gradio*/
+        t[23].autoscroll
+      )
+    },
+    { i18n: (
+      /*gradio*/
+      t[23].i18n
+    ) },
+    /*loading_status*/
+    t[1]
+  ];
+  let a = {};
+  for (let h = 0; h < r.length; h += 1)
+    a = xg(a, r[h]);
+  e = new kh({ props: a });
+  function u(h) {
+    t[26](h);
+  }
+  function f(h) {
+    t[27](h);
+  }
+  let _ = {
+    selectable: (
+      /*_selectable*/
+      t[10]
+    ),
+    root: (
+      /*root*/
+      t[7]
+    ),
+    sources: (
+      /*sources*/
+      t[14]
+    ),
+    interactive: (
+      /*interactive*/
+      t[18]
+    ),
+    showDownloadButton: (
+      /*show_download_button*/
+      t[15]
+    ),
+    showShareButton: (
+      /*show_share_button*/
+      t[16]
+    ),
+    showClearButton: (
+      /*show_clear_button*/
+      t[17]
+    ),
+    i18n: (
+      /*gradio*/
+      t[23].i18n
+    ),
+    boxesAlpha: (
+      /*boxes_alpha*/
+      t[19]
+    ),
+    labelList: (
+      /*label_list*/
+      t[20]
+    ),
+    labelColors: (
+      /*label_colors*/
+      t[21]
+    ),
+    boxMinSize: (
+      /*box_min_size*/
+      t[22]
+    ),
+    label: (
+      /*label*/
+      t[5]
+    ),
+    show_label: (
+      /*show_label*/
+      t[6]
+    ),
+    $$slots: { default: [ib] },
+    $$scope: { ctx: t }
+  };
+  return (
+    /*active_source*/
+    t[25] !== void 0 && (_.active_source = /*active_source*/
+    t[25]), /*value*/
+    t[0] !== void 0 && (_.value = /*value*/
+    t[0]), i = new Tg({ props: _ }), br.push(() => gr(i, "active_source", u)), br.push(() => gr(i, "value", f)), i.$on(
+      "change",
+      /*change_handler*/
+      t[28]
+    ), i.$on(
+      "edit",
+      /*edit_handler*/
+      t[29]
+    ), i.$on(
+      "clear",
+      /*clear_handler*/
+      t[30]
+    ), i.$on(
+      "drag",
+      /*drag_handler*/
+      t[31]
+    ), i.$on(
+      "upload",
+      /*upload_handler*/
+      t[32]
+    ), i.$on(
+      "select",
+      /*select_handler*/
+      t[33]
+    ), i.$on(
+      "share",
+      /*share_handler*/
+      t[34]
+    ), i.$on(
+      "error",
+      /*error_handler*/
+      t[35]
+    ), {
+      c() {
+        It(e.$$.fragment), n = Kg(), It(i.$$.fragment);
+      },
+      m(h, c) {
+        Ot(e, h, c), Ga(h, n, c), Ot(i, h, c), o = !0;
+      },
+      p(h, c) {
+        const d = c[0] & /*gradio, loading_status*/
+        8388610 ? Zg(r, [
+          c[0] & /*gradio*/
+          8388608 && {
+            autoscroll: (
+              /*gradio*/
+              h[23].autoscroll
+            )
+          },
+          c[0] & /*gradio*/
+          8388608 && { i18n: (
+            /*gradio*/
+            h[23].i18n
+          ) },
+          c[0] & /*loading_status*/
+          2 && Wg(
+            /*loading_status*/
+            h[1]
+          )
+        ]) : {};
+        e.$set(d);
+        const m = {};
+        c[0] & /*_selectable*/
+        1024 && (m.selectable = /*_selectable*/
+        h[10]), c[0] & /*root*/
+        128 && (m.root = /*root*/
+        h[7]), c[0] & /*sources*/
+        16384 && (m.sources = /*sources*/
+        h[14]), c[0] & /*interactive*/
+        262144 && (m.interactive = /*interactive*/
+        h[18]), c[0] & /*show_download_button*/
+        32768 && (m.showDownloadButton = /*show_download_button*/
+        h[15]), c[0] & /*show_share_button*/
+        65536 && (m.showShareButton = /*show_share_button*/
+        h[16]), c[0] & /*show_clear_button*/
+        131072 && (m.showClearButton = /*show_clear_button*/
+        h[17]), c[0] & /*gradio*/
+        8388608 && (m.i18n = /*gradio*/
+        h[23].i18n), c[0] & /*boxes_alpha*/
+        524288 && (m.boxesAlpha = /*boxes_alpha*/
+        h[19]), c[0] & /*label_list*/
+        1048576 && (m.labelList = /*label_list*/
+        h[20]), c[0] & /*label_colors*/
+        2097152 && (m.labelColors = /*label_colors*/
+        h[21]), c[0] & /*box_min_size*/
+        4194304 && (m.boxMinSize = /*box_min_size*/
+        h[22]), c[0] & /*label*/
+        32 && (m.label = /*label*/
+        h[5]), c[0] & /*show_label*/
+        64 && (m.show_label = /*show_label*/
+        h[6]), c[0] & /*gradio, active_source*/
+        41943040 | c[1] & /*$$scope*/
+        32 && (m.$$scope = { dirty: c, ctx: h }), !l && c[0] & /*active_source*/
+        33554432 && (l = !0, m.active_source = /*active_source*/
+        h[25], mr(() => l = !1)), !s && c[0] & /*value*/
+        1 && (s = !0, m.value = /*value*/
+        h[0], mr(() => s = !1)), i.$set(m);
+      },
+      i(h) {
+        o || ($e(e.$$.fragment, h), $e(i.$$.fragment, h), o = !0);
+      },
+      o(h) {
+        et(e.$$.fragment, h), et(i.$$.fragment, h), o = !1;
+      },
+      d(h) {
+        h && ja(n), Mt(e, h), Mt(i, h);
+      }
+    }
+  );
+}
+function sb(t) {
+  let e, n;
+  return e = new ou({
+    props: {
+      visible: (
+        /*visible*/
+        t[4]
+      ),
+      variant: "solid",
+      border_mode: (
+        /*dragging*/
+        t[24] ? "focus" : "base"
+      ),
+      padding: !1,
+      elem_id: (
+        /*elem_id*/
+        t[2]
+      ),
+      elem_classes: (
+        /*elem_classes*/
+        t[3]
+      ),
+      height: (
+        /*height*/
+        t[8] || void 0
+      ),
+      width: (
+        /*width*/
+        t[9]
+      ),
+      allow_overflow: !1,
+      container: (
+        /*container*/
+        t[11]
+      ),
+      scale: (
+        /*scale*/
+        t[12]
+      ),
+      min_width: (
+        /*min_width*/
+        t[13]
+      ),
+      $$slots: { default: [lb] },
+      $$scope: { ctx: t }
+    }
+  }), {
+    c() {
+      It(e.$$.fragment);
+    },
+    m(i, l) {
+      Ot(e, i, l), n = !0;
+    },
+    p(i, l) {
+      const s = {};
+      l[0] & /*visible*/
+      16 && (s.visible = /*visible*/
+      i[4]), l[0] & /*dragging*/
+      16777216 && (s.border_mode = /*dragging*/
+      i[24] ? "focus" : "base"), l[0] & /*elem_id*/
+      4 && (s.elem_id = /*elem_id*/
+      i[2]), l[0] & /*elem_classes*/
+      8 && (s.elem_classes = /*elem_classes*/
+      i[3]), l[0] & /*height*/
+      256 && (s.height = /*height*/
+      i[8] || void 0), l[0] & /*width*/
+      512 && (s.width = /*width*/
+      i[9]), l[0] & /*container*/
+      2048 && (s.container = /*container*/
+      i[11]), l[0] & /*scale*/
+      4096 && (s.scale = /*scale*/
+      i[12]), l[0] & /*min_width*/
+      8192 && (s.min_width = /*min_width*/
+      i[13]), l[0] & /*_selectable, root, sources, interactive, show_download_button, show_share_button, show_clear_button, gradio, boxes_alpha, label_list, label_colors, box_min_size, label, show_label, active_source, value, dragging, loading_status*/
+      67093731 | l[1] & /*$$scope*/
+      32 && (s.$$scope = { dirty: l, ctx: i }), e.$set(s);
+    },
+    i(i) {
+      n || ($e(e.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      et(e.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Mt(e, i);
+    }
+  };
+}
+function ob(t, e, n) {
+  let { elem_id: i = "" } = e, { elem_classes: l = [] } = e, { visible: s = !0 } = e, { value: o = null } = e, { label: r } = e, { show_label: a } = e, { root: u } = e, { height: f } = e, { width: _ } = e, { _selectable: h = !1 } = e, { container: c = !0 } = e, { scale: d = null } = e, { min_width: m = void 0 } = e, { loading_status: b } = e, { sources: p = ["upload", "clipboard"] } = e, { show_download_button: y } = e, { show_share_button: w } = e, { show_clear_button: C } = e, { interactive: P } = e, { boxes_alpha: E } = e, { label_list: N } = e, { label_colors: v } = e, { box_min_size: A } = e, { gradio: B } = e, L, x = null;
+  function J(g) {
+    x = g, n(25, x);
+  }
+  function ce(g) {
+    o = g, n(0, o);
+  }
+  const te = () => B.dispatch("change"), ke = () => B.dispatch("edit"), ye = () => {
+    B.dispatch("clear");
+  }, me = ({ detail: g }) => n(24, L = g), _e = () => B.dispatch("upload"), S = ({ detail: g }) => B.dispatch("select", g), k = ({ detail: g }) => B.dispatch("share", g), I = ({ detail: g }) => {
+    n(1, b = b || {}), n(1, b.status = "error", b), B.dispatch("error", g);
+  };
+  return t.$$set = (g) => {
+    "elem_id" in g && n(2, i = g.elem_id), "elem_classes" in g && n(3, l = g.elem_classes), "visible" in g && n(4, s = g.visible), "value" in g && n(0, o = g.value), "label" in g && n(5, r = g.label), "show_label" in g && n(6, a = g.show_label), "root" in g && n(7, u = g.root), "height" in g && n(8, f = g.height), "width" in g && n(9, _ = g.width), "_selectable" in g && n(10, h = g._selectable), "container" in g && n(11, c = g.container), "scale" in g && n(12, d = g.scale), "min_width" in g && n(13, m = g.min_width), "loading_status" in g && n(1, b = g.loading_status), "sources" in g && n(14, p = g.sources), "show_download_button" in g && n(15, y = g.show_download_button), "show_share_button" in g && n(16, w = g.show_share_button), "show_clear_button" in g && n(17, C = g.show_clear_button), "interactive" in g && n(18, P = g.interactive), "boxes_alpha" in g && n(19, E = g.boxes_alpha), "label_list" in g && n(20, N = g.label_list), "label_colors" in g && n(21, v = g.label_colors), "box_min_size" in g && n(22, A = g.box_min_size), "gradio" in g && n(23, B = g.gradio);
+  }, [
+    o,
+    b,
+    i,
+    l,
+    s,
+    r,
+    a,
+    u,
+    f,
+    _,
+    h,
+    c,
+    d,
+    m,
+    p,
+    y,
+    w,
+    C,
+    P,
+    E,
+    N,
+    v,
+    A,
+    B,
+    L,
+    x,
+    J,
+    ce,
+    te,
+    ke,
+    ye,
+    me,
+    _e,
+    S,
+    k,
+    I
+  ];
+}
+class db extends Gg {
+  constructor(e) {
+    super(), Jg(
+      this,
+      e,
+      ob,
+      sb,
+      Qg,
+      {
+        elem_id: 2,
+        elem_classes: 3,
+        visible: 4,
+        value: 0,
+        label: 5,
+        show_label: 6,
+        root: 7,
+        height: 8,
+        width: 9,
+        _selectable: 10,
+        container: 11,
+        scale: 12,
+        min_width: 13,
+        loading_status: 1,
+        sources: 14,
+        show_download_button: 15,
+        show_share_button: 16,
+        show_clear_button: 17,
+        interactive: 18,
+        boxes_alpha: 19,
+        label_list: 20,
+        label_colors: 21,
+        box_min_size: 22,
+        gradio: 23
+      },
+      null,
+      [-1, -1]
+    );
+  }
+  get elem_id() {
+    return this.$$.ctx[2];
+  }
+  set elem_id(e) {
+    this.$$set({ elem_id: e }), $();
+  }
+  get elem_classes() {
+    return this.$$.ctx[3];
+  }
+  set elem_classes(e) {
+    this.$$set({ elem_classes: e }), $();
+  }
+  get visible() {
+    return this.$$.ctx[4];
+  }
+  set visible(e) {
+    this.$$set({ visible: e }), $();
+  }
+  get value() {
+    return this.$$.ctx[0];
+  }
+  set value(e) {
+    this.$$set({ value: e }), $();
+  }
+  get label() {
+    return this.$$.ctx[5];
+  }
+  set label(e) {
+    this.$$set({ label: e }), $();
+  }
+  get show_label() {
+    return this.$$.ctx[6];
+  }
+  set show_label(e) {
+    this.$$set({ show_label: e }), $();
+  }
+  get root() {
+    return this.$$.ctx[7];
+  }
+  set root(e) {
+    this.$$set({ root: e }), $();
+  }
+  get height() {
+    return this.$$.ctx[8];
+  }
+  set height(e) {
+    this.$$set({ height: e }), $();
+  }
+  get width() {
+    return this.$$.ctx[9];
+  }
+  set width(e) {
+    this.$$set({ width: e }), $();
+  }
+  get _selectable() {
+    return this.$$.ctx[10];
+  }
+  set _selectable(e) {
+    this.$$set({ _selectable: e }), $();
+  }
+  get container() {
+    return this.$$.ctx[11];
+  }
+  set container(e) {
+    this.$$set({ container: e }), $();
+  }
+  get scale() {
+    return this.$$.ctx[12];
+  }
+  set scale(e) {
+    this.$$set({ scale: e }), $();
+  }
+  get min_width() {
+    return this.$$.ctx[13];
+  }
+  set min_width(e) {
+    this.$$set({ min_width: e }), $();
+  }
+  get loading_status() {
+    return this.$$.ctx[1];
+  }
+  set loading_status(e) {
+    this.$$set({ loading_status: e }), $();
+  }
+  get sources() {
+    return this.$$.ctx[14];
+  }
+  set sources(e) {
+    this.$$set({ sources: e }), $();
+  }
+  get show_download_button() {
+    return this.$$.ctx[15];
+  }
+  set show_download_button(e) {
+    this.$$set({ show_download_button: e }), $();
+  }
+  get show_share_button() {
+    return this.$$.ctx[16];
+  }
+  set show_share_button(e) {
+    this.$$set({ show_share_button: e }), $();
+  }
+  get show_clear_button() {
+    return this.$$.ctx[17];
+  }
+  set show_clear_button(e) {
+    this.$$set({ show_clear_button: e }), $();
+  }
+  get interactive() {
+    return this.$$.ctx[18];
+  }
+  set interactive(e) {
+    this.$$set({ interactive: e }), $();
+  }
+  get boxes_alpha() {
+    return this.$$.ctx[19];
+  }
+  set boxes_alpha(e) {
+    this.$$set({ boxes_alpha: e }), $();
+  }
+  get label_list() {
+    return this.$$.ctx[20];
+  }
+  set label_list(e) {
+    this.$$set({ label_list: e }), $();
+  }
+  get label_colors() {
+    return this.$$.ctx[21];
+  }
+  set label_colors(e) {
+    this.$$set({ label_colors: e }), $();
+  }
+  get box_min_size() {
+    return this.$$.ctx[22];
+  }
+  set box_min_size(e) {
+    this.$$set({ box_min_size: e }), $();
+  }
+  get gradio() {
+    return this.$$.ctx[23];
+  }
+  set gradio(e) {
+    this.$$set({ gradio: e }), $();
+  }
+}
+export {
+  hb as BaseExample,
+  db as default
+};
diff --git a/src/backend/gradio_image_annotation/templates/component/style.css b/src/backend/gradio_image_annotation/templates/component/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..23672ca8809e7922abffca17efe3fb3139e39471
--- /dev/null
+++ b/src/backend/gradio_image_annotation/templates/component/style.css
@@ -0,0 +1 @@
+.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1aq8tno{cursor:pointer;width:var(--size-full)}.hidden.svelte-1aq8tno{display:none;height:0!important;position:absolute;width:0;flex-grow:0}.center.svelte-1aq8tno{display:flex;justify-content:center}.flex.svelte-1aq8tno{display:flex;justify-content:center;align-items:center}input.svelte-1aq8tno{display:none}div.svelte-1wj0ocy{display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.not-absolute.svelte-1wj0ocy{margin:var(--size-1)}input.svelte-16l8u73{display:block;position:relative;background:var(--background-fill-primary);line-height:var(--line-sm)}div.svelte-1vvnm05{width:var(--size-10);height:var(--size-10)}.table.svelte-1vvnm05{margin:0 auto}button.svelte-8huxfn,a.svelte-8huxfn{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:var(--size-0-5) var(--size-2);text-align:center}button.svelte-8huxfn:hover,button[disabled].svelte-8huxfn,a.svelte-8huxfn:hover,a.disabled.svelte-8huxfn{box-shadow:var(--button-shadow-hover)}button.svelte-8huxfn:active,a.svelte-8huxfn:active{box-shadow:var(--button-shadow-active)}button[disabled].svelte-8huxfn,a.disabled.svelte-8huxfn{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.hidden.svelte-8huxfn{display:none}.primary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-primary-border-color);background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}.primary.svelte-8huxfn:hover,.primary[disabled].svelte-8huxfn{border-color:var(--button-primary-border-color-hover);background:var(--button-primary-background-fill-hover);color:var(--button-primary-text-color-hover)}.secondary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-secondary-border-color);background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color)}.secondary.svelte-8huxfn:hover,.secondary[disabled].svelte-8huxfn{border-color:var(--button-secondary-border-color-hover);background:var(--button-secondary-background-fill-hover);color:var(--button-secondary-text-color-hover)}.stop.svelte-8huxfn{border:var(--button-border-width) solid var(--button-cancel-border-color);background:var(--button-cancel-background-fill);color:var(--button-cancel-text-color)}.stop.svelte-8huxfn:hover,.stop[disabled].svelte-8huxfn{border-color:var(--button-cancel-border-color-hover);background:var(--button-cancel-background-fill-hover);color:var(--button-cancel-text-color-hover)}.sm.svelte-8huxfn{border-radius:var(--button-small-radius);padding:var(--button-small-padding);font-weight:var(--button-small-text-weight);font-size:var(--button-small-text-size)}.lg.svelte-8huxfn{border-radius:var(--button-large-radius);padding:var(--button-large-padding);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size)}.button-icon.svelte-8huxfn{width:var(--text-xl);height:var(--text-xl);margin-right:var(--spacing-xl)}.options.svelte-yuohum{--window-padding:var(--size-8);position:fixed;z-index:var(--layer-top);margin-left:0;box-shadow:var(--shadow-drop-lg);border-radius:var(--container-radius);background:var(--background-fill-primary);min-width:fit-content;max-width:inherit;overflow:auto;color:var(--body-text-color);list-style:none}.item.svelte-yuohum{display:flex;cursor:pointer;padding:var(--size-2)}.item.svelte-yuohum:hover,.active.svelte-yuohum{background:var(--background-fill-secondary)}.inner-item.svelte-yuohum{padding-right:var(--size-1)}.hide.svelte-yuohum{visibility:hidden}.icon-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}label.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:not(.container),label.svelte-xtjjyg:not(.container) .wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .wrap-inner.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .secondary-wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .token.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) input.svelte-xtjjyg.svelte-xtjjyg{height:100%}.container.svelte-xtjjyg .wrap.svelte-xtjjyg.svelte-xtjjyg{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding)}.token.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;align-items:center;transition:var(--button-transition);cursor:pointer;box-shadow:var(--checkbox-label-shadow);border:var(--checkbox-label-border-width) solid var(--checkbox-label-border-color);border-radius:var(--button-small-radius);background:var(--checkbox-label-background-fill);padding:var(--checkbox-label-padding);color:var(--checkbox-label-text-color);font-weight:var(--checkbox-label-text-weight);font-size:var(--checkbox-label-text-size);line-height:var(--line-md)}.token.svelte-xtjjyg>.svelte-xtjjyg+.svelte-xtjjyg{margin-left:var(--size-2)}.token-remove.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{fill:var(--body-text-color);display:flex;justify-content:center;align-items:center;cursor:pointer;border:var(--checkbox-border-width) solid var(--border-color-primary);border-radius:var(--radius-full);background:var(--background-fill-primary);padding:var(--size-0-5);width:16px;height:16px}.secondary-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size)}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.remove-all.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin-left:var(--size-1);width:20px;height:20px}.subdued.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color-subdued)}input[readonly].svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{cursor:pointer}.icon-wrap.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}.container.svelte-1m1zvyj.svelte-1m1zvyj{height:100%}.container.svelte-1m1zvyj .wrap.svelte-1m1zvyj{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding);height:100%}.secondary-wrap.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content;height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size);height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.subdued.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color-subdued)}input[readonly].svelte-1m1zvyj.svelte-1m1zvyj{cursor:pointer}.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}.modal.svelte-hkn2q1{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--layer-top);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container.svelte-hkn2q1{border-style:solid;border-width:var(--block-border-width);margin-top:10%;padding:20px;box-shadow:var(--block-shadow);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);position:fixed;left:50%;transform:translate(-50%);width:fit-content}.model-content.svelte-hkn2q1{display:flex;align-items:flex-end}.canvas-annotator.svelte-182gnnj{border-color:var(--block-border-color);width:100%;height:100%;display:block}.canvas-control.svelte-182gnnj{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-top:var(--size-2)}.icon.svelte-182gnnj{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.icon.svelte-182gnnj:hover,.icon.svelte-182gnnj:focus{color:var(--color-accent)}.canvas-container.svelte-182gnnj:focus{outline:none}.image-frame.svelte-1gjdske img{width:var(--size-full);height:var(--size-full);object-fit:cover}.image-frame.svelte-1gjdske{object-fit:cover;width:100%}.upload-container.svelte-1gjdske{height:100%;width:100%;flex-shrink:1;max-height:100%}.image-container.svelte-1gjdske{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.selectable.svelte-1gjdske{cursor:crosshair}.icon-buttons.svelte-1gjdske{display:flex;position:absolute;top:6px;right:6px;gap:var(--size-1)}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}
diff --git a/src/backend/gradio_image_annotation/templates/component/wrapper-6f348d45-f837cf34.js b/src/backend/gradio_image_annotation/templates/component/wrapper-6f348d45-f837cf34.js
new file mode 100644
index 0000000000000000000000000000000000000000..049455ba0aaa60574f7ec143d8ac83fdb0a0d2f1
--- /dev/null
+++ b/src/backend/gradio_image_annotation/templates/component/wrapper-6f348d45-f837cf34.js
@@ -0,0 +1,2455 @@
+import S from "./__vite-browser-external-2447137e.js";
+function z(s) {
+  return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
+}
+function gt(s) {
+  if (s.__esModule)
+    return s;
+  var e = s.default;
+  if (typeof e == "function") {
+    var t = function r() {
+      if (this instanceof r) {
+        var i = [null];
+        i.push.apply(i, arguments);
+        var n = Function.bind.apply(e, i);
+        return new n();
+      }
+      return e.apply(this, arguments);
+    };
+    t.prototype = e.prototype;
+  } else
+    t = {};
+  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(s).forEach(function(r) {
+    var i = Object.getOwnPropertyDescriptor(s, r);
+    Object.defineProperty(t, r, i.get ? i : {
+      enumerable: !0,
+      get: function() {
+        return s[r];
+      }
+    });
+  }), t;
+}
+const { Duplex: yt } = S;
+function Oe(s) {
+  s.emit("close");
+}
+function vt() {
+  !this.destroyed && this._writableState.finished && this.destroy();
+}
+function Qe(s) {
+  this.removeListener("error", Qe), this.destroy(), this.listenerCount("error") === 0 && this.emit("error", s);
+}
+function St(s, e) {
+  let t = !0;
+  const r = new yt({
+    ...e,
+    autoDestroy: !1,
+    emitClose: !1,
+    objectMode: !1,
+    writableObjectMode: !1
+  });
+  return s.on("message", function(n, o) {
+    const l = !o && r._readableState.objectMode ? n.toString() : n;
+    r.push(l) || s.pause();
+  }), s.once("error", function(n) {
+    r.destroyed || (t = !1, r.destroy(n));
+  }), s.once("close", function() {
+    r.destroyed || r.push(null);
+  }), r._destroy = function(i, n) {
+    if (s.readyState === s.CLOSED) {
+      n(i), process.nextTick(Oe, r);
+      return;
+    }
+    let o = !1;
+    s.once("error", function(f) {
+      o = !0, n(f);
+    }), s.once("close", function() {
+      o || n(i), process.nextTick(Oe, r);
+    }), t && s.terminate();
+  }, r._final = function(i) {
+    if (s.readyState === s.CONNECTING) {
+      s.once("open", function() {
+        r._final(i);
+      });
+      return;
+    }
+    s._socket !== null && (s._socket._writableState.finished ? (i(), r._readableState.endEmitted && r.destroy()) : (s._socket.once("finish", function() {
+      i();
+    }), s.close()));
+  }, r._read = function() {
+    s.isPaused && s.resume();
+  }, r._write = function(i, n, o) {
+    if (s.readyState === s.CONNECTING) {
+      s.once("open", function() {
+        r._write(i, n, o);
+      });
+      return;
+    }
+    s.send(i, o);
+  }, r.on("end", vt), r.on("error", Qe), r;
+}
+var Et = St;
+const Vs = /* @__PURE__ */ z(Et);
+var te = { exports: {} }, U = {
+  BINARY_TYPES: ["nodebuffer", "arraybuffer", "fragments"],
+  EMPTY_BUFFER: Buffer.alloc(0),
+  GUID: "258EAFA5-E914-47DA-95CA-C5AB0DC85B11",
+  kForOnEventAttribute: Symbol("kIsForOnEventAttribute"),
+  kListener: Symbol("kListener"),
+  kStatusCode: Symbol("status-code"),
+  kWebSocket: Symbol("websocket"),
+  NOOP: () => {
+  }
+}, bt, xt;
+const { EMPTY_BUFFER: kt } = U, Se = Buffer[Symbol.species];
+function wt(s, e) {
+  if (s.length === 0)
+    return kt;
+  if (s.length === 1)
+    return s[0];
+  const t = Buffer.allocUnsafe(e);
+  let r = 0;
+  for (let i = 0; i < s.length; i++) {
+    const n = s[i];
+    t.set(n, r), r += n.length;
+  }
+  return r < e ? new Se(t.buffer, t.byteOffset, r) : t;
+}
+function Je(s, e, t, r, i) {
+  for (let n = 0; n < i; n++)
+    t[r + n] = s[n] ^ e[n & 3];
+}
+function et(s, e) {
+  for (let t = 0; t < s.length; t++)
+    s[t] ^= e[t & 3];
+}
+function Ot(s) {
+  return s.length === s.buffer.byteLength ? s.buffer : s.buffer.slice(s.byteOffset, s.byteOffset + s.length);
+}
+function Ee(s) {
+  if (Ee.readOnly = !0, Buffer.isBuffer(s))
+    return s;
+  let e;
+  return s instanceof ArrayBuffer ? e = new Se(s) : ArrayBuffer.isView(s) ? e = new Se(s.buffer, s.byteOffset, s.byteLength) : (e = Buffer.from(s), Ee.readOnly = !1), e;
+}
+te.exports = {
+  concat: wt,
+  mask: Je,
+  toArrayBuffer: Ot,
+  toBuffer: Ee,
+  unmask: et
+};
+if (!process.env.WS_NO_BUFFER_UTIL)
+  try {
+    const s = require("bufferutil");
+    xt = te.exports.mask = function(e, t, r, i, n) {
+      n < 48 ? Je(e, t, r, i, n) : s.mask(e, t, r, i, n);
+    }, bt = te.exports.unmask = function(e, t) {
+      e.length < 32 ? et(e, t) : s.unmask(e, t);
+    };
+  } catch {
+  }
+var ne = te.exports;
+const Ce = Symbol("kDone"), ue = Symbol("kRun");
+let Ct = class {
+  /**
+   * Creates a new `Limiter`.
+   *
+   * @param {Number} [concurrency=Infinity] The maximum number of jobs allowed
+   *     to run concurrently
+   */
+  constructor(e) {
+    this[Ce] = () => {
+      this.pending--, this[ue]();
+    }, this.concurrency = e || 1 / 0, this.jobs = [], this.pending = 0;
+  }
+  /**
+   * Adds a job to the queue.
+   *
+   * @param {Function} job The job to run
+   * @public
+   */
+  add(e) {
+    this.jobs.push(e), this[ue]();
+  }
+  /**
+   * Removes a job from the queue and runs it if possible.
+   *
+   * @private
+   */
+  [ue]() {
+    if (this.pending !== this.concurrency && this.jobs.length) {
+      const e = this.jobs.shift();
+      this.pending++, e(this[Ce]);
+    }
+  }
+};
+var Tt = Ct;
+const W = S, Te = ne, Lt = Tt, { kStatusCode: tt } = U, Nt = Buffer[Symbol.species], Pt = Buffer.from([0, 0, 255, 255]), se = Symbol("permessage-deflate"), w = Symbol("total-length"), V = Symbol("callback"), C = Symbol("buffers"), J = Symbol("error");
+let K, Rt = class {
+  /**
+   * Creates a PerMessageDeflate instance.
+   *
+   * @param {Object} [options] Configuration options
+   * @param {(Boolean|Number)} [options.clientMaxWindowBits] Advertise support
+   *     for, or request, a custom client window size
+   * @param {Boolean} [options.clientNoContextTakeover=false] Advertise/
+   *     acknowledge disabling of client context takeover
+   * @param {Number} [options.concurrencyLimit=10] The number of concurrent
+   *     calls to zlib
+   * @param {(Boolean|Number)} [options.serverMaxWindowBits] Request/confirm the
+   *     use of a custom server window size
+   * @param {Boolean} [options.serverNoContextTakeover=false] Request/accept
+   *     disabling of server context takeover
+   * @param {Number} [options.threshold=1024] Size (in bytes) below which
+   *     messages should not be compressed if context takeover is disabled
+   * @param {Object} [options.zlibDeflateOptions] Options to pass to zlib on
+   *     deflate
+   * @param {Object} [options.zlibInflateOptions] Options to pass to zlib on
+   *     inflate
+   * @param {Boolean} [isServer=false] Create the instance in either server or
+   *     client mode
+   * @param {Number} [maxPayload=0] The maximum allowed message length
+   */
+  constructor(e, t, r) {
+    if (this._maxPayload = r | 0, this._options = e || {}, this._threshold = this._options.threshold !== void 0 ? this._options.threshold : 1024, this._isServer = !!t, this._deflate = null, this._inflate = null, this.params = null, !K) {
+      const i = this._options.concurrencyLimit !== void 0 ? this._options.concurrencyLimit : 10;
+      K = new Lt(i);
+    }
+  }
+  /**
+   * @type {String}
+   */
+  static get extensionName() {
+    return "permessage-deflate";
+  }
+  /**
+   * Create an extension negotiation offer.
+   *
+   * @return {Object} Extension parameters
+   * @public
+   */
+  offer() {
+    const e = {};
+    return this._options.serverNoContextTakeover && (e.server_no_context_takeover = !0), this._options.clientNoContextTakeover && (e.client_no_context_takeover = !0), this._options.serverMaxWindowBits && (e.server_max_window_bits = this._options.serverMaxWindowBits), this._options.clientMaxWindowBits ? e.client_max_window_bits = this._options.clientMaxWindowBits : this._options.clientMaxWindowBits == null && (e.client_max_window_bits = !0), e;
+  }
+  /**
+   * Accept an extension negotiation offer/response.
+   *
+   * @param {Array} configurations The extension negotiation offers/reponse
+   * @return {Object} Accepted configuration
+   * @public
+   */
+  accept(e) {
+    return e = this.normalizeParams(e), this.params = this._isServer ? this.acceptAsServer(e) : this.acceptAsClient(e), this.params;
+  }
+  /**
+   * Releases all resources used by the extension.
+   *
+   * @public
+   */
+  cleanup() {
+    if (this._inflate && (this._inflate.close(), this._inflate = null), this._deflate) {
+      const e = this._deflate[V];
+      this._deflate.close(), this._deflate = null, e && e(
+        new Error(
+          "The deflate stream was closed while data was being processed"
+        )
+      );
+    }
+  }
+  /**
+   *  Accept an extension negotiation offer.
+   *
+   * @param {Array} offers The extension negotiation offers
+   * @return {Object} Accepted configuration
+   * @private
+   */
+  acceptAsServer(e) {
+    const t = this._options, r = e.find((i) => !(t.serverNoContextTakeover === !1 && i.server_no_context_takeover || i.server_max_window_bits && (t.serverMaxWindowBits === !1 || typeof t.serverMaxWindowBits == "number" && t.serverMaxWindowBits > i.server_max_window_bits) || typeof t.clientMaxWindowBits == "number" && !i.client_max_window_bits));
+    if (!r)
+      throw new Error("None of the extension offers can be accepted");
+    return t.serverNoContextTakeover && (r.server_no_context_takeover = !0), t.clientNoContextTakeover && (r.client_no_context_takeover = !0), typeof t.serverMaxWindowBits == "number" && (r.server_max_window_bits = t.serverMaxWindowBits), typeof t.clientMaxWindowBits == "number" ? r.client_max_window_bits = t.clientMaxWindowBits : (r.client_max_window_bits === !0 || t.clientMaxWindowBits === !1) && delete r.client_max_window_bits, r;
+  }
+  /**
+   * Accept the extension negotiation response.
+   *
+   * @param {Array} response The extension negotiation response
+   * @return {Object} Accepted configuration
+   * @private
+   */
+  acceptAsClient(e) {
+    const t = e[0];
+    if (this._options.clientNoContextTakeover === !1 && t.client_no_context_takeover)
+      throw new Error('Unexpected parameter "client_no_context_takeover"');
+    if (!t.client_max_window_bits)
+      typeof this._options.clientMaxWindowBits == "number" && (t.client_max_window_bits = this._options.clientMaxWindowBits);
+    else if (this._options.clientMaxWindowBits === !1 || typeof this._options.clientMaxWindowBits == "number" && t.client_max_window_bits > this._options.clientMaxWindowBits)
+      throw new Error(
+        'Unexpected or invalid parameter "client_max_window_bits"'
+      );
+    return t;
+  }
+  /**
+   * Normalize parameters.
+   *
+   * @param {Array} configurations The extension negotiation offers/reponse
+   * @return {Array} The offers/response with normalized parameters
+   * @private
+   */
+  normalizeParams(e) {
+    return e.forEach((t) => {
+      Object.keys(t).forEach((r) => {
+        let i = t[r];
+        if (i.length > 1)
+          throw new Error(`Parameter "${r}" must have only a single value`);
+        if (i = i[0], r === "client_max_window_bits") {
+          if (i !== !0) {
+            const n = +i;
+            if (!Number.isInteger(n) || n < 8 || n > 15)
+              throw new TypeError(
+                `Invalid value for parameter "${r}": ${i}`
+              );
+            i = n;
+          } else if (!this._isServer)
+            throw new TypeError(
+              `Invalid value for parameter "${r}": ${i}`
+            );
+        } else if (r === "server_max_window_bits") {
+          const n = +i;
+          if (!Number.isInteger(n) || n < 8 || n > 15)
+            throw new TypeError(
+              `Invalid value for parameter "${r}": ${i}`
+            );
+          i = n;
+        } else if (r === "client_no_context_takeover" || r === "server_no_context_takeover") {
+          if (i !== !0)
+            throw new TypeError(
+              `Invalid value for parameter "${r}": ${i}`
+            );
+        } else
+          throw new Error(`Unknown parameter "${r}"`);
+        t[r] = i;
+      });
+    }), e;
+  }
+  /**
+   * Decompress data. Concurrency limited.
+   *
+   * @param {Buffer} data Compressed data
+   * @param {Boolean} fin Specifies whether or not this is the last fragment
+   * @param {Function} callback Callback
+   * @public
+   */
+  decompress(e, t, r) {
+    K.add((i) => {
+      this._decompress(e, t, (n, o) => {
+        i(), r(n, o);
+      });
+    });
+  }
+  /**
+   * Compress data. Concurrency limited.
+   *
+   * @param {(Buffer|String)} data Data to compress
+   * @param {Boolean} fin Specifies whether or not this is the last fragment
+   * @param {Function} callback Callback
+   * @public
+   */
+  compress(e, t, r) {
+    K.add((i) => {
+      this._compress(e, t, (n, o) => {
+        i(), r(n, o);
+      });
+    });
+  }
+  /**
+   * Decompress data.
+   *
+   * @param {Buffer} data Compressed data
+   * @param {Boolean} fin Specifies whether or not this is the last fragment
+   * @param {Function} callback Callback
+   * @private
+   */
+  _decompress(e, t, r) {
+    const i = this._isServer ? "client" : "server";
+    if (!this._inflate) {
+      const n = `${i}_max_window_bits`, o = typeof this.params[n] != "number" ? W.Z_DEFAULT_WINDOWBITS : this.params[n];
+      this._inflate = W.createInflateRaw({
+        ...this._options.zlibInflateOptions,
+        windowBits: o
+      }), this._inflate[se] = this, this._inflate[w] = 0, this._inflate[C] = [], this._inflate.on("error", Bt), this._inflate.on("data", st);
+    }
+    this._inflate[V] = r, this._inflate.write(e), t && this._inflate.write(Pt), this._inflate.flush(() => {
+      const n = this._inflate[J];
+      if (n) {
+        this._inflate.close(), this._inflate = null, r(n);
+        return;
+      }
+      const o = Te.concat(
+        this._inflate[C],
+        this._inflate[w]
+      );
+      this._inflate._readableState.endEmitted ? (this._inflate.close(), this._inflate = null) : (this._inflate[w] = 0, this._inflate[C] = [], t && this.params[`${i}_no_context_takeover`] && this._inflate.reset()), r(null, o);
+    });
+  }
+  /**
+   * Compress data.
+   *
+   * @param {(Buffer|String)} data Data to compress
+   * @param {Boolean} fin Specifies whether or not this is the last fragment
+   * @param {Function} callback Callback
+   * @private
+   */
+  _compress(e, t, r) {
+    const i = this._isServer ? "server" : "client";
+    if (!this._deflate) {
+      const n = `${i}_max_window_bits`, o = typeof this.params[n] != "number" ? W.Z_DEFAULT_WINDOWBITS : this.params[n];
+      this._deflate = W.createDeflateRaw({
+        ...this._options.zlibDeflateOptions,
+        windowBits: o
+      }), this._deflate[w] = 0, this._deflate[C] = [], this._deflate.on("data", Ut);
+    }
+    this._deflate[V] = r, this._deflate.write(e), this._deflate.flush(W.Z_SYNC_FLUSH, () => {
+      if (!this._deflate)
+        return;
+      let n = Te.concat(
+        this._deflate[C],
+        this._deflate[w]
+      );
+      t && (n = new Nt(n.buffer, n.byteOffset, n.length - 4)), this._deflate[V] = null, this._deflate[w] = 0, this._deflate[C] = [], t && this.params[`${i}_no_context_takeover`] && this._deflate.reset(), r(null, n);
+    });
+  }
+};
+var oe = Rt;
+function Ut(s) {
+  this[C].push(s), this[w] += s.length;
+}
+function st(s) {
+  if (this[w] += s.length, this[se]._maxPayload < 1 || this[w] <= this[se]._maxPayload) {
+    this[C].push(s);
+    return;
+  }
+  this[J] = new RangeError("Max payload size exceeded"), this[J].code = "WS_ERR_UNSUPPORTED_MESSAGE_LENGTH", this[J][tt] = 1009, this.removeListener("data", st), this.reset();
+}
+function Bt(s) {
+  this[se]._inflate = null, s[tt] = 1007, this[V](s);
+}
+var re = { exports: {} };
+const $t = {}, Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: $t
+}, Symbol.toStringTag, { value: "Module" })), It = /* @__PURE__ */ gt(Mt);
+var Le;
+const { isUtf8: Ne } = S, Dt = [
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  // 0 - 15
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  // 16 - 31
+  0,
+  1,
+  0,
+  1,
+  1,
+  1,
+  1,
+  1,
+  0,
+  0,
+  1,
+  1,
+  0,
+  1,
+  1,
+  0,
+  // 32 - 47
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  // 48 - 63
+  0,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  // 64 - 79
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  0,
+  0,
+  0,
+  1,
+  1,
+  // 80 - 95
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  // 96 - 111
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  0,
+  1,
+  0,
+  1,
+  0
+  // 112 - 127
+];
+function Wt(s) {
+  return s >= 1e3 && s <= 1014 && s !== 1004 && s !== 1005 && s !== 1006 || s >= 3e3 && s <= 4999;
+}
+function be(s) {
+  const e = s.length;
+  let t = 0;
+  for (; t < e; )
+    if (!(s[t] & 128))
+      t++;
+    else if ((s[t] & 224) === 192) {
+      if (t + 1 === e || (s[t + 1] & 192) !== 128 || (s[t] & 254) === 192)
+        return !1;
+      t += 2;
+    } else if ((s[t] & 240) === 224) {
+      if (t + 2 >= e || (s[t + 1] & 192) !== 128 || (s[t + 2] & 192) !== 128 || s[t] === 224 && (s[t + 1] & 224) === 128 || // Overlong
+      s[t] === 237 && (s[t + 1] & 224) === 160)
+        return !1;
+      t += 3;
+    } else if ((s[t] & 248) === 240) {
+      if (t + 3 >= e || (s[t + 1] & 192) !== 128 || (s[t + 2] & 192) !== 128 || (s[t + 3] & 192) !== 128 || s[t] === 240 && (s[t + 1] & 240) === 128 || // Overlong
+      s[t] === 244 && s[t + 1] > 143 || s[t] > 244)
+        return !1;
+      t += 4;
+    } else
+      return !1;
+  return !0;
+}
+re.exports = {
+  isValidStatusCode: Wt,
+  isValidUTF8: be,
+  tokenChars: Dt
+};
+if (Ne)
+  Le = re.exports.isValidUTF8 = function(s) {
+    return s.length < 24 ? be(s) : Ne(s);
+  };
+else if (!process.env.WS_NO_UTF_8_VALIDATE)
+  try {
+    const s = It;
+    Le = re.exports.isValidUTF8 = function(e) {
+      return e.length < 32 ? be(e) : s(e);
+    };
+  } catch {
+  }
+var ae = re.exports;
+const { Writable: At } = S, Pe = oe, {
+  BINARY_TYPES: Ft,
+  EMPTY_BUFFER: Re,
+  kStatusCode: jt,
+  kWebSocket: Gt
+} = U, { concat: de, toArrayBuffer: Vt, unmask: Ht } = ne, { isValidStatusCode: zt, isValidUTF8: Ue } = ae, X = Buffer[Symbol.species], A = 0, Be = 1, $e = 2, Me = 3, _e = 4, Yt = 5;
+let qt = class extends At {
+  /**
+   * Creates a Receiver instance.
+   *
+   * @param {Object} [options] Options object
+   * @param {String} [options.binaryType=nodebuffer] The type for binary data
+   * @param {Object} [options.extensions] An object containing the negotiated
+   *     extensions
+   * @param {Boolean} [options.isServer=false] Specifies whether to operate in
+   *     client or server mode
+   * @param {Number} [options.maxPayload=0] The maximum allowed message length
+   * @param {Boolean} [options.skipUTF8Validation=false] Specifies whether or
+   *     not to skip UTF-8 validation for text and close messages
+   */
+  constructor(e = {}) {
+    super(), this._binaryType = e.binaryType || Ft[0], this._extensions = e.extensions || {}, this._isServer = !!e.isServer, this._maxPayload = e.maxPayload | 0, this._skipUTF8Validation = !!e.skipUTF8Validation, this[Gt] = void 0, this._bufferedBytes = 0, this._buffers = [], this._compressed = !1, this._payloadLength = 0, this._mask = void 0, this._fragmented = 0, this._masked = !1, this._fin = !1, this._opcode = 0, this._totalPayloadLength = 0, this._messageLength = 0, this._fragments = [], this._state = A, this._loop = !1;
+  }
+  /**
+   * Implements `Writable.prototype._write()`.
+   *
+   * @param {Buffer} chunk The chunk of data to write
+   * @param {String} encoding The character encoding of `chunk`
+   * @param {Function} cb Callback
+   * @private
+   */
+  _write(e, t, r) {
+    if (this._opcode === 8 && this._state == A)
+      return r();
+    this._bufferedBytes += e.length, this._buffers.push(e), this.startLoop(r);
+  }
+  /**
+   * Consumes `n` bytes from the buffered data.
+   *
+   * @param {Number} n The number of bytes to consume
+   * @return {Buffer} The consumed bytes
+   * @private
+   */
+  consume(e) {
+    if (this._bufferedBytes -= e, e === this._buffers[0].length)
+      return this._buffers.shift();
+    if (e < this._buffers[0].length) {
+      const r = this._buffers[0];
+      return this._buffers[0] = new X(
+        r.buffer,
+        r.byteOffset + e,
+        r.length - e
+      ), new X(r.buffer, r.byteOffset, e);
+    }
+    const t = Buffer.allocUnsafe(e);
+    do {
+      const r = this._buffers[0], i = t.length - e;
+      e >= r.length ? t.set(this._buffers.shift(), i) : (t.set(new Uint8Array(r.buffer, r.byteOffset, e), i), this._buffers[0] = new X(
+        r.buffer,
+        r.byteOffset + e,
+        r.length - e
+      )), e -= r.length;
+    } while (e > 0);
+    return t;
+  }
+  /**
+   * Starts the parsing loop.
+   *
+   * @param {Function} cb Callback
+   * @private
+   */
+  startLoop(e) {
+    let t;
+    this._loop = !0;
+    do
+      switch (this._state) {
+        case A:
+          t = this.getInfo();
+          break;
+        case Be:
+          t = this.getPayloadLength16();
+          break;
+        case $e:
+          t = this.getPayloadLength64();
+          break;
+        case Me:
+          this.getMask();
+          break;
+        case _e:
+          t = this.getData(e);
+          break;
+        default:
+          this._loop = !1;
+          return;
+      }
+    while (this._loop);
+    e(t);
+  }
+  /**
+   * Reads the first two bytes of a frame.
+   *
+   * @return {(RangeError|undefined)} A possible error
+   * @private
+   */
+  getInfo() {
+    if (this._bufferedBytes < 2) {
+      this._loop = !1;
+      return;
+    }
+    const e = this.consume(2);
+    if (e[0] & 48)
+      return this._loop = !1, g(
+        RangeError,
+        "RSV2 and RSV3 must be clear",
+        !0,
+        1002,
+        "WS_ERR_UNEXPECTED_RSV_2_3"
+      );
+    const t = (e[0] & 64) === 64;
+    if (t && !this._extensions[Pe.extensionName])
+      return this._loop = !1, g(
+        RangeError,
+        "RSV1 must be clear",
+        !0,
+        1002,
+        "WS_ERR_UNEXPECTED_RSV_1"
+      );
+    if (this._fin = (e[0] & 128) === 128, this._opcode = e[0] & 15, this._payloadLength = e[1] & 127, this._opcode === 0) {
+      if (t)
+        return this._loop = !1, g(
+          RangeError,
+          "RSV1 must be clear",
+          !0,
+          1002,
+          "WS_ERR_UNEXPECTED_RSV_1"
+        );
+      if (!this._fragmented)
+        return this._loop = !1, g(
+          RangeError,
+          "invalid opcode 0",
+          !0,
+          1002,
+          "WS_ERR_INVALID_OPCODE"
+        );
+      this._opcode = this._fragmented;
+    } else if (this._opcode === 1 || this._opcode === 2) {
+      if (this._fragmented)
+        return this._loop = !1, g(
+          RangeError,
+          `invalid opcode ${this._opcode}`,
+          !0,
+          1002,
+          "WS_ERR_INVALID_OPCODE"
+        );
+      this._compressed = t;
+    } else if (this._opcode > 7 && this._opcode < 11) {
+      if (!this._fin)
+        return this._loop = !1, g(
+          RangeError,
+          "FIN must be set",
+          !0,
+          1002,
+          "WS_ERR_EXPECTED_FIN"
+        );
+      if (t)
+        return this._loop = !1, g(
+          RangeError,
+          "RSV1 must be clear",
+          !0,
+          1002,
+          "WS_ERR_UNEXPECTED_RSV_1"
+        );
+      if (this._payloadLength > 125 || this._opcode === 8 && this._payloadLength === 1)
+        return this._loop = !1, g(
+          RangeError,
+          `invalid payload length ${this._payloadLength}`,
+          !0,
+          1002,
+          "WS_ERR_INVALID_CONTROL_PAYLOAD_LENGTH"
+        );
+    } else
+      return this._loop = !1, g(
+        RangeError,
+        `invalid opcode ${this._opcode}`,
+        !0,
+        1002,
+        "WS_ERR_INVALID_OPCODE"
+      );
+    if (!this._fin && !this._fragmented && (this._fragmented = this._opcode), this._masked = (e[1] & 128) === 128, this._isServer) {
+      if (!this._masked)
+        return this._loop = !1, g(
+          RangeError,
+          "MASK must be set",
+          !0,
+          1002,
+          "WS_ERR_EXPECTED_MASK"
+        );
+    } else if (this._masked)
+      return this._loop = !1, g(
+        RangeError,
+        "MASK must be clear",
+        !0,
+        1002,
+        "WS_ERR_UNEXPECTED_MASK"
+      );
+    if (this._payloadLength === 126)
+      this._state = Be;
+    else if (this._payloadLength === 127)
+      this._state = $e;
+    else
+      return this.haveLength();
+  }
+  /**
+   * Gets extended payload length (7+16).
+   *
+   * @return {(RangeError|undefined)} A possible error
+   * @private
+   */
+  getPayloadLength16() {
+    if (this._bufferedBytes < 2) {
+      this._loop = !1;
+      return;
+    }
+    return this._payloadLength = this.consume(2).readUInt16BE(0), this.haveLength();
+  }
+  /**
+   * Gets extended payload length (7+64).
+   *
+   * @return {(RangeError|undefined)} A possible error
+   * @private
+   */
+  getPayloadLength64() {
+    if (this._bufferedBytes < 8) {
+      this._loop = !1;
+      return;
+    }
+    const e = this.consume(8), t = e.readUInt32BE(0);
+    return t > Math.pow(2, 53 - 32) - 1 ? (this._loop = !1, g(
+      RangeError,
+      "Unsupported WebSocket frame: payload length > 2^53 - 1",
+      !1,
+      1009,
+      "WS_ERR_UNSUPPORTED_DATA_PAYLOAD_LENGTH"
+    )) : (this._payloadLength = t * Math.pow(2, 32) + e.readUInt32BE(4), this.haveLength());
+  }
+  /**
+   * Payload length has been read.
+   *
+   * @return {(RangeError|undefined)} A possible error
+   * @private
+   */
+  haveLength() {
+    if (this._payloadLength && this._opcode < 8 && (this._totalPayloadLength += this._payloadLength, this._totalPayloadLength > this._maxPayload && this._maxPayload > 0))
+      return this._loop = !1, g(
+        RangeError,
+        "Max payload size exceeded",
+        !1,
+        1009,
+        "WS_ERR_UNSUPPORTED_MESSAGE_LENGTH"
+      );
+    this._masked ? this._state = Me : this._state = _e;
+  }
+  /**
+   * Reads mask bytes.
+   *
+   * @private
+   */
+  getMask() {
+    if (this._bufferedBytes < 4) {
+      this._loop = !1;
+      return;
+    }
+    this._mask = this.consume(4), this._state = _e;
+  }
+  /**
+   * Reads data bytes.
+   *
+   * @param {Function} cb Callback
+   * @return {(Error|RangeError|undefined)} A possible error
+   * @private
+   */
+  getData(e) {
+    let t = Re;
+    if (this._payloadLength) {
+      if (this._bufferedBytes < this._payloadLength) {
+        this._loop = !1;
+        return;
+      }
+      t = this.consume(this._payloadLength), this._masked && this._mask[0] | this._mask[1] | this._mask[2] | this._mask[3] && Ht(t, this._mask);
+    }
+    if (this._opcode > 7)
+      return this.controlMessage(t);
+    if (this._compressed) {
+      this._state = Yt, this.decompress(t, e);
+      return;
+    }
+    return t.length && (this._messageLength = this._totalPayloadLength, this._fragments.push(t)), this.dataMessage();
+  }
+  /**
+   * Decompresses data.
+   *
+   * @param {Buffer} data Compressed data
+   * @param {Function} cb Callback
+   * @private
+   */
+  decompress(e, t) {
+    this._extensions[Pe.extensionName].decompress(e, this._fin, (i, n) => {
+      if (i)
+        return t(i);
+      if (n.length) {
+        if (this._messageLength += n.length, this._messageLength > this._maxPayload && this._maxPayload > 0)
+          return t(
+            g(
+              RangeError,
+              "Max payload size exceeded",
+              !1,
+              1009,
+              "WS_ERR_UNSUPPORTED_MESSAGE_LENGTH"
+            )
+          );
+        this._fragments.push(n);
+      }
+      const o = this.dataMessage();
+      if (o)
+        return t(o);
+      this.startLoop(t);
+    });
+  }
+  /**
+   * Handles a data message.
+   *
+   * @return {(Error|undefined)} A possible error
+   * @private
+   */
+  dataMessage() {
+    if (this._fin) {
+      const e = this._messageLength, t = this._fragments;
+      if (this._totalPayloadLength = 0, this._messageLength = 0, this._fragmented = 0, this._fragments = [], this._opcode === 2) {
+        let r;
+        this._binaryType === "nodebuffer" ? r = de(t, e) : this._binaryType === "arraybuffer" ? r = Vt(de(t, e)) : r = t, this.emit("message", r, !0);
+      } else {
+        const r = de(t, e);
+        if (!this._skipUTF8Validation && !Ue(r))
+          return this._loop = !1, g(
+            Error,
+            "invalid UTF-8 sequence",
+            !0,
+            1007,
+            "WS_ERR_INVALID_UTF8"
+          );
+        this.emit("message", r, !1);
+      }
+    }
+    this._state = A;
+  }
+  /**
+   * Handles a control message.
+   *
+   * @param {Buffer} data Data to handle
+   * @return {(Error|RangeError|undefined)} A possible error
+   * @private
+   */
+  controlMessage(e) {
+    if (this._opcode === 8)
+      if (this._loop = !1, e.length === 0)
+        this.emit("conclude", 1005, Re), this.end();
+      else {
+        const t = e.readUInt16BE(0);
+        if (!zt(t))
+          return g(
+            RangeError,
+            `invalid status code ${t}`,
+            !0,
+            1002,
+            "WS_ERR_INVALID_CLOSE_CODE"
+          );
+        const r = new X(
+          e.buffer,
+          e.byteOffset + 2,
+          e.length - 2
+        );
+        if (!this._skipUTF8Validation && !Ue(r))
+          return g(
+            Error,
+            "invalid UTF-8 sequence",
+            !0,
+            1007,
+            "WS_ERR_INVALID_UTF8"
+          );
+        this.emit("conclude", t, r), this.end();
+      }
+    else
+      this._opcode === 9 ? this.emit("ping", e) : this.emit("pong", e);
+    this._state = A;
+  }
+};
+var rt = qt;
+function g(s, e, t, r, i) {
+  const n = new s(
+    t ? `Invalid WebSocket frame: ${e}` : e
+  );
+  return Error.captureStackTrace(n, g), n.code = i, n[jt] = r, n;
+}
+const qs = /* @__PURE__ */ z(rt), { randomFillSync: Kt } = S, Ie = oe, { EMPTY_BUFFER: Xt } = U, { isValidStatusCode: Zt } = ae, { mask: De, toBuffer: M } = ne, x = Symbol("kByteLength"), Qt = Buffer.alloc(4);
+let Jt = class P {
+  /**
+   * Creates a Sender instance.
+   *
+   * @param {(net.Socket|tls.Socket)} socket The connection socket
+   * @param {Object} [extensions] An object containing the negotiated extensions
+   * @param {Function} [generateMask] The function used to generate the masking
+   *     key
+   */
+  constructor(e, t, r) {
+    this._extensions = t || {}, r && (this._generateMask = r, this._maskBuffer = Buffer.alloc(4)), this._socket = e, this._firstFragment = !0, this._compress = !1, this._bufferedBytes = 0, this._deflating = !1, this._queue = [];
+  }
+  /**
+   * Frames a piece of data according to the HyBi WebSocket protocol.
+   *
+   * @param {(Buffer|String)} data The data to frame
+   * @param {Object} options Options object
+   * @param {Boolean} [options.fin=false] Specifies whether or not to set the
+   *     FIN bit
+   * @param {Function} [options.generateMask] The function used to generate the
+   *     masking key
+   * @param {Boolean} [options.mask=false] Specifies whether or not to mask
+   *     `data`
+   * @param {Buffer} [options.maskBuffer] The buffer used to store the masking
+   *     key
+   * @param {Number} options.opcode The opcode
+   * @param {Boolean} [options.readOnly=false] Specifies whether `data` can be
+   *     modified
+   * @param {Boolean} [options.rsv1=false] Specifies whether or not to set the
+   *     RSV1 bit
+   * @return {(Buffer|String)[]} The framed data
+   * @public
+   */
+  static frame(e, t) {
+    let r, i = !1, n = 2, o = !1;
+    t.mask && (r = t.maskBuffer || Qt, t.generateMask ? t.generateMask(r) : Kt(r, 0, 4), o = (r[0] | r[1] | r[2] | r[3]) === 0, n = 6);
+    let l;
+    typeof e == "string" ? (!t.mask || o) && t[x] !== void 0 ? l = t[x] : (e = Buffer.from(e), l = e.length) : (l = e.length, i = t.mask && t.readOnly && !o);
+    let f = l;
+    l >= 65536 ? (n += 8, f = 127) : l > 125 && (n += 2, f = 126);
+    const a = Buffer.allocUnsafe(i ? l + n : n);
+    return a[0] = t.fin ? t.opcode | 128 : t.opcode, t.rsv1 && (a[0] |= 64), a[1] = f, f === 126 ? a.writeUInt16BE(l, 2) : f === 127 && (a[2] = a[3] = 0, a.writeUIntBE(l, 4, 6)), t.mask ? (a[1] |= 128, a[n - 4] = r[0], a[n - 3] = r[1], a[n - 2] = r[2], a[n - 1] = r[3], o ? [a, e] : i ? (De(e, r, a, n, l), [a]) : (De(e, r, e, 0, l), [a, e])) : [a, e];
+  }
+  /**
+   * Sends a close message to the other peer.
+   *
+   * @param {Number} [code] The status code component of the body
+   * @param {(String|Buffer)} [data] The message component of the body
+   * @param {Boolean} [mask=false] Specifies whether or not to mask the message
+   * @param {Function} [cb] Callback
+   * @public
+   */
+  close(e, t, r, i) {
+    let n;
+    if (e === void 0)
+      n = Xt;
+    else {
+      if (typeof e != "number" || !Zt(e))
+        throw new TypeError("First argument must be a valid error code number");
+      if (t === void 0 || !t.length)
+        n = Buffer.allocUnsafe(2), n.writeUInt16BE(e, 0);
+      else {
+        const l = Buffer.byteLength(t);
+        if (l > 123)
+          throw new RangeError("The message must not be greater than 123 bytes");
+        n = Buffer.allocUnsafe(2 + l), n.writeUInt16BE(e, 0), typeof t == "string" ? n.write(t, 2) : n.set(t, 2);
+      }
+    }
+    const o = {
+      [x]: n.length,
+      fin: !0,
+      generateMask: this._generateMask,
+      mask: r,
+      maskBuffer: this._maskBuffer,
+      opcode: 8,
+      readOnly: !1,
+      rsv1: !1
+    };
+    this._deflating ? this.enqueue([this.dispatch, n, !1, o, i]) : this.sendFrame(P.frame(n, o), i);
+  }
+  /**
+   * Sends a ping message to the other peer.
+   *
+   * @param {*} data The message to send
+   * @param {Boolean} [mask=false] Specifies whether or not to mask `data`
+   * @param {Function} [cb] Callback
+   * @public
+   */
+  ping(e, t, r) {
+    let i, n;
+    if (typeof e == "string" ? (i = Buffer.byteLength(e), n = !1) : (e = M(e), i = e.length, n = M.readOnly), i > 125)
+      throw new RangeError("The data size must not be greater than 125 bytes");
+    const o = {
+      [x]: i,
+      fin: !0,
+      generateMask: this._generateMask,
+      mask: t,
+      maskBuffer: this._maskBuffer,
+      opcode: 9,
+      readOnly: n,
+      rsv1: !1
+    };
+    this._deflating ? this.enqueue([this.dispatch, e, !1, o, r]) : this.sendFrame(P.frame(e, o), r);
+  }
+  /**
+   * Sends a pong message to the other peer.
+   *
+   * @param {*} data The message to send
+   * @param {Boolean} [mask=false] Specifies whether or not to mask `data`
+   * @param {Function} [cb] Callback
+   * @public
+   */
+  pong(e, t, r) {
+    let i, n;
+    if (typeof e == "string" ? (i = Buffer.byteLength(e), n = !1) : (e = M(e), i = e.length, n = M.readOnly), i > 125)
+      throw new RangeError("The data size must not be greater than 125 bytes");
+    const o = {
+      [x]: i,
+      fin: !0,
+      generateMask: this._generateMask,
+      mask: t,
+      maskBuffer: this._maskBuffer,
+      opcode: 10,
+      readOnly: n,
+      rsv1: !1
+    };
+    this._deflating ? this.enqueue([this.dispatch, e, !1, o, r]) : this.sendFrame(P.frame(e, o), r);
+  }
+  /**
+   * Sends a data message to the other peer.
+   *
+   * @param {*} data The message to send
+   * @param {Object} options Options object
+   * @param {Boolean} [options.binary=false] Specifies whether `data` is binary
+   *     or text
+   * @param {Boolean} [options.compress=false] Specifies whether or not to
+   *     compress `data`
+   * @param {Boolean} [options.fin=false] Specifies whether the fragment is the
+   *     last one
+   * @param {Boolean} [options.mask=false] Specifies whether or not to mask
+   *     `data`
+   * @param {Function} [cb] Callback
+   * @public
+   */
+  send(e, t, r) {
+    const i = this._extensions[Ie.extensionName];
+    let n = t.binary ? 2 : 1, o = t.compress, l, f;
+    if (typeof e == "string" ? (l = Buffer.byteLength(e), f = !1) : (e = M(e), l = e.length, f = M.readOnly), this._firstFragment ? (this._firstFragment = !1, o && i && i.params[i._isServer ? "server_no_context_takeover" : "client_no_context_takeover"] && (o = l >= i._threshold), this._compress = o) : (o = !1, n = 0), t.fin && (this._firstFragment = !0), i) {
+      const a = {
+        [x]: l,
+        fin: t.fin,
+        generateMask: this._generateMask,
+        mask: t.mask,
+        maskBuffer: this._maskBuffer,
+        opcode: n,
+        readOnly: f,
+        rsv1: o
+      };
+      this._deflating ? this.enqueue([this.dispatch, e, this._compress, a, r]) : this.dispatch(e, this._compress, a, r);
+    } else
+      this.sendFrame(
+        P.frame(e, {
+          [x]: l,
+          fin: t.fin,
+          generateMask: this._generateMask,
+          mask: t.mask,
+          maskBuffer: this._maskBuffer,
+          opcode: n,
+          readOnly: f,
+          rsv1: !1
+        }),
+        r
+      );
+  }
+  /**
+   * Dispatches a message.
+   *
+   * @param {(Buffer|String)} data The message to send
+   * @param {Boolean} [compress=false] Specifies whether or not to compress
+   *     `data`
+   * @param {Object} options Options object
+   * @param {Boolean} [options.fin=false] Specifies whether or not to set the
+   *     FIN bit
+   * @param {Function} [options.generateMask] The function used to generate the
+   *     masking key
+   * @param {Boolean} [options.mask=false] Specifies whether or not to mask
+   *     `data`
+   * @param {Buffer} [options.maskBuffer] The buffer used to store the masking
+   *     key
+   * @param {Number} options.opcode The opcode
+   * @param {Boolean} [options.readOnly=false] Specifies whether `data` can be
+   *     modified
+   * @param {Boolean} [options.rsv1=false] Specifies whether or not to set the
+   *     RSV1 bit
+   * @param {Function} [cb] Callback
+   * @private
+   */
+  dispatch(e, t, r, i) {
+    if (!t) {
+      this.sendFrame(P.frame(e, r), i);
+      return;
+    }
+    const n = this._extensions[Ie.extensionName];
+    this._bufferedBytes += r[x], this._deflating = !0, n.compress(e, r.fin, (o, l) => {
+      if (this._socket.destroyed) {
+        const f = new Error(
+          "The socket was closed while data was being compressed"
+        );
+        typeof i == "function" && i(f);
+        for (let a = 0; a < this._queue.length; a++) {
+          const c = this._queue[a], h = c[c.length - 1];
+          typeof h == "function" && h(f);
+        }
+        return;
+      }
+      this._bufferedBytes -= r[x], this._deflating = !1, r.readOnly = !1, this.sendFrame(P.frame(l, r), i), this.dequeue();
+    });
+  }
+  /**
+   * Executes queued send operations.
+   *
+   * @private
+   */
+  dequeue() {
+    for (; !this._deflating && this._queue.length; ) {
+      const e = this._queue.shift();
+      this._bufferedBytes -= e[3][x], Reflect.apply(e[0], this, e.slice(1));
+    }
+  }
+  /**
+   * Enqueues a send operation.
+   *
+   * @param {Array} params Send operation parameters.
+   * @private
+   */
+  enqueue(e) {
+    this._bufferedBytes += e[3][x], this._queue.push(e);
+  }
+  /**
+   * Sends a frame.
+   *
+   * @param {Buffer[]} list The frame to send
+   * @param {Function} [cb] Callback
+   * @private
+   */
+  sendFrame(e, t) {
+    e.length === 2 ? (this._socket.cork(), this._socket.write(e[0]), this._socket.write(e[1], t), this._socket.uncork()) : this._socket.write(e[0], t);
+  }
+};
+var it = Jt;
+const Ks = /* @__PURE__ */ z(it), { kForOnEventAttribute: F, kListener: pe } = U, We = Symbol("kCode"), Ae = Symbol("kData"), Fe = Symbol("kError"), je = Symbol("kMessage"), Ge = Symbol("kReason"), I = Symbol("kTarget"), Ve = Symbol("kType"), He = Symbol("kWasClean");
+class B {
+  /**
+   * Create a new `Event`.
+   *
+   * @param {String} type The name of the event
+   * @throws {TypeError} If the `type` argument is not specified
+   */
+  constructor(e) {
+    this[I] = null, this[Ve] = e;
+  }
+  /**
+   * @type {*}
+   */
+  get target() {
+    return this[I];
+  }
+  /**
+   * @type {String}
+   */
+  get type() {
+    return this[Ve];
+  }
+}
+Object.defineProperty(B.prototype, "target", { enumerable: !0 });
+Object.defineProperty(B.prototype, "type", { enumerable: !0 });
+class Y extends B {
+  /**
+   * Create a new `CloseEvent`.
+   *
+   * @param {String} type The name of the event
+   * @param {Object} [options] A dictionary object that allows for setting
+   *     attributes via object members of the same name
+   * @param {Number} [options.code=0] The status code explaining why the
+   *     connection was closed
+   * @param {String} [options.reason=''] A human-readable string explaining why
+   *     the connection was closed
+   * @param {Boolean} [options.wasClean=false] Indicates whether or not the
+   *     connection was cleanly closed
+   */
+  constructor(e, t = {}) {
+    super(e), this[We] = t.code === void 0 ? 0 : t.code, this[Ge] = t.reason === void 0 ? "" : t.reason, this[He] = t.wasClean === void 0 ? !1 : t.wasClean;
+  }
+  /**
+   * @type {Number}
+   */
+  get code() {
+    return this[We];
+  }
+  /**
+   * @type {String}
+   */
+  get reason() {
+    return this[Ge];
+  }
+  /**
+   * @type {Boolean}
+   */
+  get wasClean() {
+    return this[He];
+  }
+}
+Object.defineProperty(Y.prototype, "code", { enumerable: !0 });
+Object.defineProperty(Y.prototype, "reason", { enumerable: !0 });
+Object.defineProperty(Y.prototype, "wasClean", { enumerable: !0 });
+class le extends B {
+  /**
+   * Create a new `ErrorEvent`.
+   *
+   * @param {String} type The name of the event
+   * @param {Object} [options] A dictionary object that allows for setting
+   *     attributes via object members of the same name
+   * @param {*} [options.error=null] The error that generated this event
+   * @param {String} [options.message=''] The error message
+   */
+  constructor(e, t = {}) {
+    super(e), this[Fe] = t.error === void 0 ? null : t.error, this[je] = t.message === void 0 ? "" : t.message;
+  }
+  /**
+   * @type {*}
+   */
+  get error() {
+    return this[Fe];
+  }
+  /**
+   * @type {String}
+   */
+  get message() {
+    return this[je];
+  }
+}
+Object.defineProperty(le.prototype, "error", { enumerable: !0 });
+Object.defineProperty(le.prototype, "message", { enumerable: !0 });
+class xe extends B {
+  /**
+   * Create a new `MessageEvent`.
+   *
+   * @param {String} type The name of the event
+   * @param {Object} [options] A dictionary object that allows for setting
+   *     attributes via object members of the same name
+   * @param {*} [options.data=null] The message content
+   */
+  constructor(e, t = {}) {
+    super(e), this[Ae] = t.data === void 0 ? null : t.data;
+  }
+  /**
+   * @type {*}
+   */
+  get data() {
+    return this[Ae];
+  }
+}
+Object.defineProperty(xe.prototype, "data", { enumerable: !0 });
+const es = {
+  /**
+   * Register an event listener.
+   *
+   * @param {String} type A string representing the event type to listen for
+   * @param {(Function|Object)} handler The listener to add
+   * @param {Object} [options] An options object specifies characteristics about
+   *     the event listener
+   * @param {Boolean} [options.once=false] A `Boolean` indicating that the
+   *     listener should be invoked at most once after being added. If `true`,
+   *     the listener would be automatically removed when invoked.
+   * @public
+   */
+  addEventListener(s, e, t = {}) {
+    for (const i of this.listeners(s))
+      if (!t[F] && i[pe] === e && !i[F])
+        return;
+    let r;
+    if (s === "message")
+      r = function(n, o) {
+        const l = new xe("message", {
+          data: o ? n : n.toString()
+        });
+        l[I] = this, Z(e, this, l);
+      };
+    else if (s === "close")
+      r = function(n, o) {
+        const l = new Y("close", {
+          code: n,
+          reason: o.toString(),
+          wasClean: this._closeFrameReceived && this._closeFrameSent
+        });
+        l[I] = this, Z(e, this, l);
+      };
+    else if (s === "error")
+      r = function(n) {
+        const o = new le("error", {
+          error: n,
+          message: n.message
+        });
+        o[I] = this, Z(e, this, o);
+      };
+    else if (s === "open")
+      r = function() {
+        const n = new B("open");
+        n[I] = this, Z(e, this, n);
+      };
+    else
+      return;
+    r[F] = !!t[F], r[pe] = e, t.once ? this.once(s, r) : this.on(s, r);
+  },
+  /**
+   * Remove an event listener.
+   *
+   * @param {String} type A string representing the event type to remove
+   * @param {(Function|Object)} handler The listener to remove
+   * @public
+   */
+  removeEventListener(s, e) {
+    for (const t of this.listeners(s))
+      if (t[pe] === e && !t[F]) {
+        this.removeListener(s, t);
+        break;
+      }
+  }
+};
+var ts = {
+  CloseEvent: Y,
+  ErrorEvent: le,
+  Event: B,
+  EventTarget: es,
+  MessageEvent: xe
+};
+function Z(s, e, t) {
+  typeof s == "object" && s.handleEvent ? s.handleEvent.call(s, t) : s.call(e, t);
+}
+const { tokenChars: j } = ae;
+function k(s, e, t) {
+  s[e] === void 0 ? s[e] = [t] : s[e].push(t);
+}
+function ss(s) {
+  const e = /* @__PURE__ */ Object.create(null);
+  let t = /* @__PURE__ */ Object.create(null), r = !1, i = !1, n = !1, o, l, f = -1, a = -1, c = -1, h = 0;
+  for (; h < s.length; h++)
+    if (a = s.charCodeAt(h), o === void 0)
+      if (c === -1 && j[a] === 1)
+        f === -1 && (f = h);
+      else if (h !== 0 && (a === 32 || a === 9))
+        c === -1 && f !== -1 && (c = h);
+      else if (a === 59 || a === 44) {
+        if (f === -1)
+          throw new SyntaxError(`Unexpected character at index ${h}`);
+        c === -1 && (c = h);
+        const v = s.slice(f, c);
+        a === 44 ? (k(e, v, t), t = /* @__PURE__ */ Object.create(null)) : o = v, f = c = -1;
+      } else
+        throw new SyntaxError(`Unexpected character at index ${h}`);
+    else if (l === void 0)
+      if (c === -1 && j[a] === 1)
+        f === -1 && (f = h);
+      else if (a === 32 || a === 9)
+        c === -1 && f !== -1 && (c = h);
+      else if (a === 59 || a === 44) {
+        if (f === -1)
+          throw new SyntaxError(`Unexpected character at index ${h}`);
+        c === -1 && (c = h), k(t, s.slice(f, c), !0), a === 44 && (k(e, o, t), t = /* @__PURE__ */ Object.create(null), o = void 0), f = c = -1;
+      } else if (a === 61 && f !== -1 && c === -1)
+        l = s.slice(f, h), f = c = -1;
+      else
+        throw new SyntaxError(`Unexpected character at index ${h}`);
+    else if (i) {
+      if (j[a] !== 1)
+        throw new SyntaxError(`Unexpected character at index ${h}`);
+      f === -1 ? f = h : r || (r = !0), i = !1;
+    } else if (n)
+      if (j[a] === 1)
+        f === -1 && (f = h);
+      else if (a === 34 && f !== -1)
+        n = !1, c = h;
+      else if (a === 92)
+        i = !0;
+      else
+        throw new SyntaxError(`Unexpected character at index ${h}`);
+    else if (a === 34 && s.charCodeAt(h - 1) === 61)
+      n = !0;
+    else if (c === -1 && j[a] === 1)
+      f === -1 && (f = h);
+    else if (f !== -1 && (a === 32 || a === 9))
+      c === -1 && (c = h);
+    else if (a === 59 || a === 44) {
+      if (f === -1)
+        throw new SyntaxError(`Unexpected character at index ${h}`);
+      c === -1 && (c = h);
+      let v = s.slice(f, c);
+      r && (v = v.replace(/\\/g, ""), r = !1), k(t, l, v), a === 44 && (k(e, o, t), t = /* @__PURE__ */ Object.create(null), o = void 0), l = void 0, f = c = -1;
+    } else
+      throw new SyntaxError(`Unexpected character at index ${h}`);
+  if (f === -1 || n || a === 32 || a === 9)
+    throw new SyntaxError("Unexpected end of input");
+  c === -1 && (c = h);
+  const p = s.slice(f, c);
+  return o === void 0 ? k(e, p, t) : (l === void 0 ? k(t, p, !0) : r ? k(t, l, p.replace(/\\/g, "")) : k(t, l, p), k(e, o, t)), e;
+}
+function rs(s) {
+  return Object.keys(s).map((e) => {
+    let t = s[e];
+    return Array.isArray(t) || (t = [t]), t.map((r) => [e].concat(
+      Object.keys(r).map((i) => {
+        let n = r[i];
+        return Array.isArray(n) || (n = [n]), n.map((o) => o === !0 ? i : `${i}=${o}`).join("; ");
+      })
+    ).join("; ")).join(", ");
+  }).join(", ");
+}
+var nt = { format: rs, parse: ss };
+const is = S, ns = S, os = S, ot = S, as = S, { randomBytes: ls, createHash: fs } = S, { URL: me } = S, T = oe, hs = rt, cs = it, {
+  BINARY_TYPES: ze,
+  EMPTY_BUFFER: Q,
+  GUID: us,
+  kForOnEventAttribute: ge,
+  kListener: ds,
+  kStatusCode: _s,
+  kWebSocket: y,
+  NOOP: at
+} = U, {
+  EventTarget: { addEventListener: ps, removeEventListener: ms }
+} = ts, { format: gs, parse: ys } = nt, { toBuffer: vs } = ne, Ss = 30 * 1e3, lt = Symbol("kAborted"), ye = [8, 13], O = ["CONNECTING", "OPEN", "CLOSING", "CLOSED"], Es = /^[!#$%&'*+\-.0-9A-Z^_`|a-z~]+$/;
+let m = class d extends is {
+  /**
+   * Create a new `WebSocket`.
+   *
+   * @param {(String|URL)} address The URL to which to connect
+   * @param {(String|String[])} [protocols] The subprotocols
+   * @param {Object} [options] Connection options
+   */
+  constructor(e, t, r) {
+    super(), this._binaryType = ze[0], this._closeCode = 1006, this._closeFrameReceived = !1, this._closeFrameSent = !1, this._closeMessage = Q, this._closeTimer = null, this._extensions = {}, this._paused = !1, this._protocol = "", this._readyState = d.CONNECTING, this._receiver = null, this._sender = null, this._socket = null, e !== null ? (this._bufferedAmount = 0, this._isServer = !1, this._redirects = 0, t === void 0 ? t = [] : Array.isArray(t) || (typeof t == "object" && t !== null ? (r = t, t = []) : t = [t]), ht(this, e, t, r)) : this._isServer = !0;
+  }
+  /**
+   * This deviates from the WHATWG interface since ws doesn't support the
+   * required default "blob" type (instead we define a custom "nodebuffer"
+   * type).
+   *
+   * @type {String}
+   */
+  get binaryType() {
+    return this._binaryType;
+  }
+  set binaryType(e) {
+    ze.includes(e) && (this._binaryType = e, this._receiver && (this._receiver._binaryType = e));
+  }
+  /**
+   * @type {Number}
+   */
+  get bufferedAmount() {
+    return this._socket ? this._socket._writableState.length + this._sender._bufferedBytes : this._bufferedAmount;
+  }
+  /**
+   * @type {String}
+   */
+  get extensions() {
+    return Object.keys(this._extensions).join();
+  }
+  /**
+   * @type {Boolean}
+   */
+  get isPaused() {
+    return this._paused;
+  }
+  /**
+   * @type {Function}
+   */
+  /* istanbul ignore next */
+  get onclose() {
+    return null;
+  }
+  /**
+   * @type {Function}
+   */
+  /* istanbul ignore next */
+  get onerror() {
+    return null;
+  }
+  /**
+   * @type {Function}
+   */
+  /* istanbul ignore next */
+  get onopen() {
+    return null;
+  }
+  /**
+   * @type {Function}
+   */
+  /* istanbul ignore next */
+  get onmessage() {
+    return null;
+  }
+  /**
+   * @type {String}
+   */
+  get protocol() {
+    return this._protocol;
+  }
+  /**
+   * @type {Number}
+   */
+  get readyState() {
+    return this._readyState;
+  }
+  /**
+   * @type {String}
+   */
+  get url() {
+    return this._url;
+  }
+  /**
+   * Set up the socket and the internal resources.
+   *
+   * @param {(net.Socket|tls.Socket)} socket The network socket between the
+   *     server and client
+   * @param {Buffer} head The first packet of the upgraded stream
+   * @param {Object} options Options object
+   * @param {Function} [options.generateMask] The function used to generate the
+   *     masking key
+   * @param {Number} [options.maxPayload=0] The maximum allowed message size
+   * @param {Boolean} [options.skipUTF8Validation=false] Specifies whether or
+   *     not to skip UTF-8 validation for text and close messages
+   * @private
+   */
+  setSocket(e, t, r) {
+    const i = new hs({
+      binaryType: this.binaryType,
+      extensions: this._extensions,
+      isServer: this._isServer,
+      maxPayload: r.maxPayload,
+      skipUTF8Validation: r.skipUTF8Validation
+    });
+    this._sender = new cs(e, this._extensions, r.generateMask), this._receiver = i, this._socket = e, i[y] = this, e[y] = this, i.on("conclude", ks), i.on("drain", ws), i.on("error", Os), i.on("message", Cs), i.on("ping", Ts), i.on("pong", Ls), e.setTimeout(0), e.setNoDelay(), t.length > 0 && e.unshift(t), e.on("close", ut), e.on("data", fe), e.on("end", dt), e.on("error", _t), this._readyState = d.OPEN, this.emit("open");
+  }
+  /**
+   * Emit the `'close'` event.
+   *
+   * @private
+   */
+  emitClose() {
+    if (!this._socket) {
+      this._readyState = d.CLOSED, this.emit("close", this._closeCode, this._closeMessage);
+      return;
+    }
+    this._extensions[T.extensionName] && this._extensions[T.extensionName].cleanup(), this._receiver.removeAllListeners(), this._readyState = d.CLOSED, this.emit("close", this._closeCode, this._closeMessage);
+  }
+  /**
+   * Start a closing handshake.
+   *
+   *          +----------+   +-----------+   +----------+
+   *     - - -|ws.close()|-->|close frame|-->|ws.close()|- - -
+   *    |     +----------+   +-----------+   +----------+     |
+   *          +----------+   +-----------+         |
+   * CLOSING  |ws.close()|<--|close frame|<--+-----+       CLOSING
+   *          +----------+   +-----------+   |
+   *    |           |                        |   +---+        |
+   *                +------------------------+-->|fin| - - - -
+   *    |         +---+                      |   +---+
+   *     - - - - -|fin|<---------------------+
+   *              +---+
+   *
+   * @param {Number} [code] Status code explaining why the connection is closing
+   * @param {(String|Buffer)} [data] The reason why the connection is
+   *     closing
+   * @public
+   */
+  close(e, t) {
+    if (this.readyState !== d.CLOSED) {
+      if (this.readyState === d.CONNECTING) {
+        const r = "WebSocket was closed before the connection was established";
+        b(this, this._req, r);
+        return;
+      }
+      if (this.readyState === d.CLOSING) {
+        this._closeFrameSent && (this._closeFrameReceived || this._receiver._writableState.errorEmitted) && this._socket.end();
+        return;
+      }
+      this._readyState = d.CLOSING, this._sender.close(e, t, !this._isServer, (r) => {
+        r || (this._closeFrameSent = !0, (this._closeFrameReceived || this._receiver._writableState.errorEmitted) && this._socket.end());
+      }), this._closeTimer = setTimeout(
+        this._socket.destroy.bind(this._socket),
+        Ss
+      );
+    }
+  }
+  /**
+   * Pause the socket.
+   *
+   * @public
+   */
+  pause() {
+    this.readyState === d.CONNECTING || this.readyState === d.CLOSED || (this._paused = !0, this._socket.pause());
+  }
+  /**
+   * Send a ping.
+   *
+   * @param {*} [data] The data to send
+   * @param {Boolean} [mask] Indicates whether or not to mask `data`
+   * @param {Function} [cb] Callback which is executed when the ping is sent
+   * @public
+   */
+  ping(e, t, r) {
+    if (this.readyState === d.CONNECTING)
+      throw new Error("WebSocket is not open: readyState 0 (CONNECTING)");
+    if (typeof e == "function" ? (r = e, e = t = void 0) : typeof t == "function" && (r = t, t = void 0), typeof e == "number" && (e = e.toString()), this.readyState !== d.OPEN) {
+      ve(this, e, r);
+      return;
+    }
+    t === void 0 && (t = !this._isServer), this._sender.ping(e || Q, t, r);
+  }
+  /**
+   * Send a pong.
+   *
+   * @param {*} [data] The data to send
+   * @param {Boolean} [mask] Indicates whether or not to mask `data`
+   * @param {Function} [cb] Callback which is executed when the pong is sent
+   * @public
+   */
+  pong(e, t, r) {
+    if (this.readyState === d.CONNECTING)
+      throw new Error("WebSocket is not open: readyState 0 (CONNECTING)");
+    if (typeof e == "function" ? (r = e, e = t = void 0) : typeof t == "function" && (r = t, t = void 0), typeof e == "number" && (e = e.toString()), this.readyState !== d.OPEN) {
+      ve(this, e, r);
+      return;
+    }
+    t === void 0 && (t = !this._isServer), this._sender.pong(e || Q, t, r);
+  }
+  /**
+   * Resume the socket.
+   *
+   * @public
+   */
+  resume() {
+    this.readyState === d.CONNECTING || this.readyState === d.CLOSED || (this._paused = !1, this._receiver._writableState.needDrain || this._socket.resume());
+  }
+  /**
+   * Send a data message.
+   *
+   * @param {*} data The message to send
+   * @param {Object} [options] Options object
+   * @param {Boolean} [options.binary] Specifies whether `data` is binary or
+   *     text
+   * @param {Boolean} [options.compress] Specifies whether or not to compress
+   *     `data`
+   * @param {Boolean} [options.fin=true] Specifies whether the fragment is the
+   *     last one
+   * @param {Boolean} [options.mask] Specifies whether or not to mask `data`
+   * @param {Function} [cb] Callback which is executed when data is written out
+   * @public
+   */
+  send(e, t, r) {
+    if (this.readyState === d.CONNECTING)
+      throw new Error("WebSocket is not open: readyState 0 (CONNECTING)");
+    if (typeof t == "function" && (r = t, t = {}), typeof e == "number" && (e = e.toString()), this.readyState !== d.OPEN) {
+      ve(this, e, r);
+      return;
+    }
+    const i = {
+      binary: typeof e != "string",
+      mask: !this._isServer,
+      compress: !0,
+      fin: !0,
+      ...t
+    };
+    this._extensions[T.extensionName] || (i.compress = !1), this._sender.send(e || Q, i, r);
+  }
+  /**
+   * Forcibly close the connection.
+   *
+   * @public
+   */
+  terminate() {
+    if (this.readyState !== d.CLOSED) {
+      if (this.readyState === d.CONNECTING) {
+        const e = "WebSocket was closed before the connection was established";
+        b(this, this._req, e);
+        return;
+      }
+      this._socket && (this._readyState = d.CLOSING, this._socket.destroy());
+    }
+  }
+};
+Object.defineProperty(m, "CONNECTING", {
+  enumerable: !0,
+  value: O.indexOf("CONNECTING")
+});
+Object.defineProperty(m.prototype, "CONNECTING", {
+  enumerable: !0,
+  value: O.indexOf("CONNECTING")
+});
+Object.defineProperty(m, "OPEN", {
+  enumerable: !0,
+  value: O.indexOf("OPEN")
+});
+Object.defineProperty(m.prototype, "OPEN", {
+  enumerable: !0,
+  value: O.indexOf("OPEN")
+});
+Object.defineProperty(m, "CLOSING", {
+  enumerable: !0,
+  value: O.indexOf("CLOSING")
+});
+Object.defineProperty(m.prototype, "CLOSING", {
+  enumerable: !0,
+  value: O.indexOf("CLOSING")
+});
+Object.defineProperty(m, "CLOSED", {
+  enumerable: !0,
+  value: O.indexOf("CLOSED")
+});
+Object.defineProperty(m.prototype, "CLOSED", {
+  enumerable: !0,
+  value: O.indexOf("CLOSED")
+});
+[
+  "binaryType",
+  "bufferedAmount",
+  "extensions",
+  "isPaused",
+  "protocol",
+  "readyState",
+  "url"
+].forEach((s) => {
+  Object.defineProperty(m.prototype, s, { enumerable: !0 });
+});
+["open", "error", "close", "message"].forEach((s) => {
+  Object.defineProperty(m.prototype, `on${s}`, {
+    enumerable: !0,
+    get() {
+      for (const e of this.listeners(s))
+        if (e[ge])
+          return e[ds];
+      return null;
+    },
+    set(e) {
+      for (const t of this.listeners(s))
+        if (t[ge]) {
+          this.removeListener(s, t);
+          break;
+        }
+      typeof e == "function" && this.addEventListener(s, e, {
+        [ge]: !0
+      });
+    }
+  });
+});
+m.prototype.addEventListener = ps;
+m.prototype.removeEventListener = ms;
+var ft = m;
+function ht(s, e, t, r) {
+  const i = {
+    protocolVersion: ye[1],
+    maxPayload: 104857600,
+    skipUTF8Validation: !1,
+    perMessageDeflate: !0,
+    followRedirects: !1,
+    maxRedirects: 10,
+    ...r,
+    createConnection: void 0,
+    socketPath: void 0,
+    hostname: void 0,
+    protocol: void 0,
+    timeout: void 0,
+    method: "GET",
+    host: void 0,
+    path: void 0,
+    port: void 0
+  };
+  if (!ye.includes(i.protocolVersion))
+    throw new RangeError(
+      `Unsupported protocol version: ${i.protocolVersion} (supported versions: ${ye.join(", ")})`
+    );
+  let n;
+  if (e instanceof me)
+    n = e, s._url = e.href;
+  else {
+    try {
+      n = new me(e);
+    } catch {
+      throw new SyntaxError(`Invalid URL: ${e}`);
+    }
+    s._url = e;
+  }
+  const o = n.protocol === "wss:", l = n.protocol === "ws+unix:";
+  let f;
+  if (n.protocol !== "ws:" && !o && !l ? f = `The URL's protocol must be one of "ws:", "wss:", or "ws+unix:"` : l && !n.pathname ? f = "The URL's pathname is empty" : n.hash && (f = "The URL contains a fragment identifier"), f) {
+    const u = new SyntaxError(f);
+    if (s._redirects === 0)
+      throw u;
+    ee(s, u);
+    return;
+  }
+  const a = o ? 443 : 80, c = ls(16).toString("base64"), h = o ? ns.request : os.request, p = /* @__PURE__ */ new Set();
+  let v;
+  if (i.createConnection = o ? xs : bs, i.defaultPort = i.defaultPort || a, i.port = n.port || a, i.host = n.hostname.startsWith("[") ? n.hostname.slice(1, -1) : n.hostname, i.headers = {
+    ...i.headers,
+    "Sec-WebSocket-Version": i.protocolVersion,
+    "Sec-WebSocket-Key": c,
+    Connection: "Upgrade",
+    Upgrade: "websocket"
+  }, i.path = n.pathname + n.search, i.timeout = i.handshakeTimeout, i.perMessageDeflate && (v = new T(
+    i.perMessageDeflate !== !0 ? i.perMessageDeflate : {},
+    !1,
+    i.maxPayload
+  ), i.headers["Sec-WebSocket-Extensions"] = gs({
+    [T.extensionName]: v.offer()
+  })), t.length) {
+    for (const u of t) {
+      if (typeof u != "string" || !Es.test(u) || p.has(u))
+        throw new SyntaxError(
+          "An invalid or duplicated subprotocol was specified"
+        );
+      p.add(u);
+    }
+    i.headers["Sec-WebSocket-Protocol"] = t.join(",");
+  }
+  if (i.origin && (i.protocolVersion < 13 ? i.headers["Sec-WebSocket-Origin"] = i.origin : i.headers.Origin = i.origin), (n.username || n.password) && (i.auth = `${n.username}:${n.password}`), l) {
+    const u = i.path.split(":");
+    i.socketPath = u[0], i.path = u[1];
+  }
+  let _;
+  if (i.followRedirects) {
+    if (s._redirects === 0) {
+      s._originalIpc = l, s._originalSecure = o, s._originalHostOrSocketPath = l ? i.socketPath : n.host;
+      const u = r && r.headers;
+      if (r = { ...r, headers: {} }, u)
+        for (const [E, $] of Object.entries(u))
+          r.headers[E.toLowerCase()] = $;
+    } else if (s.listenerCount("redirect") === 0) {
+      const u = l ? s._originalIpc ? i.socketPath === s._originalHostOrSocketPath : !1 : s._originalIpc ? !1 : n.host === s._originalHostOrSocketPath;
+      (!u || s._originalSecure && !o) && (delete i.headers.authorization, delete i.headers.cookie, u || delete i.headers.host, i.auth = void 0);
+    }
+    i.auth && !r.headers.authorization && (r.headers.authorization = "Basic " + Buffer.from(i.auth).toString("base64")), _ = s._req = h(i), s._redirects && s.emit("redirect", s.url, _);
+  } else
+    _ = s._req = h(i);
+  i.timeout && _.on("timeout", () => {
+    b(s, _, "Opening handshake has timed out");
+  }), _.on("error", (u) => {
+    _ === null || _[lt] || (_ = s._req = null, ee(s, u));
+  }), _.on("response", (u) => {
+    const E = u.headers.location, $ = u.statusCode;
+    if (E && i.followRedirects && $ >= 300 && $ < 400) {
+      if (++s._redirects > i.maxRedirects) {
+        b(s, _, "Maximum redirects exceeded");
+        return;
+      }
+      _.abort();
+      let q;
+      try {
+        q = new me(E, e);
+      } catch {
+        const L = new SyntaxError(`Invalid URL: ${E}`);
+        ee(s, L);
+        return;
+      }
+      ht(s, q, t, r);
+    } else
+      s.emit("unexpected-response", _, u) || b(
+        s,
+        _,
+        `Unexpected server response: ${u.statusCode}`
+      );
+  }), _.on("upgrade", (u, E, $) => {
+    if (s.emit("upgrade", u), s.readyState !== m.CONNECTING)
+      return;
+    if (_ = s._req = null, u.headers.upgrade.toLowerCase() !== "websocket") {
+      b(s, E, "Invalid Upgrade header");
+      return;
+    }
+    const q = fs("sha1").update(c + us).digest("base64");
+    if (u.headers["sec-websocket-accept"] !== q) {
+      b(s, E, "Invalid Sec-WebSocket-Accept header");
+      return;
+    }
+    const D = u.headers["sec-websocket-protocol"];
+    let L;
+    if (D !== void 0 ? p.size ? p.has(D) || (L = "Server sent an invalid subprotocol") : L = "Server sent a subprotocol but none was requested" : p.size && (L = "Server sent no subprotocol"), L) {
+      b(s, E, L);
+      return;
+    }
+    D && (s._protocol = D);
+    const ke = u.headers["sec-websocket-extensions"];
+    if (ke !== void 0) {
+      if (!v) {
+        b(s, E, "Server sent a Sec-WebSocket-Extensions header but no extension was requested");
+        return;
+      }
+      let he;
+      try {
+        he = ys(ke);
+      } catch {
+        b(s, E, "Invalid Sec-WebSocket-Extensions header");
+        return;
+      }
+      const we = Object.keys(he);
+      if (we.length !== 1 || we[0] !== T.extensionName) {
+        b(s, E, "Server indicated an extension that was not requested");
+        return;
+      }
+      try {
+        v.accept(he[T.extensionName]);
+      } catch {
+        b(s, E, "Invalid Sec-WebSocket-Extensions header");
+        return;
+      }
+      s._extensions[T.extensionName] = v;
+    }
+    s.setSocket(E, $, {
+      generateMask: i.generateMask,
+      maxPayload: i.maxPayload,
+      skipUTF8Validation: i.skipUTF8Validation
+    });
+  }), i.finishRequest ? i.finishRequest(_, s) : _.end();
+}
+function ee(s, e) {
+  s._readyState = m.CLOSING, s.emit("error", e), s.emitClose();
+}
+function bs(s) {
+  return s.path = s.socketPath, ot.connect(s);
+}
+function xs(s) {
+  return s.path = void 0, !s.servername && s.servername !== "" && (s.servername = ot.isIP(s.host) ? "" : s.host), as.connect(s);
+}
+function b(s, e, t) {
+  s._readyState = m.CLOSING;
+  const r = new Error(t);
+  Error.captureStackTrace(r, b), e.setHeader ? (e[lt] = !0, e.abort(), e.socket && !e.socket.destroyed && e.socket.destroy(), process.nextTick(ee, s, r)) : (e.destroy(r), e.once("error", s.emit.bind(s, "error")), e.once("close", s.emitClose.bind(s)));
+}
+function ve(s, e, t) {
+  if (e) {
+    const r = vs(e).length;
+    s._socket ? s._sender._bufferedBytes += r : s._bufferedAmount += r;
+  }
+  if (t) {
+    const r = new Error(
+      `WebSocket is not open: readyState ${s.readyState} (${O[s.readyState]})`
+    );
+    process.nextTick(t, r);
+  }
+}
+function ks(s, e) {
+  const t = this[y];
+  t._closeFrameReceived = !0, t._closeMessage = e, t._closeCode = s, t._socket[y] !== void 0 && (t._socket.removeListener("data", fe), process.nextTick(ct, t._socket), s === 1005 ? t.close() : t.close(s, e));
+}
+function ws() {
+  const s = this[y];
+  s.isPaused || s._socket.resume();
+}
+function Os(s) {
+  const e = this[y];
+  e._socket[y] !== void 0 && (e._socket.removeListener("data", fe), process.nextTick(ct, e._socket), e.close(s[_s])), e.emit("error", s);
+}
+function Ye() {
+  this[y].emitClose();
+}
+function Cs(s, e) {
+  this[y].emit("message", s, e);
+}
+function Ts(s) {
+  const e = this[y];
+  e.pong(s, !e._isServer, at), e.emit("ping", s);
+}
+function Ls(s) {
+  this[y].emit("pong", s);
+}
+function ct(s) {
+  s.resume();
+}
+function ut() {
+  const s = this[y];
+  this.removeListener("close", ut), this.removeListener("data", fe), this.removeListener("end", dt), s._readyState = m.CLOSING;
+  let e;
+  !this._readableState.endEmitted && !s._closeFrameReceived && !s._receiver._writableState.errorEmitted && (e = s._socket.read()) !== null && s._receiver.write(e), s._receiver.end(), this[y] = void 0, clearTimeout(s._closeTimer), s._receiver._writableState.finished || s._receiver._writableState.errorEmitted ? s.emitClose() : (s._receiver.on("error", Ye), s._receiver.on("finish", Ye));
+}
+function fe(s) {
+  this[y]._receiver.write(s) || this.pause();
+}
+function dt() {
+  const s = this[y];
+  s._readyState = m.CLOSING, s._receiver.end(), this.end();
+}
+function _t() {
+  const s = this[y];
+  this.removeListener("error", _t), this.on("error", at), s && (s._readyState = m.CLOSING, this.destroy());
+}
+const Xs = /* @__PURE__ */ z(ft), { tokenChars: Ns } = ae;
+function Ps(s) {
+  const e = /* @__PURE__ */ new Set();
+  let t = -1, r = -1, i = 0;
+  for (i; i < s.length; i++) {
+    const o = s.charCodeAt(i);
+    if (r === -1 && Ns[o] === 1)
+      t === -1 && (t = i);
+    else if (i !== 0 && (o === 32 || o === 9))
+      r === -1 && t !== -1 && (r = i);
+    else if (o === 44) {
+      if (t === -1)
+        throw new SyntaxError(`Unexpected character at index ${i}`);
+      r === -1 && (r = i);
+      const l = s.slice(t, r);
+      if (e.has(l))
+        throw new SyntaxError(`The "${l}" subprotocol is duplicated`);
+      e.add(l), t = r = -1;
+    } else
+      throw new SyntaxError(`Unexpected character at index ${i}`);
+  }
+  if (t === -1 || r !== -1)
+    throw new SyntaxError("Unexpected end of input");
+  const n = s.slice(t, i);
+  if (e.has(n))
+    throw new SyntaxError(`The "${n}" subprotocol is duplicated`);
+  return e.add(n), e;
+}
+var Rs = { parse: Ps };
+const Us = S, ie = S, { createHash: Bs } = S, qe = nt, N = oe, $s = Rs, Ms = ft, { GUID: Is, kWebSocket: Ds } = U, Ws = /^[+/0-9A-Za-z]{22}==$/, Ke = 0, Xe = 1, pt = 2;
+class As extends Us {
+  /**
+   * Create a `WebSocketServer` instance.
+   *
+   * @param {Object} options Configuration options
+   * @param {Number} [options.backlog=511] The maximum length of the queue of
+   *     pending connections
+   * @param {Boolean} [options.clientTracking=true] Specifies whether or not to
+   *     track clients
+   * @param {Function} [options.handleProtocols] A hook to handle protocols
+   * @param {String} [options.host] The hostname where to bind the server
+   * @param {Number} [options.maxPayload=104857600] The maximum allowed message
+   *     size
+   * @param {Boolean} [options.noServer=false] Enable no server mode
+   * @param {String} [options.path] Accept only connections matching this path
+   * @param {(Boolean|Object)} [options.perMessageDeflate=false] Enable/disable
+   *     permessage-deflate
+   * @param {Number} [options.port] The port where to bind the server
+   * @param {(http.Server|https.Server)} [options.server] A pre-created HTTP/S
+   *     server to use
+   * @param {Boolean} [options.skipUTF8Validation=false] Specifies whether or
+   *     not to skip UTF-8 validation for text and close messages
+   * @param {Function} [options.verifyClient] A hook to reject connections
+   * @param {Function} [options.WebSocket=WebSocket] Specifies the `WebSocket`
+   *     class to use. It must be the `WebSocket` class or class that extends it
+   * @param {Function} [callback] A listener for the `listening` event
+   */
+  constructor(e, t) {
+    if (super(), e = {
+      maxPayload: 100 * 1024 * 1024,
+      skipUTF8Validation: !1,
+      perMessageDeflate: !1,
+      handleProtocols: null,
+      clientTracking: !0,
+      verifyClient: null,
+      noServer: !1,
+      backlog: null,
+      // use default (511 as implemented in net.js)
+      server: null,
+      host: null,
+      path: null,
+      port: null,
+      WebSocket: Ms,
+      ...e
+    }, e.port == null && !e.server && !e.noServer || e.port != null && (e.server || e.noServer) || e.server && e.noServer)
+      throw new TypeError(
+        'One and only one of the "port", "server", or "noServer" options must be specified'
+      );
+    if (e.port != null ? (this._server = ie.createServer((r, i) => {
+      const n = ie.STATUS_CODES[426];
+      i.writeHead(426, {
+        "Content-Length": n.length,
+        "Content-Type": "text/plain"
+      }), i.end(n);
+    }), this._server.listen(
+      e.port,
+      e.host,
+      e.backlog,
+      t
+    )) : e.server && (this._server = e.server), this._server) {
+      const r = this.emit.bind(this, "connection");
+      this._removeListeners = js(this._server, {
+        listening: this.emit.bind(this, "listening"),
+        error: this.emit.bind(this, "error"),
+        upgrade: (i, n, o) => {
+          this.handleUpgrade(i, n, o, r);
+        }
+      });
+    }
+    e.perMessageDeflate === !0 && (e.perMessageDeflate = {}), e.clientTracking && (this.clients = /* @__PURE__ */ new Set(), this._shouldEmitClose = !1), this.options = e, this._state = Ke;
+  }
+  /**
+   * Returns the bound address, the address family name, and port of the server
+   * as reported by the operating system if listening on an IP socket.
+   * If the server is listening on a pipe or UNIX domain socket, the name is
+   * returned as a string.
+   *
+   * @return {(Object|String|null)} The address of the server
+   * @public
+   */
+  address() {
+    if (this.options.noServer)
+      throw new Error('The server is operating in "noServer" mode');
+    return this._server ? this._server.address() : null;
+  }
+  /**
+   * Stop the server from accepting new connections and emit the `'close'` event
+   * when all existing connections are closed.
+   *
+   * @param {Function} [cb] A one-time listener for the `'close'` event
+   * @public
+   */
+  close(e) {
+    if (this._state === pt) {
+      e && this.once("close", () => {
+        e(new Error("The server is not running"));
+      }), process.nextTick(G, this);
+      return;
+    }
+    if (e && this.once("close", e), this._state !== Xe)
+      if (this._state = Xe, this.options.noServer || this.options.server)
+        this._server && (this._removeListeners(), this._removeListeners = this._server = null), this.clients ? this.clients.size ? this._shouldEmitClose = !0 : process.nextTick(G, this) : process.nextTick(G, this);
+      else {
+        const t = this._server;
+        this._removeListeners(), this._removeListeners = this._server = null, t.close(() => {
+          G(this);
+        });
+      }
+  }
+  /**
+   * See if a given request should be handled by this server instance.
+   *
+   * @param {http.IncomingMessage} req Request object to inspect
+   * @return {Boolean} `true` if the request is valid, else `false`
+   * @public
+   */
+  shouldHandle(e) {
+    if (this.options.path) {
+      const t = e.url.indexOf("?");
+      if ((t !== -1 ? e.url.slice(0, t) : e.url) !== this.options.path)
+        return !1;
+    }
+    return !0;
+  }
+  /**
+   * Handle a HTTP Upgrade request.
+   *
+   * @param {http.IncomingMessage} req The request object
+   * @param {(net.Socket|tls.Socket)} socket The network socket between the
+   *     server and client
+   * @param {Buffer} head The first packet of the upgraded stream
+   * @param {Function} cb Callback
+   * @public
+   */
+  handleUpgrade(e, t, r, i) {
+    t.on("error", Ze);
+    const n = e.headers["sec-websocket-key"], o = +e.headers["sec-websocket-version"];
+    if (e.method !== "GET") {
+      R(this, e, t, 405, "Invalid HTTP method");
+      return;
+    }
+    if (e.headers.upgrade.toLowerCase() !== "websocket") {
+      R(this, e, t, 400, "Invalid Upgrade header");
+      return;
+    }
+    if (!n || !Ws.test(n)) {
+      R(this, e, t, 400, "Missing or invalid Sec-WebSocket-Key header");
+      return;
+    }
+    if (o !== 8 && o !== 13) {
+      R(this, e, t, 400, "Missing or invalid Sec-WebSocket-Version header");
+      return;
+    }
+    if (!this.shouldHandle(e)) {
+      H(t, 400);
+      return;
+    }
+    const l = e.headers["sec-websocket-protocol"];
+    let f = /* @__PURE__ */ new Set();
+    if (l !== void 0)
+      try {
+        f = $s.parse(l);
+      } catch {
+        R(this, e, t, 400, "Invalid Sec-WebSocket-Protocol header");
+        return;
+      }
+    const a = e.headers["sec-websocket-extensions"], c = {};
+    if (this.options.perMessageDeflate && a !== void 0) {
+      const h = new N(
+        this.options.perMessageDeflate,
+        !0,
+        this.options.maxPayload
+      );
+      try {
+        const p = qe.parse(a);
+        p[N.extensionName] && (h.accept(p[N.extensionName]), c[N.extensionName] = h);
+      } catch {
+        R(this, e, t, 400, "Invalid or unacceptable Sec-WebSocket-Extensions header");
+        return;
+      }
+    }
+    if (this.options.verifyClient) {
+      const h = {
+        origin: e.headers[`${o === 8 ? "sec-websocket-origin" : "origin"}`],
+        secure: !!(e.socket.authorized || e.socket.encrypted),
+        req: e
+      };
+      if (this.options.verifyClient.length === 2) {
+        this.options.verifyClient(h, (p, v, _, u) => {
+          if (!p)
+            return H(t, v || 401, _, u);
+          this.completeUpgrade(
+            c,
+            n,
+            f,
+            e,
+            t,
+            r,
+            i
+          );
+        });
+        return;
+      }
+      if (!this.options.verifyClient(h))
+        return H(t, 401);
+    }
+    this.completeUpgrade(c, n, f, e, t, r, i);
+  }
+  /**
+   * Upgrade the connection to WebSocket.
+   *
+   * @param {Object} extensions The accepted extensions
+   * @param {String} key The value of the `Sec-WebSocket-Key` header
+   * @param {Set} protocols The subprotocols
+   * @param {http.IncomingMessage} req The request object
+   * @param {(net.Socket|tls.Socket)} socket The network socket between the
+   *     server and client
+   * @param {Buffer} head The first packet of the upgraded stream
+   * @param {Function} cb Callback
+   * @throws {Error} If called more than once with the same socket
+   * @private
+   */
+  completeUpgrade(e, t, r, i, n, o, l) {
+    if (!n.readable || !n.writable)
+      return n.destroy();
+    if (n[Ds])
+      throw new Error(
+        "server.handleUpgrade() was called more than once with the same socket, possibly due to a misconfiguration"
+      );
+    if (this._state > Ke)
+      return H(n, 503);
+    const a = [
+      "HTTP/1.1 101 Switching Protocols",
+      "Upgrade: websocket",
+      "Connection: Upgrade",
+      `Sec-WebSocket-Accept: ${Bs("sha1").update(t + Is).digest("base64")}`
+    ], c = new this.options.WebSocket(null);
+    if (r.size) {
+      const h = this.options.handleProtocols ? this.options.handleProtocols(r, i) : r.values().next().value;
+      h && (a.push(`Sec-WebSocket-Protocol: ${h}`), c._protocol = h);
+    }
+    if (e[N.extensionName]) {
+      const h = e[N.extensionName].params, p = qe.format({
+        [N.extensionName]: [h]
+      });
+      a.push(`Sec-WebSocket-Extensions: ${p}`), c._extensions = e;
+    }
+    this.emit("headers", a, i), n.write(a.concat(`\r
+`).join(`\r
+`)), n.removeListener("error", Ze), c.setSocket(n, o, {
+      maxPayload: this.options.maxPayload,
+      skipUTF8Validation: this.options.skipUTF8Validation
+    }), this.clients && (this.clients.add(c), c.on("close", () => {
+      this.clients.delete(c), this._shouldEmitClose && !this.clients.size && process.nextTick(G, this);
+    })), l(c, i);
+  }
+}
+var Fs = As;
+function js(s, e) {
+  for (const t of Object.keys(e))
+    s.on(t, e[t]);
+  return function() {
+    for (const r of Object.keys(e))
+      s.removeListener(r, e[r]);
+  };
+}
+function G(s) {
+  s._state = pt, s.emit("close");
+}
+function Ze() {
+  this.destroy();
+}
+function H(s, e, t, r) {
+  t = t || ie.STATUS_CODES[e], r = {
+    Connection: "close",
+    "Content-Type": "text/html",
+    "Content-Length": Buffer.byteLength(t),
+    ...r
+  }, s.once("finish", s.destroy), s.end(
+    `HTTP/1.1 ${e} ${ie.STATUS_CODES[e]}\r
+` + Object.keys(r).map((i) => `${i}: ${r[i]}`).join(`\r
+`) + `\r
+\r
+` + t
+  );
+}
+function R(s, e, t, r, i) {
+  if (s.listenerCount("wsClientError")) {
+    const n = new Error(i);
+    Error.captureStackTrace(n, R), s.emit("wsClientError", n, t, e);
+  } else
+    H(t, r, i);
+}
+const Zs = /* @__PURE__ */ z(Fs);
+export {
+  qs as Receiver,
+  Ks as Sender,
+  Xs as WebSocket,
+  Zs as WebSocketServer,
+  Vs as createWebSocketStream,
+  Xs as default
+};
diff --git a/src/backend/gradio_image_annotation/templates/example/index.js b/src/backend/gradio_image_annotation/templates/example/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..338f69d3711f756ad8c4b4e5c58a477727cfc342
--- /dev/null
+++ b/src/backend/gradio_image_annotation/templates/example/index.js
@@ -0,0 +1,6401 @@
+const { setContext: yu, getContext: er } = window.__gradio__svelte__internal, tr = "WORKER_PROXY_CONTEXT_KEY";
+function nr() {
+  return er(tr);
+}
+function ir(e) {
+  return e.host === window.location.host || e.host === "localhost:7860" || e.host === "127.0.0.1:7860" || // Ref: https://github.com/gradio-app/gradio/blob/v3.32.0/js/app/src/Index.svelte#L194
+  e.host === "lite.local";
+}
+function rr(e, t) {
+  const n = t.toLowerCase();
+  for (const [i, r] of Object.entries(e))
+    if (i.toLowerCase() === n)
+      return r;
+}
+function sr(e) {
+  if (e == null)
+    return !1;
+  const t = new URL(e);
+  return !(!ir(t) || t.protocol !== "http:" && t.protocol !== "https:");
+}
+async function or(e) {
+  if (e == null || !sr(e))
+    return e;
+  const t = nr();
+  if (t == null)
+    return e;
+  const i = new URL(e).pathname;
+  return t.httpRequest({
+    method: "GET",
+    path: i,
+    headers: {},
+    query_string: ""
+  }).then((r) => {
+    if (r.status !== 200)
+      throw new Error(`Failed to get file ${i} from the Wasm worker.`);
+    const s = new Blob([r.body], {
+      type: rr(r.headers, "content-type")
+    });
+    return URL.createObjectURL(s);
+  });
+}
+const {
+  SvelteComponent: ar,
+  append: Tt,
+  attr: X,
+  detach: lr,
+  init: ur,
+  insert: fr,
+  noop: Ct,
+  safe_not_equal: hr,
+  set_style: Z,
+  svg_element: Ze
+} = window.__gradio__svelte__internal;
+function cr(e) {
+  let t, n, i, r;
+  return {
+    c() {
+      t = Ze("svg"), n = Ze("g"), i = Ze("path"), r = Ze("path"), X(i, "d", "M18,6L6.087,17.913"), Z(i, "fill", "none"), Z(i, "fill-rule", "nonzero"), Z(i, "stroke-width", "2px"), X(n, "transform", "matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"), X(r, "d", "M4.364,4.364L19.636,19.636"), Z(r, "fill", "none"), Z(r, "fill-rule", "nonzero"), Z(r, "stroke-width", "2px"), X(t, "width", "100%"), X(t, "height", "100%"), X(t, "viewBox", "0 0 24 24"), X(t, "version", "1.1"), X(t, "xmlns", "http://www.w3.org/2000/svg"), X(t, "xmlns:xlink", "http://www.w3.org/1999/xlink"), X(t, "xml:space", "preserve"), X(t, "stroke", "currentColor"), Z(t, "fill-rule", "evenodd"), Z(t, "clip-rule", "evenodd"), Z(t, "stroke-linecap", "round"), Z(t, "stroke-linejoin", "round");
+    },
+    m(s, u) {
+      fr(s, t, u), Tt(t, n), Tt(n, i), Tt(t, r);
+    },
+    p: Ct,
+    i: Ct,
+    o: Ct,
+    d(s) {
+      s && lr(t);
+    }
+  };
+}
+class mr extends ar {
+  constructor(t) {
+    super(), ur(this, t, null, cr, hr, {});
+  }
+}
+const {
+  SvelteComponent: _r,
+  append: dr,
+  attr: fe,
+  detach: br,
+  init: gr,
+  insert: pr,
+  noop: Pt,
+  safe_not_equal: vr,
+  svg_element: En
+} = window.__gradio__svelte__internal;
+function yr(e) {
+  let t, n;
+  return {
+    c() {
+      t = En("svg"), n = En("path"), fe(n, "d", "M5 8l4 4 4-4z"), fe(t, "class", "dropdown-arrow svelte-145leq6"), fe(t, "xmlns", "http://www.w3.org/2000/svg"), fe(t, "width", "100%"), fe(t, "height", "100%"), fe(t, "viewBox", "0 0 18 18");
+    },
+    m(i, r) {
+      pr(i, t, r), dr(t, n);
+    },
+    p: Pt,
+    i: Pt,
+    o: Pt,
+    d(i) {
+      i && br(t);
+    }
+  };
+}
+class Er extends _r {
+  constructor(t) {
+    super(), gr(this, t, null, yr, vr, {});
+  }
+}
+const {
+  SvelteComponent: wr,
+  append: xr,
+  attr: V,
+  detach: Sr,
+  init: Hr,
+  insert: Ar,
+  noop: It,
+  safe_not_equal: Br,
+  svg_element: wn
+} = window.__gradio__svelte__internal;
+function Tr(e) {
+  let t, n;
+  return {
+    c() {
+      t = wn("svg"), n = wn("path"), V(n, "d", "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"), V(t, "xmlns", "http://www.w3.org/2000/svg"), V(t, "width", "100%"), V(t, "height", "100%"), V(t, "viewBox", "0 0 24 24"), V(t, "fill", "none"), V(t, "stroke", "currentColor"), V(t, "stroke-width", "1.5"), V(t, "stroke-linecap", "round"), V(t, "stroke-linejoin", "round"), V(t, "class", "feather feather-edit-2");
+    },
+    m(i, r) {
+      Ar(i, t, r), xr(t, n);
+    },
+    p: It,
+    i: It,
+    o: It,
+    d(i) {
+      i && Sr(t);
+    }
+  };
+}
+class Cr extends wr {
+  constructor(t) {
+    super(), Hr(this, t, null, Tr, Br, {});
+  }
+}
+const {
+  SvelteComponent: Pr,
+  append: xn,
+  attr: D,
+  detach: Ir,
+  init: Nr,
+  insert: Or,
+  noop: Nt,
+  safe_not_equal: Mr,
+  set_style: ne,
+  svg_element: Ot
+} = window.__gradio__svelte__internal;
+function Lr(e) {
+  let t, n, i;
+  return {
+    c() {
+      t = Ot("svg"), n = Ot("line"), i = Ot("line"), D(n, "x1", "4"), D(n, "y1", "12"), D(n, "x2", "20"), D(n, "y2", "12"), ne(n, "fill", "none"), ne(n, "stroke-width", "2px"), D(i, "x1", "12"), D(i, "y1", "4"), D(i, "x2", "12"), D(i, "y2", "20"), ne(i, "fill", "none"), ne(i, "stroke-width", "2px"), D(t, "width", "100%"), D(t, "height", "100%"), D(t, "viewBox", "0 0 24 24"), D(t, "version", "1.1"), D(t, "xmlns", "http://www.w3.org/2000/svg"), D(t, "xmlns:xlink", "http://www.w3.org/1999/xlink"), D(t, "xml:space", "preserve"), D(t, "stroke", "currentColor"), ne(t, "fill-rule", "evenodd"), ne(t, "clip-rule", "evenodd"), ne(t, "stroke-linecap", "round"), ne(t, "stroke-linejoin", "round");
+    },
+    m(r, s) {
+      Or(r, t, s), xn(t, n), xn(t, i);
+    },
+    p: Nt,
+    i: Nt,
+    o: Nt,
+    d(r) {
+      r && Ir(t);
+    }
+  };
+}
+class Rr extends Pr {
+  constructor(t) {
+    super(), Nr(this, t, null, Lr, Mr, {});
+  }
+}
+const {
+  SvelteComponent: kr,
+  attr: Dr,
+  create_slot: Ur,
+  detach: Gr,
+  element: Fr,
+  get_all_dirty_from_scope: zr,
+  get_slot_changes: jr,
+  init: Xr,
+  insert: Vr,
+  safe_not_equal: qr,
+  transition_in: Wr,
+  transition_out: Yr,
+  update_slot_base: Zr
+} = window.__gradio__svelte__internal;
+function Qr(e) {
+  let t, n;
+  const i = (
+    /*#slots*/
+    e[1].default
+  ), r = Ur(
+    i,
+    e,
+    /*$$scope*/
+    e[0],
+    null
+  );
+  return {
+    c() {
+      t = Fr("div"), r && r.c(), Dr(t, "class", "svelte-1hnfib2");
+    },
+    m(s, u) {
+      Vr(s, t, u), r && r.m(t, null), n = !0;
+    },
+    p(s, [u]) {
+      r && r.p && (!n || u & /*$$scope*/
+      1) && Zr(
+        r,
+        i,
+        s,
+        /*$$scope*/
+        s[0],
+        n ? jr(
+          i,
+          /*$$scope*/
+          s[0],
+          u,
+          null
+        ) : zr(
+          /*$$scope*/
+          s[0]
+        ),
+        null
+      );
+    },
+    i(s) {
+      n || (Wr(r, s), n = !0);
+    },
+    o(s) {
+      Yr(r, s), n = !1;
+    },
+    d(s) {
+      s && Gr(t), r && r.d(s);
+    }
+  };
+}
+function Jr(e, t, n) {
+  let { $$slots: i = {}, $$scope: r } = t;
+  return e.$$set = (s) => {
+    "$$scope" in s && n(0, r = s.$$scope);
+  }, [r, i];
+}
+class Kr extends kr {
+  constructor(t) {
+    super(), Xr(this, t, Jr, Qr, qr, {});
+  }
+}
+const {
+  SvelteComponent: $r,
+  attr: Sn,
+  check_outros: es,
+  create_component: ts,
+  create_slot: ns,
+  destroy_component: is,
+  detach: ot,
+  element: rs,
+  empty: ss,
+  get_all_dirty_from_scope: os,
+  get_slot_changes: as,
+  group_outros: ls,
+  init: us,
+  insert: at,
+  mount_component: fs,
+  safe_not_equal: hs,
+  set_data: cs,
+  space: ms,
+  text: _s,
+  toggle_class: he,
+  transition_in: Me,
+  transition_out: lt,
+  update_slot_base: ds
+} = window.__gradio__svelte__internal;
+function Hn(e) {
+  let t, n;
+  return t = new Kr({
+    props: {
+      $$slots: { default: [bs] },
+      $$scope: { ctx: e }
+    }
+  }), {
+    c() {
+      ts(t.$$.fragment);
+    },
+    m(i, r) {
+      fs(t, i, r), n = !0;
+    },
+    p(i, r) {
+      const s = {};
+      r & /*$$scope, info*/
+      10 && (s.$$scope = { dirty: r, ctx: i }), t.$set(s);
+    },
+    i(i) {
+      n || (Me(t.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      lt(t.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      is(t, i);
+    }
+  };
+}
+function bs(e) {
+  let t;
+  return {
+    c() {
+      t = _s(
+        /*info*/
+        e[1]
+      );
+    },
+    m(n, i) {
+      at(n, t, i);
+    },
+    p(n, i) {
+      i & /*info*/
+      2 && cs(
+        t,
+        /*info*/
+        n[1]
+      );
+    },
+    d(n) {
+      n && ot(t);
+    }
+  };
+}
+function gs(e) {
+  let t, n, i, r;
+  const s = (
+    /*#slots*/
+    e[2].default
+  ), u = ns(
+    s,
+    e,
+    /*$$scope*/
+    e[3],
+    null
+  );
+  let o = (
+    /*info*/
+    e[1] && Hn(e)
+  );
+  return {
+    c() {
+      t = rs("span"), u && u.c(), n = ms(), o && o.c(), i = ss(), Sn(t, "data-testid", "block-info"), Sn(t, "class", "svelte-22c38v"), he(t, "sr-only", !/*show_label*/
+      e[0]), he(t, "hide", !/*show_label*/
+      e[0]), he(
+        t,
+        "has-info",
+        /*info*/
+        e[1] != null
+      );
+    },
+    m(a, f) {
+      at(a, t, f), u && u.m(t, null), at(a, n, f), o && o.m(a, f), at(a, i, f), r = !0;
+    },
+    p(a, [f]) {
+      u && u.p && (!r || f & /*$$scope*/
+      8) && ds(
+        u,
+        s,
+        a,
+        /*$$scope*/
+        a[3],
+        r ? as(
+          s,
+          /*$$scope*/
+          a[3],
+          f,
+          null
+        ) : os(
+          /*$$scope*/
+          a[3]
+        ),
+        null
+      ), (!r || f & /*show_label*/
+      1) && he(t, "sr-only", !/*show_label*/
+      a[0]), (!r || f & /*show_label*/
+      1) && he(t, "hide", !/*show_label*/
+      a[0]), (!r || f & /*info*/
+      2) && he(
+        t,
+        "has-info",
+        /*info*/
+        a[1] != null
+      ), /*info*/
+      a[1] ? o ? (o.p(a, f), f & /*info*/
+      2 && Me(o, 1)) : (o = Hn(a), o.c(), Me(o, 1), o.m(i.parentNode, i)) : o && (ls(), lt(o, 1, 1, () => {
+        o = null;
+      }), es());
+    },
+    i(a) {
+      r || (Me(u, a), Me(o), r = !0);
+    },
+    o(a) {
+      lt(u, a), lt(o), r = !1;
+    },
+    d(a) {
+      a && (ot(t), ot(n), ot(i)), u && u.d(a), o && o.d(a);
+    }
+  };
+}
+function ps(e, t, n) {
+  let { $$slots: i = {}, $$scope: r } = t, { show_label: s = !0 } = t, { info: u = void 0 } = t;
+  return e.$$set = (o) => {
+    "show_label" in o && n(0, s = o.show_label), "info" in o && n(1, u = o.info), "$$scope" in o && n(3, r = o.$$scope);
+  }, [s, u, i, r];
+}
+class hi extends $r {
+  constructor(t) {
+    super(), us(this, t, ps, gs, hs, { show_label: 0, info: 1 });
+  }
+}
+const vs = [
+  { color: "red", primary: 600, secondary: 100 },
+  { color: "green", primary: 600, secondary: 100 },
+  { color: "blue", primary: 600, secondary: 100 },
+  { color: "yellow", primary: 500, secondary: 100 },
+  { color: "purple", primary: 600, secondary: 100 },
+  { color: "teal", primary: 600, secondary: 100 },
+  { color: "orange", primary: 600, secondary: 100 },
+  { color: "cyan", primary: 600, secondary: 100 },
+  { color: "lime", primary: 500, secondary: 100 },
+  { color: "pink", primary: 600, secondary: 100 }
+], An = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000",
+  white: "#fff",
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  gray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  },
+  stone: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917",
+    950: "#0c0a09"
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  },
+  amber: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12",
+    950: "#422006"
+  },
+  lime: {
+    50: "#f7fee7",
+    100: "#ecfccb",
+    200: "#d9f99d",
+    300: "#bef264",
+    400: "#a3e635",
+    500: "#84cc16",
+    600: "#65a30d",
+    700: "#4d7c0f",
+    800: "#3f6212",
+    900: "#365314",
+    950: "#1a2e05"
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  emerald: {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b",
+    950: "#022c22"
+  },
+  teal: {
+    50: "#f0fdfa",
+    100: "#ccfbf1",
+    200: "#99f6e4",
+    300: "#5eead4",
+    400: "#2dd4bf",
+    500: "#14b8a6",
+    600: "#0d9488",
+    700: "#0f766e",
+    800: "#115e59",
+    900: "#134e4a",
+    950: "#042f2e"
+  },
+  cyan: {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+    800: "#155e75",
+    900: "#164e63",
+    950: "#083344"
+  },
+  sky: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e",
+    950: "#082f49"
+  },
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  indigo: {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81",
+    950: "#1e1b4b"
+  },
+  violet: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  },
+  purple: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  },
+  fuchsia: {
+    50: "#fdf4ff",
+    100: "#fae8ff",
+    200: "#f5d0fe",
+    300: "#f0abfc",
+    400: "#e879f9",
+    500: "#d946ef",
+    600: "#c026d3",
+    700: "#a21caf",
+    800: "#86198f",
+    900: "#701a75",
+    950: "#4a044e"
+  },
+  pink: {
+    50: "#fdf2f8",
+    100: "#fce7f3",
+    200: "#fbcfe8",
+    300: "#f9a8d4",
+    400: "#f472b6",
+    500: "#ec4899",
+    600: "#db2777",
+    700: "#be185d",
+    800: "#9d174d",
+    900: "#831843",
+    950: "#500724"
+  },
+  rose: {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337",
+    950: "#4c0519"
+  }
+};
+vs.reduce(
+  (e, { color: t, primary: n, secondary: i }) => ({
+    ...e,
+    [t]: {
+      primary: An[t][n],
+      secondary: An[t][i]
+    }
+  }),
+  {}
+);
+const {
+  SvelteComponent: ys,
+  append: Bn,
+  attr: Mt,
+  bubble: Tn,
+  create_component: Es,
+  destroy_component: ws,
+  detach: ci,
+  element: Cn,
+  init: xs,
+  insert: mi,
+  listen: Lt,
+  mount_component: Ss,
+  run_all: Hs,
+  safe_not_equal: As,
+  set_data: Bs,
+  set_input_value: Pn,
+  space: Ts,
+  text: Cs,
+  transition_in: Ps,
+  transition_out: Is
+} = window.__gradio__svelte__internal, { createEventDispatcher: Ns, afterUpdate: Os } = window.__gradio__svelte__internal;
+function Ms(e) {
+  let t;
+  return {
+    c() {
+      t = Cs(
+        /*label*/
+        e[1]
+      );
+    },
+    m(n, i) {
+      mi(n, t, i);
+    },
+    p(n, i) {
+      i & /*label*/
+      2 && Bs(
+        t,
+        /*label*/
+        n[1]
+      );
+    },
+    d(n) {
+      n && ci(t);
+    }
+  };
+}
+function Ls(e) {
+  let t, n, i, r, s, u, o;
+  return n = new hi({
+    props: {
+      show_label: (
+        /*show_label*/
+        e[4]
+      ),
+      info: (
+        /*info*/
+        e[2]
+      ),
+      $$slots: { default: [Ms] },
+      $$scope: { ctx: e }
+    }
+  }), {
+    c() {
+      t = Cn("label"), Es(n.$$.fragment), i = Ts(), r = Cn("input"), Mt(r, "type", "color"), r.disabled = /*disabled*/
+      e[3], Mt(r, "class", "svelte-16l8u73"), Mt(t, "class", "block");
+    },
+    m(a, f) {
+      mi(a, t, f), Ss(n, t, null), Bn(t, i), Bn(t, r), Pn(
+        r,
+        /*value*/
+        e[0]
+      ), s = !0, u || (o = [
+        Lt(
+          r,
+          "input",
+          /*input_input_handler*/
+          e[8]
+        ),
+        Lt(
+          r,
+          "focus",
+          /*focus_handler*/
+          e[6]
+        ),
+        Lt(
+          r,
+          "blur",
+          /*blur_handler*/
+          e[7]
+        )
+      ], u = !0);
+    },
+    p(a, [f]) {
+      const l = {};
+      f & /*show_label*/
+      16 && (l.show_label = /*show_label*/
+      a[4]), f & /*info*/
+      4 && (l.info = /*info*/
+      a[2]), f & /*$$scope, label*/
+      2050 && (l.$$scope = { dirty: f, ctx: a }), n.$set(l), (!s || f & /*disabled*/
+      8) && (r.disabled = /*disabled*/
+      a[3]), f & /*value*/
+      1 && Pn(
+        r,
+        /*value*/
+        a[0]
+      );
+    },
+    i(a) {
+      s || (Ps(n.$$.fragment, a), s = !0);
+    },
+    o(a) {
+      Is(n.$$.fragment, a), s = !1;
+    },
+    d(a) {
+      a && ci(t), ws(n), u = !1, Hs(o);
+    }
+  };
+}
+function Rs(e, t, n) {
+  let { value: i = "#000000" } = t, { value_is_output: r = !1 } = t, { label: s } = t, { info: u = void 0 } = t, { disabled: o = !1 } = t, { show_label: a = !0 } = t;
+  const f = Ns();
+  function l() {
+    f("change", i), r || f("input");
+  }
+  Os(() => {
+    n(5, r = !1);
+  });
+  function h(g) {
+    Tn.call(this, e, g);
+  }
+  function c(g) {
+    Tn.call(this, e, g);
+  }
+  function _() {
+    i = this.value, n(0, i);
+  }
+  return e.$$set = (g) => {
+    "value" in g && n(0, i = g.value), "value_is_output" in g && n(5, r = g.value_is_output), "label" in g && n(1, s = g.label), "info" in g && n(2, u = g.info), "disabled" in g && n(3, o = g.disabled), "show_label" in g && n(4, a = g.show_label);
+  }, e.$$.update = () => {
+    e.$$.dirty & /*value*/
+    1 && l();
+  }, [
+    i,
+    s,
+    u,
+    o,
+    a,
+    r,
+    h,
+    c,
+    _
+  ];
+}
+class ks extends ys {
+  constructor(t) {
+    super(), xs(this, t, Rs, Ls, As, {
+      value: 0,
+      value_is_output: 5,
+      label: 1,
+      info: 2,
+      disabled: 3,
+      show_label: 4
+    });
+  }
+}
+function we() {
+}
+function Ds(e) {
+  return e();
+}
+function Us(e) {
+  e.forEach(Ds);
+}
+function Gs(e) {
+  return typeof e == "function";
+}
+function Fs(e, t) {
+  return e != e ? t == t : e !== t || e && typeof e == "object" || typeof e == "function";
+}
+function zs(e, ...t) {
+  if (e == null) {
+    for (const i of t)
+      i(void 0);
+    return we;
+  }
+  const n = e.subscribe(...t);
+  return n.unsubscribe ? () => n.unsubscribe() : n;
+}
+function In(e) {
+  const t = typeof e == "string" && e.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+  return t ? [parseFloat(t[1]), t[2] || "px"] : [
+    /** @type {number} */
+    e,
+    "px"
+  ];
+}
+function js(e) {
+  const t = e - 1;
+  return t * t * t + 1;
+}
+function Nn(e, { delay: t = 0, duration: n = 400, easing: i = js, x: r = 0, y: s = 0, opacity: u = 0 } = {}) {
+  const o = getComputedStyle(e), a = +o.opacity, f = o.transform === "none" ? "" : o.transform, l = a * (1 - u), [h, c] = In(r), [_, g] = In(s);
+  return {
+    delay: t,
+    duration: n,
+    easing: i,
+    css: (m, d) => `
+			transform: ${f} translate(${(1 - m) * h}${c}, ${(1 - m) * _}${g});
+			opacity: ${a - l * d}`
+  };
+}
+const ce = [];
+function Xs(e, t) {
+  return {
+    subscribe: pt(e, t).subscribe
+  };
+}
+function pt(e, t = we) {
+  let n;
+  const i = /* @__PURE__ */ new Set();
+  function r(o) {
+    if (Fs(e, o) && (e = o, n)) {
+      const a = !ce.length;
+      for (const f of i)
+        f[1](), ce.push(f, e);
+      if (a) {
+        for (let f = 0; f < ce.length; f += 2)
+          ce[f][0](ce[f + 1]);
+        ce.length = 0;
+      }
+    }
+  }
+  function s(o) {
+    r(o(e));
+  }
+  function u(o, a = we) {
+    const f = [o, a];
+    return i.add(f), i.size === 1 && (n = t(r, s) || we), o(e), () => {
+      i.delete(f), i.size === 0 && n && (n(), n = null);
+    };
+  }
+  return { set: r, update: s, subscribe: u };
+}
+function Be(e, t, n) {
+  const i = !Array.isArray(e), r = i ? [e] : e;
+  if (!r.every(Boolean))
+    throw new Error("derived() expects stores as input, got a falsy value");
+  const s = t.length < 2;
+  return Xs(n, (u, o) => {
+    let a = !1;
+    const f = [];
+    let l = 0, h = we;
+    const c = () => {
+      if (l)
+        return;
+      h();
+      const g = t(i ? f[0] : f, u, o);
+      s ? u(g) : h = Gs(g) ? g : we;
+    }, _ = r.map(
+      (g, m) => zs(
+        g,
+        (d) => {
+          f[m] = d, l &= ~(1 << m), a && c();
+        },
+        () => {
+          l |= 1 << m;
+        }
+      )
+    );
+    return a = !0, c(), function() {
+      Us(_), h(), a = !1;
+    };
+  });
+}
+new Intl.Collator(0, { numeric: 1 }).compare;
+const {
+  SvelteComponent: Vs,
+  append: _i,
+  attr: N,
+  bubble: qs,
+  check_outros: Ws,
+  create_slot: di,
+  detach: Ve,
+  element: vt,
+  empty: Ys,
+  get_all_dirty_from_scope: bi,
+  get_slot_changes: gi,
+  group_outros: Zs,
+  init: Qs,
+  insert: qe,
+  listen: Js,
+  safe_not_equal: Ks,
+  set_style: F,
+  space: pi,
+  src_url_equal: ct,
+  toggle_class: ye,
+  transition_in: mt,
+  transition_out: _t,
+  update_slot_base: vi
+} = window.__gradio__svelte__internal;
+function $s(e) {
+  let t, n, i, r, s, u, o = (
+    /*icon*/
+    e[7] && On(e)
+  );
+  const a = (
+    /*#slots*/
+    e[12].default
+  ), f = di(
+    a,
+    e,
+    /*$$scope*/
+    e[11],
+    null
+  );
+  return {
+    c() {
+      t = vt("button"), o && o.c(), n = pi(), f && f.c(), N(t, "class", i = /*size*/
+      e[4] + " " + /*variant*/
+      e[3] + " " + /*elem_classes*/
+      e[1].join(" ") + " svelte-8huxfn"), N(
+        t,
+        "id",
+        /*elem_id*/
+        e[0]
+      ), t.disabled = /*disabled*/
+      e[8], ye(t, "hidden", !/*visible*/
+      e[2]), F(
+        t,
+        "flex-grow",
+        /*scale*/
+        e[9]
+      ), F(
+        t,
+        "width",
+        /*scale*/
+        e[9] === 0 ? "fit-content" : null
+      ), F(t, "min-width", typeof /*min_width*/
+      e[10] == "number" ? `calc(min(${/*min_width*/
+      e[10]}px, 100%))` : null);
+    },
+    m(l, h) {
+      qe(l, t, h), o && o.m(t, null), _i(t, n), f && f.m(t, null), r = !0, s || (u = Js(
+        t,
+        "click",
+        /*click_handler*/
+        e[13]
+      ), s = !0);
+    },
+    p(l, h) {
+      /*icon*/
+      l[7] ? o ? o.p(l, h) : (o = On(l), o.c(), o.m(t, n)) : o && (o.d(1), o = null), f && f.p && (!r || h & /*$$scope*/
+      2048) && vi(
+        f,
+        a,
+        l,
+        /*$$scope*/
+        l[11],
+        r ? gi(
+          a,
+          /*$$scope*/
+          l[11],
+          h,
+          null
+        ) : bi(
+          /*$$scope*/
+          l[11]
+        ),
+        null
+      ), (!r || h & /*size, variant, elem_classes*/
+      26 && i !== (i = /*size*/
+      l[4] + " " + /*variant*/
+      l[3] + " " + /*elem_classes*/
+      l[1].join(" ") + " svelte-8huxfn")) && N(t, "class", i), (!r || h & /*elem_id*/
+      1) && N(
+        t,
+        "id",
+        /*elem_id*/
+        l[0]
+      ), (!r || h & /*disabled*/
+      256) && (t.disabled = /*disabled*/
+      l[8]), (!r || h & /*size, variant, elem_classes, visible*/
+      30) && ye(t, "hidden", !/*visible*/
+      l[2]), h & /*scale*/
+      512 && F(
+        t,
+        "flex-grow",
+        /*scale*/
+        l[9]
+      ), h & /*scale*/
+      512 && F(
+        t,
+        "width",
+        /*scale*/
+        l[9] === 0 ? "fit-content" : null
+      ), h & /*min_width*/
+      1024 && F(t, "min-width", typeof /*min_width*/
+      l[10] == "number" ? `calc(min(${/*min_width*/
+      l[10]}px, 100%))` : null);
+    },
+    i(l) {
+      r || (mt(f, l), r = !0);
+    },
+    o(l) {
+      _t(f, l), r = !1;
+    },
+    d(l) {
+      l && Ve(t), o && o.d(), f && f.d(l), s = !1, u();
+    }
+  };
+}
+function eo(e) {
+  let t, n, i, r, s = (
+    /*icon*/
+    e[7] && Mn(e)
+  );
+  const u = (
+    /*#slots*/
+    e[12].default
+  ), o = di(
+    u,
+    e,
+    /*$$scope*/
+    e[11],
+    null
+  );
+  return {
+    c() {
+      t = vt("a"), s && s.c(), n = pi(), o && o.c(), N(
+        t,
+        "href",
+        /*link*/
+        e[6]
+      ), N(t, "rel", "noopener noreferrer"), N(
+        t,
+        "aria-disabled",
+        /*disabled*/
+        e[8]
+      ), N(t, "class", i = /*size*/
+      e[4] + " " + /*variant*/
+      e[3] + " " + /*elem_classes*/
+      e[1].join(" ") + " svelte-8huxfn"), N(
+        t,
+        "id",
+        /*elem_id*/
+        e[0]
+      ), ye(t, "hidden", !/*visible*/
+      e[2]), ye(
+        t,
+        "disabled",
+        /*disabled*/
+        e[8]
+      ), F(
+        t,
+        "flex-grow",
+        /*scale*/
+        e[9]
+      ), F(
+        t,
+        "pointer-events",
+        /*disabled*/
+        e[8] ? "none" : null
+      ), F(
+        t,
+        "width",
+        /*scale*/
+        e[9] === 0 ? "fit-content" : null
+      ), F(t, "min-width", typeof /*min_width*/
+      e[10] == "number" ? `calc(min(${/*min_width*/
+      e[10]}px, 100%))` : null);
+    },
+    m(a, f) {
+      qe(a, t, f), s && s.m(t, null), _i(t, n), o && o.m(t, null), r = !0;
+    },
+    p(a, f) {
+      /*icon*/
+      a[7] ? s ? s.p(a, f) : (s = Mn(a), s.c(), s.m(t, n)) : s && (s.d(1), s = null), o && o.p && (!r || f & /*$$scope*/
+      2048) && vi(
+        o,
+        u,
+        a,
+        /*$$scope*/
+        a[11],
+        r ? gi(
+          u,
+          /*$$scope*/
+          a[11],
+          f,
+          null
+        ) : bi(
+          /*$$scope*/
+          a[11]
+        ),
+        null
+      ), (!r || f & /*link*/
+      64) && N(
+        t,
+        "href",
+        /*link*/
+        a[6]
+      ), (!r || f & /*disabled*/
+      256) && N(
+        t,
+        "aria-disabled",
+        /*disabled*/
+        a[8]
+      ), (!r || f & /*size, variant, elem_classes*/
+      26 && i !== (i = /*size*/
+      a[4] + " " + /*variant*/
+      a[3] + " " + /*elem_classes*/
+      a[1].join(" ") + " svelte-8huxfn")) && N(t, "class", i), (!r || f & /*elem_id*/
+      1) && N(
+        t,
+        "id",
+        /*elem_id*/
+        a[0]
+      ), (!r || f & /*size, variant, elem_classes, visible*/
+      30) && ye(t, "hidden", !/*visible*/
+      a[2]), (!r || f & /*size, variant, elem_classes, disabled*/
+      282) && ye(
+        t,
+        "disabled",
+        /*disabled*/
+        a[8]
+      ), f & /*scale*/
+      512 && F(
+        t,
+        "flex-grow",
+        /*scale*/
+        a[9]
+      ), f & /*disabled*/
+      256 && F(
+        t,
+        "pointer-events",
+        /*disabled*/
+        a[8] ? "none" : null
+      ), f & /*scale*/
+      512 && F(
+        t,
+        "width",
+        /*scale*/
+        a[9] === 0 ? "fit-content" : null
+      ), f & /*min_width*/
+      1024 && F(t, "min-width", typeof /*min_width*/
+      a[10] == "number" ? `calc(min(${/*min_width*/
+      a[10]}px, 100%))` : null);
+    },
+    i(a) {
+      r || (mt(o, a), r = !0);
+    },
+    o(a) {
+      _t(o, a), r = !1;
+    },
+    d(a) {
+      a && Ve(t), s && s.d(), o && o.d(a);
+    }
+  };
+}
+function On(e) {
+  let t, n, i;
+  return {
+    c() {
+      t = vt("img"), N(t, "class", "button-icon svelte-8huxfn"), ct(t.src, n = /*icon*/
+      e[7].url) || N(t, "src", n), N(t, "alt", i = `${/*value*/
+      e[5]} icon`);
+    },
+    m(r, s) {
+      qe(r, t, s);
+    },
+    p(r, s) {
+      s & /*icon*/
+      128 && !ct(t.src, n = /*icon*/
+      r[7].url) && N(t, "src", n), s & /*value*/
+      32 && i !== (i = `${/*value*/
+      r[5]} icon`) && N(t, "alt", i);
+    },
+    d(r) {
+      r && Ve(t);
+    }
+  };
+}
+function Mn(e) {
+  let t, n, i;
+  return {
+    c() {
+      t = vt("img"), N(t, "class", "button-icon svelte-8huxfn"), ct(t.src, n = /*icon*/
+      e[7].url) || N(t, "src", n), N(t, "alt", i = `${/*value*/
+      e[5]} icon`);
+    },
+    m(r, s) {
+      qe(r, t, s);
+    },
+    p(r, s) {
+      s & /*icon*/
+      128 && !ct(t.src, n = /*icon*/
+      r[7].url) && N(t, "src", n), s & /*value*/
+      32 && i !== (i = `${/*value*/
+      r[5]} icon`) && N(t, "alt", i);
+    },
+    d(r) {
+      r && Ve(t);
+    }
+  };
+}
+function to(e) {
+  let t, n, i, r;
+  const s = [eo, $s], u = [];
+  function o(a, f) {
+    return (
+      /*link*/
+      a[6] && /*link*/
+      a[6].length > 0 ? 0 : 1
+    );
+  }
+  return t = o(e), n = u[t] = s[t](e), {
+    c() {
+      n.c(), i = Ys();
+    },
+    m(a, f) {
+      u[t].m(a, f), qe(a, i, f), r = !0;
+    },
+    p(a, [f]) {
+      let l = t;
+      t = o(a), t === l ? u[t].p(a, f) : (Zs(), _t(u[l], 1, 1, () => {
+        u[l] = null;
+      }), Ws(), n = u[t], n ? n.p(a, f) : (n = u[t] = s[t](a), n.c()), mt(n, 1), n.m(i.parentNode, i));
+    },
+    i(a) {
+      r || (mt(n), r = !0);
+    },
+    o(a) {
+      _t(n), r = !1;
+    },
+    d(a) {
+      a && Ve(i), u[t].d(a);
+    }
+  };
+}
+function no(e, t, n) {
+  let { $$slots: i = {}, $$scope: r } = t, { elem_id: s = "" } = t, { elem_classes: u = [] } = t, { visible: o = !0 } = t, { variant: a = "secondary" } = t, { size: f = "lg" } = t, { value: l = null } = t, { link: h = null } = t, { icon: c = null } = t, { disabled: _ = !1 } = t, { scale: g = null } = t, { min_width: m = void 0 } = t;
+  function d(b) {
+    qs.call(this, e, b);
+  }
+  return e.$$set = (b) => {
+    "elem_id" in b && n(0, s = b.elem_id), "elem_classes" in b && n(1, u = b.elem_classes), "visible" in b && n(2, o = b.visible), "variant" in b && n(3, a = b.variant), "size" in b && n(4, f = b.size), "value" in b && n(5, l = b.value), "link" in b && n(6, h = b.link), "icon" in b && n(7, c = b.icon), "disabled" in b && n(8, _ = b.disabled), "scale" in b && n(9, g = b.scale), "min_width" in b && n(10, m = b.min_width), "$$scope" in b && n(11, r = b.$$scope);
+  }, [
+    s,
+    u,
+    o,
+    a,
+    f,
+    l,
+    h,
+    c,
+    _,
+    g,
+    m,
+    r,
+    i,
+    d
+  ];
+}
+class Ln extends Vs {
+  constructor(t) {
+    super(), Qs(this, t, no, to, Ks, {
+      elem_id: 0,
+      elem_classes: 1,
+      visible: 2,
+      variant: 3,
+      size: 4,
+      value: 5,
+      link: 6,
+      icon: 7,
+      disabled: 8,
+      scale: 9,
+      min_width: 10
+    });
+  }
+}
+function io(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var ro = function(t) {
+  return so(t) && !oo(t);
+};
+function so(e) {
+  return !!e && typeof e == "object";
+}
+function oo(e) {
+  var t = Object.prototype.toString.call(e);
+  return t === "[object RegExp]" || t === "[object Date]" || uo(e);
+}
+var ao = typeof Symbol == "function" && Symbol.for, lo = ao ? Symbol.for("react.element") : 60103;
+function uo(e) {
+  return e.$$typeof === lo;
+}
+function fo(e) {
+  return Array.isArray(e) ? [] : {};
+}
+function ze(e, t) {
+  return t.clone !== !1 && t.isMergeableObject(e) ? xe(fo(e), e, t) : e;
+}
+function ho(e, t, n) {
+  return e.concat(t).map(function(i) {
+    return ze(i, n);
+  });
+}
+function co(e, t) {
+  if (!t.customMerge)
+    return xe;
+  var n = t.customMerge(e);
+  return typeof n == "function" ? n : xe;
+}
+function mo(e) {
+  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(e).filter(function(t) {
+    return Object.propertyIsEnumerable.call(e, t);
+  }) : [];
+}
+function Rn(e) {
+  return Object.keys(e).concat(mo(e));
+}
+function yi(e, t) {
+  try {
+    return t in e;
+  } catch {
+    return !1;
+  }
+}
+function _o(e, t) {
+  return yi(e, t) && !(Object.hasOwnProperty.call(e, t) && Object.propertyIsEnumerable.call(e, t));
+}
+function bo(e, t, n) {
+  var i = {};
+  return n.isMergeableObject(e) && Rn(e).forEach(function(r) {
+    i[r] = ze(e[r], n);
+  }), Rn(t).forEach(function(r) {
+    _o(e, r) || (yi(e, r) && n.isMergeableObject(t[r]) ? i[r] = co(r, n)(e[r], t[r], n) : i[r] = ze(t[r], n));
+  }), i;
+}
+function xe(e, t, n) {
+  n = n || {}, n.arrayMerge = n.arrayMerge || ho, n.isMergeableObject = n.isMergeableObject || ro, n.cloneUnlessOtherwiseSpecified = ze;
+  var i = Array.isArray(t), r = Array.isArray(e), s = i === r;
+  return s ? i ? n.arrayMerge(e, t, n) : bo(e, t, n) : ze(t, n);
+}
+xe.all = function(t, n) {
+  if (!Array.isArray(t))
+    throw new Error("first argument should be an array");
+  return t.reduce(function(i, r) {
+    return xe(i, r, n);
+  }, {});
+};
+var go = xe, po = go;
+const vo = /* @__PURE__ */ io(po);
+var Zt = function(e, t) {
+  return Zt = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(n, i) {
+    n.__proto__ = i;
+  } || function(n, i) {
+    for (var r in i)
+      Object.prototype.hasOwnProperty.call(i, r) && (n[r] = i[r]);
+  }, Zt(e, t);
+};
+function yt(e, t) {
+  if (typeof t != "function" && t !== null)
+    throw new TypeError("Class extends value " + String(t) + " is not a constructor or null");
+  Zt(e, t);
+  function n() {
+    this.constructor = e;
+  }
+  e.prototype = t === null ? Object.create(t) : (n.prototype = t.prototype, new n());
+}
+var A = function() {
+  return A = Object.assign || function(t) {
+    for (var n, i = 1, r = arguments.length; i < r; i++) {
+      n = arguments[i];
+      for (var s in n)
+        Object.prototype.hasOwnProperty.call(n, s) && (t[s] = n[s]);
+    }
+    return t;
+  }, A.apply(this, arguments);
+};
+function Rt(e, t, n) {
+  if (n || arguments.length === 2)
+    for (var i = 0, r = t.length, s; i < r; i++)
+      (s || !(i in t)) && (s || (s = Array.prototype.slice.call(t, 0, i)), s[i] = t[i]);
+  return e.concat(s || Array.prototype.slice.call(t));
+}
+var S;
+(function(e) {
+  e[e.EXPECT_ARGUMENT_CLOSING_BRACE = 1] = "EXPECT_ARGUMENT_CLOSING_BRACE", e[e.EMPTY_ARGUMENT = 2] = "EMPTY_ARGUMENT", e[e.MALFORMED_ARGUMENT = 3] = "MALFORMED_ARGUMENT", e[e.EXPECT_ARGUMENT_TYPE = 4] = "EXPECT_ARGUMENT_TYPE", e[e.INVALID_ARGUMENT_TYPE = 5] = "INVALID_ARGUMENT_TYPE", e[e.EXPECT_ARGUMENT_STYLE = 6] = "EXPECT_ARGUMENT_STYLE", e[e.INVALID_NUMBER_SKELETON = 7] = "INVALID_NUMBER_SKELETON", e[e.INVALID_DATE_TIME_SKELETON = 8] = "INVALID_DATE_TIME_SKELETON", e[e.EXPECT_NUMBER_SKELETON = 9] = "EXPECT_NUMBER_SKELETON", e[e.EXPECT_DATE_TIME_SKELETON = 10] = "EXPECT_DATE_TIME_SKELETON", e[e.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE = 11] = "UNCLOSED_QUOTE_IN_ARGUMENT_STYLE", e[e.EXPECT_SELECT_ARGUMENT_OPTIONS = 12] = "EXPECT_SELECT_ARGUMENT_OPTIONS", e[e.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE = 13] = "EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE", e[e.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE = 14] = "INVALID_PLURAL_ARGUMENT_OFFSET_VALUE", e[e.EXPECT_SELECT_ARGUMENT_SELECTOR = 15] = "EXPECT_SELECT_ARGUMENT_SELECTOR", e[e.EXPECT_PLURAL_ARGUMENT_SELECTOR = 16] = "EXPECT_PLURAL_ARGUMENT_SELECTOR", e[e.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT = 17] = "EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT", e[e.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT = 18] = "EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT", e[e.INVALID_PLURAL_ARGUMENT_SELECTOR = 19] = "INVALID_PLURAL_ARGUMENT_SELECTOR", e[e.DUPLICATE_PLURAL_ARGUMENT_SELECTOR = 20] = "DUPLICATE_PLURAL_ARGUMENT_SELECTOR", e[e.DUPLICATE_SELECT_ARGUMENT_SELECTOR = 21] = "DUPLICATE_SELECT_ARGUMENT_SELECTOR", e[e.MISSING_OTHER_CLAUSE = 22] = "MISSING_OTHER_CLAUSE", e[e.INVALID_TAG = 23] = "INVALID_TAG", e[e.INVALID_TAG_NAME = 25] = "INVALID_TAG_NAME", e[e.UNMATCHED_CLOSING_TAG = 26] = "UNMATCHED_CLOSING_TAG", e[e.UNCLOSED_TAG = 27] = "UNCLOSED_TAG";
+})(S || (S = {}));
+var I;
+(function(e) {
+  e[e.literal = 0] = "literal", e[e.argument = 1] = "argument", e[e.number = 2] = "number", e[e.date = 3] = "date", e[e.time = 4] = "time", e[e.select = 5] = "select", e[e.plural = 6] = "plural", e[e.pound = 7] = "pound", e[e.tag = 8] = "tag";
+})(I || (I = {}));
+var Se;
+(function(e) {
+  e[e.number = 0] = "number", e[e.dateTime = 1] = "dateTime";
+})(Se || (Se = {}));
+function kn(e) {
+  return e.type === I.literal;
+}
+function yo(e) {
+  return e.type === I.argument;
+}
+function Ei(e) {
+  return e.type === I.number;
+}
+function wi(e) {
+  return e.type === I.date;
+}
+function xi(e) {
+  return e.type === I.time;
+}
+function Si(e) {
+  return e.type === I.select;
+}
+function Hi(e) {
+  return e.type === I.plural;
+}
+function Eo(e) {
+  return e.type === I.pound;
+}
+function Ai(e) {
+  return e.type === I.tag;
+}
+function Bi(e) {
+  return !!(e && typeof e == "object" && e.type === Se.number);
+}
+function Qt(e) {
+  return !!(e && typeof e == "object" && e.type === Se.dateTime);
+}
+var Ti = /[ \xA0\u1680\u2000-\u200A\u202F\u205F\u3000]/, wo = /(?:[Eec]{1,6}|G{1,5}|[Qq]{1,5}|(?:[yYur]+|U{1,5})|[ML]{1,5}|d{1,2}|D{1,3}|F{1}|[abB]{1,5}|[hkHK]{1,2}|w{1,2}|W{1}|m{1,2}|s{1,2}|[zZOvVxX]{1,4})(?=([^']*'[^']*')*[^']*$)/g;
+function xo(e) {
+  var t = {};
+  return e.replace(wo, function(n) {
+    var i = n.length;
+    switch (n[0]) {
+      case "G":
+        t.era = i === 4 ? "long" : i === 5 ? "narrow" : "short";
+        break;
+      case "y":
+        t.year = i === 2 ? "2-digit" : "numeric";
+        break;
+      case "Y":
+      case "u":
+      case "U":
+      case "r":
+        throw new RangeError("`Y/u/U/r` (year) patterns are not supported, use `y` instead");
+      case "q":
+      case "Q":
+        throw new RangeError("`q/Q` (quarter) patterns are not supported");
+      case "M":
+      case "L":
+        t.month = ["numeric", "2-digit", "short", "long", "narrow"][i - 1];
+        break;
+      case "w":
+      case "W":
+        throw new RangeError("`w/W` (week) patterns are not supported");
+      case "d":
+        t.day = ["numeric", "2-digit"][i - 1];
+        break;
+      case "D":
+      case "F":
+      case "g":
+        throw new RangeError("`D/F/g` (day) patterns are not supported, use `d` instead");
+      case "E":
+        t.weekday = i === 4 ? "short" : i === 5 ? "narrow" : "short";
+        break;
+      case "e":
+        if (i < 4)
+          throw new RangeError("`e..eee` (weekday) patterns are not supported");
+        t.weekday = ["short", "long", "narrow", "short"][i - 4];
+        break;
+      case "c":
+        if (i < 4)
+          throw new RangeError("`c..ccc` (weekday) patterns are not supported");
+        t.weekday = ["short", "long", "narrow", "short"][i - 4];
+        break;
+      case "a":
+        t.hour12 = !0;
+        break;
+      case "b":
+      case "B":
+        throw new RangeError("`b/B` (period) patterns are not supported, use `a` instead");
+      case "h":
+        t.hourCycle = "h12", t.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "H":
+        t.hourCycle = "h23", t.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "K":
+        t.hourCycle = "h11", t.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "k":
+        t.hourCycle = "h24", t.hour = ["numeric", "2-digit"][i - 1];
+        break;
+      case "j":
+      case "J":
+      case "C":
+        throw new RangeError("`j/J/C` (hour) patterns are not supported, use `h/H/K/k` instead");
+      case "m":
+        t.minute = ["numeric", "2-digit"][i - 1];
+        break;
+      case "s":
+        t.second = ["numeric", "2-digit"][i - 1];
+        break;
+      case "S":
+      case "A":
+        throw new RangeError("`S/A` (second) patterns are not supported, use `s` instead");
+      case "z":
+        t.timeZoneName = i < 4 ? "short" : "long";
+        break;
+      case "Z":
+      case "O":
+      case "v":
+      case "V":
+      case "X":
+      case "x":
+        throw new RangeError("`Z/O/v/V/X/x` (timeZone) patterns are not supported, use `z` instead");
+    }
+    return "";
+  }), t;
+}
+var So = /[\t-\r \x85\u200E\u200F\u2028\u2029]/i;
+function Ho(e) {
+  if (e.length === 0)
+    throw new Error("Number skeleton cannot be empty");
+  for (var t = e.split(So).filter(function(c) {
+    return c.length > 0;
+  }), n = [], i = 0, r = t; i < r.length; i++) {
+    var s = r[i], u = s.split("/");
+    if (u.length === 0)
+      throw new Error("Invalid number skeleton");
+    for (var o = u[0], a = u.slice(1), f = 0, l = a; f < l.length; f++) {
+      var h = l[f];
+      if (h.length === 0)
+        throw new Error("Invalid number skeleton");
+    }
+    n.push({ stem: o, options: a });
+  }
+  return n;
+}
+function Ao(e) {
+  return e.replace(/^(.*?)-/, "");
+}
+var Dn = /^\.(?:(0+)(\*)?|(#+)|(0+)(#+))$/g, Ci = /^(@+)?(\+|#+)?[rs]?$/g, Bo = /(\*)(0+)|(#+)(0+)|(0+)/g, Pi = /^(0+)$/;
+function Un(e) {
+  var t = {};
+  return e[e.length - 1] === "r" ? t.roundingPriority = "morePrecision" : e[e.length - 1] === "s" && (t.roundingPriority = "lessPrecision"), e.replace(Ci, function(n, i, r) {
+    return typeof r != "string" ? (t.minimumSignificantDigits = i.length, t.maximumSignificantDigits = i.length) : r === "+" ? t.minimumSignificantDigits = i.length : i[0] === "#" ? t.maximumSignificantDigits = i.length : (t.minimumSignificantDigits = i.length, t.maximumSignificantDigits = i.length + (typeof r == "string" ? r.length : 0)), "";
+  }), t;
+}
+function Ii(e) {
+  switch (e) {
+    case "sign-auto":
+      return {
+        signDisplay: "auto"
+      };
+    case "sign-accounting":
+    case "()":
+      return {
+        currencySign: "accounting"
+      };
+    case "sign-always":
+    case "+!":
+      return {
+        signDisplay: "always"
+      };
+    case "sign-accounting-always":
+    case "()!":
+      return {
+        signDisplay: "always",
+        currencySign: "accounting"
+      };
+    case "sign-except-zero":
+    case "+?":
+      return {
+        signDisplay: "exceptZero"
+      };
+    case "sign-accounting-except-zero":
+    case "()?":
+      return {
+        signDisplay: "exceptZero",
+        currencySign: "accounting"
+      };
+    case "sign-never":
+    case "+_":
+      return {
+        signDisplay: "never"
+      };
+  }
+}
+function To(e) {
+  var t;
+  if (e[0] === "E" && e[1] === "E" ? (t = {
+    notation: "engineering"
+  }, e = e.slice(2)) : e[0] === "E" && (t = {
+    notation: "scientific"
+  }, e = e.slice(1)), t) {
+    var n = e.slice(0, 2);
+    if (n === "+!" ? (t.signDisplay = "always", e = e.slice(2)) : n === "+?" && (t.signDisplay = "exceptZero", e = e.slice(2)), !Pi.test(e))
+      throw new Error("Malformed concise eng/scientific notation");
+    t.minimumIntegerDigits = e.length;
+  }
+  return t;
+}
+function Gn(e) {
+  var t = {}, n = Ii(e);
+  return n || t;
+}
+function Co(e) {
+  for (var t = {}, n = 0, i = e; n < i.length; n++) {
+    var r = i[n];
+    switch (r.stem) {
+      case "percent":
+      case "%":
+        t.style = "percent";
+        continue;
+      case "%x100":
+        t.style = "percent", t.scale = 100;
+        continue;
+      case "currency":
+        t.style = "currency", t.currency = r.options[0];
+        continue;
+      case "group-off":
+      case ",_":
+        t.useGrouping = !1;
+        continue;
+      case "precision-integer":
+      case ".":
+        t.maximumFractionDigits = 0;
+        continue;
+      case "measure-unit":
+      case "unit":
+        t.style = "unit", t.unit = Ao(r.options[0]);
+        continue;
+      case "compact-short":
+      case "K":
+        t.notation = "compact", t.compactDisplay = "short";
+        continue;
+      case "compact-long":
+      case "KK":
+        t.notation = "compact", t.compactDisplay = "long";
+        continue;
+      case "scientific":
+        t = A(A(A({}, t), { notation: "scientific" }), r.options.reduce(function(a, f) {
+          return A(A({}, a), Gn(f));
+        }, {}));
+        continue;
+      case "engineering":
+        t = A(A(A({}, t), { notation: "engineering" }), r.options.reduce(function(a, f) {
+          return A(A({}, a), Gn(f));
+        }, {}));
+        continue;
+      case "notation-simple":
+        t.notation = "standard";
+        continue;
+      case "unit-width-narrow":
+        t.currencyDisplay = "narrowSymbol", t.unitDisplay = "narrow";
+        continue;
+      case "unit-width-short":
+        t.currencyDisplay = "code", t.unitDisplay = "short";
+        continue;
+      case "unit-width-full-name":
+        t.currencyDisplay = "name", t.unitDisplay = "long";
+        continue;
+      case "unit-width-iso-code":
+        t.currencyDisplay = "symbol";
+        continue;
+      case "scale":
+        t.scale = parseFloat(r.options[0]);
+        continue;
+      case "integer-width":
+        if (r.options.length > 1)
+          throw new RangeError("integer-width stems only accept a single optional option");
+        r.options[0].replace(Bo, function(a, f, l, h, c, _) {
+          if (f)
+            t.minimumIntegerDigits = l.length;
+          else {
+            if (h && c)
+              throw new Error("We currently do not support maximum integer digits");
+            if (_)
+              throw new Error("We currently do not support exact integer digits");
+          }
+          return "";
+        });
+        continue;
+    }
+    if (Pi.test(r.stem)) {
+      t.minimumIntegerDigits = r.stem.length;
+      continue;
+    }
+    if (Dn.test(r.stem)) {
+      if (r.options.length > 1)
+        throw new RangeError("Fraction-precision stems only accept a single optional option");
+      r.stem.replace(Dn, function(a, f, l, h, c, _) {
+        return l === "*" ? t.minimumFractionDigits = f.length : h && h[0] === "#" ? t.maximumFractionDigits = h.length : c && _ ? (t.minimumFractionDigits = c.length, t.maximumFractionDigits = c.length + _.length) : (t.minimumFractionDigits = f.length, t.maximumFractionDigits = f.length), "";
+      });
+      var s = r.options[0];
+      s === "w" ? t = A(A({}, t), { trailingZeroDisplay: "stripIfInteger" }) : s && (t = A(A({}, t), Un(s)));
+      continue;
+    }
+    if (Ci.test(r.stem)) {
+      t = A(A({}, t), Un(r.stem));
+      continue;
+    }
+    var u = Ii(r.stem);
+    u && (t = A(A({}, t), u));
+    var o = To(r.stem);
+    o && (t = A(A({}, t), o));
+  }
+  return t;
+}
+var Qe = {
+  AX: [
+    "H"
+  ],
+  BQ: [
+    "H"
+  ],
+  CP: [
+    "H"
+  ],
+  CZ: [
+    "H"
+  ],
+  DK: [
+    "H"
+  ],
+  FI: [
+    "H"
+  ],
+  ID: [
+    "H"
+  ],
+  IS: [
+    "H"
+  ],
+  ML: [
+    "H"
+  ],
+  NE: [
+    "H"
+  ],
+  RU: [
+    "H"
+  ],
+  SE: [
+    "H"
+  ],
+  SJ: [
+    "H"
+  ],
+  SK: [
+    "H"
+  ],
+  AS: [
+    "h",
+    "H"
+  ],
+  BT: [
+    "h",
+    "H"
+  ],
+  DJ: [
+    "h",
+    "H"
+  ],
+  ER: [
+    "h",
+    "H"
+  ],
+  GH: [
+    "h",
+    "H"
+  ],
+  IN: [
+    "h",
+    "H"
+  ],
+  LS: [
+    "h",
+    "H"
+  ],
+  PG: [
+    "h",
+    "H"
+  ],
+  PW: [
+    "h",
+    "H"
+  ],
+  SO: [
+    "h",
+    "H"
+  ],
+  TO: [
+    "h",
+    "H"
+  ],
+  VU: [
+    "h",
+    "H"
+  ],
+  WS: [
+    "h",
+    "H"
+  ],
+  "001": [
+    "H",
+    "h"
+  ],
+  AL: [
+    "h",
+    "H",
+    "hB"
+  ],
+  TD: [
+    "h",
+    "H",
+    "hB"
+  ],
+  "ca-ES": [
+    "H",
+    "h",
+    "hB"
+  ],
+  CF: [
+    "H",
+    "h",
+    "hB"
+  ],
+  CM: [
+    "H",
+    "h",
+    "hB"
+  ],
+  "fr-CA": [
+    "H",
+    "h",
+    "hB"
+  ],
+  "gl-ES": [
+    "H",
+    "h",
+    "hB"
+  ],
+  "it-CH": [
+    "H",
+    "h",
+    "hB"
+  ],
+  "it-IT": [
+    "H",
+    "h",
+    "hB"
+  ],
+  LU: [
+    "H",
+    "h",
+    "hB"
+  ],
+  NP: [
+    "H",
+    "h",
+    "hB"
+  ],
+  PF: [
+    "H",
+    "h",
+    "hB"
+  ],
+  SC: [
+    "H",
+    "h",
+    "hB"
+  ],
+  SM: [
+    "H",
+    "h",
+    "hB"
+  ],
+  SN: [
+    "H",
+    "h",
+    "hB"
+  ],
+  TF: [
+    "H",
+    "h",
+    "hB"
+  ],
+  VA: [
+    "H",
+    "h",
+    "hB"
+  ],
+  CY: [
+    "h",
+    "H",
+    "hb",
+    "hB"
+  ],
+  GR: [
+    "h",
+    "H",
+    "hb",
+    "hB"
+  ],
+  CO: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  DO: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  KP: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  KR: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  NA: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  PA: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  PR: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  VE: [
+    "h",
+    "H",
+    "hB",
+    "hb"
+  ],
+  AC: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  AI: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  BW: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  BZ: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  CC: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  CK: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  CX: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  DG: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  FK: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  GB: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  GG: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  GI: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  IE: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  IM: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  IO: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  JE: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  LT: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  MK: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  MN: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  MS: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NF: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NG: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NR: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  NU: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  PN: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  SH: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  SX: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  TA: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  ZA: [
+    "H",
+    "h",
+    "hb",
+    "hB"
+  ],
+  "af-ZA": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  AR: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  CL: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  CR: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  CU: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  EA: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-BO": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-BR": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-EC": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-ES": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-GQ": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  "es-PE": [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  GT: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  HN: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  IC: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  KG: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  KM: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  LK: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  MA: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  MX: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  NI: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  PY: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  SV: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  UY: [
+    "H",
+    "h",
+    "hB",
+    "hb"
+  ],
+  JP: [
+    "H",
+    "h",
+    "K"
+  ],
+  AD: [
+    "H",
+    "hB"
+  ],
+  AM: [
+    "H",
+    "hB"
+  ],
+  AO: [
+    "H",
+    "hB"
+  ],
+  AT: [
+    "H",
+    "hB"
+  ],
+  AW: [
+    "H",
+    "hB"
+  ],
+  BE: [
+    "H",
+    "hB"
+  ],
+  BF: [
+    "H",
+    "hB"
+  ],
+  BJ: [
+    "H",
+    "hB"
+  ],
+  BL: [
+    "H",
+    "hB"
+  ],
+  BR: [
+    "H",
+    "hB"
+  ],
+  CG: [
+    "H",
+    "hB"
+  ],
+  CI: [
+    "H",
+    "hB"
+  ],
+  CV: [
+    "H",
+    "hB"
+  ],
+  DE: [
+    "H",
+    "hB"
+  ],
+  EE: [
+    "H",
+    "hB"
+  ],
+  FR: [
+    "H",
+    "hB"
+  ],
+  GA: [
+    "H",
+    "hB"
+  ],
+  GF: [
+    "H",
+    "hB"
+  ],
+  GN: [
+    "H",
+    "hB"
+  ],
+  GP: [
+    "H",
+    "hB"
+  ],
+  GW: [
+    "H",
+    "hB"
+  ],
+  HR: [
+    "H",
+    "hB"
+  ],
+  IL: [
+    "H",
+    "hB"
+  ],
+  IT: [
+    "H",
+    "hB"
+  ],
+  KZ: [
+    "H",
+    "hB"
+  ],
+  MC: [
+    "H",
+    "hB"
+  ],
+  MD: [
+    "H",
+    "hB"
+  ],
+  MF: [
+    "H",
+    "hB"
+  ],
+  MQ: [
+    "H",
+    "hB"
+  ],
+  MZ: [
+    "H",
+    "hB"
+  ],
+  NC: [
+    "H",
+    "hB"
+  ],
+  NL: [
+    "H",
+    "hB"
+  ],
+  PM: [
+    "H",
+    "hB"
+  ],
+  PT: [
+    "H",
+    "hB"
+  ],
+  RE: [
+    "H",
+    "hB"
+  ],
+  RO: [
+    "H",
+    "hB"
+  ],
+  SI: [
+    "H",
+    "hB"
+  ],
+  SR: [
+    "H",
+    "hB"
+  ],
+  ST: [
+    "H",
+    "hB"
+  ],
+  TG: [
+    "H",
+    "hB"
+  ],
+  TR: [
+    "H",
+    "hB"
+  ],
+  WF: [
+    "H",
+    "hB"
+  ],
+  YT: [
+    "H",
+    "hB"
+  ],
+  BD: [
+    "h",
+    "hB",
+    "H"
+  ],
+  PK: [
+    "h",
+    "hB",
+    "H"
+  ],
+  AZ: [
+    "H",
+    "hB",
+    "h"
+  ],
+  BA: [
+    "H",
+    "hB",
+    "h"
+  ],
+  BG: [
+    "H",
+    "hB",
+    "h"
+  ],
+  CH: [
+    "H",
+    "hB",
+    "h"
+  ],
+  GE: [
+    "H",
+    "hB",
+    "h"
+  ],
+  LI: [
+    "H",
+    "hB",
+    "h"
+  ],
+  ME: [
+    "H",
+    "hB",
+    "h"
+  ],
+  RS: [
+    "H",
+    "hB",
+    "h"
+  ],
+  UA: [
+    "H",
+    "hB",
+    "h"
+  ],
+  UZ: [
+    "H",
+    "hB",
+    "h"
+  ],
+  XK: [
+    "H",
+    "hB",
+    "h"
+  ],
+  AG: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  AU: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BB: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BS: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  CA: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  DM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  "en-001": [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  FJ: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  FM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GD: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GU: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  GY: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  JM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  KI: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  KN: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  KY: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  LC: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  LR: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  MH: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  MP: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  MW: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  NZ: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SB: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SG: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SL: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SS: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  SZ: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  TC: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  TT: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  UM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  US: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  VC: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  VG: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  VI: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  ZM: [
+    "h",
+    "hb",
+    "H",
+    "hB"
+  ],
+  BO: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  EC: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  ES: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  GQ: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  PE: [
+    "H",
+    "hB",
+    "h",
+    "hb"
+  ],
+  AE: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  "ar-001": [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  BH: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  DZ: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  EG: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  EH: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  HK: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  IQ: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  JO: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  KW: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  LB: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  LY: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  MO: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  MR: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  OM: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  PH: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  PS: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  QA: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  SA: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  SD: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  SY: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  TN: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  YE: [
+    "h",
+    "hB",
+    "hb",
+    "H"
+  ],
+  AF: [
+    "H",
+    "hb",
+    "hB",
+    "h"
+  ],
+  LA: [
+    "H",
+    "hb",
+    "hB",
+    "h"
+  ],
+  CN: [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  LV: [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  TL: [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  "zu-ZA": [
+    "H",
+    "hB",
+    "hb",
+    "h"
+  ],
+  CD: [
+    "hB",
+    "H"
+  ],
+  IR: [
+    "hB",
+    "H"
+  ],
+  "hi-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  "kn-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  "ml-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  "te-IN": [
+    "hB",
+    "h",
+    "H"
+  ],
+  KH: [
+    "hB",
+    "h",
+    "H",
+    "hb"
+  ],
+  "ta-IN": [
+    "hB",
+    "h",
+    "hb",
+    "H"
+  ],
+  BN: [
+    "hb",
+    "hB",
+    "h",
+    "H"
+  ],
+  MY: [
+    "hb",
+    "hB",
+    "h",
+    "H"
+  ],
+  ET: [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  "gu-IN": [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  "mr-IN": [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  "pa-IN": [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  TW: [
+    "hB",
+    "hb",
+    "h",
+    "H"
+  ],
+  KE: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ],
+  MM: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ],
+  TZ: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ],
+  UG: [
+    "hB",
+    "hb",
+    "H",
+    "h"
+  ]
+};
+function Po(e, t) {
+  for (var n = "", i = 0; i < e.length; i++) {
+    var r = e.charAt(i);
+    if (r === "j") {
+      for (var s = 0; i + 1 < e.length && e.charAt(i + 1) === r; )
+        s++, i++;
+      var u = 1 + (s & 1), o = s < 2 ? 1 : 3 + (s >> 1), a = "a", f = Io(t);
+      for ((f == "H" || f == "k") && (o = 0); o-- > 0; )
+        n += a;
+      for (; u-- > 0; )
+        n = f + n;
+    } else
+      r === "J" ? n += "H" : n += r;
+  }
+  return n;
+}
+function Io(e) {
+  var t = e.hourCycle;
+  if (t === void 0 && // @ts-ignore hourCycle(s) is not identified yet
+  e.hourCycles && // @ts-ignore
+  e.hourCycles.length && (t = e.hourCycles[0]), t)
+    switch (t) {
+      case "h24":
+        return "k";
+      case "h23":
+        return "H";
+      case "h12":
+        return "h";
+      case "h11":
+        return "K";
+      default:
+        throw new Error("Invalid hourCycle");
+    }
+  var n = e.language, i;
+  n !== "root" && (i = e.maximize().region);
+  var r = Qe[i || ""] || Qe[n || ""] || Qe["".concat(n, "-001")] || Qe["001"];
+  return r[0];
+}
+var kt, No = new RegExp("^".concat(Ti.source, "*")), Oo = new RegExp("".concat(Ti.source, "*$"));
+function H(e, t) {
+  return { start: e, end: t };
+}
+var Mo = !!String.prototype.startsWith, Lo = !!String.fromCodePoint, Ro = !!Object.fromEntries, ko = !!String.prototype.codePointAt, Do = !!String.prototype.trimStart, Uo = !!String.prototype.trimEnd, Go = !!Number.isSafeInteger, Fo = Go ? Number.isSafeInteger : function(e) {
+  return typeof e == "number" && isFinite(e) && Math.floor(e) === e && Math.abs(e) <= 9007199254740991;
+}, Jt = !0;
+try {
+  var zo = Oi("([^\\p{White_Space}\\p{Pattern_Syntax}]*)", "yu");
+  Jt = ((kt = zo.exec("a")) === null || kt === void 0 ? void 0 : kt[0]) === "a";
+} catch {
+  Jt = !1;
+}
+var Fn = Mo ? (
+  // Native
+  function(t, n, i) {
+    return t.startsWith(n, i);
+  }
+) : (
+  // For IE11
+  function(t, n, i) {
+    return t.slice(i, i + n.length) === n;
+  }
+), Kt = Lo ? String.fromCodePoint : (
+  // IE11
+  function() {
+    for (var t = [], n = 0; n < arguments.length; n++)
+      t[n] = arguments[n];
+    for (var i = "", r = t.length, s = 0, u; r > s; ) {
+      if (u = t[s++], u > 1114111)
+        throw RangeError(u + " is not a valid code point");
+      i += u < 65536 ? String.fromCharCode(u) : String.fromCharCode(((u -= 65536) >> 10) + 55296, u % 1024 + 56320);
+    }
+    return i;
+  }
+), zn = (
+  // native
+  Ro ? Object.fromEntries : (
+    // Ponyfill
+    function(t) {
+      for (var n = {}, i = 0, r = t; i < r.length; i++) {
+        var s = r[i], u = s[0], o = s[1];
+        n[u] = o;
+      }
+      return n;
+    }
+  )
+), Ni = ko ? (
+  // Native
+  function(t, n) {
+    return t.codePointAt(n);
+  }
+) : (
+  // IE 11
+  function(t, n) {
+    var i = t.length;
+    if (!(n < 0 || n >= i)) {
+      var r = t.charCodeAt(n), s;
+      return r < 55296 || r > 56319 || n + 1 === i || (s = t.charCodeAt(n + 1)) < 56320 || s > 57343 ? r : (r - 55296 << 10) + (s - 56320) + 65536;
+    }
+  }
+), jo = Do ? (
+  // Native
+  function(t) {
+    return t.trimStart();
+  }
+) : (
+  // Ponyfill
+  function(t) {
+    return t.replace(No, "");
+  }
+), Xo = Uo ? (
+  // Native
+  function(t) {
+    return t.trimEnd();
+  }
+) : (
+  // Ponyfill
+  function(t) {
+    return t.replace(Oo, "");
+  }
+);
+function Oi(e, t) {
+  return new RegExp(e, t);
+}
+var $t;
+if (Jt) {
+  var jn = Oi("([^\\p{White_Space}\\p{Pattern_Syntax}]*)", "yu");
+  $t = function(t, n) {
+    var i;
+    jn.lastIndex = n;
+    var r = jn.exec(t);
+    return (i = r[1]) !== null && i !== void 0 ? i : "";
+  };
+} else
+  $t = function(t, n) {
+    for (var i = []; ; ) {
+      var r = Ni(t, n);
+      if (r === void 0 || Mi(r) || Yo(r))
+        break;
+      i.push(r), n += r >= 65536 ? 2 : 1;
+    }
+    return Kt.apply(void 0, i);
+  };
+var Vo = (
+  /** @class */
+  function() {
+    function e(t, n) {
+      n === void 0 && (n = {}), this.message = t, this.position = { offset: 0, line: 1, column: 1 }, this.ignoreTag = !!n.ignoreTag, this.locale = n.locale, this.requiresOtherClause = !!n.requiresOtherClause, this.shouldParseSkeletons = !!n.shouldParseSkeletons;
+    }
+    return e.prototype.parse = function() {
+      if (this.offset() !== 0)
+        throw Error("parser can only be used once");
+      return this.parseMessage(0, "", !1);
+    }, e.prototype.parseMessage = function(t, n, i) {
+      for (var r = []; !this.isEOF(); ) {
+        var s = this.char();
+        if (s === 123) {
+          var u = this.parseArgument(t, i);
+          if (u.err)
+            return u;
+          r.push(u.val);
+        } else {
+          if (s === 125 && t > 0)
+            break;
+          if (s === 35 && (n === "plural" || n === "selectordinal")) {
+            var o = this.clonePosition();
+            this.bump(), r.push({
+              type: I.pound,
+              location: H(o, this.clonePosition())
+            });
+          } else if (s === 60 && !this.ignoreTag && this.peek() === 47) {
+            if (i)
+              break;
+            return this.error(S.UNMATCHED_CLOSING_TAG, H(this.clonePosition(), this.clonePosition()));
+          } else if (s === 60 && !this.ignoreTag && en(this.peek() || 0)) {
+            var u = this.parseTag(t, n);
+            if (u.err)
+              return u;
+            r.push(u.val);
+          } else {
+            var u = this.parseLiteral(t, n);
+            if (u.err)
+              return u;
+            r.push(u.val);
+          }
+        }
+      }
+      return { val: r, err: null };
+    }, e.prototype.parseTag = function(t, n) {
+      var i = this.clonePosition();
+      this.bump();
+      var r = this.parseTagName();
+      if (this.bumpSpace(), this.bumpIf("/>"))
+        return {
+          val: {
+            type: I.literal,
+            value: "<".concat(r, "/>"),
+            location: H(i, this.clonePosition())
+          },
+          err: null
+        };
+      if (this.bumpIf(">")) {
+        var s = this.parseMessage(t + 1, n, !0);
+        if (s.err)
+          return s;
+        var u = s.val, o = this.clonePosition();
+        if (this.bumpIf("</")) {
+          if (this.isEOF() || !en(this.char()))
+            return this.error(S.INVALID_TAG, H(o, this.clonePosition()));
+          var a = this.clonePosition(), f = this.parseTagName();
+          return r !== f ? this.error(S.UNMATCHED_CLOSING_TAG, H(a, this.clonePosition())) : (this.bumpSpace(), this.bumpIf(">") ? {
+            val: {
+              type: I.tag,
+              value: r,
+              children: u,
+              location: H(i, this.clonePosition())
+            },
+            err: null
+          } : this.error(S.INVALID_TAG, H(o, this.clonePosition())));
+        } else
+          return this.error(S.UNCLOSED_TAG, H(i, this.clonePosition()));
+      } else
+        return this.error(S.INVALID_TAG, H(i, this.clonePosition()));
+    }, e.prototype.parseTagName = function() {
+      var t = this.offset();
+      for (this.bump(); !this.isEOF() && Wo(this.char()); )
+        this.bump();
+      return this.message.slice(t, this.offset());
+    }, e.prototype.parseLiteral = function(t, n) {
+      for (var i = this.clonePosition(), r = ""; ; ) {
+        var s = this.tryParseQuote(n);
+        if (s) {
+          r += s;
+          continue;
+        }
+        var u = this.tryParseUnquoted(t, n);
+        if (u) {
+          r += u;
+          continue;
+        }
+        var o = this.tryParseLeftAngleBracket();
+        if (o) {
+          r += o;
+          continue;
+        }
+        break;
+      }
+      var a = H(i, this.clonePosition());
+      return {
+        val: { type: I.literal, value: r, location: a },
+        err: null
+      };
+    }, e.prototype.tryParseLeftAngleBracket = function() {
+      return !this.isEOF() && this.char() === 60 && (this.ignoreTag || // If at the opening tag or closing tag position, bail.
+      !qo(this.peek() || 0)) ? (this.bump(), "<") : null;
+    }, e.prototype.tryParseQuote = function(t) {
+      if (this.isEOF() || this.char() !== 39)
+        return null;
+      switch (this.peek()) {
+        case 39:
+          return this.bump(), this.bump(), "'";
+        case 123:
+        case 60:
+        case 62:
+        case 125:
+          break;
+        case 35:
+          if (t === "plural" || t === "selectordinal")
+            break;
+          return null;
+        default:
+          return null;
+      }
+      this.bump();
+      var n = [this.char()];
+      for (this.bump(); !this.isEOF(); ) {
+        var i = this.char();
+        if (i === 39)
+          if (this.peek() === 39)
+            n.push(39), this.bump();
+          else {
+            this.bump();
+            break;
+          }
+        else
+          n.push(i);
+        this.bump();
+      }
+      return Kt.apply(void 0, n);
+    }, e.prototype.tryParseUnquoted = function(t, n) {
+      if (this.isEOF())
+        return null;
+      var i = this.char();
+      return i === 60 || i === 123 || i === 35 && (n === "plural" || n === "selectordinal") || i === 125 && t > 0 ? null : (this.bump(), Kt(i));
+    }, e.prototype.parseArgument = function(t, n) {
+      var i = this.clonePosition();
+      if (this.bump(), this.bumpSpace(), this.isEOF())
+        return this.error(S.EXPECT_ARGUMENT_CLOSING_BRACE, H(i, this.clonePosition()));
+      if (this.char() === 125)
+        return this.bump(), this.error(S.EMPTY_ARGUMENT, H(i, this.clonePosition()));
+      var r = this.parseIdentifierIfPossible().value;
+      if (!r)
+        return this.error(S.MALFORMED_ARGUMENT, H(i, this.clonePosition()));
+      if (this.bumpSpace(), this.isEOF())
+        return this.error(S.EXPECT_ARGUMENT_CLOSING_BRACE, H(i, this.clonePosition()));
+      switch (this.char()) {
+        case 125:
+          return this.bump(), {
+            val: {
+              type: I.argument,
+              // value does not include the opening and closing braces.
+              value: r,
+              location: H(i, this.clonePosition())
+            },
+            err: null
+          };
+        case 44:
+          return this.bump(), this.bumpSpace(), this.isEOF() ? this.error(S.EXPECT_ARGUMENT_CLOSING_BRACE, H(i, this.clonePosition())) : this.parseArgumentOptions(t, n, r, i);
+        default:
+          return this.error(S.MALFORMED_ARGUMENT, H(i, this.clonePosition()));
+      }
+    }, e.prototype.parseIdentifierIfPossible = function() {
+      var t = this.clonePosition(), n = this.offset(), i = $t(this.message, n), r = n + i.length;
+      this.bumpTo(r);
+      var s = this.clonePosition(), u = H(t, s);
+      return { value: i, location: u };
+    }, e.prototype.parseArgumentOptions = function(t, n, i, r) {
+      var s, u = this.clonePosition(), o = this.parseIdentifierIfPossible().value, a = this.clonePosition();
+      switch (o) {
+        case "":
+          return this.error(S.EXPECT_ARGUMENT_TYPE, H(u, a));
+        case "number":
+        case "date":
+        case "time": {
+          this.bumpSpace();
+          var f = null;
+          if (this.bumpIf(",")) {
+            this.bumpSpace();
+            var l = this.clonePosition(), h = this.parseSimpleArgStyleIfPossible();
+            if (h.err)
+              return h;
+            var c = Xo(h.val);
+            if (c.length === 0)
+              return this.error(S.EXPECT_ARGUMENT_STYLE, H(this.clonePosition(), this.clonePosition()));
+            var _ = H(l, this.clonePosition());
+            f = { style: c, styleLocation: _ };
+          }
+          var g = this.tryParseArgumentClose(r);
+          if (g.err)
+            return g;
+          var m = H(r, this.clonePosition());
+          if (f && Fn(f == null ? void 0 : f.style, "::", 0)) {
+            var d = jo(f.style.slice(2));
+            if (o === "number") {
+              var h = this.parseNumberSkeletonFromString(d, f.styleLocation);
+              return h.err ? h : {
+                val: { type: I.number, value: i, location: m, style: h.val },
+                err: null
+              };
+            } else {
+              if (d.length === 0)
+                return this.error(S.EXPECT_DATE_TIME_SKELETON, m);
+              var b = d;
+              this.locale && (b = Po(d, this.locale));
+              var c = {
+                type: Se.dateTime,
+                pattern: b,
+                location: f.styleLocation,
+                parsedOptions: this.shouldParseSkeletons ? xo(b) : {}
+              }, y = o === "date" ? I.date : I.time;
+              return {
+                val: { type: y, value: i, location: m, style: c },
+                err: null
+              };
+            }
+          }
+          return {
+            val: {
+              type: o === "number" ? I.number : o === "date" ? I.date : I.time,
+              value: i,
+              location: m,
+              style: (s = f == null ? void 0 : f.style) !== null && s !== void 0 ? s : null
+            },
+            err: null
+          };
+        }
+        case "plural":
+        case "selectordinal":
+        case "select": {
+          var p = this.clonePosition();
+          if (this.bumpSpace(), !this.bumpIf(","))
+            return this.error(S.EXPECT_SELECT_ARGUMENT_OPTIONS, H(p, A({}, p)));
+          this.bumpSpace();
+          var B = this.parseIdentifierIfPossible(), T = 0;
+          if (o !== "select" && B.value === "offset") {
+            if (!this.bumpIf(":"))
+              return this.error(S.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, H(this.clonePosition(), this.clonePosition()));
+            this.bumpSpace();
+            var h = this.tryParseDecimalInteger(S.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, S.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);
+            if (h.err)
+              return h;
+            this.bumpSpace(), B = this.parseIdentifierIfPossible(), T = h.val;
+          }
+          var O = this.tryParsePluralOrSelectOptions(t, o, n, B);
+          if (O.err)
+            return O;
+          var g = this.tryParseArgumentClose(r);
+          if (g.err)
+            return g;
+          var C = H(r, this.clonePosition());
+          return o === "select" ? {
+            val: {
+              type: I.select,
+              value: i,
+              options: zn(O.val),
+              location: C
+            },
+            err: null
+          } : {
+            val: {
+              type: I.plural,
+              value: i,
+              options: zn(O.val),
+              offset: T,
+              pluralType: o === "plural" ? "cardinal" : "ordinal",
+              location: C
+            },
+            err: null
+          };
+        }
+        default:
+          return this.error(S.INVALID_ARGUMENT_TYPE, H(u, a));
+      }
+    }, e.prototype.tryParseArgumentClose = function(t) {
+      return this.isEOF() || this.char() !== 125 ? this.error(S.EXPECT_ARGUMENT_CLOSING_BRACE, H(t, this.clonePosition())) : (this.bump(), { val: !0, err: null });
+    }, e.prototype.parseSimpleArgStyleIfPossible = function() {
+      for (var t = 0, n = this.clonePosition(); !this.isEOF(); ) {
+        var i = this.char();
+        switch (i) {
+          case 39: {
+            this.bump();
+            var r = this.clonePosition();
+            if (!this.bumpUntil("'"))
+              return this.error(S.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE, H(r, this.clonePosition()));
+            this.bump();
+            break;
+          }
+          case 123: {
+            t += 1, this.bump();
+            break;
+          }
+          case 125: {
+            if (t > 0)
+              t -= 1;
+            else
+              return {
+                val: this.message.slice(n.offset, this.offset()),
+                err: null
+              };
+            break;
+          }
+          default:
+            this.bump();
+            break;
+        }
+      }
+      return {
+        val: this.message.slice(n.offset, this.offset()),
+        err: null
+      };
+    }, e.prototype.parseNumberSkeletonFromString = function(t, n) {
+      var i = [];
+      try {
+        i = Ho(t);
+      } catch {
+        return this.error(S.INVALID_NUMBER_SKELETON, n);
+      }
+      return {
+        val: {
+          type: Se.number,
+          tokens: i,
+          location: n,
+          parsedOptions: this.shouldParseSkeletons ? Co(i) : {}
+        },
+        err: null
+      };
+    }, e.prototype.tryParsePluralOrSelectOptions = function(t, n, i, r) {
+      for (var s, u = !1, o = [], a = /* @__PURE__ */ new Set(), f = r.value, l = r.location; ; ) {
+        if (f.length === 0) {
+          var h = this.clonePosition();
+          if (n !== "select" && this.bumpIf("=")) {
+            var c = this.tryParseDecimalInteger(S.EXPECT_PLURAL_ARGUMENT_SELECTOR, S.INVALID_PLURAL_ARGUMENT_SELECTOR);
+            if (c.err)
+              return c;
+            l = H(h, this.clonePosition()), f = this.message.slice(h.offset, this.offset());
+          } else
+            break;
+        }
+        if (a.has(f))
+          return this.error(n === "select" ? S.DUPLICATE_SELECT_ARGUMENT_SELECTOR : S.DUPLICATE_PLURAL_ARGUMENT_SELECTOR, l);
+        f === "other" && (u = !0), this.bumpSpace();
+        var _ = this.clonePosition();
+        if (!this.bumpIf("{"))
+          return this.error(n === "select" ? S.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT : S.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT, H(this.clonePosition(), this.clonePosition()));
+        var g = this.parseMessage(t + 1, n, i);
+        if (g.err)
+          return g;
+        var m = this.tryParseArgumentClose(_);
+        if (m.err)
+          return m;
+        o.push([
+          f,
+          {
+            value: g.val,
+            location: H(_, this.clonePosition())
+          }
+        ]), a.add(f), this.bumpSpace(), s = this.parseIdentifierIfPossible(), f = s.value, l = s.location;
+      }
+      return o.length === 0 ? this.error(n === "select" ? S.EXPECT_SELECT_ARGUMENT_SELECTOR : S.EXPECT_PLURAL_ARGUMENT_SELECTOR, H(this.clonePosition(), this.clonePosition())) : this.requiresOtherClause && !u ? this.error(S.MISSING_OTHER_CLAUSE, H(this.clonePosition(), this.clonePosition())) : { val: o, err: null };
+    }, e.prototype.tryParseDecimalInteger = function(t, n) {
+      var i = 1, r = this.clonePosition();
+      this.bumpIf("+") || this.bumpIf("-") && (i = -1);
+      for (var s = !1, u = 0; !this.isEOF(); ) {
+        var o = this.char();
+        if (o >= 48 && o <= 57)
+          s = !0, u = u * 10 + (o - 48), this.bump();
+        else
+          break;
+      }
+      var a = H(r, this.clonePosition());
+      return s ? (u *= i, Fo(u) ? { val: u, err: null } : this.error(n, a)) : this.error(t, a);
+    }, e.prototype.offset = function() {
+      return this.position.offset;
+    }, e.prototype.isEOF = function() {
+      return this.offset() === this.message.length;
+    }, e.prototype.clonePosition = function() {
+      return {
+        offset: this.position.offset,
+        line: this.position.line,
+        column: this.position.column
+      };
+    }, e.prototype.char = function() {
+      var t = this.position.offset;
+      if (t >= this.message.length)
+        throw Error("out of bound");
+      var n = Ni(this.message, t);
+      if (n === void 0)
+        throw Error("Offset ".concat(t, " is at invalid UTF-16 code unit boundary"));
+      return n;
+    }, e.prototype.error = function(t, n) {
+      return {
+        val: null,
+        err: {
+          kind: t,
+          message: this.message,
+          location: n
+        }
+      };
+    }, e.prototype.bump = function() {
+      if (!this.isEOF()) {
+        var t = this.char();
+        t === 10 ? (this.position.line += 1, this.position.column = 1, this.position.offset += 1) : (this.position.column += 1, this.position.offset += t < 65536 ? 1 : 2);
+      }
+    }, e.prototype.bumpIf = function(t) {
+      if (Fn(this.message, t, this.offset())) {
+        for (var n = 0; n < t.length; n++)
+          this.bump();
+        return !0;
+      }
+      return !1;
+    }, e.prototype.bumpUntil = function(t) {
+      var n = this.offset(), i = this.message.indexOf(t, n);
+      return i >= 0 ? (this.bumpTo(i), !0) : (this.bumpTo(this.message.length), !1);
+    }, e.prototype.bumpTo = function(t) {
+      if (this.offset() > t)
+        throw Error("targetOffset ".concat(t, " must be greater than or equal to the current offset ").concat(this.offset()));
+      for (t = Math.min(t, this.message.length); ; ) {
+        var n = this.offset();
+        if (n === t)
+          break;
+        if (n > t)
+          throw Error("targetOffset ".concat(t, " is at invalid UTF-16 code unit boundary"));
+        if (this.bump(), this.isEOF())
+          break;
+      }
+    }, e.prototype.bumpSpace = function() {
+      for (; !this.isEOF() && Mi(this.char()); )
+        this.bump();
+    }, e.prototype.peek = function() {
+      if (this.isEOF())
+        return null;
+      var t = this.char(), n = this.offset(), i = this.message.charCodeAt(n + (t >= 65536 ? 2 : 1));
+      return i ?? null;
+    }, e;
+  }()
+);
+function en(e) {
+  return e >= 97 && e <= 122 || e >= 65 && e <= 90;
+}
+function qo(e) {
+  return en(e) || e === 47;
+}
+function Wo(e) {
+  return e === 45 || e === 46 || e >= 48 && e <= 57 || e === 95 || e >= 97 && e <= 122 || e >= 65 && e <= 90 || e == 183 || e >= 192 && e <= 214 || e >= 216 && e <= 246 || e >= 248 && e <= 893 || e >= 895 && e <= 8191 || e >= 8204 && e <= 8205 || e >= 8255 && e <= 8256 || e >= 8304 && e <= 8591 || e >= 11264 && e <= 12271 || e >= 12289 && e <= 55295 || e >= 63744 && e <= 64975 || e >= 65008 && e <= 65533 || e >= 65536 && e <= 983039;
+}
+function Mi(e) {
+  return e >= 9 && e <= 13 || e === 32 || e === 133 || e >= 8206 && e <= 8207 || e === 8232 || e === 8233;
+}
+function Yo(e) {
+  return e >= 33 && e <= 35 || e === 36 || e >= 37 && e <= 39 || e === 40 || e === 41 || e === 42 || e === 43 || e === 44 || e === 45 || e >= 46 && e <= 47 || e >= 58 && e <= 59 || e >= 60 && e <= 62 || e >= 63 && e <= 64 || e === 91 || e === 92 || e === 93 || e === 94 || e === 96 || e === 123 || e === 124 || e === 125 || e === 126 || e === 161 || e >= 162 && e <= 165 || e === 166 || e === 167 || e === 169 || e === 171 || e === 172 || e === 174 || e === 176 || e === 177 || e === 182 || e === 187 || e === 191 || e === 215 || e === 247 || e >= 8208 && e <= 8213 || e >= 8214 && e <= 8215 || e === 8216 || e === 8217 || e === 8218 || e >= 8219 && e <= 8220 || e === 8221 || e === 8222 || e === 8223 || e >= 8224 && e <= 8231 || e >= 8240 && e <= 8248 || e === 8249 || e === 8250 || e >= 8251 && e <= 8254 || e >= 8257 && e <= 8259 || e === 8260 || e === 8261 || e === 8262 || e >= 8263 && e <= 8273 || e === 8274 || e === 8275 || e >= 8277 && e <= 8286 || e >= 8592 && e <= 8596 || e >= 8597 && e <= 8601 || e >= 8602 && e <= 8603 || e >= 8604 && e <= 8607 || e === 8608 || e >= 8609 && e <= 8610 || e === 8611 || e >= 8612 && e <= 8613 || e === 8614 || e >= 8615 && e <= 8621 || e === 8622 || e >= 8623 && e <= 8653 || e >= 8654 && e <= 8655 || e >= 8656 && e <= 8657 || e === 8658 || e === 8659 || e === 8660 || e >= 8661 && e <= 8691 || e >= 8692 && e <= 8959 || e >= 8960 && e <= 8967 || e === 8968 || e === 8969 || e === 8970 || e === 8971 || e >= 8972 && e <= 8991 || e >= 8992 && e <= 8993 || e >= 8994 && e <= 9e3 || e === 9001 || e === 9002 || e >= 9003 && e <= 9083 || e === 9084 || e >= 9085 && e <= 9114 || e >= 9115 && e <= 9139 || e >= 9140 && e <= 9179 || e >= 9180 && e <= 9185 || e >= 9186 && e <= 9254 || e >= 9255 && e <= 9279 || e >= 9280 && e <= 9290 || e >= 9291 && e <= 9311 || e >= 9472 && e <= 9654 || e === 9655 || e >= 9656 && e <= 9664 || e === 9665 || e >= 9666 && e <= 9719 || e >= 9720 && e <= 9727 || e >= 9728 && e <= 9838 || e === 9839 || e >= 9840 && e <= 10087 || e === 10088 || e === 10089 || e === 10090 || e === 10091 || e === 10092 || e === 10093 || e === 10094 || e === 10095 || e === 10096 || e === 10097 || e === 10098 || e === 10099 || e === 10100 || e === 10101 || e >= 10132 && e <= 10175 || e >= 10176 && e <= 10180 || e === 10181 || e === 10182 || e >= 10183 && e <= 10213 || e === 10214 || e === 10215 || e === 10216 || e === 10217 || e === 10218 || e === 10219 || e === 10220 || e === 10221 || e === 10222 || e === 10223 || e >= 10224 && e <= 10239 || e >= 10240 && e <= 10495 || e >= 10496 && e <= 10626 || e === 10627 || e === 10628 || e === 10629 || e === 10630 || e === 10631 || e === 10632 || e === 10633 || e === 10634 || e === 10635 || e === 10636 || e === 10637 || e === 10638 || e === 10639 || e === 10640 || e === 10641 || e === 10642 || e === 10643 || e === 10644 || e === 10645 || e === 10646 || e === 10647 || e === 10648 || e >= 10649 && e <= 10711 || e === 10712 || e === 10713 || e === 10714 || e === 10715 || e >= 10716 && e <= 10747 || e === 10748 || e === 10749 || e >= 10750 && e <= 11007 || e >= 11008 && e <= 11055 || e >= 11056 && e <= 11076 || e >= 11077 && e <= 11078 || e >= 11079 && e <= 11084 || e >= 11085 && e <= 11123 || e >= 11124 && e <= 11125 || e >= 11126 && e <= 11157 || e === 11158 || e >= 11159 && e <= 11263 || e >= 11776 && e <= 11777 || e === 11778 || e === 11779 || e === 11780 || e === 11781 || e >= 11782 && e <= 11784 || e === 11785 || e === 11786 || e === 11787 || e === 11788 || e === 11789 || e >= 11790 && e <= 11798 || e === 11799 || e >= 11800 && e <= 11801 || e === 11802 || e === 11803 || e === 11804 || e === 11805 || e >= 11806 && e <= 11807 || e === 11808 || e === 11809 || e === 11810 || e === 11811 || e === 11812 || e === 11813 || e === 11814 || e === 11815 || e === 11816 || e === 11817 || e >= 11818 && e <= 11822 || e === 11823 || e >= 11824 && e <= 11833 || e >= 11834 && e <= 11835 || e >= 11836 && e <= 11839 || e === 11840 || e === 11841 || e === 11842 || e >= 11843 && e <= 11855 || e >= 11856 && e <= 11857 || e === 11858 || e >= 11859 && e <= 11903 || e >= 12289 && e <= 12291 || e === 12296 || e === 12297 || e === 12298 || e === 12299 || e === 12300 || e === 12301 || e === 12302 || e === 12303 || e === 12304 || e === 12305 || e >= 12306 && e <= 12307 || e === 12308 || e === 12309 || e === 12310 || e === 12311 || e === 12312 || e === 12313 || e === 12314 || e === 12315 || e === 12316 || e === 12317 || e >= 12318 && e <= 12319 || e === 12320 || e === 12336 || e === 64830 || e === 64831 || e >= 65093 && e <= 65094;
+}
+function tn(e) {
+  e.forEach(function(t) {
+    if (delete t.location, Si(t) || Hi(t))
+      for (var n in t.options)
+        delete t.options[n].location, tn(t.options[n].value);
+    else
+      Ei(t) && Bi(t.style) || (wi(t) || xi(t)) && Qt(t.style) ? delete t.style.location : Ai(t) && tn(t.children);
+  });
+}
+function Zo(e, t) {
+  t === void 0 && (t = {}), t = A({ shouldParseSkeletons: !0, requiresOtherClause: !0 }, t);
+  var n = new Vo(e, t).parse();
+  if (n.err) {
+    var i = SyntaxError(S[n.err.kind]);
+    throw i.location = n.err.location, i.originalMessage = n.err.message, i;
+  }
+  return t != null && t.captureLocation || tn(n.val), n.val;
+}
+function Dt(e, t) {
+  var n = t && t.cache ? t.cache : ta, i = t && t.serializer ? t.serializer : ea, r = t && t.strategy ? t.strategy : Jo;
+  return r(e, {
+    cache: n,
+    serializer: i
+  });
+}
+function Qo(e) {
+  return e == null || typeof e == "number" || typeof e == "boolean";
+}
+function Li(e, t, n, i) {
+  var r = Qo(i) ? i : n(i), s = t.get(r);
+  return typeof s > "u" && (s = e.call(this, i), t.set(r, s)), s;
+}
+function Ri(e, t, n) {
+  var i = Array.prototype.slice.call(arguments, 3), r = n(i), s = t.get(r);
+  return typeof s > "u" && (s = e.apply(this, i), t.set(r, s)), s;
+}
+function hn(e, t, n, i, r) {
+  return n.bind(t, e, i, r);
+}
+function Jo(e, t) {
+  var n = e.length === 1 ? Li : Ri;
+  return hn(e, this, n, t.cache.create(), t.serializer);
+}
+function Ko(e, t) {
+  return hn(e, this, Ri, t.cache.create(), t.serializer);
+}
+function $o(e, t) {
+  return hn(e, this, Li, t.cache.create(), t.serializer);
+}
+var ea = function() {
+  return JSON.stringify(arguments);
+};
+function cn() {
+  this.cache = /* @__PURE__ */ Object.create(null);
+}
+cn.prototype.get = function(e) {
+  return this.cache[e];
+};
+cn.prototype.set = function(e, t) {
+  this.cache[e] = t;
+};
+var ta = {
+  create: function() {
+    return new cn();
+  }
+}, Ut = {
+  variadic: Ko,
+  monadic: $o
+}, He;
+(function(e) {
+  e.MISSING_VALUE = "MISSING_VALUE", e.INVALID_VALUE = "INVALID_VALUE", e.MISSING_INTL_API = "MISSING_INTL_API";
+})(He || (He = {}));
+var Et = (
+  /** @class */
+  function(e) {
+    yt(t, e);
+    function t(n, i, r) {
+      var s = e.call(this, n) || this;
+      return s.code = i, s.originalMessage = r, s;
+    }
+    return t.prototype.toString = function() {
+      return "[formatjs Error: ".concat(this.code, "] ").concat(this.message);
+    }, t;
+  }(Error)
+), Xn = (
+  /** @class */
+  function(e) {
+    yt(t, e);
+    function t(n, i, r, s) {
+      return e.call(this, 'Invalid values for "'.concat(n, '": "').concat(i, '". Options are "').concat(Object.keys(r).join('", "'), '"'), He.INVALID_VALUE, s) || this;
+    }
+    return t;
+  }(Et)
+), na = (
+  /** @class */
+  function(e) {
+    yt(t, e);
+    function t(n, i, r) {
+      return e.call(this, 'Value for "'.concat(n, '" must be of type ').concat(i), He.INVALID_VALUE, r) || this;
+    }
+    return t;
+  }(Et)
+), ia = (
+  /** @class */
+  function(e) {
+    yt(t, e);
+    function t(n, i) {
+      return e.call(this, 'The intl string context variable "'.concat(n, '" was not provided to the string "').concat(i, '"'), He.MISSING_VALUE, i) || this;
+    }
+    return t;
+  }(Et)
+), U;
+(function(e) {
+  e[e.literal = 0] = "literal", e[e.object = 1] = "object";
+})(U || (U = {}));
+function ra(e) {
+  return e.length < 2 ? e : e.reduce(function(t, n) {
+    var i = t[t.length - 1];
+    return !i || i.type !== U.literal || n.type !== U.literal ? t.push(n) : i.value += n.value, t;
+  }, []);
+}
+function sa(e) {
+  return typeof e == "function";
+}
+function ut(e, t, n, i, r, s, u) {
+  if (e.length === 1 && kn(e[0]))
+    return [
+      {
+        type: U.literal,
+        value: e[0].value
+      }
+    ];
+  for (var o = [], a = 0, f = e; a < f.length; a++) {
+    var l = f[a];
+    if (kn(l)) {
+      o.push({
+        type: U.literal,
+        value: l.value
+      });
+      continue;
+    }
+    if (Eo(l)) {
+      typeof s == "number" && o.push({
+        type: U.literal,
+        value: n.getNumberFormat(t).format(s)
+      });
+      continue;
+    }
+    var h = l.value;
+    if (!(r && h in r))
+      throw new ia(h, u);
+    var c = r[h];
+    if (yo(l)) {
+      (!c || typeof c == "string" || typeof c == "number") && (c = typeof c == "string" || typeof c == "number" ? String(c) : ""), o.push({
+        type: typeof c == "string" ? U.literal : U.object,
+        value: c
+      });
+      continue;
+    }
+    if (wi(l)) {
+      var _ = typeof l.style == "string" ? i.date[l.style] : Qt(l.style) ? l.style.parsedOptions : void 0;
+      o.push({
+        type: U.literal,
+        value: n.getDateTimeFormat(t, _).format(c)
+      });
+      continue;
+    }
+    if (xi(l)) {
+      var _ = typeof l.style == "string" ? i.time[l.style] : Qt(l.style) ? l.style.parsedOptions : i.time.medium;
+      o.push({
+        type: U.literal,
+        value: n.getDateTimeFormat(t, _).format(c)
+      });
+      continue;
+    }
+    if (Ei(l)) {
+      var _ = typeof l.style == "string" ? i.number[l.style] : Bi(l.style) ? l.style.parsedOptions : void 0;
+      _ && _.scale && (c = c * (_.scale || 1)), o.push({
+        type: U.literal,
+        value: n.getNumberFormat(t, _).format(c)
+      });
+      continue;
+    }
+    if (Ai(l)) {
+      var g = l.children, m = l.value, d = r[m];
+      if (!sa(d))
+        throw new na(m, "function", u);
+      var b = ut(g, t, n, i, r, s), y = d(b.map(function(T) {
+        return T.value;
+      }));
+      Array.isArray(y) || (y = [y]), o.push.apply(o, y.map(function(T) {
+        return {
+          type: typeof T == "string" ? U.literal : U.object,
+          value: T
+        };
+      }));
+    }
+    if (Si(l)) {
+      var p = l.options[c] || l.options.other;
+      if (!p)
+        throw new Xn(l.value, c, Object.keys(l.options), u);
+      o.push.apply(o, ut(p.value, t, n, i, r));
+      continue;
+    }
+    if (Hi(l)) {
+      var p = l.options["=".concat(c)];
+      if (!p) {
+        if (!Intl.PluralRules)
+          throw new Et(`Intl.PluralRules is not available in this environment.
+Try polyfilling it using "@formatjs/intl-pluralrules"
+`, He.MISSING_INTL_API, u);
+        var B = n.getPluralRules(t, { type: l.pluralType }).select(c - (l.offset || 0));
+        p = l.options[B] || l.options.other;
+      }
+      if (!p)
+        throw new Xn(l.value, c, Object.keys(l.options), u);
+      o.push.apply(o, ut(p.value, t, n, i, r, c - (l.offset || 0)));
+      continue;
+    }
+  }
+  return ra(o);
+}
+function oa(e, t) {
+  return t ? A(A(A({}, e || {}), t || {}), Object.keys(e).reduce(function(n, i) {
+    return n[i] = A(A({}, e[i]), t[i] || {}), n;
+  }, {})) : e;
+}
+function aa(e, t) {
+  return t ? Object.keys(e).reduce(function(n, i) {
+    return n[i] = oa(e[i], t[i]), n;
+  }, A({}, e)) : e;
+}
+function Gt(e) {
+  return {
+    create: function() {
+      return {
+        get: function(t) {
+          return e[t];
+        },
+        set: function(t, n) {
+          e[t] = n;
+        }
+      };
+    }
+  };
+}
+function la(e) {
+  return e === void 0 && (e = {
+    number: {},
+    dateTime: {},
+    pluralRules: {}
+  }), {
+    getNumberFormat: Dt(function() {
+      for (var t, n = [], i = 0; i < arguments.length; i++)
+        n[i] = arguments[i];
+      return new ((t = Intl.NumberFormat).bind.apply(t, Rt([void 0], n, !1)))();
+    }, {
+      cache: Gt(e.number),
+      strategy: Ut.variadic
+    }),
+    getDateTimeFormat: Dt(function() {
+      for (var t, n = [], i = 0; i < arguments.length; i++)
+        n[i] = arguments[i];
+      return new ((t = Intl.DateTimeFormat).bind.apply(t, Rt([void 0], n, !1)))();
+    }, {
+      cache: Gt(e.dateTime),
+      strategy: Ut.variadic
+    }),
+    getPluralRules: Dt(function() {
+      for (var t, n = [], i = 0; i < arguments.length; i++)
+        n[i] = arguments[i];
+      return new ((t = Intl.PluralRules).bind.apply(t, Rt([void 0], n, !1)))();
+    }, {
+      cache: Gt(e.pluralRules),
+      strategy: Ut.variadic
+    })
+  };
+}
+var ua = (
+  /** @class */
+  function() {
+    function e(t, n, i, r) {
+      var s = this;
+      if (n === void 0 && (n = e.defaultLocale), this.formatterCache = {
+        number: {},
+        dateTime: {},
+        pluralRules: {}
+      }, this.format = function(u) {
+        var o = s.formatToParts(u);
+        if (o.length === 1)
+          return o[0].value;
+        var a = o.reduce(function(f, l) {
+          return !f.length || l.type !== U.literal || typeof f[f.length - 1] != "string" ? f.push(l.value) : f[f.length - 1] += l.value, f;
+        }, []);
+        return a.length <= 1 ? a[0] || "" : a;
+      }, this.formatToParts = function(u) {
+        return ut(s.ast, s.locales, s.formatters, s.formats, u, void 0, s.message);
+      }, this.resolvedOptions = function() {
+        return {
+          locale: s.resolvedLocale.toString()
+        };
+      }, this.getAst = function() {
+        return s.ast;
+      }, this.locales = n, this.resolvedLocale = e.resolveLocale(n), typeof t == "string") {
+        if (this.message = t, !e.__parse)
+          throw new TypeError("IntlMessageFormat.__parse must be set to process `message` of type `string`");
+        this.ast = e.__parse(t, {
+          ignoreTag: r == null ? void 0 : r.ignoreTag,
+          locale: this.resolvedLocale
+        });
+      } else
+        this.ast = t;
+      if (!Array.isArray(this.ast))
+        throw new TypeError("A message must be provided as a String or AST.");
+      this.formats = aa(e.formats, i), this.formatters = r && r.formatters || la(this.formatterCache);
+    }
+    return Object.defineProperty(e, "defaultLocale", {
+      get: function() {
+        return e.memoizedDefaultLocale || (e.memoizedDefaultLocale = new Intl.NumberFormat().resolvedOptions().locale), e.memoizedDefaultLocale;
+      },
+      enumerable: !1,
+      configurable: !0
+    }), e.memoizedDefaultLocale = null, e.resolveLocale = function(t) {
+      var n = Intl.NumberFormat.supportedLocalesOf(t);
+      return n.length > 0 ? new Intl.Locale(n[0]) : new Intl.Locale(typeof t == "string" ? t : t[0]);
+    }, e.__parse = Zo, e.formats = {
+      number: {
+        integer: {
+          maximumFractionDigits: 0
+        },
+        currency: {
+          style: "currency"
+        },
+        percent: {
+          style: "percent"
+        }
+      },
+      date: {
+        short: {
+          month: "numeric",
+          day: "numeric",
+          year: "2-digit"
+        },
+        medium: {
+          month: "short",
+          day: "numeric",
+          year: "numeric"
+        },
+        long: {
+          month: "long",
+          day: "numeric",
+          year: "numeric"
+        },
+        full: {
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          year: "numeric"
+        }
+      },
+      time: {
+        short: {
+          hour: "numeric",
+          minute: "numeric"
+        },
+        medium: {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric"
+        },
+        long: {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+          timeZoneName: "short"
+        },
+        full: {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+          timeZoneName: "short"
+        }
+      }
+    }, e;
+  }()
+);
+function fa(e, t) {
+  if (t == null)
+    return;
+  if (t in e)
+    return e[t];
+  const n = t.split(".");
+  let i = e;
+  for (let r = 0; r < n.length; r++)
+    if (typeof i == "object") {
+      if (r > 0) {
+        const s = n.slice(r, n.length).join(".");
+        if (s in i) {
+          i = i[s];
+          break;
+        }
+      }
+      i = i[n[r]];
+    } else
+      i = void 0;
+  return i;
+}
+const se = {}, ha = (e, t, n) => n && (t in se || (se[t] = {}), e in se[t] || (se[t][e] = n), n), ki = (e, t) => {
+  if (t == null)
+    return;
+  if (t in se && e in se[t])
+    return se[t][e];
+  const n = wt(t);
+  for (let i = 0; i < n.length; i++) {
+    const r = n[i], s = ma(r, e);
+    if (s)
+      return ha(e, t, s);
+  }
+};
+let mn;
+const We = pt({});
+function ca(e) {
+  return mn[e] || null;
+}
+function Di(e) {
+  return e in mn;
+}
+function ma(e, t) {
+  if (!Di(e))
+    return null;
+  const n = ca(e);
+  return fa(n, t);
+}
+function _a(e) {
+  if (e == null)
+    return;
+  const t = wt(e);
+  for (let n = 0; n < t.length; n++) {
+    const i = t[n];
+    if (Di(i))
+      return i;
+  }
+}
+function da(e, ...t) {
+  delete se[e], We.update((n) => (n[e] = vo.all([n[e] || {}, ...t]), n));
+}
+Be(
+  [We],
+  ([e]) => Object.keys(e)
+);
+We.subscribe((e) => mn = e);
+const ft = {};
+function ba(e, t) {
+  ft[e].delete(t), ft[e].size === 0 && delete ft[e];
+}
+function Ui(e) {
+  return ft[e];
+}
+function ga(e) {
+  return wt(e).map((t) => {
+    const n = Ui(t);
+    return [t, n ? [...n] : []];
+  }).filter(([, t]) => t.length > 0);
+}
+function nn(e) {
+  return e == null ? !1 : wt(e).some(
+    (t) => {
+      var n;
+      return (n = Ui(t)) == null ? void 0 : n.size;
+    }
+  );
+}
+function pa(e, t) {
+  return Promise.all(
+    t.map((i) => (ba(e, i), i().then((r) => r.default || r)))
+  ).then((i) => da(e, ...i));
+}
+const Ne = {};
+function Gi(e) {
+  if (!nn(e))
+    return e in Ne ? Ne[e] : Promise.resolve();
+  const t = ga(e);
+  return Ne[e] = Promise.all(
+    t.map(
+      ([n, i]) => pa(n, i)
+    )
+  ).then(() => {
+    if (nn(e))
+      return Gi(e);
+    delete Ne[e];
+  }), Ne[e];
+}
+const va = {
+  number: {
+    scientific: { notation: "scientific" },
+    engineering: { notation: "engineering" },
+    compactLong: { notation: "compact", compactDisplay: "long" },
+    compactShort: { notation: "compact", compactDisplay: "short" }
+  },
+  date: {
+    short: { month: "numeric", day: "numeric", year: "2-digit" },
+    medium: { month: "short", day: "numeric", year: "numeric" },
+    long: { month: "long", day: "numeric", year: "numeric" },
+    full: { weekday: "long", month: "long", day: "numeric", year: "numeric" }
+  },
+  time: {
+    short: { hour: "numeric", minute: "numeric" },
+    medium: { hour: "numeric", minute: "numeric", second: "numeric" },
+    long: {
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short"
+    },
+    full: {
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short"
+    }
+  }
+}, ya = {
+  fallbackLocale: null,
+  loadingDelay: 200,
+  formats: va,
+  warnOnMissingMessages: !0,
+  handleMissingMessage: void 0,
+  ignoreTag: !0
+}, Ea = ya;
+function Ae() {
+  return Ea;
+}
+const Ft = pt(!1);
+var wa = Object.defineProperty, xa = Object.defineProperties, Sa = Object.getOwnPropertyDescriptors, Vn = Object.getOwnPropertySymbols, Ha = Object.prototype.hasOwnProperty, Aa = Object.prototype.propertyIsEnumerable, qn = (e, t, n) => t in e ? wa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, Ba = (e, t) => {
+  for (var n in t || (t = {}))
+    Ha.call(t, n) && qn(e, n, t[n]);
+  if (Vn)
+    for (var n of Vn(t))
+      Aa.call(t, n) && qn(e, n, t[n]);
+  return e;
+}, Ta = (e, t) => xa(e, Sa(t));
+let rn;
+const dt = pt(null);
+function Wn(e) {
+  return e.split("-").map((t, n, i) => i.slice(0, n + 1).join("-")).reverse();
+}
+function wt(e, t = Ae().fallbackLocale) {
+  const n = Wn(e);
+  return t ? [.../* @__PURE__ */ new Set([...n, ...Wn(t)])] : n;
+}
+function ue() {
+  return rn ?? void 0;
+}
+dt.subscribe((e) => {
+  rn = e ?? void 0, typeof window < "u" && e != null && document.documentElement.setAttribute("lang", e);
+});
+const Ca = (e) => {
+  if (e && _a(e) && nn(e)) {
+    const { loadingDelay: t } = Ae();
+    let n;
+    return typeof window < "u" && ue() != null && t ? n = window.setTimeout(
+      () => Ft.set(!0),
+      t
+    ) : Ft.set(!0), Gi(e).then(() => {
+      dt.set(e);
+    }).finally(() => {
+      clearTimeout(n), Ft.set(!1);
+    });
+  }
+  return dt.set(e);
+}, Ye = Ta(Ba({}, dt), {
+  set: Ca
+}), xt = (e) => {
+  const t = /* @__PURE__ */ Object.create(null);
+  return (i) => {
+    const r = JSON.stringify(i);
+    return r in t ? t[r] : t[r] = e(i);
+  };
+};
+var Pa = Object.defineProperty, bt = Object.getOwnPropertySymbols, Fi = Object.prototype.hasOwnProperty, zi = Object.prototype.propertyIsEnumerable, Yn = (e, t, n) => t in e ? Pa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, _n = (e, t) => {
+  for (var n in t || (t = {}))
+    Fi.call(t, n) && Yn(e, n, t[n]);
+  if (bt)
+    for (var n of bt(t))
+      zi.call(t, n) && Yn(e, n, t[n]);
+  return e;
+}, Te = (e, t) => {
+  var n = {};
+  for (var i in e)
+    Fi.call(e, i) && t.indexOf(i) < 0 && (n[i] = e[i]);
+  if (e != null && bt)
+    for (var i of bt(e))
+      t.indexOf(i) < 0 && zi.call(e, i) && (n[i] = e[i]);
+  return n;
+};
+const je = (e, t) => {
+  const { formats: n } = Ae();
+  if (e in n && t in n[e])
+    return n[e][t];
+  throw new Error(`[svelte-i18n] Unknown "${t}" ${e} format.`);
+}, Ia = xt(
+  (e) => {
+    var t = e, { locale: n, format: i } = t, r = Te(t, ["locale", "format"]);
+    if (n == null)
+      throw new Error('[svelte-i18n] A "locale" must be set to format numbers');
+    return i && (r = je("number", i)), new Intl.NumberFormat(n, r);
+  }
+), Na = xt(
+  (e) => {
+    var t = e, { locale: n, format: i } = t, r = Te(t, ["locale", "format"]);
+    if (n == null)
+      throw new Error('[svelte-i18n] A "locale" must be set to format dates');
+    return i ? r = je("date", i) : Object.keys(r).length === 0 && (r = je("date", "short")), new Intl.DateTimeFormat(n, r);
+  }
+), Oa = xt(
+  (e) => {
+    var t = e, { locale: n, format: i } = t, r = Te(t, ["locale", "format"]);
+    if (n == null)
+      throw new Error(
+        '[svelte-i18n] A "locale" must be set to format time values'
+      );
+    return i ? r = je("time", i) : Object.keys(r).length === 0 && (r = je("time", "short")), new Intl.DateTimeFormat(n, r);
+  }
+), Ma = (e = {}) => {
+  var t = e, {
+    locale: n = ue()
+  } = t, i = Te(t, [
+    "locale"
+  ]);
+  return Ia(_n({ locale: n }, i));
+}, La = (e = {}) => {
+  var t = e, {
+    locale: n = ue()
+  } = t, i = Te(t, [
+    "locale"
+  ]);
+  return Na(_n({ locale: n }, i));
+}, Ra = (e = {}) => {
+  var t = e, {
+    locale: n = ue()
+  } = t, i = Te(t, [
+    "locale"
+  ]);
+  return Oa(_n({ locale: n }, i));
+}, ka = xt(
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  (e, t = ue()) => new ua(e, t, Ae().formats, {
+    ignoreTag: Ae().ignoreTag
+  })
+), Da = (e, t = {}) => {
+  var n, i, r, s;
+  let u = t;
+  typeof e == "object" && (u = e, e = u.id);
+  const {
+    values: o,
+    locale: a = ue(),
+    default: f
+  } = u;
+  if (a == null)
+    throw new Error(
+      "[svelte-i18n] Cannot format a message without first setting the initial locale."
+    );
+  let l = ki(e, a);
+  if (!l)
+    l = (s = (r = (i = (n = Ae()).handleMissingMessage) == null ? void 0 : i.call(n, { locale: a, id: e, defaultValue: f })) != null ? r : f) != null ? s : e;
+  else if (typeof l != "string")
+    return console.warn(
+      `[svelte-i18n] Message with id "${e}" must be of type "string", found: "${typeof l}". Gettin its value through the "$format" method is deprecated; use the "json" method instead.`
+    ), l;
+  if (!o)
+    return l;
+  let h = l;
+  try {
+    h = ka(l, a).format(o);
+  } catch (c) {
+    c instanceof Error && console.warn(
+      `[svelte-i18n] Message "${e}" has syntax error:`,
+      c.message
+    );
+  }
+  return h;
+}, Ua = (e, t) => Ra(t).format(e), Ga = (e, t) => La(t).format(e), Fa = (e, t) => Ma(t).format(e), za = (e, t = ue()) => ki(e, t);
+Be([Ye, We], () => Da);
+Be([Ye], () => Ua);
+Be([Ye], () => Ga);
+Be([Ye], () => Fa);
+Be([Ye, We], () => za);
+const {
+  SvelteComponent: ja,
+  add_render_callback: ji,
+  append: Je,
+  attr: j,
+  binding_callbacks: Zn,
+  check_outros: Xa,
+  create_bidirectional_transition: Qn,
+  destroy_each: Va,
+  detach: Re,
+  element: gt,
+  empty: qa,
+  ensure_array_like: Jn,
+  group_outros: Wa,
+  init: Ya,
+  insert: ke,
+  listen: sn,
+  prevent_default: Za,
+  run_all: Qa,
+  safe_not_equal: Ja,
+  set_data: Ka,
+  set_style: me,
+  space: on,
+  text: $a,
+  toggle_class: Q,
+  transition_in: zt,
+  transition_out: Kn
+} = window.__gradio__svelte__internal, { createEventDispatcher: el } = window.__gradio__svelte__internal;
+function $n(e, t, n) {
+  const i = e.slice();
+  return i[24] = t[n], i;
+}
+function ei(e) {
+  let t, n, i, r, s, u = Jn(
+    /*filtered_indices*/
+    e[1]
+  ), o = [];
+  for (let a = 0; a < u.length; a += 1)
+    o[a] = ti($n(e, u, a));
+  return {
+    c() {
+      t = gt("ul");
+      for (let a = 0; a < o.length; a += 1)
+        o[a].c();
+      j(t, "class", "options svelte-yuohum"), j(t, "role", "listbox"), me(
+        t,
+        "bottom",
+        /*bottom*/
+        e[9]
+      ), me(t, "max-height", `calc(${/*max_height*/
+      e[10]}px - var(--window-padding))`), me(
+        t,
+        "width",
+        /*input_width*/
+        e[8] + "px"
+      );
+    },
+    m(a, f) {
+      ke(a, t, f);
+      for (let l = 0; l < o.length; l += 1)
+        o[l] && o[l].m(t, null);
+      e[20](t), i = !0, r || (s = sn(t, "mousedown", Za(
+        /*mousedown_handler*/
+        e[19]
+      )), r = !0);
+    },
+    p(a, f) {
+      if (f & /*filtered_indices, choices, selected_indices, active_index*/
+      51) {
+        u = Jn(
+          /*filtered_indices*/
+          a[1]
+        );
+        let l;
+        for (l = 0; l < u.length; l += 1) {
+          const h = $n(a, u, l);
+          o[l] ? o[l].p(h, f) : (o[l] = ti(h), o[l].c(), o[l].m(t, null));
+        }
+        for (; l < o.length; l += 1)
+          o[l].d(1);
+        o.length = u.length;
+      }
+      f & /*bottom*/
+      512 && me(
+        t,
+        "bottom",
+        /*bottom*/
+        a[9]
+      ), f & /*max_height*/
+      1024 && me(t, "max-height", `calc(${/*max_height*/
+      a[10]}px - var(--window-padding))`), f & /*input_width*/
+      256 && me(
+        t,
+        "width",
+        /*input_width*/
+        a[8] + "px"
+      );
+    },
+    i(a) {
+      i || (a && ji(() => {
+        i && (n || (n = Qn(t, Nn, { duration: 200, y: 5 }, !0)), n.run(1));
+      }), i = !0);
+    },
+    o(a) {
+      a && (n || (n = Qn(t, Nn, { duration: 200, y: 5 }, !1)), n.run(0)), i = !1;
+    },
+    d(a) {
+      a && Re(t), Va(o, a), e[20](null), a && n && n.end(), r = !1, s();
+    }
+  };
+}
+function ti(e) {
+  let t, n, i, r = (
+    /*choices*/
+    e[0][
+      /*index*/
+      e[24]
+    ][0] + ""
+  ), s, u, o, a, f;
+  return {
+    c() {
+      t = gt("li"), n = gt("span"), n.textContent = "✓", i = on(), s = $a(r), u = on(), j(n, "class", "inner-item svelte-yuohum"), Q(n, "hide", !/*selected_indices*/
+      e[4].includes(
+        /*index*/
+        e[24]
+      )), j(t, "class", "item svelte-yuohum"), j(t, "data-index", o = /*index*/
+      e[24]), j(t, "aria-label", a = /*choices*/
+      e[0][
+        /*index*/
+        e[24]
+      ][0]), j(t, "data-testid", "dropdown-option"), j(t, "role", "option"), j(t, "aria-selected", f = /*selected_indices*/
+      e[4].includes(
+        /*index*/
+        e[24]
+      )), Q(
+        t,
+        "selected",
+        /*selected_indices*/
+        e[4].includes(
+          /*index*/
+          e[24]
+        )
+      ), Q(
+        t,
+        "active",
+        /*index*/
+        e[24] === /*active_index*/
+        e[5]
+      ), Q(
+        t,
+        "bg-gray-100",
+        /*index*/
+        e[24] === /*active_index*/
+        e[5]
+      ), Q(
+        t,
+        "dark:bg-gray-600",
+        /*index*/
+        e[24] === /*active_index*/
+        e[5]
+      );
+    },
+    m(l, h) {
+      ke(l, t, h), Je(t, n), Je(t, i), Je(t, s), Je(t, u);
+    },
+    p(l, h) {
+      h & /*selected_indices, filtered_indices*/
+      18 && Q(n, "hide", !/*selected_indices*/
+      l[4].includes(
+        /*index*/
+        l[24]
+      )), h & /*choices, filtered_indices*/
+      3 && r !== (r = /*choices*/
+      l[0][
+        /*index*/
+        l[24]
+      ][0] + "") && Ka(s, r), h & /*filtered_indices*/
+      2 && o !== (o = /*index*/
+      l[24]) && j(t, "data-index", o), h & /*choices, filtered_indices*/
+      3 && a !== (a = /*choices*/
+      l[0][
+        /*index*/
+        l[24]
+      ][0]) && j(t, "aria-label", a), h & /*selected_indices, filtered_indices*/
+      18 && f !== (f = /*selected_indices*/
+      l[4].includes(
+        /*index*/
+        l[24]
+      )) && j(t, "aria-selected", f), h & /*selected_indices, filtered_indices*/
+      18 && Q(
+        t,
+        "selected",
+        /*selected_indices*/
+        l[4].includes(
+          /*index*/
+          l[24]
+        )
+      ), h & /*filtered_indices, active_index*/
+      34 && Q(
+        t,
+        "active",
+        /*index*/
+        l[24] === /*active_index*/
+        l[5]
+      ), h & /*filtered_indices, active_index*/
+      34 && Q(
+        t,
+        "bg-gray-100",
+        /*index*/
+        l[24] === /*active_index*/
+        l[5]
+      ), h & /*filtered_indices, active_index*/
+      34 && Q(
+        t,
+        "dark:bg-gray-600",
+        /*index*/
+        l[24] === /*active_index*/
+        l[5]
+      );
+    },
+    d(l) {
+      l && Re(t);
+    }
+  };
+}
+function tl(e) {
+  let t, n, i, r, s;
+  ji(
+    /*onwindowresize*/
+    e[17]
+  );
+  let u = (
+    /*show_options*/
+    e[2] && !/*disabled*/
+    e[3] && ei(e)
+  );
+  return {
+    c() {
+      t = gt("div"), n = on(), u && u.c(), i = qa(), j(t, "class", "reference");
+    },
+    m(o, a) {
+      ke(o, t, a), e[18](t), ke(o, n, a), u && u.m(o, a), ke(o, i, a), r || (s = [
+        sn(
+          window,
+          "scroll",
+          /*scroll_listener*/
+          e[12]
+        ),
+        sn(
+          window,
+          "resize",
+          /*onwindowresize*/
+          e[17]
+        )
+      ], r = !0);
+    },
+    p(o, [a]) {
+      /*show_options*/
+      o[2] && !/*disabled*/
+      o[3] ? u ? (u.p(o, a), a & /*show_options, disabled*/
+      12 && zt(u, 1)) : (u = ei(o), u.c(), zt(u, 1), u.m(i.parentNode, i)) : u && (Wa(), Kn(u, 1, 1, () => {
+        u = null;
+      }), Xa());
+    },
+    i(o) {
+      zt(u);
+    },
+    o(o) {
+      Kn(u);
+    },
+    d(o) {
+      o && (Re(t), Re(n), Re(i)), e[18](null), u && u.d(o), r = !1, Qa(s);
+    }
+  };
+}
+function Ke(e) {
+  let t, n = e[0], i = 1;
+  for (; i < e.length; ) {
+    const r = e[i], s = e[i + 1];
+    if (i += 2, (r === "optionalAccess" || r === "optionalCall") && n == null)
+      return;
+    r === "access" || r === "optionalAccess" ? (t = n, n = s(n)) : (r === "call" || r === "optionalCall") && (n = s((...u) => n.call(t, ...u)), t = void 0);
+  }
+  return n;
+}
+function nl(e, t, n) {
+  let { choices: i } = t, { filtered_indices: r } = t, { show_options: s = !1 } = t, { disabled: u = !1 } = t, { selected_indices: o = [] } = t, { active_index: a = null } = t, f, l, h, c, _, g, m, d, b;
+  function y() {
+    const { top: x, bottom: L } = _.getBoundingClientRect();
+    n(14, f = x), n(15, l = b - L);
+  }
+  let p = null;
+  function B() {
+    s && (p !== null && clearTimeout(p), p = setTimeout(
+      () => {
+        y(), p = null;
+      },
+      10
+    ));
+  }
+  const T = el();
+  function O() {
+    n(11, b = window.innerHeight);
+  }
+  function C(x) {
+    Zn[x ? "unshift" : "push"](() => {
+      _ = x, n(6, _);
+    });
+  }
+  const w = (x) => T("change", x);
+  function k(x) {
+    Zn[x ? "unshift" : "push"](() => {
+      g = x, n(7, g);
+    });
+  }
+  return e.$$set = (x) => {
+    "choices" in x && n(0, i = x.choices), "filtered_indices" in x && n(1, r = x.filtered_indices), "show_options" in x && n(2, s = x.show_options), "disabled" in x && n(3, u = x.disabled), "selected_indices" in x && n(4, o = x.selected_indices), "active_index" in x && n(5, a = x.active_index);
+  }, e.$$.update = () => {
+    if (e.$$.dirty & /*show_options, refElement, listElement, selected_indices, distance_from_bottom, distance_from_top, input_height*/
+    114900) {
+      if (s && _) {
+        if (g && o.length > 0) {
+          let L = g.querySelectorAll("li");
+          for (const W of Array.from(L))
+            if (W.getAttribute("data-index") === o[0].toString()) {
+              Ke([
+                g,
+                "optionalAccess",
+                (ee) => ee.scrollTo,
+                "optionalCall",
+                (ee) => ee(0, W.offsetTop)
+              ]);
+              break;
+            }
+        }
+        y();
+        const x = Ke([
+          _,
+          "access",
+          (L) => L.parentElement,
+          "optionalAccess",
+          (L) => L.getBoundingClientRect,
+          "call",
+          (L) => L()
+        ]);
+        n(16, h = Ke([x, "optionalAccess", (L) => L.height]) || 0), n(8, c = Ke([x, "optionalAccess", (L) => L.width]) || 0);
+      }
+      l > f ? (n(10, d = l), n(9, m = null)) : (n(9, m = `${l + h}px`), n(10, d = f - h));
+    }
+  }, [
+    i,
+    r,
+    s,
+    u,
+    o,
+    a,
+    _,
+    g,
+    c,
+    m,
+    d,
+    b,
+    B,
+    T,
+    f,
+    l,
+    h,
+    O,
+    C,
+    w,
+    k
+  ];
+}
+class il extends ja {
+  constructor(t) {
+    super(), Ya(this, t, nl, tl, Ja, {
+      choices: 0,
+      filtered_indices: 1,
+      show_options: 2,
+      disabled: 3,
+      selected_indices: 4,
+      active_index: 5
+    });
+  }
+}
+function rl(e, t) {
+  return (e % t + t) % t;
+}
+function ni(e, t) {
+  return e.reduce((n, i, r) => ((!t || i[0].toLowerCase().includes(t.toLowerCase())) && n.push(r), n), []);
+}
+function sl(e, t, n) {
+  e("change", t), n || e("input");
+}
+function ol(e, t, n) {
+  if (e.key === "Escape")
+    return [!1, t];
+  if ((e.key === "ArrowDown" || e.key === "ArrowUp") && n.length >= 0)
+    if (t === null)
+      t = e.key === "ArrowDown" ? n[0] : n[n.length - 1];
+    else {
+      const i = n.indexOf(t), r = e.key === "ArrowUp" ? -1 : 1;
+      t = n[rl(i + r, n.length)];
+    }
+  return [!0, t];
+}
+const {
+  SvelteComponent: al,
+  append: oe,
+  attr: z,
+  binding_callbacks: ll,
+  check_outros: ul,
+  create_component: an,
+  destroy_component: ln,
+  detach: dn,
+  element: de,
+  group_outros: fl,
+  init: hl,
+  insert: bn,
+  listen: Oe,
+  mount_component: un,
+  run_all: cl,
+  safe_not_equal: ml,
+  set_data: _l,
+  set_input_value: ii,
+  space: jt,
+  text: dl,
+  toggle_class: _e,
+  transition_in: be,
+  transition_out: Le
+} = window.__gradio__svelte__internal, { onMount: bl } = window.__gradio__svelte__internal, { createEventDispatcher: gl, afterUpdate: pl } = window.__gradio__svelte__internal;
+function vl(e) {
+  let t;
+  return {
+    c() {
+      t = dl(
+        /*label*/
+        e[0]
+      );
+    },
+    m(n, i) {
+      bn(n, t, i);
+    },
+    p(n, i) {
+      i[0] & /*label*/
+      1 && _l(
+        t,
+        /*label*/
+        n[0]
+      );
+    },
+    d(n) {
+      n && dn(t);
+    }
+  };
+}
+function ri(e) {
+  let t, n, i;
+  return n = new Er({}), {
+    c() {
+      t = de("div"), an(n.$$.fragment), z(t, "class", "icon-wrap svelte-1m1zvyj");
+    },
+    m(r, s) {
+      bn(r, t, s), un(n, t, null), i = !0;
+    },
+    i(r) {
+      i || (be(n.$$.fragment, r), i = !0);
+    },
+    o(r) {
+      Le(n.$$.fragment, r), i = !1;
+    },
+    d(r) {
+      r && dn(t), ln(n);
+    }
+  };
+}
+function yl(e) {
+  let t, n, i, r, s, u, o, a, f, l, h, c, _, g;
+  n = new hi({
+    props: {
+      show_label: (
+        /*show_label*/
+        e[4]
+      ),
+      info: (
+        /*info*/
+        e[1]
+      ),
+      $$slots: { default: [vl] },
+      $$scope: { ctx: e }
+    }
+  });
+  let m = !/*disabled*/
+  e[3] && ri();
+  return h = new il({
+    props: {
+      show_options: (
+        /*show_options*/
+        e[12]
+      ),
+      choices: (
+        /*choices*/
+        e[2]
+      ),
+      filtered_indices: (
+        /*filtered_indices*/
+        e[10]
+      ),
+      disabled: (
+        /*disabled*/
+        e[3]
+      ),
+      selected_indices: (
+        /*selected_index*/
+        e[11] === null ? [] : [
+          /*selected_index*/
+          e[11]
+        ]
+      ),
+      active_index: (
+        /*active_index*/
+        e[14]
+      )
+    }
+  }), h.$on(
+    "change",
+    /*handle_option_selected*/
+    e[16]
+  ), {
+    c() {
+      t = de("div"), an(n.$$.fragment), i = jt(), r = de("div"), s = de("div"), u = de("div"), o = de("input"), f = jt(), m && m.c(), l = jt(), an(h.$$.fragment), z(o, "role", "listbox"), z(o, "aria-controls", "dropdown-options"), z(
+        o,
+        "aria-expanded",
+        /*show_options*/
+        e[12]
+      ), z(
+        o,
+        "aria-label",
+        /*label*/
+        e[0]
+      ), z(o, "class", "border-none svelte-1m1zvyj"), o.disabled = /*disabled*/
+      e[3], z(o, "autocomplete", "off"), o.readOnly = a = !/*filterable*/
+      e[7], _e(o, "subdued", !/*choices_names*/
+      e[13].includes(
+        /*input_text*/
+        e[9]
+      ) && !/*allow_custom_value*/
+      e[6]), z(u, "class", "secondary-wrap svelte-1m1zvyj"), z(s, "class", "wrap-inner svelte-1m1zvyj"), _e(
+        s,
+        "show_options",
+        /*show_options*/
+        e[12]
+      ), z(r, "class", "wrap svelte-1m1zvyj"), z(t, "class", "svelte-1m1zvyj"), _e(
+        t,
+        "container",
+        /*container*/
+        e[5]
+      );
+    },
+    m(d, b) {
+      bn(d, t, b), un(n, t, null), oe(t, i), oe(t, r), oe(r, s), oe(s, u), oe(u, o), ii(
+        o,
+        /*input_text*/
+        e[9]
+      ), e[29](o), oe(u, f), m && m.m(u, null), oe(r, l), un(h, r, null), c = !0, _ || (g = [
+        Oe(
+          o,
+          "input",
+          /*input_input_handler*/
+          e[28]
+        ),
+        Oe(
+          o,
+          "keydown",
+          /*handle_key_down*/
+          e[19]
+        ),
+        Oe(
+          o,
+          "keyup",
+          /*keyup_handler*/
+          e[30]
+        ),
+        Oe(
+          o,
+          "blur",
+          /*handle_blur*/
+          e[18]
+        ),
+        Oe(
+          o,
+          "focus",
+          /*handle_focus*/
+          e[17]
+        )
+      ], _ = !0);
+    },
+    p(d, b) {
+      const y = {};
+      b[0] & /*show_label*/
+      16 && (y.show_label = /*show_label*/
+      d[4]), b[0] & /*info*/
+      2 && (y.info = /*info*/
+      d[1]), b[0] & /*label*/
+      1 | b[1] & /*$$scope*/
+      4 && (y.$$scope = { dirty: b, ctx: d }), n.$set(y), (!c || b[0] & /*show_options*/
+      4096) && z(
+        o,
+        "aria-expanded",
+        /*show_options*/
+        d[12]
+      ), (!c || b[0] & /*label*/
+      1) && z(
+        o,
+        "aria-label",
+        /*label*/
+        d[0]
+      ), (!c || b[0] & /*disabled*/
+      8) && (o.disabled = /*disabled*/
+      d[3]), (!c || b[0] & /*filterable*/
+      128 && a !== (a = !/*filterable*/
+      d[7])) && (o.readOnly = a), b[0] & /*input_text*/
+      512 && o.value !== /*input_text*/
+      d[9] && ii(
+        o,
+        /*input_text*/
+        d[9]
+      ), (!c || b[0] & /*choices_names, input_text, allow_custom_value*/
+      8768) && _e(o, "subdued", !/*choices_names*/
+      d[13].includes(
+        /*input_text*/
+        d[9]
+      ) && !/*allow_custom_value*/
+      d[6]), /*disabled*/
+      d[3] ? m && (fl(), Le(m, 1, 1, () => {
+        m = null;
+      }), ul()) : m ? b[0] & /*disabled*/
+      8 && be(m, 1) : (m = ri(), m.c(), be(m, 1), m.m(u, null)), (!c || b[0] & /*show_options*/
+      4096) && _e(
+        s,
+        "show_options",
+        /*show_options*/
+        d[12]
+      );
+      const p = {};
+      b[0] & /*show_options*/
+      4096 && (p.show_options = /*show_options*/
+      d[12]), b[0] & /*choices*/
+      4 && (p.choices = /*choices*/
+      d[2]), b[0] & /*filtered_indices*/
+      1024 && (p.filtered_indices = /*filtered_indices*/
+      d[10]), b[0] & /*disabled*/
+      8 && (p.disabled = /*disabled*/
+      d[3]), b[0] & /*selected_index*/
+      2048 && (p.selected_indices = /*selected_index*/
+      d[11] === null ? [] : [
+        /*selected_index*/
+        d[11]
+      ]), b[0] & /*active_index*/
+      16384 && (p.active_index = /*active_index*/
+      d[14]), h.$set(p), (!c || b[0] & /*container*/
+      32) && _e(
+        t,
+        "container",
+        /*container*/
+        d[5]
+      );
+    },
+    i(d) {
+      c || (be(n.$$.fragment, d), be(m), be(h.$$.fragment, d), c = !0);
+    },
+    o(d) {
+      Le(n.$$.fragment, d), Le(m), Le(h.$$.fragment, d), c = !1;
+    },
+    d(d) {
+      d && dn(t), ln(n), e[29](null), m && m.d(), ln(h), _ = !1, cl(g);
+    }
+  };
+}
+function El(e, t, n) {
+  let { label: i } = t, { info: r = void 0 } = t, { value: s = [] } = t, u = [], { value_is_output: o = !1 } = t, { choices: a } = t, f, { disabled: l = !1 } = t, { show_label: h } = t, { container: c = !0 } = t, { allow_custom_value: _ = !1 } = t, { filterable: g = !0 } = t, m, d = !1, b, y, p = "", B = "", T = !1, O = [], C = null, w = null, k;
+  const x = gl();
+  s ? (k = a.map((E) => E[1]).indexOf(s), w = k, w === -1 ? (u = s, w = null) : ([p, u] = a[w], B = p), W()) : a.length > 0 && (k = 0, w = 0, [p, s] = a[w], u = s, B = p);
+  function L() {
+    n(13, b = a.map((E) => E[0])), n(24, y = a.map((E) => E[1]));
+  }
+  function W() {
+    L(), s === void 0 || Array.isArray(s) && s.length === 0 ? (n(9, p = ""), n(11, w = null)) : y.includes(s) ? (n(9, p = b[y.indexOf(s)]), n(11, w = y.indexOf(s))) : _ ? (n(9, p = s), n(11, w = null)) : (n(9, p = ""), n(11, w = null)), n(27, k = w);
+  }
+  function ee(E) {
+    if (n(11, w = parseInt(E.detail.target.dataset.index)), isNaN(w)) {
+      n(11, w = null);
+      return;
+    }
+    n(12, d = !1), n(14, C = null), m.blur();
+  }
+  function St(E) {
+    n(10, O = a.map((vn, Bt) => Bt)), n(12, d = !0), x("focus");
+  }
+  function Ce() {
+    _ ? n(20, s = p) : n(9, p = b[y.indexOf(s)]), n(12, d = !1), n(14, C = null), x("blur");
+  }
+  function Ht(E) {
+    n(12, [d, C] = ol(E, C, O), d, (n(14, C), n(2, a), n(23, f), n(6, _), n(9, p), n(10, O), n(8, m), n(25, B), n(11, w), n(27, k), n(26, T), n(24, y))), E.key === "Enter" && (C !== null ? (n(11, w = C), n(12, d = !1), m.blur(), n(14, C = null)) : b.includes(p) ? (n(11, w = b.indexOf(p)), n(12, d = !1), n(14, C = null), m.blur()) : _ && (n(20, s = p), n(11, w = null), n(12, d = !1), n(14, C = null), m.blur()), x("enter", s));
+  }
+  pl(() => {
+    n(21, o = !1), n(26, T = !0);
+  }), bl(() => {
+    m.focus();
+  });
+  function At() {
+    p = this.value, n(9, p), n(11, w), n(27, k), n(26, T), n(2, a), n(24, y);
+  }
+  function Pe(E) {
+    ll[E ? "unshift" : "push"](() => {
+      m = E, n(8, m);
+    });
+  }
+  const Ie = (E) => x("key_up", { key: E.key, input_value: p });
+  return e.$$set = (E) => {
+    "label" in E && n(0, i = E.label), "info" in E && n(1, r = E.info), "value" in E && n(20, s = E.value), "value_is_output" in E && n(21, o = E.value_is_output), "choices" in E && n(2, a = E.choices), "disabled" in E && n(3, l = E.disabled), "show_label" in E && n(4, h = E.show_label), "container" in E && n(5, c = E.container), "allow_custom_value" in E && n(6, _ = E.allow_custom_value), "filterable" in E && n(7, g = E.filterable);
+  }, e.$$.update = () => {
+    e.$$.dirty[0] & /*selected_index, old_selected_index, initialized, choices, choices_values*/
+    218105860 && w !== k && w !== null && T && (n(9, [p, s] = a[w], p, (n(20, s), n(11, w), n(27, k), n(26, T), n(2, a), n(24, y))), n(27, k = w), x("select", {
+      index: w,
+      value: y[w],
+      selected: !0
+    })), e.$$.dirty[0] & /*value, old_value, value_is_output*/
+    7340032 && s != u && (W(), sl(x, s, o), n(22, u = s)), e.$$.dirty[0] & /*choices*/
+    4 && L(), e.$$.dirty[0] & /*choices, old_choices, allow_custom_value, input_text, filtered_indices, filter_input*/
+    8390468 && a !== f && (_ || W(), n(23, f = a), n(10, O = ni(a, p)), !_ && O.length > 0 && n(14, C = O[0]), m == document.activeElement && n(12, d = !0)), e.$$.dirty[0] & /*input_text, old_input_text, choices, allow_custom_value, filtered_indices*/
+    33556036 && p !== B && (n(10, O = ni(a, p)), n(25, B = p), !_ && O.length > 0 && n(14, C = O[0]));
+  }, [
+    i,
+    r,
+    a,
+    l,
+    h,
+    c,
+    _,
+    g,
+    m,
+    p,
+    O,
+    w,
+    d,
+    b,
+    C,
+    x,
+    ee,
+    St,
+    Ce,
+    Ht,
+    s,
+    o,
+    u,
+    f,
+    y,
+    B,
+    T,
+    k,
+    At,
+    Pe,
+    Ie
+  ];
+}
+class wl extends al {
+  constructor(t) {
+    super(), hl(
+      this,
+      t,
+      El,
+      yl,
+      ml,
+      {
+        label: 0,
+        info: 1,
+        value: 20,
+        value_is_output: 21,
+        choices: 2,
+        disabled: 3,
+        show_label: 4,
+        container: 5,
+        allow_custom_value: 6,
+        filterable: 7
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+const {
+  SvelteComponent: xl,
+  append: $,
+  attr: $e,
+  create_component: et,
+  destroy_component: tt,
+  detach: gn,
+  element: ae,
+  init: Sl,
+  insert: pn,
+  mount_component: nt,
+  safe_not_equal: Hl,
+  set_style: it,
+  space: Xt,
+  text: Xi,
+  transition_in: rt,
+  transition_out: st
+} = window.__gradio__svelte__internal, { createEventDispatcher: Al } = window.__gradio__svelte__internal, { onMount: Bl, onDestroy: Tl } = window.__gradio__svelte__internal;
+function Cl(e) {
+  let t;
+  return {
+    c() {
+      t = Xi("Cancel");
+    },
+    m(n, i) {
+      pn(n, t, i);
+    },
+    d(n) {
+      n && gn(t);
+    }
+  };
+}
+function Pl(e) {
+  let t;
+  return {
+    c() {
+      t = Xi("OK");
+    },
+    m(n, i) {
+      pn(n, t, i);
+    },
+    d(n) {
+      n && gn(t);
+    }
+  };
+}
+function Il(e) {
+  let t, n, i, r, s, u, o, a, f, l, h, c, _, g, m;
+  return s = new wl({
+    props: {
+      value: (
+        /*label*/
+        e[0]
+      ),
+      label: "Label",
+      choices: (
+        /*choices*/
+        e[2]
+      ),
+      show_label: !1,
+      allow_custom_value: !0
+    }
+  }), s.$on(
+    "change",
+    /*onDropDownChange*/
+    e[4]
+  ), s.$on(
+    "enter",
+    /*onDropDownEnter*/
+    e[6]
+  ), a = new ks({
+    props: {
+      value: (
+        /*color*/
+        e[1]
+      ),
+      label: "Color",
+      show_label: !1
+    }
+  }), a.$on(
+    "change",
+    /*onColorChange*/
+    e[5]
+  ), h = new Ln({
+    props: {
+      $$slots: { default: [Cl] },
+      $$scope: { ctx: e }
+    }
+  }), h.$on(
+    "click",
+    /*click_handler*/
+    e[8]
+  ), g = new Ln({
+    props: {
+      variant: "primary",
+      $$slots: { default: [Pl] },
+      $$scope: { ctx: e }
+    }
+  }), g.$on(
+    "click",
+    /*click_handler_1*/
+    e[9]
+  ), {
+    c() {
+      t = ae("div"), n = ae("div"), i = ae("span"), r = ae("div"), et(s.$$.fragment), u = Xt(), o = ae("div"), et(a.$$.fragment), f = Xt(), l = ae("div"), et(h.$$.fragment), c = Xt(), _ = ae("div"), et(g.$$.fragment), it(r, "margin-right", "10px"), it(o, "margin-right", "40px"), it(o, "margin-bottom", "8px"), it(l, "margin-right", "8px"), $e(i, "class", "model-content svelte-hkn2q1"), $e(n, "class", "modal-container svelte-hkn2q1"), $e(t, "class", "modal svelte-hkn2q1"), $e(t, "id", "model-box-edit");
+    },
+    m(d, b) {
+      pn(d, t, b), $(t, n), $(n, i), $(i, r), nt(s, r, null), $(i, u), $(i, o), nt(a, o, null), $(i, f), $(i, l), nt(h, l, null), $(i, c), $(i, _), nt(g, _, null), m = !0;
+    },
+    p(d, [b]) {
+      const y = {};
+      b & /*label*/
+      1 && (y.value = /*label*/
+      d[0]), b & /*choices*/
+      4 && (y.choices = /*choices*/
+      d[2]), s.$set(y);
+      const p = {};
+      b & /*color*/
+      2 && (p.value = /*color*/
+      d[1]), a.$set(p);
+      const B = {};
+      b & /*$$scope*/
+      4096 && (B.$$scope = { dirty: b, ctx: d }), h.$set(B);
+      const T = {};
+      b & /*$$scope*/
+      4096 && (T.$$scope = { dirty: b, ctx: d }), g.$set(T);
+    },
+    i(d) {
+      m || (rt(s.$$.fragment, d), rt(a.$$.fragment, d), rt(h.$$.fragment, d), rt(g.$$.fragment, d), m = !0);
+    },
+    o(d) {
+      st(s.$$.fragment, d), st(a.$$.fragment, d), st(h.$$.fragment, d), st(g.$$.fragment, d), m = !1;
+    },
+    d(d) {
+      d && gn(t), tt(s), tt(a), tt(h), tt(g);
+    }
+  };
+}
+function Nl(e, t, n) {
+  let { label: i = "" } = t, { choices: r = [] } = t, { choicesColors: s = [] } = t, { color: u = "" } = t;
+  const o = Al();
+  function a(m) {
+    o("change", { label: i, color: u, ok: m });
+  }
+  function f(m) {
+    const { detail: d } = m;
+    let b = d;
+    Number.isInteger(b) ? (Array.isArray(s) && b < s.length && n(1, u = s[b]), Array.isArray(r) && b < r.length && n(0, i = r[b][0])) : n(0, i = b);
+  }
+  function l(m) {
+    const { detail: d } = m;
+    n(1, u = d);
+  }
+  function h(m) {
+    f(m), a(!0);
+  }
+  function c(m) {
+    switch (m.key) {
+      case "Enter":
+        a(!0);
+        break;
+    }
+  }
+  Bl(() => {
+    document.addEventListener("keydown", c);
+  }), Tl(() => {
+    document.removeEventListener("keydown", c);
+  });
+  const _ = () => a(!1), g = () => a(!0);
+  return e.$$set = (m) => {
+    "label" in m && n(0, i = m.label), "choices" in m && n(2, r = m.choices), "choicesColors" in m && n(7, s = m.choicesColors), "color" in m && n(1, u = m.color);
+  }, [
+    i,
+    u,
+    r,
+    a,
+    f,
+    l,
+    h,
+    s,
+    _,
+    g
+  ];
+}
+class Vi extends xl {
+  constructor(t) {
+    super(), Sl(this, t, Nl, Il, Hl, {
+      label: 0,
+      choices: 2,
+      choicesColors: 7,
+      color: 1
+    });
+  }
+}
+const J = (e, t, n) => Math.min(Math.max(e, t), n);
+function Vt(e, t) {
+  if (e.startsWith("rgba"))
+    return e.replace(/[\d.]+$/, t.toString());
+  const n = e.match(/\d+/g);
+  if (!n || n.length !== 3)
+    return `rgba(50, 50, 50, ${t})`;
+  const [i, r, s] = n;
+  return `rgba(${i}, ${r}, ${s}, ${t})`;
+}
+class qt {
+  constructor(t, n, i, r, s, u, o, a, f, l, h = "rgb(255, 255, 255)", c = 0.5, _ = 25, g = 1) {
+    this.stopDrag = () => {
+      this.isDragging = !1, document.removeEventListener("mousemove", this.handleDrag), document.removeEventListener("mouseup", this.stopDrag);
+    }, this.handleDrag = (m) => {
+      if (this.isDragging) {
+        let d = m.clientX - this.offsetMouseX - this.xmin, b = m.clientY - this.offsetMouseY - this.ymin;
+        const y = this.canvasXmax - this.canvasXmin, p = this.canvasYmax - this.canvasYmin;
+        d = J(d, -this.xmin, y - this.xmax), b = J(b, -this.ymin, p - this.ymax), this.xmin += d, this.ymin += b, this.xmax += d, this.ymax += b, this.updateHandles(), this.renderCallBack();
+      }
+    }, this.handleResize = (m) => {
+      if (this.isResizing) {
+        const d = m.clientX, b = m.clientY, y = d - this.resizeHandles[this.resizingHandleIndex].xmin - this.offsetMouseX, p = b - this.resizeHandles[this.resizingHandleIndex].ymin - this.offsetMouseY, B = this.canvasXmax - this.canvasXmin, T = this.canvasYmax - this.canvasYmin;
+        switch (this.resizingHandleIndex) {
+          case 0:
+            this.xmin += y, this.ymin += p, this.xmin = J(this.xmin, 0, this.xmax - this.minSize), this.ymin = J(this.ymin, 0, this.ymax - this.minSize);
+            break;
+          case 1:
+            this.xmax += y, this.ymin += p, this.xmax = J(this.xmax, this.xmin + this.minSize, B), this.ymin = J(this.ymin, 0, this.ymax - this.minSize);
+            break;
+          case 2:
+            this.xmax += y, this.ymax += p, this.xmax = J(this.xmax, this.xmin + this.minSize, B), this.ymax = J(this.ymax, this.ymin + this.minSize, T);
+            break;
+          case 3:
+            this.xmin += y, this.ymax += p, this.xmin = J(this.xmin, 0, this.xmax - this.minSize), this.ymax = J(this.ymax, this.ymin + this.minSize, T);
+            break;
+        }
+        this.updateHandles(), this.renderCallBack();
+      }
+    }, this.stopResize = () => {
+      this.isResizing = !1, document.removeEventListener("mousemove", this.handleResize), document.removeEventListener("mouseup", this.stopResize);
+    }, this.renderCallBack = t, this.canvasXmin = n, this.canvasYmin = i, this.canvasXmax = r, this.canvasYmax = s, this.scaleFactor = g, this.label = u, this.isDragging = !1, [this.xmin, this.ymin] = this.toBoxCoordinates(o, a), [this.xmax, this.ymax] = this.toBoxCoordinates(f, l), this.isResizing = !1, this.isSelected = !1, this.offsetMouseX = 0, this.offsetMouseY = 0, this.resizeHandleSize = 8, this.updateHandles(), this.resizingHandleIndex = -1, this.minSize = _, this.color = h, this.alpha = c;
+  }
+  toJSON() {
+    return {
+      label: this.label,
+      xmin: this.xmin,
+      ymin: this.ymin,
+      xmax: this.xmax,
+      ymax: this.ymax,
+      color: this.color,
+      scaleFactor: this.scaleFactor
+    };
+  }
+  setSelected(t) {
+    this.isSelected = t;
+  }
+  setScaleFactor(t) {
+    let n = t / this.scaleFactor;
+    this.xmin = Math.round(this.xmin * n), this.ymin = Math.round(this.ymin * n), this.xmax = Math.round(this.xmax * n), this.ymax = Math.round(this.ymax * n), this.updateHandles(), this.scaleFactor = t;
+  }
+  updateHandles() {
+    const t = this.resizeHandleSize / 2;
+    this.resizeHandles = [
+      {
+        xmin: this.xmin - t,
+        ymin: this.ymin - t,
+        xmax: this.xmin + t,
+        ymax: this.ymin + t
+      },
+      {
+        xmin: this.xmax - t,
+        ymin: this.ymin - t,
+        xmax: this.xmax + t,
+        ymax: this.ymin + t
+      },
+      {
+        xmin: this.xmax - t,
+        ymin: this.ymax - t,
+        xmax: this.xmax + t,
+        ymax: this.ymax + t
+      },
+      {
+        xmin: this.xmin - t,
+        ymin: this.ymax - t,
+        xmax: this.xmin + t,
+        ymax: this.ymax + t
+      }
+    ];
+  }
+  getWidth() {
+    return this.xmax - this.xmin;
+  }
+  getHeight() {
+    return this.ymax - this.ymin;
+  }
+  toCanvasCoordinates(t, n) {
+    return t = t + this.canvasXmin, n = n + this.canvasYmin, [t, n];
+  }
+  toBoxCoordinates(t, n) {
+    return t = t - this.canvasXmin, n = n - this.canvasYmin, [t, n];
+  }
+  render(t) {
+    let n, i;
+    if (t.beginPath(), [n, i] = this.toCanvasCoordinates(this.xmin, this.ymin), t.rect(n, i, this.getWidth(), this.getHeight()), t.fillStyle = Vt(this.color, this.alpha), t.fill(), this.isSelected ? t.lineWidth = 4 : t.lineWidth = 2, t.strokeStyle = Vt(this.color, 1), t.stroke(), t.closePath(), this.label !== null && this.label.trim() !== "") {
+      this.isSelected ? t.font = "bold 14px Arial" : t.font = "12px Arial";
+      const r = t.measureText(this.label).width + 10, s = 20;
+      let u = this.xmin, o = this.ymin - s;
+      t.fillStyle = "white", [u, o] = this.toCanvasCoordinates(u, o), t.fillRect(u, o, r, s), t.lineWidth = 1, t.strokeStyle = "black", t.strokeRect(u, o, r, s), t.fillStyle = "black", t.fillText(this.label, u + 5, o + 15);
+    }
+    t.fillStyle = Vt(this.color, 1);
+    for (const r of this.resizeHandles)
+      [n, i] = this.toCanvasCoordinates(r.xmin, r.ymin), t.fillRect(
+        n,
+        i,
+        r.xmax - r.xmin,
+        r.ymax - r.ymin
+      );
+  }
+  startDrag(t) {
+    this.isDragging = !0, this.offsetMouseX = t.clientX - this.xmin, this.offsetMouseY = t.clientY - this.ymin, document.addEventListener("mousemove", this.handleDrag), document.addEventListener("mouseup", this.stopDrag);
+  }
+  isPointInsideBox(t, n) {
+    return [t, n] = this.toBoxCoordinates(t, n), t >= this.xmin && t <= this.xmax && n >= this.ymin && n <= this.ymax;
+  }
+  indexOfPointInsideHandle(t, n) {
+    [t, n] = this.toBoxCoordinates(t, n);
+    for (let i = 0; i < this.resizeHandles.length; i++) {
+      const r = this.resizeHandles[i];
+      if (t >= r.xmin && t <= r.xmax && n >= r.ymin && n <= r.ymax)
+        return this.resizingHandleIndex = i, i;
+    }
+    return -1;
+  }
+  startResize(t, n) {
+    this.resizingHandleIndex = t, this.isResizing = !0, this.offsetMouseX = n.clientX - this.resizeHandles[t].xmin, this.offsetMouseY = n.clientY - this.resizeHandles[t].ymin, document.addEventListener("mousemove", this.handleResize), document.addEventListener("mouseup", this.stopResize);
+  }
+}
+const K = [
+  "rgb(255, 168, 77)",
+  "rgb(92, 172, 238)",
+  "rgb(255, 99, 71)",
+  "rgb(118, 238, 118)",
+  "rgb(255, 145, 164)",
+  "rgb(0, 191, 255)",
+  "rgb(255, 218, 185)",
+  "rgb(255, 69, 0)",
+  "rgb(34, 139, 34)",
+  "rgb(255, 240, 245)",
+  "rgb(255, 193, 37)",
+  "rgb(255, 193, 7)",
+  "rgb(255, 250, 138)"
+];
+const {
+  SvelteComponent: Ol,
+  append: ge,
+  attr: le,
+  binding_callbacks: Ml,
+  bubble: si,
+  check_outros: Wt,
+  create_component: De,
+  destroy_component: Ue,
+  detach: pe,
+  element: Ee,
+  empty: Ll,
+  group_outros: Yt,
+  init: Rl,
+  insert: ve,
+  listen: re,
+  mount_component: Ge,
+  noop: kl,
+  run_all: qi,
+  safe_not_equal: Dl,
+  space: Fe,
+  transition_in: G,
+  transition_out: q
+} = window.__gradio__svelte__internal, { onMount: Ul, onDestroy: Gl, createEventDispatcher: Fl } = window.__gradio__svelte__internal;
+function oi(e) {
+  let t, n, i, r, s, u, o, a, f, l, h, c;
+  return i = new Rr({}), u = new Cr({}), f = new mr({}), {
+    c() {
+      t = Ee("span"), n = Ee("button"), De(i.$$.fragment), r = Fe(), s = Ee("button"), De(u.$$.fragment), o = Fe(), a = Ee("button"), De(f.$$.fragment), le(n, "class", "icon svelte-182gnnj"), le(s, "class", "icon svelte-182gnnj"), le(a, "class", "icon svelte-182gnnj"), le(t, "class", "canvas-control svelte-182gnnj");
+    },
+    m(_, g) {
+      ve(_, t, g), ge(t, n), Ge(i, n, null), ge(t, r), ge(t, s), Ge(u, s, null), ge(t, o), ge(t, a), Ge(f, a, null), l = !0, h || (c = [
+        re(
+          n,
+          "click",
+          /*click_handler*/
+          e[22]
+        ),
+        re(
+          s,
+          "click",
+          /*click_handler_1*/
+          e[23]
+        ),
+        re(
+          a,
+          "click",
+          /*click_handler_2*/
+          e[24]
+        )
+      ], h = !0);
+    },
+    p: kl,
+    i(_) {
+      l || (G(i.$$.fragment, _), G(u.$$.fragment, _), G(f.$$.fragment, _), l = !0);
+    },
+    o(_) {
+      q(i.$$.fragment, _), q(u.$$.fragment, _), q(f.$$.fragment, _), l = !1;
+    },
+    d(_) {
+      _ && pe(t), Ue(i), Ue(u), Ue(f), h = !1, qi(c);
+    }
+  };
+}
+function ai(e) {
+  let t, n;
+  return t = new Vi({
+    props: {
+      choices: (
+        /*choices*/
+        e[2]
+      ),
+      choicesColors: (
+        /*choicesColors*/
+        e[3]
+      ),
+      label: (
+        /*selectedBox*/
+        e[5] >= 0 && /*selectedBox*/
+        e[5] < /*value*/
+        e[0].boxes.length ? (
+          /*value*/
+          e[0].boxes[
+            /*selectedBox*/
+            e[5]
+          ].label
+        ) : ""
+      ),
+      color: (
+        /*selectedBox*/
+        e[5] >= 0 && /*selectedBox*/
+        e[5] < /*value*/
+        e[0].boxes.length ? Xe(
+          /*value*/
+          e[0].boxes[
+            /*selectedBox*/
+            e[5]
+          ].color
+        ) : ""
+      )
+    }
+  }), t.$on(
+    "change",
+    /*onModalEditChange*/
+    e[14]
+  ), t.$on(
+    "enter{onModalEditChange}",
+    /*enter_onModalEditChange_handler*/
+    e[25]
+  ), {
+    c() {
+      De(t.$$.fragment);
+    },
+    m(i, r) {
+      Ge(t, i, r), n = !0;
+    },
+    p(i, r) {
+      const s = {};
+      r[0] & /*choices*/
+      4 && (s.choices = /*choices*/
+      i[2]), r[0] & /*choicesColors*/
+      8 && (s.choicesColors = /*choicesColors*/
+      i[3]), r[0] & /*selectedBox, value*/
+      33 && (s.label = /*selectedBox*/
+      i[5] >= 0 && /*selectedBox*/
+      i[5] < /*value*/
+      i[0].boxes.length ? (
+        /*value*/
+        i[0].boxes[
+          /*selectedBox*/
+          i[5]
+        ].label
+      ) : ""), r[0] & /*selectedBox, value*/
+      33 && (s.color = /*selectedBox*/
+      i[5] >= 0 && /*selectedBox*/
+      i[5] < /*value*/
+      i[0].boxes.length ? Xe(
+        /*value*/
+        i[0].boxes[
+          /*selectedBox*/
+          i[5]
+        ].color
+      ) : ""), t.$set(s);
+    },
+    i(i) {
+      n || (G(t.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      q(t.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Ue(t, i);
+    }
+  };
+}
+function li(e) {
+  let t, n;
+  return t = new Vi({
+    props: {
+      choices: (
+        /*choices*/
+        e[2]
+      ),
+      choicesColors: (
+        /*choicesColors*/
+        e[3]
+      ),
+      color: Array.isArray(
+        /*choicesColors*/
+        e[3]
+      ) && /*choicesColors*/
+      e[3].length > 0 ? (
+        /*choicesColors*/
+        e[3][0]
+      ) : Xe(K[
+        /*value*/
+        e[0].boxes.length % K.length
+      ])
+    }
+  }), t.$on(
+    "change",
+    /*onModalNewChange*/
+    e[11]
+  ), t.$on(
+    "enter{onModalNewChange}",
+    /*enter_onModalNewChange_handler*/
+    e[26]
+  ), {
+    c() {
+      De(t.$$.fragment);
+    },
+    m(i, r) {
+      Ge(t, i, r), n = !0;
+    },
+    p(i, r) {
+      const s = {};
+      r[0] & /*choices*/
+      4 && (s.choices = /*choices*/
+      i[2]), r[0] & /*choicesColors*/
+      8 && (s.choicesColors = /*choicesColors*/
+      i[3]), r[0] & /*choicesColors, value*/
+      9 && (s.color = Array.isArray(
+        /*choicesColors*/
+        i[3]
+      ) && /*choicesColors*/
+      i[3].length > 0 ? (
+        /*choicesColors*/
+        i[3][0]
+      ) : Xe(K[
+        /*value*/
+        i[0].boxes.length % K.length
+      ])), t.$set(s);
+    },
+    i(i) {
+      n || (G(t.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      q(t.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      Ue(t, i);
+    }
+  };
+}
+function zl(e) {
+  let t, n, i, r, s, u, o, a, f, l = (
+    /*interactive*/
+    e[1] && oi(e)
+  ), h = (
+    /*editModalVisible*/
+    e[6] && ai(e)
+  ), c = (
+    /*newModalVisible*/
+    e[7] && li(e)
+  );
+  return {
+    c() {
+      t = Ee("div"), n = Ee("canvas"), i = Fe(), l && l.c(), r = Fe(), h && h.c(), s = Fe(), c && c.c(), u = Ll(), le(n, "class", "canvas-annotator svelte-182gnnj"), le(t, "class", "canvas-container svelte-182gnnj"), le(t, "tabindex", "-1");
+    },
+    m(_, g) {
+      ve(_, t, g), ge(t, n), e[21](n), ve(_, i, g), l && l.m(_, g), ve(_, r, g), h && h.m(_, g), ve(_, s, g), c && c.m(_, g), ve(_, u, g), o = !0, a || (f = [
+        re(
+          n,
+          "mousedown",
+          /*handleMouseDown*/
+          e[8]
+        ),
+        re(
+          n,
+          "mouseup",
+          /*handleMouseUp*/
+          e[9]
+        ),
+        re(
+          n,
+          "dblclick",
+          /*handleDoubleClick*/
+          e[13]
+        ),
+        re(
+          t,
+          "focusin",
+          /*handleCanvasFocus*/
+          e[16]
+        ),
+        re(
+          t,
+          "focusout",
+          /*handleCanvasBlur*/
+          e[17]
+        )
+      ], a = !0);
+    },
+    p(_, g) {
+      /*interactive*/
+      _[1] ? l ? (l.p(_, g), g[0] & /*interactive*/
+      2 && G(l, 1)) : (l = oi(_), l.c(), G(l, 1), l.m(r.parentNode, r)) : l && (Yt(), q(l, 1, 1, () => {
+        l = null;
+      }), Wt()), /*editModalVisible*/
+      _[6] ? h ? (h.p(_, g), g[0] & /*editModalVisible*/
+      64 && G(h, 1)) : (h = ai(_), h.c(), G(h, 1), h.m(s.parentNode, s)) : h && (Yt(), q(h, 1, 1, () => {
+        h = null;
+      }), Wt()), /*newModalVisible*/
+      _[7] ? c ? (c.p(_, g), g[0] & /*newModalVisible*/
+      128 && G(c, 1)) : (c = li(_), c.c(), G(c, 1), c.m(u.parentNode, u)) : c && (Yt(), q(c, 1, 1, () => {
+        c = null;
+      }), Wt());
+    },
+    i(_) {
+      o || (G(l), G(h), G(c), o = !0);
+    },
+    o(_) {
+      q(l), q(h), q(c), o = !1;
+    },
+    d(_) {
+      _ && (pe(t), pe(i), pe(r), pe(s), pe(u)), e[21](null), l && l.d(_), h && h.d(_), c && c.d(_), a = !1, qi(f);
+    }
+  };
+}
+function ui(e) {
+  var t = parseInt(e.slice(1, 3), 16), n = parseInt(e.slice(3, 5), 16), i = parseInt(e.slice(5, 7), 16);
+  return "rgb(" + t + ", " + n + ", " + i + ")";
+}
+function Xe(e) {
+  const t = e.match(/(\d+(\.\d+)?)/g), n = parseInt(t[0]), i = parseInt(t[1]), r = parseInt(t[2]);
+  return "#" + (1 << 24 | n << 16 | i << 8 | r).toString(16).slice(1);
+}
+function jl(e, t, n) {
+  let { imageUrl: i = null } = t, { interactive: r } = t, { boxAlpha: s = 0.5 } = t, { boxMinSize: u = 25 } = t, { value: o } = t, { choices: a = [] } = t, { choicesColors: f = [] } = t, l, h, c = null, _ = -1, g = 0, m = 0, d = 0, b = 0, y = 1, p = 0, B = 0, T = !1, O = !1;
+  const C = Fl();
+  function w() {
+    if (h) {
+      h.clearRect(0, 0, l.width, l.height), c !== null && h.drawImage(c, g, m, p, B);
+      for (const v of o.boxes.slice().reverse())
+        v.render(h);
+    }
+  }
+  function k(v) {
+    n(5, _ = v), o.boxes.forEach((P) => {
+      P.setSelected(!1);
+    }), v >= 0 && v < o.boxes.length && o.boxes[v].setSelected(!0), w();
+  }
+  function x(v) {
+    if (!r)
+      return;
+    const P = l.getBoundingClientRect(), R = v.clientX - P.left, M = v.clientY - P.top;
+    for (const [te, Y] of o.boxes.entries()) {
+      const yn = Y.indexOfPointInsideHandle(R, M);
+      if (yn >= 0) {
+        k(te), Y.startResize(yn, v);
+        return;
+      }
+    }
+    for (const [te, Y] of o.boxes.entries())
+      if (Y.isPointInsideBox(R, M)) {
+        k(te), Y.startDrag(v);
+        return;
+      }
+    k(-1);
+  }
+  function L(v) {
+    C("change");
+  }
+  function W(v) {
+    if (r)
+      switch (v.key) {
+        case "Delete":
+          Pe();
+          break;
+      }
+  }
+  function ee() {
+    n(7, O = !0);
+  }
+  function St(v) {
+    n(7, O = !1);
+    const { detail: P } = v;
+    let R = P.label, M = P.color;
+    if (P.ok) {
+      M === null || M === "" ? M = K[o.boxes.length % K.length] : M = ui(M);
+      let Y = new qt(w, g, m, d, b, R, Math.round(l.width / 3), Math.round(l.height / 3), Math.round(2 * l.width / 3), Math.round(2 * l.height / 3), M, s, u, y);
+      n(0, o.boxes = [Y, ...o.boxes], o), w(), C("change");
+    }
+  }
+  function Ce() {
+    _ >= 0 && _ < o.boxes.length && n(6, T = !0);
+  }
+  function Ht(v) {
+    r && Ce();
+  }
+  function At(v) {
+    n(6, T = !1);
+    const { detail: P } = v;
+    let R = P.label, M = P.color;
+    if (P.ok && _ >= 0 && _ < o.boxes.length) {
+      let Y = o.boxes[_];
+      Y.label = R, Y.color = ui(M), w(), C("change");
+    }
+  }
+  function Pe() {
+    _ >= 0 && _ < o.boxes.length && (o.boxes.splice(_, 1), k(-1), C("change"));
+  }
+  function Ie() {
+    if (l) {
+      if (y = 1, n(4, l.width = l.clientWidth, l), c !== null)
+        if (c.width > l.width)
+          y = l.width / c.width, p = c.width * y, B = c.height * y, g = 0, m = 0, d = p, b = B, n(4, l.height = B, l);
+        else {
+          p = c.width, B = c.height;
+          var v = (l.width - p) / 2;
+          g = v, m = 0, d = v + p, b = c.height, n(4, l.height = B, l);
+        }
+      else
+        g = 0, m = 0, d = l.width, b = l.height, n(4, l.height = l.clientHeight, l);
+      if (d > 0 && b > 0)
+        for (const P of o.boxes)
+          P.canvasXmin = g, P.canvasYmin = m, P.canvasXmax = d, P.canvasYmax = b, P.setScaleFactor(y);
+      w(), C("change");
+    }
+  }
+  const E = new ResizeObserver(Ie);
+  function vn() {
+    let v = [];
+    for (let P = 0; P < o.boxes.length; P++) {
+      let R = o.boxes[P];
+      if (!(R instanceof qt)) {
+        let M = "", te = "";
+        R.hasOwnProperty("color") ? (M = R.color, Array.isArray(M) && M.length === 3 && (M = `rgb(${M[0]}, ${M[1]}, ${M[2]})`)) : M = K[v.length % K.length], R.hasOwnProperty("label") && (te = R.label), R = new qt(w, g, m, d, b, te, R.xmin, R.ymin, R.xmax, R.ymax, M, s, u, y);
+      }
+      v.push(R);
+    }
+    n(0, o.boxes = v, o);
+  }
+  Ul(() => {
+    if (Array.isArray(a) && a.length > 0 && (!Array.isArray(f) || f.length == 0))
+      for (let v = 0; v < a.length; v++) {
+        let P = K[v % K.length];
+        f.push(Xe(P));
+      }
+    h = l.getContext("2d"), E.observe(l), i !== null && (c = new Image(), c.src = i, c.onload = function() {
+      Ie(), w();
+    }), Ie(), w();
+  });
+  function Bt() {
+    document.addEventListener("keydown", W);
+  }
+  function Wi() {
+    document.removeEventListener("keydown", W);
+  }
+  Gl(() => {
+    document.removeEventListener("keydown", W);
+  });
+  function Yi(v) {
+    Ml[v ? "unshift" : "push"](() => {
+      l = v, n(4, l);
+    });
+  }
+  const Zi = () => ee(), Qi = () => Ce(), Ji = () => Pe();
+  function Ki(v) {
+    si.call(this, e, v);
+  }
+  function $i(v) {
+    si.call(this, e, v);
+  }
+  return e.$$set = (v) => {
+    "imageUrl" in v && n(18, i = v.imageUrl), "interactive" in v && n(1, r = v.interactive), "boxAlpha" in v && n(19, s = v.boxAlpha), "boxMinSize" in v && n(20, u = v.boxMinSize), "value" in v && n(0, o = v.value), "choices" in v && n(2, a = v.choices), "choicesColors" in v && n(3, f = v.choicesColors);
+  }, e.$$.update = () => {
+    e.$$.dirty[0] & /*value*/
+    1 && vn();
+  }, [
+    o,
+    r,
+    a,
+    f,
+    l,
+    _,
+    T,
+    O,
+    x,
+    L,
+    ee,
+    St,
+    Ce,
+    Ht,
+    At,
+    Pe,
+    Bt,
+    Wi,
+    i,
+    s,
+    u,
+    Yi,
+    Zi,
+    Qi,
+    Ji,
+    Ki,
+    $i
+  ];
+}
+class Xl extends Ol {
+  constructor(t) {
+    super(), Rl(
+      this,
+      t,
+      jl,
+      zl,
+      Dl,
+      {
+        imageUrl: 18,
+        interactive: 1,
+        boxAlpha: 19,
+        boxMinSize: 20,
+        value: 0,
+        choices: 2,
+        choicesColors: 3
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+const {
+  SvelteComponent: Vl,
+  add_flush_callback: ql,
+  bind: Wl,
+  binding_callbacks: Yl,
+  create_component: Zl,
+  destroy_component: Ql,
+  init: Jl,
+  mount_component: Kl,
+  safe_not_equal: $l,
+  transition_in: eu,
+  transition_out: tu
+} = window.__gradio__svelte__internal, { createEventDispatcher: nu } = window.__gradio__svelte__internal;
+function iu(e) {
+  let t, n, i;
+  function r(u) {
+    e[10](u);
+  }
+  let s = {
+    interactive: (
+      /*interactive*/
+      e[1]
+    ),
+    boxAlpha: (
+      /*boxesAlpha*/
+      e[2]
+    ),
+    choices: (
+      /*labelList*/
+      e[3]
+    ),
+    choicesColors: (
+      /*labelColors*/
+      e[4]
+    ),
+    boxMinSize: (
+      /*boxMinSize*/
+      e[5]
+    ),
+    imageUrl: (
+      /*resolved_src*/
+      e[6]
+    )
+  };
+  return (
+    /*value*/
+    e[0] !== void 0 && (s.value = /*value*/
+    e[0]), t = new Xl({ props: s }), Yl.push(() => Wl(t, "value", r)), t.$on(
+      "change",
+      /*change_handler*/
+      e[11]
+    ), {
+      c() {
+        Zl(t.$$.fragment);
+      },
+      m(u, o) {
+        Kl(t, u, o), i = !0;
+      },
+      p(u, [o]) {
+        const a = {};
+        o & /*interactive*/
+        2 && (a.interactive = /*interactive*/
+        u[1]), o & /*boxesAlpha*/
+        4 && (a.boxAlpha = /*boxesAlpha*/
+        u[2]), o & /*labelList*/
+        8 && (a.choices = /*labelList*/
+        u[3]), o & /*labelColors*/
+        16 && (a.choicesColors = /*labelColors*/
+        u[4]), o & /*boxMinSize*/
+        32 && (a.boxMinSize = /*boxMinSize*/
+        u[5]), o & /*resolved_src*/
+        64 && (a.imageUrl = /*resolved_src*/
+        u[6]), !n && o & /*value*/
+        1 && (n = !0, a.value = /*value*/
+        u[0], ql(() => n = !1)), t.$set(a);
+      },
+      i(u) {
+        i || (eu(t.$$.fragment, u), i = !0);
+      },
+      o(u) {
+        tu(t.$$.fragment, u), i = !1;
+      },
+      d(u) {
+        Ql(t, u);
+      }
+    }
+  );
+}
+function ru(e, t, n) {
+  let { src: i = void 0 } = t, { interactive: r } = t, { boxesAlpha: s } = t, { labelList: u } = t, { labelColors: o } = t, { boxMinSize: a } = t, { value: f } = t, l, h;
+  const c = nu();
+  function _(m) {
+    f = m, n(0, f);
+  }
+  const g = () => c("change");
+  return e.$$set = (m) => {
+    "src" in m && n(8, i = m.src), "interactive" in m && n(1, r = m.interactive), "boxesAlpha" in m && n(2, s = m.boxesAlpha), "labelList" in m && n(3, u = m.labelList), "labelColors" in m && n(4, o = m.labelColors), "boxMinSize" in m && n(5, a = m.boxMinSize), "value" in m && n(0, f = m.value);
+  }, e.$$.update = () => {
+    if (e.$$.dirty & /*src, latest_src*/
+    768) {
+      n(6, l = i), n(9, h = i);
+      const m = i;
+      or(m).then((d) => {
+        h === m && n(6, l = d);
+      });
+    }
+  }, [
+    f,
+    r,
+    s,
+    u,
+    o,
+    a,
+    l,
+    c,
+    i,
+    h,
+    _,
+    g
+  ];
+}
+class su extends Vl {
+  constructor(t) {
+    super(), Jl(this, t, ru, iu, $l, {
+      src: 8,
+      interactive: 1,
+      boxesAlpha: 2,
+      labelList: 3,
+      labelColors: 4,
+      boxMinSize: 5,
+      value: 0
+    });
+  }
+}
+const {
+  SvelteComponent: ou,
+  attr: au,
+  check_outros: lu,
+  create_component: uu,
+  destroy_component: fu,
+  detach: hu,
+  element: cu,
+  group_outros: mu,
+  init: _u,
+  insert: du,
+  mount_component: bu,
+  safe_not_equal: gu,
+  toggle_class: ie,
+  transition_in: ht,
+  transition_out: fn
+} = window.__gradio__svelte__internal;
+function fi(e) {
+  let t, n;
+  return t = new su({
+    props: {
+      src: (
+        /*samples_dir*/
+        e[1] + /*value*/
+        e[0].path
+      ),
+      alt: ""
+    }
+  }), {
+    c() {
+      uu(t.$$.fragment);
+    },
+    m(i, r) {
+      bu(t, i, r), n = !0;
+    },
+    p(i, r) {
+      const s = {};
+      r & /*samples_dir, value*/
+      3 && (s.src = /*samples_dir*/
+      i[1] + /*value*/
+      i[0].path), t.$set(s);
+    },
+    i(i) {
+      n || (ht(t.$$.fragment, i), n = !0);
+    },
+    o(i) {
+      fn(t.$$.fragment, i), n = !1;
+    },
+    d(i) {
+      fu(t, i);
+    }
+  };
+}
+function pu(e) {
+  let t, n, i = (
+    /*value*/
+    e[0] && fi(e)
+  );
+  return {
+    c() {
+      t = cu("div"), i && i.c(), au(t, "class", "container svelte-1sgcyba"), ie(
+        t,
+        "table",
+        /*type*/
+        e[2] === "table"
+      ), ie(
+        t,
+        "gallery",
+        /*type*/
+        e[2] === "gallery"
+      ), ie(
+        t,
+        "selected",
+        /*selected*/
+        e[3]
+      ), ie(
+        t,
+        "border",
+        /*value*/
+        e[0]
+      );
+    },
+    m(r, s) {
+      du(r, t, s), i && i.m(t, null), n = !0;
+    },
+    p(r, [s]) {
+      /*value*/
+      r[0] ? i ? (i.p(r, s), s & /*value*/
+      1 && ht(i, 1)) : (i = fi(r), i.c(), ht(i, 1), i.m(t, null)) : i && (mu(), fn(i, 1, 1, () => {
+        i = null;
+      }), lu()), (!n || s & /*type*/
+      4) && ie(
+        t,
+        "table",
+        /*type*/
+        r[2] === "table"
+      ), (!n || s & /*type*/
+      4) && ie(
+        t,
+        "gallery",
+        /*type*/
+        r[2] === "gallery"
+      ), (!n || s & /*selected*/
+      8) && ie(
+        t,
+        "selected",
+        /*selected*/
+        r[3]
+      ), (!n || s & /*value*/
+      1) && ie(
+        t,
+        "border",
+        /*value*/
+        r[0]
+      );
+    },
+    i(r) {
+      n || (ht(i), n = !0);
+    },
+    o(r) {
+      fn(i), n = !1;
+    },
+    d(r) {
+      r && hu(t), i && i.d();
+    }
+  };
+}
+function vu(e, t, n) {
+  let { value: i } = t, { samples_dir: r } = t, { type: s } = t, { selected: u = !1 } = t;
+  return e.$$set = (o) => {
+    "value" in o && n(0, i = o.value), "samples_dir" in o && n(1, r = o.samples_dir), "type" in o && n(2, s = o.type), "selected" in o && n(3, u = o.selected);
+  }, [i, r, s, u];
+}
+class Eu extends ou {
+  constructor(t) {
+    super(), _u(this, t, vu, pu, gu, {
+      value: 0,
+      samples_dir: 1,
+      type: 2,
+      selected: 3
+    });
+  }
+}
+export {
+  Eu as default
+};
diff --git a/src/backend/gradio_image_annotation/templates/example/style.css b/src/backend/gradio_image_annotation/templates/example/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..9a85aa93af41c87a3ec9aadf5075954457276fb0
--- /dev/null
+++ b/src/backend/gradio_image_annotation/templates/example/style.css
@@ -0,0 +1 @@
+.dropdown-arrow.svelte-145leq6{fill:currentColor}.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}input.svelte-16l8u73{display:block;position:relative;background:var(--background-fill-primary);line-height:var(--line-sm)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}div.svelte-1vvnm05{width:var(--size-10);height:var(--size-10)}.table.svelte-1vvnm05{margin:0 auto}button.svelte-8huxfn,a.svelte-8huxfn{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:var(--size-0-5) var(--size-2);text-align:center}button.svelte-8huxfn:hover,button[disabled].svelte-8huxfn,a.svelte-8huxfn:hover,a.disabled.svelte-8huxfn{box-shadow:var(--button-shadow-hover)}button.svelte-8huxfn:active,a.svelte-8huxfn:active{box-shadow:var(--button-shadow-active)}button[disabled].svelte-8huxfn,a.disabled.svelte-8huxfn{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.hidden.svelte-8huxfn{display:none}.primary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-primary-border-color);background:var(--button-primary-background-fill);color:var(--button-primary-text-color)}.primary.svelte-8huxfn:hover,.primary[disabled].svelte-8huxfn{border-color:var(--button-primary-border-color-hover);background:var(--button-primary-background-fill-hover);color:var(--button-primary-text-color-hover)}.secondary.svelte-8huxfn{border:var(--button-border-width) solid var(--button-secondary-border-color);background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color)}.secondary.svelte-8huxfn:hover,.secondary[disabled].svelte-8huxfn{border-color:var(--button-secondary-border-color-hover);background:var(--button-secondary-background-fill-hover);color:var(--button-secondary-text-color-hover)}.stop.svelte-8huxfn{border:var(--button-border-width) solid var(--button-cancel-border-color);background:var(--button-cancel-background-fill);color:var(--button-cancel-text-color)}.stop.svelte-8huxfn:hover,.stop[disabled].svelte-8huxfn{border-color:var(--button-cancel-border-color-hover);background:var(--button-cancel-background-fill-hover);color:var(--button-cancel-text-color-hover)}.sm.svelte-8huxfn{border-radius:var(--button-small-radius);padding:var(--button-small-padding);font-weight:var(--button-small-text-weight);font-size:var(--button-small-text-size)}.lg.svelte-8huxfn{border-radius:var(--button-large-radius);padding:var(--button-large-padding);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size)}.button-icon.svelte-8huxfn{width:var(--text-xl);height:var(--text-xl);margin-right:var(--spacing-xl)}.options.svelte-yuohum{--window-padding:var(--size-8);position:fixed;z-index:var(--layer-top);margin-left:0;box-shadow:var(--shadow-drop-lg);border-radius:var(--container-radius);background:var(--background-fill-primary);min-width:fit-content;max-width:inherit;overflow:auto;color:var(--body-text-color);list-style:none}.item.svelte-yuohum{display:flex;cursor:pointer;padding:var(--size-2)}.item.svelte-yuohum:hover,.active.svelte-yuohum{background:var(--background-fill-secondary)}.inner-item.svelte-yuohum{padding-right:var(--size-1)}.hide.svelte-yuohum{visibility:hidden}.icon-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}label.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:not(.container),label.svelte-xtjjyg:not(.container) .wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .wrap-inner.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .secondary-wrap.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) .token.svelte-xtjjyg.svelte-xtjjyg,label.svelte-xtjjyg:not(.container) input.svelte-xtjjyg.svelte-xtjjyg{height:100%}.container.svelte-xtjjyg .wrap.svelte-xtjjyg.svelte-xtjjyg{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding)}.token.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;align-items:center;transition:var(--button-transition);cursor:pointer;box-shadow:var(--checkbox-label-shadow);border:var(--checkbox-label-border-width) solid var(--checkbox-label-border-color);border-radius:var(--button-small-radius);background:var(--checkbox-label-background-fill);padding:var(--checkbox-label-padding);color:var(--checkbox-label-text-color);font-weight:var(--checkbox-label-text-weight);font-size:var(--checkbox-label-text-size);line-height:var(--line-md)}.token.svelte-xtjjyg>.svelte-xtjjyg+.svelte-xtjjyg{margin-left:var(--size-2)}.token-remove.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{fill:var(--body-text-color);display:flex;justify-content:center;align-items:center;cursor:pointer;border:var(--checkbox-border-width) solid var(--border-color-primary);border-radius:var(--radius-full);background:var(--background-fill-primary);padding:var(--size-0-5);width:16px;height:16px}.secondary-wrap.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size)}input.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.remove-all.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{margin-left:var(--size-1);width:20px;height:20px}.subdued.svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{color:var(--body-text-color-subdued)}input[readonly].svelte-xtjjyg.svelte-xtjjyg.svelte-xtjjyg{cursor:pointer}.icon-wrap.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color);margin-right:var(--size-2);width:var(--size-5)}.container.svelte-1m1zvyj.svelte-1m1zvyj{height:100%}.container.svelte-1m1zvyj .wrap.svelte-1m1zvyj{box-shadow:var(--input-shadow);border:var(--input-border-width) solid var(--border-color-primary)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj{position:relative;border-radius:var(--input-radius);background:var(--input-background-fill)}.wrap.svelte-1m1zvyj.svelte-1m1zvyj:focus-within{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}.wrap-inner.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:var(--checkbox-label-gap);padding:var(--checkbox-label-padding);height:100%}.secondary-wrap.svelte-1m1zvyj.svelte-1m1zvyj{display:flex;flex:1 1 0%;align-items:center;border:none;min-width:min-content;height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj{margin:var(--spacing-sm);outline:none;border:none;background:inherit;width:var(--size-full);color:var(--body-text-color);font-size:var(--input-text-size);height:100%}input.svelte-1m1zvyj.svelte-1m1zvyj:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1;cursor:not-allowed}.subdued.svelte-1m1zvyj.svelte-1m1zvyj{color:var(--body-text-color-subdued)}input[readonly].svelte-1m1zvyj.svelte-1m1zvyj{cursor:pointer}.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}.modal.svelte-hkn2q1{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--layer-top);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container.svelte-hkn2q1{border-style:solid;border-width:var(--block-border-width);margin-top:10%;padding:20px;box-shadow:var(--block-shadow);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);position:fixed;left:50%;transform:translate(-50%);width:fit-content}.model-content.svelte-hkn2q1{display:flex;align-items:flex-end}.canvas-annotator.svelte-182gnnj{border-color:var(--block-border-color);width:100%;height:100%;display:block}.canvas-control.svelte-182gnnj{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-top:var(--size-2)}.icon.svelte-182gnnj{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.icon.svelte-182gnnj:hover,.icon.svelte-182gnnj:focus{color:var(--color-accent)}.canvas-container.svelte-182gnnj:focus{outline:none}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}
diff --git a/src/demo/__init__.py b/src/demo/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/demo/app.py b/src/demo/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..dde08fb03dde9e961cd56affd730cab75e56f552
--- /dev/null
+++ b/src/demo/app.py
@@ -0,0 +1,56 @@
+import gradio as gr
+from gradio_image_annotation import image_annotator
+
+example = {
+    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+    "boxes": [
+        {
+            "xmin": 30,
+            "ymin": 70,
+            "xmax": 530,
+            "ymax": 500,
+            "label": "Gradio",
+            "color": (250, 185, 0),
+        }
+    ]
+}
+
+
+def crop(annotations):
+    if annotations["boxes"]:
+        box = annotations["boxes"][0]
+        return annotations["image"][
+            box["ymin"]:box["ymax"],
+            box["xmin"]:box["xmax"]
+        ]
+    return None
+
+
+def get_boxes_json(annotations):
+    return [
+        {k: box[k]
+            for k in box if k in ("xmin", "ymin", "xmax", "ymax", "label")}
+        for box in annotations["boxes"]
+    ]
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Crop"):
+        with gr.Row():
+            annotator_crop = image_annotator(example, image_type="numpy")
+            image_crop = gr.Image()
+        button_crop = gr.Button("Crop")
+        button_crop.click(crop, annotator_crop, image_crop)
+    with gr.Tab("Object annotation"):
+        annotator = image_annotator(
+            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            label_list=["Person", "Vehicle"],
+            label_colors=[(0, 255, 0), (255, 0, 0)],
+        )
+        button_get = gr.Button("Get bounding boxes")
+        json_boxes = gr.JSON()
+        button_get.click(get_boxes_json, annotator, json_boxes)
+
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/src/demo/css.css b/src/demo/css.css
new file mode 100644
index 0000000000000000000000000000000000000000..f7256be42f9884d89b499b0f5a6cfcbed3d54c80
--- /dev/null
+++ b/src/demo/css.css
@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}
diff --git a/src/demo/space.py b/src/demo/space.py
new file mode 100644
index 0000000000000000000000000000000000000000..d09d257f8e03a4946ceda41d0fdcda86ee8d3b4f
--- /dev/null
+++ b/src/demo/space.py
@@ -0,0 +1,178 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'image_annotator': {'description': 'Creates a component to annotate images with bounding boxes. The bounding boxes can be created and edited by the user or be passed by code.\nIt is also possible to predefine a set of valid classes and colors.', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': "A dict or None. The dictionary must contain a key 'image' with either an URL to an image, a numpy image or a PIL image. Optionally it may contain a key 'boxes' with a list of boxes. Each box must be a dict wit the keys: 'xmin', 'ymin', 'xmax' and 'ymax' with the absolute image coordinates of the box. Optionally can also include the keys 'label' and 'color' describing the label and color of the box. Color must be a tuple of RGB values (e.g. `(255,255,255)`)."}, 'boxes_alpha': {'type': 'float | None', 'default': 'None', 'description': 'Opacity of the bounding boxes 0 and 1.'}, 'label_list': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of valid labels.'}, 'label_colors': {'type': 'list[str] | None', 'default': 'None', 'description': 'Optional list of colors for each label when `label_list` is used. Colors must be a tuple of RGB values (e.g. `(255,255,255)`).'}, 'box_min_size': {'type': 'int | None', 'default': 'None', 'description': 'Minimum valid bounding box size.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.'}, 'image_mode': {'type': '"1"\n    | "L"\n    | "P"\n    | "RGB"\n    | "RGBA"\n    | "CMYK"\n    | "YCbCr"\n    | "LAB"\n    | "HSV"\n    | "I"\n    | "F"', 'default': '"RGB"', 'description': '"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.'}, 'sources': {'type': 'list["upload" | "clipboard"] | None', 'default': '["upload", "clipboard"]', 'description': 'List of sources for the image. "upload" creates a box where user can drop an image file, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "clipboard"].'}, 'image_type': {'type': '"numpy" | "pil" | "filepath"', 'default': '"numpy"', 'description': 'The format the image is converted 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. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'True', 'description': 'if True, will allow users to upload and annotate an image; if False, can only be used to display annotated images.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will show a button to download the image.'}, 'show_share_button': {'type': 'bool | None', 'default': 'None', 'description': '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.'}, 'show_clear_button': {'type': 'bool | None', 'default': 'True', 'description': 'If True, will show a clear button.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': 'A dict with an image and an optional list of boxes or None.'}}, 'preprocess': {'return': {'type': 'dict | None', 'description': 'A dict with the image and boxes or None.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the image_annotator using the X button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the image_annotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the image_annotator.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'image_annotator': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_image_annotation`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_image_annotation/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_image_annotation"></a>  
+</div>
+
+A Gradio component that can be used to annotate images with bounding boxes.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_image_annotation
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_image_annotation import image_annotator
+
+example = {
+    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+    "boxes": [
+        {
+            "xmin": 30,
+            "ymin": 70,
+            "xmax": 530,
+            "ymax": 500,
+            "label": "Gradio",
+            "color": (250, 185, 0),
+        }
+    ]
+}
+
+
+def crop(annotations):
+    if annotations["boxes"]:
+        box = annotations["boxes"][0]
+        return annotations["image"][
+            box["ymin"]:box["ymax"],
+            box["xmin"]:box["xmax"]
+        ]
+    return None
+
+
+def get_boxes_json(annotations):
+    return [
+        {k: box[k]
+            for k in box if k in ("xmin", "ymin", "xmax", "ymax", "label")}
+        for box in annotations["boxes"]
+    ]
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Crop"):
+        with gr.Row():
+            annotator_crop = image_annotator(example, image_type="numpy")
+            image_crop = gr.Image()
+        button_crop = gr.Button("Crop")
+        button_crop.click(crop, annotator_crop, image_crop)
+    with gr.Tab("Object annotation"):
+        annotator = image_annotator(
+            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            label_list=["Person", "Vehicle"],
+            label_colors=[(0, 255, 0), (255, 0, 0)],
+        )
+        button_get = gr.Button("Get bounding boxes")
+        json_boxes = gr.JSON()
+        button_get.click(get_boxes_json, annotator, json_boxes)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `image_annotator`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["image_annotator"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["image_annotator"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, a dict with the image and boxes or None.
+- **As output:** Should return, a dict with an image and an optional list of boxes or None.
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "image_annotator-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          image_annotator: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()
diff --git a/src/frontend/Example.svelte b/src/frontend/Example.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0bbe6ea7d1148ea6e19af0e4f4850076d970e021
--- /dev/null
+++ b/src/frontend/Example.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import Image from "./shared/ImageCanvas.svelte";
+	import type { FileData } from "@gradio/client";
+
+	export let value: null | FileData;
+	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class="container"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class:border={value}
+>
+	{#if value}
+		<Image src={samples_dir + value.path} alt="" />
+	{/if}
+</div>
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		width: var(--size-20);
+		max-width: var(--size-20);
+		object-fit: cover;
+	}
+</style>
diff --git a/src/frontend/Index.svelte b/src/frontend/Index.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9211ee32470db0515fae851684d9f8beab4296bd
--- /dev/null
+++ b/src/frontend/Index.svelte
@@ -0,0 +1,117 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio, SelectData } from "@gradio/utils";
+	import { Block, Empty, UploadText } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import AnnotatedImageData from "./shared/AnnotatedImageData";
+	import ImageAnnotator from "./shared/ImageAnnotator.svelte";
+
+	type sources = "upload" | "clipboard" | null;
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: null | AnnotatedImageData = null;
+	export let label: string;
+	export let show_label: 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 sources: ("clipboard" | "upload")[] = ["upload", "clipboard"];
+	export let show_download_button: boolean;
+	export let show_share_button: boolean;
+	export let show_clear_button: boolean;
+	export let interactive: boolean;
+	export let boxes_alpha: number;
+	export let label_list: string[];
+	export let label_colors: string[];
+	export let box_min_size: number;
+
+	export let gradio: Gradio<{
+		change: never;
+		error: string;
+		edit: never;
+		drag: never;
+		upload: never;
+		clear: never;
+		select: SelectData;
+		share: ShareData;
+	}>;
+
+	let dragging: boolean;
+	let active_source: sources = null;
+</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
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+
+	<ImageAnnotator
+		bind:active_source
+		bind:value
+		on:change={() => gradio.dispatch("change")}
+		selectable={_selectable}
+		{root}
+		{sources}
+		{interactive}
+		showDownloadButton={show_download_button}
+		showShareButton={show_share_button}
+		showClearButton={show_clear_button}
+		i18n={gradio.i18n}
+		boxesAlpha={boxes_alpha}
+		labelList={label_list}
+		labelColors={label_colors}
+		boxMinSize={box_min_size}
+		on:edit={() => gradio.dispatch("edit")}
+		on:clear={() => {
+			gradio.dispatch("clear");
+		}}
+		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}
+	>
+		{#if active_source === "upload"}
+			<UploadText i18n={gradio.i18n} type="image" />
+		{:else if active_source === "clipboard"}
+			<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
+		{:else}
+			<Empty unpadded_box={true} size="large"><Image /></Empty>
+		{/if}
+	</ImageAnnotator>
+</Block>
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..826efd1f8dd48ae5dc70caca86e49cfb0f143d1a
--- /dev/null
+++ b/src/frontend/package-lock.json
@@ -0,0 +1,1124 @@
+{
+  "name": "gradio_image_annotator",
+  "version": "0.9.3",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gradio_image_annotator",
+      "version": "0.9.3",
+      "license": "ISC",
+      "dependencies": {
+        "@gradio/atoms": "0.5.3",
+        "@gradio/button": "^0.2.24",
+        "@gradio/client": "0.12.1",
+        "@gradio/colorpicker": "^0.2.11",
+        "@gradio/icons": "0.3.3",
+        "@gradio/statustracker": "0.4.8",
+        "@gradio/upload": "0.7.4",
+        "@gradio/utils": "0.3.0",
+        "@gradio/wasm": "0.6.0",
+        "cropperjs": "^1.5.12",
+        "lazy-brush": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "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.5.3",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.5.3.tgz",
+      "integrity": "sha512-1HZgmhbAPzCYt6muyttrJi/P5zXTnD3kVMgneXuDd2j9qB21kSqzshmpnPcvDO3lO0vro55HuxgH22PJ1XHWqg==",
+      "dependencies": {
+        "@gradio/icons": "^0.3.3",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "node_modules/@gradio/button": {
+      "version": "0.2.24",
+      "resolved": "https://registry.npmjs.org/@gradio/button/-/button-0.2.24.tgz",
+      "integrity": "sha512-xpv/msTKUJFz5iDrNszzlAzKDDyz6VgeOGxUFTZNpC8oKo1pjrMPIlxH+lralJxpqk20tyO6eFQgSvEowmEjWg==",
+      "dependencies": {
+        "@gradio/client": "^0.12.2",
+        "@gradio/upload": "^0.7.6",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "node_modules/@gradio/button/node_modules/@gradio/client": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-0.12.2.tgz",
+      "integrity": "sha512-GHPWj2ag36htK6d3ljLFn/FG1iNsZVfsMMHei/q770KDG+KJHliRqjlUHqigFTTG2+SGRS6QeDGCnyKHlGqBXw==",
+      "dependencies": {
+        "bufferutil": "^4.0.7",
+        "semiver": "^1.1.0",
+        "ws": "^8.13.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@gradio/button/node_modules/@gradio/upload": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/@gradio/upload/-/upload-0.7.6.tgz",
+      "integrity": "sha512-oDbj2N2rhib52dqRup+diJDYriCW09ky8wa2gGo+fcML4FK3v4U5isb79cR8TFJEmFuakdxaE+q6PSHaEnjjVg==",
+      "dependencies": {
+        "@gradio/atoms": "^0.5.3",
+        "@gradio/client": "^0.12.2",
+        "@gradio/icons": "^0.3.3",
+        "@gradio/upload": "^0.7.6",
+        "@gradio/utils": "^0.3.0",
+        "@gradio/wasm": "^0.7.0"
+      }
+    },
+    "node_modules/@gradio/button/node_modules/@gradio/wasm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@gradio/wasm/-/wasm-0.7.0.tgz",
+      "integrity": "sha512-Q4/zUD9T19WazXMZrQ/e0zOhp98ipkIqaaktZQM67DkllJw3eDAG5tuSVBHNfURp4nT7LTu3aJBAMU7RpJ2Vog==",
+      "dependencies": {
+        "@types/path-browserify": "^1.0.0",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@gradio/client": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@gradio/client/-/client-0.12.1.tgz",
+      "integrity": "sha512-qccY53yKUC7qRHnUGmLTHdyJQOAlg3OxYLxb5uuyc1EaTrggtlp+nF99T7dV/W7xU0igxjyiQ1xYnRWRMOhhuw==",
+      "dependencies": {
+        "bufferutil": "^4.0.7",
+        "semiver": "^1.1.0",
+        "ws": "^8.13.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@gradio/colorpicker": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@gradio/colorpicker/-/colorpicker-0.2.11.tgz",
+      "integrity": "sha512-vGzAJYVkJEsH2daw20PaWNCdhLLdVUOTYDV3Wx3wXcv5S9BMJur3v4oOwlLBoEIX3zK1L+wSgbXOfW/0hXCnGA==",
+      "dependencies": {
+        "@gradio/atoms": "^0.5.3",
+        "@gradio/statustracker": "^0.4.8",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "node_modules/@gradio/column": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@gradio/column/-/column-0.1.0.tgz",
+      "integrity": "sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw=="
+    },
+    "node_modules/@gradio/icons": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.3.3.tgz",
+      "integrity": "sha512-UFTHpjzFJVwaRzZsdslWxnKUPGgtVeErmUGzrG9di4Vn0oHn1FgHt1Yr2SVu4lO3JI/r2u3H49tb6iax4U9HjA=="
+    },
+    "node_modules/@gradio/statustracker": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.4.8.tgz",
+      "integrity": "sha512-B/SN7T9BbcdzPrWYfKVxwy3e4u85MS+DAZSeuXgPbAL5n5QravCtvNW7zwkUWb0OlBloaglN3Y7K3M8l1hR5qg==",
+      "dependencies": {
+        "@gradio/atoms": "^0.5.3",
+        "@gradio/column": "^0.1.0",
+        "@gradio/icons": "^0.3.3",
+        "@gradio/utils": "^0.3.0"
+      }
+    },
+    "node_modules/@gradio/theme": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.2.0.tgz",
+      "integrity": "sha512-33c68Nk7oRXLn08OxPfjcPm7S4tXGOUV1I1bVgzdM2YV5o1QBOS1GEnXPZPu/CEYPePLMB6bsDwffrLEyLGWVQ=="
+    },
+    "node_modules/@gradio/upload": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@gradio/upload/-/upload-0.7.4.tgz",
+      "integrity": "sha512-cS8hFa68paqmbO8STii6lESLS0rQ4QyVt6224FQXUzK/JudADwVfHAj2ZrTpIq0qW+qI2yI/yR6krMpxCBx7LQ==",
+      "dependencies": {
+        "@gradio/atoms": "^0.5.3",
+        "@gradio/client": "^0.12.1",
+        "@gradio/icons": "^0.3.3",
+        "@gradio/upload": "^0.7.4",
+        "@gradio/utils": "^0.3.0",
+        "@gradio/wasm": "^0.6.0"
+      }
+    },
+    "node_modules/@gradio/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-VxP0h7UoWazkdSB875ChvTXWamBwMguuRc+8OyQFZjdj14lcqLEQuj54es3FDBpXOp5GMLFh48Q5FLLjYxMgSg==",
+      "dependencies": {
+        "@gradio/theme": "^0.2.0",
+        "svelte-i18n": "^3.6.0"
+      }
+    },
+    "node_modules/@gradio/wasm": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@gradio/wasm/-/wasm-0.6.0.tgz",
+      "integrity": "sha512-27Ee8NKGtSL6jsgiHK4WysoA8Ndtstd5a97DJ5CEg0s+XY3zQQ1U0HEgUnWE+aGYp4OEskM8emAKlJNpruRMuw==",
+      "dependencies": {
+        "@types/path-browserify": "^1.0.0",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "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.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/@types/path-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/path-browserify/-/path-browserify-1.0.2.tgz",
+      "integrity": "sha512-ZkC5IUqqIFPXx3ASTTybTzmQdwHwe2C0u3eL75ldQ6T9E9IWFJodn6hIfbZGab73DfyiHN4Xw15gNxUq2FbvBA=="
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "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": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
+    "node_modules/cli-color": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.4.tgz",
+      "integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.64",
+        "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/cropperjs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz",
+      "integrity": "sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA=="
+    },
+    "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.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "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.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "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.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "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.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
+      }
+    },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "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/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/lazy-brush": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazy-brush/-/lazy-brush-1.0.1.tgz",
+      "integrity": "sha512-xT/iSClTVi7vLoF8dCWTBhCuOWqsLXCMPa6ucVmVAk6hyNCM5JeS1NLhXqIrJktUg+caEYKlqSOUU4u3cpXzKg=="
+    },
+    "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.8",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
+      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+      "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/node-gyp-build": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.0.tgz",
+      "integrity": "sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
+    "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/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
+    "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/semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
+      "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.12",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.12.tgz",
+      "integrity": "sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "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": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
+    "node_modules/ws": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/src/frontend/package.json b/src/frontend/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..fff73b34356917956de538a9bdb90a4df741d939
--- /dev/null
+++ b/src/frontend/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "gradio_image_annotator",
+  "version": "0.9.3",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.5.3",
+    "@gradio/button": "^0.2.24",
+    "@gradio/client": "0.12.1",
+    "@gradio/colorpicker": "^0.2.11",
+    "@gradio/icons": "0.3.3",
+    "@gradio/statustracker": "0.4.8",
+    "@gradio/upload": "0.7.4",
+    "@gradio/utils": "0.3.0",
+    "@gradio/wasm": "0.6.0",
+    "cropperjs": "^1.5.12",
+    "lazy-brush": "^1.0.1",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "main_changeset": true,
+  "main": "./Index.svelte",
+  "exports": {
+    ".": "./Index.svelte",
+    "./shared": "./shared/index.ts",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  }
+}
diff --git a/src/frontend/shared/AnnotatedImageData.ts b/src/frontend/shared/AnnotatedImageData.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6b0718f32e6860c99b9ca892bbaa6826c1288b9
--- /dev/null
+++ b/src/frontend/shared/AnnotatedImageData.ts
@@ -0,0 +1,7 @@
+import type { FileData } from "@gradio/client";
+import Box from "./Box";
+
+export default class AnnotatedImageData {
+    image: FileData;
+    boxes: Box[] = [];
+}
diff --git a/src/frontend/shared/Box.ts b/src/frontend/shared/Box.ts
new file mode 100644
index 0000000000000000000000000000000000000000..01c747d3c999320e947f476944485f2a1da1a143
--- /dev/null
+++ b/src/frontend/shared/Box.ts
@@ -0,0 +1,324 @@
+const clamp = (num: number, min: number, max: number) => Math.min(Math.max(num, min), max)
+
+
+function setAlpha(rgbColor: string, alpha: number) {
+    if (rgbColor.startsWith('rgba')) {
+        return rgbColor.replace(/[\d.]+$/, alpha.toString());
+    }
+    const matches = rgbColor.match(/\d+/g);
+    if (!matches || matches.length !== 3) {
+        return `rgba(50, 50, 50, ${alpha})`;
+    }
+    const [r, g, b] = matches;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+
+export default class Box {
+    label: string;
+    xmin: number;
+    ymin: number;
+    xmax: number;
+    ymax: number;
+    color: string;
+    alpha: number;
+    isDragging: boolean;
+    isResizing: boolean;
+    isSelected: boolean;
+    offsetMouseX: number;
+    offsetMouseY: number;
+    resizeHandleSize: number;
+    resizingHandleIndex: number;
+    minSize: number;
+    renderCallBack: () => void;
+    canvasXmin: number;
+    canvasYmin: number;
+    canvasXmax: number;
+    canvasYmax: number;
+    scaleFactor: number;
+    resizeHandles: {
+        xmin: number;
+        ymin: number;
+        xmax: number;
+        ymax: number;
+    }[];
+
+    constructor(
+        renderCallBack: () => void,
+        canvasXmin: number,
+        canvasYmin: number,
+        canvasXmax: number,
+        canvasYmax: number,
+        label: string,
+        xmin: number,
+        ymin: number,
+        xmax: number,
+        ymax: number,
+        color: string = "rgb(255, 255, 255)",
+        alpha: number = 0.5,
+        minSize: number = 25,
+        scaleFactor: number = 1
+    ) {
+        this.renderCallBack = renderCallBack;
+        this.canvasXmin = canvasXmin;
+        this.canvasYmin = canvasYmin;
+        this.canvasXmax = canvasXmax;
+        this.canvasYmax = canvasYmax;
+        this.scaleFactor = scaleFactor;
+        this.label = label;
+        this.isDragging = false;
+        [this.xmin, this.ymin] = this.toBoxCoordinates(xmin, ymin);
+        [this.xmax, this.ymax] = this.toBoxCoordinates(xmax, ymax);
+        this.isResizing = false;
+        this.isSelected = false;
+        this.offsetMouseX = 0;
+        this.offsetMouseY = 0;
+        this.resizeHandleSize = 8;
+        this.updateHandles();
+        this.resizingHandleIndex = -1;
+        this.minSize = minSize;
+        this.color = color;
+        this.alpha = alpha;
+    }
+
+    toJSON() {
+        return {
+            label: this.label,
+            xmin: this.xmin,
+            ymin: this.ymin,
+            xmax: this.xmax,
+            ymax: this.ymax,
+            color: this.color,
+            scaleFactor: this.scaleFactor,
+        };
+    }
+
+    setSelected(selected: boolean): void{
+        this.isSelected = selected;
+    }
+
+    setScaleFactor(scaleFactor: number) {
+        let scale = scaleFactor / this.scaleFactor;
+        this.xmin = Math.round(this.xmin * scale);
+        this.ymin = Math.round(this.ymin * scale);
+        this.xmax = Math.round(this.xmax * scale);
+        this.ymax = Math.round(this.ymax * scale);
+        this.updateHandles();
+        this.scaleFactor = scaleFactor;
+    }
+
+    updateHandles(): void {
+        const halfSize = this.resizeHandleSize / 2;
+        this.resizeHandles = [
+            {
+                xmin: this.xmin - halfSize,
+                ymin: this.ymin - halfSize,
+                xmax: this.xmin + halfSize,
+                ymax: this.ymin + halfSize,
+            },
+            {
+                xmin: this.xmax - halfSize,
+                ymin: this.ymin - halfSize,
+                xmax: this.xmax + halfSize,
+                ymax: this.ymin + halfSize,
+            },
+            {
+                xmin: this.xmax - halfSize,
+                ymin: this.ymax - halfSize,
+                xmax: this.xmax + halfSize,
+                ymax: this.ymax + halfSize,
+            },
+            {
+                xmin: this.xmin - halfSize,
+                ymin: this.ymax - halfSize,
+                xmax: this.xmin + halfSize,
+                ymax: this.ymax + halfSize,
+            },
+        ];
+    }
+
+    getWidth(): number {
+        return this.xmax - this.xmin;
+    }
+
+    getHeight(): number {
+        return this.ymax - this.ymin;
+    }
+
+    toCanvasCoordinates(x: number, y: number): [number, number] {
+        x = x + this.canvasXmin;
+        y = y + this.canvasYmin;
+        return [x, y];
+    }
+
+    toBoxCoordinates(x: number, y: number): [number, number] {
+        x = x - this.canvasXmin;
+        y = y - this.canvasYmin;
+        return [x, y];
+    }
+
+    render(ctx: CanvasRenderingContext2D): void {
+        let xmin: number, ymin: number;
+
+        // Render the box and border
+        ctx.beginPath();
+        [xmin, ymin] = this.toCanvasCoordinates(this.xmin, this.ymin);
+        ctx.rect(xmin, ymin, this.getWidth(), this.getHeight());
+        ctx.fillStyle = setAlpha(this.color, this.alpha);
+        ctx.fill();
+        if (this.isSelected) {
+            ctx.lineWidth = 4;
+        } else {
+            ctx.lineWidth = 2;
+        }
+        ctx.strokeStyle = setAlpha(this.color, 1);
+        ctx.stroke();
+        ctx.closePath();
+
+        // Render the label and background
+        if (this.label !== null && this.label.trim() !== ""){
+            if (this.isSelected) {
+                ctx.font = "bold 14px Arial";
+            } else {
+                ctx.font = "12px Arial";
+            }
+            const labelWidth = ctx.measureText(this.label).width + 10;
+            const labelHeight = 20;
+            let labelX = this.xmin;
+            let labelY = this.ymin - labelHeight;
+            ctx.fillStyle = "white";
+            [labelX, labelY] = this.toCanvasCoordinates(labelX, labelY);
+            ctx.fillRect(labelX, labelY, labelWidth, labelHeight);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = "black";
+            ctx.strokeRect(labelX, labelY, labelWidth, labelHeight);
+            ctx.fillStyle = "black";
+            ctx.fillText(this.label, labelX + 5, labelY + 15);
+        }
+
+        // Render the handles
+        ctx.fillStyle = setAlpha(this.color, 1);
+        for (const handle of this.resizeHandles) {
+            [xmin, ymin] = this.toCanvasCoordinates(handle.xmin, handle.ymin);
+            ctx.fillRect(
+                xmin,
+                ymin,
+                handle.xmax - handle.xmin,
+                handle.ymax - handle.ymin,
+            );
+        }
+    }
+
+    startDrag(event: MouseEvent): void {
+        this.isDragging = true;
+        this.offsetMouseX = event.clientX - this.xmin;
+        this.offsetMouseY = event.clientY - this.ymin;
+        document.addEventListener("mousemove", this.handleDrag);
+        document.addEventListener("mouseup", this.stopDrag);
+    }
+
+    stopDrag = (): void => {
+        this.isDragging = false;
+        document.removeEventListener("mousemove", this.handleDrag);
+        document.removeEventListener("mouseup", this.stopDrag);
+    };
+
+    handleDrag = (event: MouseEvent): void => {
+        if (this.isDragging) {
+            let deltaX = event.clientX - this.offsetMouseX - this.xmin;
+            let deltaY = event.clientY - this.offsetMouseY - this.ymin;
+            const canvasW = this.canvasXmax - this.canvasXmin;
+            const canvasH = this.canvasYmax - this.canvasYmin;
+            deltaX = clamp(deltaX, -this.xmin, canvasW-this.xmax);
+            deltaY = clamp(deltaY, -this.ymin, canvasH-this.ymax);
+            this.xmin += deltaX;
+            this.ymin += deltaY;
+            this.xmax += deltaX;
+            this.ymax += deltaY;
+            this.updateHandles();
+            this.renderCallBack();
+        }
+    };
+
+    isPointInsideBox(x: number, y: number): boolean {
+        [x, y] = this.toBoxCoordinates(x, y);
+        return (
+            x >= this.xmin &&
+            x <= this.xmax &&
+            y >= this.ymin &&
+            y <= this.ymax
+        );
+    }
+
+    indexOfPointInsideHandle(x: number, y: number): number {
+        [x, y] = this.toBoxCoordinates(x, y);
+        for (let i = 0; i < this.resizeHandles.length; i++) {
+            const handle = this.resizeHandles[i];
+            if (
+                x >= handle.xmin &&
+                x <= handle.xmax &&
+                y >= handle.ymin &&
+                y <= handle.ymax
+            ) {
+                this.resizingHandleIndex = i;
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    startResize(handleIndex: number, event: MouseEvent): void {
+        this.resizingHandleIndex = handleIndex;
+        this.isResizing = true;
+        this.offsetMouseX = event.clientX - this.resizeHandles[handleIndex].xmin;
+        this.offsetMouseY = event.clientY - this.resizeHandles[handleIndex].ymin;
+        document.addEventListener("mousemove", this.handleResize);
+        document.addEventListener("mouseup", this.stopResize);
+    }
+
+    handleResize = (event: MouseEvent): void => {
+        if (this.isResizing) {
+            const mouseX = event.clientX;
+            const mouseY = event.clientY;
+            const deltaX = mouseX - this.resizeHandles[this.resizingHandleIndex].xmin - this.offsetMouseX;
+            const deltaY = mouseY - this.resizeHandles[this.resizingHandleIndex].ymin - this.offsetMouseY;
+            const canvasW = this.canvasXmax - this.canvasXmin;
+            const canvasH = this.canvasYmax - this.canvasYmin;
+            switch (this.resizingHandleIndex) {
+                case 0: // Top-left handle
+                    this.xmin += deltaX;
+                    this.ymin += deltaY;
+                    this.xmin = clamp(this.xmin, 0, this.xmax - this.minSize);
+                    this.ymin = clamp(this.ymin, 0, this.ymax - this.minSize);
+                    break;
+                case 1: // Top-right handle
+                    this.xmax += deltaX;
+                    this.ymin += deltaY;
+                    this.xmax = clamp(this.xmax, this.xmin + this.minSize, canvasW);
+                    this.ymin = clamp(this.ymin, 0, this.ymax - this.minSize);
+                    break;
+                case 2: // Bottom-right handle
+                    this.xmax += deltaX;
+                    this.ymax += deltaY;
+                    this.xmax = clamp(this.xmax, this.xmin + this.minSize, canvasW);
+                    this.ymax = clamp(this.ymax, this.ymin + this.minSize, canvasH);
+                    break;
+                case 3: // Bottom-left handle
+                    this.xmin += deltaX;
+                    this.ymax += deltaY;
+                    this.xmin = clamp(this.xmin, 0, this.xmax - this.minSize);
+                    this.ymax = clamp(this.ymax, this.ymin + this.minSize, canvasH);
+                    break;
+            }
+            // Update the resize handles
+            this.updateHandles();
+            this.renderCallBack();
+        }
+    };
+
+    stopResize = (): void => {
+        this.isResizing = false;
+        document.removeEventListener("mousemove", this.handleResize);
+        document.removeEventListener("mouseup", this.stopResize);
+    };
+}
diff --git a/src/frontend/shared/Canvas.svelte b/src/frontend/shared/Canvas.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d73fb3bb402e0c27f56b771c97e7595de75f97d0
--- /dev/null
+++ b/src/frontend/shared/Canvas.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+    import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { Clear, Edit } from "@gradio/icons";
+	import { Add } from "./icons/index";
+	import ModalBox from "./ModalBox.svelte";
+	import Box from "./Box";
+	import { Colors } from './Colors.js';
+	import AnnotatedImageData from "./AnnotatedImageData";
+
+    export let imageUrl: string | null = null;
+	export let interactive: boolean;
+	export let boxAlpha = 0.5;
+	export let boxMinSize = 25;
+	export let value: null | AnnotatedImageData;
+	export let choices = [];
+    export let choicesColors = [];
+
+    let canvas: HTMLCanvasElement;
+	let ctx: CanvasRenderingContext2D;
+    let image = null;
+	let selectedBox = -1;
+
+	let canvasXmin = 0;
+	let canvasYmin = 0;
+	let canvasXmax = 0;
+	let canvasYmax = 0;
+	let scaleFactor = 1.0;
+
+	let imageWidth = 0;
+	let imageHeight = 0;
+
+	let editModalVisible = false;
+	let newModalVisible = false;
+
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+	}>();
+
+	function colorHexToRGB(hex: string) {
+		var r = parseInt(hex.slice(1, 3), 16),
+			g = parseInt(hex.slice(3, 5), 16),
+			b = parseInt(hex.slice(5, 7), 16);
+		return "rgb(" + r + ", " + g + ", " + b + ")";
+	}
+
+	function colorRGBAToHex(rgba: string) {
+		const rgbaValues = rgba.match(/(\d+(\.\d+)?)/g);
+		const r = parseInt(rgbaValues[0]);
+		const g = parseInt(rgbaValues[1]);
+		const b = parseInt(rgbaValues[2]);
+		const hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
+		return hex;
+	}
+	
+    function draw() {
+		if (ctx) {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			if (image !== null){
+				ctx.drawImage(image, canvasXmin, canvasYmin, imageWidth, imageHeight);
+			}
+			for (const box of value.boxes.slice().reverse()) {
+				box.render(ctx);
+			}
+		}
+	}
+
+    function selectBox(index: number) {
+		selectedBox = index;
+		value.boxes.forEach(box => {box.setSelected(false);});
+		if (index >= 0 && index < value.boxes.length){
+			value.boxes[index].setSelected(true);
+		}
+		draw();
+	}
+
+    function handleMouseDown(event: MouseEvent) {
+		if (!interactive) {
+			return;
+		}
+
+		const rect = canvas.getBoundingClientRect();
+		const mouseX = event.clientX - rect.left;
+		const mouseY = event.clientY - rect.top;
+		
+		// Check if the mouse is over any of the resizing handles
+		for (const [i, box] of value.boxes.entries()) {
+			const handleIndex = box.indexOfPointInsideHandle(mouseX, mouseY);
+			if (handleIndex >= 0) {
+				selectBox(i);
+				box.startResize(handleIndex, event);
+				return;
+			}
+		}
+
+		// Check if the mouse is inside a box
+		for (const [i, box] of value.boxes.entries()) {
+			if (box.isPointInsideBox(mouseX, mouseY)) {
+				selectBox(i);
+				box.startDrag(event);
+				return;
+			}
+		}
+		selectBox(-1);
+	}
+
+    function handleMouseUp(event: MouseEvent) {
+		dispatch("change");
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (!interactive) {
+			return;
+		}
+
+		switch (event.key) {
+			case "Delete":
+				onDeleteBox();
+				break;
+		}
+	}
+
+    function onAddBox() {
+		newModalVisible = true;
+	}
+
+	function onModalNewChange(event) {
+		newModalVisible = false;
+		const { detail } = event;
+        let label = detail.label;
+        let color = detail.color;
+		let ok = detail.ok;
+		if (ok) {
+			if (color === null || color === "") {
+				color = Colors[value.boxes.length % Colors.length];
+			} else {
+				color = colorHexToRGB(color);
+			}
+			let box = new Box(
+				draw,
+				canvasXmin,
+				canvasYmin,
+				canvasXmax,
+				canvasYmax,
+				label,
+				Math.round(canvas.width / 3),
+				Math.round(canvas.height / 3),
+				Math.round((2*canvas.width) / 3),
+				Math.round((2*canvas.height) / 3),
+				color,
+				boxAlpha,
+				boxMinSize,
+				scaleFactor
+			);
+			value.boxes = [box, ...value.boxes];
+			draw();
+			dispatch("change");
+		}
+	}
+
+	function onEditBox() {
+		if (selectedBox >= 0 && selectedBox < value.boxes.length) {
+			editModalVisible = true;
+		}
+	}
+
+	function handleDoubleClick(event: MouseEvent){
+		if (!interactive) {
+			return;
+		}
+		
+		onEditBox();
+	}
+
+	function onModalEditChange(event) {
+		editModalVisible = false;
+		const { detail } = event;
+		let label = detail.label;
+		let color = detail.color;
+		let ok = detail.ok;
+		if (ok && selectedBox >= 0 && selectedBox < value.boxes.length) {
+			let box = value.boxes[selectedBox];
+			box.label = label;
+			box.color = colorHexToRGB(color);
+			draw();
+			dispatch("change");
+		}
+	}
+
+    function onDeleteBox() {
+		if (selectedBox >= 0 && selectedBox < value.boxes.length) {
+			value.boxes.splice(selectedBox, 1);
+			selectBox(-1);
+			dispatch("change");
+		}
+	}
+
+	function resize() {
+		if (canvas) {
+			scaleFactor = 1;
+			canvas.width = canvas.clientWidth;
+			if (image !== null) {
+				if (image.width > canvas.width) {
+					scaleFactor = canvas.width / image.width;
+					imageWidth = image.width * scaleFactor;
+					imageHeight = image.height * scaleFactor;
+					canvasXmin = 0;
+					canvasYmin = 0;
+					canvasXmax = imageWidth;
+					canvasYmax = imageHeight;
+					canvas.height = imageHeight;
+				} else {
+					imageWidth = image.width;
+					imageHeight = image.height;
+					var x = (canvas.width - imageWidth) / 2;
+					canvasXmin = x;
+					canvasYmin = 0;
+					canvasXmax = x + imageWidth;
+					canvasYmax = image.height;
+					canvas.height = imageHeight;
+				}
+			} else {
+				canvasXmin = 0;
+				canvasYmin = 0;
+				canvasXmax = canvas.width;
+				canvasYmax = canvas.height;
+				canvas.height = canvas.clientHeight;
+			}
+			if (canvasXmax > 0 && canvasYmax > 0){
+				for (const box of value.boxes) {
+					box.canvasXmin = canvasXmin;
+					box.canvasYmin = canvasYmin;
+					box.canvasXmax = canvasXmax;
+					box.canvasYmax = canvasYmax;
+					box.setScaleFactor(scaleFactor);
+				}
+			}
+			draw();
+			dispatch("change");
+		}
+	}
+	const observer = new ResizeObserver(resize);
+
+	function parseInputBoxes() {
+		let newBoxes = [];
+		for (let i = 0; i < value.boxes.length; i++) {
+			let box = value.boxes[i];
+			if (!(box instanceof Box)) {
+				let color = "";
+				let label = "";
+				if (box.hasOwnProperty("color")) {
+					color = box["color"];
+					if (Array.isArray(color) && color.length === 3) {
+            			color = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+        			}
+				} else {
+					color = Colors[newBoxes.length % Colors.length];
+				}
+				if (box.hasOwnProperty("label")) {
+					label = box["label"];
+				}
+				box = new Box(
+					draw,
+					canvasXmin,
+					canvasYmin,
+					canvasXmax,
+					canvasYmax,
+					label,
+					box["xmin"],
+					box["ymin"],
+					box["xmax"],
+					box["ymax"],
+					color,
+					boxAlpha,
+					boxMinSize,
+					scaleFactor
+				);
+			}
+			newBoxes.push(box);
+		}
+		value.boxes = newBoxes;
+	}
+
+	$: {
+		value;
+		parseInputBoxes();
+	}
+
+	onMount(() => {
+		if (Array.isArray(choices) && choices.length > 0) {
+			if (!Array.isArray(choicesColors) || choicesColors.length == 0) {
+				for (let i = 0; i < choices.length; i++) {
+					let color = Colors[i % Colors.length];
+					choicesColors.push(colorRGBAToHex(color));
+				}
+			}
+		}
+
+		ctx = canvas.getContext("2d");
+		observer.observe(canvas);
+
+		if (imageUrl !== null){
+			image = new Image();
+			image.src = imageUrl;
+			image.onload = function(){
+				resize();
+				draw();
+			}
+		}
+		resize();
+		draw();
+	});
+	
+	function handleCanvasFocus() {
+		document.addEventListener("keydown", handleKeyPress);
+	}
+	
+	function handleCanvasBlur() {
+		document.removeEventListener("keydown", handleKeyPress);
+	}
+
+	onDestroy(() => {
+		document.removeEventListener("keydown", handleKeyPress);
+  	});
+
+</script>
+
+<div
+	class="canvas-container"
+	tabindex="-1"
+	on:focusin={handleCanvasFocus}
+	on:focusout={handleCanvasBlur}
+>
+	<canvas
+		bind:this={canvas}
+		on:mousedown={handleMouseDown}
+		on:mouseup={handleMouseUp}
+		on:dblclick={handleDoubleClick}
+		class="canvas-annotator"
+	></canvas>
+</div>
+
+{#if interactive}
+	<span class="canvas-control">
+		<button
+			class="icon"
+			on:click={() => onAddBox()}><Add/></button
+		>
+		<button
+			class="icon"
+			on:click={() => onEditBox()}><Edit/></button
+		>
+		<button
+			class="icon"
+			on:click={() => onDeleteBox()}><Clear/></button
+		>
+	</span>
+{/if}
+
+{#if editModalVisible}
+	<ModalBox
+		on:change={onModalEditChange}
+		on:enter{onModalEditChange}
+		choices={choices}
+		choicesColors={choicesColors}
+		label={selectedBox >= 0 && selectedBox < value.boxes.length ? value.boxes[selectedBox].label : ""}
+		color={selectedBox >= 0 && selectedBox < value.boxes.length ? colorRGBAToHex(value.boxes[selectedBox].color) : ""}
+	/>
+{/if}
+
+{#if newModalVisible}
+	<ModalBox
+		on:change={onModalNewChange}
+		on:enter{onModalNewChange}
+		choices={choices}
+		choicesColors={choicesColors}
+		color={Array.isArray(choicesColors) && choicesColors.length > 0 ? choicesColors[0] : colorRGBAToHex(Colors[value.boxes.length % Colors.length])}
+	/>
+{/if}
+
+<style>
+    .canvas-annotator {
+        border-color: var(--block-border-color);
+		width: 100%;
+  		height: 100%;
+  		display: block;
+    }
+
+	.canvas-control {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-top: 1px solid var(--border-color-primary);
+		width: 95%;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: var(--size-2);
+	}
+
+	.icon {
+		width: 22px;
+		height: 22px;
+		margin: var(--spacing-lg) var(--spacing-xs);
+		padding: var(--spacing-xs);
+		color: var(--neutral-400);
+		border-radius: var(--radius-md);
+	}
+
+	.icon:hover,
+	.icon:focus {
+		color: var(--color-accent);
+	}
+	
+	.canvas-container:focus {
+    	outline: none;
+	}
+</style>
diff --git a/src/frontend/shared/ClearImage.svelte b/src/frontend/shared/ClearImage.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..87a2ea653568c054f3de129f2b3e5823cba4a6fa
--- /dev/null
+++ b/src/frontend/shared/ClearImage.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton } from "@gradio/atoms";
+	import { Clear } from "@gradio/icons";
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div>
+	<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/src/frontend/shared/Colors.js b/src/frontend/shared/Colors.js
new file mode 100644
index 0000000000000000000000000000000000000000..9ccaa2b2ceb0b582f40caf57bde631a7b538ff33
--- /dev/null
+++ b/src/frontend/shared/Colors.js
@@ -0,0 +1,15 @@
+export const Colors = [
+    "rgb(255, 168, 77)",
+    "rgb(92, 172, 238)",
+    "rgb(255, 99, 71)",
+    "rgb(118, 238, 118)",
+    "rgb(255, 145, 164)",
+    "rgb(0, 191, 255)",
+    "rgb(255, 218, 185)",
+    "rgb(255, 69, 0)",
+    "rgb(34, 139, 34)",
+    "rgb(255, 240, 245)",
+    "rgb(255, 193, 37)",
+    "rgb(255, 193, 7)",
+    "rgb(255, 250, 138)",
+];
diff --git a/src/frontend/shared/ImageAnnotator.svelte b/src/frontend/shared/ImageAnnotator.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9721f7d9b861a451463114415ed3ac2f4d752deb
--- /dev/null
+++ b/src/frontend/shared/ImageAnnotator.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Download, Image as ImageIcon } from "@gradio/icons";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+	import { uploadToHuggingFace } from "@gradio/utils";
+	import { BlockLabel, IconButton, ShareButton, SelectSource} from "@gradio/atoms";
+	import { Upload } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
+	import type { I18nFormatter, SelectData } from "@gradio/utils";
+	import { Clear } from "@gradio/icons";
+	import ImageCanvas from "./ImageCanvas.svelte";
+	import AnnotatedImageData from "./AnnotatedImageData";
+	
+	type source_type = "upload" | "clipboard" | null;
+
+	export let value: null | AnnotatedImageData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let sources: source_type[] = ["upload", "clipboard"];
+	export let selectable = false;
+	export let root: string;
+	export let interactive: boolean;
+	export let i18n: I18nFormatter;
+	export let showShareButton: boolean;
+	export let showDownloadButton: boolean;
+	export let showClearButton: boolean;
+	export let boxesAlpha;
+	export let labelList: string[];
+	export let labelColors: string[];
+	export let boxMinSize: number;
+
+	let upload: Upload;
+	let uploading = false;
+	export let active_source: source_type = null;
+
+	function handle_upload({ detail }: CustomEvent<FileData>): void {
+		value = new AnnotatedImageData();
+		value.image = detail;
+		dispatch("upload");
+	}
+
+	function handle_clear(): void {
+		clear();
+		dispatch("clear");
+		dispatch("change");
+	}
+
+	$: if (uploading) clear();
+
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		clear: undefined;
+		drag: boolean;
+		upload: undefined;
+		select: SelectData;
+	}>();
+
+	let dragging = false;
+
+	$: dispatch("drag", dragging);
+
+	$: if (!active_source && sources) {
+		active_source = sources[0];
+	}
+
+	async function handle_select_source(
+		source: (typeof sources)[number]
+	): Promise<void> {
+		switch (source) {
+			case "clipboard":
+				upload.paste_clipboard();
+				break;
+			default:
+				break;
+		}
+	}
+
+	function clear() {
+		value = null;
+	}
+</script>
+
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image Annotator"} />
+
+<div class="icon-buttons">
+	{#if showDownloadButton && value !== null}
+		<DownloadLink href={value.image.url} download={value.image.orig_name || "image"}>
+			<IconButton Icon={Download} label={i18n("common.download")} />
+		</DownloadLink>
+	{/if}
+	{#if showShareButton && value !== null}
+		<ShareButton
+			{i18n}
+			on:share
+			on:error
+			formatter={async (value) => {
+				if (value === null) return "";
+				let url = await uploadToHuggingFace(value.image, "base64");
+				// let url = await uploadToHuggingFace(value, "base64");
+				return `<img src="${url}" />`;
+			}}
+			{value}
+		/>
+	{/if}
+	{#if showClearButton && value !== null && interactive}
+		<div>
+			<IconButton
+				Icon={Clear}
+				label="Remove Image"
+				on:click={clear}
+			/>
+		</div>
+	{/if}
+</div>
+
+<div data-testid="image" class="image-container">
+	<div class="upload-container">
+		<Upload
+			hidden={value !== null}
+			bind:this={upload}
+			bind:uploading
+			bind:dragging
+			filetype={active_source === "clipboard" ? "clipboard" : "image/*"}
+			on:load={handle_upload}
+			on:error
+			{root}
+			disable_click={!sources.includes("upload")}
+		>
+			{#if value === null}
+				<slot />
+			{/if}
+		</Upload>
+		{#if value !== null}
+			<div class:selectable class="image-frame" >
+				<ImageCanvas
+					bind:value
+					on:change={() => dispatch("change")}
+					{boxesAlpha}
+					{labelList}
+					{labelColors}
+					{boxMinSize}
+					{interactive}
+					src={value.image.url}
+				/>
+			</div>
+		{/if}
+	</div>
+	{#if (sources.length > 1 || sources.includes("clipboard")) && value === null && interactive}
+		<SelectSource
+			{sources}
+			bind:active_source
+			{handle_clear}
+			handle_select={handle_select_source}
+		/>
+	{/if}
+</div>
+
+<style>
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+	}
+
+	.image-frame {
+		object-fit: cover;
+		width: 100%;
+	}
+
+	.upload-container {
+		height: 100%;
+		width: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		gap: var(--size-1);
+	}
+</style>
diff --git a/src/frontend/shared/ImageCanvas.svelte b/src/frontend/shared/ImageCanvas.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..386111763b576e35f95822ff5a150af41b4ed7cc
--- /dev/null
+++ b/src/frontend/shared/ImageCanvas.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+	import type { HTMLImgAttributes } from "svelte/elements";
+    import { createEventDispatcher } from "svelte";
+	import Canvas from "./Canvas.svelte"
+	import AnnotatedImageData from "./AnnotatedImageData";
+
+	interface Props extends HTMLImgAttributes {
+		"data-testid"?: string;
+	}
+
+	export let src: HTMLImgAttributes["src"] = undefined;
+	export let interactive: boolean;
+	export let boxesAlpha: number;
+	export let labelList: string[];
+	export let labelColors: string[];
+	export let boxMinSize: number;
+	export let value: null | AnnotatedImageData;
+
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
+		// without waiting for `resolve_wasm_src()` to resolve.
+		// If it waits, a blank image is displayed until the async task finishes
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
+
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+	}>();
+
+</script>
+
+<Canvas
+	bind:value
+	on:change={() => dispatch("change")}
+	{interactive}
+	boxAlpha={boxesAlpha}
+	choices={labelList}
+	choicesColors={labelColors}
+	{boxMinSize}
+	imageUrl={resolved_src}
+/>
diff --git a/src/frontend/shared/ModalBox.svelte b/src/frontend/shared/ModalBox.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2abbdf702ebd74e998ff67dd07bc01c81ac09222
--- /dev/null
+++ b/src/frontend/shared/ModalBox.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { BaseColorPicker } from "@gradio/colorpicker";
+    import { BaseButton } from "@gradio/button";
+    import { BaseDropdown } from "./patched_dropdown/Index.svelte";
+	import { createEventDispatcher } from "svelte";
+    import { onMount, onDestroy } from "svelte";
+
+    export let label = "";
+    export let choices = [];  // [(label, i)]
+    export let choicesColors = [];
+    export let color = "";
+    
+    const dispatch = createEventDispatcher<{
+		change: object;
+	}>();
+
+    function dispatchChange(ok: boolean) {
+        dispatch("change", {
+            label: label,
+            color: color,
+            ok: ok
+        });
+    }
+
+    function onDropDownChange(event) {
+        const { detail } = event;
+		let choice = detail;
+
+        if (Number.isInteger(choice)) {
+            if (Array.isArray(choicesColors) && choice < choicesColors.length) {
+                color = choicesColors[choice];
+            }
+            if (Array.isArray(choices) && choice < choices.length) {
+                label = choices[choice][0];
+            }
+        } else {
+            label = choice;
+        }
+    }
+
+    function onColorChange(event) {
+        const { detail } = event;
+		color = detail;
+    }
+
+    function onDropDownEnter(event) {
+        onDropDownChange(event);
+        dispatchChange(true);
+    }
+
+    function handleKeyPress(event: KeyboardEvent) {
+		switch (event.key) {
+			case "Enter":
+                dispatchChange(true);
+				break;
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("keydown", handleKeyPress);
+	});
+    
+	onDestroy(() => {
+        document.removeEventListener("keydown", handleKeyPress);
+  	});
+
+</script>
+
+<div class="modal" id="model-box-edit">
+    <div class="modal-container">
+        <span class="model-content">
+            <div style="margin-right: 10px;">
+                <BaseDropdown
+                    value={label}
+                    label="Label"
+                    {choices}
+                    show_label={false}
+                    allow_custom_value={true}
+                    on:change={onDropDownChange}
+                    on:enter={onDropDownEnter}
+                />
+            </div>
+            <div style="margin-right: 40px; margin-bottom: 8px;">
+                <BaseColorPicker
+                    value={color}
+                    label="Color"
+                    show_label={false}
+                    on:change={onColorChange}
+                />
+            </div>
+            <div style="margin-right: 8px;">
+                <BaseButton
+                on:click={() => dispatchChange(false)}
+                >Cancel</BaseButton>
+            </div>
+            <div>
+                <BaseButton
+                    variant="primary"
+                    on:click={() => dispatchChange(true)}
+                >OK</BaseButton>
+            </div>
+        </span>
+    </div>
+</div>
+
+<style>
+    .modal {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: var(--layer-top);
+        -webkit-backdrop-filter: blur(4px);
+        backdrop-filter: blur(4px);
+    }
+
+    .modal-container {
+        border-style: solid;
+        border-width: var(--block-border-width);
+        border-color: var(--block-border-color);
+        margin-top: 10%;
+        padding: 20px;
+        box-shadow: var(--block-shadow);
+        border-color: var(--block-border-color);
+        border-radius: var(--block-radius);
+        background: var(--block-background-fill);
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        width: fit-content;
+    }
+
+    .model-content {
+        display: flex;
+        align-items: flex-end;
+    }
+</style>
diff --git a/src/frontend/shared/icons/Add.svelte b/src/frontend/shared/icons/Add.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..799c0df8dd646e6798a0f66098dc49970f93c111
--- /dev/null
+++ b/src/frontend/shared/icons/Add.svelte
@@ -0,0 +1,14 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	stroke="currentColor"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
+>
+	<line x1="4" y1="12" x2="20" y2="12" style="fill:none;stroke-width:2px;"/>
+	<line x1="12" y1="4" x2="12" y2="20" style="fill:none;stroke-width:2px;"/>
+</svg>
diff --git a/src/frontend/shared/icons/index.ts b/src/frontend/shared/icons/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b8f00635c3daefde423fc94ab61706f883ea072
--- /dev/null
+++ b/src/frontend/shared/icons/index.ts
@@ -0,0 +1 @@
+export { default as Add } from "./Add.svelte";
\ No newline at end of file
diff --git a/src/frontend/shared/index.ts b/src/frontend/shared/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8829ff3b15974f15ea25fb40e3565187ae65158
--- /dev/null
+++ b/src/frontend/shared/index.ts
@@ -0,0 +1 @@
+export { default as Image } from "./Image.svelte";
diff --git a/src/frontend/shared/patched_dropdown/CHANGELOG.md b/src/frontend/shared/patched_dropdown/CHANGELOG.md
new file mode 100644
index 0000000000000000000000000000000000000000..f5b5165d7809f670895c1243bc4e5a8ce5085daf
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/CHANGELOG.md
@@ -0,0 +1,246 @@
+# @gradio/dropdown
+
+## 0.6.3
+
+### Fixes
+
+- [#7567](https://github.com/gradio-app/gradio/pull/7567) [`e340894`](https://github.com/gradio-app/gradio/commit/e340894b1cf2f44dd45e597fd8d9e547f408fbb3) - Quick fix: custom dropdown value.  Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
+
+## 0.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`98a2719`](https://github.com/gradio-app/gradio/commit/98a2719bfb9c64338caf9009891b6c6b0b33ea89)]:
+  - @gradio/statustracker@0.4.8
+
+## 0.6.1
+
+### Features
+
+- [#7425](https://github.com/gradio-app/gradio/pull/7425) [`3e4e680`](https://github.com/gradio-app/gradio/commit/3e4e680a52ba5a73c108ef1b328dacd7b6e4b566) - Fixes to the `.key_up()` method to make it usable for a dynamic dropdown autocomplete. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+### Fixes
+
+- [#7431](https://github.com/gradio-app/gradio/pull/7431) [`6b8a7e5`](https://github.com/gradio-app/gradio/commit/6b8a7e5d36887cdfcfbfec1536a915128df0d6b2) - Ensure `gr.Dropdown` can have an empty initial value. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.6.0
+
+### Fixes
+
+- [#7404](https://github.com/gradio-app/gradio/pull/7404) [`065c5b1`](https://github.com/gradio-app/gradio/commit/065c5b163c4badb9d9cbd06d627fb4ba086003e7) - Add `.key_up` event listener to `gr.Dropdown()`. Thanks [@abidlabs](https://github.com/abidlabs)!
+- [#7401](https://github.com/gradio-app/gradio/pull/7401) [`dff4109`](https://github.com/gradio-app/gradio/commit/dff410955e41145848376784c03fe28ba1c4fd85) - Retain dropdown value if choices have been changed. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.5.2
+
+### Fixes
+
+- [#7192](https://github.com/gradio-app/gradio/pull/7192) [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739) - Handle the case where examples is `null` for all components. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.5.1
+
+### Fixes
+
+- [#7081](https://github.com/gradio-app/gradio/pull/7081) [`44c53d9`](https://github.com/gradio-app/gradio/commit/44c53d9bde7cab605b7dbd16331683d13cae029e) - Fix dropdown refocusing due to `<label />` element. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.5.0
+
+### Fixes
+
+- [#6933](https://github.com/gradio-app/gradio/pull/6933) [`9cefd2e`](https://github.com/gradio-app/gradio/commit/9cefd2e90a1d0cc4d3e4e953fc5b9b1a7afb68dd) - Refactor examples so they accept data in the same format as is returned by function, rename `.as_example()` to `.process_example()`. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.4.3
+
+### Patch Changes
+
+- Updated dependencies [[`828fb9e`](https://github.com/gradio-app/gradio/commit/828fb9e6ce15b6ea08318675a2361117596a1b5d), [`73268ee`](https://github.com/gradio-app/gradio/commit/73268ee2e39f23ebdd1e927cb49b8d79c4b9a144)]:
+  - @gradio/statustracker@0.4.3
+  - @gradio/atoms@0.4.1
+
+## 0.4.2
+
+### Features
+
+- [#6399](https://github.com/gradio-app/gradio/pull/6399) [`053bec9`](https://github.com/gradio-app/gradio/commit/053bec98be1127e083414024e02cf0bebb0b5142) - Improve CSS token documentation in Storybook. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+### Fixes
+
+- [#6694](https://github.com/gradio-app/gradio/pull/6694) [`dfc61ec`](https://github.com/gradio-app/gradio/commit/dfc61ec4d09da72ddd6e7ab726820529621dbd38) - Fix dropdown blur bug when values are provided as tuples. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`206af31`](https://github.com/gradio-app/gradio/commit/206af31d7c1a31013364a44e9b40cf8df304ba50)]:
+  - @gradio/icons@0.3.1
+  - @gradio/atoms@0.3.1
+  - @gradio/statustracker@0.4.1
+
+## 0.4.0
+
+### Features
+
+- [#6517](https://github.com/gradio-app/gradio/pull/6517) [`901f3eebd`](https://github.com/gradio-app/gradio/commit/901f3eebda0a67fa8f3050d80f7f7b5800c7f566) - Allow reselecting the original option in `gr.Dropdown` after value has changed programmatically. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.3.3
+
+### Patch Changes
+
+- Updated dependencies [[`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8)]:
+  - @gradio/atoms@0.3.0
+  - @gradio/icons@0.3.0
+  - @gradio/statustracker@0.4.0
+
+## 0.3.2
+
+### Fixes
+
+- [#6425](https://github.com/gradio-app/gradio/pull/6425) [`b3ba17dd1`](https://github.com/gradio-app/gradio/commit/b3ba17dd1167d254756d93f1fb01e8be071819b6) - Update the selected indices in `Dropdown` when value changes programmatically. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`3cdeabc68`](https://github.com/gradio-app/gradio/commit/3cdeabc6843000310e1a9e1d17190ecbf3bbc780), [`fad92c29d`](https://github.com/gradio-app/gradio/commit/fad92c29dc1f5cd84341aae417c495b33e01245f)]:
+  - @gradio/atoms@0.2.1
+  - @gradio/statustracker@0.3.1
+
+## 0.3.0
+
+### Features
+
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Publish all components to npm. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.8
+
+### Features
+
+- [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend. Thanks [@pngwn](https://github.com/pngwn)!
+
+### Fixes
+
+- [#6148](https://github.com/gradio-app/gradio/pull/6148) [`0000a1916`](https://github.com/gradio-app/gradio/commit/0000a191688c5480c977c80acdd0c9023865d57e) - fix dropdown arrow size. Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.7
+
+### Features
+
+- [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+### Fixes
+
+- [#6065](https://github.com/gradio-app/gradio/pull/6065) [`7d07001e8`](https://github.com/gradio-app/gradio/commit/7d07001e8e7ca9cbd2251632667b3a043de49f49) - fix storybook. Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.6
+
+### 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)!
+- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+## 0.3.3
+
+### Fixes
+
+- [#5839](https://github.com/gradio-app/gradio/pull/5839) [`b83064da0`](https://github.com/gradio-app/gradio/commit/b83064da0005ca055fc15ee478cf064bf91702a4) - Fix error when scrolling dropdown with scrollbar. Thanks [@Kit-p](https://github.com/Kit-p)!
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @gradio/utils@0.1.2
+  - @gradio/atoms@0.1.4
+  - @gradio/statustracker@0.2.2
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
+  - @gradio/icons@0.2.0
+  - @gradio/atoms@0.1.3
+  - @gradio/statustracker@0.2.1
+
+## 0.3.0
+
+### Features
+
+- [#5554](https://github.com/gradio-app/gradio/pull/5554) [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423) - Accessibility Improvements. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.2.2
+
+### Fixes
+
+- [#5544](https://github.com/gradio-app/gradio/pull/5544) [`a0cc9ac9`](https://github.com/gradio-app/gradio/commit/a0cc9ac931554e06dcb091158c9b9ac0cc580b6c) - Fixes dropdown breaking if a user types in invalid value and presses enter. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.2.1
+
+### Fixes
+
+- [#5525](https://github.com/gradio-app/gradio/pull/5525) [`21f1db40`](https://github.com/gradio-app/gradio/commit/21f1db40de6d1717eba97a550e11422a457ba7e9) - Ensure input value saves on dropdown blur. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.2.0
+
+### Features
+
+- [#5384](https://github.com/gradio-app/gradio/pull/5384) [`ddc02268`](https://github.com/gradio-app/gradio/commit/ddc02268f731bd2ed04b7a5854accf3383f9a0da) - Allows the `gr.Dropdown` to have separate names and values, as well as enables `allow_custom_value` for multiselect dropdown. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+### Fixes
+
+- [#5508](https://github.com/gradio-app/gradio/pull/5508) [`05715f55`](https://github.com/gradio-app/gradio/commit/05715f5599ae3e928d3183c7b0a7f5291f843a96) - Adds a `filterable` parameter to `gr.Dropdown` that controls whether user can type to filter choices. Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`afac0006`](https://github.com/gradio-app/gradio/commit/afac0006337ce2840cf497cd65691f2f60ee5912)]:
+  - @gradio/statustracker@0.2.0
+  - @gradio/utils@0.1.1
+  - @gradio/atoms@0.1.2
+
+## 0.1.2
+
+### Fixes
+
+- [#5360](https://github.com/gradio-app/gradio/pull/5360) [`64666525`](https://github.com/gradio-app/gradio/commit/6466652583e3c620df995fb865ef3511a34cb676) - Cancel Dropdown Filter. Thanks [@deckar01](https://github.com/deckar01)!
+
+## 0.1.1
+
+### Fixes
+
+- [#5323](https://github.com/gradio-app/gradio/pull/5323) [`e32b0928`](https://github.com/gradio-app/gradio/commit/e32b0928d2d00342ca917ebb10c379ffc2ec200d) - ensure dropdown stays open when identical data is passed in. Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.1.0
+
+### Highlights
+
+#### Improve startup performance and markdown support ([#5279](https://github.com/gradio-app/gradio/pull/5279) [`fe057300`](https://github.com/gradio-app/gradio/commit/fe057300f0672c62dab9d9b4501054ac5d45a4ec))
+
+##### Improved markdown support
+
+We now have better support for markdown in `gr.Markdown` and `gr.Dataframe`. Including syntax highlighting and Github Flavoured Markdown. We also have more consistent markdown behaviour and styling.
+
+##### Various performance improvements
+
+These improvements will be particularly beneficial to large applications.
+
+- Rather than attaching events manually, they are now delegated, leading to a significant performance improvement and addressing a performance regression introduced in a recent version of Gradio. App startup for large applications is now around twice as fast.
+- Optimised the mounting of individual components, leading to a modest performance improvement during startup (~30%).
+- Corrected an issue that was causing markdown to re-render infinitely.
+- Ensured that the `gr.3DModel` does re-render prematurely.
+
+Thanks [@pngwn](https://github.com/pngwn)!
+
+### Features
+
+- [#5215](https://github.com/gradio-app/gradio/pull/5215) [`fbdad78a`](https://github.com/gradio-app/gradio/commit/fbdad78af4c47454cbb570f88cc14bf4479bbceb) - Lazy load interactive or static variants of a component individually, rather than loading both variants regardless. This change will improve performance for many applications. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5216](https://github.com/gradio-app/gradio/pull/5216) [`4b58ea6d`](https://github.com/gradio-app/gradio/commit/4b58ea6d98e7a43b3f30d8a4cb6f379bc2eca6a8) - Update i18n tokens and locale files. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.0.2
+
+### Fixes
+
+- [#5062](https://github.com/gradio-app/gradio/pull/5062) [`7d897165`](https://github.com/gradio-app/gradio/commit/7d89716519d0751072792c9bbda668ffeb597296) - `gr.Dropdown` now has correct behavior in static mode as well as when an option is selected. Thanks [@abidlabs](https://github.com/abidlabs)!
+- [#5039](https://github.com/gradio-app/gradio/pull/5039) [`620e4645`](https://github.com/gradio-app/gradio/commit/620e46452729d6d4877b3fab84a65daf2f2b7bc6) - `gr.Dropdown()` now supports values with arbitrary characters and doesn't clear value when re-focused. Thanks [@abidlabs](https://github.com/abidlabs)!
\ No newline at end of file
diff --git a/src/frontend/shared/patched_dropdown/Dropdown.stories.svelte b/src/frontend/shared/patched_dropdown/Dropdown.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..29873aead23e2c5338d5d50e6dec0b8098121577
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/Dropdown.stories.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Dropdown from "./shared/Dropdown.svelte";
+</script>
+
+<Meta
+	title="Components/Dropdown"
+	component={Dropdown}
+	argTypes={{
+		multiselect: {
+			control: [true, false],
+			description: "Whether to autoplay the video on load",
+			name: "multiselect",
+			value: false
+		}
+	}}
+/>
+
+<Template let:args>
+	<Dropdown {...args} />
+</Template>
+
+<Story
+	name="Single-select"
+	args={{
+		value: "swim",
+		choices: [
+			["run", "run"],
+			["swim", "swim"],
+			["jump", "jump"]
+		],
+		label: "Single-select Dropdown"
+	}}
+/>
+<Story
+	name="Single-select Static"
+	args={{
+		value: "swim",
+		choices: [
+			["run", "run"],
+			["swim", "swim"],
+			["jump", "jump"]
+		],
+		disabled: true,
+		label: "Single-select Dropdown"
+	}}
+/>
+
+<Story
+	name="Empty initial value"
+	args={{
+		interactive: true,
+		choices: [
+			["run", "run"],
+			["swim", "swim"],
+			["jump", "jump"]
+		],
+		label: "Empty Dropdown"
+	}}
+/>
diff --git a/src/frontend/shared/patched_dropdown/Example.svelte b/src/frontend/shared/patched_dropdown/Example.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..961878e7a4331e819216894ad00ba2958ffc8720
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/Example.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let value: string | string[] | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+	export let choices: [string, string | number][];
+
+	let value_array = value ? (Array.isArray(value) ? value : [value]) : [];
+	let names = value_array
+		.map(
+			(val) =>
+				(
+					choices.find((pair) => pair[1] === val) as
+						| [string, string | number]
+						| undefined
+				)?.[0]
+		)
+		.filter((name) => name !== undefined);
+	let names_string = names.join(", ");
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{names_string}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>
diff --git a/src/frontend/shared/patched_dropdown/Index.svelte b/src/frontend/shared/patched_dropdown/Index.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a8d9c0b2fcae9789a1ad0618b1772312973c4aa5
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/Index.svelte
@@ -0,0 +1,99 @@
+<script context="module" lang="ts">
+	export { default as BaseDropdown } from "./shared/Dropdown.svelte";
+	export { default as BaseMultiselect } from "./shared/Multiselect.svelte";
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio, KeyUpData, SelectData } from "@gradio/utils";
+	import Multiselect from "./shared/Multiselect.svelte";
+	import Dropdown from "./shared/Dropdown.svelte";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let label = "Dropdown";
+	export let info: string | undefined = undefined;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: string | string[] | undefined = undefined;
+	export let value_is_output = false;
+	export let multiselect = false;
+	export let max_choices: number | null = null;
+	export let choices: [string, string | number][];
+	export let show_label: boolean;
+	export let filterable: boolean;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let allow_custom_value = false;
+	export let gradio: Gradio<{
+		change: never;
+		input: never;
+		select: SelectData;
+		blur: never;
+		focus: never;
+		key_up: KeyUpData;
+	}>;
+	export let interactive: boolean;
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	{elem_classes}
+	padding={container}
+	allow_overflow={false}
+	{scale}
+	{min_width}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+
+	{#if multiselect}
+		<Multiselect
+			bind:value
+			bind:value_is_output
+			{choices}
+			{max_choices}
+			{label}
+			{info}
+			{show_label}
+			{allow_custom_value}
+			{filterable}
+			{container}
+			i18n={gradio.i18n}
+			on:change={() => gradio.dispatch("change")}
+			on:input={() => gradio.dispatch("input")}
+			on:select={(e) => gradio.dispatch("select", e.detail)}
+			on:blur={() => gradio.dispatch("blur")}
+			on:focus={() => gradio.dispatch("focus")}
+			on:key_up={() => gradio.dispatch("key_up")}
+			disabled={!interactive}
+		/>
+	{:else}
+		<Dropdown
+			bind:value
+			bind:value_is_output
+			{choices}
+			{label}
+			{info}
+			{show_label}
+			{filterable}
+			{allow_custom_value}
+			{container}
+			on:change={() => gradio.dispatch("change")}
+			on:input={() => gradio.dispatch("input")}
+			on:select={(e) => gradio.dispatch("select", e.detail)}
+			on:blur={() => gradio.dispatch("blur")}
+			on:focus={() => gradio.dispatch("focus")}
+			on:key_up={(e) => gradio.dispatch("key_up", e.detail)}
+			disabled={!interactive}
+		/>
+	{/if}
+</Block>
diff --git a/src/frontend/shared/patched_dropdown/LICENSE b/src/frontend/shared/patched_dropdown/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..261eeb9e9f8b2b4b0d119366dda99c6fd7d35c64
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/src/frontend/shared/patched_dropdown/Multiselect.stories.svelte b/src/frontend/shared/patched_dropdown/Multiselect.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5064134e2819ea15faa598795b28e6de3fe10287
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/Multiselect.stories.svelte
@@ -0,0 +1,48 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Multiselect from "./shared/Multiselect.svelte";
+	import { format } from "svelte-i18n";
+	import { get } from "svelte/store";
+</script>
+
+<Meta
+	title="Components/Multiselect"
+	component={Multiselect}
+	argTypes={{
+		multiselect: {
+			control: [true, false],
+			name: "multiselect",
+			value: false
+		}
+	}}
+/>
+
+<Template let:args>
+	<Multiselect {...args} i18n={get(format)} />
+</Template>
+
+<Story
+	name="Multiselect Interactive"
+	args={{
+		value: ["swim", "run"],
+		choices: [
+			["run", "run"],
+			["swim", "swim"],
+			["jump", "jump"]
+		],
+		label: "Multiselect Dropdown"
+	}}
+/>
+<Story
+	name="Multiselect Static"
+	args={{
+		value: ["swim", "run"],
+		choices: [
+			["run", "run"],
+			["swim", "swim"],
+			["jump", "jump"]
+		],
+		label: "Multiselect Dropdown",
+		disabled: true
+	}}
+/>
diff --git a/src/frontend/shared/patched_dropdown/README.md b/src/frontend/shared/patched_dropdown/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..a6cee51ddcbf05f7a5a348c0fe5d7ce3a6e086ee
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/README.md
@@ -0,0 +1,44 @@
+# `@gradio/dropdown`
+
+```html
+<script>
+    import {BaseDropdown, BaseMultiselect, BaseExample } from "@gradio/dropdown";
+</script>
+```
+
+BaseDropdown
+```javascript
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let value: string | number | (string | number)[] | undefined = [];
+	export let value_is_output = false;
+	export let choices: [string, string | number][];
+	export let disabled = false;
+	export let show_label: boolean;
+	export let container = true;
+	export let allow_custom_value = false;
+	export let filterable = true;
+```
+
+BaseMultiselect
+```javascript
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let value: string | number | (string | number)[] | undefined = [];
+	export let value_is_output = false;
+	export let max_choices: number | null = null;
+	export let choices: [string, string | number][];
+	export let disabled = false;
+	export let show_label: boolean;
+	export let container = true;
+	export let allow_custom_value = false;
+	export let filterable = true;
+	export let i18n: I18nFormatter;
+```
+
+BaseExample
+```javascript
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;    
+```
\ No newline at end of file
diff --git a/src/frontend/shared/patched_dropdown/dropdown.test.ts b/src/frontend/shared/patched_dropdown/dropdown.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34596ba2b085667710beac86d014424ee84fde4e
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/dropdown.test.ts
@@ -0,0 +1,515 @@
+import { test, describe, assert, afterEach, vi } from "vitest";
+import { cleanup, render } from "@gradio/tootils";
+import event from "@testing-library/user-event";
+import { setupi18n } from "../app/src/i18n";
+
+import Dropdown from "./Index.svelte";
+import type { LoadingStatus } from "@gradio/statustracker";
+
+const loading_status: LoadingStatus = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete" as LoadingStatus["status"],
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full"
+};
+
+describe("Dropdown", () => {
+	afterEach(() => {
+		cleanup();
+		vi.useRealTimers();
+	});
+	beforeEach(() => {
+		setupi18n();
+	});
+	test("renders provided value", async () => {
+		const { getByLabelText } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: null,
+			value: "choice",
+			label: "Dropdown",
+			choices: [
+				["choice", "choice"],
+				["choice2", "choice2"]
+			],
+			filterable: false,
+			interactive: false
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		assert.equal(item.value, "choice");
+	});
+
+	test("selecting the textbox should show the options", async () => {
+		const { getByLabelText, getAllByTestId } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "choice",
+			label: "Dropdown",
+			choices: [
+				["choice", "choice"],
+				["name2", "choice2"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(2);
+		expect(options[0]).toContainHTML("choice");
+		expect(options[1]).toContainHTML("name2");
+	});
+
+	test("editing the textbox value should trigger the type event and filter the options", async () => {
+		const { getByLabelText, listen, getAllByTestId } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "",
+			label: "Dropdown",
+			choices: [
+				["apple", "apple"],
+				["zebra", "zebra"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const key_up_event = listen("key_up");
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(2);
+
+		item.value = "";
+		await event.keyboard("z");
+
+		const options_new = getAllByTestId("dropdown-option");
+
+		await expect(options_new).toHaveLength(1);
+		await expect(options[0]).toContainHTML("zebra");
+		await assert.equal(key_up_event.callCount, 1);
+	});
+
+	test("blurring the textbox should cancel the filter", async () => {
+		const { getByLabelText, listen } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: "default",
+			label: "Dropdown",
+			max_choices: undefined,
+			choices: [
+				["default", "default"],
+				["other", "other"]
+			],
+			filterable: false,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		item.focus();
+		await event.keyboard("other");
+	});
+
+	test("blurring the textbox should save the input value", async () => {
+		const { getByLabelText, listen } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: "new ",
+			label: "Dropdown",
+			max_choices: undefined,
+			allow_custom_value: true,
+			choices: [
+				["dwight", "dwight"],
+				["michael", "michael"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		const change_event = listen("change");
+
+		item.focus();
+		await event.keyboard("kevin");
+		await item.blur();
+
+		assert.equal(item.value, "new kevin");
+		assert.equal(change_event.callCount, 1);
+	});
+
+	test("focusing the label should toggle the options", async () => {
+		const { getByLabelText, listen } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: "default",
+			label: "Dropdown",
+			choices: [
+				["default", "default"],
+				["other", "other"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		const blur_event = listen("blur");
+		const focus_event = listen("focus");
+
+		item.focus();
+		item.blur();
+
+		assert.equal(blur_event.callCount, 1);
+		assert.equal(focus_event.callCount, 1);
+	});
+
+	test("deselecting and reselcting a filtered dropdown should show all options again", async () => {
+		vi.useFakeTimers();
+		const { getByLabelText, getAllByTestId } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "",
+			label: "Dropdown",
+			choices: [
+				["apple", "apple"],
+				["zebra", "zebra"],
+				["pony", "pony"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		item.focus();
+		item.value = "";
+		await event.keyboard("z");
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(1);
+
+		await item.blur();
+		// Mock 100ms delay between interactions.
+		vi.runAllTimers();
+		await item.focus();
+		const options_new = getAllByTestId("dropdown-option");
+
+		expect(options_new).toHaveLength(3);
+	});
+
+	test("passing in a new set of identical choices when the dropdown is open should not filter the dropdown", async () => {
+		const { getByLabelText, getAllByTestId, component } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				value: "",
+				label: "Dropdown",
+				choices: [
+					["apple", "apple"],
+					["zebra", "zebra"],
+					["pony", "pony"]
+				],
+				filterable: true,
+				interactive: true
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(3);
+
+		component.$set({
+			value: "",
+			choices: [
+				["apple", "apple"],
+				["zebra", "zebra"],
+				["pony", "pony"]
+			]
+		});
+
+		item.focus();
+
+		const options_new = getAllByTestId("dropdown-option");
+		expect(options_new).toHaveLength(3);
+	});
+
+	test("setting a custom value when allow_custom_choice is false should revert to the first valid choice", async () => {
+		const { getByLabelText, getAllByTestId, component } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				value: "",
+				allow_custom_value: false,
+				label: "Dropdown",
+				choices: [
+					["apple", "apple"],
+					["zebra", "zebra"],
+					["pony", "pony"]
+				],
+				filterable: true,
+				interactive: true
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		await event.keyboard("pie");
+		expect(item.value).toBe("applepie");
+		await item.blur();
+		expect(item.value).toBe("apple");
+	});
+
+	test("setting a custom value when allow_custom_choice is true should keep the value", async () => {
+		const { getByLabelText, getAllByTestId, component } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				value: "",
+				allow_custom_value: true,
+				label: "Dropdown",
+				choices: [
+					["apple", "apple"],
+					["zebra", "zebra"],
+					["pony", "pony"]
+				],
+				filterable: true,
+				interactive: true
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		await event.keyboard("pie");
+		expect(item.value).toBe("applepie");
+		await item.blur();
+		expect(item.value).toBe("applepie");
+	});
+
+	test("setting a value should update the displayed value and selected indices", async () => {
+		const { getByLabelText, getAllByTestId, component } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				value: "",
+				allow_custom_value: false,
+				label: "Dropdown",
+				choices: [
+					["apple", "apple"],
+					["zebra", "zebra"],
+					["pony", "pony"]
+				],
+				filterable: true,
+				interactive: true
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		expect(item.value).toBe("apple");
+		await item.focus();
+		let options = getAllByTestId("dropdown-option");
+		expect(options[0]).toHaveClass("selected");
+
+		await component.$set({ value: "zebra" });
+		expect(item.value).toBe("zebra");
+		options = getAllByTestId("dropdown-option");
+		expect(options[0]).toHaveClass("selected");
+
+		await component.$set({ value: undefined });
+		expect(item.value).toBe("");
+		options = getAllByTestId("dropdown-option");
+		expect(options[0]).not.toHaveClass("selected");
+
+		await component.$set({ value: "zebra" });
+		expect(item.value).toBe("zebra");
+		options = getAllByTestId("dropdown-option");
+		expect(options[0]).toHaveClass("selected");
+	});
+
+	test("blurring a dropdown should set the input text to the previously selected value", async () => {
+		const { getByLabelText, getAllByTestId, component } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				value: "",
+				allow_custom_value: false,
+				label: "Dropdown",
+				choices: [
+					["apple", "apple_internal_value"],
+					["zebra", "zebra_internal_value"],
+					["pony", "pony_internal_value"]
+				],
+				filterable: true,
+				interactive: true
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		expect(item.value).toBe("apple");
+		await item.focus();
+		let options = getAllByTestId("dropdown-option");
+		expect(options[0]).toHaveClass("selected");
+		await item.blur();
+		expect(item.value).toBe("apple");
+
+		await item.focus();
+		await event.keyboard("z");
+		expect(item.value).toBe("applez");
+		await item.blur();
+		expect(item.value).toBe("apple");
+	});
+
+	test("updating choices should keep the dropdown focus-able and change the value appropriately if custom values are not allowed", async () => {
+		const { getByLabelText, component } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: "apple_internal_value",
+			allow_custom_value: false,
+			label: "Dropdown",
+			choices: [
+				["apple_choice", "apple_internal_value"],
+				["zebra_choice", "zebra_internal_value"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await expect(item.value).toBe("apple_choice");
+
+		component.$set({
+			choices: [
+				["apple_new_choice", "apple_internal_value"],
+				["zebra_new_choice", "zebra_internal_value"]
+			]
+		});
+
+		await item.focus();
+		await item.blur();
+		await expect(item.value).toBe("apple_new_choice");
+	});
+
+	test("updating choices should not reset the value if custom values are allowed", async () => {
+		const { getByLabelText, component } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: "apple_internal_value",
+			allow_custom_value: true,
+			label: "Dropdown",
+			choices: [
+				["apple_choice", "apple_internal_value"],
+				["zebra_choice", "zebra_internal_value"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await expect(item.value).toBe("apple_choice");
+
+		component.$set({
+			choices: [
+				["apple_new_choice", "apple_internal_value"],
+				["zebra_new_choice", "zebra_internal_value"]
+			]
+		});
+
+		await expect(item.value).toBe("apple_choice");
+	});
+
+	test("ensure dropdown can have an empty value", async () => {
+		const { getByLabelText } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			allow_custom_value: false,
+			label: "Dropdown",
+			choices: [
+				["apple_choice", "apple_internal_value"],
+				["zebra_choice", "zebra_internal_value"]
+			],
+			filterable: true,
+			interactive: true
+		});
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		await expect(item.value).toBe("");
+	});
+
+	test("ensure dropdown works when initial value is undefined and allow custom value is set", async () => {
+		const { getByLabelText } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: undefined,
+			allow_custom_value: true,
+			label: "Dropdown",
+			choices: [
+				["apple_choice", "apple_internal_value"],
+				["zebra_choice", "zebra_internal_value"]
+			],
+			filterable: true,
+			interactive: true
+		});
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		await expect(item.value).toBe("");
+	});
+});
diff --git a/src/frontend/shared/patched_dropdown/package.json b/src/frontend/shared/patched_dropdown/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..1047039a3a91bdad712b656724fbadb5adb81cf7
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@gradio/dropdown",
+  "version": "0.6.3",
+  "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.5.3",
+    "@gradio/icons": "^0.3.3",
+    "@gradio/statustracker": "^0.4.8",
+    "@gradio/utils": "^0.3.0"
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/shared/patched_dropdown/shared/Dropdown.svelte b/src/frontend/shared/patched_dropdown/shared/Dropdown.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6abea14e922bbad0f6f3a38b5d252af866f8d590
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/shared/Dropdown.svelte
@@ -0,0 +1,326 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+	import DropdownOptions from "./DropdownOptions.svelte";
+	import { createEventDispatcher, afterUpdate } from "svelte";
+	import { BlockTitle } from "@gradio/atoms";
+	import { DropdownArrow } from "@gradio/icons";
+	import type { SelectData, KeyUpData } from "@gradio/utils";
+	import { handle_filter, handle_change, handle_shared_keys } from "./utils";
+
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let value: string | number | (string | number)[] | undefined = [];
+	let old_value: string | number | (string | number)[] | undefined = [];
+	export let value_is_output = false;
+	export let choices: [string, string | number][];
+	let old_choices: [string, string | number][];
+	export let disabled = false;
+	export let show_label: boolean;
+	export let container = true;
+	export let allow_custom_value = false;
+	export let filterable = true;
+
+	let filter_input: HTMLElement;
+
+	let show_options = false;
+	let choices_names: string[];
+	let choices_values: (string | number)[];
+	let input_text = "";
+	let old_input_text = "";
+	let initialized = false;
+
+	// All of these are indices with respect to the choices array
+	let filtered_indices: number[] = [];
+	let active_index: number | null = null;
+	// selected_index is null if allow_custom_value is true and the input_text is not in choices_names
+	let selected_index: number | null = null;
+	let old_selected_index: number | null;
+
+	const dispatch = createEventDispatcher<{
+		change: string | undefined;
+		input: undefined;
+		select: SelectData;
+		blur: undefined;
+		focus: undefined;
+		key_up: KeyUpData;
+		enter: any;
+	}>();
+
+	// Setting the initial value of the dropdown
+	if (value) {
+		old_selected_index = choices.map((c) => c[1]).indexOf(value as string);
+		selected_index = old_selected_index;
+		if (selected_index === -1) {
+			old_value = value;
+			selected_index = null;
+		} else {
+			[input_text, old_value] = choices[selected_index];
+			old_input_text = input_text;
+		}
+		set_input_text();
+	} else if (choices.length > 0) {
+		old_selected_index = 0;
+		selected_index = 0;
+		[input_text, value] = choices[selected_index];
+		old_value = value;
+		old_input_text = input_text;
+	}
+
+	$: {
+		if (
+			selected_index !== old_selected_index &&
+			selected_index !== null &&
+			initialized
+		) {
+			[input_text, value] = choices[selected_index];
+			old_selected_index = selected_index;
+			dispatch("select", {
+				index: selected_index,
+				value: choices_values[selected_index],
+				selected: true
+			});
+		}
+	}
+
+	$: {
+		if (value != old_value) {
+			set_input_text();
+			handle_change(dispatch, value, value_is_output);
+			old_value = value;
+		}
+	}
+
+	function set_choice_names_values(): void {
+		choices_names = choices.map((c) => c[0]);
+		choices_values = choices.map((c) => c[1]);
+	}
+
+	$: choices, set_choice_names_values();
+
+	$: {
+		if (choices !== old_choices) {
+			if (!allow_custom_value) {
+				set_input_text();
+			}
+			old_choices = choices;
+			filtered_indices = handle_filter(choices, input_text);
+			if (!allow_custom_value && filtered_indices.length > 0) {
+				active_index = filtered_indices[0];
+			}
+			if (filter_input == document.activeElement) {
+				show_options = true;
+			}
+		}
+	}
+
+	$: {
+		if (input_text !== old_input_text) {
+			filtered_indices = handle_filter(choices, input_text);
+			old_input_text = input_text;
+			if (!allow_custom_value && filtered_indices.length > 0) {
+				active_index = filtered_indices[0];
+			}
+		}
+	}
+
+	function set_input_text(): void {
+		set_choice_names_values();
+		if (value === undefined || (Array.isArray(value) && value.length === 0)) {
+			input_text = "";
+			selected_index = null;
+		} else if (choices_values.includes(value as string)) {
+			input_text = choices_names[choices_values.indexOf(value as string)];
+			selected_index = choices_values.indexOf(value as string);
+		} else if (allow_custom_value) {
+			input_text = value as string;
+			selected_index = null;
+		} else {
+			input_text = "";
+			selected_index = null;
+		}
+		old_selected_index = selected_index;
+	}
+
+	function handle_option_selected(e: any): void {
+		selected_index = parseInt(e.detail.target.dataset.index);
+		if (isNaN(selected_index)) {
+			// This is the case when the user clicks on the scrollbar
+			selected_index = null;
+			return;
+		}
+		show_options = false;
+		active_index = null;
+		filter_input.blur();
+	}
+
+	function handle_focus(e: FocusEvent): void {
+		filtered_indices = choices.map((_, i) => i);
+		show_options = true;
+		dispatch("focus");
+	}
+
+	function handle_blur(): void {
+		if (!allow_custom_value) {
+			input_text = choices_names[choices_values.indexOf(value as string)];
+		} else {
+			value = input_text;
+		}
+		show_options = false;
+		active_index = null;
+		dispatch("blur");
+	}
+
+	function handle_key_down(e: KeyboardEvent): void {
+		[show_options, active_index] = handle_shared_keys(
+			e,
+			active_index,
+			filtered_indices
+		);
+		if (e.key === "Enter") {
+			if (active_index !== null) {
+				selected_index = active_index;
+				show_options = false;
+				filter_input.blur();
+				active_index = null;
+			} else if (choices_names.includes(input_text)) {
+				selected_index = choices_names.indexOf(input_text);
+				show_options = false;
+				active_index = null;
+				filter_input.blur();
+			} else if (allow_custom_value) {
+				value = input_text;
+				selected_index = null;
+				show_options = false;
+				active_index = null;
+				filter_input.blur();
+			}
+			dispatch("enter", value);
+		}
+	}
+
+	afterUpdate(() => {
+		value_is_output = false;
+		initialized = true;
+	});
+
+	onMount(() => {
+    	filter_input.focus();
+  	});
+</script>
+
+<div class:container>
+	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+
+	<div class="wrap">
+		<div class="wrap-inner" class:show_options>
+			<div class="secondary-wrap">
+				<input
+					role="listbox"
+					aria-controls="dropdown-options"
+					aria-expanded={show_options}
+					aria-label={label}
+					class="border-none"
+					class:subdued={!choices_names.includes(input_text) &&
+						!allow_custom_value}
+					{disabled}
+					autocomplete="off"
+					bind:value={input_text}
+					bind:this={filter_input}
+					on:keydown={handle_key_down}
+					on:keyup={(e) =>
+						dispatch("key_up", {
+							key: e.key,
+							input_value: input_text
+						})}
+					on:blur={handle_blur}
+					on:focus={handle_focus}
+					readonly={!filterable}
+				/>
+				{#if !disabled}
+					<div class="icon-wrap">
+						<DropdownArrow />
+					</div>
+				{/if}
+			</div>
+		</div>
+		<DropdownOptions
+			{show_options}
+			{choices}
+			{filtered_indices}
+			{disabled}
+			selected_indices={selected_index === null ? [] : [selected_index]}
+			{active_index}
+			on:change={handle_option_selected}
+		/>
+	</div>
+</div>
+
+<style>
+	.icon-wrap {
+		color: var(--body-text-color);
+		margin-right: var(--size-2);
+		width: var(--size-5);
+	}
+	.container {
+		height: 100%;
+	}
+	.container .wrap {
+		box-shadow: var(--input-shadow);
+		border: var(--input-border-width) solid var(--border-color-primary);
+	}
+
+	.wrap {
+		position: relative;
+		border-radius: var(--input-radius);
+		background: var(--input-background-fill);
+	}
+
+	.wrap:focus-within {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	.wrap-inner {
+		display: flex;
+		position: relative;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--checkbox-label-gap);
+		padding: var(--checkbox-label-padding);
+		height: 100%;
+	}
+	.secondary-wrap {
+		display: flex;
+		flex: 1 1 0%;
+		align-items: center;
+		border: none;
+		min-width: min-content;
+		height: 100%;
+	}
+
+	input {
+		margin: var(--spacing-sm);
+		outline: none;
+		border: none;
+		background: inherit;
+		width: var(--size-full);
+		color: var(--body-text-color);
+		font-size: var(--input-text-size);
+		height: 100%;
+	}
+
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+		cursor: not-allowed;
+	}
+
+	.subdued {
+		color: var(--body-text-color-subdued);
+	}
+
+	input[readonly] {
+		cursor: pointer;
+	}
+</style>
diff --git a/src/frontend/shared/patched_dropdown/shared/DropdownOptions.svelte b/src/frontend/shared/patched_dropdown/shared/DropdownOptions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fe458195d214e28cd2a43d82421d6c4b6dc11786
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/shared/DropdownOptions.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { fly } from "svelte/transition";
+	import { createEventDispatcher } from "svelte";
+	export let choices: [string, string | number][];
+	export let filtered_indices: number[];
+	export let show_options = false;
+	export let disabled = false;
+	export let selected_indices: (string | number)[] = [];
+	export let active_index: number | null = null;
+
+	let distance_from_top: number;
+	let distance_from_bottom: number;
+	let input_height: number;
+	let input_width: number;
+	let refElement: HTMLDivElement;
+	let listElement: HTMLUListElement;
+	let top: string | null, bottom: string | null, max_height: number;
+	let innerHeight: number;
+
+	function calculate_window_distance(): void {
+		const { top: ref_top, bottom: ref_bottom } =
+			refElement.getBoundingClientRect();
+		distance_from_top = ref_top;
+		distance_from_bottom = innerHeight - ref_bottom;
+	}
+
+	let scroll_timeout: NodeJS.Timeout | null = null;
+	function scroll_listener(): void {
+		if (!show_options) return;
+		if (scroll_timeout !== null) {
+			clearTimeout(scroll_timeout);
+		}
+
+		scroll_timeout = setTimeout(() => {
+			calculate_window_distance();
+			scroll_timeout = null;
+		}, 10);
+	}
+
+	$: {
+		if (show_options && refElement) {
+			if (listElement && selected_indices.length > 0) {
+				let elements = listElement.querySelectorAll("li");
+				for (const element of Array.from(elements)) {
+					if (
+						element.getAttribute("data-index") ===
+						selected_indices[0].toString()
+					) {
+						listElement?.scrollTo?.(0, (element as HTMLLIElement).offsetTop);
+						break;
+					}
+				}
+			}
+			calculate_window_distance();
+			const rect = refElement.parentElement?.getBoundingClientRect();
+			input_height = rect?.height || 0;
+			input_width = rect?.width || 0;
+		}
+		if (distance_from_bottom > distance_from_top) {
+			top = `${distance_from_top}px`;
+			max_height = distance_from_bottom;
+			bottom = null;
+		} else {
+			bottom = `${distance_from_bottom + input_height}px`;
+			max_height = distance_from_top - input_height;
+			top = null;
+		}
+	}
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<svelte:window on:scroll={scroll_listener} bind:innerHeight />
+
+<div class="reference" bind:this={refElement} />
+{#if show_options && !disabled}
+	<ul
+		class="options"
+		transition:fly={{ duration: 200, y: 5 }}
+		on:mousedown|preventDefault={(e) => dispatch("change", e)}
+		
+		style:bottom
+		style:max-height={`calc(${max_height}px - var(--window-padding))`}
+		style:width={input_width + "px"}
+		bind:this={listElement}
+		role="listbox"
+	>
+		{#each filtered_indices as index}
+			<li
+				class="item"
+				class:selected={selected_indices.includes(index)}
+				class:active={index === active_index}
+				class:bg-gray-100={index === active_index}
+				class:dark:bg-gray-600={index === active_index}
+				data-index={index}
+				aria-label={choices[index][0]}
+				data-testid="dropdown-option"
+				role="option"
+				aria-selected={selected_indices.includes(index)}
+			>
+				<span class:hide={!selected_indices.includes(index)} class="inner-item">
+					✓
+				</span>
+				{choices[index][0]}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	.options {
+		--window-padding: var(--size-8);
+		position: fixed;
+		z-index: var(--layer-top);
+		margin-left: 0;
+		box-shadow: var(--shadow-drop-lg);
+		border-radius: var(--container-radius);
+		background: var(--background-fill-primary);
+		min-width: fit-content;
+		max-width: inherit;
+		overflow: auto;
+		color: var(--body-text-color);
+		list-style: none;
+	}
+
+	.item {
+		display: flex;
+		cursor: pointer;
+		padding: var(--size-2);
+	}
+
+	.item:hover,
+	.active {
+		background: var(--background-fill-secondary);
+	}
+
+	.inner-item {
+		padding-right: var(--size-1);
+	}
+
+	.hide {
+		visibility: hidden;
+	}
+</style>
diff --git a/src/frontend/shared/patched_dropdown/shared/Multiselect.svelte b/src/frontend/shared/patched_dropdown/shared/Multiselect.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d8682aef6494dc252be6777c10132dd6c3cc3807
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/shared/Multiselect.svelte
@@ -0,0 +1,416 @@
+<script lang="ts">
+	import { afterUpdate, createEventDispatcher } from "svelte";
+	import { _, number } from "svelte-i18n";
+	import { BlockTitle } from "@gradio/atoms";
+	import { Remove, DropdownArrow } from "@gradio/icons";
+	import type { KeyUpData, SelectData, I18nFormatter } from "@gradio/utils";
+	import DropdownOptions from "./DropdownOptions.svelte";
+	import { handle_filter, handle_change, handle_shared_keys } from "./utils";
+
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let value: string | number | (string | number)[] | undefined = [];
+	let old_value: string | number | (string | number)[] | undefined = [];
+	export let value_is_output = false;
+	export let max_choices: number | null = null;
+	export let choices: [string, string | number][];
+	let old_choices: [string, string | number][];
+	export let disabled = false;
+	export let show_label: boolean;
+	export let container = true;
+	export let allow_custom_value = false;
+	export let filterable = true;
+	export let i18n: I18nFormatter;
+
+	let filter_input: HTMLElement;
+	let input_text = "";
+	let old_input_text = "";
+	let show_options = false;
+	let choices_names: string[];
+	let choices_values: (string | number)[];
+
+	// All of these are indices with respect to the choices array
+	let filtered_indices: number[] = [];
+	let active_index: number | null = null;
+	// selected_index consists of indices from choices or strings if allow_custom_value is true and user types in a custom value
+	let selected_indices: (number | string)[] = [];
+	let old_selected_index: (number | string)[] = [];
+
+	const dispatch = createEventDispatcher<{
+		change: string | string[] | undefined;
+		input: undefined;
+		select: SelectData;
+		blur: undefined;
+		focus: undefined;
+		key_up: KeyUpData;
+	}>();
+
+	// Setting the initial value of the multiselect dropdown
+	if (Array.isArray(value)) {
+		value.forEach((element) => {
+			const index = choices.map((c) => c[1]).indexOf(element);
+			if (index !== -1) {
+				selected_indices.push(index);
+			} else {
+				selected_indices.push(element);
+			}
+		});
+	}
+
+	$: {
+		choices_names = choices.map((c) => c[0]);
+		choices_values = choices.map((c) => c[1]);
+	}
+
+	$: {
+		if (choices !== old_choices || input_text !== old_input_text) {
+			filtered_indices = handle_filter(choices, input_text);
+			old_choices = choices;
+			old_input_text = input_text;
+			if (!allow_custom_value) {
+				active_index = filtered_indices[0];
+			}
+		}
+	}
+
+	$: {
+		if (JSON.stringify(value) != JSON.stringify(old_value)) {
+			handle_change(dispatch, value, value_is_output);
+			old_value = Array.isArray(value) ? value.slice() : value;
+		}
+	}
+
+	$: {
+		if (
+			JSON.stringify(selected_indices) != JSON.stringify(old_selected_index)
+		) {
+			value = selected_indices.map((index) =>
+				typeof index === "number" ? choices_values[index] : index
+			);
+			old_selected_index = selected_indices.slice();
+		}
+	}
+
+	function handle_blur(): void {
+		if (!allow_custom_value) {
+			input_text = "";
+		}
+
+		if (allow_custom_value && input_text !== "") {
+			add_selected_choice(input_text);
+			input_text = "";
+		}
+
+		show_options = false;
+		active_index = null;
+		dispatch("blur");
+	}
+
+	function remove_selected_choice(option_index: number | string): void {
+		selected_indices = selected_indices.filter((v) => v !== option_index);
+		dispatch("select", {
+			index: typeof option_index === "number" ? option_index : -1,
+			value:
+				typeof option_index === "number"
+					? choices_values[option_index]
+					: option_index,
+			selected: false
+		});
+	}
+
+	function add_selected_choice(option_index: number | string): void {
+		if (max_choices === null || selected_indices.length < max_choices) {
+			selected_indices = [...selected_indices, option_index];
+			dispatch("select", {
+				index: typeof option_index === "number" ? option_index : -1,
+				value:
+					typeof option_index === "number"
+						? choices_values[option_index]
+						: option_index,
+				selected: true
+			});
+		}
+		if (selected_indices.length === max_choices) {
+			show_options = false;
+			active_index = null;
+			filter_input.blur();
+		}
+	}
+
+	function handle_option_selected(e: any): void {
+		const option_index = parseInt(e.detail.target.dataset.index);
+		add_or_remove_index(option_index);
+	}
+
+	function add_or_remove_index(option_index: number): void {
+		if (selected_indices.includes(option_index)) {
+			remove_selected_choice(option_index);
+		} else {
+			add_selected_choice(option_index);
+		}
+		input_text = "";
+	}
+
+	function remove_all(e: any): void {
+		selected_indices = [];
+		input_text = "";
+		e.preventDefault();
+	}
+
+	function handle_focus(e: FocusEvent): void {
+		filtered_indices = choices.map((_, i) => i);
+		if (max_choices === null || selected_indices.length < max_choices) {
+			show_options = true;
+		}
+		dispatch("focus");
+	}
+
+	function handle_key_down(e: KeyboardEvent): void {
+		[show_options, active_index] = handle_shared_keys(
+			e,
+			active_index,
+			filtered_indices
+		);
+		if (e.key === "Enter") {
+			if (active_index !== null) {
+				add_or_remove_index(active_index);
+			} else {
+				if (allow_custom_value) {
+					add_selected_choice(input_text);
+					input_text = "";
+				}
+			}
+		}
+		if (e.key === "Backspace" && input_text === "") {
+			selected_indices = [...selected_indices.slice(0, -1)];
+		}
+		if (selected_indices.length === max_choices) {
+			show_options = false;
+			active_index = null;
+		}
+	}
+
+	function set_selected_indices(): void {
+		if (value === undefined) {
+			selected_indices = [];
+		} else if (Array.isArray(value)) {
+			selected_indices = value
+				.map((v) => {
+					const index = choices_values.indexOf(v);
+					if (index !== -1) {
+						return index;
+					}
+					if (allow_custom_value) {
+						return v;
+					}
+					// Instead of returning null, skip this iteration
+					return undefined;
+				})
+				.filter((val): val is string | number => val !== undefined);
+		}
+	}
+
+	$: value, set_selected_indices();
+
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+</script>
+
+<label class:container>
+	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+
+	<div class="wrap">
+		<div class="wrap-inner" class:show_options>
+			{#each selected_indices as s}
+				<div class="token">
+					<span>
+						{#if typeof s === "number"}
+							{choices_names[s]}
+						{:else}
+							{s}
+						{/if}
+					</span>
+					{#if !disabled}
+						<div
+							class="token-remove"
+							on:click|preventDefault={() => remove_selected_choice(s)}
+							on:keydown|preventDefault={(event) => {
+								if (event.key === "Enter") {
+									remove_selected_choice(s);
+								}
+							}}
+							role="button"
+							tabindex="0"
+							title={i18n("common.remove") + " " + s}
+						>
+							<Remove />
+						</div>
+					{/if}
+				</div>
+			{/each}
+			<div class="secondary-wrap">
+				<input
+					class="border-none"
+					class:subdued={(!choices_names.includes(input_text) &&
+						!allow_custom_value) ||
+						selected_indices.length === max_choices}
+					{disabled}
+					autocomplete="off"
+					bind:value={input_text}
+					bind:this={filter_input}
+					on:keydown={handle_key_down}
+					on:keyup={(e) =>
+						dispatch("key_up", {
+							key: e.key,
+							input_value: input_text
+						})}
+					on:blur={handle_blur}
+					on:focus={handle_focus}
+					readonly={!filterable}
+				/>
+
+				{#if !disabled}
+					{#if selected_indices.length > 0}
+						<div
+							role="button"
+							tabindex="0"
+							class="token-remove remove-all"
+							title={i18n("common.clear")}
+							on:click={remove_all}
+							on:keydown={(event) => {
+								if (event.key === "Enter") {
+									remove_all(event);
+								}
+							}}
+						>
+							<Remove />
+						</div>
+					{/if}
+					<span class="icon-wrap"> <DropdownArrow /></span>
+				{/if}
+			</div>
+		</div>
+		<DropdownOptions
+			{show_options}
+			{choices}
+			{filtered_indices}
+			{disabled}
+			{selected_indices}
+			{active_index}
+			on:change={handle_option_selected}
+		/>
+	</div>
+</label>
+
+<style>
+	.icon-wrap {
+		color: var(--body-text-color);
+		margin-right: var(--size-2);
+		width: var(--size-5);
+	}
+	label:not(.container),
+	label:not(.container) .wrap,
+	label:not(.container) .wrap-inner,
+	label:not(.container) .secondary-wrap,
+	label:not(.container) .token,
+	label:not(.container) input {
+		height: 100%;
+	}
+	.container .wrap {
+		box-shadow: var(--input-shadow);
+		border: var(--input-border-width) solid var(--border-color-primary);
+	}
+
+	.wrap {
+		position: relative;
+		border-radius: var(--input-radius);
+		background: var(--input-background-fill);
+	}
+
+	.wrap:focus-within {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	.wrap-inner {
+		display: flex;
+		position: relative;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--checkbox-label-gap);
+		padding: var(--checkbox-label-padding);
+	}
+
+	.token {
+		display: flex;
+		align-items: center;
+		transition: var(--button-transition);
+		cursor: pointer;
+		box-shadow: var(--checkbox-label-shadow);
+		border: var(--checkbox-label-border-width) solid
+			var(--checkbox-label-border-color);
+		border-radius: var(--button-small-radius);
+		background: var(--checkbox-label-background-fill);
+		padding: var(--checkbox-label-padding);
+		color: var(--checkbox-label-text-color);
+		font-weight: var(--checkbox-label-text-weight);
+		font-size: var(--checkbox-label-text-size);
+		line-height: var(--line-md);
+	}
+
+	.token > * + * {
+		margin-left: var(--size-2);
+	}
+
+	.token-remove {
+		fill: var(--body-text-color);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		border: var(--checkbox-border-width) solid var(--border-color-primary);
+		border-radius: var(--radius-full);
+		background: var(--background-fill-primary);
+		padding: var(--size-0-5);
+		width: 16px;
+		height: 16px;
+	}
+
+	.secondary-wrap {
+		display: flex;
+		flex: 1 1 0%;
+		align-items: center;
+		border: none;
+		min-width: min-content;
+	}
+
+	input {
+		margin: var(--spacing-sm);
+		outline: none;
+		border: none;
+		background: inherit;
+		width: var(--size-full);
+		color: var(--body-text-color);
+		font-size: var(--input-text-size);
+	}
+
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+		cursor: not-allowed;
+	}
+
+	.remove-all {
+		margin-left: var(--size-1);
+		width: 20px;
+		height: 20px;
+	}
+	.subdued {
+		color: var(--body-text-color-subdued);
+	}
+	input[readonly] {
+		cursor: pointer;
+	}
+</style>
diff --git a/src/frontend/shared/patched_dropdown/shared/utils.ts b/src/frontend/shared/patched_dropdown/shared/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..72c30f493fe168c0e10ade580d21683638bbc656
--- /dev/null
+++ b/src/frontend/shared/patched_dropdown/shared/utils.ts
@@ -0,0 +1,56 @@
+function positive_mod(n: number, m: number): number {
+	return ((n % m) + m) % m;
+}
+
+export function handle_filter(
+	choices: [string, string | number][],
+	input_text: string
+): number[] {
+	return choices.reduce((filtered_indices, o, index) => {
+		if (
+			input_text ? o[0].toLowerCase().includes(input_text.toLowerCase()) : true
+		) {
+			filtered_indices.push(index);
+		}
+		return filtered_indices;
+	}, [] as number[]);
+}
+
+export function handle_change(
+	dispatch: any,
+	value: string | number | (string | number)[] | undefined,
+	value_is_output: boolean
+): void {
+	dispatch("change", value);
+	if (!value_is_output) {
+		dispatch("input");
+	}
+}
+
+export function handle_shared_keys(
+	e: KeyboardEvent,
+	active_index: number | null,
+	filtered_indices: number[]
+): [boolean, number | null] {
+	if (e.key === "Escape") {
+		return [false, active_index];
+	}
+	if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+		if (filtered_indices.length >= 0) {
+			if (active_index === null) {
+				active_index =
+					e.key === "ArrowDown"
+						? filtered_indices[0]
+						: filtered_indices[filtered_indices.length - 1];
+			} else {
+				const index_in_filtered = filtered_indices.indexOf(active_index);
+				const increment = e.key === "ArrowUp" ? -1 : 1;
+				active_index =
+					filtered_indices[
+						positive_mod(index_in_filtered + increment, filtered_indices.length)
+					];
+			}
+		}
+	}
+	return [true, active_index];
+}
diff --git a/src/frontend/shared/utils.ts b/src/frontend/shared/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1911367a8884ea8c5468cf5fff062cd887197586
--- /dev/null
+++ b/src/frontend/shared/utils.ts
@@ -0,0 +1,29 @@
+export const get_coordinates_of_clicked_image = (
+	evt: MouseEvent
+): [number, number] | null => {
+	let image;
+	if (evt.currentTarget instanceof Element) {
+		image = evt.currentTarget.querySelector("img") as HTMLImageElement;
+	} else {
+		return [NaN, NaN];
+	}
+
+	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/src/images/demo_1.png b/src/images/demo_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1631cce99bce62e346606e70ef1aa8a1d93ef9d
Binary files /dev/null and b/src/images/demo_1.png differ
diff --git a/src/images/demo_2.png b/src/images/demo_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..7746e559b650cc8370f266391ae1231d1f2faa16
--- /dev/null
+++ b/src/images/demo_2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a227c287a7610678dbd8bd5436da8c004fb365cbcab2674c148171af99f6582d
+size 1110082
diff --git a/src/package-lock.json b/src/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..01a1f6f361ddc870d360a047621a17cbec864b8f
--- /dev/null
+++ b/src/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "image_annotator",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/src/pyproject.toml b/src/pyproject.toml
new file mode 100644
index 0000000000000000000000000000000000000000..91a6cc163a0c204f4923f0ae3fc45f2cec5f3ff7
--- /dev/null
+++ b/src/pyproject.toml
@@ -0,0 +1,46 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_image_annotation"
+version = "0.0.3-1"
+description = "A Gradio component that can be used to annotate images with bounding boxes."
+readme = "README.md"
+license = "MIT"
+requires-python = ">=3.8"
+authors = [{ name = "Edgar Gracia" }]
+keywords = ["gradio-custom-component", "gradio-template-Image", "bounding box", "annotator", "annotate", "boxes"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+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',
+]
+
+[project.urls]
+Repository = "https://github.com/edgarGracia/gradio_image_annotator.git"
+Issues = "https://github.com/edgarGracia/gradio_image_annotator/issues"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_image_annotation/templates", "*.pyi", "backend/gradio_image_annotation/templates", "backend/gradio_image_annotation/templates", "backend/gradio_image_annotation/templates", "backend/gradio_image_annotation/templates", "backend/gradio_image_annotation/templates", "backend/gradio_image_annotation/templates", "backend/gradio_image_annotation/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_image_annotation"]