Spaces:
Running
Running
| 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() | |