Spaces:
Running
Running
| # `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> | |