Upload folder using huggingface_hub

Dockerfile

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

README.md

@@ -1,10 +1,17 @@
+
 ---
-title: Gradio Hubquicksearch
-emoji: 😻
+tags: [gradio-custom-component,gradio-template-SimpleTextbox,huggingface hub,hub,huggingface]
+title: gradio_hubquicksearch V0.0.1
 colorFrom: pink
-colorTo: purple
+colorTo: gray
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Name: gradio_hubquicksearch
+
+Description: Quick search HF Hub repos or users
+
+Install with: pip install gradio_hubquicksearch

app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_hubquicksearch import HubQuicksearch
+
+
+example = HubQuicksearch().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    HubQuicksearch(label="repo id from the hub"),  # interactive version of your component
+    HubQuicksearch(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()

css.css

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

requirements.txt

@@ -0,0 +1 @@
+gradio_hubquicksearch-0.0.1-py3-none-any.whl

space.py

@@ -0,0 +1,139 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'HubQuicksearch': {'description': 'Creates a very simple textbox for user to enter string input or display string output.', 'members': {'__init__': {'value': {'type': 'str | Callable | None', 'default': 'None', 'description': 'default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'placeholder': {'type': 'str | None', 'default': 'None', 'description': 'placeholder hint to provide behind textbox.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'component name in interface.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'rtl': {'type': 'bool', 'default': 'False', 'description': 'If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'str | None', 'description': 'Expects a {str} returned from function and sets textarea value to it.'}}, 'preprocess': {'return': {'type': 'str | None', 'description': 'Passes text value as a {str} into the function.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the HubQuicksearch changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the HubQuicksearch.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the HubQuicksearch is focused.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'HubQuicksearch': []}}}
+
+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_hubquicksearch`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Quick search HF Hub repos or users
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_hubquicksearch
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_hubquicksearch import HubQuicksearch
+
+
+example = HubQuicksearch().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    HubQuicksearch(label="repo id from the hub"),  # interactive version of your component
+    HubQuicksearch(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `HubQuicksearch`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["HubQuicksearch"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["HubQuicksearch"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes text value as a {str} into the function.
+- **As output:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+def predict(
+    value: str | None
+) -> str | None:
+    return value
+```
+""", elem_classes=["md-custom", "HubQuicksearch-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          HubQuicksearch: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

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

src/README.md

@@ -0,0 +1,249 @@
+
+# `gradio_hubquicksearch`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Quick search HF Hub repos or users
+
+## Installation
+
+```bash
+pip install gradio_hubquicksearch
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_hubquicksearch import HubQuicksearch
+
+
+example = HubQuicksearch().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    HubQuicksearch(label="repo id from the hub"),  # interactive version of your component
+    HubQuicksearch(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `HubQuicksearch`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>placeholder</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">placeholder hint to provide behind textbox.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">component name in interface.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>rtl</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the HubQuicksearch changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `input` | This listener is triggered when the user changes the value of the HubQuicksearch. |
+| `submit` | This listener is triggered when the user presses the Enter key while the HubQuicksearch is focused. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes text value as a {str} into the function.
+- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+ def predict(
+     value: str | None
+ ) -> str | None:
+     return value
+ ```
+ 

src/backend/gradio_hubquicksearch/__init__.py

@@ -0,0 +1,4 @@
+
+from .hubquicksearch import HubQuicksearch
+
+__all__ = ['HubQuicksearch']

src/backend/gradio_hubquicksearch/hubquicksearch.py

@@ -0,0 +1,94 @@
+from __future__ import annotations
+
+from typing import Any, Callable
+
+from gradio.components.base import FormComponent
+from gradio.events import Events
+
+
+class HubQuicksearch(FormComponent):
+    """
+    Creates a very simple textbox for user to enter string input or display string output.
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.submit,
+    ]
+
+    def __init__(
+        self,
+        value: str | Callable | None = None,
+        *,
+        placeholder: str | None = None,
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        rtl: bool = False,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            placeholder: placeholder hint to provide behind textbox.
+            label: component name in interface.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        self.placeholder = placeholder
+        self.rtl = rtl
+        super().__init__(
+            label=label,
+            every=every,
+            show_label=show_label,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            value=value,
+            render=render,
+        )
+
+    def preprocess(self, payload: str | None) -> str | None:
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            Passes text value as a {str} into the function.
+        """
+        return None if payload is None else str(payload)
+
+    def postprocess(self, value: str | None) -> str | None:
+        """
+        Parameters:
+            value: Expects a {str} returned from function and sets textarea value to it.
+        Returns:
+            The value to display in the textarea.
+        """
+        return None if value is None else str(value)
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": "string"}
+
+    def example_payload(self) -> Any:
+        return "Hello!!"
+
+    def example_value(self) -> Any:
+        return "Hello!!"

src/backend/gradio_hubquicksearch/hubquicksearch.pyi

@@ -0,0 +1,221 @@
+from __future__ import annotations
+
+from typing import Any, Callable
+
+from gradio.components.base import FormComponent
+from gradio.events import Events
+
+
+class HubQuicksearch(FormComponent):
+    """
+    Creates a very simple textbox for user to enter string input or display string output.
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.submit,
+    ]
+
+    def __init__(
+        self,
+        value: str | Callable | None = None,
+        *,
+        placeholder: str | None = None,
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        rtl: bool = False,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            placeholder: placeholder hint to provide behind textbox.
+            label: component name in interface.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            show_label: if True, will display label.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        self.placeholder = placeholder
+        self.rtl = rtl
+        super().__init__(
+            label=label,
+            every=every,
+            show_label=show_label,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            value=value,
+            render=render,
+        )
+
+    def preprocess(self, payload: str | None) -> str | None:
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            Passes text value as a {str} into the function.
+        """
+        return None if payload is None else str(payload)
+
+    def postprocess(self, value: str | None) -> str | None:
+        """
+        Parameters:
+            value: Expects a {str} returned from function and sets textarea value to it.
+        Returns:
+            The value to display in the textarea.
+        """
+        return None if value is None else str(value)
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": "string"}
+
+    def example_payload(self) -> Any:
+        return "Hello!!"
+
+    def example_value(self) -> Any:
+        return "Hello!!"
+
+    
+    def change(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def input(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...
+    
+    def submit(self,
+        fn: Callable | None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        outputs: Component | Sequence[Component] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: If True, will scroll to output component on completion
+            show_progress: If True, will show progress animation while pending
+            queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps to use this event. If fn is None, show_api will automatically be set to False.
+        """
+        ...

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

@@ -0,0 +1 @@
+.block.s-gHri1EnE1tNu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.s-gHri1EnE1tNu{border-color:var(--color-accent)}.block.border_contrast.s-gHri1EnE1tNu{border-color:var(--body-text-color)}.padded.s-gHri1EnE1tNu{padding:var(--block-padding)}.hidden.s-gHri1EnE1tNu{display:none}.hide-container.s-gHri1EnE1tNu{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.s-rHFnjjZU_ewn{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.s-vxmmg1Wn3NRx{margin-bottom:var(--spacing-xs)}span.s-vxmmg1Wn3NRx:not(.has-info){margin-bottom:var(--spacing-lg)}span.s-vxmmg1Wn3NRx{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.s-vxmmg1Wn3NRx{margin:0;height:0}label.s-YFSLr2mO2iu3{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.s-YFSLr2mO2iu3{border-top-left-radius:0}label.float.s-YFSLr2mO2iu3{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.s-YFSLr2mO2iu3:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.s-YFSLr2mO2iu3{height:0}span.s-YFSLr2mO2iu3{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.s-YFSLr2mO2iu3{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.s-tZhY8bE_S0Lo{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].s-tZhY8bE_S0Lo{opacity:.5;box-shadow:none}button[disabled].s-tZhY8bE_S0Lo:hover{cursor:not-allowed}.padded.s-tZhY8bE_S0Lo{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.s-tZhY8bE_S0Lo:hover,button.highlight.s-tZhY8bE_S0Lo{cursor:pointer;color:var(--color-accent)}.padded.s-tZhY8bE_S0Lo:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.s-tZhY8bE_S0Lo{padding:0 1px;font-size:10px}div.s-tZhY8bE_S0Lo{padding:2px;display:flex;align-items:flex-end}.small.s-tZhY8bE_S0Lo{width:14px;height:14px}.large.s-tZhY8bE_S0Lo{width:22px;height:22px}.pending.s-tZhY8bE_S0Lo{animation:s-tZhY8bE_S0Lo-flash .5s infinite}@keyframes s-tZhY8bE_S0Lo-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.s-tZhY8bE_S0Lo{background:transparent;border:none;box-shadow:none}.empty.s-fRBJGk-2PVNQ{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.s-fRBJGk-2PVNQ{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.s-fRBJGk-2PVNQ{min-height:calc(var(--size-32) - 20px)}.large.s-fRBJGk-2PVNQ{min-height:calc(var(--size-64) - 20px)}.unpadded_box.s-fRBJGk-2PVNQ{margin-top:0}.small_parent.s-fRBJGk-2PVNQ{min-height:100%!important}.dropdown-arrow.s-0io8AhgIAqJY{fill:currentColor}.wrap.s-lRugb-BnxWrO{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.s-lRugb-BnxWrO{color:var(--body-text-color-subdued);display:flex}.icon-wrap.s-lRugb-BnxWrO{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.s-lRugb-BnxWrO{font-size:var(--text-lg)}}.hovered.s-lRugb-BnxWrO{color:var(--color-accent)}div.s-MZ5ZsjQ0AH1_{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.s-MZ5ZsjQ0AH1_{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.s-pt0FE9rrnuTV{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.s-pt0FE9rrnuTV{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.s-pt0FE9rrnuTV{color:var(--color-accent)}.icon.s-pt0FE9rrnuTV:hover,.icon.s-pt0FE9rrnuTV:focus{color:var(--color-accent)}svg.s-kL3wNG5vn6RW.s-kL3wNG5vn6RW{width:var(--size-20);height:var(--size-20)}svg.s-kL3wNG5vn6RW path.s-kL3wNG5vn6RW{fill:var(--loader-color)}div.s-kL3wNG5vn6RW.s-kL3wNG5vn6RW{z-index:var(--layer-2)}.margin.s-kL3wNG5vn6RW.s-kL3wNG5vn6RW{margin:var(--size-4)}.wrap.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{top:0;right:0;left:0}.wrap.default.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{top:0;right:0;bottom:0;left:0}.hide.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{opacity:0;pointer-events:none}.generating.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{animation:s-vXtJ1y9FKh0U-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{background:none}@keyframes s-vXtJ1y9FKh0U-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.s-vXtJ1y9FKh0U .progress-text.s-vXtJ1y9FKh0U{background:var(--block-background-fill)}.border.s-vXtJ1y9FKh0U.s-vXtJ1y9FKh0U{border:1px solid var(--border-color-primary)}.toast-body.s-gDA3u_NUMyi8{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.s-gDA3u_NUMyi8{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.s-gDA3u_NUMyi8{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.s-gDA3u_NUMyi8{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.s-gDA3u_NUMyi8{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.s-gDA3u_NUMyi8{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.s-gDA3u_NUMyi8{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.s-gDA3u_NUMyi8{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.s-gDA3u_NUMyi8{color:var(--color-red-700)}.dark .toast-title.error.s-gDA3u_NUMyi8{color:var(--color-red-50)}.toast-title.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-700)}.dark .toast-title.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-50)}.toast-title.info.s-gDA3u_NUMyi8{color:var(--color-grey-700)}.dark .toast-title.info.s-gDA3u_NUMyi8{color:var(--color-grey-50)}.toast-close.s-gDA3u_NUMyi8{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.s-gDA3u_NUMyi8{color:var(--color-red-700)}.dark .toast-close.error.s-gDA3u_NUMyi8{color:var(--color-red-500)}.toast-close.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-700)}.dark .toast-close.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-500)}.toast-close.info.s-gDA3u_NUMyi8{color:var(--color-grey-700)}.dark .toast-close.info.s-gDA3u_NUMyi8{color:var(--color-grey-500)}.toast-text.s-gDA3u_NUMyi8{font-size:var(--text-lg)}.toast-text.error.s-gDA3u_NUMyi8{color:var(--color-red-700)}.dark .toast-text.error.s-gDA3u_NUMyi8{color:var(--color-red-50)}.toast-text.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-700)}.dark .toast-text.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-50)}.toast-text.info.s-gDA3u_NUMyi8{color:var(--color-grey-700)}.dark .toast-text.info.s-gDA3u_NUMyi8{color:var(--color-grey-50)}.toast-details.s-gDA3u_NUMyi8{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.s-gDA3u_NUMyi8{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.s-gDA3u_NUMyi8{color:var(--color-red-700)}.dark .toast-icon.error.s-gDA3u_NUMyi8{color:var(--color-red-500)}.toast-icon.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-700)}.dark .toast-icon.warning.s-gDA3u_NUMyi8{color:var(--color-yellow-500)}.toast-icon.info.s-gDA3u_NUMyi8{color:var(--color-grey-700)}.dark .toast-icon.info.s-gDA3u_NUMyi8{color:var(--color-grey-500)}@keyframes s-gDA3u_NUMyi8-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.s-gDA3u_NUMyi8{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:s-gDA3u_NUMyi8-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.s-gDA3u_NUMyi8{background:var(--color-red-700)}.dark .timer.error.s-gDA3u_NUMyi8{background:var(--color-red-500)}.timer.warning.s-gDA3u_NUMyi8{background:var(--color-yellow-700)}.dark .timer.warning.s-gDA3u_NUMyi8{background:var(--color-yellow-500)}.timer.info.s-gDA3u_NUMyi8{background:var(--color-grey-700)}.dark .timer.info.s-gDA3u_NUMyi8{background:var(--color-grey-500)}.toast-wrap.s-HjnDZjX7wTpT{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.s-HjnDZjX7wTpT{width:calc(var(--size-96) + var(--size-10))}}label.s-8RhEEAzdBY_I.s-8RhEEAzdBY_I{display:block;width:100%}input.s-8RhEEAzdBY_I.s-8RhEEAzdBY_I{display:block;position:relative;outline:none!important;box-shadow:var(--input-shadow);background:var(--input-background-fill);padding:var(--input-padding);width:100%;color:var(--body-text-color);font-weight:var(--input-text-weight);font-size:var(--input-text-size);line-height:var(--line-sm);border:none}.container.s-8RhEEAzdBY_I>input.s-8RhEEAzdBY_I{border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-radius)}input.s-8RhEEAzdBY_I.s-8RhEEAzdBY_I:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1}input.s-8RhEEAzdBY_I.s-8RhEEAzdBY_I:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}input.s-8RhEEAzdBY_I.s-8RhEEAzdBY_I::placeholder{color:var(--input-placeholder-color)}

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

@@ -0,0 +1,169 @@
+const {
+  SvelteComponentDev: E,
+  add_iframe_resize_listener: b,
+  add_location: x,
+  add_render_callback: P,
+  append_dev: z,
+  attr_dev: j,
+  binding_callbacks: k,
+  detach_dev: S,
+  dispatch_dev: f,
+  element: q,
+  init: C,
+  insert_dev: O,
+  noop: h,
+  safe_not_equal: R,
+  set_data_dev: B,
+  text: D,
+  toggle_class: r,
+  validate_slots: G
+} = window.__gradio__svelte__internal, { onMount: w } = window.__gradio__svelte__internal, M = "frontend/Example.svelte";
+function _(n) {
+  let e, o = (
+    /*value*/
+    (n[0] ? (
+      /*value*/
+      n[0]
+    ) : "") + ""
+  ), u, d;
+  const a = {
+    c: function() {
+      e = q("div"), u = D(o), j(e, "class", "s-nq2TxZ5oGq93"), P(() => (
+        /*div_elementresize_handler*/
+        n[5].call(e)
+      )), r(
+        e,
+        "table",
+        /*type*/
+        n[1] === "table"
+      ), r(
+        e,
+        "gallery",
+        /*type*/
+        n[1] === "gallery"
+      ), r(
+        e,
+        "selected",
+        /*selected*/
+        n[2]
+      ), x(e, M, 24, 0, 413);
+    },
+    l: function(s) {
+      throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    },
+    m: function(s, l) {
+      O(s, e, l), z(e, u), d = b(
+        e,
+        /*div_elementresize_handler*/
+        n[5].bind(e)
+      ), n[6](e);
+    },
+    p: function(s, [l]) {
+      l & /*value*/
+      1 && o !== (o = /*value*/
+      (s[0] ? (
+        /*value*/
+        s[0]
+      ) : "") + "") && B(u, o), l & /*type*/
+      2 && r(
+        e,
+        "table",
+        /*type*/
+        s[1] === "table"
+      ), l & /*type*/
+      2 && r(
+        e,
+        "gallery",
+        /*type*/
+        s[1] === "gallery"
+      ), l & /*selected*/
+      4 && r(
+        e,
+        "selected",
+        /*selected*/
+        s[2]
+      );
+    },
+    i: h,
+    o: h,
+    d: function(s) {
+      s && S(e), d(), n[6](null);
+    }
+  };
+  return f("SvelteRegisterBlock", {
+    block: a,
+    id: _.name,
+    type: "component",
+    source: "",
+    ctx: n
+  }), a;
+}
+function N(n, e, o) {
+  let { $$slots: u = {}, $$scope: d } = e;
+  G("Example", u, []);
+  let { value: a } = e, { type: c } = e, { selected: s = !1 } = e, l, i;
+  function p(t, m) {
+    !t || !m || (i.style.setProperty("--local-text-width", `${m < 150 ? m : 200}px`), o(4, i.style.whiteSpace = "unset", i));
+  }
+  w(() => {
+    p(i, l);
+  }), n.$$.on_mount.push(function() {
+    a === void 0 && !("value" in e || n.$$.bound[n.$$.props.value]) && console.warn("<Example> was created without expected prop 'value'"), c === void 0 && !("type" in e || n.$$.bound[n.$$.props.type]) && console.warn("<Example> was created without expected prop 'type'");
+  });
+  const v = ["value", "type", "selected"];
+  Object.keys(e).forEach((t) => {
+    !~v.indexOf(t) && t.slice(0, 2) !== "$$" && t !== "slot" && console.warn(`<Example> was created with unknown prop '${t}'`);
+  });
+  function y() {
+    l = this.clientWidth, o(3, l);
+  }
+  function g(t) {
+    k[t ? "unshift" : "push"](() => {
+      i = t, o(4, i);
+    });
+  }
+  return n.$$set = (t) => {
+    "value" in t && o(0, a = t.value), "type" in t && o(1, c = t.type), "selected" in t && o(2, s = t.selected);
+  }, n.$capture_state = () => ({
+    onMount: w,
+    value: a,
+    type: c,
+    selected: s,
+    size: l,
+    el: i,
+    set_styles: p
+  }), n.$inject_state = (t) => {
+    "value" in t && o(0, a = t.value), "type" in t && o(1, c = t.type), "selected" in t && o(2, s = t.selected), "size" in t && o(3, l = t.size), "el" in t && o(4, i = t.el);
+  }, e && "$$inject" in e && n.$inject_state(e.$$inject), [a, c, s, l, i, y, g];
+}
+class T extends E {
+  constructor(e) {
+    super(e), C(this, e, N, _, R, { value: 0, type: 1, selected: 2 }), f("SvelteRegisterComponent", {
+      component: this,
+      tagName: "Example",
+      options: e,
+      id: _.name
+    });
+  }
+  get value() {
+    throw new Error("<Example>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+  }
+  set value(e) {
+    throw new Error("<Example>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+  }
+  get type() {
+    throw new Error("<Example>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+  }
+  set type(e) {
+    throw new Error("<Example>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+  }
+  get selected() {
+    throw new Error("<Example>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+  }
+  set selected(e) {
+    throw new Error("<Example>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+  }
+}
+export {
+  T as default
+};

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

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

src/demo/app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_hubquicksearch import HubQuicksearch
+
+
+example = HubQuicksearch().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    HubQuicksearch(label="repo id from the hub"),  # interactive version of your component
+    HubQuicksearch(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

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

src/demo/space.py

@@ -0,0 +1,139 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'HubQuicksearch': {'description': 'Creates a very simple textbox for user to enter string input or display string output.', 'members': {'__init__': {'value': {'type': 'str | Callable | None', 'default': 'None', 'description': 'default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'placeholder': {'type': 'str | None', 'default': 'None', 'description': 'placeholder hint to provide behind textbox.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'component name in interface.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'rtl': {'type': 'bool', 'default': 'False', 'description': 'If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {'value': {'type': 'str | None', 'description': 'Expects a {str} returned from function and sets textarea value to it.'}}, 'preprocess': {'return': {'type': 'str | None', 'description': 'Passes text value as a {str} into the function.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the HubQuicksearch changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the HubQuicksearch.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the HubQuicksearch is focused.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'HubQuicksearch': []}}}
+
+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_hubquicksearch`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Quick search HF Hub repos or users
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_hubquicksearch
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_hubquicksearch import HubQuicksearch
+
+
+example = HubQuicksearch().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    HubQuicksearch(label="repo id from the hub"),  # interactive version of your component
+    HubQuicksearch(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `HubQuicksearch`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["HubQuicksearch"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["HubQuicksearch"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes text value as a {str} into the function.
+- **As output:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+def predict(
+    value: str | None
+) -> str | None:
+    return value
+```
+""", elem_classes=["md-custom", "HubQuicksearch-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          HubQuicksearch: [], };
+    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/AuthorAvatar/AuthorAvatar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+
+	export let author: {
+		avatarUrl: string;
+		type: string;
+	};
+	export let classNames = "";
+	export let size: Size = "md";
+
+	const SIZE_CLASS: Record<Size, string> = {
+		xs: "w-2.5 h-2.5",
+		sm: "w-3 h-3",
+		md: "w-3.5 h-3.5",
+		lg: "w-5 h-5",
+		xl: "w-9 h-9",
+		xxl: "w-24 h-24",
+	};
+</script>
+
+<img
+	alt=""
+	class="{SIZE_CLASS[size]} {author.type === 'user' ? 'rounded-full' : 'rounded'} {classNames} flex-none"
+	src={author.avatarUrl}
+	crossorigin="anonymous"
+/>

src/frontend/Example.svelte

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

src/frontend/Icons/IconArrowRight.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path d="M18 6l-1.4 1.4l7.5 7.6H3v2h21.1l-7.5 7.6L18 26l10-10z" fill="currentColor" />
+</svg>

src/frontend/Index.svelte

@@ -0,0 +1,282 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { Gradio } from "@gradio/utils";
+	import { BlockTitle } from "@gradio/atoms";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { tick } from "svelte";
+	import type { Entry } from "./QuickSearchEntry/Types";
+	import QuickSearchEntry from "./QuickSearchEntry/QuickSearchEntry.svelte";
+	import type { QuickSearchResults } from "./Types";
+	import { queryString, httpGet, throttle } from "./lib/ViewUtils";
+
+	export let gradio: Gradio<{
+		change: never;
+		submit: never;
+		input: never;
+	}>;
+	export let label = "Textbox";
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value = "";
+	export let placeholder = "";
+	export let show_label: boolean;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus | undefined = undefined;
+	export let value_is_output = false;
+	export let interactive: boolean;
+	export let rtl = false;
+
+	export let url: string = "https://huggingface.co/api/quicksearch";
+	export let position: "absolute" | "fixed" = "absolute";
+
+	let entries: Entry[] = [];
+	let isOpen = false;
+	let lastQuery: string | null = null;
+	let numResults = 0;
+	let selectedEntryIdx = -1;
+	let searchController = new AbortController();
+
+	const THROTTLE_DELAY = 300;
+
+	let el: HTMLTextAreaElement | HTMLInputElement;
+	const container = true;
+
+	function handle_change(): void {
+		gradio.dispatch("change");
+		if (!value_is_output) {
+			gradio.dispatch("input");
+		}
+	}
+
+	async function handle_keypress(e: KeyboardEvent): Promise<void> {
+		await tick();
+		if (e.key === "Enter") {
+			e.preventDefault();
+			gradio.dispatch("submit");
+		}
+	}
+	
+	async function handleFocus() {
+		if (lastQuery === null) {
+			await performSearch();
+		}
+		isOpen = true;
+	}
+	
+	const handleInput = throttle(async () => {
+		isOpen = true;
+		await tick(); // Let parent component change searchParams such as orgFilters first
+		await performSearch();
+	}, THROTTLE_DELAY);
+
+	function isSelected(selectedEntryIdx: number, entry: Entry) {
+		return entries[selectedEntryIdx]?.id === entry.id && entries[selectedEntryIdx]?.type === entry.type;
+	}
+
+	function handleClickEntry(entry: Entry) {
+		selectedEntryIdx = entries.findIndex(e => e.id === entry.id && e.type === entry.type);
+		console.log(entry);
+	}
+
+	$: if (value === null) value = "";
+
+	// When the value changes, dispatch the change event via handle_change()
+	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
+	$: value, handle_change();
+	
+	async function performSearch() {
+		const input = value.trim();
+		if (input !== lastQuery) {
+			const res = await fetchResults(input);
+			if (res.isError) {
+				if (!res.aborted) {
+					console.error(`QuickSearch Error: ${res.error}`);
+				}
+				return;
+			}
+
+			const resEntries = getResultEntries(res.payload as QuickSearchResults);
+			entries = [
+				...resEntries,
+			];
+			console.log(entries);
+			numResults = resEntries.length;
+			lastQuery = input;
+		}
+	}
+	
+	async function fetchResults(input: string = "") {
+		searchController.abort(); /// Cancel previous function call if exists
+		searchController = new AbortController();
+
+		const res = await httpGet<QuickSearchResults>(
+			url +
+				queryString({
+					q: input,
+					type: ["model", "org", "user"],
+				}),
+			{ signal: searchController.signal }
+		);
+
+		return res;
+	}
+
+	function getResultEntries(results: QuickSearchResults | null): Entry[] {
+		const modelEntries: Entry[] = results.models.map(m => ({
+			href: undefined,
+			id: m.id,
+			_id: m._id,
+			label: m.id,
+			type: "model",
+		}));
+		
+		const orgEntries: Entry[] = results.orgs.map(o => ({
+			href: undefined,
+			id: o.name,
+			_id: o._id,
+			imgUrl: o.avatarUrl,
+			label: o.fullname,
+			type: "org",
+		}));
+
+		const userEntries: Entry[] = results.users.map(u => ({
+			href: undefined,
+			id: u.user,
+			_id: u._id,
+			imgUrl: u.avatarUrl.startsWith("/") ? `https://huggingface.co${u.avatarUrl}` : u.avatarUrl,
+			label: u.user,
+			type: "user",
+			description: u.fullname,
+		}));
+
+		return [
+			...modelEntries,
+			...orgEntries,
+			...userEntries,
+		];
+	}
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	{elem_classes}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	padding={true}
+>
+	{#if loading_status}
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+	{/if}
+
+	<label class:container>
+		<BlockTitle {show_label} info={undefined}>{label}</BlockTitle>
+
+		<input
+			data-testid="textbox"
+			type="text"
+			class="scroll-hide"
+			bind:value
+			bind:this={el}
+			{placeholder}
+			disabled={!interactive}
+			dir={rtl ? "rtl" : "ltr"}
+			on:focus={handleFocus}
+			on:keypress={handle_keypress}
+			on:input={handleInput}
+		/>
+		{#if isOpen}
+			<div class="{position} z-40 w-full md:min-w-[24rem]">
+				<ul
+					class="mt-1 max-h-[calc(100vh-100px)] w-full divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white text-sm shadow-lg dark:divide-gray-900"
+				>
+					{#if !numResults}
+						<QuickSearchEntry
+							entry={{
+								id: "no-result",
+								label: "No results found :(",
+								type: "no-results",
+							}}
+							isSelected={false}
+							onClick={() => {}}
+						/>
+					{/if}
+
+					{#if entries.some(x => x.type === "model")}
+						{#each entries.filter(x => ["model", "all-models"].includes(x.type)) as entry}
+							<li>
+								<QuickSearchEntry {entry} isSelected={isSelected(selectedEntryIdx, entry)} onClick={handleClickEntry} />
+							</li>
+						{/each}
+					{/if}
+					
+					{#if entries.some(x => x.type === "org")}
+						{#each entries.filter(x => x.type === "org") as entry}
+							<li>
+								<QuickSearchEntry {entry} isSelected={isSelected(selectedEntryIdx, entry)} onClick={handleClickEntry} />
+							</li>
+						{/each}
+					{/if}
+
+					{#if entries.some(x => x.type === "user")}
+						{#each entries.filter(x => x.type === "user") as entry}
+							<li>
+								<QuickSearchEntry {entry} isSelected={isSelected(selectedEntryIdx, entry)} onClick={handleClickEntry} />
+							</li>
+						{/each}
+					{/if}
+				</ul>
+			</div>
+		{/if}
+	</label>
+</Block>
+
+<style>
+	label {
+		display: block;
+		width: 100%;
+	}
+
+	input {
+		display: block;
+		position: relative;
+		outline: none !important;
+		box-shadow: var(--input-shadow);
+		background: var(--input-background-fill);
+		padding: var(--input-padding);
+		width: 100%;
+		color: var(--body-text-color);
+		font-weight: var(--input-text-weight);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+		border: none;
+	}
+	.container > input {
+		border: var(--input-border-width) solid var(--input-border-color);
+		border-radius: var(--input-radius);
+	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
+
+	input:focus {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	input::placeholder {
+		color: var(--input-placeholder-color);
+	}
+</style>

src/frontend/QuickSearchEntry/QuickSearchEntry.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Entry } from "./Types";
+
+	import AuthorAvatar from "../AuthorAvatar/AuthorAvatar.svelte";
+	import IconArrowRight from "../Icons/IconArrowRight.svelte";
+
+	export let entry: Entry;
+	export let isSelected: boolean;
+	export let onClick: (entry: Entry) => void;
+</script>
+
+<a
+	class="flex h-8 cursor-pointer items-center px-2
+		{['dataset', 'model', 'no-results', 'space'].includes(entry.type) ? 'font-mono text-xs' : ''}
+		{['all-datasets', 'all-models', 'all-spaces'].includes(entry.type) && !isSelected ? 'text-gray-400' : ''}
+		{isSelected ? 'bg-blue-500 text-white dark:bg-blue-700' : 'hover:bg-gray-50 dark:hover:bg-gray-900'}"
+	href={entry.href}
+	on:click|stopPropagation={() => onClick(entry)}
+>
+	{#if ["all-datasets", "all-models", "all-spaces"].includes(entry.type)}
+		<IconArrowRight classNames="flex-none mr-1 h-3 w-3" />
+	{:else if ["org", "user"].includes(entry.type) && entry.imgUrl}
+		<AuthorAvatar
+			author={{
+				avatarUrl: entry.imgUrl,
+				type: entry.type === "user" ? "user" : "org",
+			}}
+			classNames="mr-1.5"
+		/>
+	{:else if entry.type === "full-text-search"}
+		<span
+			class="mr-1.5 rounded px-1 text-xs leading-tight {isSelected
+				? 'bg-white/10 text-white'
+				: 'bg-blue-500/10 text-blue-700 dark:text-blue-200'}">new</span
+		>
+	{/if}
+	<span
+		class="flex-shrink-0 truncate
+			{entry.type === 'model' && !isSelected
+			? 'rounded bg-gradient-to-b from-gray-50 to-gray-100 px-1 dark:from-gray-925 dark:to-gray-950'
+			: 'px-1'}"
+	>
+		{entry.label}
+	</span>
+	{#if entry.description}
+		<span class="pl-0.5 pr-1.5 text-gray-300">·</span>
+		<span class="mr-2 truncate {isSelected ? 'text-white' : 'text-gray-400'}">{entry.description}</span>
+	{/if}
+	{#if entry.type === "full-text-search"}
+		<IconArrowRight classNames="flex-none ml-auto h-3.5 w-3.5" />
+	{/if}
+</a>

src/frontend/QuickSearchEntry/Types.ts

@@ -0,0 +1,23 @@
+export type EntryType =
+	| "dataset"
+	| "all-datasets"
+	| "model"
+	| "all-models"
+	| "space"
+	| "all-spaces"
+	| "org"
+	| "user"
+	| "no-results"
+	| "paper"
+	| "collection"
+	| "full-text-search";
+
+export interface Entry {
+	href?:        string;
+	id:           string;
+	_id?:         string;
+	imgUrl?:      string;
+	label:        string;
+	description?: string;
+	type:         EntryType;
+}

src/frontend/Types.ts

@@ -0,0 +1,49 @@
+export type QuickSearchType = "model" | "dataset" | "space" | "org" | "user" | "paper" | "collection";
+
+export type OrgFilter = "own" | "unwatched";
+export type RepoFilter = "skip_disabled" | "skip_gated" | "own" | "own_orgs";
+
+export interface QuickSearchRepoResult {
+	_id: string;
+	id:  string;
+}
+export type QuickSearchDatasetResult = QuickSearchRepoResult;
+export type QuickSearchModelResult = QuickSearchRepoResult;
+export type QuickSearchSpaceResult = QuickSearchRepoResult;
+export type QuickSearchPaperResult = QuickSearchRepoResult;
+
+export interface QuickSearchOrgResult {
+	_id:       string;
+	avatarUrl: string;
+	fullname:  string;
+	name:      string;
+}
+
+export interface QuickSearchUserResult {
+	_id:       string;
+	avatarUrl: string;
+	fullname:  string;
+	user:      string;
+}
+
+export interface QuickSearchCollectionResult {
+	_id:          string;
+	title:        string;
+	description?: string;
+}
+
+export interface QuickSearchResults {
+	datasets:         QuickSearchDatasetResult[];
+	datasetsCount:    number;
+	models:           QuickSearchModelResult[];
+	modelsCount:      number;
+	orgs:             QuickSearchOrgResult[];
+	q:                string;
+	spaces:           QuickSearchSpaceResult[];
+	spacesCount:      number;
+	users:            QuickSearchUserResult[];
+	papers:           QuickSearchPaperResult[];
+	papersCount:      number;
+	collections:      QuickSearchCollectionResult[];
+	collectionsCount: number;
+}

src/frontend/lib/ViewUtils.ts

@@ -0,0 +1,220 @@
+import type { JsonValue } from "type-fest";
+
+
+export type QueryParams = Record<string, string | number | boolean | undefined | string[]>;
+
+/**
+ *  Create a query string ("?param=value") from an object {[key]: value}.
+ *  Undefined valued are ignored, and an empty string is returned if all values are undefined.
+ */
+export function queryString(params: QueryParams): string {
+	const searchParams = new URLSearchParams();
+	for (const [key, value] of Object.entries(params)) {
+		if (value !== undefined) {
+			if (Array.isArray(value)) {
+				for (const val of value) {
+					searchParams.append(key, String(val));
+				}
+			} else {
+				searchParams.set(key, String(value));
+			}
+		}
+	}
+
+	const searchParamsStr = searchParams.toString();
+	return searchParamsStr ? `?${searchParamsStr}` : "";
+}
+
+interface HttpResponseBase<T> {
+	/** set to true if the call was aborted by the User */
+	aborted?:    boolean;
+	/** set to true if the call resulted in an error */
+	isError:     boolean;
+	/** the parsed server response, whether the call ended up in an error or not */
+	payload:     T;
+	/** a clone of the raw Response object returned by fetch, in case it is needed for some edge cases */
+	rawResponse: Response | undefined;
+	/** the request status code */
+	statusCode:  number;
+	/** Parsed links in Link header */
+	links?:      Record<string, string>;
+}
+
+interface HttpResponseError<T> extends HttpResponseBase<T> {
+	aborted: boolean;
+	error:   string;
+	isError: true;
+}
+interface HttpResponseSuccess<T> extends HttpResponseBase<T> {
+	isError: false;
+	payload: T;
+}
+
+export type HttpResponse<SuccessType, ErrorType = unknown> =
+	| HttpResponseSuccess<SuccessType>
+	| HttpResponseError<ErrorType>;
+
+
+export type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+type ResponseType = "blob" | "json" | "text";
+
+interface SendOptions<D> {
+	/** the data sent to the server */
+	data?:         D;
+	/** the request headers */
+	headers?:      Record<string, string>;
+	/**
+	 * determines how the server response will be parsed (as JSON, text, or a blob)
+	 * @default "json"
+	 */
+	responseType?: ResponseType;
+	/**
+	 * The AbortSignal interface represents a signal object that allows you to communicate with a
+	 * DOM request (such as a fetch request) and abort it if required via an AbortController object.
+	 * read more at: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
+	 */
+	signal?:       AbortSignal;
+	credentials?:  RequestCredentials;
+}
+
+
+async function getResponseContent(res: Response, type?: ResponseType): Promise<Blob | JsonValue | undefined> {
+	try {
+		if (res.headers.get("content-type")?.includes("json")) {
+			return (await res.json()) as JsonValue;
+		}
+		if (type === "blob") {
+			return await res.blob();
+		}
+		return await res.text();
+	} catch (err) {
+		return undefined;
+	}
+}
+
+/**
+ * Handle fetch calls, parse the server response, capture every possible error,
+ * and returns standardized {@link HttpResponse} objects in every scenario
+ */
+export async function httpSend<T, D = Record<string, unknown> | File>(
+	method: HttpMethod,
+	path: string,
+	sendOptions: SendOptions<D> = {}
+): Promise<HttpResponse<T>> {
+	try {
+		const headers = {
+			...sendOptions.headers,
+			...(sendOptions.responseType === "json"
+				? { Accept: "application/json" }
+				: sendOptions.responseType === "text"
+					? { Accept: "text/plain" }
+					: {}),
+		};
+		const res = await fetch(path, {
+			body:
+				sendOptions.data instanceof File
+					? sendOptions.data
+					: sendOptions.data
+						? JSON.stringify(sendOptions.data)
+						: undefined,
+			headers,
+			method,
+			...(sendOptions.signal ? { signal: sendOptions.signal } : {}),
+			...(sendOptions.credentials ? { credentials: sendOptions.credentials } : {}),
+		});
+
+		const rawResponse = res.clone();
+
+		if (!res.ok) {
+			let error = `${res.status} ${res.statusText}`;
+
+			const payload = await getResponseContent(res);
+			// In case we get a detailed JSON error message from the backend - which we should in any of the following cases:
+			// - When hitting /api/... endpoints
+			// - When using header X-Requested-With: XMLHttpRequest
+			// - When using header Content-Type: application/json
+			if (typeof payload === "object" && payload) {
+				if ("message" in payload && typeof payload.message === "string") {
+					error = payload.message;
+				} else if ("error" in payload && typeof payload.error === "string") {
+					error = payload.error;
+				}
+			}
+
+			return {
+				aborted:    false,
+				error,
+				isError:    true,
+				payload,
+				rawResponse,
+				statusCode: res.status,
+			};
+		}
+
+		const payload = await getResponseContent(res, sendOptions.responseType);
+		const links = res.headers.get("Link") ? parseLinkHeader(res.headers.get("Link")!) : undefined;
+		return payload !== undefined
+			? {
+				isError:    false,
+				payload:    payload as T,
+				rawResponse,
+				statusCode: res.status,
+				links,
+			}
+			: {
+				aborted:    false,
+				error:      sendOptions.responseType === "json" ? "Error parsing JSON" : "Error parsing server response",
+				isError:    true,
+				payload,
+				rawResponse,
+				statusCode: res.status,
+				links,
+			};
+	} catch (e) {
+		return {
+			aborted:     e instanceof DOMException && e.name === "AbortError",
+			error:       (e instanceof TypeError || e instanceof DOMException) && e.message ? e.message : "Failed to fetch",
+			isError:     true,
+			payload:     undefined,
+			rawResponse: undefined,
+			statusCode:  0,
+		};
+	}
+}
+
+type GetOptions = Omit<SendOptions<unknown>, "data">;
+
+/**
+ * Helper function to easily and safely make GET calls
+ */
+export function httpGet<T>(path: string, opts: GetOptions = {}): Promise<HttpResponse<T>> {
+	return httpSend<T>("GET", path, { ...opts });
+}
+
+export function parseLinkHeader(header: string): Record<string, string> {
+	const regex = /<(https?:[/][/][^>]+)>;\s+rel="([^"]+)"/g;
+
+	return Object.fromEntries([...header.matchAll(regex)].map(([_, url, rel]) => [rel, url]));
+}
+
+
+/// A not-that-great throttling function
+export function throttle<T extends unknown[]>(callback: (...rest: T) => unknown, limit: number): (...rest: T) => void {
+	let last: number;
+	/// setTimeout can return different types on browser or node
+	let deferTimer: ReturnType<typeof setTimeout>;
+
+	return function (...rest) {
+		const now = Date.now();
+		if (last && now < last + limit) {
+			clearTimeout(deferTimer);
+			deferTimer = setTimeout(function () {
+				last = now;
+				callback(...rest);
+			}, limit);
+		} else {
+			last = now;
+			callback(...rest);
+		}
+	};
+}

src/frontend/package-lock.json

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

src/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "gradio_hubquicksearch",
+  "version": "0.1.13",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.6.1",
+    "@gradio/icons": "0.3.4",
+    "@gradio/statustracker": "0.4.10",
+    "@gradio/utils": "0.3.0"
+  },
+  "devDependencies": {
+    "type-fest": "^4.15.0"
+  }
+}

src/pyproject.toml

@@ -0,0 +1,42 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_hubquicksearch"
+version = "0.0.1"
+description = "Quick search HF Hub repos or users"
+readme = "README.md"
+license = "MIT"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "gradio-template-SimpleTextbox", "huggingface hub", "hub", "huggingface"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'License :: OSI Approved :: Apache Software License',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_hubquicksearch/templates", "*.pyi", "backend/gradio_hubquicksearch/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_hubquicksearch"]