gradio_toggle

A custom Gradio component that toggles between on and off states.

Installation

pip install gradio_toggle

Usage

# Toggle - A Gradio Custom Component
# Created by Daniel Ialcin Misser Westergaard
# https://huggingface.co/dwancin
# https://github.com/dwancin
# (c) 2024

import gradio as gr
from gradio_toggle import Toggle

def update_toggle_state(input_component):
    print(f"Updating toggle: {input_component}")
    return input_component

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            input_component = Toggle()
        with gr.Column():
            output_component = Toggle(color="red", info="this is the output", show_label=False, interactive=False, radius="sm", transition=1)

    input_component.change(fn=update_toggle_state, inputs=input_component, outputs=output_component)

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

Toggle

Initialization

bool | Callable

str | None

str | None

str | Callable | None

Literal["sm", "lg"]

float

Timer | float | None

Component | Sequence[Component] | set[Component] | None

bool | None

bool

int | None

int

bool | None

bool

str | None

list[str] | str | None

bool

int | str | None

Events

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, the toggle state as a boolean value.
• As input: Should return, the toggle state to be returned.

def predict(
    value: bool | None
) -> bool | None:
    return value