Can the gr.HTML onclick attribute call a Python function?

[davidbernat]

This issue, #2520, discusses a bug relevant to render HTML Buttons through the gr.HTML() function. Later in that issue, one of the comments uses the Button onclick="alert('Hello world!')" attribute to execute a JavaScript function. Is it possible to configure the onclick attribute of gr.HTML() element to execute a Python function instead?

[davidbernat]

Worst case, the onclick can be set to send a fetch call to a backend service in much the way a gr.Form() element might, were a gr.Form() developed to hold and render HTML code and generate that request.

[pngwn]

gr.HTML is just a way to render raw HTML and for users to do what they want with that output. It is basically an escape hatch but we won't be building more comprehensive APIs around it.

If you want to execute a python function is response to a button click, then the builtin in gr.Button class would be the best way to do that.

[davidbernat]

@pngwn @abidlabs Can you please present an example of gr.Button() which accepts CSS for formatting?

Also: splitting hairs here, but providing one interface inside gr.HTML onclick to link inside Python is a very high powered tool and requires no more comprehensive API. It is almost assuredly a first issue level improvement with outside improvements to the user, though I would have to double check my architecture to confirm that for sure. Can you reconsider?

[pngwn]

Gradio isn't intended to be infinitely flexible, adding official APIs on top of things like HTML and Markdown that connect back to python is opening an enormous can of worms because it essentially provides infinite flexibility and removes many constraints that currently exist. You are just talking about button clicking in this case but we couldn't only support that, we would have to support any DOM event on any element or it wouldn't be internally consistent. This would just make Gradio a web framework like any other, which we have no desire to become.

Theming (coming very soon) and custom components (coming soon) will be the official way to style things in a variety of ways and provide your own completely custom implementation when that isn't enough.

[davidbernat]

@pngwn: I disagree about those specific decisions; that supporting onclick requires supporting any DOM, because by your definition of design choices, onclick of Gradio elements through, for instance, gr.Button().click(...) is already an assertion that specific UI functions are higher tier than others. Implementing only onclick and onchange would simply be viewed as an extension of JavaScript into Python within the same Gradio UI design framework. It would almost very likely be self-consistent with your implementations of _js= and _css= now. But I do understand your intention to enforce scope creep and Gradio is already so valuable a framework.

Do you have a timeline for theming? And is there any way in the short term to make the buttons smaller?

Thanks. 🙏

[abidlabs]

Hi @davidbernat, I concur with @pngwn's points about limiting the scope of Gradio's HTML component. In terms of your question about making the buttons smaller, you can apply CSS to any element using an approach like this:

import gradio as gr

with gr.Blocks(css="#b {color:red}") as demo:
    btn = gr.Button("run", elem_id="b")
    
demo.launch()

[davidbernat]

Hi @abidlabs: thank you for clarifying and solidifying the (and your) Gradio position on this issue of JavaScript, Gradio, and Python. 🙏

As for the CSS: thank you for that example. I had not seen the elem_id reference used before. I have never been able to resize the Buttons using CSS, however. Either my CSS needs work or the relationship between CSS and render has an intermediary CSS parser. Would you mind kindly posting an example?

Also: if you do create an email list for technical (engineering team) updates to Gradio, as opposed to product level updates, please sign me up.

[abidlabs]

Sure thing @davidbernat. What do you mean by resizing the button? Do you mean the width of the button or something else?

[davidbernat]

@abidlabs I mean resizing the button. Here is a common problem in Gradio. gr.Row() and gr.Column() do great work with aligning components. But certain components are too large (Button and File Upload etc). I have heard that in future updates you plan to include a max_width=20% style feature for components in rows or columns. But for right now I would be happy to simply, for instance, override the gr.Button() to possess a max_width of 100 or 200 pixels, and have its height adjust accordingly, etc.

[abidlabs]

A couple of suggestions.

1. Set full_width=False:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        gr.Textbox()
        gr.Button().style(full_width=False)
    
demo.launch()

[abidlabs]

2. Set the scale and min_width parameters of Column:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=3):
            gr.Textbox()
        with gr.Column(scale=1, min_width=100):
            gr.Button()
    
demo.launch()

[davidbernat]

@abidlabs Woohoo! Is this documented anywhere? If not in a public document, can you point to the line of code? Not surprisingly, many of your elements inherent from base classes, so features like scale=1 and min_width=100 are embedded deeper within the inspection tree than a few searching will find. I would like to explore the full list. Thank you!

[davidbernat]

Thank you, @abidlabs. Those parameters as you specify do render the widths within the column much better. May I ask a few follow-up questions?

1. Is there a similar set of parameters for the gr.FileUpload() box, which is very large when unpopulated? (It's size when populated is ideal.)
2. Is there any way to induce a call to an element update/change function? For instance, can I induce a call to the fn of gr.TextBox().change(fn, inputs, outputs), such that the outputs are subsequently updated, from Python itself?
3. Is there a way to improve the fill of the For Publishing button within the row?

[abidlabs]

1. Is there a similar set of parameters for the gr.FileUpload() box, which is very large when unpopulated? (It's size when populated is ideal.)

The parameters are for columns, but you can put anything in a column including a single FileUpload box

2. Is there any way to induce a call to an element update/change function? For instance, can I induce a call to the fn of gr.TextBox().change(fn, inputs, outputs), such that the outputs are subsequently updated, from Python itself?

That is not possible right now, but perhaps something we should enable. Feel free to open an issue with more details about why this would be helpful

3. Is there a way to improve the fill of the For Publishing button within the row?

Can you elaborate more on what you mean by the fill?

Btw for questions like these, it would be ideal if you could use the GitHub forums or the Discord, as these issues are designed for bugs / new feature requests.