Upload folder using huggingface_hub

.gitignore

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

README.md

@@ -1,12 +1,259 @@
 ---
-title: Gradio Molecule2d
-emoji: 🚀
-colorFrom: indigo
-colorTo: blue
+tags: [gradio-custom-component, SimpleTextbox, chemistry, smiles]
+title: gradio_molecule2d
+short_description: Input smiles strings and visualize them
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 4.28.3
-app_file: app.py
 pinned: false
+app_file: space.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_molecule2d`
+<a href="https://pypi.org/project/gradio_molecule2d/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_molecule2d"></a>  
+
+Input chemical molecules as smiles strings and visualize them
+
+## Installation
+
+```bash
+pip install gradio_molecule2d
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_molecule2d import molecule2d
+
+
+example = molecule2d().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    molecule2d(),  # interactive version of your component
+    molecule2d(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `molecule2d`
+
+### 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 molecule2d 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 molecule2d. |
+| `submit` | This listener is triggered when the user presses the Enter key while the molecule2d 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
+ ```
+ 

app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_molecule2d import molecule2d
+
+
+example = molecule2d().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    molecule2d(),  # interactive version of your component
+    molecule2d(),  # 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_molecule2d

space.py

@@ -0,0 +1,139 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'molecule2d': {'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 molecule2d 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 molecule2d.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the molecule2d is focused.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'molecule2d': []}}}
+
+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_molecule2d`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_molecule2d/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_molecule2d"></a>  
+</div>
+
+Input chemical molecules as smiles strings and visualize them
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_molecule2d
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_molecule2d import molecule2d
+
+
+example = molecule2d().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    molecule2d(),  # interactive version of your component
+    molecule2d(),  # 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("""
+## `molecule2d`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["molecule2d"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["molecule2d"]["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", "molecule2d-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          molecule2d: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

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

src/README.md

@@ -0,0 +1,259 @@
+---
+tags: [gradio-custom-component, SimpleTextbox, chemistry, smiles]
+title: gradio_molecule2d
+short_description: Input smiles strings and visualize them
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_molecule2d`
+<a href="https://pypi.org/project/gradio_molecule2d/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_molecule2d"></a>  
+
+Input chemical molecules as smiles strings and visualize them
+
+## Installation
+
+```bash
+pip install gradio_molecule2d
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_molecule2d import molecule2d
+
+
+example = molecule2d().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    molecule2d(),  # interactive version of your component
+    molecule2d(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `molecule2d`
+
+### 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 molecule2d 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 molecule2d. |
+| `submit` | This listener is triggered when the user presses the Enter key while the molecule2d 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_molecule2d/__init__.py

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

src/backend/gradio_molecule2d/molecule2d.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 molecule2d(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_molecule2d/templates/component/style.css

@@ -0,0 +1 @@
+.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1yk38uw.svelte-1yk38uw{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}.wrap.center.svelte-1yk38uw.svelte-1yk38uw{top:0;right:0;left:0}.wrap.default.svelte-1yk38uw.svelte-1yk38uw{top:0;right:0;bottom:0;left:0}.hide.svelte-1yk38uw.svelte-1yk38uw{opacity:0;pointer-events:none}.generating.svelte-1yk38uw.svelte-1yk38uw{animation:svelte-1yk38uw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1)}.translucent.svelte-1yk38uw.svelte-1yk38uw{background:none}@keyframes svelte-1yk38uw-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1yk38uw.svelte-1yk38uw{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1yk38uw.svelte-1yk38uw{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1yk38uw.svelte-1yk38uw{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1yk38uw.svelte-1yk38uw{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1yk38uw.svelte-1yk38uw{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1yk38uw.svelte-1yk38uw{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1yk38uw.svelte-1yk38uw{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1yk38uw.svelte-1yk38uw{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1yk38uw.svelte-1yk38uw{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1yk38uw .progress-text.svelte-1yk38uw{background:var(--block-background-fill)}.border.svelte-1yk38uw.svelte-1yk38uw{border:1px solid var(--border-color-primary)}.clear-status.svelte-1yk38uw.svelte-1yk38uw{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}svg.svelte-zjukdr{width:100%;height:400px}div.svelte-181q4hi{display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.not-absolute.svelte-181q4hi{margin:var(--size-1)}iframe.svelte-rryiqv{width:100%;height:65vh}/*! tailwindcss v4.0.0-alpha.14 | MIT License | https://tailwindcss.com */@layer theme{:root{--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-family-sans);--default-font-feature-settings:var(--font-family-sans--font-feature-settings);--default-font-variation-settings:var(--font-family-sans--font-variation-settings);--default-mono-font-family:var(--font-family-mono);--default-mono-font-feature-settings:var(--font-family-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-family-mono--font-variation-settings);--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--color-black:#000;--color-white:#fff;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-gray-950:#030712;--color-zinc-50:#fafafa;--color-zinc-100:#f4f4f5;--color-zinc-200:#e4e4e7;--color-zinc-300:#d4d4d8;--color-zinc-400:#a1a1aa;--color-zinc-500:#71717a;--color-zinc-600:#52525b;--color-zinc-700:#3f3f46;--color-zinc-800:#27272a;--color-zinc-900:#18181b;--color-zinc-950:#09090b;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-neutral-950:#0a0a0a;--color-stone-50:#fafaf9;--color-stone-100:#f5f5f4;--color-stone-200:#e7e5e4;--color-stone-300:#d6d3d1;--color-stone-400:#a8a29e;--color-stone-500:#78716c;--color-stone-600:#57534e;--color-stone-700:#44403c;--color-stone-800:#292524;--color-stone-900:#1c1917;--color-stone-950:#0c0a09;--color-red-50:#fef2f2;--color-red-100:#fee2e2;--color-red-200:#fecaca;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-red-900:#7f1d1d;--color-red-950:#450a0a;--color-orange-50:#fff7ed;--color-orange-100:#ffedd5;--color-orange-200:#fed7aa;--color-orange-300:#fdba74;--color-orange-400:#fb923c;--color-orange-500:#f97316;--color-orange-600:#ea580c;--color-orange-700:#c2410c;--color-orange-800:#9a3412;--color-orange-900:#7c2d12;--color-orange-950:#431407;--color-amber-50:#fffbeb;--color-amber-100:#fef3c7;--color-amber-200:#fde68a;--color-amber-300:#fcd34d;--color-amber-400:#fbbf24;--color-amber-500:#f59e0b;--color-amber-600:#d97706;--color-amber-700:#b45309;--color-amber-800:#92400e;--color-amber-900:#78350f;--color-amber-950:#451a03;--color-yellow-50:#fefce8;--color-yellow-100:#fef9c3;--color-yellow-200:#fef08a;--color-yellow-300:#fde047;--color-yellow-400:#facc15;--color-yellow-500:#eab308;--color-yellow-600:#ca8a04;--color-yellow-700:#a16207;--color-yellow-800:#854d0e;--color-yellow-900:#713f12;--color-yellow-950:#422006;--color-lime-50:#f7fee7;--color-lime-100:#ecfccb;--color-lime-200:#d9f99d;--color-lime-300:#bef264;--color-lime-400:#a3e635;--color-lime-500:#84cc16;--color-lime-600:#65a30d;--color-lime-700:#4d7c0f;--color-lime-800:#3f6212;--color-lime-900:#365314;--color-lime-950:#1a2e05;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-500:#22c55e;--color-green-600:#16a34a;--color-green-700:#15803d;--color-green-800:#166534;--color-green-900:#14532d;--color-green-950:#052e16;--color-emerald-50:#ecfdf5;--color-emerald-100:#d1fae5;--color-emerald-200:#a7f3d0;--color-emerald-300:#6ee7b7;--color-emerald-400:#34d399;--color-emerald-500:#10b981;--color-emerald-600:#059669;--color-emerald-700:#047857;--color-emerald-800:#065f46;--color-emerald-900:#064e3b;--color-emerald-950:#022c22;--color-teal-50:#f0fdfa;--color-teal-100:#ccfbf1;--color-teal-200:#99f6e4;--color-teal-300:#5eead4;--color-teal-400:#2dd4bf;--color-teal-500:#14b8a6;--color-teal-600:#0d9488;--color-teal-700:#0f766e;--color-teal-800:#115e59;--color-teal-900:#134e4a;--color-teal-950:#042f2e;--color-cyan-50:#ecfeff;--color-cyan-100:#cffafe;--color-cyan-200:#a5f3fc;--color-cyan-300:#67e8f9;--color-cyan-400:#22d3ee;--color-cyan-500:#06b6d4;--color-cyan-600:#0891b2;--color-cyan-700:#0e7490;--color-cyan-800:#155e75;--color-cyan-900:#164e63;--color-cyan-950:#083344;--color-sky-50:#f0f9ff;--color-sky-100:#e0f2fe;--color-sky-200:#bae6fd;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-sky-700:#0369a1;--color-sky-800:#075985;--color-sky-900:#0c4a6e;--color-sky-950:#082f49;--color-blue-50:#eff6ff;--color-blue-100:#dbeafe;--color-blue-200:#bfdbfe;--color-blue-300:#93c5fd;--color-blue-400:#60a5fa;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-blue-800:#1e40af;--color-blue-900:#1e3a8a;--color-blue-950:#172554;--color-indigo-50:#eef2ff;--color-indigo-100:#e0e7ff;--color-indigo-200:#c7d2fe;--color-indigo-300:#a5b4fc;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-indigo-700:#4338ca;--color-indigo-800:#3730a3;--color-indigo-900:#312e81;--color-indigo-950:#1e1b4b;--color-violet-50:#f5f3ff;--color-violet-100:#ede9fe;--color-violet-200:#ddd6fe;--color-violet-300:#c4b5fd;--color-violet-400:#a78bfa;--color-violet-500:#8b5cf6;--color-violet-600:#7c3aed;--color-violet-700:#6d28d9;--color-violet-800:#5b21b6;--color-violet-900:#4c1d95;--color-violet-950:#2e1065;--color-purple-50:#faf5ff;--color-purple-100:#f3e8ff;--color-purple-200:#e9d5ff;--color-purple-300:#d8b4fe;--color-purple-400:#c084fc;--color-purple-500:#a855f7;--color-purple-600:#9333ea;--color-purple-700:#7e22ce;--color-purple-800:#6b21a8;--color-purple-900:#581c87;--color-purple-950:#3b0764;--color-fuchsia-50:#fdf4ff;--color-fuchsia-100:#fae8ff;--color-fuchsia-200:#f5d0fe;--color-fuchsia-300:#f0abfc;--color-fuchsia-400:#e879f9;--color-fuchsia-500:#d946ef;--color-fuchsia-600:#c026d3;--color-fuchsia-700:#a21caf;--color-fuchsia-800:#86198f;--color-fuchsia-900:#701a75;--color-fuchsia-950:#4a044e;--color-pink-50:#fdf2f8;--color-pink-100:#fce7f3;--color-pink-200:#fbcfe8;--color-pink-300:#f9a8d4;--color-pink-400:#f472b6;--color-pink-500:#ec4899;--color-pink-600:#db2777;--color-pink-700:#be185d;--color-pink-800:#9d174d;--color-pink-900:#831843;--color-pink-950:#500724;--color-rose-50:#fff1f2;--color-rose-100:#ffe4e6;--color-rose-200:#fecdd3;--color-rose-300:#fda4af;--color-rose-400:#fb7185;--color-rose-500:#f43f5e;--color-rose-600:#e11d48;--color-rose-700:#be123c;--color-rose-800:#9f1239;--color-rose-900:#881337;--color-rose-950:#4c0519;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur:8px;--blur-sm:4px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--radius:.25rem;--radius-sm:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-xs:0 1px #0000000d;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-inner:inset 0 2px 4px 0 #0000000d;--inset-shadow-xs:inset 0 1px #0000000d;--inset-shadow-sm:inset 0 1px 1px #0000000d;--inset-shadow:inset 0 2px 4px #0000000d;--drop-shadow:0 1px 2px #0000001a,0 1px 1px #0000000f;--drop-shadow-sm:0 1px 1px #0000000d;--drop-shadow-md:0 4px 3px #00000012,0 2px 2px #0000000f;--drop-shadow-lg:0 10px 8px #0000000a,0 4px 3px #0000001a;--drop-shadow-xl:0 20px 13px #00000008,0 8px 5px #00000014;--drop-shadow-2xl:0 25px 25px #00000026;--spacing-px:1px;--spacing-0:0px;--spacing-0_5:.125rem;--spacing-1:.25rem;--spacing-1_5:.375rem;--spacing-2:.5rem;--spacing-2_5:.625rem;--spacing-3:.75rem;--spacing-3_5:.875rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-11:2.75rem;--spacing-12:3rem;--spacing-14:3.5rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-44:11rem;--spacing-48:12rem;--spacing-52:13rem;--spacing-56:14rem;--spacing-60:15rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--width-3xs:16rem;--width-2xs:18rem;--width-xs:20rem;--width-sm:24rem;--width-md:28rem;--width-lg:32rem;--width-xl:36rem;--width-2xl:42rem;--width-3xl:48rem;--width-4xl:56rem;--width-5xl:64rem;--width-6xl:72rem;--width-7xl:80rem;--width-prose:65ch;--font-family-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-family-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-size-xs:.75rem;--font-size-xs--line-height:1rem;--font-size-sm:.875rem;--font-size-sm--line-height:1.25rem;--font-size-base:1rem;--font-size-base--line-height:1.5rem;--font-size-lg:1.125rem;--font-size-lg--line-height:1.75rem;--font-size-xl:1.25rem;--font-size-xl--line-height:1.75rem;--font-size-2xl:1.5rem;--font-size-2xl--line-height:2rem;--font-size-3xl:1.875rem;--font-size-3xl--line-height:2.25rem;--font-size-4xl:2.25rem;--font-size-4xl--line-height:2.5rem;--font-size-5xl:3rem;--font-size-5xl--line-height:1;--font-size-6xl:3.75rem;--font-size-6xl--line-height:1;--font-size-7xl:4.5rem;--font-size-7xl--line-height:1;--font-size-8xl:6rem;--font-size-8xl--line-height:1;--font-size-9xl:8rem;--font-size-9xl--line-height:1;--letter-spacing-tighter:-.05em;--letter-spacing-tight:-.025em;--letter-spacing-normal:0em;--letter-spacing-wide:.025em;--letter-spacing-wider:.05em;--letter-spacing-widest:.1em;--line-height-none:1;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--line-height-3:.75rem;--line-height-4:1rem;--line-height-5:1.25rem;--line-height-6:1.5rem;--line-height-7:1.75rem;--line-height-8:2rem;--line-height-9:2.25rem;--line-height-10:2.5rem;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--transition-timing-function-linear:linear;--transition-timing-function-in:cubic-bezier(.4,0,1,1);--transition-timing-function-out:cubic-bezier(0,0,.2,1);--transition-timing-function-in-out:cubic-bezier(.4,0,.2,1)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:0 0}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border:1px solid}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static,.static\/Loader,.static\/Toast,.static\/index,.static\/types{position:static}.top-0{top:var(--spacing-0,0px)}.left-0{left:var(--spacing-0,0px)}.z-10{z-index:10}.my-10{margin-top:var(--spacing-10,2.5rem);margin-bottom:var(--spacing-10,2.5rem)}.mr-2{margin-right:var(--spacing-2,.5rem)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.h-4{height:var(--spacing-4,1rem)}.w-4{width:var(--spacing-4,1rem)}.w-full{width:100%}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.py-10{padding-top:var(--spacing-10,2.5rem);padding-bottom:var(--spacing-10,2.5rem)}.text-center{text-align:center}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.text-gray-600{color:var(--color-gray-600,#4b5563)}.\!ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@property --tw-rotate-x{syntax:"<transform-function>";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"<transform-function>";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"<transform-function>";inherits:false;initial-value:rotate(0)}@property --tw-skew-x{syntax:"<transform-function>";inherits:false;initial-value:skew(0)}@property --tw-skew-y{syntax:"<transform-function>";inherits:false;initial-value:skewY(0)}@property --tw-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-colored{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-colored{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}label.svelte-q9tvhg.svelte-q9tvhg{display:block;width:100%}input.svelte-q9tvhg.svelte-q9tvhg{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.svelte-q9tvhg>input.svelte-q9tvhg{border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-radius)}input.svelte-q9tvhg.svelte-q9tvhg:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1}input.svelte-q9tvhg.svelte-q9tvhg:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}input.svelte-q9tvhg.svelte-q9tvhg::placeholder{color:var(--input-placeholder-color)}button.svelte-q9tvhg.svelte-q9tvhg{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);padding:10px 15px;text-align:center;border-radius:10px;border:#eee solid 1px}button.svelte-q9tvhg.svelte-q9tvhg:hover{box-shadow:var(--button-shadow-hover)}button.svelte-q9tvhg.svelte-q9tvhg:active{box-shadow:var(--button-shadow-active)}

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

@@ -0,0 +1,115 @@
+const {
+  SvelteComponent: b,
+  add_iframe_resize_listener: y,
+  add_render_callback: v,
+  append: h,
+  attr: m,
+  binding_callbacks: w,
+  detach: z,
+  element: k,
+  init: p,
+  insert: S,
+  noop: f,
+  safe_not_equal: q,
+  set_data: C,
+  text: E,
+  toggle_class: r
+} = window.__gradio__svelte__internal, { onMount: M } = window.__gradio__svelte__internal;
+function P(t) {
+  let e, n = (
+    /*value*/
+    (t[0] ? (
+      /*value*/
+      t[0]
+    ) : "") + ""
+  ), _, d;
+  return {
+    c() {
+      e = k("div"), _ = E(n), m(e, "class", "svelte-84cxb8"), v(() => (
+        /*div_elementresize_handler*/
+        t[5].call(e)
+      )), r(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), r(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), r(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    m(l, s) {
+      S(l, e, s), h(e, _), d = y(
+        e,
+        /*div_elementresize_handler*/
+        t[5].bind(e)
+      ), t[6](e);
+    },
+    p(l, [s]) {
+      s & /*value*/
+      1 && n !== (n = /*value*/
+      (l[0] ? (
+        /*value*/
+        l[0]
+      ) : "") + "") && C(_, n), s & /*type*/
+      2 && r(
+        e,
+        "table",
+        /*type*/
+        l[1] === "table"
+      ), s & /*type*/
+      2 && r(
+        e,
+        "gallery",
+        /*type*/
+        l[1] === "gallery"
+      ), s & /*selected*/
+      4 && r(
+        e,
+        "selected",
+        /*selected*/
+        l[2]
+      );
+    },
+    i: f,
+    o: f,
+    d(l) {
+      l && z(e), d(), t[6](null);
+    }
+  };
+}
+function W(t, e, n) {
+  let { value: _ } = e, { type: d } = e, { selected: l = !1 } = e, s, a;
+  function c(i, u) {
+    !i || !u || (a.style.setProperty("--local-text-width", `${u < 150 ? u : 200}px`), n(4, a.style.whiteSpace = "unset", a));
+  }
+  M(() => {
+    c(a, s);
+  });
+  function o() {
+    s = this.clientWidth, n(3, s);
+  }
+  function g(i) {
+    w[i ? "unshift" : "push"](() => {
+      a = i, n(4, a);
+    });
+  }
+  return t.$$set = (i) => {
+    "value" in i && n(0, _ = i.value), "type" in i && n(1, d = i.type), "selected" in i && n(2, l = i.selected);
+  }, [_, d, l, s, a, o, g];
+}
+class j extends b {
+  constructor(e) {
+    super(), p(this, e, W, P, q, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  j as default
+};

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

@@ -0,0 +1 @@
+.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{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_molecule2d import molecule2d
+
+
+example = molecule2d().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    molecule2d(),  # interactive version of your component
+    molecule2d(),  # 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/requirements.txt

@@ -0,0 +1 @@
+gradio_molecule2d

src/demo/space.py

@@ -0,0 +1,139 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'molecule2d': {'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 molecule2d 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 molecule2d.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the molecule2d is focused.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'molecule2d': []}}}
+
+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_molecule2d`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_molecule2d/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_molecule2d"></a>  
+</div>
+
+Input chemical molecules as smiles strings and visualize them
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_molecule2d
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_molecule2d import molecule2d
+
+
+example = molecule2d().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    molecule2d(),  # interactive version of your component
+    molecule2d(),  # 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("""
+## `molecule2d`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["molecule2d"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["molecule2d"]["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", "molecule2d-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          molecule2d: [], };
+    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/ClearButton.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { IconButton } from "@gradio/atoms";
+  import { Clear } from "@gradio/icons";
+
+  import { createEventDispatcher } from "svelte";
+
+  export let absolute = true;
+
+  const dispatch = createEventDispatcher<{
+    clear?: never;
+  }>();
+</script>
+
+<div
+  class:not-absolute={!absolute}
+  style:position={absolute ? "absolute" : "static"}
+>
+  <IconButton
+    Icon={Clear}
+    label="Finish drawing"
+    size="large"
+    on:click={(event) => {
+      dispatch("clear");
+      event.stopPropagation();
+    }}
+  />
+</div>
+
+<style>
+  div {
+    display: flex;
+    top: var(--size-2);
+    right: var(--size-2);
+    justify-content: flex-end;
+    gap: var(--spacing-sm);
+    z-index: var(--layer-1);
+  }
+
+  .not-absolute {
+    margin: var(--size-1);
+  }
+</style>

src/frontend/Editor.svelte

@@ -0,0 +1,121 @@
+<script>
+  // no good unbloated molecule sketch tool.
+  // we load ketcher in frame if user want's to draw
+
+  // create event dispatcher
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  import ClearButton from "./ClearButton.svelte";
+
+  function getsmiles() {
+    const iframe = document.querySelector("iframe");
+    const ketcher = iframe.contentWindow.ketcher;
+    ketcher.getSmiles().then((smiles) => {
+      dispatch("moleculesketched", {
+        smiles: smiles,
+      });
+    });
+  }
+
+  let ketcherDoc = `<!DOCTYPE html>
+<html>
+  <head> </head>
+  <body style="background:white; padding-top:4rem; height:100%">
+    <div
+      id="loading"
+      style="display: flex; justify-content: center; align-items: center"
+    >
+      <p style="padding: 0.2rem 1rem 0 0; color: #c1c1c1; font-size: 1rem">
+        loading SMILES editor
+      </p>
+      <svg
+        version="1.1"
+        id="L4"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+        width="5rem"
+      >
+        <circle fill="#FF7C00" stroke="none" cx="6" cy="50" r="6">
+          <animate
+            attributeName="opacity"
+            dur="1s"
+            values="0;1;0"
+            repeatCount="indefinite"
+            begin="0.1"
+          />
+        </circle>
+        <circle fill="#FF7C00" stroke="none" cx="26" cy="50" r="6">
+          <animate
+            attributeName="opacity"
+            dur="1s"
+            values="0;1;0"
+            repeatCount="indefinite"
+            begin="0.2"
+          />
+        </circle>
+        <circle fill="#FF7C00" stroke="none" cx="46" cy="50" r="6">
+          <animate
+            attributeName="opacity"
+            dur="1s"
+            values="0;1;0"
+            repeatCount="indefinite"
+            begin="0.3"
+          />
+        </circle>
+      </svg>
+    </div>
+    <div id="root"></div>
+    <script>
+      window.onload = function () {
+        var loadingDiv = document.getElementById("loading");
+        loadingDiv.style.display = "flex";
+        //load css
+        let url =
+          "https://huggingface.co/datasets/simonduerr/ketcher-2.7.2/raw/main/static/css/main.6a646761.css";
+        fetch(url)
+          .then((res) => res.text())
+          .then((text) => {
+            const style = document.createElement("style");
+            style.textContent = text;
+            document.head.appendChild(style);
+          });
+        //load ketcher
+        url =
+          "https://huggingface.co/datasets/simonduerr/ketcher-2.7.2/resolve/main/static/js/main.5445f351.js";
+        fetch(url)
+          .then((res) => res.text())
+          .then((text) => {
+            const script = document.createElement("script");
+            //script.type = "module"
+            script.src = URL.createObjectURL(
+              new Blob([text], { type: "application/javascript" })
+            );
+            document.head.appendChild(script);
+            loadingDiv.style.display = "none";
+          });
+      };
+
+    </\script>
+  </body>
+</html>
+`;
+</script>
+
+<ClearButton on:clear={getsmiles} />
+
+<div class="composerWrapper">
+  <iframe srcdoc={ketcherDoc} />
+</div>
+
+<style>
+  iframe {
+    width: 100%;
+    height: 65vh;
+  }
+</style>

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/Index.svelte

@@ -0,0 +1,261 @@
+<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 Viewer from "./Viewer.svelte";
+  import Editor from "./Editor.svelte";
+
+  import { BaseButton } from "@gradio/button";
+
+  import { Sketch } from "@gradio/icons";
+
+  import "./style.css";
+
+  export let gradio: Gradio<{
+    change: never;
+    submit: never;
+    input: never;
+    clear_status: LoadingStatus;
+  }>;
+  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;
+
+  let retrieveSmiles;
+
+  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");
+    }
+  }
+
+  $: 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();
+
+  let showeditor = false;
+
+  function handleMolecule(event) {
+    value = event.detail.smiles;
+    showeditor = false;
+  }
+
+  function showEditor() {
+    showeditor = true;
+  }
+</script>
+
+<Block
+  {visible}
+  {elem_id}
+  {elem_classes}
+  {scale}
+  {min_width}
+  allow_overflow={false}
+  padding={true}
+>
+  <div style="min-height: 70vh;">
+    {#if loading_status}
+      <StatusTracker
+        autoscroll={gradio.autoscroll}
+        i18n={gradio.i18n}
+        {...loading_status}
+        on:clear_status={() => gradio.dispatch("clear_status", 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:keypress={handle_keypress}
+      />
+    </label>
+
+    <Viewer smiles={value} />
+
+    <div class="w-full flex justify-center">
+      <button on:click={showEditor} class="flex items-center">
+        <div class="w-4 h-4 mr-2"><Sketch /></div>
+        <span>Draw molecule</span>
+      </button>
+    </div>
+
+    {#if showeditor}
+      <div class="absolute top-0 left-0 w-full z-10" style="height: 100%">
+        <Editor on:moleculesketched={handleMolecule} />
+      </div>
+    {/if}
+  </div>
+</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);
+  }
+  button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: var(--button-transition);
+    box-shadow: var(--button-shadow);
+    padding: 10px 15px;
+    text-align: center;
+    border-radius: 10px;
+    border: #eee solid 1px;
+  }
+
+  button:hover,
+  button[disabled],
+  a:hover,
+  a.disabled {
+    box-shadow: var(--button-shadow-hover);
+  }
+
+  button:active,
+  a:active {
+    box-shadow: var(--button-shadow-active);
+  }
+
+  button[disabled],
+  a.disabled {
+    opacity: 0.5;
+    filter: grayscale(30%);
+    cursor: not-allowed;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .primary {
+    border: var(--button-border-width) solid var(--button-primary-border-color);
+    background: var(--button-primary-background-fill);
+    color: var(--button-primary-text-color);
+  }
+  .primary:hover,
+  .primary[disabled] {
+    border-color: var(--button-primary-border-color-hover);
+    background: var(--button-primary-background-fill-hover);
+    color: var(--button-primary-text-color-hover);
+  }
+
+  .secondary {
+    border: var(--button-border-width) solid
+      var(--button-secondary-border-color);
+    background: var(--button-secondary-background-fill);
+    color: var(--button-secondary-text-color);
+  }
+
+  .secondary:hover,
+  .secondary[disabled] {
+    border-color: var(--button-secondary-border-color-hover);
+    background: var(--button-secondary-background-fill-hover);
+    color: var(--button-secondary-text-color-hover);
+  }
+
+  .stop {
+    border: var(--button-border-width) solid var(--button-cancel-border-color);
+    background: var(--button-cancel-background-fill);
+    color: var(--button-cancel-text-color);
+  }
+
+  .stop:hover,
+  .stop[disabled] {
+    border-color: var(--button-cancel-border-color-hover);
+    background: var(--button-cancel-background-fill-hover);
+    color: var(--button-cancel-text-color-hover);
+  }
+
+  .sm {
+    border-radius: var(--button-small-radius);
+    padding: var(--button-small-padding);
+    font-weight: var(--button-small-text-weight);
+    font-size: var(--button-small-text-size);
+  }
+
+  .lg {
+    border-radius: var(--button-large-radius);
+    padding: var(--button-large-padding);
+    font-weight: var(--button-large-text-weight);
+    font-size: var(--button-large-text-size);
+  }
+
+  .button-icon {
+    width: var(--text-xl);
+    height: var(--text-xl);
+    margin-right: var(--spacing-xl);
+  }
+</style>

src/frontend/Viewer.svelte

@@ -0,0 +1,40 @@
+<!--file:Molecule.svlete-->
+<!--Tested against v2.1.7 of smiles-drawer-->
+<script>
+  import { afterUpdate } from "svelte";
+  import SmilesDrawer from "smiles-drawer";
+
+  export let smiles = "";
+
+  const SETTINGS = {
+    width: 300,
+    height: 200,
+  };
+  let drawer = new SmilesDrawer.SvgDrawer(SETTINGS);
+  let svgElement;
+
+  afterUpdate(() => {
+    SmilesDrawer.parse(smiles, function (tree) {
+      drawer.draw(tree, svgElement, "light");
+    });
+  });
+</script>
+
+{#if smiles.length > 0}
+  <div>
+    <svg bind:this={svgElement} data-smiles={smiles} />
+  </div>
+{:else}
+  <div class="text-center my-10 py-10 text-gray-600">
+    No molecule to display
+  </div>
+{/if}
+
+<style>
+  svg {
+    width: 100%;
+    height: 400px;
+  }
+
+  @import "tailwindcss";
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+import { mdsvex } from "mdsvex";
+
+export default {
+    plugins: [tailwindcss()],
+    svelte: {
+        preprocess: [
+            mdsvex()
+        ]
+    }
+};

src/frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gradio_molecule2d",
+  "version": "0.2.0",
+  "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.7.1",
+    "@gradio/button": "^0.2.32",
+    "@gradio/icons": "0.4.0",
+    "@gradio/statustracker": "0.5.0",
+    "@gradio/upload": "^0.9.0",
+    "@gradio/utils": "0.4.0",
+    "@tailwindcss/oxide-linux-x64-gnu": "^0.0.0-insiders.8fb9ae8f",
+    "@tailwindcss/vite": "^4.0.0-alpha.14",
+    "kekule": "^1.0.0",
+    "mdsvex": "^0.11.0",
+    "smiles-drawer": "^2.1.7",
+    "tailwindcss": "^4.0.0-alpha.14"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.8.3"
+  }
+}

src/frontend/style.css

@@ -0,0 +1,2 @@
+  @import "tailwindcss";
+

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_molecule2d"
+version = "0.0.1"
+description = "Input chemical molecules as smiles strings and visualize them"
+readme = "README.md"
+license = "mit"
+requires-python = ">=3.8"
+authors = [{ name = "Simon Dürr", email = "dev@simonduerr.eu" }]
+keywords = ["gradio-custom-component", "gradio-template-SimpleTextbox", "chemistry", "smiles"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_molecule2d/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_molecule2d"]