gradio_coolcanvas / space.py
hmb's picture
hmb HF staff
Upload folder using huggingface_hub
5ddc4d5 verified
raw
history blame
7.13 kB
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()