src/README.md

gradio_coolcanvas

Python library for easily interacting with trained machine learning models

Installation

pip install gradio_coolcanvas

Usage

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

name	type	default	description
visible	bool	True	If False, group will be hidden.
elem_id	str | None	None	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	list[str] | str | None	None	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	bool	True	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.