Upload folder using huggingface_hub

Dockerfile

@@ -0,0 +1,16 @@
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY --link --chown=1000 . .
+
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+ENV TRANSFORMERS_CACHE=/tmp/cache/
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV PYTHONUNBUFFERED=1 	GRADIO_ALLOW_FLAGGING=never 	GRADIO_NUM_PORTS=1 	GRADIO_SERVER_NAME=0.0.0.0     GRADIO_SERVER_PORT=7860 	SYSTEM=spaces
+
+CMD ["python", "space.py"]

README.md

@@ -1,10 +1,17 @@
+
 ---
-title: Gradio Highlightedtextlabeldefault
-emoji: 🔥
-colorFrom: yellow
-colorTo: blue
+tags: [gradio-custom-component,gradio-template-HighlightedText]
+title: gradio_highlightedtextlabeldefault V0.0.1
+colorFrom: gray
+colorTo: red
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Name: gradio_highlightedtextlabeldefault
+
+Description: Modify the default label when selecting a word in the interactive HighlightedText component.
+
+Install with: pip install gradio_highlightedtextlabeldefault

app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_highlightedtextlabeldefault import HighlightedTextLabelDefault
+
+
+example = HighlightedTextLabelDefault().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        test_1 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]),
+                                             label="Double click word to see standard default label", interactive=True)  # default label
+        test_2 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]), label="Double click word to see modified default label",
+                                             interactive=True, default_label="x", color_map={"x": "green"})  # blank component
+
+
+if __name__ == "__main__":
+    demo.launch()

css.css

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

requirements.txt

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

space.py

@@ -0,0 +1,139 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'HighlightedTextLabelDefault': {'description': 'Displays text that contains spans that are highlighted by category or numerical value.\n', 'members': {'__init__': {'value': {'type': 'list[tuple[str, str | float | None]]\n    | dict\n    | Callable\n    | None', 'default': 'None', 'description': 'Default value to show. 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': 'A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {"person": "red", "location": "#FFEE22"}'}, 'show_legend': {'type': 'bool', 'default': 'False', 'description': 'whether to show span categories in a separate legend or inline.'}, 'combine_adjacent': {'type': 'bool', 'default': 'False', 'description': 'If True, will merge the labels of adjacent tokens belonging to the same category.'}, 'adjacent_separator': {'type': 'str', 'default': '""', 'description': 'Specifies the separator to be used between tokens if combine_adjacent is True.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the component will be editable, and allow user to select spans of text and label them.'}, 'default_label': {'type': 'str | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'list[tuple[str, str | float | None]] | dict | None', 'description': 'Expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end"'}}, 'preprocess': {'return': {'type': 'list[tuple[str, str | float | None]] | None', 'description': 'Passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the HighlightedTextLabelDefault 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.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the HighlightedTextLabelDefault. Uses event data gradio.SelectData to carry `value` referring to the label of the HighlightedTextLabelDefault, and `selected` to refer to state of the HighlightedTextLabelDefault. See EventData documentation on how to use this event data'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'HighlightedTextLabelDefault': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_highlightedtextlabeldefault`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Modify the default label when selecting a word in the interactive HighlightedText component.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_highlightedtextlabeldefault
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_highlightedtextlabeldefault import HighlightedTextLabelDefault
+
+
+example = HighlightedTextLabelDefault().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        test_1 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]),
+                                             label="Double click word to see standard default label", interactive=True)  # default label
+        test_2 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]), label="Double click word to see modified default label",
+                                             interactive=True, default_label="x", color_map={"x": "green"})  # blank component
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `HighlightedTextLabelDefault`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["HighlightedTextLabelDefault"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["HighlightedTextLabelDefault"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.
+- **As output:** Should return, expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end".
+
+ ```python
+def predict(
+    value: list[tuple[str, str | float | None]] | None
+) -> list[tuple[str, str | float | None]] | dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "HighlightedTextLabelDefault-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          HighlightedTextLabelDefault: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

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

src/README.md

@@ -0,0 +1,303 @@
+
+# `gradio_highlightedtextlabeldefault`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Modify the default label when selecting a word in the interactive HighlightedText component.
+
+## Installation
+
+```bash
+pip install gradio_highlightedtextlabeldefault
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_highlightedtextlabeldefault import HighlightedTextLabelDefault
+
+
+example = HighlightedTextLabelDefault().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        test_1 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]),
+                                             label="Double click word to see standard default label", interactive=True)  # default label
+        test_2 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]), label="Double click word to see modified default label",
+                                             interactive=True, default_label="x", color_map={"x": "green"})  # blank component
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `HighlightedTextLabelDefault`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[tuple[str, str | float | None]]
+    | dict
+    | Callable
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>color_map</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict[str, str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {"person": "red", "location": "#FFEE22"}</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_legend</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">whether to show span categories in a separate legend or inline.</td>
+</tr>
+
+<tr>
+<td align="left"><code>combine_adjacent</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, will merge the labels of adjacent tokens belonging to the same category.</td>
+</tr>
+
+<tr>
+<td align="left"><code>adjacent_separator</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>""</code></td>
+<td align="left">Specifies the separator to be used between tokens if combine_adjacent is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, the component will be editable, and allow user to select spans of text and label them.</td>
+</tr>
+
+<tr>
+<td align="left"><code>default_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the HighlightedTextLabelDefault 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. |
+| `select` | Event listener for when the user selects or deselects the HighlightedTextLabelDefault. Uses event data gradio.SelectData to carry `value` referring to the label of the HighlightedTextLabelDefault, and `selected` to refer to state of the HighlightedTextLabelDefault. See EventData documentation on how to use this event data |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.
+- **As input:** Should return, expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end".
+
+ ```python
+ def predict(
+     value: list[tuple[str, str | float | None]] | None
+ ) -> list[tuple[str, str | float | None]] | dict | None:
+     return value
+ ```
+ 

src/backend/gradio_highlightedtextlabeldefault/__init__.py

@@ -0,0 +1,4 @@
+
+from .highlightedtextlabeldefault import HighlightedTextLabelDefault
+
+__all__ = ['HighlightedTextLabelDefault']

src/backend/gradio_highlightedtextlabeldefault/highlightedtextlabeldefault.py

@@ -0,0 +1,184 @@
+"""gr.HighlightedText() component."""
+
+from __future__ import annotations
+
+from typing import Any, Callable, List, Union
+
+from gradio_client.documentation import document
+
+from gradio.components.base import Component
+from gradio.data_classes import GradioModel, GradioRootModel
+from gradio.events import Events
+
+
+class HighlightedToken(GradioModel):
+    token: str
+    class_or_confidence: Union[str, float, None] = None
+
+
+class HighlightedTextData(GradioRootModel):
+    root: List[HighlightedToken]
+
+
+class HighlightedTextLabelDefault(Component):
+    """
+    Displays text that contains spans that are highlighted by category or numerical value.
+
+    Demos: diff_texts
+    Guides: named-entity-recognition
+    """
+
+    data_model = HighlightedTextData
+    EVENTS = [Events.change, Events.select]
+
+    def __init__(
+        self,
+        value: list[tuple[str, str | float | None]] | dict | Callable | None = None,
+        *,
+        color_map: dict[str, str]
+        | None = None,  # Parameter moved to HighlightedTextLabelDefault.style()
+        show_legend: bool = False,
+        combine_adjacent: bool = False,
+        adjacent_separator: str = "",
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        interactive: bool | None = None,
+        default_label: str | None = None
+
+    ):
+        """
+        Parameters:
+            value: Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            color_map: A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {"person": "red", "location": "#FFEE22"}
+            show_legend: whether to show span categories in a separate legend or inline.
+            combine_adjacent: If True, will merge the labels of adjacent tokens belonging to the same category.
+            adjacent_separator: Specifies the separator to be used between tokens if combine_adjacent is True.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            interactive: If True, the component will be editable, and allow user to select spans of text and label them.
+        """
+        self.color_map = color_map
+        self.show_legend = show_legend
+        self.combine_adjacent = combine_adjacent
+        self.adjacent_separator = adjacent_separator
+        self.default_label = default_label
+        super().__init__(
+            label=label,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            value=value,
+            interactive=interactive,
+        )
+
+    def example_payload(self) -> Any:
+        return [
+            {"token": "The", "class_or_confidence": None},
+            {"token": "quick", "class_or_confidence": "adj"},
+        ]
+
+    def example_value(self) -> Any:
+        return [("The", None), ("quick", "adj"), ("brown", "adj"), ("fox", "noun")]
+
+    def preprocess(
+        self, payload: HighlightedTextData | None
+    ) -> list[tuple[str, str | float | None]] | None:
+        """
+        Parameters:
+            payload: An instance of HighlightedTextData
+        Returns:
+            Passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.
+        """
+        if payload is None:
+            return None
+        return payload.model_dump()  # type: ignore
+
+    def postprocess(
+        self, value: list[tuple[str, str | float | None]] | dict | None
+    ) -> HighlightedTextData | None:
+        """
+        Parameters:
+            value: Expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end"
+        Returns:
+            An instance of HighlightedTextData
+        """
+        if value is None:
+            return None
+        if isinstance(value, dict):
+            try:
+                text = value["text"]
+                entities = value["entities"]
+            except KeyError as ke:
+                raise ValueError(
+                    "Expected a dictionary with keys 'text' and 'entities' "
+                    "for the value of the HighlightedTextLabelDefault component."
+                ) from ke
+            if len(entities) == 0:
+                value = [(text, None)]
+            else:
+                list_format = []
+                index = 0
+                entities = sorted(entities, key=lambda x: x["start"])
+                for entity in entities:
+                    list_format.append((text[index : entity["start"]], None))
+                    entity_category = entity.get("entity") or entity.get("entity_group")
+                    list_format.append(
+                        (text[entity["start"] : entity["end"]], entity_category)
+                    )
+                    index = entity["end"]
+                list_format.append((text[index:], None))
+                value = list_format
+        if self.combine_adjacent:
+            output = []
+            running_text, running_category = None, None
+            for text, category in value:
+                if running_text is None:
+                    running_text = text
+                    running_category = category
+                elif category == running_category:
+                    running_text += self.adjacent_separator + text
+                elif not text:
+                    # Skip fully empty item, these get added in processing
+                    # of dictionaries.
+                    pass
+                else:
+                    output.append((running_text, running_category))
+                    running_text = text
+                    running_category = category
+            if running_text is not None:
+                output.append((running_text, running_category))
+            return HighlightedTextData(
+                root=[
+                    HighlightedToken(token=o[0], class_or_confidence=o[1])
+                    for o in output
+                ]
+            )
+        else:
+            return HighlightedTextData(
+                root=[
+                    HighlightedToken(token=o[0], class_or_confidence=o[1])
+                    for o in value
+                ]
+            )

src/backend/gradio_highlightedtextlabeldefault/highlightedtextlabeldefault.pyi

@@ -0,0 +1,269 @@
+"""gr.HighlightedText() component."""
+
+from __future__ import annotations
+
+from typing import Any, Callable, List, Union
+
+from gradio_client.documentation import document
+
+from gradio.components.base import Component
+from gradio.data_classes import GradioModel, GradioRootModel
+from gradio.events import Events
+
+
+class HighlightedToken(GradioModel):
+    token: str
+    class_or_confidence: Union[str, float, None] = None
+
+
+class HighlightedTextData(GradioRootModel):
+    root: List[HighlightedToken]
+
+
+class HighlightedTextLabelDefault(Component):
+    """
+    Displays text that contains spans that are highlighted by category or numerical value.
+
+    Demos: diff_texts
+    Guides: named-entity-recognition
+    """
+
+    data_model = HighlightedTextData
+    EVENTS = [Events.change, Events.select]
+
+    def __init__(
+        self,
+        value: list[tuple[str, str | float | None]] | dict | Callable | None = None,
+        *,
+        color_map: dict[str, str]
+        | None = None,  # Parameter moved to HighlightedTextLabelDefault.style()
+        show_legend: bool = False,
+        combine_adjacent: bool = False,
+        adjacent_separator: str = "",
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        interactive: bool | None = None,
+        default_label: str | None = None
+
+    ):
+        """
+        Parameters:
+            value: Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            color_map: A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {"person": "red", "location": "#FFEE22"}
+            show_legend: whether to show span categories in a separate legend or inline.
+            combine_adjacent: If True, will merge the labels of adjacent tokens belonging to the same category.
+            adjacent_separator: Specifies the separator to be used between tokens if combine_adjacent is True.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            interactive: If True, the component will be editable, and allow user to select spans of text and label them.
+        """
+        self.color_map = color_map
+        self.show_legend = show_legend
+        self.combine_adjacent = combine_adjacent
+        self.adjacent_separator = adjacent_separator
+        self.default_label = default_label
+        super().__init__(
+            label=label,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            value=value,
+            interactive=interactive,
+        )
+
+    def example_payload(self) -> Any:
+        return [
+            {"token": "The", "class_or_confidence": None},
+            {"token": "quick", "class_or_confidence": "adj"},
+        ]
+
+    def example_value(self) -> Any:
+        return [("The", None), ("quick", "adj"), ("brown", "adj"), ("fox", "noun")]
+
+    def preprocess(
+        self, payload: HighlightedTextData | None
+    ) -> list[tuple[str, str | float | None]] | None:
+        """
+        Parameters:
+            payload: An instance of HighlightedTextData
+        Returns:
+            Passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.
+        """
+        if payload is None:
+            return None
+        return payload.model_dump()  # type: ignore
+
+    def postprocess(
+        self, value: list[tuple[str, str | float | None]] | dict | None
+    ) -> HighlightedTextData | None:
+        """
+        Parameters:
+            value: Expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end"
+        Returns:
+            An instance of HighlightedTextData
+        """
+        if value is None:
+            return None
+        if isinstance(value, dict):
+            try:
+                text = value["text"]
+                entities = value["entities"]
+            except KeyError as ke:
+                raise ValueError(
+                    "Expected a dictionary with keys 'text' and 'entities' "
+                    "for the value of the HighlightedTextLabelDefault component."
+                ) from ke
+            if len(entities) == 0:
+                value = [(text, None)]
+            else:
+                list_format = []
+                index = 0
+                entities = sorted(entities, key=lambda x: x["start"])
+                for entity in entities:
+                    list_format.append((text[index : entity["start"]], None))
+                    entity_category = entity.get("entity") or entity.get("entity_group")
+                    list_format.append(
+                        (text[entity["start"] : entity["end"]], entity_category)
+                    )
+                    index = entity["end"]
+                list_format.append((text[index:], None))
+                value = list_format
+        if self.combine_adjacent:
+            output = []
+            running_text, running_category = None, None
+            for text, category in value:
+                if running_text is None:
+                    running_text = text
+                    running_category = category
+                elif category == running_category:
+                    running_text += self.adjacent_separator + text
+                elif not text:
+                    # Skip fully empty item, these get added in processing
+                    # of dictionaries.
+                    pass
+                else:
+                    output.append((running_text, running_category))
+                    running_text = text
+                    running_category = category
+            if running_text is not None:
+                output.append((running_text, running_category))
+            return HighlightedTextData(
+                root=[
+                    HighlightedToken(token=o[0], class_or_confidence=o[1])
+                    for o in output
+                ]
+            )
+        else:
+            return HighlightedTextData(
+                root=[
+                    HighlightedToken(token=o[0], class_or_confidence=o[1])
+                    for o in value
+                ]
+            )
+
+    
+    def change(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def select(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...

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

@@ -0,0 +1 @@
+.container.svelte-1woixh4.svelte-1woixh4{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--block-padding)}.hl.svelte-1woixh4+.hl.svelte-1woixh4{margin-left:var(--size-1)}.textspan.svelte-1woixh4:last-child>.label.svelte-1woixh4{margin-right:0}.category-legend.svelte-1woixh4.svelte-1woixh4{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);color:#000}.category-label.svelte-1woixh4.svelte-1woixh4{cursor:pointer;border-radius:var(--radius-xs);padding-right:var(--size-2);padding-left:var(--size-2);font-weight:var(--weight-semibold)}.color-legend.svelte-1woixh4.svelte-1woixh4{display:flex;justify-content:space-between;border-radius:var(--radius-xs);background:linear-gradient(to right,var(--color-purple),rgba(255,255,255,0),var(--color-red));padding:var(--size-1) var(--size-2);font-weight:var(--weight-semibold)}.textfield.svelte-1woixh4.svelte-1woixh4{box-sizing:border-box;border-radius:var(--radius-xs);background:var(--background-fill-primary);background-color:transparent;max-width:var(--size-full);line-height:var(--scale-4);word-break:break-all}.textspan.svelte-1woixh4.svelte-1woixh4{transition:.15s;border-radius:var(--radius-xs);padding-top:2.5px;padding-right:var(--size-1);padding-bottom:3.5px;padding-left:var(--size-1);color:#000}.label.svelte-1woixh4.svelte-1woixh4{transition:.15s;margin-top:1px;border-radius:var(--radius-xs);padding:1px 5px;color:var(--body-text-color);color:#fff;font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase}.text.svelte-1woixh4.svelte-1woixh4{color:#000;white-space:pre-wrap}.score-text.svelte-1woixh4 .text.svelte-1woixh4{color:var(--body-text-color)}.score-text.svelte-1woixh4.svelte-1woixh4{margin-right:var(--size-1);padding:var(--size-1)}.no-cat.svelte-1woixh4.svelte-1woixh4,.no-label.svelte-1woixh4.svelte-1woixh4{color:var(--body-text-color)}.selectable.svelte-1woixh4.svelte-1woixh4{cursor:pointer}.label-input.svelte-df6jzs{transition:.15s;margin-top:1px;margin-right:calc(var(--size-1));border-radius:var(--radius-xs);padding:1px 5px;color:#000;font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;line-height:1;color:#fff}.label-input.svelte-df6jzs::placeholder{color:#01010180}.label-clear-button.svelte-u7mykt.svelte-u7mykt{display:none;border-radius:var(--radius-xs);padding-top:2.5px;padding-right:var(--size-1);padding-bottom:3.5px;padding-left:var(--size-1);color:#000;background-color:var(--background-fill-secondary);-webkit-user-select:none;user-select:none;position:relative;left:-3px;border-radius:0 var(--radius-xs) var(--radius-xs) 0;color:var(--block-label-text-color)}.text-class_or_confidence-container.svelte-u7mykt:hover .label-clear-button.svelte-u7mykt,.text-class_or_confidence-container.svelte-u7mykt:focus-within .label-clear-button.svelte-u7mykt,.score-text-container.svelte-u7mykt:hover .label-clear-button.svelte-u7mykt,.score-text-container.svelte-u7mykt:focus-within .label-clear-button.svelte-u7mykt{display:inline}.text-class_or_confidence-container.svelte-u7mykt:hover .textspan.hl.svelte-u7mykt,.text-class_or_confidence-container.svelte-u7mykt:focus-within .textspan.hl.svelte-u7mykt,.score-text.svelte-u7mykt.svelte-u7mykt:hover{border-radius:var(--radius-xs) 0 0 var(--radius-xs)}.container.svelte-u7mykt.svelte-u7mykt{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--block-padding)}.hl.svelte-u7mykt.svelte-u7mykt{margin-left:var(--size-1);transition:background-color .3s;-webkit-user-select:none;user-select:none}.textspan.svelte-u7mykt:last-child>.label.svelte-u7mykt{margin-right:0}.class_or_confidence-legend.svelte-u7mykt.svelte-u7mykt{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);color:#000}.class_or_confidence-label.svelte-u7mykt.svelte-u7mykt{cursor:pointer;border-radius:var(--radius-xs);padding-right:var(--size-2);padding-left:var(--size-2);font-weight:var(--weight-semibold)}.color-legend.svelte-u7mykt.svelte-u7mykt{display:flex;justify-content:space-between;border-radius:var(--radius-xs);background:linear-gradient(to right,var(--color-purple),rgba(255,255,255,0),var(--color-red));padding:var(--size-1) var(--size-2);font-weight:var(--weight-semibold)}.textfield.svelte-u7mykt.svelte-u7mykt{box-sizing:border-box;border-radius:var(--radius-xs);background:var(--background-fill-primary);background-color:transparent;max-width:var(--size-full);line-height:var(--scale-4);word-break:break-all}.textspan.svelte-u7mykt.svelte-u7mykt{transition:.15s;border-radius:var(--radius-xs);padding-top:2.5px;padding-right:var(--size-1);padding-bottom:3.5px;padding-left:var(--size-1);color:#000;cursor:text}.label.svelte-u7mykt.svelte-u7mykt{transition:.15s;margin-top:1px;border-radius:var(--radius-xs);padding:1px 5px;color:var(--body-text-color);color:#fff;font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;-webkit-user-select:none;user-select:none}.text.svelte-u7mykt.svelte-u7mykt{color:#000;white-space:pre-wrap}.textspan.hl.svelte-u7mykt.svelte-u7mykt{-webkit-user-select:none;user-select:none}.score-text-container.svelte-u7mykt.svelte-u7mykt{margin-right:var(--size-1)}.score-text.svelte-u7mykt .text.svelte-u7mykt,.no-cat.svelte-u7mykt.svelte-u7mykt{color:var(--body-text-color)}.no-label.svelte-u7mykt.svelte-u7mykt{color:var(--body-text-color);-webkit-user-select:text;user-select:text}.selectable.svelte-u7mykt.svelte-u7mykt{cursor:text;-webkit-user-select:text;user-select:text}.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1yserjw.svelte-1yserjw{top:0;right:0;left:0}.wrap.default.svelte-1yserjw.svelte-1yserjw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yserjw.svelte-1yserjw{opacity:0;pointer-events:none}.generating.svelte-1yserjw.svelte-1yserjw{animation:svelte-1yserjw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yserjw.svelte-1yserjw{background:none}@keyframes svelte-1yserjw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yserjw.svelte-1yserjw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yserjw.svelte-1yserjw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yserjw.svelte-1yserjw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yserjw.svelte-1yserjw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yserjw.svelte-1yserjw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yserjw.svelte-1yserjw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yserjw.svelte-1yserjw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yserjw .progress-text.svelte-1yserjw{background:var(--block-background-fill)}.border.svelte-1yserjw.svelte-1yserjw{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}

src/demo/app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_highlightedtextlabeldefault import HighlightedTextLabelDefault
+
+
+example = HighlightedTextLabelDefault().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        test_1 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]),
+                                             label="Double click word to see standard default label", interactive=True)  # default label
+        test_2 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]), label="Double click word to see modified default label",
+                                             interactive=True, default_label="x", color_map={"x": "green"})  # blank component
+
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

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

src/demo/space.py

@@ -0,0 +1,139 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'HighlightedTextLabelDefault': {'description': 'Displays text that contains spans that are highlighted by category or numerical value.\n', 'members': {'__init__': {'value': {'type': 'list[tuple[str, str | float | None]]\n    | dict\n    | Callable\n    | None', 'default': 'None', 'description': 'Default value to show. 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': 'A dictionary mapping labels to colors. The colors may be specified as hex codes or by their names. For example: {"person": "red", "location": "#FFEE22"}'}, 'show_legend': {'type': 'bool', 'default': 'False', 'description': 'whether to show span categories in a separate legend or inline.'}, 'combine_adjacent': {'type': 'bool', 'default': 'False', 'description': 'If True, will merge the labels of adjacent tokens belonging to the same category.'}, 'adjacent_separator': {'type': 'str', 'default': '""', 'description': 'Specifies the separator to be used between tokens if combine_adjacent is True.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the component will be editable, and allow user to select spans of text and label them.'}, 'default_label': {'type': 'str | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'list[tuple[str, str | float | None]] | dict | None', 'description': 'Expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end"'}}, 'preprocess': {'return': {'type': 'list[tuple[str, str | float | None]] | None', 'description': 'Passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the HighlightedTextLabelDefault 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.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the HighlightedTextLabelDefault. Uses event data gradio.SelectData to carry `value` referring to the label of the HighlightedTextLabelDefault, and `selected` to refer to state of the HighlightedTextLabelDefault. See EventData documentation on how to use this event data'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'HighlightedTextLabelDefault': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_highlightedtextlabeldefault`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Modify the default label when selecting a word in the interactive HighlightedText component.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_highlightedtextlabeldefault
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_highlightedtextlabeldefault import HighlightedTextLabelDefault
+
+
+example = HighlightedTextLabelDefault().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        test_1 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]),
+                                             label="Double click word to see standard default label", interactive=True)  # default label
+        test_2 = HighlightedTextLabelDefault(value=([("Hello, my name is Slim Shady.", None)]), label="Double click word to see modified default label",
+                                             interactive=True, default_label="x", color_map={"x": "green"})  # blank component
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `HighlightedTextLabelDefault`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["HighlightedTextLabelDefault"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["HighlightedTextLabelDefault"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes the value as a list of tuples as a `list[tuple]` into the function. Each `tuple` consists of a `str` substring of the text (so the entire text is included) and `str | float | None` label, which is the category or confidence of that substring.
+- **As output:** Should return, expects a list of (word, category) tuples, or a dictionary of two keys: "text", and "entities", which itself is a list of dictionaries, each of which have the keys: "entity" (or "entity_group"), "start", and "end".
+
+ ```python
+def predict(
+    value: list[tuple[str, str | float | None]] | None
+) -> list[tuple[str, str | float | None]] | dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "HighlightedTextLabelDefault-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          HighlightedTextLabelDefault: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Index.svelte

@@ -0,0 +1,139 @@
+<script context="module" lang="ts">
+	export { default as BaseStaticHighlightedText } from "./shared/StaticHighlightedtext.svelte";
+	export { default as BaseInteractiveHighlightedText } from "./shared/InteractiveHighlightedtext.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";
+	import StaticHighlightedText from "./shared/StaticHighlightedtext.svelte";
+	import InteractiveHighlightedText from "./shared/InteractiveHighlightedtext.svelte";
+	import { Block, BlockLabel, Empty } from "@gradio/atoms";
+	import { TextHighlight } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { merge_elements } from "./shared/utils";
+
+	export let gradio: Gradio<{
+		select: SelectData;
+		change: never;
+	}>;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: {
+		token: string;
+		class_or_confidence: string | number | null;
+	}[];
+	let old_value: typeof value;
+	export let show_legend: boolean;
+	export let color_map: Record<string, string> = {};
+	export let label = gradio.i18n("highlighted_text.highlighted_text");
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let _selectable = false;
+	export let combine_adjacent = false;
+	export let interactive: boolean;
+	export let default_label: str | None = "label";
+
+
+	$: if (!color_map && Object.keys(color_map).length) {
+		color_map = color_map;
+	}
+
+	export let loading_status: LoadingStatus;
+
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+
+	$: if (value && combine_adjacent) {
+		value = merge_elements(value, "equal");
+	}
+</script>
+
+{#if !interactive}
+	<Block
+		variant={"solid"}
+		test_id="highlighted-text"
+		{visible}
+		{elem_id}
+		{elem_classes}
+		padding={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		{#if label}
+			<BlockLabel
+				Icon={TextHighlight}
+				{label}
+				float={false}
+				disable={container === false}
+			/>
+		{/if}
+
+		{#if value}
+			<StaticHighlightedText
+				on:select={({ detail }) => gradio.dispatch("select", detail)}
+				selectable={_selectable}
+				{value}
+				{show_legend}
+				{color_map}
+			/>
+		{:else}
+			<Empty>
+				<TextHighlight />
+			</Empty>
+		{/if}
+	</Block>
+{:else}
+	<Block
+		variant={interactive ? "dashed" : "solid"}
+		test_id="highlighted-text"
+		{visible}
+		{elem_id}
+		{elem_classes}
+		padding={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			{...loading_status}
+			i18n={gradio.i18n}
+		/>
+		{#if label}
+			<BlockLabel
+				Icon={TextHighlight}
+				{label}
+				float={false}
+				disable={container === false}
+			/>
+		{/if}
+
+		{#if value}
+			<InteractiveHighlightedText
+				bind:value
+				on:change={() => gradio.dispatch("change")}
+				selectable={_selectable}
+				{show_legend}
+				{color_map}
+				{default_label}
+			/>
+		{:else}
+			<Empty>
+				<TextHighlight />
+			</Empty>
+		{/if}
+	</Block>
+{/if}

src/frontend/package-lock.json

@@ -0,0 +1,952 @@
+{
+  "name": "gradio_highlightedtextlabeldefault",
+  "version": "0.4.14",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gradio_highlightedtextlabeldefault",
+      "version": "0.4.14",
+      "license": "ISC",
+      "dependencies": {
+        "@gradio/atoms": "0.6.2",
+        "@gradio/icons": "0.3.4",
+        "@gradio/statustracker": "0.4.11",
+        "@gradio/theme": "0.2.1",
+        "@gradio/utils": "0.3.1"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@gradio/atoms": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@gradio/atoms/-/atoms-0.6.2.tgz",
+      "integrity": "sha512-1HlNIX3XzPJEakv9RB5Cn7l/GH618qDtfb30YR7CBw8lljXvn/i1nBCG+DO1mdoNfRA3x/pc3vM7X3G6cuh4PQ==",
+      "dependencies": {
+        "@gradio/icons": "^0.3.4",
+        "@gradio/utils": "^0.3.1"
+      }
+    },
+    "node_modules/@gradio/column": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@gradio/column/-/column-0.1.0.tgz",
+      "integrity": "sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw=="
+    },
+    "node_modules/@gradio/icons": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@gradio/icons/-/icons-0.3.4.tgz",
+      "integrity": "sha512-rtH7u3OiYy9UuO1bnebXkTXgc+D62H6BILrMtM4EfsKGgQQICD0n7NPvbPtS0zpi/fz0ppCdlfFIKKIOeVaeFg=="
+    },
+    "node_modules/@gradio/statustracker": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@gradio/statustracker/-/statustracker-0.4.11.tgz",
+      "integrity": "sha512-8SiS5kC0092e1J06j55D8xAYqsA6wvmFeosnGd557OTigOpVPKuqsa1ekTHxAPgE/RbGEzYQ851UsMT6Oh5fWg==",
+      "dependencies": {
+        "@gradio/atoms": "^0.6.2",
+        "@gradio/column": "^0.1.0",
+        "@gradio/icons": "^0.3.4",
+        "@gradio/utils": "^0.3.1"
+      }
+    },
+    "node_modules/@gradio/theme": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@gradio/theme/-/theme-0.2.1.tgz",
+      "integrity": "sha512-ua1fWiXRDl/Yrn2JS/bda2oI5UYJs0PjkIgOgJy6TQKt8rRspb+3sp33em9t8CJjxtavR/efwWOFfBJaIzEMig=="
+    },
+    "node_modules/@gradio/utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@gradio/utils/-/utils-0.3.1.tgz",
+      "integrity": "sha512-LlDr/QlX8eZNzqfgtx4M3lFP0qSybbecDXwnKe7jgkL01qollJpSsOvZ5t1wxmas1qbINws6kT821XUxEjmutQ==",
+      "dependencies": {
+        "@gradio/theme": "^0.2.1",
+        "svelte-i18n": "^3.6.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/cli-color": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.4.tgz",
+      "integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.64",
+        "es6-iterator": "^2.0.3",
+        "memoizee": "^0.4.15",
+        "timers-ext": "^0.1.7"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
+      }
+    },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "node_modules/lru-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
+      "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
+    "node_modules/memoizee": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
+      "integrity": "sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.53",
+        "es6-weak-map": "^2.0.3",
+        "event-emitter": "^0.3.5",
+        "is-promise": "^2.2.2",
+        "lru-queue": "^0.1.0",
+        "next-tick": "^1.1.0",
+        "timers-ext": "^0.1.7"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "4.2.13",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.13.tgz",
+      "integrity": "sha512-jtVt2KXLbQnsWN93Zd7EVboNh8Tqexes4rZfXNP7nYRjd9+JjubTD8BXloUmU1OUYpc6pdd1aKBhCV+b2ZKoMg==",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svelte-i18n": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-3.7.4.tgz",
+      "integrity": "sha512-yGRCNo+eBT4cPuU7IVsYTYjxB7I2V8qgUZPlHnNctJj5IgbJgV78flsRzpjZ/8iUYZrS49oCt7uxlU3AZv/N5Q==",
+      "dependencies": {
+        "cli-color": "^2.0.3",
+        "deepmerge": "^4.2.2",
+        "esbuild": "^0.19.2",
+        "estree-walker": "^2",
+        "intl-messageformat": "^9.13.0",
+        "sade": "^1.8.1",
+        "tiny-glob": "^0.2.9"
+      },
+      "bin": {
+        "svelte-i18n": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "svelte": "^3 || ^4"
+      }
+    },
+    "node_modules/svelte-i18n/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/timers-ext": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
+      "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
+      "dependencies": {
+        "es5-ext": "~0.10.46",
+        "next-tick": "1"
+      }
+    },
+    "node_modules/tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dependencies": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    }
+  }
+}

src/frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "gradio_highlightedtextlabeldefault",
+  "version": "0.4.14",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "dependencies": {
+    "@gradio/atoms": "0.6.2",
+    "@gradio/icons": "0.3.4",
+    "@gradio/statustracker": "0.4.11",
+    "@gradio/theme": "0.2.1",
+    "@gradio/utils": "0.3.1"
+  },
+  "main": "./Index.svelte",
+  "exports": {
+    ".": "./Index.svelte",
+    "./package.json": "./package.json"
+  }
+}

src/frontend/shared/InteractiveHighlightedtext.svelte

@@ -0,0 +1,512 @@
+<script lang="ts">
+	const browser = typeof document !== "undefined";
+	import { get_next_color } from "@gradio/utils";
+	import type { SelectData } from "@gradio/utils";
+	import { createEventDispatcher, onMount } from "svelte";
+	import { correct_color_map, merge_elements } from "./utils";
+	import LabelInput from "./LabelInput.svelte";
+
+	export let value: {
+		token: string;
+		class_or_confidence: string | number | null;
+	}[] = [];
+	export let show_legend = false;
+	export let color_map: Record<string, string> = {};
+	export let selectable = false;
+    export let default_label: str;
+
+
+	let activeElementIndex = -1;
+	let ctx: CanvasRenderingContext2D;
+	let _color_map: Record<string, { primary: string; secondary: string }> = {};
+	let active = "";
+	let selection: Selection | null;
+	let labelToEdit = -1;
+
+	onMount(() => {
+		const mouseUpHandler = (): void => {
+			selection = window.getSelection();
+			handleSelectionComplete();
+			window.removeEventListener("mouseup", mouseUpHandler);
+		};
+
+		window.addEventListener("mousedown", () => {
+			window.addEventListener("mouseup", mouseUpHandler);
+		});
+	});
+
+	async function handleTextSelected(
+		startIndex: number,
+		endIndex: number
+	): Promise<void> {
+		if (
+			selection?.toString() &&
+			activeElementIndex !== -1 &&
+			value[activeElementIndex].token.toString().includes(selection.toString())
+		) {
+			const tempFlag = Symbol();
+
+			const str = value[activeElementIndex].token;
+			const [before, selected, after] = [
+				str.substring(0, startIndex),
+				str.substring(startIndex, endIndex),
+				str.substring(endIndex)
+			];
+
+			let tempValue: {
+				token: string;
+				class_or_confidence: string | number | null;
+				flag?: symbol;
+			}[] = [
+				...value.slice(0, activeElementIndex),
+				{ token: before, class_or_confidence: null },
+				{
+					token: selected,
+					class_or_confidence: mode === "scores" ? 1 : default_label,
+					flag: tempFlag
+				}, // add a temp flag to the new highlighted text element
+				{ token: after, class_or_confidence: null },
+				...value.slice(activeElementIndex + 1)
+			];
+
+			// store the index of the new highlighted text element and remove the flag
+			labelToEdit = tempValue.findIndex(({ flag }) => flag === tempFlag);
+			// tempValue[labelToEdit].pop();
+
+			// remove elements with empty labels
+			tempValue = tempValue.filter((item) => item.token.trim() !== "");
+			value = tempValue.map(({ flag, ...rest }) => rest);
+
+			handleValueChange();
+			document.getElementById(`label-input-${labelToEdit}`)?.focus();
+		}
+	}
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+		change: typeof value;
+		input: never;
+	}>();
+
+	function splitTextByNewline(text: string): string[] {
+		return text.split("\n");
+	}
+
+	function removeHighlightedText(index: number): void {
+		if (!value || index < 0 || index >= value.length) return;
+		value[index].class_or_confidence = null;
+		value = merge_elements(value, "equal");
+		handleValueChange();
+		window.getSelection()?.empty();
+	}
+
+	function handleValueChange(): void {
+		dispatch("change", value);
+		labelToEdit = -1;
+
+		// reset legend color maps
+		if (show_legend) {
+			color_map = {};
+			_color_map = {};
+		}
+	}
+
+	let mode: "categories" | "scores";
+
+	$: {
+		if (!color_map) {
+			color_map = {};
+		}
+		if (value.length > 0) {
+			for (let entry of value) {
+				if (entry.class_or_confidence !== null) {
+					if (typeof entry.class_or_confidence === "string") {
+						mode = "categories";
+						if (!(entry.class_or_confidence in color_map)) {
+							let color = get_next_color(Object.keys(color_map).length);
+							color_map[entry.class_or_confidence] = color;
+						}
+					} else {
+						mode = "scores";
+					}
+				}
+			}
+		}
+
+		correct_color_map(color_map, _color_map, browser, ctx);
+	}
+
+	function handle_mouseover(label: string): void {
+		active = label;
+	}
+	function handle_mouseout(): void {
+		active = "";
+	}
+
+	async function handleKeydownSelection(event: KeyboardEvent): Promise<void> {
+		selection = window.getSelection();
+
+		if (event.key === "Enter") {
+			handleSelectionComplete();
+		}
+	}
+
+	function handleSelectionComplete(): void {
+		if (selection && selection?.toString().trim() !== "") {
+			const textBeginningIndex = selection.getRangeAt(0).startOffset;
+			const textEndIndex = selection.getRangeAt(0).endOffset;
+			handleTextSelected(textBeginningIndex, textEndIndex);
+		}
+	}
+
+	function handleSelect(
+		i: number,
+		text: string,
+		class_or_confidence: string | number | null
+	): void {
+		dispatch("select", {
+			index: i,
+			value: [text, class_or_confidence]
+		});
+	}
+</script>
+
+<div class="container">
+	{#if mode === "categories"}
+		{#if show_legend}
+			<div
+				class="class_or_confidence-legend"
+				data-testid="highlighted-text:class_or_confidence-legend"
+			>
+				{#if _color_map}
+					{#each Object.entries(_color_map) as [class_or_confidence, color], i}
+						<div
+							role="button"
+							aria-roledescription="Categories of highlighted text. Hover to see text with this class_or_confidence highlighted."
+							tabindex="0"
+							on:mouseover={() => handle_mouseover(class_or_confidence)}
+							on:focus={() => handle_mouseover(class_or_confidence)}
+							on:mouseout={() => handle_mouseout()}
+							on:blur={() => handle_mouseout()}
+							class="class_or_confidence-label"
+							style={"background-color:" + color.secondary}
+						>
+							{class_or_confidence}
+						</div>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+
+		<div class="textfield">
+			{#each value as { token, class_or_confidence }, i}
+				{#each splitTextByNewline(token) as line, j}
+					{#if line.trim() !== ""}
+						<span class="text-class_or_confidence-container">
+							<span
+								role="button"
+								tabindex="0"
+								class="textspan"
+								style:background-color={class_or_confidence === null ||
+								(active && active !== class_or_confidence)
+									? ""
+									: class_or_confidence && _color_map[class_or_confidence]
+									? _color_map[class_or_confidence].secondary
+									: ""}
+								class:no-cat={class_or_confidence === null ||
+									(active && active !== class_or_confidence)}
+								class:hl={class_or_confidence !== null}
+								class:selectable
+								on:click={() => {
+									if (class_or_confidence !== null) {
+										handleSelect(i, token, class_or_confidence);
+									}
+								}}
+								on:keydown={(e) => {
+									if (class_or_confidence !== null) {
+										labelToEdit = i;
+										handleSelect(i, token, class_or_confidence);
+									} else {
+										handleKeydownSelection(e);
+									}
+								}}
+								on:focus={() => (activeElementIndex = i)}
+								on:mouseover={() => (activeElementIndex = i)}
+							>
+								<span
+									class:no-label={class_or_confidence === null}
+									class="text"
+									role="button"
+									on:keydown={(e) => handleKeydownSelection(e)}
+									on:focus={() => (activeElementIndex = i)}
+									on:mouseover={() => (activeElementIndex = i)}
+									on:click={() => (labelToEdit = i)}
+									tabindex="0">{line}</span
+								>
+								{#if !show_legend && class_or_confidence !== null && labelToEdit !== i}
+									<span
+										id={`label-tag-${i}`}
+										class="label"
+										role="button"
+										tabindex="0"
+										style:background-color={class_or_confidence === null ||
+										(active && active !== class_or_confidence)
+											? ""
+											: _color_map[class_or_confidence].primary}
+										on:click={() => (labelToEdit = i)}
+										on:keydown={() => (labelToEdit = i)}
+									>
+										{class_or_confidence}
+									</span>
+								{/if}
+								{#if labelToEdit === i && class_or_confidence !== null}
+									&nbsp;
+									<LabelInput
+										bind:value
+										{labelToEdit}
+										category={class_or_confidence}
+										{active}
+										{_color_map}
+										indexOfLabel={i}
+										text={token}
+										{handleValueChange}
+									/>
+								{/if}
+							</span>
+							{#if class_or_confidence !== null}
+								<span
+									class="label-clear-button"
+									role="button"
+									aria-roledescription="Remove label from text"
+									tabindex="0"
+									on:click={() => removeHighlightedText(i)}
+									on:keydown={(event) => {
+										if (event.key === "Enter") {
+											removeHighlightedText(i);
+										}
+									}}
+									>×
+								</span>
+							{/if}
+						</span>
+					{/if}
+					{#if j < splitTextByNewline(token).length - 1}
+						<br />
+					{/if}
+				{/each}
+			{/each}
+		</div>
+	{:else}
+		{#if show_legend}
+			<div class="color-legend" data-testid="highlighted-text:color-legend">
+				<span>-1</span>
+				<span>0</span>
+				<span>+1</span>
+			</div>
+		{/if}
+
+		<div class="textfield" data-testid="highlighted-text:textfield">
+			{#each value as { token, class_or_confidence }, i}
+				{@const score =
+					typeof class_or_confidence === "string"
+						? parseInt(class_or_confidence)
+						: class_or_confidence}
+				<span class="score-text-container">
+					<span
+						class="textspan score-text"
+						role="button"
+						tabindex="0"
+						class:no-cat={class_or_confidence === null ||
+							(active && active !== class_or_confidence)}
+						class:hl={class_or_confidence !== null}
+						on:mouseover={() => (activeElementIndex = i)}
+						on:focus={() => (activeElementIndex = i)}
+						on:click={() => (labelToEdit = i)}
+						on:keydown={(e) => {
+							if (e.key === "Enter") {
+								labelToEdit = i;
+							}
+						}}
+						style={"background-color: rgba(" +
+							(score && score < 0
+								? "128, 90, 213," + -score
+								: "239, 68, 60," + score) +
+							")"}
+					>
+						<span class="text">{token}</span>
+						{#if class_or_confidence && labelToEdit === i}
+							<LabelInput
+								bind:value
+								{labelToEdit}
+								{_color_map}
+								category={class_or_confidence}
+								{active}
+								indexOfLabel={i}
+								text={token}
+								{handleValueChange}
+								isScoresMode
+							/>
+						{/if}
+					</span>
+					{#if class_or_confidence && activeElementIndex === i}
+						<span
+							class="label-clear-button"
+							role="button"
+							aria-roledescription="Remove label from text"
+							tabindex="0"
+							on:click={() => removeHighlightedText(i)}
+							on:keydown={(event) => {
+								if (event.key === "Enter") {
+									removeHighlightedText(i);
+								}
+							}}
+							>×
+						</span>
+					{/if}
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.label-clear-button {
+		display: none;
+		border-radius: var(--radius-xs);
+		padding-top: 2.5px;
+		padding-right: var(--size-1);
+		padding-bottom: 3.5px;
+		padding-left: var(--size-1);
+		color: black;
+		background-color: var(--background-fill-secondary);
+		user-select: none;
+		position: relative;
+		left: -3px;
+		border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+		color: var(--block-label-text-color);
+	}
+
+	.text-class_or_confidence-container:hover .label-clear-button,
+	.text-class_or_confidence-container:focus-within .label-clear-button,
+	.score-text-container:hover .label-clear-button,
+	.score-text-container:focus-within .label-clear-button {
+		display: inline;
+	}
+
+	.text-class_or_confidence-container:hover .textspan.hl,
+	.text-class_or_confidence-container:focus-within .textspan.hl,
+	.score-text:hover {
+		border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		padding: var(--block-padding);
+	}
+
+	.hl {
+		margin-left: var(--size-1);
+		transition: background-color 0.3s;
+		user-select: none;
+	}
+
+	.textspan:last-child > .label {
+		margin-right: 0;
+	}
+
+	.class_or_confidence-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-sm);
+		color: black;
+	}
+
+	.class_or_confidence-label {
+		cursor: pointer;
+		border-radius: var(--radius-xs);
+		padding-right: var(--size-2);
+		padding-left: var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.color-legend {
+		display: flex;
+		justify-content: space-between;
+		border-radius: var(--radius-xs);
+		background: linear-gradient(
+			to right,
+			var(--color-purple),
+			rgba(255, 255, 255, 0),
+			var(--color-red)
+		);
+		padding: var(--size-1) var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.textfield {
+		box-sizing: border-box;
+		border-radius: var(--radius-xs);
+		background: var(--background-fill-primary);
+		background-color: transparent;
+		max-width: var(--size-full);
+		line-height: var(--scale-4);
+		word-break: break-all;
+	}
+
+	.textspan {
+		transition: 150ms;
+		border-radius: var(--radius-xs);
+		padding-top: 2.5px;
+		padding-right: var(--size-1);
+		padding-bottom: 3.5px;
+		padding-left: var(--size-1);
+		color: black;
+		cursor: text;
+	}
+
+	.label {
+		transition: 150ms;
+		margin-top: 1px;
+		border-radius: var(--radius-xs);
+		padding: 1px 5px;
+		color: var(--body-text-color);
+		color: white;
+		font-weight: var(--weight-bold);
+		font-size: var(--text-sm);
+		text-transform: uppercase;
+		user-select: none;
+	}
+
+	.text {
+		color: black;
+		white-space: pre-wrap;
+	}
+
+	.textspan.hl {
+		user-select: none;
+	}
+
+	.score-text-container {
+		margin-right: var(--size-1);
+	}
+
+	.score-text .text {
+		color: var(--body-text-color);
+	}
+
+	.no-cat {
+		color: var(--body-text-color);
+	}
+
+	.no-label {
+		color: var(--body-text-color);
+		user-select: text;
+	}
+
+	.selectable {
+		cursor: text;
+		user-select: text;
+	}
+</style>

src/frontend/shared/LabelInput.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	type HighlightedTextType = {
+		token: string;
+		class_or_confidence: string | number | null;
+	};
+
+	export let value: HighlightedTextType[];
+	export let category: string | number | null;
+	export let active: string;
+	export let labelToEdit: number;
+	export let indexOfLabel: number;
+	export let text: string;
+	export let handleValueChange: () => void;
+	export let isScoresMode = false;
+	export let _color_map: Record<string, { primary: string; secondary: string }>;
+
+	let _input_value = category;
+
+	function handleInput(e: Event): void {
+		let target = e.target as HTMLInputElement;
+		if (target) {
+			_input_value = target.value;
+		}
+	}
+
+	function updateLabelValue(
+		e: Event,
+		elementIndex: number,
+		text: string
+	): void {
+		let target = e.target as HTMLInputElement;
+		value = [
+			...value.slice(0, elementIndex),
+			{
+				token: text,
+				class_or_confidence:
+					target.value === ""
+						? null
+						: isScoresMode
+						? Number(target.value)
+						: target.value
+			},
+			...value.slice(elementIndex + 1)
+		];
+
+		handleValueChange();
+	}
+
+	function clearPlaceHolderOnFocus(e: FocusEvent): void {
+		let target = e.target as HTMLInputElement;
+		if (target && target.placeholder) target.placeholder = "";
+	}
+</script>
+
+<!-- svelte-ignore a11y-autofocus -->
+<!-- autofocus should not be disorienting for a screen reader users
+as input is only rendered once a new label is created -->
+{#if !isScoresMode}
+	<input
+		class="label-input"
+		autofocus
+		id={`label-input-${indexOfLabel}`}
+		type="text"
+		placeholder="label"
+		value={category}
+		style:background-color={category === null || (active && active !== category)
+			? ""
+			: _color_map[category].primary}
+		style:width={_input_value
+			? _input_value.toString()?.length + 4 + "ch"
+			: "8ch"}
+		on:input={handleInput}
+		on:blur={(e) => updateLabelValue(e, indexOfLabel, text)}
+		on:keydown={(e) => {
+			if (e.key === "Enter") {
+				updateLabelValue(e, indexOfLabel, text);
+				labelToEdit = -1;
+			}
+		}}
+		on:focus={clearPlaceHolderOnFocus}
+	/>
+{:else}
+	<input
+		class="label-input"
+		autofocus
+		type="number"
+		step="0.1"
+		style={"background-color: rgba(" +
+			(typeof category === "number" && category < 0
+				? "128, 90, 213," + -category
+				: "239, 68, 60," + category) +
+			")"}
+		value={category}
+		style:width="7ch"
+		on:input={handleInput}
+		on:blur={(e) => updateLabelValue(e, indexOfLabel, text)}
+		on:keydown={(e) => {
+			if (e.key === "Enter") {
+				updateLabelValue(e, indexOfLabel, text);
+				labelToEdit = -1;
+			}
+		}}
+	/>
+{/if}
+
+<style>
+	.label-input {
+		transition: 150ms;
+		margin-top: 1px;
+		margin-right: calc(var(--size-1));
+		border-radius: var(--radius-xs);
+		padding: 1px 5px;
+		color: black;
+		font-weight: var(--weight-bold);
+		font-size: var(--text-sm);
+		text-transform: uppercase;
+		line-height: 1;
+		color: white;
+	}
+
+	.label-input::placeholder {
+		color: rgba(1, 1, 1, 0.5);
+	}
+</style>

src/frontend/shared/StaticHighlightedtext.svelte

@@ -0,0 +1,275 @@
+<script lang="ts">
+	const browser = typeof document !== "undefined";
+	import { get_next_color } from "@gradio/utils";
+	import type { SelectData } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
+	import { correct_color_map } from "./utils";
+
+	export let value: {
+		token: string;
+		class_or_confidence: string | number | null;
+	}[] = [];
+	export let show_legend = false;
+	export let color_map: Record<string, string> = {};
+	export let selectable = false;
+
+	let ctx: CanvasRenderingContext2D;
+	let _color_map: Record<string, { primary: string; secondary: string }> = {};
+	let active = "";
+
+	function splitTextByNewline(text: string): string[] {
+		return text.split("\n");
+	}
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+	}>();
+
+	let mode: "categories" | "scores";
+
+	$: {
+		if (!color_map) {
+			color_map = {};
+		}
+		if (value.length > 0) {
+			for (let entry of value) {
+				if (entry.class_or_confidence !== null) {
+					if (typeof entry.class_or_confidence === "string") {
+						mode = "categories";
+						if (!(entry.class_or_confidence in color_map)) {
+							let color = get_next_color(Object.keys(color_map).length);
+							color_map[entry.class_or_confidence] = color;
+						}
+					} else {
+						mode = "scores";
+					}
+				}
+			}
+		}
+
+		correct_color_map(color_map, _color_map, browser, ctx);
+	}
+
+	function handle_mouseover(label: string): void {
+		active = label;
+	}
+	function handle_mouseout(): void {
+		active = "";
+	}
+</script>
+
+<!-- 
+	@todo victor: try reimplementing without flex (negative margins on container to avoid left margin on linebreak). 
+	If not possible hijack the copy execution like this:
+
+<svelte:window
+	on:copy|preventDefault={() => {
+		const selection =.getSelection()?.toString();
+		console.log(selection?.replaceAll("\n", " "));
+	}}
+/>
+-->
+
+<div class="container">
+	{#if mode === "categories"}
+		{#if show_legend}
+			<div
+				class="category-legend"
+				data-testid="highlighted-text:category-legend"
+			>
+				{#each Object.entries(_color_map) as [category, color], i}
+					<!-- TODO: fix -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						on:mouseover={() => handle_mouseover(category)}
+						on:focus={() => handle_mouseover(category)}
+						on:mouseout={() => handle_mouseout()}
+						on:blur={() => handle_mouseout()}
+						class="category-label"
+						style={"background-color:" + color.secondary}
+					>
+						{category}
+					</div>
+				{/each}
+			</div>
+		{/if}
+		<div class="textfield">
+			{#each value as v, i}
+				{#each splitTextByNewline(v.token) as line, j}
+					{#if line.trim() !== ""}
+						<!-- TODO: fix -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y-click-events-have-key-events-->
+						<span
+							class="textspan"
+							style:background-color={v.class_or_confidence === null ||
+							(active && active !== v.class_or_confidence)
+								? ""
+								: _color_map[v.class_or_confidence].secondary}
+							class:no-cat={v.class_or_confidence === null ||
+								(active && active !== v.class_or_confidence)}
+							class:hl={v.class_or_confidence !== null}
+							class:selectable
+							on:click={() => {
+								dispatch("select", {
+									index: i,
+									value: [v.token, v.class_or_confidence]
+								});
+							}}
+						>
+							<span
+								class:no-label={v.class_or_confidence === null ||
+									!_color_map[v.class_or_confidence]}
+								class="text">{line}</span
+							>
+							{#if !show_legend && v.class_or_confidence !== null}
+								&nbsp;
+								<span
+									class="label"
+									style:background-color={v.class_or_confidence === null ||
+									(active && active !== v.class_or_confidence)
+										? ""
+										: _color_map[v.class_or_confidence].primary}
+								>
+									{v.class_or_confidence}
+								</span>
+							{/if}
+						</span>
+					{/if}
+					{#if j < splitTextByNewline(v.token).length - 1}
+						<br />
+					{/if}
+				{/each}
+			{/each}
+		</div>
+	{:else}
+		{#if show_legend}
+			<div class="color-legend" data-testid="highlighted-text:color-legend">
+				<span>-1</span>
+				<span>0</span>
+				<span>+1</span>
+			</div>
+		{/if}
+		<div class="textfield" data-testid="highlighted-text:textfield">
+			{#each value as v}
+				{@const score =
+					typeof v.class_or_confidence === "string"
+						? parseInt(v.class_or_confidence)
+						: v.class_or_confidence}
+				<span
+					class="textspan score-text"
+					style={"background-color: rgba(" +
+						(score && score < 0
+							? "128, 90, 213," + -score
+							: "239, 68, 60," + score) +
+						")"}
+				>
+					<span class="text">{v.token}</span>
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		padding: var(--block-padding);
+	}
+	.hl + .hl {
+		margin-left: var(--size-1);
+	}
+
+	.textspan:last-child > .label {
+		margin-right: 0;
+	}
+
+	.category-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-sm);
+		color: black;
+	}
+
+	.category-label {
+		cursor: pointer;
+		border-radius: var(--radius-xs);
+		padding-right: var(--size-2);
+		padding-left: var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.color-legend {
+		display: flex;
+		justify-content: space-between;
+		border-radius: var(--radius-xs);
+		background: linear-gradient(
+			to right,
+			var(--color-purple),
+			rgba(255, 255, 255, 0),
+			var(--color-red)
+		);
+		padding: var(--size-1) var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.textfield {
+		box-sizing: border-box;
+		border-radius: var(--radius-xs);
+		background: var(--background-fill-primary);
+		background-color: transparent;
+		max-width: var(--size-full);
+		line-height: var(--scale-4);
+		word-break: break-all;
+	}
+
+	.textspan {
+		transition: 150ms;
+		border-radius: var(--radius-xs);
+		padding-top: 2.5px;
+		padding-right: var(--size-1);
+		padding-bottom: 3.5px;
+		padding-left: var(--size-1);
+		color: black;
+	}
+
+	.label {
+		transition: 150ms;
+		margin-top: 1px;
+		border-radius: var(--radius-xs);
+		padding: 1px 5px;
+		color: var(--body-text-color);
+		color: white;
+		font-weight: var(--weight-bold);
+		font-size: var(--text-sm);
+		text-transform: uppercase;
+	}
+
+	.text {
+		color: black;
+		white-space: pre-wrap;
+	}
+
+	.score-text .text {
+		color: var(--body-text-color);
+	}
+
+	.score-text {
+		margin-right: var(--size-1);
+		padding: var(--size-1);
+	}
+
+	.no-cat {
+		color: var(--body-text-color);
+	}
+
+	.no-label {
+		color: var(--body-text-color);
+	}
+
+	.selectable {
+		cursor: pointer;
+	}
+</style>

src/frontend/shared/utils.ts

@@ -0,0 +1,77 @@
+import { colors } from "@gradio/theme";
+
+export function name_to_rgba(
+	name: string,
+	a: number,
+	ctx: CanvasRenderingContext2D | null
+): string {
+	if (!ctx) {
+		var canvas = document.createElement("canvas");
+		ctx = canvas.getContext("2d")!;
+	}
+	ctx.fillStyle = name;
+	ctx.fillRect(0, 0, 1, 1);
+	const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+	ctx.clearRect(0, 0, 1, 1);
+	return `rgba(${r}, ${g}, ${b}, ${255 / a})`;
+}
+
+export function correct_color_map(
+	color_map: Record<string, string>,
+	_color_map: Record<string, { primary: string; secondary: string }>,
+	browser: any,
+	ctx: CanvasRenderingContext2D | null
+): void {
+	for (const col in color_map) {
+		const _c = color_map[col].trim();
+
+		if (_c in colors) {
+			_color_map[col] = colors[_c as keyof typeof colors];
+		} else {
+			_color_map[col] = {
+				primary: browser
+					? name_to_rgba(color_map[col], 1, ctx)
+					: color_map[col],
+				secondary: browser
+					? name_to_rgba(color_map[col], 0.5, ctx)
+					: color_map[col]
+			};
+		}
+	}
+}
+
+export function merge_elements(
+	value: { token: string; class_or_confidence: string | number | null }[],
+	mergeMode: "empty" | "equal"
+): { token: string; class_or_confidence: string | number | null }[] {
+	let result: typeof value = [];
+	let tempStr: string | null = null;
+	let tempVal: string | number | null = null;
+
+	for (const val of value) {
+		if (
+			(mergeMode === "empty" && val.class_or_confidence === null) ||
+			(mergeMode === "equal" && tempVal === val.class_or_confidence)
+		) {
+			tempStr = tempStr ? tempStr + val.token : val.token;
+		} else {
+			if (tempStr !== null) {
+				result.push({
+					token: tempStr,
+					class_or_confidence: tempVal
+				});
+			}
+			tempStr = val.token;
+			tempVal = val.class_or_confidence;
+		}
+	}
+
+	if (tempStr !== null) {
+		result.push({
+			token: tempStr,
+			class_or_confidence: tempVal
+		});
+	}
+
+	return result;
+}

src/pyproject.toml

@@ -0,0 +1,42 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_highlightedtextlabeldefault"
+version = "0.0.1"
+description = "Modify the default label when selecting a word in the interactive HighlightedText component."
+readme = "README.md"
+license = "MIT"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = ["gradio-custom-component", "gradio-template-HighlightedText"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'License :: OSI Approved :: Apache Software License',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_highlightedtextlabeldefault/templates", "*.pyi", "backend/gradio_highlightedtextlabeldefault/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_highlightedtextlabeldefault"]