Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

README.md

@@ -1,12 +1,254 @@
----
-title: Gradio Taggrouphelper
-emoji: 😻
-colorFrom: pink
-colorTo: red
-sdk: gradio
-sdk_version: 5.37.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+tags: [gradio-custom-component, ]
+title: gradio_taggrouphelper
+short_description: A fast prompt generator based on tagged words
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_taggrouphelper`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+A fast text generator based on tagged words
+
+## Installation
+
+```bash
+pip install gradio_taggrouphelper
+```
+
+## Usage
+
+```python
+#
+# demo/app.py
+#
+import gradio as gr
+from gradio_taggrouphelper import TagGroupHelper 
+
+# Example data structure for the tags and groups
+TAG_DATA = {
+    "Quality": [
+        "best quality", "masterpiece", "high resolution", "4k", "8k", 
+        "sharp focus", "detailed", "photorealistic"
+    ],
+    "Lighting": [
+        "cinematic lighting", "volumetric lighting", "god rays", 
+        "golden hour", "studio lighting", "dramatic lighting"
+    ],
+    "Style": [
+        "anime style", "oil painting", "concept art", "fantasy", 
+        "steampunk", "vaporwave", "line art"
+    ],
+    "Negative Prompts": [
+        "blurry", "noisy", "low resolution", "low quality", "watermark",
+        "text", "bad anatomy", "extra limbs", "disfigured"
+    ]
+}
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Prompt Tag Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+
+    with gr.Row():
+        with gr.Column(scale=2): # Give more space to the textboxes
+            # Create the target Textbox and give it a unique `elem_id`.
+            positive_prompt_box = gr.Textbox(
+                label="Positive Prompt",
+                placeholder="Click tags from 'Prompt Keywords' to add them here...",
+                lines=5,
+                elem_id="positive-prompt-textbox" # This ID must be unique
+            )
+            negative_prompt_box = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="Click tags from 'Negative Keywords' to add them here...",
+                lines=5,
+                elem_id="negative-prompt-textbox" # This ID must be unique
+            )
+
+        with gr.Column(scale=1): # Give less space to the helpers
+            # Create an instance of the TagGroupHelper for the Positive Prompt box.
+            TagGroupHelper(
+                label="Positive Prompt Keywords",
+                value={k: v for k, v in TAG_DATA.items() if "Negative" not in k},
+                target_textbox_id="positive-prompt-textbox"
+            )
+            
+            # Create another instance for the Negative Prompt box.
+            TagGroupHelper(
+                label="Negative Prompt Keywords",
+                value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
+                target_textbox_id="negative-prompt-textbox",
+                min_width=150
+            )
+
+if __name__ == '__main__':
+    demo.launch()
+```
+
+## `TagGroupHelper`
+
+### 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
+typing.Optional[typing.Dict[str, typing.List[str]]][
+    typing.Dict[str, typing.List[str]][
+        str, typing.List[str][str]
+    ],
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A dictionary where keys are group names and values are lists of tags.</td>
+</tr>
+
+<tr>
+<td align="left"><code>target_textbox_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The `elem_id` of the `gr.Textbox` component to target. Required.</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, displayed above the groups.</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, the 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.</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">The relative size of the component compared to others in a `gr.Row` or `gr.Column`.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The minimum-width of the component in pixels.</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 False, the component will not be wrapped in a container.</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 to assign as CSS classes to the component.</td>
+</tr>
+</tbody></table>
+
+
+
+
+### 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.
+
+
+
+ ```python
+ def predict(
+     value: Any
+ ) -> typing.Optional[typing.Dict[str, typing.List[str]]][
+    typing.Dict[str, typing.List[str]][
+        str, typing.List[str][str]
+    ],
+    None,
+]:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,64 @@
+#
+# demo/app.py
+#
+import gradio as gr
+from gradio_taggrouphelper import TagGroupHelper 
+
+# Example data structure for the tags and groups
+TAG_DATA = {
+    "Quality": [
+        "best quality", "masterpiece", "high resolution", "4k", "8k", 
+        "sharp focus", "detailed", "photorealistic"
+    ],
+    "Lighting": [
+        "cinematic lighting", "volumetric lighting", "god rays", 
+        "golden hour", "studio lighting", "dramatic lighting"
+    ],
+    "Style": [
+        "anime style", "oil painting", "concept art", "fantasy", 
+        "steampunk", "vaporwave", "line art"
+    ],
+    "Negative Prompts": [
+        "blurry", "noisy", "low resolution", "low quality", "watermark",
+        "text", "bad anatomy", "extra limbs", "disfigured"
+    ]
+}
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Prompt Tag Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+
+    with gr.Row():
+        with gr.Column(scale=2): # Give more space to the textboxes
+            # Create the target Textbox and give it a unique `elem_id`.
+            positive_prompt_box = gr.Textbox(
+                label="Positive Prompt",
+                placeholder="Click tags from 'Prompt Keywords' to add them here...",
+                lines=5,
+                elem_id="positive-prompt-textbox" # This ID must be unique
+            )
+            negative_prompt_box = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="Click tags from 'Negative Keywords' to add them here...",
+                lines=5,
+                elem_id="negative-prompt-textbox" # This ID must be unique
+            )
+
+        with gr.Column(scale=1): # Give less space to the helpers
+            # Create an instance of the TagGroupHelper for the Positive Prompt box.
+            TagGroupHelper(
+                label="Positive Prompt Keywords",
+                value={k: v for k, v in TAG_DATA.items() if "Negative" not in k},
+                target_textbox_id="positive-prompt-textbox"
+            )
+            
+            # Create another instance for the Negative Prompt box.
+            TagGroupHelper(
+                label="Negative Prompt Keywords",
+                value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
+                target_textbox_id="negative-prompt-textbox",
+                min_width=150
+            )
+
+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_taggrouphelper

space.py

@@ -0,0 +1,185 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'TagGroupHelper': {'description': "A custom component that displays groups of clickable tags to help build prompts.\nWhen a tag is clicked, it's appended to a target Textbox component.\nThis component does not have a submittable value itself.", 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.List[str]]][\n    typing.Dict[str, typing.List[str]][\n        str, typing.List[str][str]\n    ],\n    None,\n]', 'default': 'None', 'description': 'A dictionary where keys are group names and values are lists of tags.'}, 'target_textbox_id': {'type': 'str | None', 'default': 'None', 'description': 'The `elem_id` of the `gr.Textbox` component to target. Required.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component, displayed above the groups.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the 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.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component compared to others in a `gr.Row` or `gr.Column`.'}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum-width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will not be wrapped in a container.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings to assign as CSS classes to the component.'}}, 'postprocess': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.List[str]]][\n    typing.Dict[str, typing.List[str]][\n        str, typing.List[str][str]\n    ],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'Any', 'description': None}, 'value': None}}, 'events': {}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'TagGroupHelper': []}}}
+
+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_taggrouphelper`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+A fast text generator based on tagged words
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_taggrouphelper
+```
+
+## Usage
+
+```python
+#
+# demo/app.py
+#
+import gradio as gr
+from gradio_taggrouphelper import TagGroupHelper 
+
+# Example data structure for the tags and groups
+TAG_DATA = {
+    "Quality": [
+        "best quality", "masterpiece", "high resolution", "4k", "8k", 
+        "sharp focus", "detailed", "photorealistic"
+    ],
+    "Lighting": [
+        "cinematic lighting", "volumetric lighting", "god rays", 
+        "golden hour", "studio lighting", "dramatic lighting"
+    ],
+    "Style": [
+        "anime style", "oil painting", "concept art", "fantasy", 
+        "steampunk", "vaporwave", "line art"
+    ],
+    "Negative Prompts": [
+        "blurry", "noisy", "low resolution", "low quality", "watermark",
+        "text", "bad anatomy", "extra limbs", "disfigured"
+    ]
+}
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Prompt Tag Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+
+    with gr.Row():
+        with gr.Column(scale=2): # Give more space to the textboxes
+            # Create the target Textbox and give it a unique `elem_id`.
+            positive_prompt_box = gr.Textbox(
+                label="Positive Prompt",
+                placeholder="Click tags from 'Prompt Keywords' to add them here...",
+                lines=5,
+                elem_id="positive-prompt-textbox" # This ID must be unique
+            )
+            negative_prompt_box = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="Click tags from 'Negative Keywords' to add them here...",
+                lines=5,
+                elem_id="negative-prompt-textbox" # This ID must be unique
+            )
+
+        with gr.Column(scale=1): # Give less space to the helpers
+            # Create an instance of the TagGroupHelper for the Positive Prompt box.
+            TagGroupHelper(
+                label="Positive Prompt Keywords",
+                value={k: v for k, v in TAG_DATA.items() if "Negative" not in k},
+                target_textbox_id="positive-prompt-textbox"
+            )
+            
+            # Create another instance for the Negative Prompt box.
+            TagGroupHelper(
+                label="Negative Prompt Keywords",
+                value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
+                target_textbox_id="negative-prompt-textbox",
+                min_width=150
+            )
+
+if __name__ == '__main__':
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `TagGroupHelper`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["TagGroupHelper"]["members"]["__init__"], linkify=[])
+
+
+
+
+    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.
+
+
+
+ ```python
+def predict(
+    value: Any
+) -> typing.Optional[typing.Dict[str, typing.List[str]]][
+    typing.Dict[str, typing.List[str]][
+        str, typing.List[str][str]
+    ],
+    None,
+]:
+    return value
+```
+""", elem_classes=["md-custom", "TagGroupHelper-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          TagGroupHelper: [], };
+    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,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

src/README.md

@@ -0,0 +1,254 @@
+---
+tags: [gradio-custom-component, ]
+title: gradio_taggrouphelper
+short_description: A fast prompt generator based on tagged words
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_taggrouphelper`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+A fast text generator based on tagged words
+
+## Installation
+
+```bash
+pip install gradio_taggrouphelper
+```
+
+## Usage
+
+```python
+#
+# demo/app.py
+#
+import gradio as gr
+from gradio_taggrouphelper import TagGroupHelper 
+
+# Example data structure for the tags and groups
+TAG_DATA = {
+    "Quality": [
+        "best quality", "masterpiece", "high resolution", "4k", "8k", 
+        "sharp focus", "detailed", "photorealistic"
+    ],
+    "Lighting": [
+        "cinematic lighting", "volumetric lighting", "god rays", 
+        "golden hour", "studio lighting", "dramatic lighting"
+    ],
+    "Style": [
+        "anime style", "oil painting", "concept art", "fantasy", 
+        "steampunk", "vaporwave", "line art"
+    ],
+    "Negative Prompts": [
+        "blurry", "noisy", "low resolution", "low quality", "watermark",
+        "text", "bad anatomy", "extra limbs", "disfigured"
+    ]
+}
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Prompt Tag Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+
+    with gr.Row():
+        with gr.Column(scale=2): # Give more space to the textboxes
+            # Create the target Textbox and give it a unique `elem_id`.
+            positive_prompt_box = gr.Textbox(
+                label="Positive Prompt",
+                placeholder="Click tags from 'Prompt Keywords' to add them here...",
+                lines=5,
+                elem_id="positive-prompt-textbox" # This ID must be unique
+            )
+            negative_prompt_box = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="Click tags from 'Negative Keywords' to add them here...",
+                lines=5,
+                elem_id="negative-prompt-textbox" # This ID must be unique
+            )
+
+        with gr.Column(scale=1): # Give less space to the helpers
+            # Create an instance of the TagGroupHelper for the Positive Prompt box.
+            TagGroupHelper(
+                label="Positive Prompt Keywords",
+                value={k: v for k, v in TAG_DATA.items() if "Negative" not in k},
+                target_textbox_id="positive-prompt-textbox"
+            )
+            
+            # Create another instance for the Negative Prompt box.
+            TagGroupHelper(
+                label="Negative Prompt Keywords",
+                value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
+                target_textbox_id="negative-prompt-textbox",
+                min_width=150
+            )
+
+if __name__ == '__main__':
+    demo.launch()
+```
+
+## `TagGroupHelper`
+
+### 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
+typing.Optional[typing.Dict[str, typing.List[str]]][
+    typing.Dict[str, typing.List[str]][
+        str, typing.List[str][str]
+    ],
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A dictionary where keys are group names and values are lists of tags.</td>
+</tr>
+
+<tr>
+<td align="left"><code>target_textbox_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The `elem_id` of the `gr.Textbox` component to target. Required.</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, displayed above the groups.</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, the 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.</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">The relative size of the component compared to others in a `gr.Row` or `gr.Column`.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The minimum-width of the component in pixels.</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 False, the component will not be wrapped in a container.</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 to assign as CSS classes to the component.</td>
+</tr>
+</tbody></table>
+
+
+
+
+### 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.
+
+
+
+ ```python
+ def predict(
+     value: Any
+ ) -> typing.Optional[typing.Dict[str, typing.List[str]]][
+    typing.Dict[str, typing.List[str]][
+        str, typing.List[str][str]
+    ],
+    None,
+]:
+     return value
+ ```
+ 

src/backend/gradio_taggrouphelper/__init__.py

@@ -0,0 +1,4 @@
+
+from .taggrouphelper import TagGroupHelper
+
+__all__ = ['TagGroupHelper']

src/backend/gradio_taggrouphelper/taggrouphelper.py

@@ -0,0 +1,80 @@
+from __future__ import annotations
+from gradio.components.base import Component
+from typing import Any, Dict, List
+
+class TagGroupHelper(Component):
+    """
+    A custom component that displays groups of clickable tags to help build prompts.
+    When a tag is clicked, it's appended to a target Textbox component.
+    This component does not have a submittable value itself.
+    """
+    EVENTS = []
+
+    def __init__(
+        self,
+        value: Dict[str, List[str]] | None = None,
+        *,
+        target_textbox_id: str | None = None,
+        label: str | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        scale: int | None = None,
+        min_width: int | None = None,
+        container: bool = True,
+        elem_classes: list[str] | str | None = None,
+        
+        **kwargs,
+    ):
+        """
+        Initializes the TagGroupHelper component.
+
+        Parameters:
+            value: A dictionary where keys are group names and values are lists of tags.
+            target_textbox_id: The `elem_id` of the `gr.Textbox` component to target. Required.
+            label: The label for this component, displayed above the groups.
+            visible: If False, the component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM.
+            scale: The relative size of the component compared to others in a `gr.Row` or `gr.Column`.
+            min_width: The minimum-width of the component in pixels.
+            container: If False, the component will not be wrapped in a container.
+            elem_classes: An optional list of strings to assign as CSS classes to the component.
+        """
+        if target_textbox_id is None:
+            raise ValueError("The 'target_textbox_id' parameter is required for the TagGroupHelper component.")
+
+        self.target_textbox_id = target_textbox_id
+        
+        # Call the parent constructor with all the arguments it understands.
+        super().__init__(
+            label=label,
+            visible=visible,
+            elem_id=elem_id,
+            value=value,
+            scale=scale,
+            min_width=min_width,
+            container=container,
+            elem_classes=elem_classes,
+            **kwargs,
+        )
+   
+    def preprocess(self, payload: Any) -> Any:
+        """This component does not process input from the user, so this is a no-op."""
+        return None
+
+    def postprocess(self, value: Dict[str, List[str]] | None) -> Dict[str, List[str]] | None:
+        """Passes the tag group dictionary (received as 'value') to the frontend."""
+        if value is None:
+            return {}
+        return value
+
+    def api_info(self) -> Dict[str, Any]:
+        """The API info for the component."""
+        return {"type": "object", "description": "A dictionary of string-to-string-list mappings for tag groups."}
+
+    def example_payload(self) -> Any:
+        """Returns an example of the data that this component expects as its value."""
+        return {
+            "Quality": ["best quality", "high resolution"],
+            "Style": ["anime", "photorealistic"],
+            "Negative": ["blurry", "noisy"]
+        }

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

@@ -0,0 +1,103 @@
+const {
+  SvelteComponent: f,
+  append_hydration: r,
+  attr: u,
+  children: o,
+  claim_element: h,
+  claim_text: g,
+  detach: d,
+  element: v,
+  init: m,
+  insert_hydration: y,
+  noop: _,
+  safe_not_equal: b,
+  set_data: w,
+  text: E,
+  toggle_class: s
+} = window.__gradio__svelte__internal;
+function q(a) {
+  let e, n;
+  return {
+    c() {
+      e = v("div"), n = E(
+        /*value*/
+        a[0]
+      ), this.h();
+    },
+    l(t) {
+      e = h(t, "DIV", { class: !0 });
+      var l = o(e);
+      n = g(
+        l,
+        /*value*/
+        a[0]
+      ), l.forEach(d), this.h();
+    },
+    h() {
+      u(e, "class", "svelte-1gecy8w"), s(
+        e,
+        "table",
+        /*type*/
+        a[1] === "table"
+      ), s(
+        e,
+        "gallery",
+        /*type*/
+        a[1] === "gallery"
+      ), s(
+        e,
+        "selected",
+        /*selected*/
+        a[2]
+      );
+    },
+    m(t, l) {
+      y(t, e, l), r(e, n);
+    },
+    p(t, [l]) {
+      l & /*value*/
+      1 && w(
+        n,
+        /*value*/
+        t[0]
+      ), l & /*type*/
+      2 && s(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), l & /*type*/
+      2 && s(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), l & /*selected*/
+      4 && s(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    i: _,
+    o: _,
+    d(t) {
+      t && d(e);
+    }
+  };
+}
+function C(a, e, n) {
+  let { value: t } = e, { type: l } = e, { selected: c = !1 } = e;
+  return a.$$set = (i) => {
+    "value" in i && n(0, t = i.value), "type" in i && n(1, l = i.type), "selected" in i && n(2, c = i.selected);
+  }, [t, l, c];
+}
+class D extends f {
+  constructor(e) {
+    super(), m(this, e, C, q, b, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  D as default
+};

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

@@ -0,0 +1 @@
+.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}

src/demo/app.py

@@ -0,0 +1,64 @@
+#
+# demo/app.py
+#
+import gradio as gr
+from gradio_taggrouphelper import TagGroupHelper 
+
+# Example data structure for the tags and groups
+TAG_DATA = {
+    "Quality": [
+        "best quality", "masterpiece", "high resolution", "4k", "8k", 
+        "sharp focus", "detailed", "photorealistic"
+    ],
+    "Lighting": [
+        "cinematic lighting", "volumetric lighting", "god rays", 
+        "golden hour", "studio lighting", "dramatic lighting"
+    ],
+    "Style": [
+        "anime style", "oil painting", "concept art", "fantasy", 
+        "steampunk", "vaporwave", "line art"
+    ],
+    "Negative Prompts": [
+        "blurry", "noisy", "low resolution", "low quality", "watermark",
+        "text", "bad anatomy", "extra limbs", "disfigured"
+    ]
+}
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Prompt Tag Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+
+    with gr.Row():
+        with gr.Column(scale=2): # Give more space to the textboxes
+            # Create the target Textbox and give it a unique `elem_id`.
+            positive_prompt_box = gr.Textbox(
+                label="Positive Prompt",
+                placeholder="Click tags from 'Prompt Keywords' to add them here...",
+                lines=5,
+                elem_id="positive-prompt-textbox" # This ID must be unique
+            )
+            negative_prompt_box = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="Click tags from 'Negative Keywords' to add them here...",
+                lines=5,
+                elem_id="negative-prompt-textbox" # This ID must be unique
+            )
+
+        with gr.Column(scale=1): # Give less space to the helpers
+            # Create an instance of the TagGroupHelper for the Positive Prompt box.
+            TagGroupHelper(
+                label="Positive Prompt Keywords",
+                value={k: v for k, v in TAG_DATA.items() if "Negative" not in k},
+                target_textbox_id="positive-prompt-textbox"
+            )
+            
+            # Create another instance for the Negative Prompt box.
+            TagGroupHelper(
+                label="Negative Prompt Keywords",
+                value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
+                target_textbox_id="negative-prompt-textbox",
+                min_width=150
+            )
+
+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/requirements.txt

@@ -0,0 +1 @@
+gradio_taggrouphelper

src/demo/space.py

@@ -0,0 +1,185 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'TagGroupHelper': {'description': "A custom component that displays groups of clickable tags to help build prompts.\nWhen a tag is clicked, it's appended to a target Textbox component.\nThis component does not have a submittable value itself.", 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.List[str]]][\n    typing.Dict[str, typing.List[str]][\n        str, typing.List[str][str]\n    ],\n    None,\n]', 'default': 'None', 'description': 'A dictionary where keys are group names and values are lists of tags.'}, 'target_textbox_id': {'type': 'str | None', 'default': 'None', 'description': 'The `elem_id` of the `gr.Textbox` component to target. Required.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component, displayed above the groups.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the 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.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component compared to others in a `gr.Row` or `gr.Column`.'}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum-width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will not be wrapped in a container.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings to assign as CSS classes to the component.'}}, 'postprocess': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.List[str]]][\n    typing.Dict[str, typing.List[str]][\n        str, typing.List[str][str]\n    ],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'Any', 'description': None}, 'value': None}}, 'events': {}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'TagGroupHelper': []}}}
+
+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_taggrouphelper`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+A fast text generator based on tagged words
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_taggrouphelper
+```
+
+## Usage
+
+```python
+#
+# demo/app.py
+#
+import gradio as gr
+from gradio_taggrouphelper import TagGroupHelper 
+
+# Example data structure for the tags and groups
+TAG_DATA = {
+    "Quality": [
+        "best quality", "masterpiece", "high resolution", "4k", "8k", 
+        "sharp focus", "detailed", "photorealistic"
+    ],
+    "Lighting": [
+        "cinematic lighting", "volumetric lighting", "god rays", 
+        "golden hour", "studio lighting", "dramatic lighting"
+    ],
+    "Style": [
+        "anime style", "oil painting", "concept art", "fantasy", 
+        "steampunk", "vaporwave", "line art"
+    ],
+    "Negative Prompts": [
+        "blurry", "noisy", "low resolution", "low quality", "watermark",
+        "text", "bad anatomy", "extra limbs", "disfigured"
+    ]
+}
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Prompt Tag Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+
+    with gr.Row():
+        with gr.Column(scale=2): # Give more space to the textboxes
+            # Create the target Textbox and give it a unique `elem_id`.
+            positive_prompt_box = gr.Textbox(
+                label="Positive Prompt",
+                placeholder="Click tags from 'Prompt Keywords' to add them here...",
+                lines=5,
+                elem_id="positive-prompt-textbox" # This ID must be unique
+            )
+            negative_prompt_box = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="Click tags from 'Negative Keywords' to add them here...",
+                lines=5,
+                elem_id="negative-prompt-textbox" # This ID must be unique
+            )
+
+        with gr.Column(scale=1): # Give less space to the helpers
+            # Create an instance of the TagGroupHelper for the Positive Prompt box.
+            TagGroupHelper(
+                label="Positive Prompt Keywords",
+                value={k: v for k, v in TAG_DATA.items() if "Negative" not in k},
+                target_textbox_id="positive-prompt-textbox"
+            )
+            
+            # Create another instance for the Negative Prompt box.
+            TagGroupHelper(
+                label="Negative Prompt Keywords",
+                value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
+                target_textbox_id="negative-prompt-textbox",
+                min_width=150
+            )
+
+if __name__ == '__main__':
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `TagGroupHelper`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["TagGroupHelper"]["members"]["__init__"], linkify=[])
+
+
+
+
+    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.
+
+
+
+ ```python
+def predict(
+    value: Any
+) -> typing.Optional[typing.Dict[str, typing.List[str]]][
+    typing.Dict[str, typing.List[str]][
+        str, typing.List[str][str]
+    ],
+    None,
+]:
+    return value
+```
+""", elem_classes=["md-custom", "TagGroupHelper-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          TagGroupHelper: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">	
+	import type { Gradio } from "@gradio/utils";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let value: Record<string, string[]> = {};		
+	export let target_textbox_id: string;
+
+	export let label: string;
+	export let visible: boolean = true;
+	export let elem_id: string = "";
+	export let elem_classes: string[] = [];
+	export let container: boolean = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let gradio: Gradio<{ clear_status: LoadingStatus; }>;
+
+	let groupVisibility: Record<string, boolean> = {};
+
+	const tagColors = ["#d8b4fe", "#bbf7d0", "#fde047", "#fca5a5", "#93c5fd"];
+
+	$: {
+		if (value) {
+			for (const groupName in value) {
+				if (groupVisibility[groupName] === undefined) {
+					groupVisibility[groupName] = true;
+				}
+			}
+		}
+	}
+
+	function toggleGroup(groupName: string) {
+		groupVisibility[groupName] = !groupVisibility[groupName];
+	}
+
+	function addTagToPrompt(tag: string) {
+		if (!target_textbox_id) {
+			console.error("TagGroupHelper: `target_textbox_id` prop is not set.");
+			return;
+		}
+
+		const targetTextarea = document.querySelector<HTMLTextAreaElement>(
+			`#${target_textbox_id} textarea`
+		);
+
+		if (!targetTextarea) {
+			console.error(`TagGroupHelper: Could not find textarea with id: #${target_textbox_id} textarea`);
+			return;
+		}
+		
+		let currentValue = targetTextarea.value.trim();
+
+		if (currentValue === "" || currentValue.endsWith(",")) {
+			// If the field is empty or already ends with a comma,
+			// add the tag. If it ends with a comma, add a space first.
+			targetTextarea.value = currentValue.endsWith(",")
+				? `${currentValue} ${tag}`
+				: tag;
+		} else {
+			// If the field has text, append a comma, a space, and the new tag.
+			targetTextarea.value = `${currentValue}, ${tag}`;
+		}
+
+		targetTextarea.dispatchEvent(new Event('input', { bubbles: true }));
+	}
+</script>
+
+<!-- The main structure uses the standard Gradio <Block> component. -->
+<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
+	{#if loading_status}
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+	{/if}
+
+	{#if label}
+		<span class="label">{label}</span>
+	{/if}
+	<div class="container">
+		<!-- We iterate over the 'value' prop, which contains our tag groups -->
+		{#if value}
+			{#each Object.entries(value) as [groupName, tags]}
+				<div class="group">
+					<button class="group-header" on:click={() => toggleGroup(groupName)}>
+						<span class="group-title">{groupName}</span>
+						<span class="group-toggle-icon">{groupVisibility[groupName] ? '−' : '+'}</span>
+					</button>
+
+					{#if groupVisibility[groupName]}
+						<div class="tags-container">
+							<!-- Apply background color dynamically to each tag -->
+							{#each tags as tag, i}
+								<button 
+									class="tag-button"
+									style="background-color: {tagColors[i % tagColors.length]};"
+									on:click={() => addTagToPrompt(tag)}
+								>
+									{tag}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+</Block>
+
+<style>	
+	.container {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		padding: 8px;
+		background: var(--background-fill-secondary);
+	}
+	.label {
+		display: block;
+		margin-bottom: 8px;
+		font-size: 14px;
+		color: var(--body-text-color-subdued);
+		font-weight: 600;
+	}
+	.group {
+		margin-bottom: 8px;
+	}
+	.group:last-child {
+		margin-bottom: 0;
+	}
+	
+	.group-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: 8px 12px;				
+		background-color: var(--neutral-100, #f3f4f6); 				
+		color: var(--neutral-700, #374151);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		text-align: left;
+		cursor: pointer;
+		font-size: 1rem; 
+		transition: background-color 0.2s;
+	}
+	.group-header:hover {		
+		background-color: var(--neutral-200, #e5e7eb);
+	}
+
+	.group-title {
+		font-weight: 600;
+	}
+	.group-toggle-icon {
+		font-size: 1.2rem;
+		font-weight: bold;
+	}
+	.tags-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		padding: 12px 8px;
+	}
+	.tag-button {
+		padding: 4px 10px;
+		border: 1px solid #d1d5db;
+		border-radius: 12px;
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: filter 0.2s;
+		color: #1f2937;
+	}
+	.tag-button:hover {
+		filter: brightness(0.95);
+	}
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "gradio_taggrouphelper",
+  "version": "0.4.23",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.16.2",
+    "@gradio/statustracker": "0.10.13",
+    "@gradio/utils": "0.10.2",
+    "@zerodevx/svelte-json-view": "^1.0.7"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.2"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/fallback"
+  }
+}

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_taggrouphelper"
+version = "0.0.1"
+description = "A fast text generator based on tagged words"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "Eliseu Silva", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "gradio-template-Fallback"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  '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',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_taggrouphelper/templates", "*.pyi", "/\\backend\\gradio_taggrouphelper\\templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_taggrouphelper"]