Fix multispace and event management

README.md

@@ -6,7 +6,7 @@ tags:
 - textbox
 - editing
 - color
-title: gradio_highlightedtextbox v0.0.7
+title: gradio_highlightedtextbox v0.0.8
 colorFrom: indigo
 colorTo: green
 sdk: docker

app.py

@@ -191,6 +191,18 @@ def convert_highlighted_text_to_tagged_text(
     )
 
 
+def show_info(
+    highlighted_text: dict[str, str | list[tuple[str, str | None]]],
+    tag_id: str | list[str],
+    tag_open: str | list[str],
+    tag_close: str | list[str],
+    msg: str,
+) -> None:
+    gr.Info(
+        f"{msg}: {HighlightedTextbox.tuples_to_tagged_text(highlighted_text['data'], tag_id, tag_open, tag_close)}"
+    )
+
+
 initial_text = "It is not something to be ashamed of: it is no different from the <d>personal fears</d> and <tm>dislikes</tm> of other things that <t>manny peopl</t> have."
 
 with gr.Blocks(
@@ -232,60 +244,64 @@ with gr.Blocks(
                 show_label=True,
                 info="Insert one or more tags to mark the end of a highlighted section.",
             )
-        gr.Markdown("### Example tagged to highlight:")
+        gr.Markdown(
+            """
+### Example:
+
+The following text is tagged using the parameters above to mark spans that will be highlighted.
+
+Both the tagged text and the highlighted text are editable, so you can see how the changes in one affect the other.
+
+Highlights will disappear if the highlighted text is edited. Modals will appear upon focus, change, and blur events on the highlighted text.
+"""
+        )
         with gr.Row():
-            tagged_t2h = gr.Textbox(
+            tagged = gr.Textbox(
                 initial_text,
                 interactive=True,
-                label="Tagged Input",
+                label="Tagged text",
                 show_label=True,
                 info="Tagged text using the format above to mark spans that will be highlighted.",
             )
-            high_t2h = HighlightedTextbox(
+            high = HighlightedTextbox(
                 convert_tagged_text_to_highlighted_text(
-                    tagged_t2h.value, tag_id.value, tag_open.value, tag_close.value
-                ),
-                interactive=False,
-                label="Highlighted Output",
-                info="Highlighted textbox intialized from the tagged input.",
-                show_legend=True,
-                show_label=True,
-                legend_label="Legend:",
-                show_legend_label=True,
-            )
-        gr.Markdown("### Example highlight to tagged:")
-        with gr.Row():
-            high_h2t = HighlightedTextbox(
-                convert_tagged_text_to_highlighted_text(
-                    initial_text, tag_id.value, tag_open.value, tag_close.value
+                    tagged.value, tag_id.value, tag_open.value, tag_close.value
                 ),
                 interactive=True,
-                label="Highlighted Input",
-                info="Highlighted textbox using the format above to mark spans that will be highlighted.",
+                label="Highlighted text",
+                info="Textbox containing editable text with custom highlights.",
                 show_legend=True,
                 show_label=True,
                 legend_label="Legend:",
                 show_legend_label=True,
             )
-            tagged_h2t = gr.Textbox(
-                initial_text,
-                interactive=False,
-                label="Tagged Output",
-                info="Tagged text intialized from the highlighted textbox.",
-                show_label=True,
-            )
 
         # Functions
 
-        tagged_t2h.input(
+        tagged.input(
             fn=convert_tagged_text_to_highlighted_text,
-            inputs=[tagged_t2h, tag_id, tag_open, tag_close],
-            outputs=high_t2h,
+            inputs=[tagged, tag_id, tag_open, tag_close],
+            outputs=high,
         )
-        high_h2t.input(
+        high.input(
             fn=convert_highlighted_text_to_tagged_text,
-            inputs=[high_h2t, tag_id, tag_open, tag_close],
-            outputs=tagged_h2t,
+            inputs=[high, tag_id, tag_open, tag_close],
+            outputs=tagged,
+        )
+        high.focus(
+            fn=show_info,
+            inputs=[high, tag_id, tag_open, tag_close, gr.State("Focus")],
+            outputs=None,
+        )
+        high.change(
+            fn=show_info,
+            inputs=[high, tag_id, tag_open, tag_close, gr.State("Change")],
+            outputs=None,
+        )
+        high.blur(
+            fn=show_info,
+            inputs=[high, tag_id, tag_open, tag_close, gr.State("Blur")],
+            outputs=None,
         )
     with gr.Tab("Docs"):
         gr.Markdown(

src/README.md

@@ -39,6 +39,18 @@ def convert_highlighted_text_to_tagged_text(
     )
 
 
+def show_info(
+    highlighted_text: dict[str, str | list[tuple[str, str | None]]],
+    tag_id: str | list[str],
+    tag_open: str | list[str],
+    tag_close: str | list[str],
+    msg: str,
+) -> None:
+    gr.Info(
+        f"{msg}: {HighlightedTextbox.tuples_to_tagged_text(highlighted_text['data'], tag_id, tag_open, tag_close)}"
+    )
+
+
 initial_text = "It is not something to be ashamed of: it is no different from the <d>personal fears</d> and <tm>dislikes</tm> of other things that <t>manny peopl</t> have."
 
 with gr.Blocks() as demo:
@@ -71,60 +83,64 @@ with gr.Blocks() as demo:
             show_label=True,
             info="Insert one or more tags to mark the end of a highlighted section.",
         )
-    gr.Markdown("### Example tagged to highlight:")
+    gr.Markdown(
+        """
+### Example:
+
+The following text is tagged using the parameters above to mark spans that will be highlighted.
+
+Both the tagged text and the highlighted text are editable, so you can see how the changes in one affect the other.
+
+Highlights will disappear if the highlighted text is edited. Modals will appear upon focus, change, and blur events on the highlighted text.
+"""
+    )
     with gr.Row():
-        tagged_t2h = gr.Textbox(
+        tagged = gr.Textbox(
             initial_text,
             interactive=True,
-            label="Tagged Input",
+            label="Tagged text",
             show_label=True,
             info="Tagged text using the format above to mark spans that will be highlighted.",
         )
-        high_t2h = HighlightedTextbox(
+        high = HighlightedTextbox(
             convert_tagged_text_to_highlighted_text(
-                tagged_t2h.value, tag_id.value, tag_open.value, tag_close.value
-            ),
-            interactive=False,
-            label="Highlighted Output",
-            info="Highlighted textbox intialized from the tagged input.",
-            show_legend=True,
-            show_label=True,
-            legend_label="Legend:",
-            show_legend_label=True,
-        )
-    gr.Markdown("### Example highlight to tagged:")
-    with gr.Row():
-        high_h2t = HighlightedTextbox(
-            convert_tagged_text_to_highlighted_text(
-                initial_text, tag_id.value, tag_open.value, tag_close.value
+                tagged.value, tag_id.value, tag_open.value, tag_close.value
             ),
             interactive=True,
-            label="Highlighted Input",
-            info="Highlighted textbox using the format above to mark spans that will be highlighted.",
+            label="Highlighted text",
+            info="Textbox containing editable text with custom highlights.",
             show_legend=True,
             show_label=True,
             legend_label="Legend:",
             show_legend_label=True,
         )
-        tagged_h2t = gr.Textbox(
-            initial_text,
-            interactive=False,
-            label="Tagged Output",
-            info="Tagged text intialized from the highlighted textbox.",
-            show_label=True,
-        )
 
     # Functions
 
-    tagged_t2h.input(
+    tagged.input(
         fn=convert_tagged_text_to_highlighted_text,
-        inputs=[tagged_t2h, tag_id, tag_open, tag_close],
-        outputs=high_t2h,
+        inputs=[tagged, tag_id, tag_open, tag_close],
+        outputs=high,
     )
-    high_h2t.input(
+    high.input(
         fn=convert_highlighted_text_to_tagged_text,
-        inputs=[high_h2t, tag_id, tag_open, tag_close],
-        outputs=tagged_h2t,
+        inputs=[high, tag_id, tag_open, tag_close],
+        outputs=tagged,
+    )
+    high.focus(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Focus")],
+        outputs=None,
+    )
+    high.change(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Change")],
+        outputs=None,
+    )
+    high.blur(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Blur")],
+        outputs=None,
     )
 
 if __name__ == "__main__":
@@ -151,7 +167,7 @@ if __name__ == "__main__":
 <td align="left" style="width: 25%;">
 
 ```python
-str | Callable | None
+list[tuple[str, str | None]] | Callable | None
 ```
 
 </td>
@@ -456,7 +472,7 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As input:** Should return, list of (word, category) tuples, or a dictionary of two keys: "text", and "highlights", which itself is.
+- **As input:** Should return, list of (word, category) tuples, or a dictionary of two keys: "id", and "data", which is a list of (word, category) tuples.
 
  ```python
  def predict(

src/backend/gradio_highlightedtextbox/highlightedtextbox.py

@@ -38,7 +38,7 @@ class HighlightedTextbox(FormComponent):
 
     def __init__(
         self,
-        value: str | Callable | None = "",
+        value: list[tuple[str, str | None]] | Callable | None = "",
         *,
         color_map: dict[str, str] | None = None,
         show_legend: bool = False,
@@ -123,37 +123,14 @@ class HighlightedTextbox(FormComponent):
     ) -> list[tuple[str, str | None]] | None:
         """
         Parameters:
-            y: List of (word, category) tuples, or a dictionary of two keys: "text", and "highlights", which itself is
-                a list of dictionaries, each of which have the keys: "highlight_type", "start", and "end"
+            y: List of (word, category) tuples, or a dictionary of two keys: "id", and "data", which is a list of (word, category) tuples.
         Returns:
             List of (word, category) tuples
         """
         if y is None:
             return None
         if isinstance(y, dict):
-            try:
-                text = y["text"]
-                highlights = y["highlights"]
-            except KeyError as ke:
-                raise ValueError(
-                    "Expected a dictionary with keys 'text' and 'highlights' "
-                    "for the value of the HighlightedText component."
-                ) from ke
-            if len(highlights) == 0:
-                y = [(text, None)]
-            else:
-                list_format = []
-                index = 0
-                entities = sorted(highlights, key=lambda x: x["start"])
-                for entity in entities:
-                    list_format.append((text[index : entity["start"]], None))
-                    highlight_type = entity.get("highlight_type")
-                    list_format.append(
-                        (text[entity["start"] : entity["end"]], highlight_type)
-                    )
-                    index = entity["end"]
-                list_format.append((text[index:], None))
-                y = list_format
+            y = y["data"]
         if self.combine_adjacent:
             output = []
             running_text, running_category = None, None
@@ -180,49 +157,6 @@ class HighlightedTextbox(FormComponent):
     def example_inputs(self) -> Any:
         return [("Hello", None), ("world", "highlight")]
 
-    @classmethod
-    def tagged_text_to_tuples_single_tag(
-        cls, text: str, tag_id: str, tag_open: str = "<h>", tag_close: str = "</h>"
-    ) -> list[tuple[str, str | None]]:
-        """Parse a text containing tags into a list of tuples in the format accepted by HighlightedTextbox.
-
-        E.g. Hello <h>world</h>! -> [("Hello", None), ("world", <TAG_ID>), ("!", None)]
-
-        Args:
-            text (`str`):
-                Text containing tags that needs to be parsed.
-            tag_id (`str`):
-                Label to use for the second element of the tuple.
-            tag_open (`str`, *optional*, defaults to "<h>"):
-                Tag used to mark the beginning of a highlighted section.
-            tag_close (`str`, *optional*, defaults to "</h>"):
-                Tag used to mark the end of a highlighted section.
-
-        Raises:
-            `ValueError`: Number of open tags does not match number of closed tags.
-
-        Returns:
-            `list[tuple[str, str | None]]`: List of tuples in the format accepted by HighlightedTextbox.
-        """
-        # Check that the text is well-formed (i.e. no nested or empty tags)
-        num_tags_open = text.count(tag_open)
-        num_tags_close = text.count(tag_close)
-        if num_tags_open == 0 or num_tags_close == 0:
-            return [(text, None)]
-        else:
-            out = []
-            last_end = 0
-            for _ in range(min(num_tags_open, num_tags_close)):
-                start = text.index(tag_open, last_end)
-                end = text.index(tag_close, start)
-                if start > last_end:
-                    out.append((text[last_end:start].strip(), None))
-                out.append((text[start + len(tag_open) : end].strip(), tag_id))
-                last_end = end + len(tag_close)
-            if last_end < len(text):
-                out.append((text[last_end:].strip(), None))
-            return out
-
     @classmethod
     def tagged_text_to_tuples(
         cls,
@@ -288,7 +222,7 @@ class HighlightedTextbox(FormComponent):
         for match in tag_regex.finditer(text):
             # Add the text before the tag to the output
             if match.start() > last_end:
-                out.append((text[last_end : match.start()].strip(), None))
+                out.append((text[last_end : match.start()], None))
             # Add the tag to the output
             tag_text = match.group(0)
             for tag, tag_id in tag_dict.items():
@@ -298,7 +232,7 @@ class HighlightedTextbox(FormComponent):
             last_end = match.end()
         # Add the text after the last tag to the output
         if last_end < len(text):
-            out.append((text[last_end:].strip(), None))
+            out.append((text[last_end:], None))
         return out
 
     @staticmethod
@@ -341,14 +275,9 @@ class HighlightedTextbox(FormComponent):
         ]
         out = ""
         for text, tag_id in tuples:
-            space_or_not = (
-                " "
-                if text not in [".", "!", "?", ",", ":", ")", "]", ";", "}", """'"""]
-                else ""
-            )
             if tag_id is not None:
                 tag_id_idx = tag_ids.index(tag_id)
-                out += f"{space_or_not}{tags_open[tag_id_idx]}{text.strip()}{tags_close[tag_id_idx]}"
+                out += f"{tags_open[tag_id_idx]}{text}{tags_close[tag_id_idx]}"
             else:
-                out += f"{space_or_not}{text.strip()} "
-        return re.sub(" +", " ", out.strip())
+                out += text
+        return out

src/backend/gradio_highlightedtextbox/highlightedtextbox.pyi

@@ -39,7 +39,7 @@ class HighlightedTextbox(FormComponent):
 
     def __init__(
         self,
-        value: str | Callable | None = "",
+        value: list[tuple[str, str | None]] | Callable | None = "",
         *,
         color_map: dict[str, str] | None = None,
         show_legend: bool = False,
@@ -124,37 +124,14 @@ class HighlightedTextbox(FormComponent):
     ) -> list[tuple[str, str | None]] | None:
         """
         Parameters:
-            y: List of (word, category) tuples, or a dictionary of two keys: "text", and "highlights", which itself is
-                a list of dictionaries, each of which have the keys: "highlight_type", "start", and "end"
+            y: List of (word, category) tuples, or a dictionary of two keys: "id", and "data", which is a list of (word, category) tuples.
         Returns:
             List of (word, category) tuples
         """
         if y is None:
             return None
         if isinstance(y, dict):
-            try:
-                text = y["text"]
-                highlights = y["highlights"]
-            except KeyError as ke:
-                raise ValueError(
-                    "Expected a dictionary with keys 'text' and 'highlights' "
-                    "for the value of the HighlightedText component."
-                ) from ke
-            if len(highlights) == 0:
-                y = [(text, None)]
-            else:
-                list_format = []
-                index = 0
-                entities = sorted(highlights, key=lambda x: x["start"])
-                for entity in entities:
-                    list_format.append((text[index : entity["start"]], None))
-                    highlight_type = entity.get("highlight_type")
-                    list_format.append(
-                        (text[entity["start"] : entity["end"]], highlight_type)
-                    )
-                    index = entity["end"]
-                list_format.append((text[index:], None))
-                y = list_format
+            y = y["data"]
         if self.combine_adjacent:
             output = []
             running_text, running_category = None, None
@@ -181,49 +158,6 @@ class HighlightedTextbox(FormComponent):
     def example_inputs(self) -> Any:
         return [("Hello", None), ("world", "highlight")]
 
-    @classmethod
-    def tagged_text_to_tuples_single_tag(
-        cls, text: str, tag_id: str, tag_open: str = "<h>", tag_close: str = "</h>"
-    ) -> list[tuple[str, str | None]]:
-        """Parse a text containing tags into a list of tuples in the format accepted by HighlightedTextbox.
-
-        E.g. Hello <h>world</h>! -> [("Hello", None), ("world", <TAG_ID>), ("!", None)]
-
-        Args:
-            text (`str`):
-                Text containing tags that needs to be parsed.
-            tag_id (`str`):
-                Label to use for the second element of the tuple.
-            tag_open (`str`, *optional*, defaults to "<h>"):
-                Tag used to mark the beginning of a highlighted section.
-            tag_close (`str`, *optional*, defaults to "</h>"):
-                Tag used to mark the end of a highlighted section.
-
-        Raises:
-            `ValueError`: Number of open tags does not match number of closed tags.
-
-        Returns:
-            `list[tuple[str, str | None]]`: List of tuples in the format accepted by HighlightedTextbox.
-        """
-        # Check that the text is well-formed (i.e. no nested or empty tags)
-        num_tags_open = text.count(tag_open)
-        num_tags_close = text.count(tag_close)
-        if num_tags_open == 0 or num_tags_close == 0:
-            return [(text, None)]
-        else:
-            out = []
-            last_end = 0
-            for _ in range(min(num_tags_open, num_tags_close)):
-                start = text.index(tag_open, last_end)
-                end = text.index(tag_close, start)
-                if start > last_end:
-                    out.append((text[last_end:start].strip(), None))
-                out.append((text[start + len(tag_open) : end].strip(), tag_id))
-                last_end = end + len(tag_close)
-            if last_end < len(text):
-                out.append((text[last_end:].strip(), None))
-            return out
-
     @classmethod
     def tagged_text_to_tuples(
         cls,
@@ -289,7 +223,7 @@ class HighlightedTextbox(FormComponent):
         for match in tag_regex.finditer(text):
             # Add the text before the tag to the output
             if match.start() > last_end:
-                out.append((text[last_end : match.start()].strip(), None))
+                out.append((text[last_end : match.start()], None))
             # Add the tag to the output
             tag_text = match.group(0)
             for tag, tag_id in tag_dict.items():
@@ -299,7 +233,7 @@ class HighlightedTextbox(FormComponent):
             last_end = match.end()
         # Add the text after the last tag to the output
         if last_end < len(text):
-            out.append((text[last_end:].strip(), None))
+            out.append((text[last_end:], None))
         return out
 
     @staticmethod
@@ -342,17 +276,12 @@ class HighlightedTextbox(FormComponent):
         ]
         out = ""
         for text, tag_id in tuples:
-            space_or_not = (
-                " "
-                if text not in [".", "!", "?", ",", ":", ")", "]", ";", "}", """'"""]
-                else ""
-            )
             if tag_id is not None:
                 tag_id_idx = tag_ids.index(tag_id)
-                out += f"{space_or_not}{tags_open[tag_id_idx]}{text.strip()}{tags_close[tag_id_idx]}"
+                out += f"{tags_open[tag_id_idx]}{text}{tags_close[tag_id_idx]}"
             else:
-                out += f"{space_or_not}{text.strip()} "
-        return re.sub(" +", " ", out.strip())
+                out += text
+        return out
 
     
     def change(self,

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

@@ -1,45 +1,45 @@
 const {
-  SvelteComponent: nl,
-  append: se,
+  SvelteComponent: ll,
+  append: oe,
   attr: U,
-  create_slot: il,
-  destroy_each: sl,
-  detach: oe,
-  element: ce,
-  empty: ol,
-  ensure_array_like: et,
-  get_all_dirty_from_scope: fl,
-  get_slot_changes: al,
+  create_slot: nl,
+  destroy_each: il,
+  detach: fe,
+  element: ue,
+  empty: sl,
+  ensure_array_like: tt,
+  get_all_dirty_from_scope: ol,
+  get_slot_changes: fl,
   init: _l,
-  insert: fe,
-  safe_not_equal: rl,
-  set_data: Ue,
+  insert: _e,
+  safe_not_equal: al,
+  set_data: Xe,
   space: He,
-  text: Xe,
+  text: Ye,
   toggle_class: V,
-  transition_in: ul,
-  transition_out: cl,
-  update_slot_base: dl
+  transition_in: rl,
+  transition_out: ul,
+  update_slot_base: cl
 } = window.__gradio__svelte__internal;
-function tt(l, e, t) {
+function lt(l, e, t) {
   const n = l.slice();
   return n[8] = e[t][0], n[9] = e[t][1], n[11] = t, n;
 }
-function lt(l) {
-  let e, t, n, i, s, o, r = et(Object.entries(
+function nt(l) {
+  let e, t, n, i, s, o, r = tt(Object.entries(
     /*_color_map*/
     l[4]
-  )), _ = [];
+  )), a = [];
   for (let f = 0; f < r.length; f += 1)
-    _[f] = nt(tt(l, r, f));
+    a[f] = it(lt(l, r, f));
   return {
     c() {
-      e = ce("span"), e.textContent = "·", t = He(), n = ce("div"), i = ce("span"), s = Xe(
+      e = ue("span"), e.textContent = "·", t = He(), n = ue("div"), i = ue("span"), s = Ye(
         /*legend_label*/
         l[3]
       ), o = He();
-      for (let f = 0; f < _.length; f += 1)
-        _[f].c();
+      for (let f = 0; f < a.length; f += 1)
+        a[f].c();
       U(e, "class", "legend-separator svelte-vm3q5z"), V(e, "hide", !/*show_legend*/
       l[1] || !/*show_label*/
       l[0]), V(
@@ -56,66 +56,66 @@ function lt(l) {
       ), U(n, "class", "category-legend svelte-vm3q5z"), U(n, "data-testid", "highlighted-text:category-legend"), V(n, "hide", !/*show_legend*/
       l[1]);
     },
-    m(f, a) {
-      fe(f, e, a), fe(f, t, a), fe(f, n, a), se(n, i), se(i, s), se(n, o);
-      for (let u = 0; u < _.length; u += 1)
-        _[u] && _[u].m(n, null);
+    m(f, _) {
+      _e(f, e, _), _e(f, t, _), _e(f, n, _), oe(n, i), oe(i, s), oe(n, o);
+      for (let u = 0; u < a.length; u += 1)
+        a[u] && a[u].m(n, null);
     },
-    p(f, a) {
-      if (a & /*show_legend, show_label*/
+    p(f, _) {
+      if (_ & /*show_legend, show_label*/
       3 && V(e, "hide", !/*show_legend*/
       f[1] || !/*show_label*/
-      f[0]), a & /*info*/
+      f[0]), _ & /*info*/
       32 && V(
         e,
         "has-info",
         /*info*/
         f[5] != null
-      ), a & /*legend_label*/
-      8 && Ue(
+      ), _ & /*legend_label*/
+      8 && Xe(
         s,
         /*legend_label*/
         f[3]
-      ), a & /*show_legend_label*/
+      ), _ & /*show_legend_label*/
       4 && V(i, "hide", !/*show_legend_label*/
-      f[2]), a & /*info*/
+      f[2]), _ & /*info*/
       32 && V(
         i,
         "has-info",
         /*info*/
         f[5] != null
-      ), a & /*Object, _color_map, info*/
+      ), _ & /*Object, _color_map, info*/
       48) {
-        r = et(Object.entries(
+        r = tt(Object.entries(
           /*_color_map*/
           f[4]
         ));
         let u;
         for (u = 0; u < r.length; u += 1) {
-          const c = tt(f, r, u);
-          _[u] ? _[u].p(c, a) : (_[u] = nt(c), _[u].c(), _[u].m(n, null));
+          const c = lt(f, r, u);
+          a[u] ? a[u].p(c, _) : (a[u] = it(c), a[u].c(), a[u].m(n, null));
         }
-        for (; u < _.length; u += 1)
-          _[u].d(1);
-        _.length = r.length;
+        for (; u < a.length; u += 1)
+          a[u].d(1);
+        a.length = r.length;
       }
-      a & /*show_legend*/
+      _ & /*show_legend*/
       2 && V(n, "hide", !/*show_legend*/
       f[1]);
     },
     d(f) {
-      f && (oe(e), oe(t), oe(n)), sl(_, f);
+      f && (fe(e), fe(t), fe(n)), il(a, f);
     }
   };
 }
-function nt(l) {
+function it(l) {
   let e, t = (
     /*category*/
     l[8] + ""
   ), n, i, s;
   return {
     c() {
-      e = ce("div"), n = Xe(t), i = He(), U(e, "class", "category-label svelte-vm3q5z"), U(e, "style", s = "background-color:" + /*color*/
+      e = ue("div"), n = Ye(t), i = He(), U(e, "class", "category-label svelte-vm3q5z"), U(e, "style", s = "background-color:" + /*color*/
       l[9].secondary), V(
         e,
         "has-info",
@@ -124,12 +124,12 @@ function nt(l) {
       );
     },
     m(o, r) {
-      fe(o, e, r), se(e, n), se(e, i);
+      _e(o, e, r), oe(e, n), oe(e, i);
     },
     p(o, r) {
       r & /*_color_map*/
       16 && t !== (t = /*category*/
-      o[8] + "") && Ue(n, t), r & /*_color_map*/
+      o[8] + "") && Xe(n, t), r & /*_color_map*/
       16 && s !== (s = "background-color:" + /*color*/
       o[9].secondary) && U(e, "style", s), r & /*info*/
       32 && V(
@@ -140,57 +140,57 @@ function nt(l) {
       );
     },
     d(o) {
-      o && oe(e);
+      o && fe(e);
     }
   };
 }
-function it(l) {
+function st(l) {
   let e, t;
   return {
     c() {
-      e = ce("div"), t = Xe(
+      e = ue("div"), t = Ye(
         /*info*/
         l[5]
       ), U(e, "class", "title-with-highlights-info svelte-vm3q5z");
     },
     m(n, i) {
-      fe(n, e, i), se(e, t);
+      _e(n, e, i), oe(e, t);
     },
     p(n, i) {
       i & /*info*/
-      32 && Ue(
+      32 && Xe(
         t,
         /*info*/
         n[5]
       );
     },
     d(n) {
-      n && oe(e);
+      n && fe(e);
     }
   };
 }
-function ml(l) {
+function dl(l) {
   let e, t, n, i = Object.keys(
     /*_color_map*/
     l[4]
   ).length !== 0, s, o, r;
-  const _ = (
+  const a = (
     /*#slots*/
     l[7].default
-  ), f = il(
-    _,
+  ), f = nl(
+    a,
     l,
     /*$$scope*/
     l[6],
     null
   );
-  let a = i && lt(l), u = (
+  let _ = i && nt(l), u = (
     /*info*/
-    l[5] && it(l)
+    l[5] && st(l)
   );
   return {
     c() {
-      e = ce("div"), t = ce("span"), f && f.c(), n = He(), a && a.c(), s = He(), u && u.c(), o = ol(), U(t, "data-testid", "block-info"), U(t, "class", "svelte-vm3q5z"), V(t, "sr-only", !/*show_label*/
+      e = ue("div"), t = ue("span"), f && f.c(), n = He(), _ && _.c(), s = He(), u && u.c(), o = sl(), U(t, "data-testid", "block-info"), U(t, "class", "svelte-vm3q5z"), V(t, "sr-only", !/*show_label*/
       l[0]), V(t, "hide", !/*show_label*/
       l[0]), V(
         t,
@@ -200,23 +200,23 @@ function ml(l) {
       ), U(e, "class", "title-container svelte-vm3q5z");
     },
     m(c, m) {
-      fe(c, e, m), se(e, t), f && f.m(t, null), se(e, n), a && a.m(e, null), fe(c, s, m), u && u.m(c, m), fe(c, o, m), r = !0;
+      _e(c, e, m), oe(e, t), f && f.m(t, null), oe(e, n), _ && _.m(e, null), _e(c, s, m), u && u.m(c, m), _e(c, o, m), r = !0;
     },
     p(c, [m]) {
       f && f.p && (!r || m & /*$$scope*/
-      64) && dl(
+      64) && cl(
         f,
-        _,
+        a,
         c,
         /*$$scope*/
         c[6],
-        r ? al(
-          _,
+        r ? fl(
+          a,
           /*$$scope*/
           c[6],
           m,
           null
-        ) : fl(
+        ) : ol(
           /*$$scope*/
           c[6]
         ),
@@ -235,38 +235,38 @@ function ml(l) {
       16 && (i = Object.keys(
         /*_color_map*/
         c[4]
-      ).length !== 0), i ? a ? a.p(c, m) : (a = lt(c), a.c(), a.m(e, null)) : a && (a.d(1), a = null), /*info*/
-      c[5] ? u ? u.p(c, m) : (u = it(c), u.c(), u.m(o.parentNode, o)) : u && (u.d(1), u = null);
+      ).length !== 0), i ? _ ? _.p(c, m) : (_ = nt(c), _.c(), _.m(e, null)) : _ && (_.d(1), _ = null), /*info*/
+      c[5] ? u ? u.p(c, m) : (u = st(c), u.c(), u.m(o.parentNode, o)) : u && (u.d(1), u = null);
     },
     i(c) {
-      r || (ul(f, c), r = !0);
+      r || (rl(f, c), r = !0);
     },
     o(c) {
-      cl(f, c), r = !1;
+      ul(f, c), r = !1;
     },
     d(c) {
-      c && (oe(e), oe(s), oe(o)), f && f.d(c), a && a.d(), u && u.d(c);
+      c && (fe(e), fe(s), fe(o)), f && f.d(c), _ && _.d(), u && u.d(c);
     }
   };
 }
-function hl(l, e, t) {
-  let { $$slots: n = {}, $$scope: i } = e, { show_label: s = !0 } = e, { show_legend: o = !0 } = e, { show_legend_label: r = !0 } = e, { legend_label: _ = "Highlights:" } = e, { _color_map: f = {} } = e, { info: a = void 0 } = e;
+function ml(l, e, t) {
+  let { $$slots: n = {}, $$scope: i } = e, { show_label: s = !0 } = e, { show_legend: o = !0 } = e, { show_legend_label: r = !0 } = e, { legend_label: a = "Highlights:" } = e, { _color_map: f = {} } = e, { info: _ = void 0 } = e;
   return l.$$set = (u) => {
-    "show_label" in u && t(0, s = u.show_label), "show_legend" in u && t(1, o = u.show_legend), "show_legend_label" in u && t(2, r = u.show_legend_label), "legend_label" in u && t(3, _ = u.legend_label), "_color_map" in u && t(4, f = u._color_map), "info" in u && t(5, a = u.info), "$$scope" in u && t(6, i = u.$$scope);
+    "show_label" in u && t(0, s = u.show_label), "show_legend" in u && t(1, o = u.show_legend), "show_legend_label" in u && t(2, r = u.show_legend_label), "legend_label" in u && t(3, a = u.legend_label), "_color_map" in u && t(4, f = u._color_map), "info" in u && t(5, _ = u.info), "$$scope" in u && t(6, i = u.$$scope);
   }, [
     s,
     o,
     r,
-    _,
-    f,
     a,
+    f,
+    _,
     i,
     n
   ];
 }
-class bl extends nl {
+class hl extends ll {
   constructor(e) {
-    super(), _l(this, e, hl, ml, rl, {
+    super(), _l(this, e, ml, dl, al, {
       show_label: 0,
       show_legend: 1,
       show_legend_label: 2,
@@ -277,97 +277,97 @@ class bl extends nl {
   }
 }
 const {
-  SvelteComponent: gl,
-  append: wl,
-  attr: te,
-  detach: kl,
-  init: vl,
-  insert: pl,
-  noop: Ze,
-  safe_not_equal: yl,
-  svg_element: st
+  SvelteComponent: bl,
+  append: gl,
+  attr: le,
+  detach: wl,
+  init: kl,
+  insert: vl,
+  noop: Re,
+  safe_not_equal: pl,
+  svg_element: ot
 } = window.__gradio__svelte__internal;
-function Cl(l) {
+function yl(l) {
   let e, t;
   return {
     c() {
-      e = st("svg"), t = st("polyline"), te(t, "points", "20 6 9 17 4 12"), te(e, "xmlns", "http://www.w3.org/2000/svg"), te(e, "viewBox", "2 0 20 20"), te(e, "fill", "none"), te(e, "stroke", "currentColor"), te(e, "stroke-width", "3"), te(e, "stroke-linecap", "round"), te(e, "stroke-linejoin", "round");
+      e = ot("svg"), t = ot("polyline"), le(t, "points", "20 6 9 17 4 12"), le(e, "xmlns", "http://www.w3.org/2000/svg"), le(e, "viewBox", "2 0 20 20"), le(e, "fill", "none"), le(e, "stroke", "currentColor"), le(e, "stroke-width", "3"), le(e, "stroke-linecap", "round"), le(e, "stroke-linejoin", "round");
     },
     m(n, i) {
-      pl(n, e, i), wl(e, t);
+      vl(n, e, i), gl(e, t);
     },
-    p: Ze,
-    i: Ze,
-    o: Ze,
+    p: Re,
+    i: Re,
+    o: Re,
     d(n) {
-      n && kl(e);
+      n && wl(e);
     }
   };
 }
-class ql extends gl {
+class Cl extends bl {
   constructor(e) {
-    super(), vl(this, e, null, Cl, yl, {});
+    super(), kl(this, e, null, yl, pl, {});
   }
 }
 const {
-  SvelteComponent: Tl,
-  append: ot,
-  attr: re,
-  detach: Ll,
-  init: Sl,
-  insert: Fl,
-  noop: Oe,
-  safe_not_equal: Hl,
-  svg_element: Re
+  SvelteComponent: ql,
+  append: ft,
+  attr: ae,
+  detach: Tl,
+  init: Ll,
+  insert: Sl,
+  noop: Ae,
+  safe_not_equal: Fl,
+  svg_element: De
 } = window.__gradio__svelte__internal;
-function Ml(l) {
+function Hl(l) {
   let e, t, n;
   return {
     c() {
-      e = Re("svg"), t = Re("path"), n = Re("path"), re(t, "fill", "currentColor"), re(t, "d", "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"), re(n, "fill", "currentColor"), re(n, "d", "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"), re(e, "xmlns", "http://www.w3.org/2000/svg"), re(e, "viewBox", "0 0 33 33"), re(e, "color", "currentColor");
+      e = De("svg"), t = De("path"), n = De("path"), ae(t, "fill", "currentColor"), ae(t, "d", "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"), ae(n, "fill", "currentColor"), ae(n, "d", "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"), ae(e, "xmlns", "http://www.w3.org/2000/svg"), ae(e, "viewBox", "0 0 33 33"), ae(e, "color", "currentColor");
     },
     m(i, s) {
-      Fl(i, e, s), ot(e, t), ot(e, n);
+      Sl(i, e, s), ft(e, t), ft(e, n);
     },
-    p: Oe,
-    i: Oe,
-    o: Oe,
+    p: Ae,
+    i: Ae,
+    o: Ae,
     d(i) {
-      i && Ll(e);
+      i && Tl(e);
     }
   };
 }
-class jl extends Tl {
+class Ml extends ql {
   constructor(e) {
-    super(), Sl(this, e, null, Ml, Hl, {});
+    super(), Ll(this, e, null, Hl, Fl, {});
   }
 }
-function Ae() {
+function Ee() {
 }
-const Nl = (l) => l;
-function Vl(l, e) {
+const jl = (l) => l;
+function Nl(l, e) {
   return l != l ? e == e : l !== e || l && typeof l == "object" || typeof l == "function";
 }
-const Dt = typeof window < "u";
-let ft = Dt ? () => window.performance.now() : () => Date.now(), It = Dt ? (l) => requestAnimationFrame(l) : Ae;
-const qe = /* @__PURE__ */ new Set();
-function Wt(l) {
-  qe.forEach((e) => {
-    e.c(l) || (qe.delete(e), e.f());
-  }), qe.size !== 0 && It(Wt);
+const It = typeof window < "u";
+let _t = It ? () => window.performance.now() : () => Date.now(), Wt = It ? (l) => requestAnimationFrame(l) : Ee;
+const Ce = /* @__PURE__ */ new Set();
+function Ut(l) {
+  Ce.forEach((e) => {
+    e.c(l) || (Ce.delete(e), e.f());
+  }), Ce.size !== 0 && Wt(Ut);
 }
-function zl(l) {
+function Vl(l) {
   let e;
-  return qe.size === 0 && It(Wt), {
+  return Ce.size === 0 && Wt(Ut), {
     promise: new Promise((t) => {
-      qe.add(e = { c: l, f: t });
+      Ce.add(e = { c: l, f: t });
     }),
     abort() {
-      qe.delete(e);
+      Ce.delete(e);
     }
   };
 }
-function Al(l, { delay: e = 0, duration: t = 400, easing: n = Nl } = {}) {
+function zl(l, { delay: e = 0, duration: t = 400, easing: n = jl } = {}) {
   const i = +getComputedStyle(l).opacity;
   return {
     delay: e,
@@ -377,15 +377,15 @@ function Al(l, { delay: e = 0, duration: t = 400, easing: n = Nl } = {}) {
   };
 }
 const ve = [];
-function Bl(l, e = Ae) {
+function Bl(l, e = Ee) {
   let t;
   const n = /* @__PURE__ */ new Set();
   function i(r) {
-    if (Vl(l, r) && (l = r, t)) {
-      const _ = !ve.length;
+    if (Nl(l, r) && (l = r, t)) {
+      const a = !ve.length;
       for (const f of n)
         f[1](), ve.push(f, l);
-      if (_) {
+      if (a) {
         for (let f = 0; f < ve.length; f += 2)
           ve[f][0](ve[f + 1]);
         ve.length = 0;
@@ -395,9 +395,9 @@ function Bl(l, e = Ae) {
   function s(r) {
     i(r(l));
   }
-  function o(r, _ = Ae) {
-    const f = [r, _];
-    return n.add(f), n.size === 1 && (t = e(i, s) || Ae), r(l), () => {
+  function o(r, a = Ee) {
+    const f = [r, a];
+    return n.add(f), n.size === 1 && (t = e(i, s) || Ee), r(l), () => {
       n.delete(f), n.size === 0 && t && (t(), t = null);
     };
   }
@@ -406,31 +406,31 @@ function Bl(l, e = Ae) {
 function at(l) {
   return Object.prototype.toString.call(l) === "[object Date]";
 }
-function Ie(l, e, t, n) {
+function We(l, e, t, n) {
   if (typeof t == "number" || at(t)) {
-    const i = n - t, s = (t - e) / (l.dt || 1 / 60), o = l.opts.stiffness * i, r = l.opts.damping * s, _ = (o - r) * l.inv_mass, f = (s + _) * l.dt;
+    const i = n - t, s = (t - e) / (l.dt || 1 / 60), o = l.opts.stiffness * i, r = l.opts.damping * s, a = (o - r) * l.inv_mass, f = (s + a) * l.dt;
     return Math.abs(f) < l.opts.precision && Math.abs(i) < l.opts.precision ? n : (l.settled = !1, at(t) ? new Date(t.getTime() + f) : t + f);
   } else {
     if (Array.isArray(t))
       return t.map(
-        (i, s) => Ie(l, e[s], t[s], n[s])
+        (i, s) => We(l, e[s], t[s], n[s])
       );
     if (typeof t == "object") {
       const i = {};
       for (const s in t)
-        i[s] = Ie(l, e[s], t[s], n[s]);
+        i[s] = We(l, e[s], t[s], n[s]);
       return i;
     } else
       throw new Error(`Cannot spring ${typeof t} values`);
   }
 }
-function _t(l, e = {}) {
+function rt(l, e = {}) {
   const t = Bl(l), { stiffness: n = 0.15, damping: i = 0.8, precision: s = 0.01 } = e;
-  let o, r, _, f = l, a = l, u = 1, c = 0, m = !1;
+  let o, r, a, f = l, _ = l, u = 1, c = 0, m = !1;
   function y(T, L = {}) {
-    a = T;
-    const C = _ = {};
-    return l == null || L.hard || S.stiffness >= 1 && S.damping >= 1 ? (m = !0, o = ft(), f = T, t.set(l = a), Promise.resolve()) : (L.soft && (c = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), u = 0), r || (o = ft(), m = !1, r = zl((d) => {
+    _ = T;
+    const C = a = {};
+    return l == null || L.hard || S.stiffness >= 1 && S.damping >= 1 ? (m = !0, o = _t(), f = T, t.set(l = _), Promise.resolve()) : (L.soft && (c = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), u = 0), r || (o = _t(), m = !1, r = Vl((d) => {
       if (m)
         return m = !1, r = null, !1;
       u = Math.min(u + c, 1);
@@ -439,17 +439,17 @@ function _t(l, e = {}) {
         opts: S,
         settled: !0,
         dt: (d - o) * 60 / 1e3
-      }, H = Ie(p, f, l, a);
+      }, H = We(p, f, l, _);
       return o = d, f = l, t.set(l = H), p.settled && (r = null), !p.settled;
     })), new Promise((d) => {
       r.promise.then(() => {
-        C === _ && d();
+        C === a && d();
       });
     }));
   }
   const S = {
     set: y,
-    update: (T, L) => y(T(a, l), L),
+    update: (T, L) => y(T(_, l), L),
     subscribe: t.subscribe,
     stiffness: n,
     damping: i,
@@ -457,7 +457,7 @@ function _t(l, e = {}) {
   };
   return S;
 }
-const rt = [
+const ut = [
   "red",
   "green",
   "blue",
@@ -479,7 +479,7 @@ const rt = [
   { color: "cyan", primary: 600, secondary: 100 },
   { color: "lime", primary: 500, secondary: 100 },
   { color: "pink", primary: 600, secondary: 100 }
-], ut = {
+], ct = {
   inherit: "inherit",
   current: "currentColor",
   transparent: "transparent",
@@ -771,17 +771,17 @@ const rt = [
     900: "#881337",
     950: "#4c0519"
   }
-}, ct = El.reduce(
+}, dt = El.reduce(
   (l, { color: e, primary: t, secondary: n }) => ({
     ...l,
     [e]: {
-      primary: ut[e][t],
-      secondary: ut[e][n]
+      primary: ct[e][t],
+      secondary: ct[e][n]
     }
   }),
   {}
-), Pl = (l) => rt[l % rt.length];
-function dt(l, e, t) {
+), Pl = (l) => ut[l % ut.length];
+function mt(l, e, t) {
   if (!t) {
     var n = document.createElement("canvas");
     t = n.getContext("2d");
@@ -794,9 +794,9 @@ function Zl(l, e, t) {
   var n = {};
   for (const i in l) {
     const s = l[i].trim();
-    s in ct ? n[i] = ct[s] : n[i] = {
-      primary: e ? dt(l[i], 1, t) : l[i],
-      secondary: e ? dt(l[i], 0.5, t) : l[i]
+    s in dt ? n[i] = dt[s] : n[i] = {
+      primary: e ? mt(l[i], 1, t) : l[i],
+      secondary: e ? mt(l[i], 0.5, t) : l[i]
     };
   }
   return n;
@@ -815,7 +815,7 @@ function Rl(l) {
   }
   return -1;
 }
-function Dl(l, e) {
+function Al(l, e) {
   var t = document.createTreeWalker(l, NodeFilter.SHOW_TEXT), n = t.nextNode();
   if (!n || !n.textContent)
     return null;
@@ -828,262 +828,262 @@ function Dl(l, e) {
   return { node: n, offset: s };
 }
 const {
-  SvelteComponent: Il,
-  add_render_callback: Ye,
-  append: mt,
+  SvelteComponent: Dl,
+  add_render_callback: Ge,
+  append: ht,
   attr: B,
-  binding_callbacks: ht,
-  bubble: pe,
-  check_outros: Ut,
-  create_component: Ge,
-  create_in_transition: Wl,
-  destroy_component: Je,
-  detach: me,
+  binding_callbacks: bt,
+  bubble: Se,
+  check_outros: Xt,
+  create_component: Je,
+  create_in_transition: Il,
+  destroy_component: Ke,
+  detach: de,
   element: Me,
-  empty: Ul,
-  group_outros: Xt,
-  init: Xl,
-  insert: he,
-  listen: G,
-  mount_component: Ke,
-  noop: Yt,
-  run_all: Yl,
-  safe_not_equal: Gl,
-  set_data: Jl,
-  space: bt,
-  text: Kl,
-  toggle_class: gt,
-  transition_in: ne,
-  transition_out: de
-} = window.__gradio__svelte__internal, { beforeUpdate: Ql, afterUpdate: xl, createEventDispatcher: $l } = window.__gradio__svelte__internal;
-function en(l) {
+  empty: Wl,
+  group_outros: Yt,
+  init: Ul,
+  insert: me,
+  listen: Y,
+  mount_component: Qe,
+  noop: Gt,
+  run_all: Xl,
+  safe_not_equal: Yl,
+  set_data: Gl,
+  space: gt,
+  text: Jl,
+  toggle_class: wt,
+  transition_in: ie,
+  transition_out: ce
+} = window.__gradio__svelte__internal, { beforeUpdate: Kl, afterUpdate: Ql, createEventDispatcher: xl } = window.__gradio__svelte__internal;
+function $l(l) {
   let e;
   return {
     c() {
-      e = Kl(
+      e = Jl(
         /*label*/
         l[0]
       );
     },
     m(t, n) {
-      he(t, e, n);
+      me(t, e, n);
     },
     p(t, n) {
       n[0] & /*label*/
-      1 && Jl(
+      1 && Gl(
         e,
         /*label*/
         t[0]
       );
     },
     d(t) {
-      t && me(e);
+      t && de(e);
     }
   };
 }
-function wt(l) {
+function kt(l) {
   let e, t, n, i;
-  const s = [ln, tn], o = [];
-  function r(_, f) {
+  const s = [tn, en], o = [];
+  function r(a, f) {
     return (
       /*copied*/
-      _[13] ? 0 : 1
+      a[13] ? 0 : 1
     );
   }
   return e = r(l), t = o[e] = s[e](l), {
     c() {
-      t.c(), n = Ul();
+      t.c(), n = Wl();
     },
-    m(_, f) {
-      o[e].m(_, f), he(_, n, f), i = !0;
+    m(a, f) {
+      o[e].m(a, f), me(a, n, f), i = !0;
     },
-    p(_, f) {
-      let a = e;
-      e = r(_), e === a ? o[e].p(_, f) : (Xt(), de(o[a], 1, 1, () => {
-        o[a] = null;
-      }), Ut(), t = o[e], t ? t.p(_, f) : (t = o[e] = s[e](_), t.c()), ne(t, 1), t.m(n.parentNode, n));
+    p(a, f) {
+      let _ = e;
+      e = r(a), e === _ ? o[e].p(a, f) : (Yt(), ce(o[_], 1, 1, () => {
+        o[_] = null;
+      }), Xt(), t = o[e], t ? t.p(a, f) : (t = o[e] = s[e](a), t.c()), ie(t, 1), t.m(n.parentNode, n));
     },
-    i(_) {
-      i || (ne(t), i = !0);
+    i(a) {
+      i || (ie(t), i = !0);
     },
-    o(_) {
-      de(t), i = !1;
+    o(a) {
+      ce(t), i = !1;
     },
-    d(_) {
-      _ && me(n), o[e].d(_);
+    d(a) {
+      a && de(n), o[e].d(a);
     }
   };
 }
-function tn(l) {
+function en(l) {
   let e, t, n, i, s;
-  return t = new jl({}), {
+  return t = new Ml({}), {
     c() {
-      e = Me("button"), Ge(t.$$.fragment), B(e, "aria-label", "Copy"), B(e, "aria-roledescription", "Copy text"), B(e, "class", "svelte-14ssfqr");
+      e = Me("button"), Je(t.$$.fragment), B(e, "aria-label", "Copy"), B(e, "aria-roledescription", "Copy text"), B(e, "class", "svelte-40uavx");
     },
     m(o, r) {
-      he(o, e, r), Ke(t, e, null), n = !0, i || (s = G(
+      me(o, e, r), Qe(t, e, null), n = !0, i || (s = Y(
         e,
         "click",
         /*handle_copy*/
-        l[14]
+        l[15]
       ), i = !0);
     },
-    p: Yt,
+    p: Gt,
     i(o) {
-      n || (ne(t.$$.fragment, o), n = !0);
+      n || (ie(t.$$.fragment, o), n = !0);
     },
     o(o) {
-      de(t.$$.fragment, o), n = !1;
+      ce(t.$$.fragment, o), n = !1;
     },
     d(o) {
-      o && me(e), Je(t), i = !1, s();
+      o && de(e), Ke(t), i = !1, s();
     }
   };
 }
-function ln(l) {
+function tn(l) {
   let e, t, n, i;
-  return t = new ql({}), {
+  return t = new Cl({}), {
     c() {
-      e = Me("button"), Ge(t.$$.fragment), B(e, "aria-label", "Copied"), B(e, "aria-roledescription", "Text copied"), B(e, "class", "svelte-14ssfqr");
+      e = Me("button"), Je(t.$$.fragment), B(e, "aria-label", "Copied"), B(e, "aria-roledescription", "Text copied"), B(e, "class", "svelte-40uavx");
     },
     m(s, o) {
-      he(s, e, o), Ke(t, e, null), i = !0;
+      me(s, e, o), Qe(t, e, null), i = !0;
     },
-    p: Yt,
+    p: Gt,
     i(s) {
-      i || (ne(t.$$.fragment, s), s && (n || Ye(() => {
-        n = Wl(e, Al, { duration: 300 }), n.start();
+      i || (ie(t.$$.fragment, s), s && (n || Ge(() => {
+        n = Il(e, zl, { duration: 300 }), n.start();
       })), i = !0);
     },
     o(s) {
-      de(t.$$.fragment, s), i = !1;
+      ce(t.$$.fragment, s), i = !1;
     },
     d(s) {
-      s && me(e), Je(t);
+      s && de(e), Ke(t);
     }
   };
 }
-function nn(l) {
+function ln(l) {
   let e, t, n;
   return {
     c() {
-      e = Me("div"), B(e, "class", "textfield svelte-14ssfqr"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "true"), /*el_text*/
-      (l[11] === void 0 || /*marked_el_text*/
-      l[9] === void 0) && Ye(() => (
+      e = Me("div"), B(e, "class", "textfield svelte-40uavx"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "true"), /*el_text*/
+      (l[10] === void 0 || /*marked_el_text*/
+      l[11] === void 0) && Ge(() => (
         /*div_input_handler_1*/
-        l[28].call(e)
+        l[27].call(e)
       ));
     },
     m(i, s) {
-      he(i, e, s), l[27](e), /*el_text*/
-      l[11] !== void 0 && (e.textContent = /*el_text*/
-      l[11]), /*marked_el_text*/
-      l[9] !== void 0 && (e.innerHTML = /*marked_el_text*/
-      l[9]), t || (n = [
-        G(
+      me(i, e, s), l[26](e), /*el_text*/
+      l[10] !== void 0 && (e.textContent = /*el_text*/
+      l[10]), /*marked_el_text*/
+      l[11] !== void 0 && (e.innerHTML = /*marked_el_text*/
+      l[11]), t || (n = [
+        Y(
           e,
           "input",
           /*div_input_handler_1*/
-          l[28]
+          l[27]
         ),
-        G(
+        Y(
           e,
           "blur",
           /*blur_handler*/
           l[19]
         ),
-        G(
+        Y(
           e,
           "keypress",
           /*keypress_handler*/
           l[20]
         ),
-        G(
+        Y(
           e,
           "select",
           /*select_handler*/
           l[21]
         ),
-        G(
+        Y(
           e,
           "scroll",
           /*scroll_handler*/
           l[22]
         ),
-        G(
+        Y(
           e,
           "input",
-          /*input_handler*/
-          l[23]
+          /*handle_change*/
+          l[14]
         ),
-        G(
+        Y(
           e,
           "focus",
           /*focus_handler*/
-          l[24]
+          l[23]
         ),
-        G(
+        Y(
           e,
           "change",
-          /*checkAndRemoveHighlight*/
-          l[15]
+          /*handle_change*/
+          l[14]
         )
       ], t = !0);
     },
     p(i, s) {
       s[0] & /*el_text*/
-      2048 && /*el_text*/
-      i[11] !== e.textContent && (e.textContent = /*el_text*/
-      i[11]), s[0] & /*marked_el_text*/
-      512 && /*marked_el_text*/
-      i[9] !== e.innerHTML && (e.innerHTML = /*marked_el_text*/
-      i[9]);
+      1024 && /*el_text*/
+      i[10] !== e.textContent && (e.textContent = /*el_text*/
+      i[10]), s[0] & /*marked_el_text*/
+      2048 && /*marked_el_text*/
+      i[11] !== e.innerHTML && (e.innerHTML = /*marked_el_text*/
+      i[11]);
     },
     d(i) {
-      i && me(e), l[27](null), t = !1, Yl(n);
+      i && de(e), l[26](null), t = !1, Xl(n);
     }
   };
 }
-function sn(l) {
+function nn(l) {
   let e, t, n;
   return {
     c() {
-      e = Me("div"), B(e, "class", "textfield svelte-14ssfqr"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "false"), /*el_text*/
-      (l[11] === void 0 || /*marked_el_text*/
-      l[9] === void 0) && Ye(() => (
+      e = Me("div"), B(e, "class", "textfield svelte-40uavx"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "false"), /*el_text*/
+      (l[10] === void 0 || /*marked_el_text*/
+      l[11] === void 0) && Ge(() => (
         /*div_input_handler*/
-        l[26].call(e)
+        l[25].call(e)
       ));
     },
     m(i, s) {
-      he(i, e, s), l[25](e), /*el_text*/
-      l[11] !== void 0 && (e.textContent = /*el_text*/
-      l[11]), /*marked_el_text*/
-      l[9] !== void 0 && (e.innerHTML = /*marked_el_text*/
-      l[9]), t || (n = G(
+      me(i, e, s), l[24](e), /*el_text*/
+      l[10] !== void 0 && (e.textContent = /*el_text*/
+      l[10]), /*marked_el_text*/
+      l[11] !== void 0 && (e.innerHTML = /*marked_el_text*/
+      l[11]), t || (n = Y(
         e,
         "input",
         /*div_input_handler*/
-        l[26]
+        l[25]
       ), t = !0);
     },
     p(i, s) {
       s[0] & /*el_text*/
-      2048 && /*el_text*/
-      i[11] !== e.textContent && (e.textContent = /*el_text*/
-      i[11]), s[0] & /*marked_el_text*/
-      512 && /*marked_el_text*/
-      i[9] !== e.innerHTML && (e.innerHTML = /*marked_el_text*/
-      i[9]);
+      1024 && /*el_text*/
+      i[10] !== e.textContent && (e.textContent = /*el_text*/
+      i[10]), s[0] & /*marked_el_text*/
+      2048 && /*marked_el_text*/
+      i[11] !== e.innerHTML && (e.innerHTML = /*marked_el_text*/
+      i[11]);
     },
     d(i) {
-      i && me(e), l[25](null), t = !1, n();
+      i && de(e), l[24](null), t = !1, n();
     }
   };
 }
-function on(l) {
+function sn(l) {
   let e, t, n, i, s;
-  t = new bl({
+  t = new hl({
     props: {
       show_label: (
         /*show_label*/
@@ -1109,86 +1109,76 @@ function on(l) {
         /*info*/
         l[2]
       ),
-      $$slots: { default: [en] },
+      $$slots: { default: [$l] },
       $$scope: { ctx: l }
     }
   });
   let o = (
     /*show_copy_button*/
-    l[7] && wt(l)
+    l[7] && kt(l)
   );
-  function r(a, u) {
+  function r(_, u) {
     return (
       /*disabled*/
-      a[8] ? sn : nn
+      _[8] ? nn : ln
     );
   }
-  let _ = r(l), f = _(l);
+  let a = r(l), f = a(l);
   return {
     c() {
-      e = Me("label"), Ge(t.$$.fragment), n = bt(), o && o.c(), i = bt(), f.c(), B(e, "class", "svelte-14ssfqr"), gt(
+      e = Me("label"), Je(t.$$.fragment), n = gt(), o && o.c(), i = gt(), f.c(), B(e, "class", "svelte-40uavx"), wt(
         e,
         "container",
         /*container*/
         l[6]
       );
     },
-    m(a, u) {
-      he(a, e, u), Ke(t, e, null), mt(e, n), o && o.m(e, null), mt(e, i), f.m(e, null), s = !0;
+    m(_, u) {
+      me(_, e, u), Qe(t, e, null), ht(e, n), o && o.m(e, null), ht(e, i), f.m(e, null), s = !0;
     },
-    p(a, u) {
+    p(_, u) {
       const c = {};
       u[0] & /*show_label*/
       8 && (c.show_label = /*show_label*/
-      a[3]), u[0] & /*show_legend*/
+      _[3]), u[0] & /*show_legend*/
       16 && (c.show_legend = /*show_legend*/
-      a[4]), u[0] & /*show_legend_label*/
+      _[4]), u[0] & /*show_legend_label*/
       32 && (c.show_legend_label = /*show_legend_label*/
-      a[5]), u[0] & /*legend_label*/
+      _[5]), u[0] & /*legend_label*/
       2 && (c.legend_label = /*legend_label*/
-      a[1]), u[0] & /*_color_map*/
+      _[1]), u[0] & /*_color_map*/
       4096 && (c._color_map = /*_color_map*/
-      a[12]), u[0] & /*info*/
+      _[12]), u[0] & /*info*/
       4 && (c.info = /*info*/
-      a[2]), u[0] & /*label*/
+      _[2]), u[0] & /*label*/
       1 | u[1] & /*$$scope*/
-      512 && (c.$$scope = { dirty: u, ctx: a }), t.$set(c), /*show_copy_button*/
-      a[7] ? o ? (o.p(a, u), u[0] & /*show_copy_button*/
-      128 && ne(o, 1)) : (o = wt(a), o.c(), ne(o, 1), o.m(e, i)) : o && (Xt(), de(o, 1, 1, () => {
+      256 && (c.$$scope = { dirty: u, ctx: _ }), t.$set(c), /*show_copy_button*/
+      _[7] ? o ? (o.p(_, u), u[0] & /*show_copy_button*/
+      128 && ie(o, 1)) : (o = kt(_), o.c(), ie(o, 1), o.m(e, i)) : o && (Yt(), ce(o, 1, 1, () => {
         o = null;
-      }), Ut()), _ === (_ = r(a)) && f ? f.p(a, u) : (f.d(1), f = _(a), f && (f.c(), f.m(e, null))), (!s || u[0] & /*container*/
-      64) && gt(
+      }), Xt()), a === (a = r(_)) && f ? f.p(_, u) : (f.d(1), f = a(_), f && (f.c(), f.m(e, null))), (!s || u[0] & /*container*/
+      64) && wt(
         e,
         "container",
         /*container*/
-        a[6]
+        _[6]
       );
     },
-    i(a) {
-      s || (ne(t.$$.fragment, a), ne(o), s = !0);
+    i(_) {
+      s || (ie(t.$$.fragment, _), ie(o), s = !0);
     },
-    o(a) {
-      de(t.$$.fragment, a), de(o), s = !1;
+    o(_) {
+      ce(t.$$.fragment, _), ce(o), s = !1;
     },
-    d(a) {
-      a && me(e), Je(t), o && o.d(), f.d();
+    d(_) {
+      _ && de(e), Ke(t), o && o.d(), f.d();
     }
   };
 }
-function fn(l) {
-  let e, t = l[0], n = 1;
-  for (; n < l.length; ) {
-    const i = l[n], s = l[n + 1];
-    if (n += 2, (i === "optionalAccess" || i === "optionalCall") && t == null)
-      return;
-    i === "access" || i === "optionalAccess" ? (e = t, t = s(t)) : (i === "call" || i === "optionalCall") && (t = s((...o) => t.call(e, ...o)), e = void 0);
-  }
-  return t;
-}
-function an(l, e, t) {
+function on(l, e, t) {
   const n = typeof document < "u";
-  let { value: i = [] } = e, { value_is_output: s = !1 } = e, { label: o } = e, { legend_label: r } = e, { info: _ = void 0 } = e, { show_label: f = !0 } = e, { show_legend: a = !1 } = e, { show_legend_label: u = !1 } = e, { container: c = !0 } = e, { color_map: m = {} } = e, { show_copy_button: y = !1 } = e, { disabled: S } = e, T, L = "", C = "", d, p = !m || Object.keys(m).length === 0 ? {} : m, H = {}, b = !1, R;
-  function Q() {
+  let { value: i = [] } = e, { value_is_output: s = !1 } = e, { label: o } = e, { legend_label: r } = e, { info: a = void 0 } = e, { show_label: f = !0 } = e, { show_legend: _ = !1 } = e, { show_legend_label: u = !1 } = e, { container: c = !0 } = e, { color_map: m = {} } = e, { show_copy_button: y = !1 } = e, { disabled: S } = e, T, L = "", C = "", d, p = !m || Object.keys(m).length === 0 ? {} : m, H = {}, b = !1, R;
+  function K() {
     for (let h in p)
       i.map(([N, j]) => j).includes(h) || delete p[h];
     if (i.length > 0) {
@@ -1201,38 +1191,46 @@ function an(l, e, t) {
     t(12, H = Zl(p, n, d));
   }
   function E(h) {
-    i.length > 0 && h && (t(11, L = i.map(([N, j]) => N).join(" ")), t(9, C = i.map(([N, j]) => j !== null ? `<mark class="hl ${j}" style="background-color:${H[j].secondary}">${N}</mark>` : N).join(" ") + " "));
+    i.length > 0 && h && (t(10, L = i.map(([N, j]) => N).join("")), t(11, C = i.map(([N, j]) => j !== null ? `<mark class="hl ${j}" style="background-color:${H[j].secondary}">${N}</mark>` : N).join("")));
   }
-  const P = $l();
-  Ql(() => {
+  const A = xl();
+  Kl(() => {
     T && T.offsetHeight + T.scrollTop > T.scrollHeight - 100;
   });
   function X() {
-    P("change", C), s || P("input"), z();
+    P(), he(), A("change", i), s || A("input", i);
   }
-  xl(() => {
-    Q(), E(s), t(17, s = !1);
+  Ql(() => {
+    K(), E(s), t(17, s = !1);
   });
-  function be() {
-    let h = [], N = "", j = null, ee = !1, ke = "";
-    for (let ae = 0; ae < C.length; ae++) {
-      let _e = C[ae];
-      _e === "<" ? (ee = !0, N && h.push([N, j]), N = "", j = null) : _e === ">" ? (ee = !1, ke.startsWith("mark") && (j = fn([
-        ke,
-        "access",
-        (Y) => Y.match,
-        "call",
-        (Y) => Y(/class="hl ([^"]+)"/),
-        "optionalAccess",
-        (Y) => Y[1]
-      ]) || null), ke = "") : ee ? ke += _e : N += _e;
+  function he() {
+    let h = [], N = "", j = null, ee = !1, we = "", ke = C.replace(/&nbsp;|&amp;|&lt;|&gt;/g, function(te) {
+      return {
+        "&nbsp;": " ",
+        "&amp;": "&",
+        "&lt;": "<",
+        "&gt;": ">"
+      }[te];
+    });
+    for (let te = 0; te < ke.length; te++) {
+      let x = ke[te];
+      if (x === "<")
+        ee = !0, N && h.push([N, j]), N = "", j = null;
+      else if (x === ">") {
+        if (ee = !1, we.slice(0, 4) === "mark") {
+          let Ve = /class="hl ([^"]+)"/.exec(we);
+          j = Ve ? Ve[1] : null;
+        }
+        we = "";
+      } else
+        ee ? we += x : N += x;
     }
     N && h.push([N, j]), t(16, i = h);
   }
   async function D() {
-    "clipboard" in navigator && (await navigator.clipboard.writeText(L), x());
+    "clipboard" in navigator && (await navigator.clipboard.writeText(L), Q());
   }
-  function x() {
+  function Q() {
     t(13, b = !0), R && clearTimeout(R), R = setTimeout(
       () => {
         t(13, b = !1);
@@ -1240,101 +1238,93 @@ function an(l, e, t) {
       1e3
     );
   }
-  function z() {
+  function P() {
     const h = window.getSelection(), N = h.anchorOffset;
     if (h.rangeCount > 0) {
       var j = h.getRangeAt(0).commonAncestorContainer.parentElement;
       if (j && j.tagName.toLowerCase() === "mark") {
-        const tl = j.textContent;
-        var ee = j.parentElement, ke = document.createTextNode(tl);
-        ee.replaceChild(ke, j), t(9, C = ee.innerHTML);
-        var ae = document.createRange(), _e = window.getSelection();
-        const ll = N + Rl(ee);
-        var Y = Dl(ee, ll);
-        ae.setStart(Y.node, Y.offset), ae.setEnd(Y.node, Y.offset), _e.removeAllRanges(), _e.addRange(ae);
+        const Ve = j.textContent;
+        var ee = j.parentElement, we = document.createTextNode(Ve);
+        ee.replaceChild(we, j), t(11, C = ee.innerHTML);
+        var ke = document.createRange(), te = window.getSelection();
+        const tl = N + Rl(ee);
+        var x = Al(ee, tl);
+        ke.setStart(x.node, x.offset), ke.setEnd(x.node, x.offset), te.removeAllRanges(), te.addRange(ke);
       }
     }
-    be(), P("change", C);
   }
-  function ge(h) {
-    pe.call(this, l, h);
+  function be(h) {
+    Se.call(this, l, h);
   }
   function g(h) {
-    pe.call(this, l, h);
+    Se.call(this, l, h);
   }
   function je(h) {
-    pe.call(this, l, h);
+    Se.call(this, l, h);
   }
   function Ne(h) {
-    pe.call(this, l, h);
+    Se.call(this, l, h);
   }
-  function we(h) {
-    pe.call(this, l, h);
-  }
-  function Ee(h) {
-    pe.call(this, l, h);
+  function ge(h) {
+    Se.call(this, l, h);
   }
-  function Pe(h) {
-    ht[h ? "unshift" : "push"](() => {
-      T = h, t(10, T);
+  function Ze(h) {
+    bt[h ? "unshift" : "push"](() => {
+      T = h, t(9, T);
     });
   }
-  function w() {
-    L = this.textContent, C = this.innerHTML, t(11, L), t(9, C);
+  function Oe() {
+    L = this.textContent, C = this.innerHTML, t(10, L), t(11, C);
   }
-  function $t(h) {
-    ht[h ? "unshift" : "push"](() => {
-      T = h, t(10, T);
+  function w(h) {
+    bt[h ? "unshift" : "push"](() => {
+      T = h, t(9, T);
     });
   }
   function el() {
-    L = this.textContent, C = this.innerHTML, t(11, L), t(9, C);
+    L = this.textContent, C = this.innerHTML, t(10, L), t(11, C);
   }
   return l.$$set = (h) => {
-    "value" in h && t(16, i = h.value), "value_is_output" in h && t(17, s = h.value_is_output), "label" in h && t(0, o = h.label), "legend_label" in h && t(1, r = h.legend_label), "info" in h && t(2, _ = h.info), "show_label" in h && t(3, f = h.show_label), "show_legend" in h && t(4, a = h.show_legend), "show_legend_label" in h && t(5, u = h.show_legend_label), "container" in h && t(6, c = h.container), "color_map" in h && t(18, m = h.color_map), "show_copy_button" in h && t(7, y = h.show_copy_button), "disabled" in h && t(8, S = h.disabled);
-  }, l.$$.update = () => {
-    l.$$.dirty[0] & /*marked_el_text*/
-    512 && X();
-  }, Q(), E(!0), [
+    "value" in h && t(16, i = h.value), "value_is_output" in h && t(17, s = h.value_is_output), "label" in h && t(0, o = h.label), "legend_label" in h && t(1, r = h.legend_label), "info" in h && t(2, a = h.info), "show_label" in h && t(3, f = h.show_label), "show_legend" in h && t(4, _ = h.show_legend), "show_legend_label" in h && t(5, u = h.show_legend_label), "container" in h && t(6, c = h.container), "color_map" in h && t(18, m = h.color_map), "show_copy_button" in h && t(7, y = h.show_copy_button), "disabled" in h && t(8, S = h.disabled);
+  }, K(), E(!0), [
     o,
     r,
-    _,
-    f,
     a,
+    f,
+    _,
     u,
     c,
     y,
     S,
-    C,
     T,
     L,
+    C,
     H,
     b,
+    X,
     D,
-    z,
     i,
     s,
     m,
-    ge,
+    be,
     g,
     je,
     Ne,
-    we,
-    Ee,
-    Pe,
+    ge,
+    Ze,
+    Oe,
     w,
-    $t,
     el
   ];
 }
-class _n extends Il {
+class fn extends Dl {
   constructor(e) {
-    super(), Xl(
+    super(), Ul(
       this,
       e,
-      an,
       on,
-      Gl,
+      sn,
+      Yl,
       {
         value: 16,
         value_is_output: 17,
@@ -1355,30 +1345,30 @@ class _n extends Il {
   }
 }
 const {
-  SvelteComponent: rn,
-  assign: un,
-  create_slot: cn,
-  detach: dn,
-  element: mn,
-  get_all_dirty_from_scope: hn,
-  get_slot_changes: bn,
-  get_spread_update: gn,
-  init: wn,
-  insert: kn,
-  safe_not_equal: vn,
-  set_dynamic_element_data: kt,
-  set_style: A,
-  toggle_class: le,
-  transition_in: Gt,
-  transition_out: Jt,
-  update_slot_base: pn
+  SvelteComponent: _n,
+  assign: an,
+  create_slot: rn,
+  detach: un,
+  element: cn,
+  get_all_dirty_from_scope: dn,
+  get_slot_changes: mn,
+  get_spread_update: hn,
+  init: bn,
+  insert: gn,
+  safe_not_equal: wn,
+  set_dynamic_element_data: vt,
+  set_style: z,
+  toggle_class: ne,
+  transition_in: Jt,
+  transition_out: Kt,
+  update_slot_base: kn
 } = window.__gradio__svelte__internal;
-function yn(l) {
+function vn(l) {
   let e, t, n;
   const i = (
     /*#slots*/
     l[18].default
-  ), s = cn(
+  ), s = rn(
     i,
     l,
     /*$$scope*/
@@ -1399,34 +1389,34 @@ function yn(l) {
       l[3].join(" ") + " svelte-1t38q2d"
     }
   ], r = {};
-  for (let _ = 0; _ < o.length; _ += 1)
-    r = un(r, o[_]);
+  for (let a = 0; a < o.length; a += 1)
+    r = an(r, o[a]);
   return {
     c() {
-      e = mn(
+      e = cn(
         /*tag*/
         l[14]
-      ), s && s.c(), kt(
+      ), s && s.c(), vt(
         /*tag*/
         l[14]
-      )(e, r), le(
+      )(e, r), ne(
         e,
         "hidden",
         /*visible*/
         l[10] === !1
-      ), le(
+      ), ne(
         e,
         "padded",
         /*padding*/
         l[6]
-      ), le(
+      ), ne(
         e,
         "border_focus",
         /*border_mode*/
         l[5] === "focus"
-      ), le(e, "hide-container", !/*explicit_call*/
+      ), ne(e, "hide-container", !/*explicit_call*/
       l[8] && !/*container*/
-      l[9]), A(
+      l[9]), z(
         e,
         "height",
         /*get_dimension*/
@@ -1434,7 +1424,7 @@ function yn(l) {
           /*height*/
           l[0]
         )
-      ), A(e, "width", typeof /*width*/
+      ), z(e, "width", typeof /*width*/
       l[1] == "number" ? `calc(min(${/*width*/
       l[1]}px, 100%))` : (
         /*get_dimension*/
@@ -1442,135 +1432,135 @@ function yn(l) {
           /*width*/
           l[1]
         )
-      )), A(
+      )), z(
         e,
         "border-style",
         /*variant*/
         l[4]
-      ), A(
+      ), z(
         e,
         "overflow",
         /*allow_overflow*/
         l[11] ? "visible" : "hidden"
-      ), A(
+      ), z(
         e,
         "flex-grow",
         /*scale*/
         l[12]
-      ), A(e, "min-width", `calc(min(${/*min_width*/
-      l[13]}px, 100%))`), A(e, "border-width", "var(--block-border-width)");
+      ), z(e, "min-width", `calc(min(${/*min_width*/
+      l[13]}px, 100%))`), z(e, "border-width", "var(--block-border-width)");
     },
-    m(_, f) {
-      kn(_, e, f), s && s.m(e, null), n = !0;
+    m(a, f) {
+      gn(a, e, f), s && s.m(e, null), n = !0;
     },
-    p(_, f) {
+    p(a, f) {
       s && s.p && (!n || f & /*$$scope*/
-      131072) && pn(
+      131072) && kn(
         s,
         i,
-        _,
+        a,
         /*$$scope*/
-        _[17],
-        n ? bn(
+        a[17],
+        n ? mn(
           i,
           /*$$scope*/
-          _[17],
+          a[17],
           f,
           null
-        ) : hn(
+        ) : dn(
           /*$$scope*/
-          _[17]
+          a[17]
         ),
         null
-      ), kt(
+      ), vt(
         /*tag*/
-        _[14]
-      )(e, r = gn(o, [
+        a[14]
+      )(e, r = hn(o, [
         (!n || f & /*test_id*/
         128) && { "data-testid": (
           /*test_id*/
-          _[7]
+          a[7]
         ) },
         (!n || f & /*elem_id*/
         4) && { id: (
           /*elem_id*/
-          _[2]
+          a[2]
         ) },
         (!n || f & /*elem_classes*/
         8 && t !== (t = "block " + /*elem_classes*/
-        _[3].join(" ") + " svelte-1t38q2d")) && { class: t }
-      ])), le(
+        a[3].join(" ") + " svelte-1t38q2d")) && { class: t }
+      ])), ne(
         e,
         "hidden",
         /*visible*/
-        _[10] === !1
-      ), le(
+        a[10] === !1
+      ), ne(
         e,
         "padded",
         /*padding*/
-        _[6]
-      ), le(
+        a[6]
+      ), ne(
         e,
         "border_focus",
         /*border_mode*/
-        _[5] === "focus"
-      ), le(e, "hide-container", !/*explicit_call*/
-      _[8] && !/*container*/
-      _[9]), f & /*height*/
-      1 && A(
+        a[5] === "focus"
+      ), ne(e, "hide-container", !/*explicit_call*/
+      a[8] && !/*container*/
+      a[9]), f & /*height*/
+      1 && z(
         e,
         "height",
         /*get_dimension*/
-        _[15](
+        a[15](
           /*height*/
-          _[0]
+          a[0]
         )
       ), f & /*width*/
-      2 && A(e, "width", typeof /*width*/
-      _[1] == "number" ? `calc(min(${/*width*/
-      _[1]}px, 100%))` : (
+      2 && z(e, "width", typeof /*width*/
+      a[1] == "number" ? `calc(min(${/*width*/
+      a[1]}px, 100%))` : (
         /*get_dimension*/
-        _[15](
+        a[15](
           /*width*/
-          _[1]
+          a[1]
         )
       )), f & /*variant*/
-      16 && A(
+      16 && z(
         e,
         "border-style",
         /*variant*/
-        _[4]
+        a[4]
       ), f & /*allow_overflow*/
-      2048 && A(
+      2048 && z(
         e,
         "overflow",
         /*allow_overflow*/
-        _[11] ? "visible" : "hidden"
+        a[11] ? "visible" : "hidden"
       ), f & /*scale*/
-      4096 && A(
+      4096 && z(
         e,
         "flex-grow",
         /*scale*/
-        _[12]
+        a[12]
       ), f & /*min_width*/
-      8192 && A(e, "min-width", `calc(min(${/*min_width*/
-      _[13]}px, 100%))`);
+      8192 && z(e, "min-width", `calc(min(${/*min_width*/
+      a[13]}px, 100%))`);
     },
-    i(_) {
-      n || (Gt(s, _), n = !0);
+    i(a) {
+      n || (Jt(s, a), n = !0);
     },
-    o(_) {
-      Jt(s, _), n = !1;
+    o(a) {
+      Kt(s, a), n = !1;
     },
-    d(_) {
-      _ && dn(e), s && s.d(_);
+    d(a) {
+      a && un(e), s && s.d(a);
     }
   };
 }
-function Cn(l) {
+function pn(l) {
   let e, t = (
     /*tag*/
-    l[14] && yn(l)
+    l[14] && vn(l)
   );
   return {
     c() {
@@ -1584,18 +1574,18 @@ function Cn(l) {
       n[14] && t.p(n, i);
     },
     i(n) {
-      e || (Gt(t, n), e = !0);
+      e || (Jt(t, n), e = !0);
     },
     o(n) {
-      Jt(t, n), e = !1;
+      Kt(t, n), e = !1;
     },
     d(n) {
       t && t.d(n);
     }
   };
 }
-function qn(l, e, t) {
-  let { $$slots: n = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: _ = [] } = e, { variant: f = "solid" } = e, { border_mode: a = "base" } = e, { padding: u = !0 } = e, { type: c = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: y = !1 } = e, { container: S = !0 } = e, { visible: T = !0 } = e, { allow_overflow: L = !0 } = e, { scale: C = null } = e, { min_width: d = 0 } = e, p = c === "fieldset" ? "fieldset" : "div";
+function yn(l, e, t) {
+  let { $$slots: n = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: a = [] } = e, { variant: f = "solid" } = e, { border_mode: _ = "base" } = e, { padding: u = !0 } = e, { type: c = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: y = !1 } = e, { container: S = !0 } = e, { visible: T = !0 } = e, { allow_overflow: L = !0 } = e, { scale: C = null } = e, { min_width: d = 0 } = e, p = c === "fieldset" ? "fieldset" : "div";
   const H = (b) => {
     if (b !== void 0) {
       if (typeof b == "number")
@@ -1605,14 +1595,14 @@ function qn(l, e, t) {
     }
   };
   return l.$$set = (b) => {
-    "height" in b && t(0, s = b.height), "width" in b && t(1, o = b.width), "elem_id" in b && t(2, r = b.elem_id), "elem_classes" in b && t(3, _ = b.elem_classes), "variant" in b && t(4, f = b.variant), "border_mode" in b && t(5, a = b.border_mode), "padding" in b && t(6, u = b.padding), "type" in b && t(16, c = b.type), "test_id" in b && t(7, m = b.test_id), "explicit_call" in b && t(8, y = b.explicit_call), "container" in b && t(9, S = b.container), "visible" in b && t(10, T = b.visible), "allow_overflow" in b && t(11, L = b.allow_overflow), "scale" in b && t(12, C = b.scale), "min_width" in b && t(13, d = b.min_width), "$$scope" in b && t(17, i = b.$$scope);
+    "height" in b && t(0, s = b.height), "width" in b && t(1, o = b.width), "elem_id" in b && t(2, r = b.elem_id), "elem_classes" in b && t(3, a = b.elem_classes), "variant" in b && t(4, f = b.variant), "border_mode" in b && t(5, _ = b.border_mode), "padding" in b && t(6, u = b.padding), "type" in b && t(16, c = b.type), "test_id" in b && t(7, m = b.test_id), "explicit_call" in b && t(8, y = b.explicit_call), "container" in b && t(9, S = b.container), "visible" in b && t(10, T = b.visible), "allow_overflow" in b && t(11, L = b.allow_overflow), "scale" in b && t(12, C = b.scale), "min_width" in b && t(13, d = b.min_width), "$$scope" in b && t(17, i = b.$$scope);
   }, [
     s,
     o,
     r,
-    _,
-    f,
     a,
+    f,
+    _,
     u,
     m,
     y,
@@ -1628,9 +1618,9 @@ function qn(l, e, t) {
     n
   ];
 }
-class Tn extends rn {
+class Cn extends _n {
   constructor(e) {
-    super(), wn(this, e, qn, Cn, vn, {
+    super(), bn(this, e, yn, pn, wn, {
       height: 0,
       width: 1,
       elem_id: 2,
@@ -1649,7 +1639,7 @@ class Tn extends rn {
     });
   }
 }
-function ye(l) {
+function pe(l) {
   let e = ["", "k", "M", "G", "T", "P", "E", "Z"], t = 0;
   for (; l > 1e3 && t < e.length - 1; )
     l /= 1e3, t++;
@@ -1657,29 +1647,29 @@ function ye(l) {
   return (Number.isInteger(l) ? l : l.toFixed(1)) + n;
 }
 const {
-  SvelteComponent: Ln,
+  SvelteComponent: qn,
   append: I,
   attr: q,
-  component_subscribe: vt,
-  detach: Sn,
-  element: Fn,
-  init: Hn,
-  insert: Mn,
-  noop: pt,
-  safe_not_equal: jn,
-  set_style: Ve,
+  component_subscribe: pt,
+  detach: Tn,
+  element: Ln,
+  init: Sn,
+  insert: Fn,
+  noop: yt,
+  safe_not_equal: Hn,
+  set_style: ze,
   svg_element: W,
-  toggle_class: yt
-} = window.__gradio__svelte__internal, { onMount: Nn } = window.__gradio__svelte__internal;
-function Vn(l) {
-  let e, t, n, i, s, o, r, _, f, a, u, c;
+  toggle_class: Ct
+} = window.__gradio__svelte__internal, { onMount: Mn } = window.__gradio__svelte__internal;
+function jn(l) {
+  let e, t, n, i, s, o, r, a, f, _, u, c;
   return {
     c() {
-      e = Fn("div"), t = W("svg"), n = W("g"), i = W("path"), s = W("path"), o = W("path"), r = W("path"), _ = W("g"), f = W("path"), a = W("path"), u = W("path"), c = W("path"), q(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), q(i, "fill", "#FF7C00"), q(i, "fill-opacity", "0.4"), q(i, "class", "svelte-43sxxs"), q(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), q(s, "fill", "#FF7C00"), q(s, "class", "svelte-43sxxs"), q(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), q(o, "fill", "#FF7C00"), q(o, "fill-opacity", "0.4"), q(o, "class", "svelte-43sxxs"), q(r, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), q(r, "fill", "#FF7C00"), q(r, "class", "svelte-43sxxs"), Ve(n, "transform", "translate(" + /*$top*/
+      e = Ln("div"), t = W("svg"), n = W("g"), i = W("path"), s = W("path"), o = W("path"), r = W("path"), a = W("g"), f = W("path"), _ = W("path"), u = W("path"), c = W("path"), q(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), q(i, "fill", "#FF7C00"), q(i, "fill-opacity", "0.4"), q(i, "class", "svelte-43sxxs"), q(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), q(s, "fill", "#FF7C00"), q(s, "class", "svelte-43sxxs"), q(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), q(o, "fill", "#FF7C00"), q(o, "fill-opacity", "0.4"), q(o, "class", "svelte-43sxxs"), q(r, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), q(r, "fill", "#FF7C00"), q(r, "class", "svelte-43sxxs"), ze(n, "transform", "translate(" + /*$top*/
       l[1][0] + "px, " + /*$top*/
-      l[1][1] + "px)"), q(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), q(f, "fill", "#FF7C00"), q(f, "fill-opacity", "0.4"), q(f, "class", "svelte-43sxxs"), q(a, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), q(a, "fill", "#FF7C00"), q(a, "class", "svelte-43sxxs"), q(u, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), q(u, "fill", "#FF7C00"), q(u, "fill-opacity", "0.4"), q(u, "class", "svelte-43sxxs"), q(c, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), q(c, "fill", "#FF7C00"), q(c, "class", "svelte-43sxxs"), Ve(_, "transform", "translate(" + /*$bottom*/
+      l[1][1] + "px)"), q(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), q(f, "fill", "#FF7C00"), q(f, "fill-opacity", "0.4"), q(f, "class", "svelte-43sxxs"), q(_, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), q(_, "fill", "#FF7C00"), q(_, "class", "svelte-43sxxs"), q(u, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), q(u, "fill", "#FF7C00"), q(u, "fill-opacity", "0.4"), q(u, "class", "svelte-43sxxs"), q(c, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), q(c, "fill", "#FF7C00"), q(c, "class", "svelte-43sxxs"), ze(a, "transform", "translate(" + /*$bottom*/
       l[2][0] + "px, " + /*$bottom*/
-      l[2][1] + "px)"), q(t, "viewBox", "-1200 -1200 3000 3000"), q(t, "fill", "none"), q(t, "xmlns", "http://www.w3.org/2000/svg"), q(t, "class", "svelte-43sxxs"), q(e, "class", "svelte-43sxxs"), yt(
+      l[2][1] + "px)"), q(t, "viewBox", "-1200 -1200 3000 3000"), q(t, "fill", "none"), q(t, "xmlns", "http://www.w3.org/2000/svg"), q(t, "class", "svelte-43sxxs"), q(e, "class", "svelte-43sxxs"), Ct(
         e,
         "margin",
         /*margin*/
@@ -1687,95 +1677,95 @@ function Vn(l) {
       );
     },
     m(m, y) {
-      Mn(m, e, y), I(e, t), I(t, n), I(n, i), I(n, s), I(n, o), I(n, r), I(t, _), I(_, f), I(_, a), I(_, u), I(_, c);
+      Fn(m, e, y), I(e, t), I(t, n), I(n, i), I(n, s), I(n, o), I(n, r), I(t, a), I(a, f), I(a, _), I(a, u), I(a, c);
     },
     p(m, [y]) {
       y & /*$top*/
-      2 && Ve(n, "transform", "translate(" + /*$top*/
+      2 && ze(n, "transform", "translate(" + /*$top*/
       m[1][0] + "px, " + /*$top*/
       m[1][1] + "px)"), y & /*$bottom*/
-      4 && Ve(_, "transform", "translate(" + /*$bottom*/
+      4 && ze(a, "transform", "translate(" + /*$bottom*/
       m[2][0] + "px, " + /*$bottom*/
       m[2][1] + "px)"), y & /*margin*/
-      1 && yt(
+      1 && Ct(
         e,
         "margin",
         /*margin*/
         m[0]
       );
     },
-    i: pt,
-    o: pt,
+    i: yt,
+    o: yt,
     d(m) {
-      m && Sn(e);
+      m && Tn(e);
     }
   };
 }
-function zn(l, e, t) {
+function Nn(l, e, t) {
   let n, i, { margin: s = !0 } = e;
-  const o = _t([0, 0]);
-  vt(l, o, (c) => t(1, n = c));
-  const r = _t([0, 0]);
-  vt(l, r, (c) => t(2, i = c));
-  let _;
+  const o = rt([0, 0]);
+  pt(l, o, (c) => t(1, n = c));
+  const r = rt([0, 0]);
+  pt(l, r, (c) => t(2, i = c));
+  let a;
   async function f() {
     await Promise.all([o.set([125, 140]), r.set([-125, -140])]), await Promise.all([o.set([-125, 140]), r.set([125, -140])]), await Promise.all([o.set([-125, 0]), r.set([125, -0])]), await Promise.all([o.set([125, 0]), r.set([-125, 0])]);
   }
-  async function a() {
-    await f(), _ || a();
+  async function _() {
+    await f(), a || _();
   }
   async function u() {
-    await Promise.all([o.set([125, 0]), r.set([-125, 0])]), a();
+    await Promise.all([o.set([125, 0]), r.set([-125, 0])]), _();
   }
-  return Nn(() => (u(), () => _ = !0)), l.$$set = (c) => {
+  return Mn(() => (u(), () => a = !0)), l.$$set = (c) => {
     "margin" in c && t(0, s = c.margin);
   }, [s, n, i, o, r];
 }
-class An extends Ln {
+class Vn extends qn {
   constructor(e) {
-    super(), Hn(this, e, zn, Vn, jn, { margin: 0 });
+    super(), Sn(this, e, Nn, jn, Hn, { margin: 0 });
   }
 }
 const {
-  SvelteComponent: Bn,
-  append: ue,
-  attr: J,
-  binding_callbacks: Ct,
-  check_outros: Kt,
-  create_component: En,
-  create_slot: Pn,
-  destroy_component: Zn,
-  destroy_each: Qt,
+  SvelteComponent: zn,
+  append: re,
+  attr: G,
+  binding_callbacks: qt,
+  check_outros: Qt,
+  create_component: Bn,
+  create_slot: En,
+  destroy_component: Pn,
+  destroy_each: xt,
   detach: k,
   element: $,
-  empty: Se,
-  ensure_array_like: Be,
-  get_all_dirty_from_scope: On,
-  get_slot_changes: Rn,
-  group_outros: xt,
-  init: Dn,
+  empty: Le,
+  ensure_array_like: Pe,
+  get_all_dirty_from_scope: Zn,
+  get_slot_changes: On,
+  group_outros: $t,
+  init: Rn,
   insert: v,
-  mount_component: In,
-  noop: We,
-  safe_not_equal: Wn,
+  mount_component: An,
+  noop: Ue,
+  safe_not_equal: Dn,
   set_data: O,
-  set_style: ie,
-  space: K,
+  set_style: se,
+  space: J,
   text: F,
   toggle_class: Z,
-  transition_in: Te,
-  transition_out: Le,
-  update_slot_base: Un
-} = window.__gradio__svelte__internal, { tick: Xn } = window.__gradio__svelte__internal, { onDestroy: Yn } = window.__gradio__svelte__internal, Gn = (l) => ({}), qt = (l) => ({});
-function Tt(l, e, t) {
+  transition_in: qe,
+  transition_out: Te,
+  update_slot_base: In
+} = window.__gradio__svelte__internal, { tick: Wn } = window.__gradio__svelte__internal, { onDestroy: Un } = window.__gradio__svelte__internal, Xn = (l) => ({}), Tt = (l) => ({});
+function Lt(l, e, t) {
   const n = l.slice();
   return n[38] = e[t], n[40] = t, n;
 }
-function Lt(l, e, t) {
+function St(l, e, t) {
   const n = l.slice();
   return n[38] = e[t], n;
 }
-function Jn(l) {
+function Yn(l) {
   let e, t = (
     /*i18n*/
     l[1]("common.error") + ""
@@ -1783,85 +1773,85 @@ function Jn(l) {
   const o = (
     /*#slots*/
     l[29].error
-  ), r = Pn(
+  ), r = En(
     o,
     l,
     /*$$scope*/
     l[28],
-    qt
+    Tt
   );
   return {
     c() {
-      e = $("span"), n = F(t), i = K(), r && r.c(), J(e, "class", "error svelte-1txqlrd");
+      e = $("span"), n = F(t), i = J(), r && r.c(), G(e, "class", "error svelte-1txqlrd");
     },
-    m(_, f) {
-      v(_, e, f), ue(e, n), v(_, i, f), r && r.m(_, f), s = !0;
+    m(a, f) {
+      v(a, e, f), re(e, n), v(a, i, f), r && r.m(a, f), s = !0;
     },
-    p(_, f) {
+    p(a, f) {
       (!s || f[0] & /*i18n*/
       2) && t !== (t = /*i18n*/
-      _[1]("common.error") + "") && O(n, t), r && r.p && (!s || f[0] & /*$$scope*/
-      268435456) && Un(
+      a[1]("common.error") + "") && O(n, t), r && r.p && (!s || f[0] & /*$$scope*/
+      268435456) && In(
         r,
         o,
-        _,
+        a,
         /*$$scope*/
-        _[28],
-        s ? Rn(
+        a[28],
+        s ? On(
           o,
           /*$$scope*/
-          _[28],
+          a[28],
           f,
-          Gn
-        ) : On(
+          Xn
+        ) : Zn(
           /*$$scope*/
-          _[28]
+          a[28]
         ),
-        qt
+        Tt
       );
     },
-    i(_) {
-      s || (Te(r, _), s = !0);
+    i(a) {
+      s || (qe(r, a), s = !0);
     },
-    o(_) {
-      Le(r, _), s = !1;
+    o(a) {
+      Te(r, a), s = !1;
     },
-    d(_) {
-      _ && (k(e), k(i)), r && r.d(_);
+    d(a) {
+      a && (k(e), k(i)), r && r.d(a);
     }
   };
 }
-function Kn(l) {
-  let e, t, n, i, s, o, r, _, f, a = (
+function Gn(l) {
+  let e, t, n, i, s, o, r, a, f, _ = (
     /*variant*/
     l[8] === "default" && /*show_eta_bar*/
     l[18] && /*show_progress*/
-    l[6] === "full" && St(l)
+    l[6] === "full" && Ft(l)
   );
   function u(d, p) {
     if (
       /*progress*/
       d[7]
     )
-      return $n;
+      return Qn;
     if (
       /*queue_position*/
       d[2] !== null && /*queue_size*/
       d[3] !== void 0 && /*queue_position*/
       d[2] >= 0
     )
-      return xn;
+      return Kn;
     if (
       /*queue_position*/
       d[2] === 0
     )
-      return Qn;
+      return Jn;
   }
   let c = u(l), m = c && c(l), y = (
     /*timer*/
-    l[5] && Mt(l)
+    l[5] && jt(l)
   );
-  const S = [ni, li], T = [];
+  const S = [ti, ei], T = [];
   function L(d, p) {
     return (
       /*last_progress_level*/
@@ -1873,10 +1863,10 @@ function Kn(l) {
   }
   ~(s = L(l)) && (o = T[s] = S[s](l));
   let C = !/*timer*/
-  l[5] && Et(l);
+  l[5] && Zt(l);
   return {
     c() {
-      a && a.c(), e = K(), t = $("div"), m && m.c(), n = K(), y && y.c(), i = K(), o && o.c(), r = K(), C && C.c(), _ = Se(), J(t, "class", "progress-text svelte-1txqlrd"), Z(
+      _ && _.c(), e = J(), t = $("div"), m && m.c(), n = J(), y && y.c(), i = J(), o && o.c(), r = J(), C && C.c(), a = Le(), G(t, "class", "progress-text svelte-1txqlrd"), Z(
         t,
         "meta-text-center",
         /*variant*/
@@ -1889,14 +1879,14 @@ function Kn(l) {
       );
     },
     m(d, p) {
-      a && a.m(d, p), v(d, e, p), v(d, t, p), m && m.m(t, null), ue(t, n), y && y.m(t, null), v(d, i, p), ~s && T[s].m(d, p), v(d, r, p), C && C.m(d, p), v(d, _, p), f = !0;
+      _ && _.m(d, p), v(d, e, p), v(d, t, p), m && m.m(t, null), re(t, n), y && y.m(t, null), v(d, i, p), ~s && T[s].m(d, p), v(d, r, p), C && C.m(d, p), v(d, a, p), f = !0;
     },
     p(d, p) {
       /*variant*/
       d[8] === "default" && /*show_eta_bar*/
       d[18] && /*show_progress*/
-      d[6] === "full" ? a ? a.p(d, p) : (a = St(d), a.c(), a.m(e.parentNode, e)) : a && (a.d(1), a = null), c === (c = u(d)) && m ? m.p(d, p) : (m && m.d(1), m = c && c(d), m && (m.c(), m.m(t, n))), /*timer*/
-      d[5] ? y ? y.p(d, p) : (y = Mt(d), y.c(), y.m(t, null)) : y && (y.d(1), y = null), (!f || p[0] & /*variant*/
+      d[6] === "full" ? _ ? _.p(d, p) : (_ = Ft(d), _.c(), _.m(e.parentNode, e)) : _ && (_.d(1), _ = null), c === (c = u(d)) && m ? m.p(d, p) : (m && m.d(1), m = c && c(d), m && (m.c(), m.m(t, n))), /*timer*/
+      d[5] ? y ? y.p(d, p) : (y = jt(d), y.c(), y.m(t, null)) : y && (y.d(1), y = null), (!f || p[0] & /*variant*/
       256) && Z(
         t,
         "meta-text-center",
@@ -1910,28 +1900,28 @@ function Kn(l) {
         d[8] === "default"
       );
       let H = s;
-      s = L(d), s === H ? ~s && T[s].p(d, p) : (o && (xt(), Le(T[H], 1, 1, () => {
+      s = L(d), s === H ? ~s && T[s].p(d, p) : (o && ($t(), Te(T[H], 1, 1, () => {
         T[H] = null;
-      }), Kt()), ~s ? (o = T[s], o ? o.p(d, p) : (o = T[s] = S[s](d), o.c()), Te(o, 1), o.m(r.parentNode, r)) : o = null), /*timer*/
-      d[5] ? C && (C.d(1), C = null) : C ? C.p(d, p) : (C = Et(d), C.c(), C.m(_.parentNode, _));
+      }), Qt()), ~s ? (o = T[s], o ? o.p(d, p) : (o = T[s] = S[s](d), o.c()), qe(o, 1), o.m(r.parentNode, r)) : o = null), /*timer*/
+      d[5] ? C && (C.d(1), C = null) : C ? C.p(d, p) : (C = Zt(d), C.c(), C.m(a.parentNode, a));
     },
     i(d) {
-      f || (Te(o), f = !0);
+      f || (qe(o), f = !0);
     },
     o(d) {
-      Le(o), f = !1;
+      Te(o), f = !1;
     },
     d(d) {
-      d && (k(e), k(t), k(i), k(r), k(_)), a && a.d(d), m && m.d(), y && y.d(), ~s && T[s].d(d), C && C.d(d);
+      d && (k(e), k(t), k(i), k(r), k(a)), _ && _.d(d), m && m.d(), y && y.d(), ~s && T[s].d(d), C && C.d(d);
     }
   };
 }
-function St(l) {
+function Ft(l) {
   let e, t = `translateX(${/*eta_level*/
   (l[17] || 0) * 100 - 100}%)`;
   return {
     c() {
-      e = $("div"), J(e, "class", "eta-bar svelte-1txqlrd"), ie(e, "transform", t);
+      e = $("div"), G(e, "class", "eta-bar svelte-1txqlrd"), se(e, "transform", t);
     },
     m(n, i) {
       v(n, e, i);
@@ -1939,14 +1929,14 @@ function St(l) {
     p(n, i) {
       i[0] & /*eta_level*/
       131072 && t !== (t = `translateX(${/*eta_level*/
-      (n[17] || 0) * 100 - 100}%)`) && ie(e, "transform", t);
+      (n[17] || 0) * 100 - 100}%)`) && se(e, "transform", t);
     },
     d(n) {
       n && k(e);
     }
   };
 }
-function Qn(l) {
+function Jn(l) {
   let e;
   return {
     c() {
@@ -1955,13 +1945,13 @@ function Qn(l) {
     m(t, n) {
       v(t, e, n);
     },
-    p: We,
+    p: Ue,
     d(t) {
       t && k(e);
     }
   };
 }
-function xn(l) {
+function Kn(l) {
   let e, t = (
     /*queue_position*/
     l[2] + 1 + ""
@@ -1973,13 +1963,13 @@ function xn(l) {
         l[3]
       ), o = F(" |");
     },
-    m(r, _) {
-      v(r, e, _), v(r, n, _), v(r, i, _), v(r, s, _), v(r, o, _);
+    m(r, a) {
+      v(r, e, a), v(r, n, a), v(r, i, a), v(r, s, a), v(r, o, a);
     },
-    p(r, _) {
-      _[0] & /*queue_position*/
+    p(r, a) {
+      a[0] & /*queue_position*/
       4 && t !== (t = /*queue_position*/
-      r[2] + 1 + "") && O(n, t), _[0] & /*queue_size*/
+      r[2] + 1 + "") && O(n, t), a[0] & /*queue_size*/
       8 && O(
         s,
         /*queue_size*/
@@ -1991,18 +1981,18 @@ function xn(l) {
     }
   };
 }
-function $n(l) {
-  let e, t = Be(
+function Qn(l) {
+  let e, t = Pe(
     /*progress*/
     l[7]
   ), n = [];
   for (let i = 0; i < t.length; i += 1)
-    n[i] = Ht(Lt(l, t, i));
+    n[i] = Mt(St(l, t, i));
   return {
     c() {
       for (let i = 0; i < n.length; i += 1)
         n[i].c();
-      e = Se();
+      e = Le();
     },
     m(i, s) {
       for (let o = 0; o < n.length; o += 1)
@@ -2012,14 +2002,14 @@ function $n(l) {
     p(i, s) {
       if (s[0] & /*progress*/
       128) {
-        t = Be(
+        t = Pe(
           /*progress*/
           i[7]
         );
         let o;
         for (o = 0; o < t.length; o += 1) {
-          const r = Lt(i, t, o);
-          n[o] ? n[o].p(r, s) : (n[o] = Ht(r), n[o].c(), n[o].m(e.parentNode, e));
+          const r = St(i, t, o);
+          n[o] ? n[o].p(r, s) : (n[o] = Mt(r), n[o].c(), n[o].m(e.parentNode, e));
         }
         for (; o < n.length; o += 1)
           n[o].d(1);
@@ -2027,41 +2017,41 @@ function $n(l) {
       }
     },
     d(i) {
-      i && k(e), Qt(n, i);
+      i && k(e), xt(n, i);
     }
   };
 }
-function Ft(l) {
+function Ht(l) {
   let e, t = (
     /*p*/
     l[38].unit + ""
   ), n, i, s = " ", o;
-  function r(a, u) {
+  function r(_, u) {
     return (
       /*p*/
-      a[38].length != null ? ti : ei
+      _[38].length != null ? $n : xn
     );
   }
-  let _ = r(l), f = _(l);
+  let a = r(l), f = a(l);
   return {
     c() {
-      f.c(), e = K(), n = F(t), i = F(" | "), o = F(s);
+      f.c(), e = J(), n = F(t), i = F(" | "), o = F(s);
     },
-    m(a, u) {
-      f.m(a, u), v(a, e, u), v(a, n, u), v(a, i, u), v(a, o, u);
+    m(_, u) {
+      f.m(_, u), v(_, e, u), v(_, n, u), v(_, i, u), v(_, o, u);
     },
-    p(a, u) {
-      _ === (_ = r(a)) && f ? f.p(a, u) : (f.d(1), f = _(a), f && (f.c(), f.m(e.parentNode, e))), u[0] & /*progress*/
+    p(_, u) {
+      a === (a = r(_)) && f ? f.p(_, u) : (f.d(1), f = a(_), f && (f.c(), f.m(e.parentNode, e))), u[0] & /*progress*/
       128 && t !== (t = /*p*/
-      a[38].unit + "") && O(n, t);
+      _[38].unit + "") && O(n, t);
     },
-    d(a) {
-      a && (k(e), k(n), k(i), k(o)), f.d(a);
+    d(_) {
+      _ && (k(e), k(n), k(i), k(o)), f.d(_);
     }
   };
 }
-function ei(l) {
-  let e = ye(
+function xn(l) {
+  let e = pe(
     /*p*/
     l[38].index || 0
   ) + "", t;
@@ -2074,7 +2064,7 @@ function ei(l) {
     },
     p(n, i) {
       i[0] & /*progress*/
-      128 && e !== (e = ye(
+      128 && e !== (e = pe(
         /*p*/
         n[38].index || 0
       ) + "") && O(t, e);
@@ -2084,11 +2074,11 @@ function ei(l) {
     }
   };
 }
-function ti(l) {
-  let e = ye(
+function $n(l) {
+  let e = pe(
     /*p*/
     l[38].index || 0
-  ) + "", t, n, i = ye(
+  ) + "", t, n, i = pe(
     /*p*/
     l[38].length
   ) + "", s;
@@ -2101,11 +2091,11 @@ function ti(l) {
     },
     p(o, r) {
       r[0] & /*progress*/
-      128 && e !== (e = ye(
+      128 && e !== (e = pe(
         /*p*/
         o[38].index || 0
       ) + "") && O(t, e), r[0] & /*progress*/
-      128 && i !== (i = ye(
+      128 && i !== (i = pe(
         /*p*/
         o[38].length
       ) + "") && O(s, i);
@@ -2115,28 +2105,28 @@ function ti(l) {
     }
   };
 }
-function Ht(l) {
+function Mt(l) {
   let e, t = (
     /*p*/
-    l[38].index != null && Ft(l)
+    l[38].index != null && Ht(l)
   );
   return {
     c() {
-      t && t.c(), e = Se();
+      t && t.c(), e = Le();
     },
     m(n, i) {
       t && t.m(n, i), v(n, e, i);
     },
     p(n, i) {
       /*p*/
-      n[38].index != null ? t ? t.p(n, i) : (t = Ft(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
+      n[38].index != null ? t ? t.p(n, i) : (t = Ht(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
     },
     d(n) {
       n && k(e), t && t.d(n);
     }
   };
 }
-function Mt(l) {
+function jt(l) {
   let e, t = (
     /*eta*/
     l[0] ? `/${/*formatted_eta*/
@@ -2168,19 +2158,19 @@ function Mt(l) {
     }
   };
 }
-function li(l) {
+function ei(l) {
   let e, t;
-  return e = new An({
+  return e = new Vn({
     props: { margin: (
       /*variant*/
       l[8] === "default"
     ) }
   }), {
     c() {
-      En(e.$$.fragment);
+      Bn(e.$$.fragment);
     },
     m(n, i) {
-      In(e, n, i), t = !0;
+      An(e, n, i), t = !0;
     },
     p(n, i) {
       const s = {};
@@ -2189,54 +2179,54 @@ function li(l) {
       n[8] === "default"), e.$set(s);
     },
     i(n) {
-      t || (Te(e.$$.fragment, n), t = !0);
+      t || (qe(e.$$.fragment, n), t = !0);
     },
     o(n) {
-      Le(e.$$.fragment, n), t = !1;
+      Te(e.$$.fragment, n), t = !1;
     },
     d(n) {
-      Zn(e, n);
+      Pn(e, n);
     }
   };
 }
-function ni(l) {
+function ti(l) {
   let e, t, n, i, s, o = `${/*last_progress_level*/
   l[15] * 100}%`, r = (
     /*progress*/
-    l[7] != null && jt(l)
+    l[7] != null && Nt(l)
   );
   return {
     c() {
-      e = $("div"), t = $("div"), r && r.c(), n = K(), i = $("div"), s = $("div"), J(t, "class", "progress-level-inner svelte-1txqlrd"), J(s, "class", "progress-bar svelte-1txqlrd"), ie(s, "width", o), J(i, "class", "progress-bar-wrap svelte-1txqlrd"), J(e, "class", "progress-level svelte-1txqlrd");
+      e = $("div"), t = $("div"), r && r.c(), n = J(), i = $("div"), s = $("div"), G(t, "class", "progress-level-inner svelte-1txqlrd"), G(s, "class", "progress-bar svelte-1txqlrd"), se(s, "width", o), G(i, "class", "progress-bar-wrap svelte-1txqlrd"), G(e, "class", "progress-level svelte-1txqlrd");
     },
-    m(_, f) {
-      v(_, e, f), ue(e, t), r && r.m(t, null), ue(e, n), ue(e, i), ue(i, s), l[30](s);
+    m(a, f) {
+      v(a, e, f), re(e, t), r && r.m(t, null), re(e, n), re(e, i), re(i, s), l[30](s);
     },
-    p(_, f) {
+    p(a, f) {
       /*progress*/
-      _[7] != null ? r ? r.p(_, f) : (r = jt(_), r.c(), r.m(t, null)) : r && (r.d(1), r = null), f[0] & /*last_progress_level*/
+      a[7] != null ? r ? r.p(a, f) : (r = Nt(a), r.c(), r.m(t, null)) : r && (r.d(1), r = null), f[0] & /*last_progress_level*/
       32768 && o !== (o = `${/*last_progress_level*/
-      _[15] * 100}%`) && ie(s, "width", o);
+      a[15] * 100}%`) && se(s, "width", o);
     },
-    i: We,
-    o: We,
-    d(_) {
-      _ && k(e), r && r.d(), l[30](null);
+    i: Ue,
+    o: Ue,
+    d(a) {
+      a && k(e), r && r.d(), l[30](null);
     }
   };
 }
-function jt(l) {
-  let e, t = Be(
+function Nt(l) {
+  let e, t = Pe(
     /*progress*/
     l[7]
   ), n = [];
   for (let i = 0; i < t.length; i += 1)
-    n[i] = Bt(Tt(l, t, i));
+    n[i] = Pt(Lt(l, t, i));
   return {
     c() {
       for (let i = 0; i < n.length; i += 1)
         n[i].c();
-      e = Se();
+      e = Le();
     },
     m(i, s) {
       for (let o = 0; o < n.length; o += 1)
@@ -2246,14 +2236,14 @@ function jt(l) {
     p(i, s) {
       if (s[0] & /*progress_level, progress*/
       16512) {
-        t = Be(
+        t = Pe(
           /*progress*/
           i[7]
         );
         let o;
         for (o = 0; o < t.length; o += 1) {
-          const r = Tt(i, t, o);
-          n[o] ? n[o].p(r, s) : (n[o] = Bt(r), n[o].c(), n[o].m(e.parentNode, e));
+          const r = Lt(i, t, o);
+          n[o] ? n[o].p(r, s) : (n[o] = Pt(r), n[o].c(), n[o].m(e.parentNode, e));
         }
         for (; o < n.length; o += 1)
           n[o].d(1);
@@ -2261,17 +2251,17 @@ function jt(l) {
       }
     },
     d(i) {
-      i && k(e), Qt(n, i);
+      i && k(e), xt(n, i);
     }
   };
 }
-function Nt(l) {
+function Vt(l) {
   let e, t, n, i, s = (
     /*i*/
-    l[40] !== 0 && ii()
+    l[40] !== 0 && li()
   ), o = (
     /*p*/
-    l[38].desc != null && Vt(l)
+    l[38].desc != null && zt(l)
   ), r = (
     /*p*/
     l[38].desc != null && /*progress_level*/
@@ -2279,35 +2269,35 @@ function Nt(l) {
     l[14][
       /*i*/
       l[40]
-    ] != null && zt()
-  ), _ = (
+    ] != null && Bt()
+  ), a = (
     /*progress_level*/
-    l[14] != null && At(l)
+    l[14] != null && Et(l)
   );
   return {
     c() {
-      s && s.c(), e = K(), o && o.c(), t = K(), r && r.c(), n = K(), _ && _.c(), i = Se();
+      s && s.c(), e = J(), o && o.c(), t = J(), r && r.c(), n = J(), a && a.c(), i = Le();
     },
-    m(f, a) {
-      s && s.m(f, a), v(f, e, a), o && o.m(f, a), v(f, t, a), r && r.m(f, a), v(f, n, a), _ && _.m(f, a), v(f, i, a);
+    m(f, _) {
+      s && s.m(f, _), v(f, e, _), o && o.m(f, _), v(f, t, _), r && r.m(f, _), v(f, n, _), a && a.m(f, _), v(f, i, _);
     },
-    p(f, a) {
+    p(f, _) {
       /*p*/
-      f[38].desc != null ? o ? o.p(f, a) : (o = Vt(f), o.c(), o.m(t.parentNode, t)) : o && (o.d(1), o = null), /*p*/
+      f[38].desc != null ? o ? o.p(f, _) : (o = zt(f), o.c(), o.m(t.parentNode, t)) : o && (o.d(1), o = null), /*p*/
       f[38].desc != null && /*progress_level*/
       f[14] && /*progress_level*/
       f[14][
         /*i*/
         f[40]
-      ] != null ? r || (r = zt(), r.c(), r.m(n.parentNode, n)) : r && (r.d(1), r = null), /*progress_level*/
-      f[14] != null ? _ ? _.p(f, a) : (_ = At(f), _.c(), _.m(i.parentNode, i)) : _ && (_.d(1), _ = null);
+      ] != null ? r || (r = Bt(), r.c(), r.m(n.parentNode, n)) : r && (r.d(1), r = null), /*progress_level*/
+      f[14] != null ? a ? a.p(f, _) : (a = Et(f), a.c(), a.m(i.parentNode, i)) : a && (a.d(1), a = null);
     },
     d(f) {
-      f && (k(e), k(t), k(n), k(i)), s && s.d(f), o && o.d(f), r && r.d(f), _ && _.d(f);
+      f && (k(e), k(t), k(n), k(i)), s && s.d(f), o && o.d(f), r && r.d(f), a && a.d(f);
     }
   };
 }
-function ii(l) {
+function li(l) {
   let e;
   return {
     c() {
@@ -2321,7 +2311,7 @@ function ii(l) {
     }
   };
 }
-function Vt(l) {
+function zt(l) {
   let e = (
     /*p*/
     l[38].desc + ""
@@ -2343,7 +2333,7 @@ function Vt(l) {
     }
   };
 }
-function zt(l) {
+function Bt(l) {
   let e;
   return {
     c() {
@@ -2357,7 +2347,7 @@ function zt(l) {
     }
   };
 }
-function At(l) {
+function Et(l) {
   let e = (100 * /*progress_level*/
   (l[14][
     /*i*/
@@ -2383,7 +2373,7 @@ function At(l) {
     }
   };
 }
-function Bt(l) {
+function Pt(l) {
   let e, t = (
     /*p*/
     (l[38].desc != null || /*progress_level*/
@@ -2391,11 +2381,11 @@ function Bt(l) {
     l[14][
       /*i*/
       l[40]
-    ] != null) && Nt(l)
+    ] != null) && Vt(l)
   );
   return {
     c() {
-      t && t.c(), e = Se();
+      t && t.c(), e = Le();
     },
     m(n, i) {
       t && t.m(n, i), v(n, e, i);
@@ -2407,24 +2397,24 @@ function Bt(l) {
       n[14][
         /*i*/
         n[40]
-      ] != null ? t ? t.p(n, i) : (t = Nt(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
+      ] != null ? t ? t.p(n, i) : (t = Vt(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
     },
     d(n) {
       n && k(e), t && t.d(n);
     }
   };
 }
-function Et(l) {
+function Zt(l) {
   let e, t;
   return {
     c() {
       e = $("p"), t = F(
         /*loading_text*/
         l[9]
-      ), J(e, "class", "loading svelte-1txqlrd");
+      ), G(e, "class", "loading svelte-1txqlrd");
     },
     m(n, i) {
-      v(n, e, i), ue(e, t);
+      v(n, e, i), re(e, t);
     },
     p(n, i) {
       i[0] & /*loading_text*/
@@ -2439,10 +2429,10 @@ function Et(l) {
     }
   };
 }
-function si(l) {
+function ni(l) {
   let e, t, n, i, s;
-  const o = [Kn, Jn], r = [];
-  function _(f, a) {
+  const o = [Gn, Yn], r = [];
+  function a(f, _) {
     return (
       /*status*/
       f[4] === "pending" ? 0 : (
@@ -2451,9 +2441,9 @@ function si(l) {
       )
     );
   }
-  return ~(t = _(l)) && (n = r[t] = o[t](l)), {
+  return ~(t = a(l)) && (n = r[t] = o[t](l)), {
     c() {
-      e = $("div"), n && n.c(), J(e, "class", i = "wrap " + /*variant*/
+      e = $("div"), n && n.c(), G(e, "class", i = "wrap " + /*variant*/
       l[8] + " " + /*show_progress*/
       l[6] + " svelte-1txqlrd"), Z(e, "hide", !/*status*/
       l[4] || /*status*/
@@ -2477,33 +2467,33 @@ function si(l) {
         "border",
         /*border*/
         l[12]
-      ), ie(
+      ), se(
         e,
         "position",
         /*absolute*/
         l[10] ? "absolute" : "static"
-      ), ie(
+      ), se(
         e,
         "padding",
         /*absolute*/
         l[10] ? "0" : "var(--size-8) 0"
       );
     },
-    m(f, a) {
-      v(f, e, a), ~t && r[t].m(e, null), l[31](e), s = !0;
+    m(f, _) {
+      v(f, e, _), ~t && r[t].m(e, null), l[31](e), s = !0;
     },
-    p(f, a) {
+    p(f, _) {
       let u = t;
-      t = _(f), t === u ? ~t && r[t].p(f, a) : (n && (xt(), Le(r[u], 1, 1, () => {
+      t = a(f), t === u ? ~t && r[t].p(f, _) : (n && ($t(), Te(r[u], 1, 1, () => {
         r[u] = null;
-      }), Kt()), ~t ? (n = r[t], n ? n.p(f, a) : (n = r[t] = o[t](f), n.c()), Te(n, 1), n.m(e, null)) : n = null), (!s || a[0] & /*variant, show_progress*/
+      }), Qt()), ~t ? (n = r[t], n ? n.p(f, _) : (n = r[t] = o[t](f), n.c()), qe(n, 1), n.m(e, null)) : n = null), (!s || _[0] & /*variant, show_progress*/
       320 && i !== (i = "wrap " + /*variant*/
       f[8] + " " + /*show_progress*/
-      f[6] + " svelte-1txqlrd")) && J(e, "class", i), (!s || a[0] & /*variant, show_progress, status, show_progress*/
+      f[6] + " svelte-1txqlrd")) && G(e, "class", i), (!s || _[0] & /*variant, show_progress, status, show_progress*/
       336) && Z(e, "hide", !/*status*/
       f[4] || /*status*/
       f[4] === "complete" || /*show_progress*/
-      f[6] === "hidden"), (!s || a[0] & /*variant, show_progress, variant, status, translucent, show_progress*/
+      f[6] === "hidden"), (!s || _[0] & /*variant, show_progress, variant, status, translucent, show_progress*/
       2384) && Z(
         e,
         "translucent",
@@ -2513,26 +2503,26 @@ function si(l) {
         f[4] === "error") || /*translucent*/
         f[11] || /*show_progress*/
         f[6] === "minimal"
-      ), (!s || a[0] & /*variant, show_progress, status*/
+      ), (!s || _[0] & /*variant, show_progress, status*/
       336) && Z(
         e,
         "generating",
         /*status*/
         f[4] === "generating"
-      ), (!s || a[0] & /*variant, show_progress, border*/
+      ), (!s || _[0] & /*variant, show_progress, border*/
       4416) && Z(
         e,
         "border",
         /*border*/
         f[12]
-      ), a[0] & /*absolute*/
-      1024 && ie(
+      ), _[0] & /*absolute*/
+      1024 && se(
         e,
         "position",
         /*absolute*/
         f[10] ? "absolute" : "static"
-      ), a[0] & /*absolute*/
-      1024 && ie(
+      ), _[0] & /*absolute*/
+      1024 && se(
         e,
         "padding",
         /*absolute*/
@@ -2540,83 +2530,83 @@ function si(l) {
       );
     },
     i(f) {
-      s || (Te(n), s = !0);
+      s || (qe(n), s = !0);
     },
     o(f) {
-      Le(n), s = !1;
+      Te(n), s = !1;
     },
     d(f) {
       f && k(e), ~t && r[t].d(), l[31](null);
     }
   };
 }
-let ze = [], De = !1;
-async function oi(l, e = !0) {
+let Be = [], Ie = !1;
+async function ii(l, e = !0) {
   if (!(window.__gradio_mode__ === "website" || window.__gradio_mode__ !== "app" && e !== !0)) {
-    if (ze.push(l), !De)
-      De = !0;
+    if (Be.push(l), !Ie)
+      Ie = !0;
     else
       return;
-    await Xn(), requestAnimationFrame(() => {
+    await Wn(), requestAnimationFrame(() => {
       let t = [0, 0];
-      for (let n = 0; n < ze.length; n++) {
-        const s = ze[n].getBoundingClientRect();
+      for (let n = 0; n < Be.length; n++) {
+        const s = Be[n].getBoundingClientRect();
         (n === 0 || s.top + window.scrollY <= t[0]) && (t[0] = s.top + window.scrollY, t[1] = n);
       }
-      window.scrollTo({ top: t[0] - 20, behavior: "smooth" }), De = !1, ze = [];
+      window.scrollTo({ top: t[0] - 20, behavior: "smooth" }), Ie = !1, Be = [];
     });
   }
 }
-function fi(l, e, t) {
-  let n, { $$slots: i = {}, $$scope: s } = e, { i18n: o } = e, { eta: r = null } = e, { queue_position: _ } = e, { queue_size: f } = e, { status: a } = e, { scroll_to_output: u = !1 } = e, { timer: c = !0 } = e, { show_progress: m = "full" } = e, { message: y = null } = e, { progress: S = null } = e, { variant: T = "default" } = e, { loading_text: L = "Loading..." } = e, { absolute: C = !0 } = e, { translucent: d = !1 } = e, { border: p = !1 } = e, { autoscroll: H } = e, b, R = !1, Q = 0, E = 0, P = null, X = null, be = 0, D = null, x, z = null, ge = !0;
+function si(l, e, t) {
+  let n, { $$slots: i = {}, $$scope: s } = e, { i18n: o } = e, { eta: r = null } = e, { queue_position: a } = e, { queue_size: f } = e, { status: _ } = e, { scroll_to_output: u = !1 } = e, { timer: c = !0 } = e, { show_progress: m = "full" } = e, { message: y = null } = e, { progress: S = null } = e, { variant: T = "default" } = e, { loading_text: L = "Loading..." } = e, { absolute: C = !0 } = e, { translucent: d = !1 } = e, { border: p = !1 } = e, { autoscroll: H } = e, b, R = !1, K = 0, E = 0, A = null, X = null, he = 0, D = null, Q, P = null, be = !0;
   const g = () => {
-    t(0, r = t(26, P = t(19, we = null))), t(24, Q = performance.now()), t(25, E = 0), R = !0, je();
+    t(0, r = t(26, A = t(19, ge = null))), t(24, K = performance.now()), t(25, E = 0), R = !0, je();
   };
   function je() {
     requestAnimationFrame(() => {
-      t(25, E = (performance.now() - Q) / 1e3), R && je();
+      t(25, E = (performance.now() - K) / 1e3), R && je();
     });
   }
   function Ne() {
-    t(25, E = 0), t(0, r = t(26, P = t(19, we = null))), R && (R = !1);
+    t(25, E = 0), t(0, r = t(26, A = t(19, ge = null))), R && (R = !1);
   }
-  Yn(() => {
+  Un(() => {
     R && Ne();
   });
-  let we = null;
-  function Ee(w) {
-    Ct[w ? "unshift" : "push"](() => {
-      z = w, t(16, z), t(7, S), t(14, D), t(15, x);
+  let ge = null;
+  function Ze(w) {
+    qt[w ? "unshift" : "push"](() => {
+      P = w, t(16, P), t(7, S), t(14, D), t(15, Q);
     });
   }
-  function Pe(w) {
-    Ct[w ? "unshift" : "push"](() => {
+  function Oe(w) {
+    qt[w ? "unshift" : "push"](() => {
       b = w, t(13, b);
     });
   }
   return l.$$set = (w) => {
-    "i18n" in w && t(1, o = w.i18n), "eta" in w && t(0, r = w.eta), "queue_position" in w && t(2, _ = w.queue_position), "queue_size" in w && t(3, f = w.queue_size), "status" in w && t(4, a = w.status), "scroll_to_output" in w && t(21, u = w.scroll_to_output), "timer" in w && t(5, c = w.timer), "show_progress" in w && t(6, m = w.show_progress), "message" in w && t(22, y = w.message), "progress" in w && t(7, S = w.progress), "variant" in w && t(8, T = w.variant), "loading_text" in w && t(9, L = w.loading_text), "absolute" in w && t(10, C = w.absolute), "translucent" in w && t(11, d = w.translucent), "border" in w && t(12, p = w.border), "autoscroll" in w && t(23, H = w.autoscroll), "$$scope" in w && t(28, s = w.$$scope);
+    "i18n" in w && t(1, o = w.i18n), "eta" in w && t(0, r = w.eta), "queue_position" in w && t(2, a = w.queue_position), "queue_size" in w && t(3, f = w.queue_size), "status" in w && t(4, _ = w.status), "scroll_to_output" in w && t(21, u = w.scroll_to_output), "timer" in w && t(5, c = w.timer), "show_progress" in w && t(6, m = w.show_progress), "message" in w && t(22, y = w.message), "progress" in w && t(7, S = w.progress), "variant" in w && t(8, T = w.variant), "loading_text" in w && t(9, L = w.loading_text), "absolute" in w && t(10, C = w.absolute), "translucent" in w && t(11, d = w.translucent), "border" in w && t(12, p = w.border), "autoscroll" in w && t(23, H = w.autoscroll), "$$scope" in w && t(28, s = w.$$scope);
   }, l.$$.update = () => {
     l.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
-    218103809 && (r === null && t(0, r = P), r != null && P !== r && (t(27, X = (performance.now() - Q) / 1e3 + r), t(19, we = X.toFixed(1)), t(26, P = r))), l.$$.dirty[0] & /*eta_from_start, timer_diff*/
-    167772160 && t(17, be = X === null || X <= 0 || !E ? null : Math.min(E / X, 1)), l.$$.dirty[0] & /*progress*/
-    128 && S != null && t(18, ge = !1), l.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
+    218103809 && (r === null && t(0, r = A), r != null && A !== r && (t(27, X = (performance.now() - K) / 1e3 + r), t(19, ge = X.toFixed(1)), t(26, A = r))), l.$$.dirty[0] & /*eta_from_start, timer_diff*/
+    167772160 && t(17, he = X === null || X <= 0 || !E ? null : Math.min(E / X, 1)), l.$$.dirty[0] & /*progress*/
+    128 && S != null && t(18, be = !1), l.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
     114816 && (S != null ? t(14, D = S.map((w) => {
       if (w.index != null && w.length != null)
         return w.index / w.length;
       if (w.progress != null)
         return w.progress;
-    })) : t(14, D = null), D ? (t(15, x = D[D.length - 1]), z && (x === 0 ? t(16, z.style.transition = "0", z) : t(16, z.style.transition = "150ms", z))) : t(15, x = void 0)), l.$$.dirty[0] & /*status*/
-    16 && (a === "pending" ? g() : Ne()), l.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
-    10493968 && b && u && (a === "pending" || a === "complete") && oi(b, H), l.$$.dirty[0] & /*status, message*/
+    })) : t(14, D = null), D ? (t(15, Q = D[D.length - 1]), P && (Q === 0 ? t(16, P.style.transition = "0", P) : t(16, P.style.transition = "150ms", P))) : t(15, Q = void 0)), l.$$.dirty[0] & /*status*/
+    16 && (_ === "pending" ? g() : Ne()), l.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
+    10493968 && b && u && (_ === "pending" || _ === "complete") && ii(b, H), l.$$.dirty[0] & /*status, message*/
     4194320, l.$$.dirty[0] & /*timer_diff*/
     33554432 && t(20, n = E.toFixed(1));
   }, [
     r,
     o,
-    _,
-    f,
     a,
+    f,
+    _,
     c,
     m,
     S,
@@ -2627,33 +2617,33 @@ function fi(l, e, t) {
     p,
     b,
     D,
-    x,
-    z,
+    Q,
+    P,
+    he,
     be,
     ge,
-    we,
     n,
     u,
     y,
     H,
-    Q,
+    K,
     E,
-    P,
+    A,
     X,
     s,
     i,
-    Ee,
-    Pe
+    Ze,
+    Oe
   ];
 }
-class ai extends Bn {
+class oi extends zn {
   constructor(e) {
-    super(), Dn(
+    super(), Rn(
       this,
       e,
-      fi,
       si,
-      Wn,
+      ni,
+      Dn,
       {
         i18n: 1,
         eta: 0,
@@ -2678,28 +2668,28 @@ class ai extends Bn {
   }
 }
 const {
-  SvelteComponent: _i,
-  add_flush_callback: Pt,
-  assign: ri,
-  bind: Zt,
-  binding_callbacks: Ot,
-  check_outros: ui,
-  create_component: Qe,
-  destroy_component: xe,
-  detach: ci,
+  SvelteComponent: fi,
+  add_flush_callback: Ot,
+  assign: _i,
+  bind: Rt,
+  binding_callbacks: At,
+  check_outros: ai,
+  create_component: xe,
+  destroy_component: $e,
+  detach: ri,
   flush: M,
-  get_spread_object: di,
-  get_spread_update: mi,
-  group_outros: hi,
-  init: bi,
-  insert: gi,
-  mount_component: $e,
-  safe_not_equal: wi,
-  space: ki,
-  transition_in: Ce,
+  get_spread_object: ui,
+  get_spread_update: ci,
+  group_outros: di,
+  init: mi,
+  insert: hi,
+  mount_component: et,
+  safe_not_equal: bi,
+  space: gi,
+  transition_in: ye,
   transition_out: Fe
 } = window.__gradio__svelte__internal;
-function Rt(l) {
+function Dt(l) {
   let e, t;
   const n = [
     { autoscroll: (
@@ -2715,17 +2705,17 @@ function Rt(l) {
   ];
   let i = {};
   for (let s = 0; s < n.length; s += 1)
-    i = ri(i, n[s]);
-  return e = new ai({ props: i }), {
+    i = _i(i, n[s]);
+  return e = new oi({ props: i }), {
     c() {
-      Qe(e.$$.fragment);
+      xe(e.$$.fragment);
     },
     m(s, o) {
-      $e(e, s, o), t = !0;
+      et(e, s, o), t = !0;
     },
     p(s, o) {
       const r = o & /*gradio, loading_status*/
-      131080 ? mi(n, [
+      131080 ? ci(n, [
         o & /*gradio*/
         8 && { autoscroll: (
           /*gradio*/
@@ -2737,7 +2727,7 @@ function Rt(l) {
           s[3].i18n
         ) },
         o & /*loading_status*/
-        131072 && di(
+        131072 && ui(
           /*loading_status*/
           s[17]
         )
@@ -2745,26 +2735,26 @@ function Rt(l) {
       e.$set(r);
     },
     i(s) {
-      t || (Ce(e.$$.fragment, s), t = !0);
+      t || (ye(e.$$.fragment, s), t = !0);
     },
     o(s) {
       Fe(e.$$.fragment, s), t = !1;
     },
     d(s) {
-      xe(e, s);
+      $e(e, s);
     }
   };
 }
-function vi(l) {
+function wi(l) {
   let e, t, n, i, s, o = (
     /*loading_status*/
-    l[17] && Rt(l)
+    l[17] && Dt(l)
   );
-  function r(a) {
-    l[22](a);
+  function r(_) {
+    l[22](_);
   }
-  function _(a) {
-    l[23](a);
+  function a(_) {
+    l[23](_);
   }
   let f = {
     label: (
@@ -2811,7 +2801,7 @@ function vi(l) {
     l[0] !== void 0 && (f.value = /*value*/
     l[0]), /*value_is_output*/
     l[2] !== void 0 && (f.value_is_output = /*value_is_output*/
-    l[2]), t = new _n({ props: f }), Ot.push(() => Zt(t, "value", r)), Ot.push(() => Zt(t, "value_is_output", _)), t.$on(
+    l[2]), t = new fn({ props: f }), At.push(() => Rt(t, "value", r)), At.push(() => Rt(t, "value_is_output", a)), t.$on(
       "change",
       /*change_handler*/
       l[24]
@@ -2837,59 +2827,59 @@ function vi(l) {
       l[29]
     ), {
       c() {
-        o && o.c(), e = ki(), Qe(t.$$.fragment);
+        o && o.c(), e = gi(), xe(t.$$.fragment);
       },
-      m(a, u) {
-        o && o.m(a, u), gi(a, e, u), $e(t, a, u), s = !0;
+      m(_, u) {
+        o && o.m(_, u), hi(_, e, u), et(t, _, u), s = !0;
       },
-      p(a, u) {
+      p(_, u) {
         /*loading_status*/
-        a[17] ? o ? (o.p(a, u), u & /*loading_status*/
-        131072 && Ce(o, 1)) : (o = Rt(a), o.c(), Ce(o, 1), o.m(e.parentNode, e)) : o && (hi(), Fe(o, 1, 1, () => {
+        _[17] ? o ? (o.p(_, u), u & /*loading_status*/
+        131072 && ye(o, 1)) : (o = Dt(_), o.c(), ye(o, 1), o.m(e.parentNode, e)) : o && (di(), Fe(o, 1, 1, () => {
           o = null;
-        }), ui());
+        }), ai());
         const c = {};
         u & /*label*/
         16 && (c.label = /*label*/
-        a[4]), u & /*info*/
+        _[4]), u & /*info*/
         64 && (c.info = /*info*/
-        a[6]), u & /*show_label*/
+        _[6]), u & /*show_label*/
         1024 && (c.show_label = /*show_label*/
-        a[10]), u & /*show_legend*/
+        _[10]), u & /*show_legend*/
         2048 && (c.show_legend = /*show_legend*/
-        a[11]), u & /*show_legend_label*/
+        _[11]), u & /*show_legend_label*/
         4096 && (c.show_legend_label = /*show_legend_label*/
-        a[12]), u & /*legend_label*/
+        _[12]), u & /*legend_label*/
         32 && (c.legend_label = /*legend_label*/
-        a[5]), u & /*color_map*/
+        _[5]), u & /*color_map*/
         2 && (c.color_map = /*color_map*/
-        a[1]), u & /*show_copy_button*/
+        _[1]), u & /*show_copy_button*/
         65536 && (c.show_copy_button = /*show_copy_button*/
-        a[16]), u & /*container*/
+        _[16]), u & /*container*/
         8192 && (c.container = /*container*/
-        a[13]), u & /*interactive*/
+        _[13]), u & /*interactive*/
         262144 && (c.disabled = !/*interactive*/
-        a[18]), !n && u & /*value*/
+        _[18]), !n && u & /*value*/
         1 && (n = !0, c.value = /*value*/
-        a[0], Pt(() => n = !1)), !i && u & /*value_is_output*/
+        _[0], Ot(() => n = !1)), !i && u & /*value_is_output*/
         4 && (i = !0, c.value_is_output = /*value_is_output*/
-        a[2], Pt(() => i = !1)), t.$set(c);
+        _[2], Ot(() => i = !1)), t.$set(c);
       },
-      i(a) {
-        s || (Ce(o), Ce(t.$$.fragment, a), s = !0);
+      i(_) {
+        s || (ye(o), ye(t.$$.fragment, _), s = !0);
       },
-      o(a) {
-        Fe(o), Fe(t.$$.fragment, a), s = !1;
+      o(_) {
+        Fe(o), Fe(t.$$.fragment, _), s = !1;
       },
-      d(a) {
-        a && ci(e), o && o.d(a), xe(t, a);
+      d(_) {
+        _ && ri(e), o && o.d(_), $e(t, _);
       }
     }
   );
 }
-function pi(l) {
+function ki(l) {
   let e, t;
-  return e = new Tn({
+  return e = new Cn({
     props: {
       visible: (
         /*visible*/
@@ -2916,15 +2906,15 @@ function pi(l) {
         /*container*/
         l[13]
       ),
-      $$slots: { default: [vi] },
+      $$slots: { default: [wi] },
       $$scope: { ctx: l }
     }
   }), {
     c() {
-      Qe(e.$$.fragment);
+      xe(e.$$.fragment);
     },
     m(n, i) {
-      $e(e, n, i), t = !0;
+      et(e, n, i), t = !0;
     },
     p(n, [i]) {
       const s = {};
@@ -2944,34 +2934,34 @@ function pi(l) {
       1074216063 && (s.$$scope = { dirty: i, ctx: n }), e.$set(s);
     },
     i(n) {
-      t || (Ce(e.$$.fragment, n), t = !0);
+      t || (ye(e.$$.fragment, n), t = !0);
     },
     o(n) {
       Fe(e.$$.fragment, n), t = !1;
     },
     d(n) {
-      xe(e, n);
+      $e(e, n);
     }
   };
 }
-function yi(l, e, t) {
-  let { gradio: n } = e, { label: i = "Highlighted Textbox" } = e, { legend_label: s = "Highlights:" } = e, { info: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: _ = [] } = e, { visible: f = !0 } = e, { value: a } = e, { show_label: u } = e, { show_legend: c } = e, { show_legend_label: m } = e, { color_map: y = {} } = e, { container: S = !0 } = e, { scale: T = null } = e, { min_width: L = void 0 } = e, { show_copy_button: C = !1 } = e, { loading_status: d = void 0 } = e, { value_is_output: p = !1 } = e, { combine_adjacent: H = !1 } = e, { interactive: b = !0 } = e;
-  const R = !1, Q = !0;
+function vi(l, e, t) {
+  let { gradio: n } = e, { label: i = "Highlighted Textbox" } = e, { legend_label: s = "Highlights:" } = e, { info: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: a = [] } = e, { visible: f = !0 } = e, { value: _ } = e, { show_label: u } = e, { show_legend: c } = e, { show_legend_label: m } = e, { color_map: y = {} } = e, { container: S = !0 } = e, { scale: T = null } = e, { min_width: L = void 0 } = e, { show_copy_button: C = !1 } = e, { loading_status: d = void 0 } = e, { value_is_output: p = !1 } = e, { combine_adjacent: H = !1 } = e, { interactive: b = !0 } = e;
+  const R = !1, K = !0;
   function E(g) {
-    a = g, t(0, a), t(19, H);
+    _ = g, t(0, _), t(19, H);
   }
-  function P(g) {
+  function A(g) {
     p = g, t(2, p);
   }
-  const X = () => n.dispatch("change"), be = () => n.dispatch("input"), D = () => n.dispatch("submit"), x = () => n.dispatch("blur"), z = (g) => n.dispatch("select", g.detail), ge = () => n.dispatch("focus");
+  const X = () => n.dispatch("change"), he = () => n.dispatch("input"), D = () => n.dispatch("submit"), Q = () => n.dispatch("blur"), P = (g) => n.dispatch("select", g.detail), be = () => n.dispatch("focus");
   return l.$$set = (g) => {
-    "gradio" in g && t(3, n = g.gradio), "label" in g && t(4, i = g.label), "legend_label" in g && t(5, s = g.legend_label), "info" in g && t(6, o = g.info), "elem_id" in g && t(7, r = g.elem_id), "elem_classes" in g && t(8, _ = g.elem_classes), "visible" in g && t(9, f = g.visible), "value" in g && t(0, a = g.value), "show_label" in g && t(10, u = g.show_label), "show_legend" in g && t(11, c = g.show_legend), "show_legend_label" in g && t(12, m = g.show_legend_label), "color_map" in g && t(1, y = g.color_map), "container" in g && t(13, S = g.container), "scale" in g && t(14, T = g.scale), "min_width" in g && t(15, L = g.min_width), "show_copy_button" in g && t(16, C = g.show_copy_button), "loading_status" in g && t(17, d = g.loading_status), "value_is_output" in g && t(2, p = g.value_is_output), "combine_adjacent" in g && t(19, H = g.combine_adjacent), "interactive" in g && t(18, b = g.interactive);
+    "gradio" in g && t(3, n = g.gradio), "label" in g && t(4, i = g.label), "legend_label" in g && t(5, s = g.legend_label), "info" in g && t(6, o = g.info), "elem_id" in g && t(7, r = g.elem_id), "elem_classes" in g && t(8, a = g.elem_classes), "visible" in g && t(9, f = g.visible), "value" in g && t(0, _ = g.value), "show_label" in g && t(10, u = g.show_label), "show_legend" in g && t(11, c = g.show_legend), "show_legend_label" in g && t(12, m = g.show_legend_label), "color_map" in g && t(1, y = g.color_map), "container" in g && t(13, S = g.container), "scale" in g && t(14, T = g.scale), "min_width" in g && t(15, L = g.min_width), "show_copy_button" in g && t(16, C = g.show_copy_button), "loading_status" in g && t(17, d = g.loading_status), "value_is_output" in g && t(2, p = g.value_is_output), "combine_adjacent" in g && t(19, H = g.combine_adjacent), "interactive" in g && t(18, b = g.interactive);
   }, l.$$.update = () => {
     l.$$.dirty & /*color_map*/
     2 && !y && Object.keys(y).length && t(1, y), l.$$.dirty & /*value, combine_adjacent*/
-    524289 && a && H && t(0, a = Ol(a, "equal"));
+    524289 && _ && H && t(0, _ = Ol(_, "equal"));
   }, [
-    a,
+    _,
     y,
     p,
     n,
@@ -2979,7 +2969,7 @@ function yi(l, e, t) {
     s,
     o,
     r,
-    _,
+    a,
     f,
     u,
     c,
@@ -2992,20 +2982,20 @@ function yi(l, e, t) {
     b,
     H,
     R,
-    Q,
+    K,
     E,
-    P,
+    A,
     X,
-    be,
+    he,
     D,
-    x,
-    z,
-    ge
+    Q,
+    P,
+    be
   ];
 }
-class Ci extends _i {
+class pi extends fi {
   constructor(e) {
-    super(), bi(this, e, yi, pi, wi, {
+    super(), mi(this, e, vi, ki, bi, {
       gradio: 3,
       label: 4,
       legend_label: 5,
@@ -3158,5 +3148,5 @@ class Ci extends _i {
   }
 }
 export {
-  Ci as default
+  pi as default
 };

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

@@ -1 +1 @@
-span.has-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs)}span.svelte-vm3q5z:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-vm3q5z{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-vm3q5z{display:none!important}.category-legend.svelte-vm3q5z{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);color:#000}.category-label.svelte-vm3q5z{border-radius:var(--radius-xs);padding-right:var(--size-2);padding-left:var(--size-2);font-weight:var(--weight-semibold)}.category-label.has-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs)}.category-label.svelte-vm3q5z:not(.has-info){margin-bottom:var(--spacing-lg)}.title-container.svelte-vm3q5z{display:flex}.legend-separator.svelte-vm3q5z{margin:0 var(--spacing-md) 0 var(--spacing-md)}.title-with-highlights-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs);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)}.dropdown-arrow.svelte-145leq6{fill:currentColor}label.svelte-14ssfqr{display:block;width:100%}button.svelte-14ssfqr{display:flex;position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);align-items:center;box-shadow:var(--shadow-drop);border:1px solid var(--color-border-primary);border-top:none;border-right:none;border-radius:var(--block-label-right-radius);background:var(--block-label-background-fill);padding:5px;width:22px;height:22px;overflow:hidden;color:var(--block-label-color);font:var(--font-sans);font-size:var(--button-small-text-size)}.container.svelte-14ssfqr{display:flex;flex-direction:column;gap:var(--spacing-sm)}.textfield.svelte-14ssfqr{box-sizing:border-box;outline:none!important;box-shadow:var(--input-shadow);padding:var(--input-padding);border-radius:var(--radius-md);background:var(--input-background-fill);background-color:transparent;font-weight:var(--input-text-weight);font-size:var(--input-text-size);width:100%;line-height:var(--line-sm);word-break:break-word;border:var(--input-border-width) solid var(--input-border-color);cursor:text}.textfield.svelte-14ssfqr:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}mark{border-radius:3px}.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}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-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{top:0;right:0;left:0}.wrap.default.svelte-1txqlrd.svelte-1txqlrd{top:0;right:0;bottom:0;left:0}.hide.svelte-1txqlrd.svelte-1txqlrd{opacity:0;pointer-events:none}.generating.svelte-1txqlrd.svelte-1txqlrd{animation:svelte-1txqlrd-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent}.translucent.svelte-1txqlrd.svelte-1txqlrd{background:none}@keyframes svelte-1txqlrd-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1txqlrd.svelte-1txqlrd{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1txqlrd.svelte-1txqlrd{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1txqlrd.svelte-1txqlrd{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1txqlrd.svelte-1txqlrd{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{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-1txqlrd .progress-text.svelte-1txqlrd{background:var(--block-background-fill)}.border.svelte-1txqlrd.svelte-1txqlrd{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))}}
+span.has-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs)}span.svelte-vm3q5z:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-vm3q5z{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-vm3q5z{display:none!important}.category-legend.svelte-vm3q5z{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);color:#000}.category-label.svelte-vm3q5z{border-radius:var(--radius-xs);padding-right:var(--size-2);padding-left:var(--size-2);font-weight:var(--weight-semibold)}.category-label.has-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs)}.category-label.svelte-vm3q5z:not(.has-info){margin-bottom:var(--spacing-lg)}.title-container.svelte-vm3q5z{display:flex}.legend-separator.svelte-vm3q5z{margin:0 var(--spacing-md) 0 var(--spacing-md)}.title-with-highlights-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs);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)}.dropdown-arrow.svelte-145leq6{fill:currentColor}label.svelte-40uavx{display:block;width:100%}button.svelte-40uavx{display:flex;position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);align-items:center;box-shadow:var(--shadow-drop);border:1px solid var(--color-border-primary);border-top:none;border-right:none;border-radius:var(--block-label-right-radius);background:var(--block-label-background-fill);padding:5px;width:22px;height:22px;overflow:hidden;color:var(--block-label-color);font:var(--font-sans);font-size:var(--button-small-text-size)}.container.svelte-40uavx{display:flex;flex-direction:column;gap:var(--spacing-sm)}.textfield.svelte-40uavx{box-sizing:border-box;outline:none!important;box-shadow:var(--input-shadow);padding:var(--input-padding);border-radius:var(--radius-md);background:var(--input-background-fill);background-color:transparent;font-weight:var(--input-text-weight);font-size:var(--input-text-size);width:100%;line-height:var(--line-sm);word-break:break-word;border:var(--input-border-width) solid var(--input-border-color);cursor:text;white-space:break-spaces}.textfield.svelte-40uavx:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}mark{border-radius:3px}.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}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-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{top:0;right:0;left:0}.wrap.default.svelte-1txqlrd.svelte-1txqlrd{top:0;right:0;bottom:0;left:0}.hide.svelte-1txqlrd.svelte-1txqlrd{opacity:0;pointer-events:none}.generating.svelte-1txqlrd.svelte-1txqlrd{animation:svelte-1txqlrd-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent}.translucent.svelte-1txqlrd.svelte-1txqlrd{background:none}@keyframes svelte-1txqlrd-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1txqlrd.svelte-1txqlrd{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1txqlrd.svelte-1txqlrd{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1txqlrd.svelte-1txqlrd{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1txqlrd.svelte-1txqlrd{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{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-1txqlrd.svelte-1txqlrd{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-1txqlrd .progress-text.svelte-1txqlrd{background:var(--block-background-fill)}.border.svelte-1txqlrd.svelte-1txqlrd{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))}}

src/demo/app.py

@@ -24,6 +24,18 @@ def convert_highlighted_text_to_tagged_text(
     )
 
 
+def show_info(
+    highlighted_text: dict[str, str | list[tuple[str, str | None]]],
+    tag_id: str | list[str],
+    tag_open: str | list[str],
+    tag_close: str | list[str],
+    msg: str,
+) -> None:
+    gr.Info(
+        f"{msg}: {HighlightedTextbox.tuples_to_tagged_text(highlighted_text['data'], tag_id, tag_open, tag_close)}"
+    )
+
+
 initial_text = "It is not something to be ashamed of: it is no different from the <d>personal fears</d> and <tm>dislikes</tm> of other things that <t>manny peopl</t> have."
 
 with gr.Blocks() as demo:
@@ -56,60 +68,64 @@ with gr.Blocks() as demo:
             show_label=True,
             info="Insert one or more tags to mark the end of a highlighted section.",
         )
-    gr.Markdown("### Example tagged to highlight:")
+    gr.Markdown(
+        """
+### Example:
+
+The following text is tagged using the parameters above to mark spans that will be highlighted.
+
+Both the tagged text and the highlighted text are editable, so you can see how the changes in one affect the other.
+
+Highlights will disappear if the highlighted text is edited. Modals will appear upon focus, change, and blur events on the highlighted text.
+"""
+    )
     with gr.Row():
-        tagged_t2h = gr.Textbox(
+        tagged = gr.Textbox(
             initial_text,
             interactive=True,
-            label="Tagged Input",
+            label="Tagged text",
             show_label=True,
             info="Tagged text using the format above to mark spans that will be highlighted.",
         )
-        high_t2h = HighlightedTextbox(
+        high = HighlightedTextbox(
             convert_tagged_text_to_highlighted_text(
-                tagged_t2h.value, tag_id.value, tag_open.value, tag_close.value
-            ),
-            interactive=False,
-            label="Highlighted Output",
-            info="Highlighted textbox intialized from the tagged input.",
-            show_legend=True,
-            show_label=True,
-            legend_label="Legend:",
-            show_legend_label=True,
-        )
-    gr.Markdown("### Example highlight to tagged:")
-    with gr.Row():
-        high_h2t = HighlightedTextbox(
-            convert_tagged_text_to_highlighted_text(
-                initial_text, tag_id.value, tag_open.value, tag_close.value
+                tagged.value, tag_id.value, tag_open.value, tag_close.value
             ),
             interactive=True,
-            label="Highlighted Input",
-            info="Highlighted textbox using the format above to mark spans that will be highlighted.",
+            label="Highlighted text",
+            info="Textbox containing editable text with custom highlights.",
             show_legend=True,
             show_label=True,
             legend_label="Legend:",
             show_legend_label=True,
         )
-        tagged_h2t = gr.Textbox(
-            initial_text,
-            interactive=False,
-            label="Tagged Output",
-            info="Tagged text intialized from the highlighted textbox.",
-            show_label=True,
-        )
 
     # Functions
 
-    tagged_t2h.input(
+    tagged.input(
         fn=convert_tagged_text_to_highlighted_text,
-        inputs=[tagged_t2h, tag_id, tag_open, tag_close],
-        outputs=high_t2h,
+        inputs=[tagged, tag_id, tag_open, tag_close],
+        outputs=high,
     )
-    high_h2t.input(
+    high.input(
         fn=convert_highlighted_text_to_tagged_text,
-        inputs=[high_h2t, tag_id, tag_open, tag_close],
-        outputs=tagged_h2t,
+        inputs=[high, tag_id, tag_open, tag_close],
+        outputs=tagged,
+    )
+    high.focus(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Focus")],
+        outputs=None,
+    )
+    high.change(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Change")],
+        outputs=None,
+    )
+    high.blur(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Blur")],
+        outputs=None,
     )
 
 if __name__ == "__main__":

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'HighlightedTextbox': {'description': 'Creates a textarea for user to enter string input or display string output where some\nelements are highlighted.\n    (1) "text" whose value is the complete text, and\n    (2) "highlights", which is a list of dictionaries, each of which have the keys:\n        "highlight_type" (consisting of the highlight label),\n        "start" (the character index where the label starts), and\n        "end" (the character index where the label ends).\n    Highlights should not overlap.', 'members': {'__init__': {'value': {'type': 'str | Callable | None', 'default': '""', '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.'}, 'color_map': {'type': 'dict[str, str] | None', 'default': 'None', 'description': 'dictionary mapping labels to colors.'}, 'show_legend': {'type': 'bool', 'default': 'False', 'description': 'if True, will display legend.'}, 'show_legend_label': {'type': 'bool', 'default': 'False', 'description': 'if True, will display legend label.'}, 'legend_label': {'type': 'str', 'default': '""', 'description': 'label to display above legend.'}, 'combine_adjacent': {'type': 'bool', 'default': 'False', 'description': 'if True, will combine adjacent spans with the same label.'}, 'adjacent_separator': {'type': 'str', 'default': '""', 'description': 'separator to use when combining adjacent spans.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'component name in interface.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.'}, 'min_width': {'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.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'autofocus': {'type': 'bool', 'default': 'False', 'description': None}, 'autoscroll': {'type': 'bool', 'default': 'True', 'description': 'If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.'}, 'interactive': {'type': 'bool', 'default': 'True', '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.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'show_copy_button': {'type': 'bool', 'default': 'False', 'description': 'If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True.'}}, 'postprocess': {'y': {'type': 'list[tuple[str, str | None]] | dict | None', 'description': 'List of (word, category) tuples, or a dictionary of two keys: "text", and "highlights", which itself is'}, 'value': {'type': 'list[tuple[str, str | None]] | dict | None', 'description': 'List of (word, category) tuples, or a dictionary of two keys: "text", and "highlights", which itself is'}}, 'preprocess': {'return': {'type': 'dict', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the HighlightedTextbox 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 HighlightedTextbox.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the HighlightedTextbox. Uses event data gradio.SelectData to carry `value` referring to the label of the HighlightedTextbox, and `selected` to refer to state of the HighlightedTextbox. See EventData documentation on how to use this event data'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the HighlightedTextbox is focused.'}, 'focus': {'type': None, 'default': None, 'description': 'This listener is triggered when the HighlightedTextbox is focused.'}, 'blur': {'type': None, 'default': None, 'description': 'This listener is triggered when the HighlightedTextbox is unfocused/blurred.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'HighlightedTextbox': []}}}
+_docs = {'HighlightedTextbox': {'description': 'Creates a textarea for user to enter string input or display string output where some\nelements are highlighted.\n    (1) "text" whose value is the complete text, and\n    (2) "highlights", which is a list of dictionaries, each of which have the keys:\n        "highlight_type" (consisting of the highlight label),\n        "start" (the character index where the label starts), and\n        "end" (the character index where the label ends).\n    Highlights should not overlap.', 'members': {'__init__': {'value': {'type': 'list[tuple[str, str | None]] | Callable | None', 'default': '""', '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.'}, 'color_map': {'type': 'dict[str, str] | None', 'default': 'None', 'description': 'dictionary mapping labels to colors.'}, 'show_legend': {'type': 'bool', 'default': 'False', 'description': 'if True, will display legend.'}, 'show_legend_label': {'type': 'bool', 'default': 'False', 'description': 'if True, will display legend label.'}, 'legend_label': {'type': 'str', 'default': '""', 'description': 'label to display above legend.'}, 'combine_adjacent': {'type': 'bool', 'default': 'False', 'description': 'if True, will combine adjacent spans with the same label.'}, 'adjacent_separator': {'type': 'str', 'default': '""', 'description': 'separator to use when combining adjacent spans.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'component name in interface.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.'}, 'min_width': {'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.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'autofocus': {'type': 'bool', 'default': 'False', 'description': None}, 'autoscroll': {'type': 'bool', 'default': 'True', 'description': 'If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.'}, 'interactive': {'type': 'bool', 'default': 'True', '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.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'show_copy_button': {'type': 'bool', 'default': 'False', 'description': 'If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True.'}}, 'postprocess': {'y': {'type': 'list[tuple[str, str | None]] | dict | None', 'description': 'List of (word, category) tuples, or a dictionary of two keys: "id", and "data", which is a list of (word, category) tuples.'}, 'value': {'type': 'list[tuple[str, str | None]] | dict | None', 'description': 'List of (word, category) tuples, or a dictionary of two keys: "id", and "data", which is a list of (word, category) tuples.'}}, 'preprocess': {'return': {'type': 'dict', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the HighlightedTextbox 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 HighlightedTextbox.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the HighlightedTextbox. Uses event data gradio.SelectData to carry `value` referring to the label of the HighlightedTextbox, and `selected` to refer to state of the HighlightedTextbox. See EventData documentation on how to use this event data'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the HighlightedTextbox is focused.'}, 'focus': {'type': None, 'default': None, 'description': 'This listener is triggered when the HighlightedTextbox is focused.'}, 'blur': {'type': None, 'default': None, 'description': 'This listener is triggered when the HighlightedTextbox is unfocused/blurred.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'HighlightedTextbox': []}}}
     
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -64,6 +64,18 @@ def convert_highlighted_text_to_tagged_text(
     )
 
 
+def show_info(
+    highlighted_text: dict[str, str | list[tuple[str, str | None]]],
+    tag_id: str | list[str],
+    tag_open: str | list[str],
+    tag_close: str | list[str],
+    msg: str,
+) -> None:
+    gr.Info(
+        f"{msg}: {HighlightedTextbox.tuples_to_tagged_text(highlighted_text['data'], tag_id, tag_open, tag_close)}"
+    )
+
+
 initial_text = "It is not something to be ashamed of: it is no different from the <d>personal fears</d> and <tm>dislikes</tm> of other things that <t>manny peopl</t> have."
 
 with gr.Blocks() as demo:
@@ -96,60 +108,64 @@ with gr.Blocks() as demo:
             show_label=True,
             info="Insert one or more tags to mark the end of a highlighted section.",
         )
-    gr.Markdown("### Example tagged to highlight:")
+    gr.Markdown(
+        """
+### Example:
+
+The following text is tagged using the parameters above to mark spans that will be highlighted.
+
+Both the tagged text and the highlighted text are editable, so you can see how the changes in one affect the other.
+
+Highlights will disappear if the highlighted text is edited. Modals will appear upon focus, change, and blur events on the highlighted text.
+"""
+    )
     with gr.Row():
-        tagged_t2h = gr.Textbox(
+        tagged = gr.Textbox(
             initial_text,
             interactive=True,
-            label="Tagged Input",
+            label="Tagged text",
             show_label=True,
             info="Tagged text using the format above to mark spans that will be highlighted.",
         )
-        high_t2h = HighlightedTextbox(
+        high = HighlightedTextbox(
             convert_tagged_text_to_highlighted_text(
-                tagged_t2h.value, tag_id.value, tag_open.value, tag_close.value
-            ),
-            interactive=False,
-            label="Highlighted Output",
-            info="Highlighted textbox intialized from the tagged input.",
-            show_legend=True,
-            show_label=True,
-            legend_label="Legend:",
-            show_legend_label=True,
-        )
-    gr.Markdown("### Example highlight to tagged:")
-    with gr.Row():
-        high_h2t = HighlightedTextbox(
-            convert_tagged_text_to_highlighted_text(
-                initial_text, tag_id.value, tag_open.value, tag_close.value
+                tagged.value, tag_id.value, tag_open.value, tag_close.value
             ),
             interactive=True,
-            label="Highlighted Input",
-            info="Highlighted textbox using the format above to mark spans that will be highlighted.",
+            label="Highlighted text",
+            info="Textbox containing editable text with custom highlights.",
             show_legend=True,
             show_label=True,
             legend_label="Legend:",
             show_legend_label=True,
         )
-        tagged_h2t = gr.Textbox(
-            initial_text,
-            interactive=False,
-            label="Tagged Output",
-            info="Tagged text intialized from the highlighted textbox.",
-            show_label=True,
-        )
 
     # Functions
 
-    tagged_t2h.input(
+    tagged.input(
         fn=convert_tagged_text_to_highlighted_text,
-        inputs=[tagged_t2h, tag_id, tag_open, tag_close],
-        outputs=high_t2h,
+        inputs=[tagged, tag_id, tag_open, tag_close],
+        outputs=high,
     )
-    high_h2t.input(
+    high.input(
         fn=convert_highlighted_text_to_tagged_text,
-        inputs=[high_h2t, tag_id, tag_open, tag_close],
-        outputs=tagged_h2t,
+        inputs=[high, tag_id, tag_open, tag_close],
+        outputs=tagged,
+    )
+    high.focus(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Focus")],
+        outputs=None,
+    )
+    high.change(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Change")],
+        outputs=None,
+    )
+    high.blur(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Blur")],
+        outputs=None,
     )
 
 if __name__ == "__main__":
@@ -185,7 +201,7 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As output:** Should return, list of (word, category) tuples, or a dictionary of two keys: "text", and "highlights", which itself is.
+- **As output:** Should return, list of (word, category) tuples, or a dictionary of two keys: "id", and "data", which is a list of (word, category) tuples.
 
  ```python
 def predict(

src/frontend/HighlightedTextbox.svelte

@@ -55,14 +55,14 @@
 
 	function set_text_from_value(as_output: boolean): void {
 		if (value.length > 0 && as_output) {
-			el_text = value.map(([text, _]) => text).join(" ");
+			el_text = value.map(([text, _]) => text).join("");
 			marked_el_text = value.map(([text, category]) => {
 				if (category !== null) {
 					return `<mark class="hl ${category}" style="background-color:${_color_map[category].secondary}">${text}</mark>`;
 				} else {
 					return text;
 				}
-			}).join(" ") + " ";
+			}).join("");
 		}
 	}
 
@@ -70,8 +70,8 @@
 	$: set_text_from_value(true);
 
 	const dispatch = createEventDispatcher<{
-		change: string;
-		input: string;
+		change: [string, string | null][];
+		input: [string, string | null][];
 		submit: undefined;
 		blur: undefined;
 		select: SelectData;
@@ -83,18 +83,18 @@
 	});
 
 	function handle_change(): void {
-		dispatch("change", marked_el_text);
+		checkAndRemoveHighlight();
+		set_value_from_marked_span();
+		dispatch("change", value);
 		if (!value_is_output) {
-			dispatch("input");
+			dispatch("input", value);
 		}
-		checkAndRemoveHighlight();
 	}
 	afterUpdate(() => {
 		set_color_map();
 		set_text_from_value(value_is_output);
 		value_is_output = false;
 	});
-	$: marked_el_text, handle_change();
 
 	function set_value_from_marked_span(): void {
 		let new_value: [string, string | null][] = [];
@@ -102,8 +102,12 @@
 		let category = null;
 		let in_tag = false;
 		let tag = "";
-		for (let i = 0; i < marked_el_text.length; i++) {
-			let char = marked_el_text[i];
+		// Replace &nbsp;, &amp;, &lt;, &gt; with their corresponding characters
+		let clean_marked_text = marked_el_text.replace(/&nbsp;|&amp;|&lt;|&gt;/g, function(m) {
+			return {"&nbsp;":" ", "&amp;":"&", "&lt;":"<", "&gt;":">"}[m];
+		});
+		for (let i = 0; i < clean_marked_text.length; i++) {
+			let char = clean_marked_text[i];
 			if (char === "<") {
 				in_tag = true;
 				if (text) {
@@ -113,8 +117,9 @@
 				category = null;
 			} else if (char === ">") {
 				in_tag = false;
-				if (tag.startsWith("mark")) {
-					category = tag.match(/class="hl ([^"]+)"/)?.[1] || null;
+				if (tag.slice(0, 4) === "mark") {
+					let match = /class="hl ([^"]+)"/.exec(tag);
+					category = match ? match[1] : null;
 				}
 				tag = "";
 			} else if (in_tag) {
@@ -168,8 +173,6 @@
 				newSelection.addRange(range);
 			}
 		}
-		set_value_from_marked_span();
-		dispatch("change", marked_el_text);
 	}
 </script>
 
@@ -214,9 +217,9 @@
             on:keypress
             on:select
             on:scroll
-            on:input
+            on:input={handle_change}
             on:focus
-            on:change={checkAndRemoveHighlight}
+            on:change={handle_change}
         />
     {/if}
 </label>
@@ -268,6 +271,7 @@
 		word-break: break-word;
 		border: var(--input-border-width) solid var(--input-border-color);
 		cursor: text;
+		white-space: break-spaces;
 	}
 
 	.textfield:focus {

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_highlightedtextbox"
-version = "0.0.7"
+version = "0.0.8"
 description = "Editable Gradio textarea supporting highlighting"
 readme = "README.md"
 license = "mit"
@@ -39,7 +39,7 @@ dev = ["build", "twine"]
 space = "https://huggingface.co/spaces/gsarti/gradio_highlightedtextbox"
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
+artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_highlightedtextbox"]