Add a gr.ClearButton

[abidlabs]

Adds a gr.ClearButton which can be used to clear the value of components in gr.Blocks(). It is also used internally in gr.Interface.

Example:

import gradio as gr

with gr.Blocks() as demo:
    chatbot = gr.Chatbot([("Hello", "How are you?")])
    with gr.Row():
        textbox = gr.Textbox(scale=3, interactive=True)
        gr.ClearButton([textbox, chatbot], scale=1)
    
demo.launch()

Also removes the cleared_value attribute from components, which will be better for community components

Discussion: There was a discrepancy between the behavior of the Clear button for different components. For 4 of our components (Slider, CheckboxGroup, Radio, Dropdown), the Clear button set the value to the original default value set by the app developer. For all of our other components, such as Textbox, Checkbox, Image, it explicitly cleared the value (e.g. setting it to "" for Textbox, unchecked for Checkbox, or no uploaded image for Image even if there was originally a default). We should have a single behavior for all of our components -- I've set it so it always clears the value as this is what I think most people expect when they hit Clear.

Fixes: #1719
Fixes: #4473

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4456-all-demos

[gradio-pr-bot]

🎉 The demo notebooks match the run.py files! 🎉

[abidlabs]

Will fix the tests tomorrow, but everything is working locally so opening up for review!

[freddyaboulton]

When filing #1719, I had this functionality in mind so it's ok to close it out with this PR.

[aliabid94]

LGTM

[freddyaboulton]

@abidlabs I agree it's best if the Clear button behaves the same for all components but it's behaved this way for so long I wonder if users have come to expect the current behavior? Maybe it's safest to use the current clear button implementation in interface unitl 4.0?

[freddyaboulton]

Code for ClearButton looks great @abidlabs !

[freddyaboulton]

nit: This sentence in the guide is outdated now that the clear internal is abstracted away:

Finally, when the `Clear` button is clicked, we assign `None` to the value of the `Chatbot` to clear its entire history.

[abidlabs]

Ooh good catch

[abidlabs]

@abidlabs I agree it's best if the Clear button behaves the same for all components but it's behaved this way for so long I wonder if users have come to expect the current behavior? Maybe it's safest to use the current clear button implementation in interface unitl 4.0?

I can implement that, but we'd need some stuff on the frontend to store the original default value. I actually think it's okay to change behavior here, because if they are looking to reset values, they can always just refresh the page manually.

[abidlabs]

in light of the above, I’ll go ahead and merge. Thanks @freddyaboulton @aliabid94 for the detailed reviews!

[eshaanagarwal]

Hey has this been released as part of the new release of Gradio ?

[abidlabs]

Not yet, soon!