| import gradio as gr | |
| from gradio.components import FormComponent | |
| class ButtonGroup: | |
| """Base class for button groups with common functionality.""" | |
| def __init__(self, events: list[str], *args, **kwargs): | |
| self.buttons = {event: None for event in events} | |
| self.click_args = {event: None for event in events} | |
| self.render() | |
| def render(self): | |
| """Render the buttons and set up their event handlers.""" | |
| for event, button in self.buttons.items(): | |
| if self.click_args[event]: | |
| button.click(*self.click_args[event]) | |
| def _setup_button(self, event, fn, inputs, outputs): | |
| """Set up a button's click event handler.""" | |
| self.click_args[event] = fn, inputs, outputs | |
| if self.buttons[event]: | |
| self.buttons[event].click(fn, inputs, outputs) | |
| def api_info(self): | |
| return { | |
| "name": self.__class__.__name__, | |
| "events": self.EVENTS, | |
| "inputs": [], | |
| "outputs": [], | |
| } | |
| def example_payload(self): | |
| """Return None since this component doesn't have direct input values.""" | |
| return None | |
| def example_value(self): | |
| """Return None since this component doesn't have direct output values.""" | |
| return None | |
| class InputRowButtonGroup(ButtonGroup): | |
| """Button group for input rows with delete and add buttons.""" | |
| EVENTS = ["delete", "add"] | |
| def __init__(self, *args, **kwargs): | |
| self.disable_delete = kwargs.pop("disable_delete", False) | |
| super().__init__(self.EVENTS, *args, **kwargs) | |
| def render(self): | |
| with gr.Column(scale=0, min_width=40, elem_classes="button-column"): | |
| self.buttons["delete"] = gr.Button( | |
| "❌", elem_classes="icon-button delete-button", scale=0, interactive=not self.disable_delete | |
| ) | |
| self.buttons["add"] = gr.Button("➕", elem_classes="icon-button add-field-button", scale=0) | |
| super().render() | |
| def delete(self, fn, inputs, outputs): | |
| self._setup_button("delete", fn, inputs, outputs) | |
| def add(self, fn, inputs, outputs): | |
| self._setup_button("add", fn, inputs, outputs) | |
| class OutputRowButtonGroup(ButtonGroup): | |
| """Button group for output rows with delete, add, up, and down buttons.""" | |
| EVENTS = ["delete", "add", "up", "down"] | |
| def __init__(self, *args, **kwargs): | |
| self.disable_delete = kwargs.pop("disable_delete", False) | |
| super().__init__(self.EVENTS, *args, **kwargs) | |
| def render(self): | |
| with gr.Column(scale=0, elem_classes="button-column", min_width=40): | |
| self.buttons["delete"] = gr.Button( | |
| "❌", elem_classes="icon-button delete-button", scale=0, interactive=not self.disable_delete | |
| ) | |
| self.buttons["add"] = gr.Button("➕", elem_classes="icon-button add-field-button", scale=0) | |
| with gr.Column(scale=0, elem_classes="button-column", min_width=40): | |
| self.buttons["up"] = gr.Button("⬆️", elem_classes="icon-button up-button", scale=0) | |
| self.buttons["down"] = gr.Button("⬇️", elem_classes="icon-button down-button", scale=0) | |
| return super().render() | |
| def delete(self, fn, inputs, outputs): | |
| self._setup_button("delete", fn, inputs, outputs) | |
| def add(self, fn, inputs, outputs): | |
| self._setup_button("add", fn, inputs, outputs) | |
| def up(self, fn, inputs, outputs): | |
| self._setup_button("up", fn, inputs, outputs) | |
| def down(self, fn, inputs, outputs): | |
| self._setup_button("down", fn, inputs, outputs) | |