space.py

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()