Upload folder using huggingface_hub

.gitignore

@@ -9,4 +9,5 @@ __tmp/*
 .mypycache
 .ruff_cache
 node_modules
-backend/**/templates/
+backend/**/templates/
+README_TEMPLATE.md

README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_taggrouphelper`
-<a href="https://pypi.org/project/gradio_taggrouphelper/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_taggrouphelper"></a>  
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.3%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_taggrouphelper"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a> <p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>Component GitHub Code</a></span></p>
 
 A fast text generator based on tagged words
 
@@ -49,10 +49,65 @@ TAG_DATA = {
     ]
 }
 
-with gr.Blocks() as demo:
+css=""" 
+body {    
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {    
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px 340px;    
+}
+.gradio-container h1 {    
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 100% !important;
+    max-width: unset !important;
+}
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
+#tips_row{    
+    padding-left: 20px;
+}
+.sidebar {    
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.sidebar .toggle-button {    
+    background: linear-gradient(90deg, #34d399, #10b981) !important;
+    border: none;    
+    padding: 12px 18px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+.toggle-button:hover {
+    transform: scale(1.05);
+}
+.sidebar .sidebar-content {
+    padding-left: 10px !important;
+}
+.sidebar .sidebar-content .column .block div .prose {
+    text-align: center;
+}
+"""
+with gr.Blocks(theme=gr.themes.Ocean(), css=css) as demo:
     gr.Markdown("# Tag Group Helper Demo")
     gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
-
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
     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`.
@@ -68,14 +123,17 @@ with gr.Blocks() as demo:
                 lines=5,
                 elem_id="negative-prompt-textbox" # This ID must be unique
             )
-
-        with gr.Column(scale=1): # Give less space to the helpers
+        with gr.Sidebar(position="right"):           
             # 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",
-                separator=" "
+                separator=", ",
+                interactive=True,
+                width=250,
+                font_size_scale=90
+                
             )
             
             # Create another instance for the Negative Prompt box.
@@ -83,8 +141,10 @@ with gr.Blocks() as demo:
                 label="Negative Prompt Keywords",
                 value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
                 target_textbox_id="negative-prompt-textbox",
-                min_width=150,
-                separator=", "
+                separator=", ",
+                interactive=True,
+                width=250,                
+                font_size_scale=90
             )
 
 if __name__ == '__main__':
@@ -124,29 +184,29 @@ typing.Optional[typing.Dict[str, typing.List[str]]][
 </tr>
 
 <tr>
-<td align="left"><code>target_textbox_id</code></td>
+<td align="left"><code>height</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-str | None
+int | None
 ```
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The `elem_id` of the `gr.Textbox` component to target. Required.</td>
+<td align="left">The height of the component container in pixels.</td>
 </tr>
 
 <tr>
-<td align="left"><code>separator</code></td>
+<td align="left"><code>width</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-str
+int | None
 ```
 
 </td>
-<td align="left"><code>", "</code></td>
-<td align="left">The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the component container in pixels.</td>
 </tr>
 
 <tr>
@@ -163,29 +223,55 @@ str | None
 </tr>
 
 <tr>
-<td align="left"><code>visible</code></td>
+<td align="left"><code>font_size_scale</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-bool
+int
 ```
 
 </td>
-<td align="left"><code>True</code></td>
-<td align="left">If False, the component will be hidden.</td>
+<td align="left"><code>100</code></td>
+<td align="left">A percentage to scale the font size of group headers and tags. Defaults to 100.</td>
 </tr>
 
 <tr>
-<td align="left"><code>elem_id</code></td>
+<td align="left"><code>every</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-str | None
+float | 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>
+<td align="left">If `value` is a callable, run the function 'every' seconds while the client connection is open.</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 False, the label is not displayed.</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>
@@ -206,16 +292,55 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">The minimum width of the component in pixels.</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">The minimum-width of the component in pixels.</td>
+<td align="left">if True, will be rendered as an selectable component; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
 </tr>
 
 <tr>
-<td align="left"><code>container</code></td>
+<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>separator</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>", "</code></td>
+<td align="left">The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
@@ -224,7 +349,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">If False, the component will not be wrapped in a container.</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>

app.py

@@ -1,67 +1,126 @@
-#
-# 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("# Tag Group Helper Demo")
-    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
-    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
-
-    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",
-                separator=", "
-            )
-            
-            # 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,
-                separator=", "
-            )
-
-if __name__ == '__main__':
+#
+# 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"
+    ]
+}
+
+css=""" 
+body {    
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {    
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px 340px;    
+}
+.gradio-container h1 {    
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 100% !important;
+    max-width: unset !important;
+}
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
+#tips_row{    
+    padding-left: 20px;
+}
+.sidebar {    
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.sidebar .toggle-button {    
+    background: linear-gradient(90deg, #34d399, #10b981) !important;
+    border: none;    
+    padding: 12px 18px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+.toggle-button:hover {
+    transform: scale(1.05);
+}
+.sidebar .sidebar-content {
+    padding-left: 10px !important;
+}
+.sidebar .sidebar-content .column .block div .prose {
+    text-align: center;
+}
+"""
+with gr.Blocks(theme=gr.themes.Ocean(), css=css) as demo:
+    gr.Markdown("# Tag Group Helper Demo")
+    gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
+    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.Sidebar(position="right"):           
+            # 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",
+                separator=", ",
+                interactive=True,
+                width=250,
+                font_size_scale=90
+                
+            )
+            
+            # 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",
+                separator=", ",
+                interactive=True,
+                width=250,                
+                font_size_scale=90
+            )
+
+if __name__ == '__main__':
     demo.launch()

space.py

@@ -3,7 +3,7 @@ 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.'}, 'separator': {'type': 'str', 'default': '", "', 'description': 'The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.'}, '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': []}}}
+_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.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component container in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component container in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component, displayed above the groups.'}, 'font_size_scale': {'type': 'int', 'default': '100', 'description': 'A percentage to scale the font size of group headers and tags. Defaults to 100.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' seconds while the client connection is open."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the label is not displayed.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will not be wrapped in a container.'}, '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', 'default': '160', 'description': 'The minimum width of the component in pixels.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an selectable component; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'target_textbox_id': {'type': 'str | None', 'default': 'None', 'description': 'The `elem_id` of the `gr.Textbox` component to target. Required.'}, 'separator': {'type': 'str', 'default': '", "', 'description': 'The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.'}, '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.'}, '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")
 
@@ -64,10 +64,65 @@ TAG_DATA = {
     ]
 }
 
-with gr.Blocks() as demo:
+css=\"\"\" 
+body {    
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {    
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px 340px;    
+}
+.gradio-container h1 {    
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 100% !important;
+    max-width: unset !important;
+}
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
+#tips_row{    
+    padding-left: 20px;
+}
+.sidebar {    
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.sidebar .toggle-button {    
+    background: linear-gradient(90deg, #34d399, #10b981) !important;
+    border: none;    
+    padding: 12px 18px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+.toggle-button:hover {
+    transform: scale(1.05);
+}
+.sidebar .sidebar-content {
+    padding-left: 10px !important;
+}
+.sidebar .sidebar-content .column .block div .prose {
+    text-align: center;
+}
+\"\"\"
+with gr.Blocks(theme=gr.themes.Ocean(), css=css) as demo:
     gr.Markdown("# Tag Group Helper Demo")
     gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
-
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
     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`.
@@ -83,14 +138,17 @@ with gr.Blocks() as demo:
                 lines=5,
                 elem_id="negative-prompt-textbox" # This ID must be unique
             )
-
-        with gr.Column(scale=1): # Give less space to the helpers
+        with gr.Sidebar(position="right"):           
             # 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",
-                separator=" "
+                separator=", ",
+                interactive=True,
+                width=250,
+                font_size_scale=90
+                
             )
             
             # Create another instance for the Negative Prompt box.
@@ -98,8 +156,10 @@ with gr.Blocks() as demo:
                 label="Negative Prompt Keywords",
                 value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
                 target_textbox_id="negative-prompt-textbox",
-                min_width=150,
-                separator=", "
+                separator=", ",
+                interactive=True,
+                width=250,                
+                font_size_scale=90
             )
 
 if __name__ == '__main__':

src/.gitignore

@@ -9,4 +9,5 @@ __tmp/*
 .mypycache
 .ruff_cache
 node_modules
-backend/**/templates/
+backend/**/templates/
+README_TEMPLATE.md

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_taggrouphelper`
-<a href="https://pypi.org/project/gradio_taggrouphelper/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_taggrouphelper"></a>  
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.3%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_taggrouphelper"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a> <p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>Component GitHub Code</a></span></p>
 
 A fast text generator based on tagged words
 
@@ -49,10 +49,65 @@ TAG_DATA = {
     ]
 }
 
-with gr.Blocks() as demo:
+css=""" 
+body {    
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {    
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px 340px;    
+}
+.gradio-container h1 {    
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 100% !important;
+    max-width: unset !important;
+}
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
+#tips_row{    
+    padding-left: 20px;
+}
+.sidebar {    
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.sidebar .toggle-button {    
+    background: linear-gradient(90deg, #34d399, #10b981) !important;
+    border: none;    
+    padding: 12px 18px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+.toggle-button:hover {
+    transform: scale(1.05);
+}
+.sidebar .sidebar-content {
+    padding-left: 10px !important;
+}
+.sidebar .sidebar-content .column .block div .prose {
+    text-align: center;
+}
+"""
+with gr.Blocks(theme=gr.themes.Ocean(), css=css) as demo:
     gr.Markdown("# Tag Group Helper Demo")
     gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
-
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
     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`.
@@ -68,14 +123,17 @@ with gr.Blocks() as demo:
                 lines=5,
                 elem_id="negative-prompt-textbox" # This ID must be unique
             )
-
-        with gr.Column(scale=1): # Give less space to the helpers
+        with gr.Sidebar(position="right"):           
             # 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",
-                separator=" "
+                separator=", ",
+                interactive=True,
+                width=250,
+                font_size_scale=90
+                
             )
             
             # Create another instance for the Negative Prompt box.
@@ -83,8 +141,10 @@ with gr.Blocks() as demo:
                 label="Negative Prompt Keywords",
                 value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
                 target_textbox_id="negative-prompt-textbox",
-                min_width=150,
-                separator=", "
+                separator=", ",
+                interactive=True,
+                width=250,                
+                font_size_scale=90
             )
 
 if __name__ == '__main__':
@@ -124,29 +184,29 @@ typing.Optional[typing.Dict[str, typing.List[str]]][
 </tr>
 
 <tr>
-<td align="left"><code>target_textbox_id</code></td>
+<td align="left"><code>height</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-str | None
+int | None
 ```
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">The `elem_id` of the `gr.Textbox` component to target. Required.</td>
+<td align="left">The height of the component container in pixels.</td>
 </tr>
 
 <tr>
-<td align="left"><code>separator</code></td>
+<td align="left"><code>width</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-str
+int | None
 ```
 
 </td>
-<td align="left"><code>", "</code></td>
-<td align="left">The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the component container in pixels.</td>
 </tr>
 
 <tr>
@@ -163,29 +223,55 @@ str | None
 </tr>
 
 <tr>
-<td align="left"><code>visible</code></td>
+<td align="left"><code>font_size_scale</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-bool
+int
 ```
 
 </td>
-<td align="left"><code>True</code></td>
-<td align="left">If False, the component will be hidden.</td>
+<td align="left"><code>100</code></td>
+<td align="left">A percentage to scale the font size of group headers and tags. Defaults to 100.</td>
 </tr>
 
 <tr>
-<td align="left"><code>elem_id</code></td>
+<td align="left"><code>every</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-str | None
+float | 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>
+<td align="left">If `value` is a callable, run the function 'every' seconds while the client connection is open.</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 False, the label is not displayed.</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>
@@ -206,16 +292,55 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">The minimum width of the component in pixels.</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">The minimum-width of the component in pixels.</td>
+<td align="left">if True, will be rendered as an selectable component; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
 </tr>
 
 <tr>
-<td align="left"><code>container</code></td>
+<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>separator</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>", "</code></td>
+<td align="left">The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
@@ -224,7 +349,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">If False, the component will not be wrapped in a container.</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>

src/backend/gradio_taggrouphelper/taggrouphelper.py

@@ -14,14 +14,20 @@ class TagGroupHelper(Component):
         self,
         value: Dict[str, List[str]] | None = None,
         *,
+        height: int | None = None,
+        width: int | None = None,
+        label: str | None = None,
+        font_size_scale: int = 100,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,        
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
         target_textbox_id: str | None = None,
         separator: str = ", ",
-        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_id: str | None = None,        
         elem_classes: list[str] | str | None = None,
         
         **kwargs,
@@ -31,14 +37,20 @@ class TagGroupHelper(Component):
 
         Parameters:
             value: A dictionary where keys are group names and values are lists of tags.
+            height: The height of the component container in pixels.
+            width: The width of the component container in pixels.
+            label: The label for this component, displayed above the groups.
+            font_size_scale: A percentage to scale the font size of group headers and tags. Defaults to 100.
+            every: If `value` is a callable, run the function 'every' seconds while the client connection is open.
+            show_label: If False, the label is not displayed.
+            container: If False, the component will not be wrapped in a container.
+            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.
+            interactive: if True, will be rendered as an selectable component; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
             target_textbox_id: The `elem_id` of the `gr.Textbox` component to target. Required.
             separator: The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.
-            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_id: An optional string that is assigned as the id of this component in the HTML DOM.            
             elem_classes: An optional list of strings to assign as CSS classes to the component.
         """
         if target_textbox_id is None:
@@ -46,13 +58,19 @@ class TagGroupHelper(Component):
 
         self.target_textbox_id = target_textbox_id
         self.separator = separator
+        self.width = width
+        self.height = height
+        self.font_size_scale = font_size_scale
         
         # Call the parent constructor with all the arguments it understands.
         super().__init__(
             label=label,
             visible=visible,
             elem_id=elem_id,
-            value=value,
+            value=value,            
+            every=every,
+            show_label=show_label,  
+            interactive=interactive,
             scale=scale,
             min_width=min_width,
             container=container,

src/demo/app.py

@@ -24,10 +24,65 @@ TAG_DATA = {
     ]
 }
 
-with gr.Blocks() as demo:
+css=""" 
+body {    
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {    
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px 340px;    
+}
+.gradio-container h1 {    
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 100% !important;
+    max-width: unset !important;
+}
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
+#tips_row{    
+    padding-left: 20px;
+}
+.sidebar {    
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.sidebar .toggle-button {    
+    background: linear-gradient(90deg, #34d399, #10b981) !important;
+    border: none;    
+    padding: 12px 18px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+.toggle-button:hover {
+    transform: scale(1.05);
+}
+.sidebar .sidebar-content {
+    padding-left: 10px !important;
+}
+.sidebar .sidebar-content .column .block div .prose {
+    text-align: center;
+}
+"""
+with gr.Blocks(theme=gr.themes.Ocean(), css=css) as demo:
     gr.Markdown("# Tag Group Helper Demo")
     gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
-
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
     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`.
@@ -43,14 +98,17 @@ with gr.Blocks() as demo:
                 lines=5,
                 elem_id="negative-prompt-textbox" # This ID must be unique
             )
-
-        with gr.Column(scale=1): # Give less space to the helpers
+        with gr.Sidebar(position="right"):           
             # 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",
-                separator=" "
+                separator=", ",
+                interactive=True,
+                width=250,
+                font_size_scale=90
+                
             )
             
             # Create another instance for the Negative Prompt box.
@@ -58,8 +116,10 @@ with gr.Blocks() as demo:
                 label="Negative Prompt Keywords",
                 value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
                 target_textbox_id="negative-prompt-textbox",
-                min_width=150,
-                separator=", "
+                separator=", ",
+                interactive=True,
+                width=250,                
+                font_size_scale=90
             )
 
 if __name__ == '__main__':

src/demo/space.py

@@ -3,7 +3,7 @@ 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.'}, 'separator': {'type': 'str', 'default': '", "', 'description': 'The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.'}, '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': []}}}
+_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.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component container in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component container in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component, displayed above the groups.'}, 'font_size_scale': {'type': 'int', 'default': '100', 'description': 'A percentage to scale the font size of group headers and tags. Defaults to 100.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' seconds while the client connection is open."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the label is not displayed.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will not be wrapped in a container.'}, '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', 'default': '160', 'description': 'The minimum width of the component in pixels.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an selectable component; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'target_textbox_id': {'type': 'str | None', 'default': 'None', 'description': 'The `elem_id` of the `gr.Textbox` component to target. Required.'}, 'separator': {'type': 'str', 'default': '", "', 'description': 'The string to use as a separator between tags. Defaults to ", ". Can be set to " " for space separation.'}, '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.'}, '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")
 
@@ -64,10 +64,65 @@ TAG_DATA = {
     ]
 }
 
-with gr.Blocks() as demo:
+css=\"\"\" 
+body {    
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {    
+    border-radius: 15px;
+    padding: 30px 40px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    margin: 40px 340px;    
+}
+.gradio-container h1 {    
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.fillable {
+    width: 100% !important;
+    max-width: unset !important;
+}
+#examples_container {
+    margin: auto;
+    width: 90%;
+}
+#examples_row {
+    justify-content: center;
+}
+#tips_row{    
+    padding-left: 20px;
+}
+.sidebar {    
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.sidebar .toggle-button {    
+    background: linear-gradient(90deg, #34d399, #10b981) !important;
+    border: none;    
+    padding: 12px 18px;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+.toggle-button:hover {
+    transform: scale(1.05);
+}
+.sidebar .sidebar-content {
+    padding-left: 10px !important;
+}
+.sidebar .sidebar-content .column .block div .prose {
+    text-align: center;
+}
+\"\"\"
+with gr.Blocks(theme=gr.themes.Ocean(), css=css) as demo:
     gr.Markdown("# Tag Group Helper Demo")
     gr.Markdown("Click on the tags below to add them to the prompt textboxes.")
-
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_taggrouphelper'>GitHub Code</a></span>")
     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`.
@@ -83,14 +138,17 @@ with gr.Blocks() as demo:
                 lines=5,
                 elem_id="negative-prompt-textbox" # This ID must be unique
             )
-
-        with gr.Column(scale=1): # Give less space to the helpers
+        with gr.Sidebar(position="right"):           
             # 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",
-                separator=" "
+                separator=", ",
+                interactive=True,
+                width=250,
+                font_size_scale=90
+                
             )
             
             # Create another instance for the Negative Prompt box.
@@ -98,8 +156,10 @@ with gr.Blocks() as demo:
                 label="Negative Prompt Keywords",
                 value={"Negative Prompts": TAG_DATA["Negative Prompts"]},
                 target_textbox_id="negative-prompt-textbox",
-                min_width=150,
-                separator=", "
+                separator=", ",
+                interactive=True,
+                width=250,                
+                font_size_scale=90
             )
 
 if __name__ == '__main__':

src/frontend/Index.svelte

@@ -8,12 +8,17 @@
 	export let target_textbox_id: string;
 	export let separator: string = ", ";
 	export let label: string;
+	export let font_size_scale: number = 100;
+	export let show_label: boolean = true;
 	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 height: number | undefined = undefined;
+	export let width: number | undefined = undefined;
+	export let interactive: boolean;
 	export let loading_status: LoadingStatus;
 	export let gradio: Gradio<{ clear_status: LoadingStatus; }>;
 
@@ -67,7 +72,7 @@
 </script>
 
 <!-- The main structure uses the standard Gradio <Block> component. -->
-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
+<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width} height={height || undefined}>
 	{#if loading_status}
 		<StatusTracker
 			autoscroll={gradio.autoscroll}
@@ -77,10 +82,16 @@
 		/>
 	{/if}
 
-	{#if label}
+	{#if label && show_label}
 		<span class="label">{label}</span>
 	{/if}
-	<div class="container">
+	<div 
+		class="container" 
+		style:width={width ? `${width}px` : undefined}
+		style:height={height ? `${height}px` : undefined}
+		style:overflow-y={height ? 'auto' : undefined}
+		style="--font-scale: {font_size_scale / 100};"
+	>
 		<!-- We iterate over the 'value' prop, which contains our tag groups -->
 		{#if value}
 			{#each Object.entries(value) as [groupName, tags]}
@@ -98,6 +109,7 @@
 									class="tag-button"
 									style="background-color: {tagColors[i % tagColors.length]};"
 									on:click={() => addTagToPrompt(tag)}
+									disabled={!interactive}
 								>
 									{tag}
 								</button>
@@ -115,7 +127,10 @@
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-lg);
 		padding: 8px;
-		background: var(--background-fill-secondary);
+		background: var(--background-fill-secondary);	
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 	.label {
 		display: block;
@@ -135,15 +150,15 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		width: 100%;
-		padding: 8px 12px;				
+		width: 100%;			
+		padding: calc(8px * var(--font-scale)) 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; 
+		font-size: calc(1rem * var(--font-scale)); 
 		transition: background-color 0.2s;
 	}
 	.group-header:hover {		
@@ -154,7 +169,7 @@
 		font-weight: 600;
 	}
 	.group-toggle-icon {
-		font-size: 1.2rem;
+		font-size: calc(1.2rem * var(--font-scale));
 		font-weight: bold;
 	}
 	.tags-container {
@@ -162,12 +177,13 @@
 		flex-wrap: wrap;
 		gap: 8px;
 		padding: 12px 8px;
+		overflow-y: auto;
 	}
-	.tag-button {
-		padding: 4px 10px;
+	.tag-button {		
+		padding: calc(4px * var(--font-scale)) calc(10px * var(--font-scale));
 		border: 1px solid #d1d5db;
 		border-radius: 12px;
-		font-size: 0.875rem;
+		font-size: calc(0.875rem * var(--font-scale));
 		cursor: pointer;
 		transition: filter 0.2s;
 		color: #1f2937;

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_taggrouphelper"
-version = "0.0.2"
+version = "0.0.3"
 description = "A fast text generator based on tagged words"
 readme = "README.md"
 license = "apache-2.0"