ExamplePicker

[MarcSkovMadsen]

Closing #7397

Illustration

example_picker.mp4

Todo

• move binding to Example
• Support Buttons background thumbnails
• Support Button icons
• Support button_kwargs to enable styling of the buttons.
• Support layout_type (FlexBox of Buttons or Column/ Table of Rows)
• Make sure .value is re-triggered if an example is reselected.
• Try many examples including Gradio examples
• Align margin with other widgets
• Create Interface(examples, inputs, outputs) component
• Update ImageRecognition example
• Update panel-mermaid editor example
• Docstrings
• Tests
• Reference Guide

[MarcSkovMadsen]

• The Gradio Examples has another api and many more (advanced) features like batch inference and example caching. Should we align closer with that api?

[MarcSkovMadsen]

Gradio also displayes the examples in a table. I display using Panes and in a Column. Should we display using Tabulator instead. The pro of not using Tabulator is that we can display everything. The cons is that we might need to instantiate a large number of Bokeh models which is slow. And I don't know if we can make it look nice.

Gradio

import gradio as gr
from PIL import Image
import pandas as pd

# Example Data
image_example = Image.new('RGB', (100, 100), color = 'red')  # Red square image

examples = [
    ["Hello, World!", 42, 3.14, image_example, pd.DataFrame({"x": [1,2], "y": [1,2]})],
    ["Another text", 7, 0.001, image_example, pd.DataFrame({"x": [3,4], "y": [1,2]},)]
]

with gr.Blocks() as demo:
    gr.Examples(
        examples=examples,
        inputs=[gr.Textbox(), gr.Number(), gr.Number(), gr.Image(), gr.DataFrame()],
    )

demo.launch()

Panel

import gradio as gr
from PIL import Image
import pandas as pd
import panel as pn

pn.extension()

image_example = Image.new('RGB', (100, 100), color = 'red')  # Red square image

samples = [
    ["Hello, World!", 42, 3.14, image_example, pd.DataFrame({"x": [1,2], "y": [1,2]})],
    ["Another text", 7, 0.001, image_example, pd.DataFrame({"x": [3,4], "y": [1,2]},)]
]

targets = [pn.widgets.TextInput(), pn.widgets.IntInput(), pn.widgets.NumberInput(), pn.widgets.Tabulator()]

pn.widgets.Examples(*samples, layout=pn.Row, targets=targets, sizing_mode="stretch_width").servable()