Upload folder using huggingface_hub

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"]

README.md

@@ -1,10 +1,17 @@
+
 ---
-title: Gradio Promptweighting
-emoji: 📊
-colorFrom: green
-colorTo: gray
+tags: [gradio-custom-component,diffusion model,UI,text-to-image,prompt weighting,editor]
+title: gradio_promptweighting V0.0.1
+colorFrom: gray
+colorTo: indigo
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Name: gradio_promptweighting
+
+Description: Simple component for creating prompt weighting for real-time generation.
+
+Install with: pip install gradio_promptweighting

app.py

@@ -0,0 +1,46 @@
+import gradio as gr
+from gradio_promptweighting import PromptWeighting
+
+
+example = PromptWeighting().example_value()
+
+
+def predict(input):
+    return (input, input)
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            prompt = PromptWeighting(
+                value=[
+                    {"prompt": "a cat", "scale": 1.5},
+                    {"prompt": "a dog", "scale": 1},
+                    {"prompt": "a bird", "scale": 0.5},
+                ],
+                step=0.001,
+                info="Please drag up or down to adjust the weight of the prompt.",
+            )
+            btn = gr.Button("Update Prompt")
+        with gr.Column():
+            text = gr.Textbox(
+                label="Prompt",
+                placeholder="",
+            )
+            prompt2 = PromptWeighting(min=0, max=10, step=0.001)
+    inputs = [prompt]
+    outputs = [text, prompt2]
+
+    btn.click(fn=predict, inputs=inputs, outputs=outputs, show_progress=False)
+    prompt.change(
+        fn=predict,
+        inputs=inputs,
+        outputs=outputs,
+        queue=False,
+        trigger_mode="always_last",
+        show_progress=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

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;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_promptweighting==0.0.1

space.py

@@ -0,0 +1,162 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'PromptWeighting': {'description': 'Creates a very simple textbox for user to enter string input or display string output.', 'members': {'__init__': {'value': {'type': 'str | dict | list | Callable | None', 'default': 'None', 'description': 'default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'placeholder': {'type': 'str | None', 'default': 'None', 'description': 'placeholder hint to provide behind textbox.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'component name in interface.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, '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': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'rtl': {'type': 'bool', 'default': 'False', 'description': 'If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.'}, '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.'}, 'min': {'type': 'float | None', 'default': 'None', 'description': None}, 'max': {'type': 'float | None', 'default': 'None', 'description': None}, 'step': {'type': 'float | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'str | None', 'description': 'Expects a {str} returned from function and sets textarea value to it.'}}, 'preprocess': {'return': {'type': 'str | None', 'description': 'Passes text value as a {str} into the function.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PromptWeighting 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.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the PromptWeighting.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the PromptWeighting is focused.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PromptWeighting': []}}}
+
+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_promptweighting`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Simple component for creating prompt weighting for real-time generation.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_promptweighting
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_promptweighting import PromptWeighting
+
+
+example = PromptWeighting().example_value()
+
+
+def predict(input):
+    return (input, input)
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            prompt = PromptWeighting(
+                value=[{"prompt": "a cat", "scale": 1.5}], step=0.001
+            )
+            btn = gr.Button("Update Prompt")
+        with gr.Column():
+            text = gr.Textbox(
+                label="Prompt",
+                placeholder="",
+            )
+            prompt2 = PromptWeighting(min=0, max=10, step=0.001)
+    inputs = [prompt]
+    outputs = [text, prompt2]
+
+    btn.click(fn=predict, inputs=inputs, outputs=outputs, show_progress=False)
+    prompt.change(
+        fn=predict,
+        inputs=inputs,
+        outputs=outputs,
+        queue=False,
+        trigger_mode="always_last",
+        show_progress=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `PromptWeighting`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["PromptWeighting"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["PromptWeighting"]["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, passes text value as a {str} into the function.
+- **As output:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+def predict(
+    value: str | None
+) -> str | None:
+    return value
+```
+""", elem_classes=["md-custom", "PromptWeighting-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          PromptWeighting: [], };
+    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()

src/.gitignore

@@ -0,0 +1,9 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+node_modules

src/README.md

@@ -0,0 +1,311 @@
+
+# `gradio_promptweighting`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Simple component for creating prompt weighting for real-time generation.
+
+## Installation
+
+```bash
+pip install gradio_promptweighting
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_promptweighting import PromptWeighting
+
+
+example = PromptWeighting().example_value()
+
+
+def predict(input):
+    return (input, input)
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            prompt = PromptWeighting(
+                value=[{"prompt": "a cat", "scale": 1.5}], step=0.001
+            )
+            btn = gr.Button("Update Prompt")
+        with gr.Column():
+            text = gr.Textbox(
+                label="Prompt",
+                placeholder="",
+            )
+            prompt2 = PromptWeighting(min=0, max=10, step=0.001)
+    inputs = [prompt]
+    outputs = [text, prompt2]
+
+    btn.click(fn=predict, inputs=inputs, outputs=outputs, show_progress=False)
+    prompt.change(
+        fn=predict,
+        inputs=inputs,
+        outputs=outputs,
+        queue=False,
+        trigger_mode="always_last",
+        show_progress=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `PromptWeighting`
+
+### 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
+str | dict | list | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>placeholder</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">placeholder hint to provide behind textbox.</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">component name in interface.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</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>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>None</code></td>
+<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</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>rtl</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.</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>min</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>max</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>step</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the PromptWeighting 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. |
+| `input` | This listener is triggered when the user changes the value of the PromptWeighting. |
+| `submit` | This listener is triggered when the user presses the Enter key while the PromptWeighting is focused. |
+
+
+
+### 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, passes text value as a {str} into the function.
+- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+ def predict(
+     value: str | None
+ ) -> str | None:
+     return value
+ ```
+ 

src/backend/gradio_promptweighting/__init__.py

@@ -0,0 +1,4 @@
+
+from .promptweighting import PromptWeighting
+
+__all__ = ['PromptWeighting']

src/backend/gradio_promptweighting/promptweighting.py

@@ -0,0 +1,111 @@
+from __future__ import annotations
+
+from typing import Any, Callable
+
+from gradio.components.base import FormComponent
+from gradio.events import Events
+import json
+
+
+class PromptWeighting(FormComponent):
+    """
+    Enables multi text input with a vertical drag to adjust the weight of each prompt.
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.submit,
+    ]
+
+    def __init__(
+        self,
+        value: str | dict | list | Callable | None = None,
+        *,
+        placeholder: str | None = None,
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        info: str | None = None,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        rtl: bool = False,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        min: float | None = None,
+        max: float | None = None,
+        step: float | None = None,
+    ):
+        """
+        Parameters:
+            value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            placeholder: placeholder hint to provide behind textbox.
+            label: component name in interface.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            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 be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        self.placeholder = placeholder
+        self.rtl = rtl
+        self.min = min
+        self.max = max
+        self.step = step
+        super().__init__(
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            value=value,
+            render=render,
+        )
+
+    def preprocess(self, payload: str | None) -> str | None:
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            Passes text value as a {str} into the function.
+        """
+        return payload
+
+    def postprocess(self, value: str | None) -> str | None:
+        """
+        Parameters:
+            value: Expects a {str} returned from function and sets textarea value to it.
+        Returns:
+            The value to display in the textarea.
+        """
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return json.loads(value)
+        else:
+            return value
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": "string"}
+
+    def example_payload(self) -> Any:
+        return {"foo": "bar"}
+
+    def example_value(self) -> Any:
+        return {"foo": "bar"}
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": {}, "description": "any valid json"}

src/backend/gradio_promptweighting/promptweighting.pyi

@@ -0,0 +1,238 @@
+from __future__ import annotations
+
+from typing import Any, Callable
+
+from gradio.components.base import FormComponent
+from gradio.events import Events
+
+from gradio.events import Dependency
+
+class PromptWeighting(FormComponent):
+    """
+    Enables multi text input with a vertical drag to adjust the weight of each prompt.
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.submit,
+    ]
+
+    def __init__(
+        self,
+        value: str | dict | list | Callable | None = None,
+        *,
+        placeholder: str | None = None,
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        info: str | None = None,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        rtl: bool = False,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        min: float | None = None,
+        max: float | None = None,
+        step: float | None = None,
+    ):
+        """
+        Parameters:
+            value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            placeholder: placeholder hint to provide behind textbox.
+            label: component name in interface.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            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 be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        self.placeholder = placeholder
+        self.rtl = rtl
+        self.min = min
+        self.max = max
+        self.step = step
+        super().__init__(
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            value=value,
+            render=render,
+        )
+
+    def preprocess(self, payload: str | None) -> str | None:
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            Passes text value as a {str} into the function.
+        """
+        return payload
+
+    def postprocess(self, value: str | None) -> str | None:
+        """
+        Parameters:
+            value: Expects a {str} returned from function and sets textarea value to it.
+        Returns:
+            The value to display in the textarea.
+        """
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return json.loads(value)
+        else:
+            return value
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": "string"}
+
+    def example_payload(self) -> Any:
+        return {"foo": "bar"}
+
+    def example_value(self) -> Any:
+        return {"foo": "bar"}
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": {}, "description": "any valid json"}
+
+    
+    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 input(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 submit(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.
+        """
+        ...

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

@@ -0,0 +1,3772 @@
+const on = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let fn = (e = 21) => {
+  let t = "", n = crypto.getRandomValues(new Uint8Array(e));
+  for (; e--; )
+    t += on[n[e] & 63];
+  return t;
+};
+const {
+  SvelteComponent: an,
+  assign: un,
+  create_slot: cn,
+  detach: _n,
+  element: dn,
+  get_all_dirty_from_scope: mn,
+  get_slot_changes: hn,
+  get_spread_update: pn,
+  init: gn,
+  insert: bn,
+  safe_not_equal: wn,
+  set_dynamic_element_data: Ge,
+  set_style: z,
+  toggle_class: K,
+  transition_in: zt,
+  transition_out: Bt,
+  update_slot_base: vn
+} = window.__gradio__svelte__internal;
+function yn(e) {
+  let t, n, l;
+  const i = (
+    /*#slots*/
+    e[18].default
+  ), s = cn(
+    i,
+    e,
+    /*$$scope*/
+    e[17],
+    null
+  );
+  let f = [
+    { "data-testid": (
+      /*test_id*/
+      e[7]
+    ) },
+    { id: (
+      /*elem_id*/
+      e[2]
+    ) },
+    {
+      class: n = "block " + /*elem_classes*/
+      e[3].join(" ") + " svelte-nl1om8"
+    }
+  ], r = {};
+  for (let o = 0; o < f.length; o += 1)
+    r = un(r, f[o]);
+  return {
+    c() {
+      t = dn(
+        /*tag*/
+        e[14]
+      ), s && s.c(), Ge(
+        /*tag*/
+        e[14]
+      )(t, r), K(
+        t,
+        "hidden",
+        /*visible*/
+        e[10] === !1
+      ), K(
+        t,
+        "padded",
+        /*padding*/
+        e[6]
+      ), K(
+        t,
+        "border_focus",
+        /*border_mode*/
+        e[5] === "focus"
+      ), K(
+        t,
+        "border_contrast",
+        /*border_mode*/
+        e[5] === "contrast"
+      ), K(t, "hide-container", !/*explicit_call*/
+      e[8] && !/*container*/
+      e[9]), z(
+        t,
+        "height",
+        /*get_dimension*/
+        e[15](
+          /*height*/
+          e[0]
+        )
+      ), z(t, "width", typeof /*width*/
+      e[1] == "number" ? `calc(min(${/*width*/
+      e[1]}px, 100%))` : (
+        /*get_dimension*/
+        e[15](
+          /*width*/
+          e[1]
+        )
+      )), z(
+        t,
+        "border-style",
+        /*variant*/
+        e[4]
+      ), z(
+        t,
+        "overflow",
+        /*allow_overflow*/
+        e[11] ? "visible" : "hidden"
+      ), z(
+        t,
+        "flex-grow",
+        /*scale*/
+        e[12]
+      ), z(t, "min-width", `calc(min(${/*min_width*/
+      e[13]}px, 100%))`), z(t, "border-width", "var(--block-border-width)");
+    },
+    m(o, a) {
+      bn(o, t, a), s && s.m(t, null), l = !0;
+    },
+    p(o, a) {
+      s && s.p && (!l || a & /*$$scope*/
+      131072) && vn(
+        s,
+        i,
+        o,
+        /*$$scope*/
+        o[17],
+        l ? hn(
+          i,
+          /*$$scope*/
+          o[17],
+          a,
+          null
+        ) : mn(
+          /*$$scope*/
+          o[17]
+        ),
+        null
+      ), Ge(
+        /*tag*/
+        o[14]
+      )(t, r = pn(f, [
+        (!l || a & /*test_id*/
+        128) && { "data-testid": (
+          /*test_id*/
+          o[7]
+        ) },
+        (!l || a & /*elem_id*/
+        4) && { id: (
+          /*elem_id*/
+          o[2]
+        ) },
+        (!l || a & /*elem_classes*/
+        8 && n !== (n = "block " + /*elem_classes*/
+        o[3].join(" ") + " svelte-nl1om8")) && { class: n }
+      ])), K(
+        t,
+        "hidden",
+        /*visible*/
+        o[10] === !1
+      ), K(
+        t,
+        "padded",
+        /*padding*/
+        o[6]
+      ), K(
+        t,
+        "border_focus",
+        /*border_mode*/
+        o[5] === "focus"
+      ), K(
+        t,
+        "border_contrast",
+        /*border_mode*/
+        o[5] === "contrast"
+      ), K(t, "hide-container", !/*explicit_call*/
+      o[8] && !/*container*/
+      o[9]), a & /*height*/
+      1 && z(
+        t,
+        "height",
+        /*get_dimension*/
+        o[15](
+          /*height*/
+          o[0]
+        )
+      ), a & /*width*/
+      2 && z(t, "width", typeof /*width*/
+      o[1] == "number" ? `calc(min(${/*width*/
+      o[1]}px, 100%))` : (
+        /*get_dimension*/
+        o[15](
+          /*width*/
+          o[1]
+        )
+      )), a & /*variant*/
+      16 && z(
+        t,
+        "border-style",
+        /*variant*/
+        o[4]
+      ), a & /*allow_overflow*/
+      2048 && z(
+        t,
+        "overflow",
+        /*allow_overflow*/
+        o[11] ? "visible" : "hidden"
+      ), a & /*scale*/
+      4096 && z(
+        t,
+        "flex-grow",
+        /*scale*/
+        o[12]
+      ), a & /*min_width*/
+      8192 && z(t, "min-width", `calc(min(${/*min_width*/
+      o[13]}px, 100%))`);
+    },
+    i(o) {
+      l || (zt(s, o), l = !0);
+    },
+    o(o) {
+      Bt(s, o), l = !1;
+    },
+    d(o) {
+      o && _n(t), s && s.d(o);
+    }
+  };
+}
+function kn(e) {
+  let t, n = (
+    /*tag*/
+    e[14] && yn(e)
+  );
+  return {
+    c() {
+      n && n.c();
+    },
+    m(l, i) {
+      n && n.m(l, i), t = !0;
+    },
+    p(l, [i]) {
+      /*tag*/
+      l[14] && n.p(l, i);
+    },
+    i(l) {
+      t || (zt(n, l), t = !0);
+    },
+    o(l) {
+      Bt(n, l), t = !1;
+    },
+    d(l) {
+      n && n.d(l);
+    }
+  };
+}
+function Cn(e, t, n) {
+  let { $$slots: l = {}, $$scope: i } = t, { height: s = void 0 } = t, { width: f = void 0 } = t, { elem_id: r = "" } = t, { elem_classes: o = [] } = t, { variant: a = "solid" } = t, { border_mode: u = "base" } = t, { padding: m = !0 } = t, { type: h = "normal" } = t, { test_id: d = void 0 } = t, { explicit_call: p = !1 } = t, { container: b = !0 } = t, { visible: v = !0 } = t, { allow_overflow: w = !0 } = t, { scale: k = null } = t, { min_width: g = 0 } = t, _ = h === "fieldset" ? "fieldset" : "div";
+  const C = (c) => {
+    if (c !== void 0) {
+      if (typeof c == "number")
+        return c + "px";
+      if (typeof c == "string")
+        return c;
+    }
+  };
+  return e.$$set = (c) => {
+    "height" in c && n(0, s = c.height), "width" in c && n(1, f = c.width), "elem_id" in c && n(2, r = c.elem_id), "elem_classes" in c && n(3, o = c.elem_classes), "variant" in c && n(4, a = c.variant), "border_mode" in c && n(5, u = c.border_mode), "padding" in c && n(6, m = c.padding), "type" in c && n(16, h = c.type), "test_id" in c && n(7, d = c.test_id), "explicit_call" in c && n(8, p = c.explicit_call), "container" in c && n(9, b = c.container), "visible" in c && n(10, v = c.visible), "allow_overflow" in c && n(11, w = c.allow_overflow), "scale" in c && n(12, k = c.scale), "min_width" in c && n(13, g = c.min_width), "$$scope" in c && n(17, i = c.$$scope);
+  }, [
+    s,
+    f,
+    r,
+    o,
+    a,
+    u,
+    m,
+    d,
+    p,
+    b,
+    v,
+    w,
+    k,
+    g,
+    _,
+    C,
+    h,
+    i,
+    l
+  ];
+}
+class An extends an {
+  constructor(t) {
+    super(), gn(this, t, Cn, kn, wn, {
+      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: Sn,
+  attr: Nn,
+  create_slot: Ln,
+  detach: En,
+  element: qn,
+  get_all_dirty_from_scope: Fn,
+  get_slot_changes: Mn,
+  init: Pn,
+  insert: Vn,
+  safe_not_equal: Tn,
+  transition_in: zn,
+  transition_out: Bn,
+  update_slot_base: Dn
+} = window.__gradio__svelte__internal;
+function Rn(e) {
+  let t, n;
+  const l = (
+    /*#slots*/
+    e[1].default
+  ), i = Ln(
+    l,
+    e,
+    /*$$scope*/
+    e[0],
+    null
+  );
+  return {
+    c() {
+      t = qn("div"), i && i.c(), Nn(t, "class", "svelte-1hnfib2");
+    },
+    m(s, f) {
+      Vn(s, t, f), i && i.m(t, null), n = !0;
+    },
+    p(s, [f]) {
+      i && i.p && (!n || f & /*$$scope*/
+      1) && Dn(
+        i,
+        l,
+        s,
+        /*$$scope*/
+        s[0],
+        n ? Mn(
+          l,
+          /*$$scope*/
+          s[0],
+          f,
+          null
+        ) : Fn(
+          /*$$scope*/
+          s[0]
+        ),
+        null
+      );
+    },
+    i(s) {
+      n || (zn(i, s), n = !0);
+    },
+    o(s) {
+      Bn(i, s), n = !1;
+    },
+    d(s) {
+      s && En(t), i && i.d(s);
+    }
+  };
+}
+function In(e, t, n) {
+  let { $$slots: l = {}, $$scope: i } = t;
+  return e.$$set = (s) => {
+    "$$scope" in s && n(0, i = s.$$scope);
+  }, [i, l];
+}
+class On extends Sn {
+  constructor(t) {
+    super(), Pn(this, t, In, Rn, Tn, {});
+  }
+}
+const {
+  SvelteComponent: Un,
+  attr: We,
+  check_outros: Zn,
+  create_component: Hn,
+  create_slot: Xn,
+  destroy_component: Yn,
+  detach: Le,
+  element: Kn,
+  empty: Gn,
+  get_all_dirty_from_scope: Wn,
+  get_slot_changes: Jn,
+  group_outros: Qn,
+  init: jn,
+  insert: Ee,
+  mount_component: xn,
+  safe_not_equal: $n,
+  set_data: el,
+  space: tl,
+  text: nl,
+  toggle_class: ie,
+  transition_in: ge,
+  transition_out: qe,
+  update_slot_base: ll
+} = window.__gradio__svelte__internal;
+function Je(e) {
+  let t, n;
+  return t = new On({
+    props: {
+      $$slots: { default: [il] },
+      $$scope: { ctx: e }
+    }
+  }), {
+    c() {
+      Hn(t.$$.fragment);
+    },
+    m(l, i) {
+      xn(t, l, i), n = !0;
+    },
+    p(l, i) {
+      const s = {};
+      i & /*$$scope, info*/
+      10 && (s.$$scope = { dirty: i, ctx: l }), t.$set(s);
+    },
+    i(l) {
+      n || (ge(t.$$.fragment, l), n = !0);
+    },
+    o(l) {
+      qe(t.$$.fragment, l), n = !1;
+    },
+    d(l) {
+      Yn(t, l);
+    }
+  };
+}
+function il(e) {
+  let t;
+  return {
+    c() {
+      t = nl(
+        /*info*/
+        e[1]
+      );
+    },
+    m(n, l) {
+      Ee(n, t, l);
+    },
+    p(n, l) {
+      l & /*info*/
+      2 && el(
+        t,
+        /*info*/
+        n[1]
+      );
+    },
+    d(n) {
+      n && Le(t);
+    }
+  };
+}
+function sl(e) {
+  let t, n, l, i;
+  const s = (
+    /*#slots*/
+    e[2].default
+  ), f = Xn(
+    s,
+    e,
+    /*$$scope*/
+    e[3],
+    null
+  );
+  let r = (
+    /*info*/
+    e[1] && Je(e)
+  );
+  return {
+    c() {
+      t = Kn("span"), f && f.c(), n = tl(), r && r.c(), l = Gn(), We(t, "data-testid", "block-info"), We(t, "class", "svelte-22c38v"), ie(t, "sr-only", !/*show_label*/
+      e[0]), ie(t, "hide", !/*show_label*/
+      e[0]), ie(
+        t,
+        "has-info",
+        /*info*/
+        e[1] != null
+      );
+    },
+    m(o, a) {
+      Ee(o, t, a), f && f.m(t, null), Ee(o, n, a), r && r.m(o, a), Ee(o, l, a), i = !0;
+    },
+    p(o, [a]) {
+      f && f.p && (!i || a & /*$$scope*/
+      8) && ll(
+        f,
+        s,
+        o,
+        /*$$scope*/
+        o[3],
+        i ? Jn(
+          s,
+          /*$$scope*/
+          o[3],
+          a,
+          null
+        ) : Wn(
+          /*$$scope*/
+          o[3]
+        ),
+        null
+      ), (!i || a & /*show_label*/
+      1) && ie(t, "sr-only", !/*show_label*/
+      o[0]), (!i || a & /*show_label*/
+      1) && ie(t, "hide", !/*show_label*/
+      o[0]), (!i || a & /*info*/
+      2) && ie(
+        t,
+        "has-info",
+        /*info*/
+        o[1] != null
+      ), /*info*/
+      o[1] ? r ? (r.p(o, a), a & /*info*/
+      2 && ge(r, 1)) : (r = Je(o), r.c(), ge(r, 1), r.m(l.parentNode, l)) : r && (Qn(), qe(r, 1, 1, () => {
+        r = null;
+      }), Zn());
+    },
+    i(o) {
+      i || (ge(f, o), ge(r), i = !0);
+    },
+    o(o) {
+      qe(f, o), qe(r), i = !1;
+    },
+    d(o) {
+      o && (Le(t), Le(n), Le(l)), f && f.d(o), r && r.d(o);
+    }
+  };
+}
+function rl(e, t, n) {
+  let { $$slots: l = {}, $$scope: i } = t, { show_label: s = !0 } = t, { info: f = void 0 } = t;
+  return e.$$set = (r) => {
+    "show_label" in r && n(0, s = r.show_label), "info" in r && n(1, f = r.info), "$$scope" in r && n(3, i = r.$$scope);
+  }, [s, f, l, i];
+}
+class ol extends Un {
+  constructor(t) {
+    super(), jn(this, t, rl, sl, $n, { show_label: 0, info: 1 });
+  }
+}
+const fl = [
+  { 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 }
+], Qe = {
+  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"
+  }
+};
+fl.reduce(
+  (e, { color: t, primary: n, secondary: l }) => ({
+    ...e,
+    [t]: {
+      primary: Qe[t][n],
+      secondary: Qe[t][l]
+    }
+  }),
+  {}
+);
+function oe(e) {
+  let t = ["", "k", "M", "G", "T", "P", "E", "Z"], n = 0;
+  for (; e > 1e3 && n < t.length - 1; )
+    e /= 1e3, n++;
+  let l = t[n];
+  return (Number.isInteger(e) ? e : e.toFixed(1)) + l;
+}
+function Fe() {
+}
+function al(e, t) {
+  return e != e ? t == t : e !== t || e && typeof e == "object" || typeof e == "function";
+}
+const Dt = typeof window < "u";
+let je = Dt ? () => window.performance.now() : () => Date.now(), Rt = Dt ? (e) => requestAnimationFrame(e) : Fe;
+const ae = /* @__PURE__ */ new Set();
+function It(e) {
+  ae.forEach((t) => {
+    t.c(e) || (ae.delete(t), t.f());
+  }), ae.size !== 0 && Rt(It);
+}
+function ul(e) {
+  let t;
+  return ae.size === 0 && Rt(It), {
+    promise: new Promise((n) => {
+      ae.add(t = { c: e, f: n });
+    }),
+    abort() {
+      ae.delete(t);
+    }
+  };
+}
+const se = [];
+function cl(e, t = Fe) {
+  let n;
+  const l = /* @__PURE__ */ new Set();
+  function i(r) {
+    if (al(e, r) && (e = r, n)) {
+      const o = !se.length;
+      for (const a of l)
+        a[1](), se.push(a, e);
+      if (o) {
+        for (let a = 0; a < se.length; a += 2)
+          se[a][0](se[a + 1]);
+        se.length = 0;
+      }
+    }
+  }
+  function s(r) {
+    i(r(e));
+  }
+  function f(r, o = Fe) {
+    const a = [r, o];
+    return l.add(a), l.size === 1 && (n = t(i, s) || Fe), r(e), () => {
+      l.delete(a), l.size === 0 && n && (n(), n = null);
+    };
+  }
+  return { set: i, update: s, subscribe: f };
+}
+function xe(e) {
+  return Object.prototype.toString.call(e) === "[object Date]";
+}
+function Oe(e, t, n, l) {
+  if (typeof n == "number" || xe(n)) {
+    const i = l - n, s = (n - t) / (e.dt || 1 / 60), f = e.opts.stiffness * i, r = e.opts.damping * s, o = (f - r) * e.inv_mass, a = (s + o) * e.dt;
+    return Math.abs(a) < e.opts.precision && Math.abs(i) < e.opts.precision ? l : (e.settled = !1, xe(n) ? new Date(n.getTime() + a) : n + a);
+  } else {
+    if (Array.isArray(n))
+      return n.map(
+        (i, s) => Oe(e, t[s], n[s], l[s])
+      );
+    if (typeof n == "object") {
+      const i = {};
+      for (const s in n)
+        i[s] = Oe(e, t[s], n[s], l[s]);
+      return i;
+    } else
+      throw new Error(`Cannot spring ${typeof n} values`);
+  }
+}
+function $e(e, t = {}) {
+  const n = cl(e), { stiffness: l = 0.15, damping: i = 0.8, precision: s = 0.01 } = t;
+  let f, r, o, a = e, u = e, m = 1, h = 0, d = !1;
+  function p(v, w = {}) {
+    u = v;
+    const k = o = {};
+    return e == null || w.hard || b.stiffness >= 1 && b.damping >= 1 ? (d = !0, f = je(), a = v, n.set(e = u), Promise.resolve()) : (w.soft && (h = 1 / ((w.soft === !0 ? 0.5 : +w.soft) * 60), m = 0), r || (f = je(), d = !1, r = ul((g) => {
+      if (d)
+        return d = !1, r = null, !1;
+      m = Math.min(m + h, 1);
+      const _ = {
+        inv_mass: m,
+        opts: b,
+        settled: !0,
+        dt: (g - f) * 60 / 1e3
+      }, C = Oe(_, a, e, u);
+      return f = g, a = e, n.set(e = C), _.settled && (r = null), !_.settled;
+    })), new Promise((g) => {
+      r.promise.then(() => {
+        k === o && g();
+      });
+    }));
+  }
+  const b = {
+    set: p,
+    update: (v, w) => p(v(u, e), w),
+    subscribe: n.subscribe,
+    stiffness: l,
+    damping: i,
+    precision: s
+  };
+  return b;
+}
+const {
+  SvelteComponent: _l,
+  append: O,
+  attr: L,
+  component_subscribe: et,
+  detach: dl,
+  element: ml,
+  init: hl,
+  insert: pl,
+  noop: tt,
+  safe_not_equal: gl,
+  set_style: Ce,
+  svg_element: U,
+  toggle_class: nt
+} = window.__gradio__svelte__internal, { onMount: bl } = window.__gradio__svelte__internal;
+function wl(e) {
+  let t, n, l, i, s, f, r, o, a, u, m, h;
+  return {
+    c() {
+      t = ml("div"), n = U("svg"), l = U("g"), i = U("path"), s = U("path"), f = U("path"), r = U("path"), o = U("g"), a = U("path"), u = U("path"), m = U("path"), h = U("path"), L(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), L(i, "fill", "#FF7C00"), L(i, "fill-opacity", "0.4"), L(i, "class", "svelte-43sxxs"), L(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), L(s, "fill", "#FF7C00"), L(s, "class", "svelte-43sxxs"), L(f, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), L(f, "fill", "#FF7C00"), L(f, "fill-opacity", "0.4"), L(f, "class", "svelte-43sxxs"), L(r, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), L(r, "fill", "#FF7C00"), L(r, "class", "svelte-43sxxs"), Ce(l, "transform", "translate(" + /*$top*/
+      e[1][0] + "px, " + /*$top*/
+      e[1][1] + "px)"), L(a, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), L(a, "fill", "#FF7C00"), L(a, "fill-opacity", "0.4"), L(a, "class", "svelte-43sxxs"), L(u, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), L(u, "fill", "#FF7C00"), L(u, "class", "svelte-43sxxs"), L(m, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), L(m, "fill", "#FF7C00"), L(m, "fill-opacity", "0.4"), L(m, "class", "svelte-43sxxs"), L(h, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), L(h, "fill", "#FF7C00"), L(h, "class", "svelte-43sxxs"), Ce(o, "transform", "translate(" + /*$bottom*/
+      e[2][0] + "px, " + /*$bottom*/
+      e[2][1] + "px)"), L(n, "viewBox", "-1200 -1200 3000 3000"), L(n, "fill", "none"), L(n, "xmlns", "http://www.w3.org/2000/svg"), L(n, "class", "svelte-43sxxs"), L(t, "class", "svelte-43sxxs"), nt(
+        t,
+        "margin",
+        /*margin*/
+        e[0]
+      );
+    },
+    m(d, p) {
+      pl(d, t, p), O(t, n), O(n, l), O(l, i), O(l, s), O(l, f), O(l, r), O(n, o), O(o, a), O(o, u), O(o, m), O(o, h);
+    },
+    p(d, [p]) {
+      p & /*$top*/
+      2 && Ce(l, "transform", "translate(" + /*$top*/
+      d[1][0] + "px, " + /*$top*/
+      d[1][1] + "px)"), p & /*$bottom*/
+      4 && Ce(o, "transform", "translate(" + /*$bottom*/
+      d[2][0] + "px, " + /*$bottom*/
+      d[2][1] + "px)"), p & /*margin*/
+      1 && nt(
+        t,
+        "margin",
+        /*margin*/
+        d[0]
+      );
+    },
+    i: tt,
+    o: tt,
+    d(d) {
+      d && dl(t);
+    }
+  };
+}
+function vl(e, t, n) {
+  let l, i, { margin: s = !0 } = t;
+  const f = $e([0, 0]);
+  et(e, f, (h) => n(1, l = h));
+  const r = $e([0, 0]);
+  et(e, r, (h) => n(2, i = h));
+  let o;
+  async function a() {
+    await Promise.all([f.set([125, 140]), r.set([-125, -140])]), await Promise.all([f.set([-125, 140]), r.set([125, -140])]), await Promise.all([f.set([-125, 0]), r.set([125, -0])]), await Promise.all([f.set([125, 0]), r.set([-125, 0])]);
+  }
+  async function u() {
+    await a(), o || u();
+  }
+  async function m() {
+    await Promise.all([f.set([125, 0]), r.set([-125, 0])]), u();
+  }
+  return bl(() => (m(), () => o = !0)), e.$$set = (h) => {
+    "margin" in h && n(0, s = h.margin);
+  }, [s, l, i, f, r];
+}
+class yl extends _l {
+  constructor(t) {
+    super(), hl(this, t, vl, wl, gl, { margin: 0 });
+  }
+}
+const {
+  SvelteComponent: kl,
+  append: ne,
+  attr: G,
+  binding_callbacks: lt,
+  check_outros: Ot,
+  create_component: Cl,
+  create_slot: Al,
+  destroy_component: Sl,
+  destroy_each: Ut,
+  detach: A,
+  element: Q,
+  empty: de,
+  ensure_array_like: Ve,
+  get_all_dirty_from_scope: Nl,
+  get_slot_changes: Ll,
+  group_outros: Zt,
+  init: El,
+  insert: S,
+  mount_component: ql,
+  noop: Ue,
+  safe_not_equal: Fl,
+  set_data: R,
+  set_style: ee,
+  space: W,
+  text: q,
+  toggle_class: D,
+  transition_in: ce,
+  transition_out: _e,
+  update_slot_base: Ml
+} = window.__gradio__svelte__internal, { tick: Pl } = window.__gradio__svelte__internal, { onDestroy: Vl } = window.__gradio__svelte__internal, Tl = (e) => ({}), it = (e) => ({});
+function st(e, t, n) {
+  const l = e.slice();
+  return l[38] = t[n], l[40] = n, l;
+}
+function rt(e, t, n) {
+  const l = e.slice();
+  return l[38] = t[n], l;
+}
+function zl(e) {
+  let t, n = (
+    /*i18n*/
+    e[1]("common.error") + ""
+  ), l, i, s;
+  const f = (
+    /*#slots*/
+    e[29].error
+  ), r = Al(
+    f,
+    e,
+    /*$$scope*/
+    e[28],
+    it
+  );
+  return {
+    c() {
+      t = Q("span"), l = q(n), i = W(), r && r.c(), G(t, "class", "error svelte-1yserjw");
+    },
+    m(o, a) {
+      S(o, t, a), ne(t, l), S(o, i, a), r && r.m(o, a), s = !0;
+    },
+    p(o, a) {
+      (!s || a[0] & /*i18n*/
+      2) && n !== (n = /*i18n*/
+      o[1]("common.error") + "") && R(l, n), r && r.p && (!s || a[0] & /*$$scope*/
+      268435456) && Ml(
+        r,
+        f,
+        o,
+        /*$$scope*/
+        o[28],
+        s ? Ll(
+          f,
+          /*$$scope*/
+          o[28],
+          a,
+          Tl
+        ) : Nl(
+          /*$$scope*/
+          o[28]
+        ),
+        it
+      );
+    },
+    i(o) {
+      s || (ce(r, o), s = !0);
+    },
+    o(o) {
+      _e(r, o), s = !1;
+    },
+    d(o) {
+      o && (A(t), A(i)), r && r.d(o);
+    }
+  };
+}
+function Bl(e) {
+  let t, n, l, i, s, f, r, o, a, u = (
+    /*variant*/
+    e[8] === "default" && /*show_eta_bar*/
+    e[18] && /*show_progress*/
+    e[6] === "full" && ot(e)
+  );
+  function m(g, _) {
+    if (
+      /*progress*/
+      g[7]
+    )
+      return Il;
+    if (
+      /*queue_position*/
+      g[2] !== null && /*queue_size*/
+      g[3] !== void 0 && /*queue_position*/
+      g[2] >= 0
+    )
+      return Rl;
+    if (
+      /*queue_position*/
+      g[2] === 0
+    )
+      return Dl;
+  }
+  let h = m(e), d = h && h(e), p = (
+    /*timer*/
+    e[5] && ut(e)
+  );
+  const b = [Hl, Zl], v = [];
+  function w(g, _) {
+    return (
+      /*last_progress_level*/
+      g[15] != null ? 0 : (
+        /*show_progress*/
+        g[6] === "full" ? 1 : -1
+      )
+    );
+  }
+  ~(s = w(e)) && (f = v[s] = b[s](e));
+  let k = !/*timer*/
+  e[5] && gt(e);
+  return {
+    c() {
+      u && u.c(), t = W(), n = Q("div"), d && d.c(), l = W(), p && p.c(), i = W(), f && f.c(), r = W(), k && k.c(), o = de(), G(n, "class", "progress-text svelte-1yserjw"), D(
+        n,
+        "meta-text-center",
+        /*variant*/
+        e[8] === "center"
+      ), D(
+        n,
+        "meta-text",
+        /*variant*/
+        e[8] === "default"
+      );
+    },
+    m(g, _) {
+      u && u.m(g, _), S(g, t, _), S(g, n, _), d && d.m(n, null), ne(n, l), p && p.m(n, null), S(g, i, _), ~s && v[s].m(g, _), S(g, r, _), k && k.m(g, _), S(g, o, _), a = !0;
+    },
+    p(g, _) {
+      /*variant*/
+      g[8] === "default" && /*show_eta_bar*/
+      g[18] && /*show_progress*/
+      g[6] === "full" ? u ? u.p(g, _) : (u = ot(g), u.c(), u.m(t.parentNode, t)) : u && (u.d(1), u = null), h === (h = m(g)) && d ? d.p(g, _) : (d && d.d(1), d = h && h(g), d && (d.c(), d.m(n, l))), /*timer*/
+      g[5] ? p ? p.p(g, _) : (p = ut(g), p.c(), p.m(n, null)) : p && (p.d(1), p = null), (!a || _[0] & /*variant*/
+      256) && D(
+        n,
+        "meta-text-center",
+        /*variant*/
+        g[8] === "center"
+      ), (!a || _[0] & /*variant*/
+      256) && D(
+        n,
+        "meta-text",
+        /*variant*/
+        g[8] === "default"
+      );
+      let C = s;
+      s = w(g), s === C ? ~s && v[s].p(g, _) : (f && (Zt(), _e(v[C], 1, 1, () => {
+        v[C] = null;
+      }), Ot()), ~s ? (f = v[s], f ? f.p(g, _) : (f = v[s] = b[s](g), f.c()), ce(f, 1), f.m(r.parentNode, r)) : f = null), /*timer*/
+      g[5] ? k && (k.d(1), k = null) : k ? k.p(g, _) : (k = gt(g), k.c(), k.m(o.parentNode, o));
+    },
+    i(g) {
+      a || (ce(f), a = !0);
+    },
+    o(g) {
+      _e(f), a = !1;
+    },
+    d(g) {
+      g && (A(t), A(n), A(i), A(r), A(o)), u && u.d(g), d && d.d(), p && p.d(), ~s && v[s].d(g), k && k.d(g);
+    }
+  };
+}
+function ot(e) {
+  let t, n = `translateX(${/*eta_level*/
+  (e[17] || 0) * 100 - 100}%)`;
+  return {
+    c() {
+      t = Q("div"), G(t, "class", "eta-bar svelte-1yserjw"), ee(t, "transform", n);
+    },
+    m(l, i) {
+      S(l, t, i);
+    },
+    p(l, i) {
+      i[0] & /*eta_level*/
+      131072 && n !== (n = `translateX(${/*eta_level*/
+      (l[17] || 0) * 100 - 100}%)`) && ee(t, "transform", n);
+    },
+    d(l) {
+      l && A(t);
+    }
+  };
+}
+function Dl(e) {
+  let t;
+  return {
+    c() {
+      t = q("processing |");
+    },
+    m(n, l) {
+      S(n, t, l);
+    },
+    p: Ue,
+    d(n) {
+      n && A(t);
+    }
+  };
+}
+function Rl(e) {
+  let t, n = (
+    /*queue_position*/
+    e[2] + 1 + ""
+  ), l, i, s, f;
+  return {
+    c() {
+      t = q("queue: "), l = q(n), i = q("/"), s = q(
+        /*queue_size*/
+        e[3]
+      ), f = q(" |");
+    },
+    m(r, o) {
+      S(r, t, o), S(r, l, o), S(r, i, o), S(r, s, o), S(r, f, o);
+    },
+    p(r, o) {
+      o[0] & /*queue_position*/
+      4 && n !== (n = /*queue_position*/
+      r[2] + 1 + "") && R(l, n), o[0] & /*queue_size*/
+      8 && R(
+        s,
+        /*queue_size*/
+        r[3]
+      );
+    },
+    d(r) {
+      r && (A(t), A(l), A(i), A(s), A(f));
+    }
+  };
+}
+function Il(e) {
+  let t, n = Ve(
+    /*progress*/
+    e[7]
+  ), l = [];
+  for (let i = 0; i < n.length; i += 1)
+    l[i] = at(rt(e, n, i));
+  return {
+    c() {
+      for (let i = 0; i < l.length; i += 1)
+        l[i].c();
+      t = de();
+    },
+    m(i, s) {
+      for (let f = 0; f < l.length; f += 1)
+        l[f] && l[f].m(i, s);
+      S(i, t, s);
+    },
+    p(i, s) {
+      if (s[0] & /*progress*/
+      128) {
+        n = Ve(
+          /*progress*/
+          i[7]
+        );
+        let f;
+        for (f = 0; f < n.length; f += 1) {
+          const r = rt(i, n, f);
+          l[f] ? l[f].p(r, s) : (l[f] = at(r), l[f].c(), l[f].m(t.parentNode, t));
+        }
+        for (; f < l.length; f += 1)
+          l[f].d(1);
+        l.length = n.length;
+      }
+    },
+    d(i) {
+      i && A(t), Ut(l, i);
+    }
+  };
+}
+function ft(e) {
+  let t, n = (
+    /*p*/
+    e[38].unit + ""
+  ), l, i, s = " ", f;
+  function r(u, m) {
+    return (
+      /*p*/
+      u[38].length != null ? Ul : Ol
+    );
+  }
+  let o = r(e), a = o(e);
+  return {
+    c() {
+      a.c(), t = W(), l = q(n), i = q(" | "), f = q(s);
+    },
+    m(u, m) {
+      a.m(u, m), S(u, t, m), S(u, l, m), S(u, i, m), S(u, f, m);
+    },
+    p(u, m) {
+      o === (o = r(u)) && a ? a.p(u, m) : (a.d(1), a = o(u), a && (a.c(), a.m(t.parentNode, t))), m[0] & /*progress*/
+      128 && n !== (n = /*p*/
+      u[38].unit + "") && R(l, n);
+    },
+    d(u) {
+      u && (A(t), A(l), A(i), A(f)), a.d(u);
+    }
+  };
+}
+function Ol(e) {
+  let t = oe(
+    /*p*/
+    e[38].index || 0
+  ) + "", n;
+  return {
+    c() {
+      n = q(t);
+    },
+    m(l, i) {
+      S(l, n, i);
+    },
+    p(l, i) {
+      i[0] & /*progress*/
+      128 && t !== (t = oe(
+        /*p*/
+        l[38].index || 0
+      ) + "") && R(n, t);
+    },
+    d(l) {
+      l && A(n);
+    }
+  };
+}
+function Ul(e) {
+  let t = oe(
+    /*p*/
+    e[38].index || 0
+  ) + "", n, l, i = oe(
+    /*p*/
+    e[38].length
+  ) + "", s;
+  return {
+    c() {
+      n = q(t), l = q("/"), s = q(i);
+    },
+    m(f, r) {
+      S(f, n, r), S(f, l, r), S(f, s, r);
+    },
+    p(f, r) {
+      r[0] & /*progress*/
+      128 && t !== (t = oe(
+        /*p*/
+        f[38].index || 0
+      ) + "") && R(n, t), r[0] & /*progress*/
+      128 && i !== (i = oe(
+        /*p*/
+        f[38].length
+      ) + "") && R(s, i);
+    },
+    d(f) {
+      f && (A(n), A(l), A(s));
+    }
+  };
+}
+function at(e) {
+  let t, n = (
+    /*p*/
+    e[38].index != null && ft(e)
+  );
+  return {
+    c() {
+      n && n.c(), t = de();
+    },
+    m(l, i) {
+      n && n.m(l, i), S(l, t, i);
+    },
+    p(l, i) {
+      /*p*/
+      l[38].index != null ? n ? n.p(l, i) : (n = ft(l), n.c(), n.m(t.parentNode, t)) : n && (n.d(1), n = null);
+    },
+    d(l) {
+      l && A(t), n && n.d(l);
+    }
+  };
+}
+function ut(e) {
+  let t, n = (
+    /*eta*/
+    e[0] ? `/${/*formatted_eta*/
+    e[19]}` : ""
+  ), l, i;
+  return {
+    c() {
+      t = q(
+        /*formatted_timer*/
+        e[20]
+      ), l = q(n), i = q("s");
+    },
+    m(s, f) {
+      S(s, t, f), S(s, l, f), S(s, i, f);
+    },
+    p(s, f) {
+      f[0] & /*formatted_timer*/
+      1048576 && R(
+        t,
+        /*formatted_timer*/
+        s[20]
+      ), f[0] & /*eta, formatted_eta*/
+      524289 && n !== (n = /*eta*/
+      s[0] ? `/${/*formatted_eta*/
+      s[19]}` : "") && R(l, n);
+    },
+    d(s) {
+      s && (A(t), A(l), A(i));
+    }
+  };
+}
+function Zl(e) {
+  let t, n;
+  return t = new yl({
+    props: { margin: (
+      /*variant*/
+      e[8] === "default"
+    ) }
+  }), {
+    c() {
+      Cl(t.$$.fragment);
+    },
+    m(l, i) {
+      ql(t, l, i), n = !0;
+    },
+    p(l, i) {
+      const s = {};
+      i[0] & /*variant*/
+      256 && (s.margin = /*variant*/
+      l[8] === "default"), t.$set(s);
+    },
+    i(l) {
+      n || (ce(t.$$.fragment, l), n = !0);
+    },
+    o(l) {
+      _e(t.$$.fragment, l), n = !1;
+    },
+    d(l) {
+      Sl(t, l);
+    }
+  };
+}
+function Hl(e) {
+  let t, n, l, i, s, f = `${/*last_progress_level*/
+  e[15] * 100}%`, r = (
+    /*progress*/
+    e[7] != null && ct(e)
+  );
+  return {
+    c() {
+      t = Q("div"), n = Q("div"), r && r.c(), l = W(), i = Q("div"), s = Q("div"), G(n, "class", "progress-level-inner svelte-1yserjw"), G(s, "class", "progress-bar svelte-1yserjw"), ee(s, "width", f), G(i, "class", "progress-bar-wrap svelte-1yserjw"), G(t, "class", "progress-level svelte-1yserjw");
+    },
+    m(o, a) {
+      S(o, t, a), ne(t, n), r && r.m(n, null), ne(t, l), ne(t, i), ne(i, s), e[30](s);
+    },
+    p(o, a) {
+      /*progress*/
+      o[7] != null ? r ? r.p(o, a) : (r = ct(o), r.c(), r.m(n, null)) : r && (r.d(1), r = null), a[0] & /*last_progress_level*/
+      32768 && f !== (f = `${/*last_progress_level*/
+      o[15] * 100}%`) && ee(s, "width", f);
+    },
+    i: Ue,
+    o: Ue,
+    d(o) {
+      o && A(t), r && r.d(), e[30](null);
+    }
+  };
+}
+function ct(e) {
+  let t, n = Ve(
+    /*progress*/
+    e[7]
+  ), l = [];
+  for (let i = 0; i < n.length; i += 1)
+    l[i] = pt(st(e, n, i));
+  return {
+    c() {
+      for (let i = 0; i < l.length; i += 1)
+        l[i].c();
+      t = de();
+    },
+    m(i, s) {
+      for (let f = 0; f < l.length; f += 1)
+        l[f] && l[f].m(i, s);
+      S(i, t, s);
+    },
+    p(i, s) {
+      if (s[0] & /*progress_level, progress*/
+      16512) {
+        n = Ve(
+          /*progress*/
+          i[7]
+        );
+        let f;
+        for (f = 0; f < n.length; f += 1) {
+          const r = st(i, n, f);
+          l[f] ? l[f].p(r, s) : (l[f] = pt(r), l[f].c(), l[f].m(t.parentNode, t));
+        }
+        for (; f < l.length; f += 1)
+          l[f].d(1);
+        l.length = n.length;
+      }
+    },
+    d(i) {
+      i && A(t), Ut(l, i);
+    }
+  };
+}
+function _t(e) {
+  let t, n, l, i, s = (
+    /*i*/
+    e[40] !== 0 && Xl()
+  ), f = (
+    /*p*/
+    e[38].desc != null && dt(e)
+  ), r = (
+    /*p*/
+    e[38].desc != null && /*progress_level*/
+    e[14] && /*progress_level*/
+    e[14][
+      /*i*/
+      e[40]
+    ] != null && mt()
+  ), o = (
+    /*progress_level*/
+    e[14] != null && ht(e)
+  );
+  return {
+    c() {
+      s && s.c(), t = W(), f && f.c(), n = W(), r && r.c(), l = W(), o && o.c(), i = de();
+    },
+    m(a, u) {
+      s && s.m(a, u), S(a, t, u), f && f.m(a, u), S(a, n, u), r && r.m(a, u), S(a, l, u), o && o.m(a, u), S(a, i, u);
+    },
+    p(a, u) {
+      /*p*/
+      a[38].desc != null ? f ? f.p(a, u) : (f = dt(a), f.c(), f.m(n.parentNode, n)) : f && (f.d(1), f = null), /*p*/
+      a[38].desc != null && /*progress_level*/
+      a[14] && /*progress_level*/
+      a[14][
+        /*i*/
+        a[40]
+      ] != null ? r || (r = mt(), r.c(), r.m(l.parentNode, l)) : r && (r.d(1), r = null), /*progress_level*/
+      a[14] != null ? o ? o.p(a, u) : (o = ht(a), o.c(), o.m(i.parentNode, i)) : o && (o.d(1), o = null);
+    },
+    d(a) {
+      a && (A(t), A(n), A(l), A(i)), s && s.d(a), f && f.d(a), r && r.d(a), o && o.d(a);
+    }
+  };
+}
+function Xl(e) {
+  let t;
+  return {
+    c() {
+      t = q(" /");
+    },
+    m(n, l) {
+      S(n, t, l);
+    },
+    d(n) {
+      n && A(t);
+    }
+  };
+}
+function dt(e) {
+  let t = (
+    /*p*/
+    e[38].desc + ""
+  ), n;
+  return {
+    c() {
+      n = q(t);
+    },
+    m(l, i) {
+      S(l, n, i);
+    },
+    p(l, i) {
+      i[0] & /*progress*/
+      128 && t !== (t = /*p*/
+      l[38].desc + "") && R(n, t);
+    },
+    d(l) {
+      l && A(n);
+    }
+  };
+}
+function mt(e) {
+  let t;
+  return {
+    c() {
+      t = q("-");
+    },
+    m(n, l) {
+      S(n, t, l);
+    },
+    d(n) {
+      n && A(t);
+    }
+  };
+}
+function ht(e) {
+  let t = (100 * /*progress_level*/
+  (e[14][
+    /*i*/
+    e[40]
+  ] || 0)).toFixed(1) + "", n, l;
+  return {
+    c() {
+      n = q(t), l = q("%");
+    },
+    m(i, s) {
+      S(i, n, s), S(i, l, s);
+    },
+    p(i, s) {
+      s[0] & /*progress_level*/
+      16384 && t !== (t = (100 * /*progress_level*/
+      (i[14][
+        /*i*/
+        i[40]
+      ] || 0)).toFixed(1) + "") && R(n, t);
+    },
+    d(i) {
+      i && (A(n), A(l));
+    }
+  };
+}
+function pt(e) {
+  let t, n = (
+    /*p*/
+    (e[38].desc != null || /*progress_level*/
+    e[14] && /*progress_level*/
+    e[14][
+      /*i*/
+      e[40]
+    ] != null) && _t(e)
+  );
+  return {
+    c() {
+      n && n.c(), t = de();
+    },
+    m(l, i) {
+      n && n.m(l, i), S(l, t, i);
+    },
+    p(l, i) {
+      /*p*/
+      l[38].desc != null || /*progress_level*/
+      l[14] && /*progress_level*/
+      l[14][
+        /*i*/
+        l[40]
+      ] != null ? n ? n.p(l, i) : (n = _t(l), n.c(), n.m(t.parentNode, t)) : n && (n.d(1), n = null);
+    },
+    d(l) {
+      l && A(t), n && n.d(l);
+    }
+  };
+}
+function gt(e) {
+  let t, n;
+  return {
+    c() {
+      t = Q("p"), n = q(
+        /*loading_text*/
+        e[9]
+      ), G(t, "class", "loading svelte-1yserjw");
+    },
+    m(l, i) {
+      S(l, t, i), ne(t, n);
+    },
+    p(l, i) {
+      i[0] & /*loading_text*/
+      512 && R(
+        n,
+        /*loading_text*/
+        l[9]
+      );
+    },
+    d(l) {
+      l && A(t);
+    }
+  };
+}
+function Yl(e) {
+  let t, n, l, i, s;
+  const f = [Bl, zl], r = [];
+  function o(a, u) {
+    return (
+      /*status*/
+      a[4] === "pending" ? 0 : (
+        /*status*/
+        a[4] === "error" ? 1 : -1
+      )
+    );
+  }
+  return ~(n = o(e)) && (l = r[n] = f[n](e)), {
+    c() {
+      t = Q("div"), l && l.c(), G(t, "class", i = "wrap " + /*variant*/
+      e[8] + " " + /*show_progress*/
+      e[6] + " svelte-1yserjw"), D(t, "hide", !/*status*/
+      e[4] || /*status*/
+      e[4] === "complete" || /*show_progress*/
+      e[6] === "hidden"), D(
+        t,
+        "translucent",
+        /*variant*/
+        e[8] === "center" && /*status*/
+        (e[4] === "pending" || /*status*/
+        e[4] === "error") || /*translucent*/
+        e[11] || /*show_progress*/
+        e[6] === "minimal"
+      ), D(
+        t,
+        "generating",
+        /*status*/
+        e[4] === "generating"
+      ), D(
+        t,
+        "border",
+        /*border*/
+        e[12]
+      ), ee(
+        t,
+        "position",
+        /*absolute*/
+        e[10] ? "absolute" : "static"
+      ), ee(
+        t,
+        "padding",
+        /*absolute*/
+        e[10] ? "0" : "var(--size-8) 0"
+      );
+    },
+    m(a, u) {
+      S(a, t, u), ~n && r[n].m(t, null), e[31](t), s = !0;
+    },
+    p(a, u) {
+      let m = n;
+      n = o(a), n === m ? ~n && r[n].p(a, u) : (l && (Zt(), _e(r[m], 1, 1, () => {
+        r[m] = null;
+      }), Ot()), ~n ? (l = r[n], l ? l.p(a, u) : (l = r[n] = f[n](a), l.c()), ce(l, 1), l.m(t, null)) : l = null), (!s || u[0] & /*variant, show_progress*/
+      320 && i !== (i = "wrap " + /*variant*/
+      a[8] + " " + /*show_progress*/
+      a[6] + " svelte-1yserjw")) && G(t, "class", i), (!s || u[0] & /*variant, show_progress, status, show_progress*/
+      336) && D(t, "hide", !/*status*/
+      a[4] || /*status*/
+      a[4] === "complete" || /*show_progress*/
+      a[6] === "hidden"), (!s || u[0] & /*variant, show_progress, variant, status, translucent, show_progress*/
+      2384) && D(
+        t,
+        "translucent",
+        /*variant*/
+        a[8] === "center" && /*status*/
+        (a[4] === "pending" || /*status*/
+        a[4] === "error") || /*translucent*/
+        a[11] || /*show_progress*/
+        a[6] === "minimal"
+      ), (!s || u[0] & /*variant, show_progress, status*/
+      336) && D(
+        t,
+        "generating",
+        /*status*/
+        a[4] === "generating"
+      ), (!s || u[0] & /*variant, show_progress, border*/
+      4416) && D(
+        t,
+        "border",
+        /*border*/
+        a[12]
+      ), u[0] & /*absolute*/
+      1024 && ee(
+        t,
+        "position",
+        /*absolute*/
+        a[10] ? "absolute" : "static"
+      ), u[0] & /*absolute*/
+      1024 && ee(
+        t,
+        "padding",
+        /*absolute*/
+        a[10] ? "0" : "var(--size-8) 0"
+      );
+    },
+    i(a) {
+      s || (ce(l), s = !0);
+    },
+    o(a) {
+      _e(l), s = !1;
+    },
+    d(a) {
+      a && A(t), ~n && r[n].d(), e[31](null);
+    }
+  };
+}
+let Ae = [], Re = !1;
+async function Kl(e, t = !0) {
+  if (!(window.__gradio_mode__ === "website" || window.__gradio_mode__ !== "app" && t !== !0)) {
+    if (Ae.push(e), !Re)
+      Re = !0;
+    else
+      return;
+    await Pl(), requestAnimationFrame(() => {
+      let n = [0, 0];
+      for (let l = 0; l < Ae.length; l++) {
+        const s = Ae[l].getBoundingClientRect();
+        (l === 0 || s.top + window.scrollY <= n[0]) && (n[0] = s.top + window.scrollY, n[1] = l);
+      }
+      window.scrollTo({ top: n[0] - 20, behavior: "smooth" }), Re = !1, Ae = [];
+    });
+  }
+}
+function Gl(e, t, n) {
+  let l, { $$slots: i = {}, $$scope: s } = t, { i18n: f } = t, { eta: r = null } = t, { queue_position: o } = t, { queue_size: a } = t, { status: u } = t, { scroll_to_output: m = !1 } = t, { timer: h = !0 } = t, { show_progress: d = "full" } = t, { message: p = null } = t, { progress: b = null } = t, { variant: v = "default" } = t, { loading_text: w = "Loading..." } = t, { absolute: k = !0 } = t, { translucent: g = !1 } = t, { border: _ = !1 } = t, { autoscroll: C } = t, c, E = !1, N = 0, F = 0, T = null, M = null, me = 0, H = null, X, Y = null, le = !0;
+  const ye = () => {
+    n(0, r = n(26, T = n(19, j = null))), n(24, N = performance.now()), n(25, F = 0), E = !0, ke();
+  };
+  function ke() {
+    requestAnimationFrame(() => {
+      n(25, F = (performance.now() - N) / 1e3), E && ke();
+    });
+  }
+  function he() {
+    n(25, F = 0), n(0, r = n(26, T = n(19, j = null))), E && (E = !1);
+  }
+  Vl(() => {
+    E && he();
+  });
+  let j = null;
+  function sn(y) {
+    lt[y ? "unshift" : "push"](() => {
+      Y = y, n(16, Y), n(7, b), n(14, H), n(15, X);
+    });
+  }
+  function rn(y) {
+    lt[y ? "unshift" : "push"](() => {
+      c = y, n(13, c);
+    });
+  }
+  return e.$$set = (y) => {
+    "i18n" in y && n(1, f = y.i18n), "eta" in y && n(0, r = y.eta), "queue_position" in y && n(2, o = y.queue_position), "queue_size" in y && n(3, a = y.queue_size), "status" in y && n(4, u = y.status), "scroll_to_output" in y && n(21, m = y.scroll_to_output), "timer" in y && n(5, h = y.timer), "show_progress" in y && n(6, d = y.show_progress), "message" in y && n(22, p = y.message), "progress" in y && n(7, b = y.progress), "variant" in y && n(8, v = y.variant), "loading_text" in y && n(9, w = y.loading_text), "absolute" in y && n(10, k = y.absolute), "translucent" in y && n(11, g = y.translucent), "border" in y && n(12, _ = y.border), "autoscroll" in y && n(23, C = y.autoscroll), "$$scope" in y && n(28, s = y.$$scope);
+  }, e.$$.update = () => {
+    e.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
+    218103809 && (r === null && n(0, r = T), r != null && T !== r && (n(27, M = (performance.now() - N) / 1e3 + r), n(19, j = M.toFixed(1)), n(26, T = r))), e.$$.dirty[0] & /*eta_from_start, timer_diff*/
+    167772160 && n(17, me = M === null || M <= 0 || !F ? null : Math.min(F / M, 1)), e.$$.dirty[0] & /*progress*/
+    128 && b != null && n(18, le = !1), e.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
+    114816 && (b != null ? n(14, H = b.map((y) => {
+      if (y.index != null && y.length != null)
+        return y.index / y.length;
+      if (y.progress != null)
+        return y.progress;
+    })) : n(14, H = null), H ? (n(15, X = H[H.length - 1]), Y && (X === 0 ? n(16, Y.style.transition = "0", Y) : n(16, Y.style.transition = "150ms", Y))) : n(15, X = void 0)), e.$$.dirty[0] & /*status*/
+    16 && (u === "pending" ? ye() : he()), e.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
+    10493968 && c && m && (u === "pending" || u === "complete") && Kl(c, C), e.$$.dirty[0] & /*status, message*/
+    4194320, e.$$.dirty[0] & /*timer_diff*/
+    33554432 && n(20, l = F.toFixed(1));
+  }, [
+    r,
+    f,
+    o,
+    a,
+    u,
+    h,
+    d,
+    b,
+    v,
+    w,
+    k,
+    g,
+    _,
+    c,
+    H,
+    X,
+    Y,
+    me,
+    le,
+    j,
+    l,
+    m,
+    p,
+    C,
+    N,
+    F,
+    T,
+    M,
+    s,
+    i,
+    sn,
+    rn
+  ];
+}
+class Wl extends kl {
+  constructor(t) {
+    super(), El(
+      this,
+      t,
+      Gl,
+      Yl,
+      Fl,
+      {
+        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]
+    );
+  }
+}
+var Jl = { value: () => {
+} };
+function Ht() {
+  for (var e = 0, t = arguments.length, n = {}, l; e < t; ++e) {
+    if (!(l = arguments[e] + "") || l in n || /[\s.]/.test(l))
+      throw new Error("illegal type: " + l);
+    n[l] = [];
+  }
+  return new Me(n);
+}
+function Me(e) {
+  this._ = e;
+}
+function Ql(e, t) {
+  return e.trim().split(/^|\s+/).map(function(n) {
+    var l = "", i = n.indexOf(".");
+    if (i >= 0 && (l = n.slice(i + 1), n = n.slice(0, i)), n && !t.hasOwnProperty(n))
+      throw new Error("unknown type: " + n);
+    return { type: n, name: l };
+  });
+}
+Me.prototype = Ht.prototype = {
+  constructor: Me,
+  on: function(e, t) {
+    var n = this._, l = Ql(e + "", n), i, s = -1, f = l.length;
+    if (arguments.length < 2) {
+      for (; ++s < f; )
+        if ((i = (e = l[s]).type) && (i = jl(n[i], e.name)))
+          return i;
+      return;
+    }
+    if (t != null && typeof t != "function")
+      throw new Error("invalid callback: " + t);
+    for (; ++s < f; )
+      if (i = (e = l[s]).type)
+        n[i] = bt(n[i], e.name, t);
+      else if (t == null)
+        for (i in n)
+          n[i] = bt(n[i], e.name, null);
+    return this;
+  },
+  copy: function() {
+    var e = {}, t = this._;
+    for (var n in t)
+      e[n] = t[n].slice();
+    return new Me(e);
+  },
+  call: function(e, t) {
+    if ((i = arguments.length - 2) > 0)
+      for (var n = new Array(i), l = 0, i, s; l < i; ++l)
+        n[l] = arguments[l + 2];
+    if (!this._.hasOwnProperty(e))
+      throw new Error("unknown type: " + e);
+    for (s = this._[e], l = 0, i = s.length; l < i; ++l)
+      s[l].value.apply(t, n);
+  },
+  apply: function(e, t, n) {
+    if (!this._.hasOwnProperty(e))
+      throw new Error("unknown type: " + e);
+    for (var l = this._[e], i = 0, s = l.length; i < s; ++i)
+      l[i].value.apply(t, n);
+  }
+};
+function jl(e, t) {
+  for (var n = 0, l = e.length, i; n < l; ++n)
+    if ((i = e[n]).name === t)
+      return i.value;
+}
+function bt(e, t, n) {
+  for (var l = 0, i = e.length; l < i; ++l)
+    if (e[l].name === t) {
+      e[l] = Jl, e = e.slice(0, l).concat(e.slice(l + 1));
+      break;
+    }
+  return n != null && e.push({ name: t, value: n }), e;
+}
+var Ze = "http://www.w3.org/1999/xhtml";
+const wt = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: Ze,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
+function Xt(e) {
+  var t = e += "", n = t.indexOf(":");
+  return n >= 0 && (t = e.slice(0, n)) !== "xmlns" && (e = e.slice(n + 1)), wt.hasOwnProperty(t) ? { space: wt[t], local: e } : e;
+}
+function xl(e) {
+  return function() {
+    var t = this.ownerDocument, n = this.namespaceURI;
+    return n === Ze && t.documentElement.namespaceURI === Ze ? t.createElement(e) : t.createElementNS(n, e);
+  };
+}
+function $l(e) {
+  return function() {
+    return this.ownerDocument.createElementNS(e.space, e.local);
+  };
+}
+function Yt(e) {
+  var t = Xt(e);
+  return (t.local ? $l : xl)(t);
+}
+function ei() {
+}
+function Kt(e) {
+  return e == null ? ei : function() {
+    return this.querySelector(e);
+  };
+}
+function ti(e) {
+  typeof e != "function" && (e = Kt(e));
+  for (var t = this._groups, n = t.length, l = new Array(n), i = 0; i < n; ++i)
+    for (var s = t[i], f = s.length, r = l[i] = new Array(f), o, a, u = 0; u < f; ++u)
+      (o = s[u]) && (a = e.call(o, o.__data__, u, s)) && ("__data__" in o && (a.__data__ = o.__data__), r[u] = a);
+  return new I(l, this._parents);
+}
+function ni(e) {
+  return e == null ? [] : Array.isArray(e) ? e : Array.from(e);
+}
+function li() {
+  return [];
+}
+function ii(e) {
+  return e == null ? li : function() {
+    return this.querySelectorAll(e);
+  };
+}
+function si(e) {
+  return function() {
+    return ni(e.apply(this, arguments));
+  };
+}
+function ri(e) {
+  typeof e == "function" ? e = si(e) : e = ii(e);
+  for (var t = this._groups, n = t.length, l = [], i = [], s = 0; s < n; ++s)
+    for (var f = t[s], r = f.length, o, a = 0; a < r; ++a)
+      (o = f[a]) && (l.push(e.call(o, o.__data__, a, f)), i.push(o));
+  return new I(l, i);
+}
+function oi(e) {
+  return function() {
+    return this.matches(e);
+  };
+}
+function Gt(e) {
+  return function(t) {
+    return t.matches(e);
+  };
+}
+var fi = Array.prototype.find;
+function ai(e) {
+  return function() {
+    return fi.call(this.children, e);
+  };
+}
+function ui() {
+  return this.firstElementChild;
+}
+function ci(e) {
+  return this.select(e == null ? ui : ai(typeof e == "function" ? e : Gt(e)));
+}
+var _i = Array.prototype.filter;
+function di() {
+  return Array.from(this.children);
+}
+function mi(e) {
+  return function() {
+    return _i.call(this.children, e);
+  };
+}
+function hi(e) {
+  return this.selectAll(e == null ? di : mi(typeof e == "function" ? e : Gt(e)));
+}
+function pi(e) {
+  typeof e != "function" && (e = oi(e));
+  for (var t = this._groups, n = t.length, l = new Array(n), i = 0; i < n; ++i)
+    for (var s = t[i], f = s.length, r = l[i] = [], o, a = 0; a < f; ++a)
+      (o = s[a]) && e.call(o, o.__data__, a, s) && r.push(o);
+  return new I(l, this._parents);
+}
+function Wt(e) {
+  return new Array(e.length);
+}
+function gi() {
+  return new I(this._enter || this._groups.map(Wt), this._parents);
+}
+function Te(e, t) {
+  this.ownerDocument = e.ownerDocument, this.namespaceURI = e.namespaceURI, this._next = null, this._parent = e, this.__data__ = t;
+}
+Te.prototype = {
+  constructor: Te,
+  appendChild: function(e) {
+    return this._parent.insertBefore(e, this._next);
+  },
+  insertBefore: function(e, t) {
+    return this._parent.insertBefore(e, t);
+  },
+  querySelector: function(e) {
+    return this._parent.querySelector(e);
+  },
+  querySelectorAll: function(e) {
+    return this._parent.querySelectorAll(e);
+  }
+};
+function bi(e) {
+  return function() {
+    return e;
+  };
+}
+function wi(e, t, n, l, i, s) {
+  for (var f = 0, r, o = t.length, a = s.length; f < a; ++f)
+    (r = t[f]) ? (r.__data__ = s[f], l[f] = r) : n[f] = new Te(e, s[f]);
+  for (; f < o; ++f)
+    (r = t[f]) && (i[f] = r);
+}
+function vi(e, t, n, l, i, s, f) {
+  var r, o, a = /* @__PURE__ */ new Map(), u = t.length, m = s.length, h = new Array(u), d;
+  for (r = 0; r < u; ++r)
+    (o = t[r]) && (h[r] = d = f.call(o, o.__data__, r, t) + "", a.has(d) ? i[r] = o : a.set(d, o));
+  for (r = 0; r < m; ++r)
+    d = f.call(e, s[r], r, s) + "", (o = a.get(d)) ? (l[r] = o, o.__data__ = s[r], a.delete(d)) : n[r] = new Te(e, s[r]);
+  for (r = 0; r < u; ++r)
+    (o = t[r]) && a.get(h[r]) === o && (i[r] = o);
+}
+function yi(e) {
+  return e.__data__;
+}
+function ki(e, t) {
+  if (!arguments.length)
+    return Array.from(this, yi);
+  var n = t ? vi : wi, l = this._parents, i = this._groups;
+  typeof e != "function" && (e = bi(e));
+  for (var s = i.length, f = new Array(s), r = new Array(s), o = new Array(s), a = 0; a < s; ++a) {
+    var u = l[a], m = i[a], h = m.length, d = Ci(e.call(u, u && u.__data__, a, l)), p = d.length, b = r[a] = new Array(p), v = f[a] = new Array(p), w = o[a] = new Array(h);
+    n(u, m, b, v, w, d, t);
+    for (var k = 0, g = 0, _, C; k < p; ++k)
+      if (_ = b[k]) {
+        for (k >= g && (g = k + 1); !(C = v[g]) && ++g < p; )
+          ;
+        _._next = C || null;
+      }
+  }
+  return f = new I(f, l), f._enter = r, f._exit = o, f;
+}
+function Ci(e) {
+  return typeof e == "object" && "length" in e ? e : Array.from(e);
+}
+function Ai() {
+  return new I(this._exit || this._groups.map(Wt), this._parents);
+}
+function Si(e, t, n) {
+  var l = this.enter(), i = this, s = this.exit();
+  return typeof e == "function" ? (l = e(l), l && (l = l.selection())) : l = l.append(e + ""), t != null && (i = t(i), i && (i = i.selection())), n == null ? s.remove() : n(s), l && i ? l.merge(i).order() : i;
+}
+function Ni(e) {
+  for (var t = e.selection ? e.selection() : e, n = this._groups, l = t._groups, i = n.length, s = l.length, f = Math.min(i, s), r = new Array(i), o = 0; o < f; ++o)
+    for (var a = n[o], u = l[o], m = a.length, h = r[o] = new Array(m), d, p = 0; p < m; ++p)
+      (d = a[p] || u[p]) && (h[p] = d);
+  for (; o < i; ++o)
+    r[o] = n[o];
+  return new I(r, this._parents);
+}
+function Li() {
+  for (var e = this._groups, t = -1, n = e.length; ++t < n; )
+    for (var l = e[t], i = l.length - 1, s = l[i], f; --i >= 0; )
+      (f = l[i]) && (s && f.compareDocumentPosition(s) ^ 4 && s.parentNode.insertBefore(f, s), s = f);
+  return this;
+}
+function Ei(e) {
+  e || (e = qi);
+  function t(m, h) {
+    return m && h ? e(m.__data__, h.__data__) : !m - !h;
+  }
+  for (var n = this._groups, l = n.length, i = new Array(l), s = 0; s < l; ++s) {
+    for (var f = n[s], r = f.length, o = i[s] = new Array(r), a, u = 0; u < r; ++u)
+      (a = f[u]) && (o[u] = a);
+    o.sort(t);
+  }
+  return new I(i, this._parents).order();
+}
+function qi(e, t) {
+  return e < t ? -1 : e > t ? 1 : e >= t ? 0 : NaN;
+}
+function Fi() {
+  var e = arguments[0];
+  return arguments[0] = this, e.apply(null, arguments), this;
+}
+function Mi() {
+  return Array.from(this);
+}
+function Pi() {
+  for (var e = this._groups, t = 0, n = e.length; t < n; ++t)
+    for (var l = e[t], i = 0, s = l.length; i < s; ++i) {
+      var f = l[i];
+      if (f)
+        return f;
+    }
+  return null;
+}
+function Vi() {
+  let e = 0;
+  for (const t of this)
+    ++e;
+  return e;
+}
+function Ti() {
+  return !this.node();
+}
+function zi(e) {
+  for (var t = this._groups, n = 0, l = t.length; n < l; ++n)
+    for (var i = t[n], s = 0, f = i.length, r; s < f; ++s)
+      (r = i[s]) && e.call(r, r.__data__, s, i);
+  return this;
+}
+function Bi(e) {
+  return function() {
+    this.removeAttribute(e);
+  };
+}
+function Di(e) {
+  return function() {
+    this.removeAttributeNS(e.space, e.local);
+  };
+}
+function Ri(e, t) {
+  return function() {
+    this.setAttribute(e, t);
+  };
+}
+function Ii(e, t) {
+  return function() {
+    this.setAttributeNS(e.space, e.local, t);
+  };
+}
+function Oi(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    n == null ? this.removeAttribute(e) : this.setAttribute(e, n);
+  };
+}
+function Ui(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    n == null ? this.removeAttributeNS(e.space, e.local) : this.setAttributeNS(e.space, e.local, n);
+  };
+}
+function Zi(e, t) {
+  var n = Xt(e);
+  if (arguments.length < 2) {
+    var l = this.node();
+    return n.local ? l.getAttributeNS(n.space, n.local) : l.getAttribute(n);
+  }
+  return this.each((t == null ? n.local ? Di : Bi : typeof t == "function" ? n.local ? Ui : Oi : n.local ? Ii : Ri)(n, t));
+}
+function Jt(e) {
+  return e.ownerDocument && e.ownerDocument.defaultView || e.document && e || e.defaultView;
+}
+function Hi(e) {
+  return function() {
+    this.style.removeProperty(e);
+  };
+}
+function Xi(e, t, n) {
+  return function() {
+    this.style.setProperty(e, t, n);
+  };
+}
+function Yi(e, t, n) {
+  return function() {
+    var l = t.apply(this, arguments);
+    l == null ? this.style.removeProperty(e) : this.style.setProperty(e, l, n);
+  };
+}
+function Ki(e, t, n) {
+  return arguments.length > 1 ? this.each((t == null ? Hi : typeof t == "function" ? Yi : Xi)(e, t, n ?? "")) : Gi(this.node(), e);
+}
+function Gi(e, t) {
+  return e.style.getPropertyValue(t) || Jt(e).getComputedStyle(e, null).getPropertyValue(t);
+}
+function Wi(e) {
+  return function() {
+    delete this[e];
+  };
+}
+function Ji(e, t) {
+  return function() {
+    this[e] = t;
+  };
+}
+function Qi(e, t) {
+  return function() {
+    var n = t.apply(this, arguments);
+    n == null ? delete this[e] : this[e] = n;
+  };
+}
+function ji(e, t) {
+  return arguments.length > 1 ? this.each((t == null ? Wi : typeof t == "function" ? Qi : Ji)(e, t)) : this.node()[e];
+}
+function Qt(e) {
+  return e.trim().split(/^|\s+/);
+}
+function Ke(e) {
+  return e.classList || new jt(e);
+}
+function jt(e) {
+  this._node = e, this._names = Qt(e.getAttribute("class") || "");
+}
+jt.prototype = {
+  add: function(e) {
+    var t = this._names.indexOf(e);
+    t < 0 && (this._names.push(e), this._node.setAttribute("class", this._names.join(" ")));
+  },
+  remove: function(e) {
+    var t = this._names.indexOf(e);
+    t >= 0 && (this._names.splice(t, 1), this._node.setAttribute("class", this._names.join(" ")));
+  },
+  contains: function(e) {
+    return this._names.indexOf(e) >= 0;
+  }
+};
+function xt(e, t) {
+  for (var n = Ke(e), l = -1, i = t.length; ++l < i; )
+    n.add(t[l]);
+}
+function $t(e, t) {
+  for (var n = Ke(e), l = -1, i = t.length; ++l < i; )
+    n.remove(t[l]);
+}
+function xi(e) {
+  return function() {
+    xt(this, e);
+  };
+}
+function $i(e) {
+  return function() {
+    $t(this, e);
+  };
+}
+function es(e, t) {
+  return function() {
+    (t.apply(this, arguments) ? xt : $t)(this, e);
+  };
+}
+function ts(e, t) {
+  var n = Qt(e + "");
+  if (arguments.length < 2) {
+    for (var l = Ke(this.node()), i = -1, s = n.length; ++i < s; )
+      if (!l.contains(n[i]))
+        return !1;
+    return !0;
+  }
+  return this.each((typeof t == "function" ? es : t ? xi : $i)(n, t));
+}
+function ns() {
+  this.textContent = "";
+}
+function ls(e) {
+  return function() {
+    this.textContent = e;
+  };
+}
+function is(e) {
+  return function() {
+    var t = e.apply(this, arguments);
+    this.textContent = t ?? "";
+  };
+}
+function ss(e) {
+  return arguments.length ? this.each(e == null ? ns : (typeof e == "function" ? is : ls)(e)) : this.node().textContent;
+}
+function rs() {
+  this.innerHTML = "";
+}
+function os(e) {
+  return function() {
+    this.innerHTML = e;
+  };
+}
+function fs(e) {
+  return function() {
+    var t = e.apply(this, arguments);
+    this.innerHTML = t ?? "";
+  };
+}
+function as(e) {
+  return arguments.length ? this.each(e == null ? rs : (typeof e == "function" ? fs : os)(e)) : this.node().innerHTML;
+}
+function us() {
+  this.nextSibling && this.parentNode.appendChild(this);
+}
+function cs() {
+  return this.each(us);
+}
+function _s() {
+  this.previousSibling && this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
+function ds() {
+  return this.each(_s);
+}
+function ms(e) {
+  var t = typeof e == "function" ? e : Yt(e);
+  return this.select(function() {
+    return this.appendChild(t.apply(this, arguments));
+  });
+}
+function hs() {
+  return null;
+}
+function ps(e, t) {
+  var n = typeof e == "function" ? e : Yt(e), l = t == null ? hs : typeof t == "function" ? t : Kt(t);
+  return this.select(function() {
+    return this.insertBefore(n.apply(this, arguments), l.apply(this, arguments) || null);
+  });
+}
+function gs() {
+  var e = this.parentNode;
+  e && e.removeChild(this);
+}
+function bs() {
+  return this.each(gs);
+}
+function ws() {
+  var e = this.cloneNode(!1), t = this.parentNode;
+  return t ? t.insertBefore(e, this.nextSibling) : e;
+}
+function vs() {
+  var e = this.cloneNode(!0), t = this.parentNode;
+  return t ? t.insertBefore(e, this.nextSibling) : e;
+}
+function ys(e) {
+  return this.select(e ? vs : ws);
+}
+function ks(e) {
+  return arguments.length ? this.property("__data__", e) : this.node().__data__;
+}
+function Cs(e) {
+  return function(t) {
+    e.call(this, t, this.__data__);
+  };
+}
+function As(e) {
+  return e.trim().split(/^|\s+/).map(function(t) {
+    var n = "", l = t.indexOf(".");
+    return l >= 0 && (n = t.slice(l + 1), t = t.slice(0, l)), { type: t, name: n };
+  });
+}
+function Ss(e) {
+  return function() {
+    var t = this.__on;
+    if (t) {
+      for (var n = 0, l = -1, i = t.length, s; n < i; ++n)
+        s = t[n], (!e.type || s.type === e.type) && s.name === e.name ? this.removeEventListener(s.type, s.listener, s.options) : t[++l] = s;
+      ++l ? t.length = l : delete this.__on;
+    }
+  };
+}
+function Ns(e, t, n) {
+  return function() {
+    var l = this.__on, i, s = Cs(t);
+    if (l) {
+      for (var f = 0, r = l.length; f < r; ++f)
+        if ((i = l[f]).type === e.type && i.name === e.name) {
+          this.removeEventListener(i.type, i.listener, i.options), this.addEventListener(i.type, i.listener = s, i.options = n), i.value = t;
+          return;
+        }
+    }
+    this.addEventListener(e.type, s, n), i = { type: e.type, name: e.name, value: t, listener: s, options: n }, l ? l.push(i) : this.__on = [i];
+  };
+}
+function Ls(e, t, n) {
+  var l = As(e + ""), i, s = l.length, f;
+  if (arguments.length < 2) {
+    var r = this.node().__on;
+    if (r) {
+      for (var o = 0, a = r.length, u; o < a; ++o)
+        for (i = 0, u = r[o]; i < s; ++i)
+          if ((f = l[i]).type === u.type && f.name === u.name)
+            return u.value;
+    }
+    return;
+  }
+  for (r = t ? Ns : Ss, i = 0; i < s; ++i)
+    this.each(r(l[i], t, n));
+  return this;
+}
+function en(e, t, n) {
+  var l = Jt(e), i = l.CustomEvent;
+  typeof i == "function" ? i = new i(t, n) : (i = l.document.createEvent("Event"), n ? (i.initEvent(t, n.bubbles, n.cancelable), i.detail = n.detail) : i.initEvent(t, !1, !1)), e.dispatchEvent(i);
+}
+function Es(e, t) {
+  return function() {
+    return en(this, e, t);
+  };
+}
+function qs(e, t) {
+  return function() {
+    return en(this, e, t.apply(this, arguments));
+  };
+}
+function Fs(e, t) {
+  return this.each((typeof t == "function" ? qs : Es)(e, t));
+}
+function* Ms() {
+  for (var e = this._groups, t = 0, n = e.length; t < n; ++t)
+    for (var l = e[t], i = 0, s = l.length, f; i < s; ++i)
+      (f = l[i]) && (yield f);
+}
+var Ps = [null];
+function I(e, t) {
+  this._groups = e, this._parents = t;
+}
+function Vs() {
+  return this;
+}
+I.prototype = {
+  constructor: I,
+  select: ti,
+  selectAll: ri,
+  selectChild: ci,
+  selectChildren: hi,
+  filter: pi,
+  data: ki,
+  enter: gi,
+  exit: Ai,
+  join: Si,
+  merge: Ni,
+  selection: Vs,
+  order: Li,
+  sort: Ei,
+  call: Fi,
+  nodes: Mi,
+  node: Pi,
+  size: Vi,
+  empty: Ti,
+  each: zi,
+  attr: Zi,
+  style: Ki,
+  property: ji,
+  classed: ts,
+  text: ss,
+  html: as,
+  raise: cs,
+  lower: ds,
+  append: ms,
+  insert: ps,
+  remove: bs,
+  clone: ys,
+  datum: ks,
+  on: Ls,
+  dispatch: Fs,
+  [Symbol.iterator]: Ms
+};
+function we(e) {
+  return typeof e == "string" ? new I([[document.querySelector(e)]], [document.documentElement]) : new I([[e]], Ps);
+}
+function Ts(e) {
+  let t;
+  for (; t = e.sourceEvent; )
+    e = t;
+  return e;
+}
+function vt(e, t) {
+  if (e = Ts(e), t === void 0 && (t = e.currentTarget), t) {
+    var n = t.ownerSVGElement || t;
+    if (n.createSVGPoint) {
+      var l = n.createSVGPoint();
+      return l.x = e.clientX, l.y = e.clientY, l = l.matrixTransform(t.getScreenCTM().inverse()), [l.x, l.y];
+    }
+    if (t.getBoundingClientRect) {
+      var i = t.getBoundingClientRect();
+      return [e.clientX - i.left - t.clientLeft, e.clientY - i.top - t.clientTop];
+    }
+  }
+  return [e.pageX, e.pageY];
+}
+const zs = { passive: !1 }, ve = { capture: !0, passive: !1 };
+function Ie(e) {
+  e.stopImmediatePropagation();
+}
+function ue(e) {
+  e.preventDefault(), e.stopImmediatePropagation();
+}
+function Bs(e) {
+  var t = e.document.documentElement, n = we(e).on("dragstart.drag", ue, ve);
+  "onselectstart" in t ? n.on("selectstart.drag", ue, ve) : (t.__noselect = t.style.MozUserSelect, t.style.MozUserSelect = "none");
+}
+function Ds(e, t) {
+  var n = e.document.documentElement, l = we(e).on("dragstart.drag", null);
+  t && (l.on("click.drag", ue, ve), setTimeout(function() {
+    l.on("click.drag", null);
+  }, 0)), "onselectstart" in n ? l.on("selectstart.drag", null) : (n.style.MozUserSelect = n.__noselect, delete n.__noselect);
+}
+const Se = (e) => () => e;
+function He(e, {
+  sourceEvent: t,
+  subject: n,
+  target: l,
+  identifier: i,
+  active: s,
+  x: f,
+  y: r,
+  dx: o,
+  dy: a,
+  dispatch: u
+}) {
+  Object.defineProperties(this, {
+    type: { value: e, enumerable: !0, configurable: !0 },
+    sourceEvent: { value: t, enumerable: !0, configurable: !0 },
+    subject: { value: n, enumerable: !0, configurable: !0 },
+    target: { value: l, enumerable: !0, configurable: !0 },
+    identifier: { value: i, enumerable: !0, configurable: !0 },
+    active: { value: s, enumerable: !0, configurable: !0 },
+    x: { value: f, enumerable: !0, configurable: !0 },
+    y: { value: r, enumerable: !0, configurable: !0 },
+    dx: { value: o, enumerable: !0, configurable: !0 },
+    dy: { value: a, enumerable: !0, configurable: !0 },
+    _: { value: u }
+  });
+}
+He.prototype.on = function() {
+  var e = this._.on.apply(this._, arguments);
+  return e === this._ ? this : e;
+};
+function Rs(e) {
+  return !e.ctrlKey && !e.button;
+}
+function Is() {
+  return this.parentNode;
+}
+function Os(e, t) {
+  return t ?? { x: e.x, y: e.y };
+}
+function Us() {
+  return navigator.maxTouchPoints || "ontouchstart" in this;
+}
+function Zs() {
+  var e = Rs, t = Is, n = Os, l = Us, i = {}, s = Ht("start", "drag", "end"), f = 0, r, o, a, u, m = 0;
+  function h(_) {
+    _.on("mousedown.drag", d).filter(l).on("touchstart.drag", v).on("touchmove.drag", w, zs).on("touchend.drag touchcancel.drag", k).style("touch-action", "none").style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+  }
+  function d(_, C) {
+    if (!(u || !e.call(this, _, C))) {
+      var c = g(this, t.call(this, _, C), _, C, "mouse");
+      c && (we(_.view).on("mousemove.drag", p, ve).on("mouseup.drag", b, ve), Bs(_.view), Ie(_), a = !1, r = _.clientX, o = _.clientY, c("start", _));
+    }
+  }
+  function p(_) {
+    if (ue(_), !a) {
+      var C = _.clientX - r, c = _.clientY - o;
+      a = C * C + c * c > m;
+    }
+    i.mouse("drag", _);
+  }
+  function b(_) {
+    we(_.view).on("mousemove.drag mouseup.drag", null), Ds(_.view, a), ue(_), i.mouse("end", _);
+  }
+  function v(_, C) {
+    if (e.call(this, _, C)) {
+      var c = _.changedTouches, E = t.call(this, _, C), N = c.length, F, T;
+      for (F = 0; F < N; ++F)
+        (T = g(this, E, _, C, c[F].identifier, c[F])) && (Ie(_), T("start", _, c[F]));
+    }
+  }
+  function w(_) {
+    var C = _.changedTouches, c = C.length, E, N;
+    for (E = 0; E < c; ++E)
+      (N = i[C[E].identifier]) && (ue(_), N("drag", _, C[E]));
+  }
+  function k(_) {
+    var C = _.changedTouches, c = C.length, E, N;
+    for (u && clearTimeout(u), u = setTimeout(function() {
+      u = null;
+    }, 500), E = 0; E < c; ++E)
+      (N = i[C[E].identifier]) && (Ie(_), N("end", _, C[E]));
+  }
+  function g(_, C, c, E, N, F) {
+    var T = s.copy(), M = vt(F || c, C), me, H, X;
+    if ((X = n.call(_, new He("beforestart", {
+      sourceEvent: c,
+      target: h,
+      identifier: N,
+      active: f,
+      x: M[0],
+      y: M[1],
+      dx: 0,
+      dy: 0,
+      dispatch: T
+    }), E)) != null)
+      return me = X.x - M[0] || 0, H = X.y - M[1] || 0, function Y(le, ye, ke) {
+        var he = M, j;
+        switch (le) {
+          case "start":
+            i[N] = Y, j = f++;
+            break;
+          case "end":
+            delete i[N], --f;
+          case "drag":
+            M = vt(ke || ye, C), j = f;
+            break;
+        }
+        T.call(
+          le,
+          _,
+          new He(le, {
+            sourceEvent: ye,
+            subject: X,
+            target: h,
+            identifier: N,
+            active: j,
+            x: M[0] + me,
+            y: M[1] + H,
+            dx: M[0] - he[0],
+            dy: M[1] - he[1],
+            dispatch: T
+          }),
+          E
+        );
+      };
+  }
+  return h.filter = function(_) {
+    return arguments.length ? (e = typeof _ == "function" ? _ : Se(!!_), h) : e;
+  }, h.container = function(_) {
+    return arguments.length ? (t = typeof _ == "function" ? _ : Se(_), h) : t;
+  }, h.subject = function(_) {
+    return arguments.length ? (n = typeof _ == "function" ? _ : Se(_), h) : n;
+  }, h.touchable = function(_) {
+    return arguments.length ? (l = typeof _ == "function" ? _ : Se(!!_), h) : l;
+  }, h.on = function() {
+    var _ = s.on.apply(s, arguments);
+    return _ === s ? h : _;
+  }, h.clickDistance = function(_) {
+    return arguments.length ? (m = (_ = +_) * _, h) : Math.sqrt(m);
+  }, h;
+}
+const {
+  SvelteComponent: Hs,
+  append: Xs,
+  attr: x,
+  detach: Ys,
+  init: Ks,
+  insert: Gs,
+  noop: yt,
+  safe_not_equal: Ws,
+  svg_element: kt
+} = window.__gradio__svelte__internal;
+function Js(e) {
+  let t, n;
+  return {
+    c() {
+      t = kt("svg"), n = kt("path"), x(n, "fill", "currentColor"), x(n, "d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"), x(t, "xmlns", "http://www.w3.org/2000/svg"), x(t, "width", "1em"), x(t, "height", "1em"), x(t, "viewBox", "0 0 512 512"), x(
+        t,
+        "class",
+        /*classNames*/
+        e[0]
+      );
+    },
+    m(l, i) {
+      Gs(l, t, i), Xs(t, n);
+    },
+    p(l, [i]) {
+      i & /*classNames*/
+      1 && x(
+        t,
+        "class",
+        /*classNames*/
+        l[0]
+      );
+    },
+    i: yt,
+    o: yt,
+    d(l) {
+      l && Ys(t);
+    }
+  };
+}
+function Qs(e, t, n) {
+  let { classNames: l = "" } = t;
+  return e.$$set = (i) => {
+    "classNames" in i && n(0, l = i.classNames);
+  }, [l];
+}
+class js extends Hs {
+  constructor(t) {
+    super(), Ks(this, t, Qs, Js, Ws, { classNames: 0 });
+  }
+}
+const {
+  SvelteComponent: xs,
+  append: B,
+  attr: V,
+  binding_callbacks: Ct,
+  create_component: $s,
+  destroy_component: er,
+  detach: tr,
+  element: Z,
+  init: nr,
+  insert: lr,
+  listen: J,
+  mount_component: ir,
+  run_all: sr,
+  safe_not_equal: rr,
+  set_data: or,
+  set_input_value: At,
+  set_style: St,
+  space: Nt,
+  text: fr,
+  transition_in: ar,
+  transition_out: ur
+} = window.__gradio__svelte__internal, { onMount: cr, createEventDispatcher: _r } = window.__gradio__svelte__internal;
+function dr(e) {
+  let t, n, l, i, s, f, r, o, a = (
+    /*prompt*/
+    e[0].scale.toFixed(1) + ""
+  ), u, m, h, d, p, b, v, w, k, g, _, C;
+  return w = new js({}), {
+    c() {
+      t = Z("div"), n = Z("div"), l = Z("div"), i = Z("div"), s = Z("div"), f = Z("span"), r = Z("span"), o = Z("span"), u = fr(a), m = Nt(), h = Z("div"), d = Z("input"), b = Nt(), v = Z("button"), $s(w.$$.fragment), V(o, "class", "text-black svelte-1wmphae"), V(r, "class", "text-black svelte-1wmphae"), V(f, "class", "flex text-[0.5rem] font-mono text-black dark:group-hover:text-white svelte-1wmphae"), V(s, "class", "bottom-full p-1 svelte-1wmphae"), V(i, "class", "relative svelte-1wmphae"), V(l, "class", "absolute z-10 flex items-center justify-center w-[2.5em] svelte-1wmphae"), V(d, "type", "text"), V(d, "placeholder", "Prompt"), V(d, "class", p = "text-sm z-0 pl pr py-2 outline-none text-black " + /*prompt*/
+      (e[0].neg_guidance ? "line-through" : "") + " svelte-1wmphae"), St(d, "width", "calc(" + Math.max(
+        14,
+        /*prompt*/
+        e[0].prompt.length + 1
+      ) + "ch + 2em) "), V(h, "class", "relative flex z-0 svelte-1wmphae"), V(v, "class", "absolute z-1 right-1 text text-black hover:text-red-500 invisible group-hover:visible svelte-1wmphae"), V(v, "title", "Remove prompt"), V(n, "class", k = "flex justify-between items-center rounded-md overflow-hidden " + /*isDragging*/
+      (e[1] || /*isHovering*/
+      e[3] ? "select-none touch-manipulation" : "") + " svelte-1wmphae"), V(t, "class", "w-min flex flex-col group relative svelte-1wmphae");
+    },
+    m(c, E) {
+      lr(c, t, E), B(t, n), B(n, l), B(l, i), B(i, s), B(s, f), B(f, r), B(r, o), B(o, u), B(n, m), B(n, h), B(h, d), e[10](d), At(
+        d,
+        /*prompt*/
+        e[0].prompt
+      ), B(n, b), B(n, v), ir(w, v, null), e[13](t), g = !0, _ || (C = [
+        J(
+          d,
+          "keypress",
+          /*onKeyPress*/
+          e[6]
+        ),
+        J(
+          d,
+          "input",
+          /*input_input_handler*/
+          e[11]
+        ),
+        J(
+          v,
+          "click",
+          /*click_handler*/
+          e[12]
+        ),
+        J(
+          t,
+          "pointerenter",
+          /*pointerenter_handler*/
+          e[14]
+        ),
+        J(
+          t,
+          "pointerleave",
+          /*pointerleave_handler*/
+          e[15]
+        ),
+        J(
+          t,
+          "pointercancel",
+          /*pointercancel_handler*/
+          e[16]
+        ),
+        J(
+          t,
+          "pointerover",
+          /*pointerover_handler*/
+          e[17]
+        ),
+        J(
+          t,
+          "pointerout",
+          /*pointerout_handler*/
+          e[18]
+        ),
+        J(
+          t,
+          "pointerenter",
+          /*pointerenter_handler_1*/
+          e[19]
+        )
+      ], _ = !0);
+    },
+    p(c, [E]) {
+      (!g || E & /*prompt*/
+      1) && a !== (a = /*prompt*/
+      c[0].scale.toFixed(1) + "") && or(u, a), (!g || E & /*prompt*/
+      1 && p !== (p = "text-sm z-0 pl pr py-2 outline-none text-black " + /*prompt*/
+      (c[0].neg_guidance ? "line-through" : "") + " svelte-1wmphae")) && V(d, "class", p), (!g || E & /*prompt*/
+      1) && St(d, "width", "calc(" + Math.max(
+        14,
+        /*prompt*/
+        c[0].prompt.length + 1
+      ) + "ch + 2em) "), E & /*prompt*/
+      1 && d.value !== /*prompt*/
+      c[0].prompt && At(
+        d,
+        /*prompt*/
+        c[0].prompt
+      ), (!g || E & /*isDragging, isHovering*/
+      10 && k !== (k = "flex justify-between items-center rounded-md overflow-hidden " + /*isDragging*/
+      (c[1] || /*isHovering*/
+      c[3] ? "select-none touch-manipulation" : "") + " svelte-1wmphae")) && V(n, "class", k);
+    },
+    i(c) {
+      g || (ar(w.$$.fragment, c), g = !0);
+    },
+    o(c) {
+      ur(w.$$.fragment, c), g = !1;
+    },
+    d(c) {
+      c && tr(t), e[10](null), er(w), e[13](null), _ = !1, sr(C);
+    }
+  };
+}
+function mr(e, t, n) {
+  let { prompt: l } = t, { min: i = 0 } = t, { max: s = 2 } = t, { step: f = 0.01 } = t, r, o = !1, a = !1;
+  const u = _r();
+  let m = 0, h;
+  cr(() => {
+    const N = Zs().on("start", (F) => {
+      m = l.scale, n(1, o = !0);
+    }).on("drag", (F) => {
+      const { dx: T, dy: M } = F;
+      m -= M * f, m = Math.min(m, s), m = Math.max(m, i), n(0, l.scale = m, l);
+    }).on("end", (F) => {
+      n(1, o = !1);
+    });
+    we(h).call(N), r.focus();
+  });
+  function d(N) {
+    N.key === "Enter" && u("add");
+  }
+  function p(N) {
+    Ct[N ? "unshift" : "push"](() => {
+      r = N, n(2, r);
+    });
+  }
+  function b() {
+    l.prompt = this.value, n(0, l);
+  }
+  const v = () => u("remove");
+  function w(N) {
+    Ct[N ? "unshift" : "push"](() => {
+      h = N, n(4, h);
+    });
+  }
+  const k = () => n(3, a = !0), g = () => n(3, a = !1), _ = () => n(3, a = !1), C = () => n(3, a = !0), c = () => n(3, a = !1), E = () => n(3, a = !0);
+  return e.$$set = (N) => {
+    "prompt" in N && n(0, l = N.prompt), "min" in N && n(7, i = N.min), "max" in N && n(8, s = N.max), "step" in N && n(9, f = N.step);
+  }, e.$$.update = () => {
+    e.$$.dirty & /*isDragging*/
+    2 && (o ? document.body.classList.add("grabbing") : document.body.classList.remove("grabbing"));
+  }, [
+    l,
+    o,
+    r,
+    a,
+    h,
+    u,
+    d,
+    i,
+    s,
+    f,
+    p,
+    b,
+    v,
+    w,
+    k,
+    g,
+    _,
+    C,
+    c,
+    E
+  ];
+}
+class hr extends xs {
+  constructor(t) {
+    super(), nr(this, t, mr, dr, rr, { prompt: 0, min: 7, max: 8, step: 9 });
+  }
+}
+const {
+  SvelteComponent: pr,
+  append: gr,
+  attr: $,
+  detach: br,
+  init: wr,
+  insert: vr,
+  noop: Lt,
+  safe_not_equal: yr,
+  svg_element: Et
+} = window.__gradio__svelte__internal;
+function kr(e) {
+  let t, n;
+  return {
+    c() {
+      t = Et("svg"), n = Et("path"), $(n, "fill", "currentColor"), $(n, "d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"), $(t, "xmlns", "http://www.w3.org/2000/svg"), $(t, "width", "1em"), $(t, "height", "1em"), $(t, "viewBox", "0 0 512 512"), $(
+        t,
+        "class",
+        /*classNames*/
+        e[0]
+      );
+    },
+    m(l, i) {
+      vr(l, t, i), gr(t, n);
+    },
+    p(l, [i]) {
+      i & /*classNames*/
+      1 && $(
+        t,
+        "class",
+        /*classNames*/
+        l[0]
+      );
+    },
+    i: Lt,
+    o: Lt,
+    d(l) {
+      l && br(t);
+    }
+  };
+}
+function Cr(e, t, n) {
+  let { classNames: l = "" } = t;
+  return e.$$set = (i) => {
+    "classNames" in i && n(0, l = i.classNames);
+  }, [l];
+}
+class Ar extends pr {
+  constructor(t) {
+    super(), wr(this, t, Cr, kr, yr, { classNames: 0 });
+  }
+}
+const {
+  SvelteComponent: Sr,
+  add_flush_callback: Nr,
+  append: pe,
+  attr: re,
+  bind: Lr,
+  binding_callbacks: Er,
+  check_outros: qr,
+  create_component: tn,
+  destroy_component: nn,
+  destroy_each: Fr,
+  detach: Mr,
+  element: Ne,
+  ensure_array_like: qt,
+  group_outros: Pr,
+  init: Vr,
+  insert: Tr,
+  listen: zr,
+  mount_component: ln,
+  safe_not_equal: Br,
+  space: Ft,
+  transition_in: be,
+  transition_out: Pe
+} = window.__gradio__svelte__internal, { createEventDispatcher: Dr } = window.__gradio__svelte__internal;
+function Mt(e, t, n) {
+  const l = e.slice();
+  return l[12] = t[n], l[13] = t, l[14] = n, l;
+}
+function Pt(e) {
+  let t, n, l;
+  function i(r) {
+    e[7](
+      r,
+      /*prompt*/
+      e[12],
+      /*each_value*/
+      e[13],
+      /*prompt_index*/
+      e[14]
+    );
+  }
+  function s() {
+    return (
+      /*remove_handler*/
+      e[8](
+        /*prompt*/
+        e[12]
+      )
+    );
+  }
+  let f = {
+    min: (
+      /*min*/
+      e[2]
+    ),
+    max: (
+      /*max*/
+      e[3]
+    ),
+    step: (
+      /*step*/
+      e[4]
+    )
+  };
+  return (
+    /*prompt*/
+    e[12] !== void 0 && (f.prompt = /*prompt*/
+    e[12]), t = new hr({ props: f }), Er.push(() => Lr(t, "prompt", i)), t.$on("remove", s), t.$on(
+      "add",
+      /*add_handler*/
+      e[9]
+    ), {
+      c() {
+        tn(t.$$.fragment);
+      },
+      m(r, o) {
+        ln(t, r, o), l = !0;
+      },
+      p(r, o) {
+        e = r;
+        const a = {};
+        o & /*min*/
+        4 && (a.min = /*min*/
+        e[2]), o & /*max*/
+        8 && (a.max = /*max*/
+        e[3]), o & /*step*/
+        16 && (a.step = /*step*/
+        e[4]), !n && o & /*promptsList*/
+        1 && (n = !0, a.prompt = /*prompt*/
+        e[12], Nr(() => n = !1)), t.$set(a);
+      },
+      i(r) {
+        l || (be(t.$$.fragment, r), l = !0);
+      },
+      o(r) {
+        Pe(t.$$.fragment, r), l = !1;
+      },
+      d(r) {
+        nn(t, r);
+      }
+    }
+  );
+}
+function Rr(e) {
+  let t, n, l, i, s, f, r, o, a, u, m, h = qt(
+    /*promptsList*/
+    e[0]
+  ), d = [];
+  for (let b = 0; b < h.length; b += 1)
+    d[b] = Pt(Mt(e, h, b));
+  const p = (b) => Pe(d[b], 1, 1, () => {
+    d[b] = null;
+  });
+  return s = new Ar({}), {
+    c() {
+      t = Ne("div");
+      for (let b = 0; b < d.length; b += 1)
+        d[b].c();
+      n = Ft(), l = Ne("div"), i = Ne("button"), tn(s.$$.fragment), f = Ft(), r = Ne("h2"), r.textContent = "Add Prompt", re(r, "class", "text-xs font-normal px-1 svelte-9vwpr1"), re(i, "title", "Add Concept"), re(i, "class", "flex items-center text-base text-black hover-text-cyan-500 dark:text-white svelte-9vwpr1"), re(l, "class", "flex flex-col gap-1 svelte-9vwpr1"), re(t, "class", o = "flex items-center gap-1 flex-wrap " + /*classNames*/
+      e[1] + " svelte-9vwpr1");
+    },
+    m(b, v) {
+      Tr(b, t, v);
+      for (let w = 0; w < d.length; w += 1)
+        d[w] && d[w].m(t, null);
+      pe(t, n), pe(t, l), pe(l, i), ln(s, i, null), pe(i, f), pe(i, r), a = !0, u || (m = zr(
+        i,
+        "click",
+        /*click_handler*/
+        e[10]
+      ), u = !0);
+    },
+    p(b, [v]) {
+      if (v & /*min, max, step, promptsList, removeConcept, addPrompt*/
+      125) {
+        h = qt(
+          /*promptsList*/
+          b[0]
+        );
+        let w;
+        for (w = 0; w < h.length; w += 1) {
+          const k = Mt(b, h, w);
+          d[w] ? (d[w].p(k, v), be(d[w], 1)) : (d[w] = Pt(k), d[w].c(), be(d[w], 1), d[w].m(t, n));
+        }
+        for (Pr(), w = h.length; w < d.length; w += 1)
+          p(w);
+        qr();
+      }
+      (!a || v & /*classNames*/
+      2 && o !== (o = "flex items-center gap-1 flex-wrap " + /*classNames*/
+      b[1] + " svelte-9vwpr1")) && re(t, "class", o);
+    },
+    i(b) {
+      if (!a) {
+        for (let v = 0; v < h.length; v += 1)
+          be(d[v]);
+        be(s.$$.fragment, b), a = !0;
+      }
+    },
+    o(b) {
+      d = d.filter(Boolean);
+      for (let v = 0; v < d.length; v += 1)
+        Pe(d[v]);
+      Pe(s.$$.fragment, b), a = !1;
+    },
+    d(b) {
+      b && Mr(t), Fr(d, b), nn(s), u = !1, m();
+    }
+  };
+}
+function Ir(e, t, n) {
+  let { classNames: l = "" } = t, { promptsList: i = [] } = t, { min: s } = t, { max: f } = t, { step: r } = t;
+  function o(p) {
+    n(0, i = i.filter((b) => b.id !== p.id));
+  }
+  function a(p = !1) {
+    n(0, i = [
+      ...i,
+      {
+        id: fn(),
+        prompt: "",
+        scale: 1,
+        negative: p
+      }
+    ]);
+  }
+  Dr();
+  function u(p, b, v, w) {
+    v[w] = p, n(0, i);
+  }
+  const m = (p) => o(p), h = () => a(), d = () => a(!1);
+  return e.$$set = (p) => {
+    "classNames" in p && n(1, l = p.classNames), "promptsList" in p && n(0, i = p.promptsList), "min" in p && n(2, s = p.min), "max" in p && n(3, f = p.max), "step" in p && n(4, r = p.step);
+  }, [
+    i,
+    l,
+    s,
+    f,
+    r,
+    o,
+    a,
+    u,
+    m,
+    h,
+    d
+  ];
+}
+class Or extends Sr {
+  constructor(t) {
+    super(), Vr(this, t, Ir, Rr, Br, {
+      classNames: 1,
+      promptsList: 0,
+      min: 2,
+      max: 3,
+      step: 4
+    });
+  }
+}
+const {
+  SvelteComponent: Ur,
+  add_flush_callback: Zr,
+  append: Hr,
+  assign: Xr,
+  attr: Yr,
+  bind: Kr,
+  binding_callbacks: Gr,
+  check_outros: Wr,
+  create_component: ze,
+  destroy_component: Be,
+  detach: Xe,
+  element: Jr,
+  flush: P,
+  get_spread_object: Qr,
+  get_spread_update: jr,
+  group_outros: xr,
+  init: $r,
+  insert: Ye,
+  mount_component: De,
+  safe_not_equal: eo,
+  set_data: to,
+  space: Vt,
+  text: no,
+  toggle_class: lo,
+  transition_in: te,
+  transition_out: fe
+} = window.__gradio__svelte__internal;
+function Tt(e) {
+  let t, n;
+  const l = [
+    { autoscroll: (
+      /*gradio*/
+      e[1].autoscroll
+    ) },
+    { i18n: (
+      /*gradio*/
+      e[1].i18n
+    ) },
+    /*loading_status*/
+    e[9]
+  ];
+  let i = {};
+  for (let s = 0; s < l.length; s += 1)
+    i = Xr(i, l[s]);
+  return t = new Wl({ props: i }), {
+    c() {
+      ze(t.$$.fragment);
+    },
+    m(s, f) {
+      De(t, s, f), n = !0;
+    },
+    p(s, f) {
+      const r = f & /*gradio, loading_status*/
+      514 ? jr(l, [
+        f & /*gradio*/
+        2 && { autoscroll: (
+          /*gradio*/
+          s[1].autoscroll
+        ) },
+        f & /*gradio*/
+        2 && { i18n: (
+          /*gradio*/
+          s[1].i18n
+        ) },
+        f & /*loading_status*/
+        512 && Qr(
+          /*loading_status*/
+          s[9]
+        )
+      ]) : {};
+      t.$set(r);
+    },
+    i(s) {
+      n || (te(t.$$.fragment, s), n = !0);
+    },
+    o(s) {
+      fe(t.$$.fragment, s), n = !1;
+    },
+    d(s) {
+      Be(t, s);
+    }
+  };
+}
+function io(e) {
+  let t;
+  return {
+    c() {
+      t = no(
+        /*label*/
+        e[2]
+      );
+    },
+    m(n, l) {
+      Ye(n, t, l);
+    },
+    p(n, l) {
+      l & /*label*/
+      4 && to(
+        t,
+        /*label*/
+        n[2]
+      );
+    },
+    d(n) {
+      n && Xe(t);
+    }
+  };
+}
+function so(e) {
+  let t, n, l, i, s, f, r, o = (
+    /*loading_status*/
+    e[9] && Tt(e)
+  );
+  l = new ol({
+    props: {
+      show_label: (
+        /*show_label*/
+        e[6]
+      ),
+      info: void 0,
+      $$slots: { default: [io] },
+      $$scope: { ctx: e }
+    }
+  });
+  function a(m) {
+    e[17](m);
+  }
+  let u = {
+    min: (
+      /*min*/
+      e[10]
+    ),
+    max: (
+      /*max*/
+      e[11]
+    ),
+    step: (
+      /*step*/
+      e[12]
+    ),
+    classNames: "py-5"
+  };
+  return (
+    /*value*/
+    e[0] !== void 0 && (u.promptsList = /*value*/
+    e[0]), s = new Or({ props: u }), Gr.push(() => Kr(s, "promptsList", a)), {
+      c() {
+        o && o.c(), t = Vt(), n = Jr("label"), ze(l.$$.fragment), i = Vt(), ze(s.$$.fragment), Yr(n, "class", "relative"), lo(n, "container", oo);
+      },
+      m(m, h) {
+        o && o.m(m, h), Ye(m, t, h), Ye(m, n, h), De(l, n, null), Hr(n, i), De(s, n, null), r = !0;
+      },
+      p(m, h) {
+        /*loading_status*/
+        m[9] ? o ? (o.p(m, h), h & /*loading_status*/
+        512 && te(o, 1)) : (o = Tt(m), o.c(), te(o, 1), o.m(t.parentNode, t)) : o && (xr(), fe(o, 1, 1, () => {
+          o = null;
+        }), Wr());
+        const d = {};
+        h & /*show_label*/
+        64 && (d.show_label = /*show_label*/
+        m[6]), h & /*$$scope, label*/
+        4194308 && (d.$$scope = { dirty: h, ctx: m }), l.$set(d);
+        const p = {};
+        h & /*min*/
+        1024 && (p.min = /*min*/
+        m[10]), h & /*max*/
+        2048 && (p.max = /*max*/
+        m[11]), h & /*step*/
+        4096 && (p.step = /*step*/
+        m[12]), !f && h & /*value*/
+        1 && (f = !0, p.promptsList = /*value*/
+        m[0], Zr(() => f = !1)), s.$set(p);
+      },
+      i(m) {
+        r || (te(o), te(l.$$.fragment, m), te(s.$$.fragment, m), r = !0);
+      },
+      o(m) {
+        fe(o), fe(l.$$.fragment, m), fe(s.$$.fragment, m), r = !1;
+      },
+      d(m) {
+        m && (Xe(t), Xe(n)), o && o.d(m), Be(l), Be(s);
+      }
+    }
+  );
+}
+function ro(e) {
+  let t, n;
+  return t = new An({
+    props: {
+      visible: (
+        /*visible*/
+        e[5]
+      ),
+      elem_id: (
+        /*elem_id*/
+        e[3]
+      ),
+      elem_classes: (
+        /*elem_classes*/
+        e[4]
+      ),
+      scale: (
+        /*scale*/
+        e[7]
+      ),
+      min_width: (
+        /*min_width*/
+        e[8]
+      ),
+      allow_overflow: !1,
+      padding: !0,
+      $$slots: { default: [so] },
+      $$scope: { ctx: e }
+    }
+  }), {
+    c() {
+      ze(t.$$.fragment);
+    },
+    m(l, i) {
+      De(t, l, i), n = !0;
+    },
+    p(l, [i]) {
+      const s = {};
+      i & /*visible*/
+      32 && (s.visible = /*visible*/
+      l[5]), i & /*elem_id*/
+      8 && (s.elem_id = /*elem_id*/
+      l[3]), i & /*elem_classes*/
+      16 && (s.elem_classes = /*elem_classes*/
+      l[4]), i & /*scale*/
+      128 && (s.scale = /*scale*/
+      l[7]), i & /*min_width*/
+      256 && (s.min_width = /*min_width*/
+      l[8]), i & /*$$scope, min, max, step, value, show_label, label, gradio, loading_status*/
+      4202055 && (s.$$scope = { dirty: i, ctx: l }), t.$set(s);
+    },
+    i(l) {
+      n || (te(t.$$.fragment, l), n = !0);
+    },
+    o(l) {
+      fe(t.$$.fragment, l), n = !1;
+    },
+    d(l) {
+      Be(t, l);
+    }
+  };
+}
+const oo = !1;
+function fo(e, t, n) {
+  let { gradio: l } = t, { label: i = "Prompt Weighting" } = t, { elem_id: s = "" } = t, { elem_classes: f = [] } = t, { visible: r = !0 } = t, { value: o = [] } = t, { placeholder: a = "" } = t, { show_label: u } = t, { scale: m = null } = t, { min_width: h = void 0 } = t, { loading_status: d = void 0 } = t, { value_is_output: p = !1 } = t, { interactive: b } = t, { rtl: v = !1 } = t, { min: w = 0 } = t, { max: k = 2 } = t, { step: g = 0.01 } = t;
+  function _() {
+    l.dispatch("change", o), p || (l.dispatch("input"), l.dispatch("submit"));
+  }
+  function C(c) {
+    o = c, n(0, o);
+  }
+  return e.$$set = (c) => {
+    "gradio" in c && n(1, l = c.gradio), "label" in c && n(2, i = c.label), "elem_id" in c && n(3, s = c.elem_id), "elem_classes" in c && n(4, f = c.elem_classes), "visible" in c && n(5, r = c.visible), "value" in c && n(0, o = c.value), "placeholder" in c && n(13, a = c.placeholder), "show_label" in c && n(6, u = c.show_label), "scale" in c && n(7, m = c.scale), "min_width" in c && n(8, h = c.min_width), "loading_status" in c && n(9, d = c.loading_status), "value_is_output" in c && n(14, p = c.value_is_output), "interactive" in c && n(15, b = c.interactive), "rtl" in c && n(16, v = c.rtl), "min" in c && n(10, w = c.min), "max" in c && n(11, k = c.max), "step" in c && n(12, g = c.step);
+  }, e.$$.update = () => {
+    e.$$.dirty & /*value*/
+    1 && o === null && n(0, o = []), e.$$.dirty & /*value*/
+    1 && _();
+  }, [
+    o,
+    l,
+    i,
+    s,
+    f,
+    r,
+    u,
+    m,
+    h,
+    d,
+    w,
+    k,
+    g,
+    a,
+    p,
+    b,
+    v,
+    C
+  ];
+}
+class ao extends Ur {
+  constructor(t) {
+    super(), $r(this, t, fo, ro, eo, {
+      gradio: 1,
+      label: 2,
+      elem_id: 3,
+      elem_classes: 4,
+      visible: 5,
+      value: 0,
+      placeholder: 13,
+      show_label: 6,
+      scale: 7,
+      min_width: 8,
+      loading_status: 9,
+      value_is_output: 14,
+      interactive: 15,
+      rtl: 16,
+      min: 10,
+      max: 11,
+      step: 12
+    });
+  }
+  get gradio() {
+    return this.$$.ctx[1];
+  }
+  set gradio(t) {
+    this.$$set({ gradio: t }), P();
+  }
+  get label() {
+    return this.$$.ctx[2];
+  }
+  set label(t) {
+    this.$$set({ label: t }), P();
+  }
+  get elem_id() {
+    return this.$$.ctx[3];
+  }
+  set elem_id(t) {
+    this.$$set({ elem_id: t }), P();
+  }
+  get elem_classes() {
+    return this.$$.ctx[4];
+  }
+  set elem_classes(t) {
+    this.$$set({ elem_classes: t }), P();
+  }
+  get visible() {
+    return this.$$.ctx[5];
+  }
+  set visible(t) {
+    this.$$set({ visible: t }), P();
+  }
+  get value() {
+    return this.$$.ctx[0];
+  }
+  set value(t) {
+    this.$$set({ value: t }), P();
+  }
+  get placeholder() {
+    return this.$$.ctx[13];
+  }
+  set placeholder(t) {
+    this.$$set({ placeholder: t }), P();
+  }
+  get show_label() {
+    return this.$$.ctx[6];
+  }
+  set show_label(t) {
+    this.$$set({ show_label: t }), P();
+  }
+  get scale() {
+    return this.$$.ctx[7];
+  }
+  set scale(t) {
+    this.$$set({ scale: t }), P();
+  }
+  get min_width() {
+    return this.$$.ctx[8];
+  }
+  set min_width(t) {
+    this.$$set({ min_width: t }), P();
+  }
+  get loading_status() {
+    return this.$$.ctx[9];
+  }
+  set loading_status(t) {
+    this.$$set({ loading_status: t }), P();
+  }
+  get value_is_output() {
+    return this.$$.ctx[14];
+  }
+  set value_is_output(t) {
+    this.$$set({ value_is_output: t }), P();
+  }
+  get interactive() {
+    return this.$$.ctx[15];
+  }
+  set interactive(t) {
+    this.$$set({ interactive: t }), P();
+  }
+  get rtl() {
+    return this.$$.ctx[16];
+  }
+  set rtl(t) {
+    this.$$set({ rtl: t }), P();
+  }
+  get min() {
+    return this.$$.ctx[10];
+  }
+  set min(t) {
+    this.$$set({ min: t }), P();
+  }
+  get max() {
+    return this.$$.ctx[11];
+  }
+  set max(t) {
+    this.$$set({ max: t }), P();
+  }
+  get step() {
+    return this.$$.ctx[12];
+  }
+  set step(t) {
+    this.$$set({ step: t }), P();
+  }
+}
+export {
+  ao as default
+};

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

@@ -0,0 +1 @@
+.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-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))}}.grabbing *{cursor:grabbing!important}.w-min.svelte-1wmphae.svelte-1wmphae{width:min-content}.flex.svelte-1wmphae.svelte-1wmphae{display:flex}.flex-col.svelte-1wmphae.svelte-1wmphae{flex-direction:column}.group.svelte-1wmphae:hover .group-hover\:visible.svelte-1wmphae{visibility:visible}.relative.svelte-1wmphae.svelte-1wmphae{position:relative}.justify-between.svelte-1wmphae.svelte-1wmphae{justify-content:space-between}.items-center.svelte-1wmphae.svelte-1wmphae{align-items:center}.overflow-hidden.svelte-1wmphae.svelte-1wmphae{overflow:hidden}.select-none.svelte-1wmphae.svelte-1wmphae{-webkit-user-select:none;user-select:none}.touch-manipulation.svelte-1wmphae.svelte-1wmphae{touch-action:manipulation}.absolute.svelte-1wmphae.svelte-1wmphae{position:absolute}.z-10.svelte-1wmphae.svelte-1wmphae{z-index:10}.p-1.svelte-1wmphae.svelte-1wmphae{padding:.125rem}.text-black.svelte-1wmphae.svelte-1wmphae{color:#000!important}.text-sm.svelte-1wmphae.svelte-1wmphae{font-size:.875rem;line-height:1.25rem}.bottom-full.svelte-1wmphae.svelte-1wmphae{bottom:100%}@media (prefers-color-scheme: dark){.dark\:group-hover\:text-white.svelte-1wmphae.svelte-1wmphae{color:#fff}}.text-\[0\.5rem\].svelte-1wmphae.svelte-1wmphae{font-size:.5rem}.font-mono.svelte-1wmphae.svelte-1wmphae{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.z-0.svelte-1wmphae.svelte-1wmphae{z-index:0}.pl.svelte-1wmphae.svelte-1wmphae{padding-left:1.5em}.pr.svelte-1wmphae.svelte-1wmphae{padding-right:.5em}.py-2.svelte-1wmphae.svelte-1wmphae{padding-top:.5rem;padding-bottom:.5rem}.outline-none.svelte-1wmphae.svelte-1wmphae{outline:2px solid transparent;outline-offset:2px}.line-through.svelte-1wmphae.svelte-1wmphae{text-decoration:line-through}.z-1.svelte-1wmphae.svelte-1wmphae{z-index:1}.right-1.svelte-1wmphae.svelte-1wmphae{right:.25rem}.hover\:text-red-500.svelte-1wmphae.svelte-1wmphae:hover{color:#ef4444!important}.invisible.svelte-1wmphae.svelte-1wmphae{visibility:hidden}.flex.svelte-9vwpr1{display:flex}.items-center.svelte-9vwpr1{align-items:center}.gap-1.svelte-9vwpr1{gap:.25rem}.flex-wrap.svelte-9vwpr1{flex-wrap:wrap}.flex-col.svelte-9vwpr1{flex-direction:column}.text-base.svelte-9vwpr1{font-size:1rem;line-height:1.5rem}.text-black.svelte-9vwpr1{color:#000}.hover-text-cyan-500.svelte-9vwpr1:hover{color:#06b6d4}@media (prefers-color-scheme: dark){.dark\:text-white.svelte-9vwpr1{color:#fff}}.text-xs.svelte-9vwpr1{font-size:.75rem;line-height:1rem}.font-normal.svelte-9vwpr1{font-weight:400}.px-1.svelte-9vwpr1{padding-left:.25rem;padding-right:.25rem}

src/backend/gradio_promptweighting/templates/example/index.js

@@ -0,0 +1,115 @@
+const {
+  SvelteComponent: y,
+  add_iframe_resize_listener: v,
+  add_render_callback: b,
+  append: m,
+  attr: h,
+  binding_callbacks: w,
+  detach: p,
+  element: z,
+  init: k,
+  insert: E,
+  noop: f,
+  safe_not_equal: S,
+  set_data: q,
+  text: C,
+  toggle_class: r
+} = window.__gradio__svelte__internal, { onMount: M } = window.__gradio__svelte__internal;
+function P(t) {
+  let e, n = (
+    /*value*/
+    (t[0] ? (
+      /*value*/
+      t[0]
+    ) : "") + ""
+  ), _, d;
+  return {
+    c() {
+      e = z("div"), _ = C(n), h(e, "class", "svelte-1r1gryw"), b(() => (
+        /*div_elementresize_handler*/
+        t[5].call(e)
+      )), r(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), r(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), r(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    m(l, s) {
+      E(l, e, s), m(e, _), d = v(
+        e,
+        /*div_elementresize_handler*/
+        t[5].bind(e)
+      ), t[6](e);
+    },
+    p(l, [s]) {
+      s & /*value*/
+      1 && n !== (n = /*value*/
+      (l[0] ? (
+        /*value*/
+        l[0]
+      ) : "") + "") && q(_, n), s & /*type*/
+      2 && r(
+        e,
+        "table",
+        /*type*/
+        l[1] === "table"
+      ), s & /*type*/
+      2 && r(
+        e,
+        "gallery",
+        /*type*/
+        l[1] === "gallery"
+      ), s & /*selected*/
+      4 && r(
+        e,
+        "selected",
+        /*selected*/
+        l[2]
+      );
+    },
+    i: f,
+    o: f,
+    d(l) {
+      l && p(e), d(), t[6](null);
+    }
+  };
+}
+function W(t, e, n) {
+  let { value: _ } = e, { type: d } = e, { selected: l = !1 } = e, s, a;
+  function c(i, u) {
+    !i || !u || (a.style.setProperty("--local-text-width", `${u < 150 ? u : 200}px`), n(4, a.style.whiteSpace = "unset", a));
+  }
+  M(() => {
+    c(a, s);
+  });
+  function o() {
+    s = this.clientWidth, n(3, s);
+  }
+  function g(i) {
+    w[i ? "unshift" : "push"](() => {
+      a = i, n(4, a);
+    });
+  }
+  return t.$$set = (i) => {
+    "value" in i && n(0, _ = i.value), "type" in i && n(1, d = i.type), "selected" in i && n(2, l = i.selected);
+  }, [_, d, l, s, a, o, g];
+}
+class j extends y {
+  constructor(e) {
+    super(), k(this, e, W, P, S, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  j as default
+};

src/backend/gradio_promptweighting/templates/example/style.css

@@ -0,0 +1 @@
+.gallery.svelte-1r1gryw{padding:var(--size-1) var(--size-2)}div.svelte-1r1gryw{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -0,0 +1,46 @@
+import gradio as gr
+from gradio_promptweighting import PromptWeighting
+
+
+example = PromptWeighting().example_value()
+
+
+def predict(input):
+    return (input, input)
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            prompt = PromptWeighting(
+                value=[
+                    {"prompt": "a cat", "scale": 1.5},
+                    {"prompt": "a dog", "scale": 1},
+                    {"prompt": "a bird", "scale": 0.5},
+                ],
+                step=0.001,
+                info="Please drag up or down to adjust the weight of the prompt.",
+            )
+            btn = gr.Button("Update Prompt")
+        with gr.Column():
+            text = gr.Textbox(
+                label="Prompt",
+                placeholder="",
+            )
+            prompt2 = PromptWeighting(min=0, max=10, step=0.001)
+    inputs = [prompt]
+    outputs = [text, prompt2]
+
+    btn.click(fn=predict, inputs=inputs, outputs=outputs, show_progress=False)
+    prompt.change(
+        fn=predict,
+        inputs=inputs,
+        outputs=outputs,
+        queue=False,
+        trigger_mode="always_last",
+        show_progress=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

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;
+}

src/demo/space.py

@@ -0,0 +1,162 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'PromptWeighting': {'description': 'Creates a very simple textbox for user to enter string input or display string output.', 'members': {'__init__': {'value': {'type': 'str | dict | list | Callable | None', 'default': 'None', 'description': 'default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'placeholder': {'type': 'str | None', 'default': 'None', 'description': 'placeholder hint to provide behind textbox.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'component name in interface.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, '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': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'rtl': {'type': 'bool', 'default': 'False', 'description': 'If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.'}, '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.'}, 'min': {'type': 'float | None', 'default': 'None', 'description': None}, 'max': {'type': 'float | None', 'default': 'None', 'description': None}, 'step': {'type': 'float | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'str | None', 'description': 'Expects a {str} returned from function and sets textarea value to it.'}}, 'preprocess': {'return': {'type': 'str | None', 'description': 'Passes text value as a {str} into the function.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PromptWeighting 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.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the PromptWeighting.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the PromptWeighting is focused.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PromptWeighting': []}}}
+
+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_promptweighting`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Simple component for creating prompt weighting for real-time generation.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_promptweighting
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_promptweighting import PromptWeighting
+
+
+example = PromptWeighting().example_value()
+
+
+def predict(input):
+    return (input, input)
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            prompt = PromptWeighting(
+                value=[{"prompt": "a cat", "scale": 1.5}], step=0.001
+            )
+            btn = gr.Button("Update Prompt")
+        with gr.Column():
+            text = gr.Textbox(
+                label="Prompt",
+                placeholder="",
+            )
+            prompt2 = PromptWeighting(min=0, max=10, step=0.001)
+    inputs = [prompt]
+    outputs = [text, prompt2]
+
+    btn.click(fn=predict, inputs=inputs, outputs=outputs, show_progress=False)
+    prompt.change(
+        fn=predict,
+        inputs=inputs,
+        outputs=outputs,
+        queue=False,
+        trigger_mode="always_last",
+        show_progress=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `PromptWeighting`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["PromptWeighting"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["PromptWeighting"]["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, passes text value as a {str} into the function.
+- **As output:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+def predict(
+    value: str | None
+) -> str | None:
+    return value
+```
+""", elem_classes=["md-custom", "PromptWeighting-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          PromptWeighting: [], };
+    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()

src/frontend/Example.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let value: string | null;
+  export let type: "gallery" | "table";
+  export let selected = false;
+
+  let size: number;
+  let el: HTMLDivElement;
+
+  function set_styles(element: HTMLElement, el_width: number): void {
+    if (!element || !el_width) return;
+    el.style.setProperty(
+      "--local-text-width",
+      `${el_width < 150 ? el_width : 200}px`
+    );
+    el.style.whiteSpace = "unset";
+  }
+
+  onMount(() => {
+    set_styles(el, size);
+  });
+</script>
+
+<div
+  bind:clientWidth={size}
+  bind:this={el}
+  class:table={type === "table"}
+  class:gallery={type === "gallery"}
+  class:selected
+>
+  {value ? value : ""}
+</div>
+
+<style scoped>
+  .gallery {
+    padding: var(--size-1) var(--size-2);
+  }
+
+  div {
+    overflow: hidden;
+    min-width: var(--local-text-width);
+
+    white-space: nowrap;
+  }
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,97 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+  import type { PromptType, SelectData } from "types";
+  import { nanoid } from "nanoid";
+  import type { Gradio } from "@gradio/utils";
+  import { BlockTitle } from "@gradio/atoms";
+  import { Block } from "@gradio/atoms";
+  import { StatusTracker } from "@gradio/statustracker";
+  import type { LoadingStatus } from "@gradio/statustracker";
+  import PrompstList from "./lib/PrompstList.svelte";
+
+  import { tick } from "svelte";
+
+  export let gradio: Gradio<{
+    change: PromptType[];
+    submit: never;
+    blur: never;
+    select: SelectData;
+    input: never;
+    focus: never;
+  }>;
+  export let info: string | undefined = undefined;
+  export let label = "Prompt Weighting";
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible = true;
+  export let value: PromptType[] = [];
+  export let placeholder = "";
+  export let show_label: boolean;
+  export let scale: number | null = null;
+  export let min_width: number | undefined = undefined;
+  export let loading_status: LoadingStatus | undefined = undefined;
+  export let value_is_output = false;
+  export let interactive: boolean;
+  export let rtl = false;
+  export let min = 0;
+  export let max = 2;
+  export let step = 0.01;
+  let promptsList: PromptType[] = [];
+
+  let el: HTMLTextAreaElement | HTMLInputElement;
+  const container = false;
+
+  function handle_change(): void {
+    gradio.dispatch("change", value);
+    if (!value_is_output) {
+      gradio.dispatch("input");
+      gradio.dispatch("submit");
+    }
+  }
+
+  async function handle_keypress(e: KeyboardEvent): Promise<void> {
+    await tick();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      gradio.dispatch("submit");
+    }
+  }
+
+  $: if (value === null) value = [];
+
+  $: value, handle_change();
+</script>
+
+<Block
+  {visible}
+  {elem_id}
+  {elem_classes}
+  {scale}
+  {min_width}
+  allow_overflow={false}
+  padding={true}
+>
+  {#if loading_status}
+    <StatusTracker
+      autoscroll={gradio.autoscroll}
+      i18n={gradio.i18n}
+      {...loading_status}
+    />
+  {/if}
+
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label class:container class="relative">
+    <BlockTitle {show_label} {info}>{label}</BlockTitle>
+    <PrompstList
+      {min}
+      {max}
+      {step}
+      classNames={"py-5"}
+      bind:promptsList={value}
+    />
+  </label>
+</Block>
+
+<style>
+</style>

src/frontend/lib/Icons/Cross.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let classNames = "";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 512 512"
+    class={classNames}
+    ><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
+        fill="currentColor"
+        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
+    />
+</svg>

src/frontend/lib/Icons/Minus.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let classNames = "";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 512 512"
+  class={classNames}
+  ><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
+    fill="currentColor"
+    d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+  /></svg
+>

src/frontend/lib/Icons/Plus.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let classNames = "";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 512 512"
+    class={classNames}
+    ><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
+        fill="currentColor"
+        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"
+    /></svg
+>

src/frontend/lib/Icons/Undo.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let classNames = "";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 512 512"
+    class={classNames}
+    fill="currentColor"
+    ><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
+        d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z"
+    /></svg
+>

src/frontend/lib/Icons/UpDown.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let classNames = "";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    width="1em"
+    viewBox="0 0 256 512"
+    class={classNames}
+    ><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
+        fill="currentColor"
+        d="M145.6 7.7C141 2.8 134.7 0 128 0s-13 2.8-17.6 7.7l-104 112c-6.5 7-8.2 17.2-4.4 25.9S14.5 160 24 160H80V352H24c-9.5 0-18.2 5.7-22 14.4s-2.1 18.9 4.4 25.9l104 112c4.5 4.9 10.9 7.7 17.6 7.7s13-2.8 17.6-7.7l104-112c6.5-7 8.2-17.2 4.4-25.9s-12.5-14.4-22-14.4H176V160h56c9.5 0 18.2-5.7 22-14.4s2.1-18.9-4.4-25.9l-104-112z"
+    /></svg
+>

src/frontend/lib/Icons/UpDownLeftRight.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let classNames = "";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 512 512"
+    class={classNames}
+>
+    <path
+        d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4V224H109.3l9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4H224V402.7l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4V288H402.7l-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4H288V109.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z"
+    />
+</svg>

src/frontend/lib/PrompstList.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { nanoid } from "nanoid";
+  import { createEventDispatcher } from "svelte";
+  import type { PromptType } from "../types";
+  import Prompt from "./Prompt.svelte";
+  import Plus from "./Icons/Plus.svelte";
+  export let classNames = "";
+  export let promptsList: PromptType[] = [];
+  export let min: number;
+  export let max: number;
+  export let step: number;
+
+  function removeConcept(conceptToRemove: PromptType) {
+    promptsList = promptsList.filter(
+      (concept) => concept.id !== conceptToRemove.id
+    );
+  }
+  function addPrompt(negative = false) {
+    promptsList = [
+      ...promptsList,
+      {
+        id: nanoid(),
+        prompt: "",
+        scale: 1,
+        negative: negative,
+      },
+    ];
+  }
+  const dispatch = createEventDispatcher();
+  // $: promptsList,
+  //   dispatch("change", promptsList),
+  //   dispatch("input", promptsList);
+</script>
+
+<div class="flex items-center gap-1 flex-wrap {classNames}">
+  {#each promptsList as prompt}
+    <Prompt
+      {min}
+      {max}
+      {step}
+      bind:prompt
+      on:remove={() => removeConcept(prompt)}
+      on:add={() => addPrompt()}
+    />
+  {/each}
+  <div class="flex flex-col gap-1">
+    <button
+      title="Add Concept"
+      class="flex items-center text-base text-black hover-text-cyan-500 dark:text-white"
+      on:click={() => addPrompt(false)}
+      ><Plus />
+      <h2 class="text-xs font-normal px-1">Add Prompt</h2>
+    </button>
+  </div>
+</div>
+
+<style scoped>
+  .flex {
+    display: flex;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-1 {
+    gap: 0.25rem;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+  .text-black {
+    color: #000;
+  }
+  .hover-text-cyan-500:hover {
+    color: #06b6d4;
+  }
+  @media (prefers-color-scheme: dark) {
+    .dark\:text-white {
+      color: #fff;
+    }
+  }
+
+  .text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .font-normal {
+    font-weight: 400;
+  }
+  .px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+</style>

src/frontend/lib/Prompt.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { onMount, createEventDispatcher } from "svelte";
+  import { drag } from "d3-drag";
+  import { select } from "d3-selection";
+  import Cross from "./Icons/Cross.svelte";
+  import type { PromptType } from "../types";
+
+  export let prompt: PromptType;
+  export let min = 0;
+  export let max = 2;
+  export let step = 0.01;
+
+  let inputEl: HTMLInputElement;
+  let isDragging = false;
+  let isHovering = false;
+  const dispatch = createEventDispatcher();
+
+  let wScale = 0;
+
+  let dragEl: HTMLElement;
+
+  onMount(() => {
+    const dragHandler = drag()
+      .on("start", (event) => {
+        wScale = prompt.scale;
+        isDragging = true;
+      })
+      .on("drag", (event) => {
+        const { dx, dy } = event;
+
+        wScale -= dy * step;
+        wScale = Math.min(wScale, max);
+        wScale = Math.max(wScale, min);
+
+        prompt.scale = wScale;
+      })
+      .on("end", (event) => {
+        isDragging = false;
+      });
+
+    select(dragEl).call(dragHandler);
+    inputEl.focus();
+  });
+  function onKeyPress(event: InputEvent) {
+    if (event.key === "Enter") {
+      dispatch("add");
+    }
+  }
+  $: if (isDragging) {
+    document.body.classList.add("grabbing");
+  } else {
+    document.body.classList.remove("grabbing");
+  }
+</script>
+
+<div
+  class="w-min flex flex-col group relative"
+  bind:this={dragEl}
+  on:pointerenter={() => (isHovering = true)}
+  on:pointerleave={() => (isHovering = false)}
+  on:pointercancel={() => (isHovering = false)}
+  on:pointerover={() => (isHovering = true)}
+  on:pointerout={() => (isHovering = false)}
+  on:pointerenter={() => (isHovering = true)}
+>
+  <div
+    class="flex justify-between items-center rounded-md overflow-hidden
+        {isDragging || isHovering ? 'select-none touch-manipulation' : ''}"
+  >
+    <div class="absolute z-10 flex items-center justify-center w-[2.5em]">
+      <div class="relative">
+        <div class="bottom-full p-1">
+          <span
+            class="flex text-[0.5rem] font-mono text-black dark:group-hover:text-white"
+          >
+            <span class="text-black">
+              <span class="text-black">{prompt.scale.toFixed(1)}</span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="relative flex z-0">
+      <input
+        bind:this={inputEl}
+        on:keypress={onKeyPress}
+        type="text"
+        placeholder="Prompt"
+        class="text-sm z-0 pl pr py-2 outline-none text-black {prompt.neg_guidance
+          ? 'line-through'
+          : ''}"
+        style="width: calc({Math.max(14, prompt.prompt.length + 1)}ch + 2em) ;"
+        bind:value={prompt.prompt}
+      />
+    </div>
+    <button
+      class="absolute z-1 right-1 text text-black hover:text-red-500 invisible group-hover:visible"
+      title="Remove prompt"
+      on:click={() => dispatch("remove")}
+    >
+      <Cross />
+    </button>
+  </div>
+</div>
+
+<style scoped>
+  :global(.grabbing *) {
+    cursor: grabbing !important;
+  }
+
+  .w-min {
+    width: min-content;
+  }
+  .flex {
+    display: flex;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .group:hover .group-hover\:block {
+    display: block;
+  }
+  .group:hover .group-hover\:text-white {
+    color: white;
+  }
+  .group:hover .group-hover\:visible {
+    visibility: visible;
+  }
+  .relative {
+    position: relative;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .items-center {
+    align-items: center;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .select-none {
+    user-select: none;
+  }
+  .touch-manipulation {
+    touch-action: manipulation;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .p-1 {
+    padding: 0.125rem;
+  }
+  .mx-3 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .text-black {
+    color: black !important;
+  }
+  .text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cursor-ns-resize {
+    cursor: ns-resize;
+  }
+  .bottom-full {
+    bottom: 100%;
+  }
+  .mb-2 {
+    margin-bottom: 0.5rem;
+  }
+  @media (prefers-color-scheme: dark) {
+    .dark\:group-hover\:text-white {
+      color: white;
+    }
+  }
+  .text-\[0\.5rem\] {
+    font-size: 0.5rem;
+  }
+  .font-mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+  }
+  .z-0 {
+    z-index: 0;
+  }
+  .pl {
+    padding-left: 1.5em;
+  }
+  .pr {
+    padding-right: 0.5em;
+  }
+  .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  .line-through {
+    text-decoration: line-through;
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .right-1 {
+    right: 0.25rem;
+  }
+  .hover\:text-red-500:hover {
+    color: #ef4444 !important;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+</style>

src/frontend/lib/store.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const currentCanvas = writable<HTMLCanvasElement>();

src/frontend/package-lock.json

@@ -0,0 +1,1096 @@
+{
+  "name": "gradio_promptweighting",
+  "version": "0.1.13",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gradio_promptweighting",
+      "version": "0.1.13",
+      "license": "ISC",
+      "dependencies": {
+        "@gradio/atoms": "0.6.1",
+        "@gradio/icons": "0.3.4",
+        "@gradio/statustracker": "0.4.10",
+        "@gradio/utils": "0.3.0",
+        "d3-drag": "^3.0.0",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.1.0",
+        "d3-selection": "^3.0.0",
+        "nanoid": "^5.0.6"
+      }
+    },
+    "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.6.1",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.6.1.tgz",
+      "integrity": "sha512-u7+cleKA0Et6AhEq5xTiaGIAYPR2He7/JSYcM3Sg+vkFOXhbJTPUnHLub+y9HiseheEmnZDGddFBr+RL5Jaxbg==",
+      "dependencies": {
+        "@gradio/icons": "^0.3.4",
+        "@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.4",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.3.4.tgz",
+      "integrity": "sha512-rtH7u3OiYy9UuO1bnebXkTXgc+D62H6BILrMtM4EfsKGgQQICD0n7NPvbPtS0zpi/fz0ppCdlfFIKKIOeVaeFg=="
+    },
+    "node_modules/@gradio/statustracker": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.4.10.tgz",
+      "integrity": "sha512-1uM30C6L/E26czWZE+a8w1Y5g4FuVkfR59ZxhfL6KfWyERJmhlA8iFWrCCrS4uPZ6wFDXDsY6Im8jqL15uqPzg==",
+      "dependencies": {
+        "@gradio/atoms": "^0.6.1",
+        "@gradio/column": "^0.1.0",
+        "@gradio/icons": "^0.3.4",
+        "@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/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/@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/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/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/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/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=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/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "node_modules/lru-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.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/nanoid": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+      "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "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=="
+    }
+  }
+}

src/frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "gradio_promptweighting",
+  "version": "0.1.13",
+  "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.6.1",
+    "@gradio/icons": "0.3.4",
+    "@gradio/statustracker": "0.4.10",
+    "@gradio/utils": "0.3.0",
+    "d3-drag": "^3.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "d3-selection": "^3.0.0",
+    "nanoid": "^5.0.6"
+  }
+}

src/frontend/types.ts

@@ -0,0 +1,6 @@
+export interface PromptType {
+  id: string;
+  prompt: string;
+  negative: boolean;
+  scale: number;
+}

src/pyproject.toml

@@ -0,0 +1,42 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_promptweighting"
+version = "0.0.1"
+description = "Simple component for creating prompt weighting for real-time generation."
+readme = "README.md"
+license = "MIT"
+requires-python = ">=3.8"
+authors = [{ name = "Radamés Ajna", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "diffusion model", "UI", "text-to-image", "prompt weighting", "editor"]
+# 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.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_promptweighting/templates", "*.pyi", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates", "backend/gradio_promptweighting/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_promptweighting"]