gradio-xyslider 0.0.2

Python library for easily interacting with trained machine learning models

---

tags: [gradio-custom-component, Slider] title: gradio_xyslider short_description: an 2d slider for 4-way text prompt interpolation colorFrom: blue colorTo: yellow sdk: gradio pinned: false app_file: space.py

gradio_xyslider

Python library for easily interacting with trained machine learning models

Installation

pip install gradio_xyslider

Usage

import os
import sys
import gradio as gr


from gradio_xyslider import XYSlider


def passthrough(payload):
    # Just echo the xy + bilinear dict
    return payload


def set_corner_labels(ul: str, ur: str, lr: str, ll: str, current_value):
    """Return a merged dict so the XY pad updates labels without losing position.

    current_value is the XY pad's current value (dict with x, y, bilinear, labels, colors).
    """
    value = {}
    if isinstance(current_value, dict):
        # Preserve existing fields (x, y, bilinear, colors, etc.)
        value.update(current_value)
    value["upper_left_label"] = ul
    value["upper_right_label"] = ur
    value["lower_right_label"] = lr
    value["lower_left_label"] = ll
    return value


with gr.Blocks() as demo:
    gr.Markdown("## XY Pad Demo")
    with gr.Row():
        audio = gr.Audio(label="Audio", sources=["upload", "microphone"], type="filepath")
    with gr.Row():
        lane = XYSlider(
            label="XY Pad",
            x_min=0.0,
            x_max=1.0,
            y_min=0.0,
            y_max=1.0,
            upper_left_label="Upper Left",
            upper_right_label="Upper Right",
            lower_right_label="Lower Right",
            lower_left_label="Lower Left",
            color_upper_left="rgba(239, 68, 68, 0.9)",  # red
            color_upper_right="rgba(59, 130, 246, 0.9)",  # blue
            color_lower_right="rgba(16, 185, 129, 0.9)",  # emerald
            color_lower_left="rgba(234, 179, 8, 0.9)",  # yellow
        )

    with gr.Row():
        with gr.Column():
            ul = gr.Textbox(label="Upper Left Label", value="Upper Left")
            ll = gr.Textbox(label="Lower Left Label", value="Lower Left")
        with gr.Column():
            ur = gr.Textbox(label="Upper Right Label", value="Upper Right")
            lr = gr.Textbox(label="Lower Right Label", value="Lower Right")

    # Update XY labels when any textbox changes
    for tb in [ul, ur, lr, ll]:
        tb.change(fn=set_corner_labels, inputs=[ul, ur, lr, ll, lane], outputs=lane)

    # Echo xy + bilinear on release
    out = gr.JSON(label="Current XY + Bilinear")
    lane.release(fn=passthrough, inputs=lane, outputs=out)


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

XYSlider

Initialization

name	type	default	description
value	list[list[float]] | dict[str, Any] | Callable | None	None	Initial points list ([[x, y], ...]) or an object {"points": [[x,y],...], "audio_url": str}.
x_min	float	0.0	Minimum x value of the canvas domain.
x_max	float	1.0	Maximum x value of the canvas domain.
y_min	float	0.0	Minimum y value of the canvas range.
y_max	float	1.0	Maximum y value of the canvas range.
precision	int | None	3	Number of decimal places to round values to when serializing.
audio_url	str | None	None	Optional URL or path to an audio file to render waveform background.
shade_enabled	bool	True	None
shade_above_color	str | None	"rgba(250, 204, 21, 0.25)"	None
shade_below_color	str | None	"rgba(34, 197, 94, 0.25)"	None
top_label	str | None	None	None
bottom_label	str | None	None	None
upper_left_label	str | None	None	None
upper_right_label	str | None	None	None
lower_right_label	str | None	None	None
lower_left_label	str | None	None	None
color_upper_left	str | None	"rgba(239, 68, 68, 0.9)"	None
color_upper_right	str | None	"rgba(59, 130, 246, 0.9)"	None
color_lower_right	str | None	"rgba(16, 185, 129, 0.9)"	None
color_lower_left	str | None	"rgba(234, 179, 8, 0.9)"	None
label	str | I18nData | None	None	None
info	str | I18nData | None	None	None
every	Timer | float | None	None	None
inputs	Component | Sequence[Component] | set[Component] | None	None	None
show_label	bool | None	None	None
container	bool	True	None
scale	int | None	None	None
min_width	int	160	None
interactive	bool | None	None	None
visible	bool | Literal["hidden"]	True	None
elem_id	str | None	None	None
elem_classes	list[str] | str | None	None	None
render	bool	True	None
key	int | str | tuple[int | str, ...] | None	None	None
preserved_by_key	list[str] | str | None	"value"	None
show_reset_button	bool	True	Standard component options.

Events

name	description
change	Triggered when the value of the XYSlider changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input.
input	This listener is triggered when the user changes the value of the XYSlider.
release	This listener is triggered when the user releases the mouse on this XYSlider.

User function

The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).

• When used as an Input, the component only impacts the input signature of the user function.
• When used as an output, the component only impacts the return signature of the user function.

The code snippet below is accurate in cases where the component is used as both an input and an output.

• As output: Is passed, dict with rounded {x, y, bilinear} to pass to the user's function.

def predict(
    value: dict[str, typing.Any]
) -> typing.Any:
    return value