Upload folder using huggingface_hub

Dockerfile

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

README.md

@@ -1,10 +1,17 @@
+
 ---
-title: Gradio Coolcanvas
-emoji: 🔥
-colorFrom: yellow
-colorTo: gray
+tags: [gradio-custom-component,gradio-template-Group]
+title: gradio_coolcanvas V0.0.1
+colorFrom: blue
+colorTo: red
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Name: gradio_coolcanvas
+
+Description: Python library for easily interacting with trained machine learning models
+
+Install with: pip install gradio_coolcanvas

app.py

@@ -0,0 +1,117 @@
+
+import gradio as gr
+from gradio_coolcanvas import CoolCanvas
+
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    with CoolCanvas():
+        gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+        gr.Markdown("### This is the same set put in a gr.Group.")
+        with gr.Group():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row, no group.")
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row in a group.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+                gr.Image()
+                gr.Slider()
+
+        gr.Markdown("### Several rows grouped together.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+            with gr.Row():
+                gr.Image()
+                gr.Audio()
+
+        gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+        with gr.Group():
+            with gr.Row():
+                with gr.Column():
+                    name = gr.Textbox(label="Name")
+                    btn = gr.Button("Hello")
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    gr.Number()
+                    gr.Textbox()
+                with gr.Column():
+                    gr.Image()
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    with gr.Row():
+                        gr.Number(scale=2)
+                        gr.Textbox()
+
+        gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+        gr.Radio([1,2,3], container=False)
+        gr.Textbox(container=False)
+        gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+        gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+        with gr.Group():
+            name = gr.Textbox(label="Name")
+            output = gr.Textbox(show_label=False, container=False)
+            greet_btn = gr.Button("Greet")
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+                gr.Textbox(container=False)
+                gr.Number(container=False)
+                gr.Image(height=100)
+        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+        gr.Markdown("### More examples")
+
+        with gr.Group():
+            gr.Chatbot()
+            with gr.Row():
+                name = gr.Textbox(label="Prompot", container=False)
+                go = gr.Button("go", scale=0)
+
+        with gr.Column():
+            gr.Radio([1,2,3], container=False)
+            gr.Slider(0, 20, container=False)
+
+        with gr.Group():
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+                gr.Number(container=False)
+                gr.Textbox(container=False)
+
+        with gr.Row():
+            with gr.Column():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            with gr.Column():
+                gr.Number(container=False)
+            with gr.Column():
+                gr.Textbox(container=False)
+
+
+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_coolcanvas-0.0.1-py3-none-any.whl

space.py

@@ -0,0 +1,211 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'CoolCanvas': {'description': 'CoolCanvas is a layout element within Blocks which groups together children so that\nthey do not have any padding or margin between them.\n    with gr.Group():\n        gr.Textbox(label="First")\n        gr.Textbox(label="Last")', 'members': {'__init__': {'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, group will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}}, 'events': {}}, '__meta__': {'additional_interfaces': {}}}
+    
+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_coolcanvas`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Python library for easily interacting with trained machine learning models
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_coolcanvas
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_coolcanvas import CoolCanvas
+
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    with CoolCanvas():
+        gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+        gr.Markdown("### This is the same set put in a gr.Group.")
+        with gr.Group():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row, no group.")
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row in a group.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+                gr.Image()
+                gr.Slider()
+
+        gr.Markdown("### Several rows grouped together.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+            with gr.Row():
+                gr.Image()
+                gr.Audio()
+
+        gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+        with gr.Group():
+            with gr.Row():
+                with gr.Column():
+                    name = gr.Textbox(label="Name")
+                    btn = gr.Button("Hello")
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    gr.Number()
+                    gr.Textbox()
+                with gr.Column():
+                    gr.Image()
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    with gr.Row():
+                        gr.Number(scale=2)
+                        gr.Textbox()
+
+        gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+        gr.Radio([1,2,3], container=False)
+        gr.Textbox(container=False)
+        gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+        gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+        with gr.Group():
+            name = gr.Textbox(label="Name")
+            output = gr.Textbox(show_label=False, container=False)
+            greet_btn = gr.Button("Greet")
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+                gr.Textbox(container=False)
+                gr.Number(container=False)
+                gr.Image(height=100)
+        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+        gr.Markdown("### More examples")
+
+        with gr.Group():
+            gr.Chatbot()
+            with gr.Row():
+                name = gr.Textbox(label="Prompot", container=False)
+                go = gr.Button("go", scale=0)
+
+        with gr.Column():
+            gr.Radio([1,2,3], container=False)
+            gr.Slider(0, 20, container=False)
+
+        with gr.Group():
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+                gr.Number(container=False)
+                gr.Textbox(container=False)
+
+        with gr.Row():
+            with gr.Column():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            with gr.Column():
+                gr.Number(container=False)
+            with gr.Column():
+                gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `CoolCanvas`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["CoolCanvas"]["members"]["__init__"], linkify=[])
+
+
+
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {};
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+        
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

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

src/README.md

@@ -0,0 +1,204 @@
+
+# `gradio_coolcanvas`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+    
+```bash 
+pip install gradio_coolcanvas
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_coolcanvas import CoolCanvas
+
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    with CoolCanvas():
+        gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+        gr.Markdown("### This is the same set put in a gr.Group.")
+        with gr.Group():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row, no group.")
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row in a group.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+                gr.Image()
+                gr.Slider()
+
+        gr.Markdown("### Several rows grouped together.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+            with gr.Row():
+                gr.Image()
+                gr.Audio()
+
+        gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+        with gr.Group():
+            with gr.Row():
+                with gr.Column():
+                    name = gr.Textbox(label="Name")
+                    btn = gr.Button("Hello")
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    gr.Number()
+                    gr.Textbox()
+                with gr.Column():
+                    gr.Image()
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    with gr.Row():
+                        gr.Number(scale=2)
+                        gr.Textbox()
+
+        gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+        gr.Radio([1,2,3], container=False)
+        gr.Textbox(container=False)
+        gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+        gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+        with gr.Group():
+            name = gr.Textbox(label="Name")
+            output = gr.Textbox(show_label=False, container=False)
+            greet_btn = gr.Button("Greet")
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+                gr.Textbox(container=False)
+                gr.Number(container=False)
+                gr.Image(height=100)
+        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+        gr.Markdown("### More examples")
+
+        with gr.Group():
+            gr.Chatbot()
+            with gr.Row():
+                name = gr.Textbox(label="Prompot", container=False)
+                go = gr.Button("go", scale=0)
+
+        with gr.Column():
+            gr.Radio([1,2,3], container=False)
+            gr.Slider(0, 20, container=False)
+
+        with gr.Group():
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+                gr.Number(container=False)
+                gr.Textbox(container=False)
+
+        with gr.Row():
+            with gr.Column():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            with gr.Column():
+                gr.Number(container=False)
+            with gr.Column():
+                gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()
+```
+
+## `CoolCanvas`
+
+### 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>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, group will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string or list of strings that are assigned as the class 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, this layout will not 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>
+
+
+
+

src/backend/gradio_coolcanvas/__init__.py

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

src/backend/gradio_coolcanvas/coolcanvas.py

@@ -0,0 +1,45 @@
+from __future__ import annotations
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+
+set_documentation_group("layout")
+
+
+@document()
+class CoolCanvas(BlockContext, metaclass=ComponentMeta):
+    """
+    CoolCanvas is a layout element within Blocks which groups together children so that
+    they do not have any padding or margin between them.
+    Example:
+        with gr.Group():
+            gr.Textbox(label="First")
+            gr.Textbox(label="Last")
+    """
+
+    EVENTS = []
+
+    def __init__(
+        self,
+        *,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            visible: If False, group will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        BlockContext.__init__(
+            self,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+        )

src/backend/gradio_coolcanvas/coolcanvas.pyi

@@ -0,0 +1,46 @@
+from __future__ import annotations
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+
+set_documentation_group("layout")
+
+from gradio.events import Dependency
+
+@document()
+class CoolCanvas(BlockContext, metaclass=ComponentMeta):
+    """
+    CoolCanvas is a layout element within Blocks which groups together children so that
+    they do not have any padding or margin between them.
+    Example:
+        with gr.Group():
+            gr.Textbox(label="First")
+            gr.Textbox(label="Last")
+    """
+
+    EVENTS = []
+
+    def __init__(
+        self,
+        *,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            visible: If False, group will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+        """
+        BlockContext.__init__(
+            self,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+        )

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

@@ -0,0 +1 @@
+.edit-button.svelte-1ken6gh{position:absolute;top:0;right:0;left:100%}.moveable-line{opacity:.1}.moveable-control{opacity:.2}.moveable-origin{opacity:0}.gradio-container{overflow:visible}.hide.svelte-1ken6gh{display:none}.target.svelte-1ken6gh{margin:30px}

src/demo/app.py

@@ -0,0 +1,117 @@
+
+import gradio as gr
+from gradio_coolcanvas import CoolCanvas
+
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    with CoolCanvas():
+        gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+        gr.Markdown("### This is the same set put in a gr.Group.")
+        with gr.Group():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row, no group.")
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row in a group.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+                gr.Image()
+                gr.Slider()
+
+        gr.Markdown("### Several rows grouped together.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+            with gr.Row():
+                gr.Image()
+                gr.Audio()
+
+        gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+        with gr.Group():
+            with gr.Row():
+                with gr.Column():
+                    name = gr.Textbox(label="Name")
+                    btn = gr.Button("Hello")
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    gr.Number()
+                    gr.Textbox()
+                with gr.Column():
+                    gr.Image()
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    with gr.Row():
+                        gr.Number(scale=2)
+                        gr.Textbox()
+
+        gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+        gr.Radio([1,2,3], container=False)
+        gr.Textbox(container=False)
+        gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+        gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+        with gr.Group():
+            name = gr.Textbox(label="Name")
+            output = gr.Textbox(show_label=False, container=False)
+            greet_btn = gr.Button("Greet")
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+                gr.Textbox(container=False)
+                gr.Number(container=False)
+                gr.Image(height=100)
+        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+        gr.Markdown("### More examples")
+
+        with gr.Group():
+            gr.Chatbot()
+            with gr.Row():
+                name = gr.Textbox(label="Prompot", container=False)
+                go = gr.Button("go", scale=0)
+
+        with gr.Column():
+            gr.Radio([1,2,3], container=False)
+            gr.Slider(0, 20, container=False)
+
+        with gr.Group():
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+                gr.Number(container=False)
+                gr.Textbox(container=False)
+
+        with gr.Row():
+            with gr.Column():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            with gr.Column():
+                gr.Number(container=False)
+            with gr.Column():
+                gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

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

src/demo/space.py

@@ -0,0 +1,211 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'CoolCanvas': {'description': 'CoolCanvas is a layout element within Blocks which groups together children so that\nthey do not have any padding or margin between them.\n    with gr.Group():\n        gr.Textbox(label="First")\n        gr.Textbox(label="Last")', 'members': {'__init__': {'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, group will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}}, 'events': {}}, '__meta__': {'additional_interfaces': {}}}
+    
+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_coolcanvas`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Python library for easily interacting with trained machine learning models
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_coolcanvas
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_coolcanvas import CoolCanvas
+
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    with CoolCanvas():
+        gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+        gr.Markdown("### This is the same set put in a gr.Group.")
+        with gr.Group():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row, no group.")
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+        gr.Markdown("### Now in a Row in a group.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+                gr.Image()
+                gr.Slider()
+
+        gr.Markdown("### Several rows grouped together.")
+        with gr.Group():
+            with gr.Row():
+                gr.Textbox("A")
+                gr.Number(3)
+                gr.Button()
+            with gr.Row():
+                gr.Image()
+                gr.Audio()
+
+        gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+        with gr.Group():
+            with gr.Row():
+                with gr.Column():
+                    name = gr.Textbox(label="Name")
+                    btn = gr.Button("Hello")
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    gr.Number()
+                    gr.Textbox()
+                with gr.Column():
+                    gr.Image()
+                    gr.Dropdown(["a", "b", "c"], interactive=True)
+                    with gr.Row():
+                        gr.Number(scale=2)
+                        gr.Textbox()
+
+        gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+        gr.Radio([1,2,3], container=False)
+        gr.Textbox(container=False)
+        gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+        gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+        with gr.Group():
+            name = gr.Textbox(label="Name")
+            output = gr.Textbox(show_label=False, container=False)
+            greet_btn = gr.Button("Greet")
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+                gr.Textbox(container=False)
+                gr.Number(container=False)
+                gr.Image(height=100)
+        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+        gr.Markdown("### More examples")
+
+        with gr.Group():
+            gr.Chatbot()
+            with gr.Row():
+                name = gr.Textbox(label="Prompot", container=False)
+                go = gr.Button("go", scale=0)
+
+        with gr.Column():
+            gr.Radio([1,2,3], container=False)
+            gr.Slider(0, 20, container=False)
+
+        with gr.Group():
+            with gr.Row():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+                gr.Number(container=False)
+                gr.Textbox(container=False)
+
+        with gr.Row():
+            with gr.Column():
+                gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            with gr.Column():
+                gr.Number(container=False)
+            with gr.Column():
+                gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `CoolCanvas`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["CoolCanvas"]["members"]["__init__"], linkify=[])
+
+
+
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {};
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+        
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Index.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import Moveable from "svelte-moveable";
+
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible = true;
+
+  let data: HTMLDivElement;
+  let componentElements = [];
+
+  $: {
+    if (data) {
+      componentElements = Array.from(
+        data.querySelectorAll('[id^="component-"]')
+      );
+    }
+  }
+
+  const draggable = true;
+  const throttleDrag = 1;
+  const edgeDraggable = true;
+  const startDragRotate = 0;
+  const throttleDragRotate = 0;
+  const scalable = true;
+  const keepRatio = false;
+  const throttleScale = 0;
+  const renderDirections = ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
+  const rotatable = true;
+  const throttleRotate = 0;
+  const rotationPosition = "top";
+
+  let editing = false;
+</script>
+
+<div
+  id={elem_id}
+  class="gr-group {elem_classes.join(' ')}"
+  class:hide={!visible}
+>
+  <button class="edit-button" on:click={() => (editing = !editing)}
+    >{editing ? "Done" : "Edit"}</button
+  >
+  <div bind:this={data} class="hide">
+    <slot />
+  </div>
+
+  {#each componentElements as elmt, id}
+    <div class={"target target" + id}>
+      {@html elmt.outerHTML}
+    </div>
+  {/each}
+
+  {#if componentElements.length > 0 && editing}
+    <Moveable
+      target={".target"}
+      individualGroupable={true}
+      {draggable}
+      {throttleDrag}
+      {edgeDraggable}
+      {startDragRotate}
+      {throttleDragRotate}
+      {scalable}
+      {keepRatio}
+      {throttleScale}
+      {renderDirections}
+      {rotatable}
+      {throttleRotate}
+      {rotationPosition}
+      on:drag={({ detail: e }) => {
+        e.target.style.transform = e.transform;
+      }}
+      on:scale={({ detail: e }) => {
+        e.target.style.transform = e.drag.transform;
+      }}
+      on:rotate={({ detail: e }) => {
+        e.target.style.transform = e.drag.transform;
+      }}
+    />
+  {/if}
+</div>
+
+<style>
+  .edit-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 100%;
+  }
+
+  :global(.moveable-line) {
+    opacity: 0.1;
+  }
+
+  :global(.moveable-control) {
+    opacity: 0.2;
+  }
+
+  :global(.moveable-origin) {
+    opacity: 0;
+  }
+  :global(.gradio-container) {
+    overflow: visible;
+  }
+  .hide {
+    display: none;
+  }
+
+  .target {
+    margin: 30px;
+  }
+</style>

src/frontend/package-lock.json

@@ -0,0 +1,472 @@
+{
+  "name": "gradio_coolcanvas",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gradio_coolcanvas",
+      "version": "0.1.0",
+      "license": "ISC",
+      "dependencies": {
+        "svelte-moveable": "^0.45.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@cfcs/core": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.0.6.tgz",
+      "integrity": "sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==",
+      "dependencies": {
+        "@egjs/component": "^3.0.2"
+      }
+    },
+    "node_modules/@daybrush/utils": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz",
+      "integrity": "sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ=="
+    },
+    "node_modules/@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "node_modules/@egjs/children-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz",
+      "integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
+      "dependencies": {
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "node_modules/@egjs/component": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz",
+      "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w=="
+    },
+    "node_modules/@egjs/list-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz",
+      "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg=="
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@scena/dragscroll": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.4.0.tgz",
+      "integrity": "sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.6.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
+    "node_modules/@scena/event-emitter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz",
+      "integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.1.1"
+      }
+    },
+    "node_modules/@scena/matrix": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz",
+      "integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.4.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "node_modules/croact": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/croact/-/croact-1.0.4.tgz",
+      "integrity": "sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "node_modules/croact-css-styled": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/croact-css-styled/-/croact-css-styled-1.1.9.tgz",
+      "integrity": "sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "css-styled": "~1.0.8",
+        "framework-utils": "^1.1.0"
+      }
+    },
+    "node_modules/croact-moveable": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/croact-moveable/-/croact-moveable-0.9.0.tgz",
+      "integrity": "sha512-fc3bieV6CdqqZFtzsSLi9KmvUMFW3oakUfhPCls1BxKjOfUfn8rktteGED2341A/Qghy8tI3Hm6SdocIc68IKg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@egjs/list-differ": "^1.0.0",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "croact-css-styled": "^1.1.9",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.3",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.1.9",
+        "react-moveable": "~0.56.0"
+      },
+      "peerDependencies": {
+        "croact": "^1.0.4"
+      }
+    },
+    "node_modules/css-styled": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz",
+      "integrity": "sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0"
+      }
+    },
+    "node_modules/css-to-mat": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.1.1.tgz",
+      "integrity": "sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/matrix": "^1.0.0"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/framework-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz",
+      "integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg=="
+    },
+    "node_modules/gesto": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/gesto/-/gesto-1.19.4.tgz",
+      "integrity": "sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
+    "node_modules/keycon": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/keycon/-/keycon-1.4.0.tgz",
+      "integrity": "sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==",
+      "dependencies": {
+        "@cfcs/core": "^0.0.6",
+        "@daybrush/utils": "^1.7.1",
+        "@scena/event-emitter": "^1.0.2",
+        "keycode": "^2.2.0"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.6",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.6.tgz",
+      "integrity": "sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
+    "node_modules/moveable": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.53.0.tgz",
+      "integrity": "sha512-71jS9zIoQzMhnNvduhg4tUEdm23+fO/40FN7muVMbZvVwbTku2MIxxLhnU4qFvxI4oVxn75l79SbtgjuA+s7Pw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/event-emitter": "^1.0.5",
+        "croact": "^1.0.4",
+        "croact-moveable": "~0.9.0",
+        "react-moveable": "~0.56.0"
+      }
+    },
+    "node_modules/overlap-area": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz",
+      "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.7.1"
+      }
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/react-css-styled": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz",
+      "integrity": "sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==",
+      "dependencies": {
+        "css-styled": "~1.0.8",
+        "framework-utils": "^1.1.0"
+      }
+    },
+    "node_modules/react-moveable": {
+      "version": "0.56.0",
+      "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.56.0.tgz",
+      "integrity": "sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@egjs/list-differ": "^1.0.0",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.3",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.1.9",
+        "react-selecto": "^1.25.0"
+      }
+    },
+    "node_modules/react-selecto": {
+      "version": "1.26.3",
+      "resolved": "https://registry.npmjs.org/react-selecto/-/react-selecto-1.26.3.tgz",
+      "integrity": "sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==",
+      "dependencies": {
+        "selecto": "~1.26.3"
+      }
+    },
+    "node_modules/selecto": {
+      "version": "1.26.3",
+      "resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz",
+      "integrity": "sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/children-differ": "^1.0.1",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "css-styled": "^1.0.8",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.4",
+        "keycon": "^1.2.0",
+        "overlap-area": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.9.tgz",
+      "integrity": "sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svelte-moveable": {
+      "version": "0.45.0",
+      "resolved": "https://registry.npmjs.org/svelte-moveable/-/svelte-moveable-0.45.0.tgz",
+      "integrity": "sha512-1zGk11Dhq2IJMS7c0Y0BK5Km4a1B0pzHHC3wKoecByHYcoyPI/lzabdC32YjyH1SyTN5HGmQUNFEB7WiADvJ7Q==",
+      "dependencies": {
+        "framework-utils": "^1.1.0",
+        "moveable": "~0.53.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.54.0 || ^4.0.0"
+      }
+    }
+  }
+}

src/frontend/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "gradio_coolcanvas",
+  "version": "0.1.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": "./Index.svelte",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "svelte-moveable": "^0.45.0"
+  }
+}

src/pyproject.toml

@@ -0,0 +1,45 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_coolcanvas"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = [
+  "gradio-custom-component",
+  "gradio-template-Group"
+]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'License :: OSI Approved :: Apache Software License',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_coolcanvas/templates", "*.pyi", "backend/gradio_coolcanvas/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_coolcanvas"]