Improvements to gr.Examples: adds events as attributes and documents, them, adds sample_labels, and visible properties

[abidlabs]

Makes several enhancements to gr.Examples:

• Adds load_input_event and cache_event as public attributes and documents them (closes: Add .then to gr.Examples #8710)
• Adds visible prop (closes: Support visible option in gr.Examples #6390)
• Adds example_labels prop (closes: gr.Examples Enable for each example to have a label and a value #4268)

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/f9d31cd15c783f747253934990591a1d9a04212a/gradio-4.37.2-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@f9d31cd15c783f747253934990591a1d9a04212a#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-builds.s3.amazonaws.com/f9d31cd15c783f747253934990591a1d9a04212a/gradio-client-1.2.1.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/dataset	minor
gradio	minor
website	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Improvements to gr.Examples: adds events as attributes and documents, them, adds sample_labels, and visible properties

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[aliabd]

I'm having issues using the example_labels prop. I get the ValueError even when my example_labels list is the same length as the examples.

ValueError: The length of `example_labels` should be the same as the number of examples

Tried with this demo:

import gradio as gr


def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2
    
def calculator2(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2 * num1
    elif operation == "divide":
        return num1 / num2


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            num_1 = gr.Number(value=4)
            operation = gr.Radio(["add", "subtract", "multiply", "divide"])
            num_2 = gr.Number(value=0)
            submit_btn = gr.Button(value="Calculate")
        with gr.Column():
            result = gr.Number()

    submit_btn.click(
        calculator, inputs=[num_1, operation, num_2], outputs=[result], api_name=False
    )
    examples = gr.Examples(
        examples=[
            [5, "add", 3],
            [4, "divide", 2],
            [-4, "multiply", 2.5],
            [0, "subtract", 1.2],
        ],
        inputs=[num_1, operation, num_2],
        example_labels=["add", "divide", "multiply", "subtract"],
    )

if __name__ == "__main__":
    demo.launch()

Am I missing something?

[abidlabs]

Thanks @aliabd, let me take a look

[abidlabs]

Should be fixed now if you can take another look @aliabd!

[aliabd]

I'm not sure what I'm looking at here, aren't the labels supposed to show up in the UI?

Screen.Recording.2024-07-10.at.10.18.29.AM.mov

[abidlabs]

what?? coulda sworn this was working. you don't need to advertise my bugs in HD video 😆

[abidlabs]

anyways I can repro, will fix in a bit

[abidlabs]

Thanks @aliabd. Turns out that my original approach was broken and I had gotten lucky with my test case. Should be fixed now. Here are a couple of test cases:

(your original example)

import gradio as gr


def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2
    
def calculator2(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2 * num1
    elif operation == "divide":
        return num1 / num2


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            num_1 = gr.Number(value=4)
            operation = gr.Radio(["add", "subtract", "multiply", "divide"])
            num_2 = gr.Number(value=0)
            submit_btn = gr.Button(value="Calculate")
        with gr.Column():
            result = gr.Number()

    submit_btn.click(
        calculator, inputs=[num_1, operation, num_2], outputs=[result], api_name=False
    )
    examples = gr.Examples(
        examples=[
            [5, "add", 3],
            [4, "divide", 2],
            [-4, "multiply", 2.5],
            [0, "subtract", 1.2],
        ],
        inputs=[num_1, operation, num_2],
        example_labels=["add", "divide", "multiply", "subtract"],
    )

if __name__ == "__main__":
    demo.launch()

and

import gradio as gr

with gr.Blocks() as demo:
    t=gr.Textbox()
    i=gr.Image()
    gr.Examples(examples=[["cheetah", "https://github.com/raw/gradio-app/gradio/main/test/test_files/bus.png"], ["cat", "https://github.com/raw/gradio-app/gradio/main/test/test_files/bus.png"]], inputs=[t, i],
               example_labels=["big cat", "small cat"])
    
demo.launch()

[aliabd]

Everything works great! 🎉 Thanks @abidlabs!

[abidlabs]

Thanks for testing @aliabd!