Add Timer component

.changeset/hungry-rice-thank.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": minor
+"@gradio/timer": minor
+"gradio": minor
+---
+
+feat:Add Timer component

demo/function_values/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: function_values"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "\n", "countries = [\n", "    \"Algeria\", \"Argentina\", \"Australia\", \"Brazil\", \"Canada\", \"China\", \"Democratic Republic of the Congo\", \"Greenland (Denmark)\", \"India\", \"Kazakhstan\", \"Mexico\", \"Mongolia\", \"Peru\", \"Russia\", \"Saudi Arabia\", \"Sudan\", \"United States\"\n", "]\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        count = gr.Slider(1, 10, step=1, label=\"Country Count\")\n", "        alpha_order = gr.Checkbox(True, label=\"Alphabetical Order\")\n", "\n", "    gr.JSON(lambda count, alpha_order: countries[:count] if alpha_order else countries[-count:], inputs=[count, alpha_order])\n", "    timer = gr.Timer(1)\n", "    with gr.Row():\n", "        gr.Textbox(lambda: random.choice(countries), label=\"Random Country\", every=timer)\n", "        gr.Textbox(lambda count: \", \".join(random.sample(countries, count)), inputs=count, label=\"Random Countries\", every=timer)\n", "    with gr.Row():\n", "        gr.Button(\"Start\").click(lambda: gr.Timer(active=True), None, timer)\n", "        gr.Button(\"Stop\").click(lambda: gr.Timer(active=False), None, timer)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/function_values/run.py

@@ -0,0 +1,24 @@
+import gradio as gr
+import random
+
+countries = [
+    "Algeria", "Argentina", "Australia", "Brazil", "Canada", "China", "Democratic Republic of the Congo", "Greenland (Denmark)", "India", "Kazakhstan", "Mexico", "Mongolia", "Peru", "Russia", "Saudi Arabia", "Sudan", "United States"
+]
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        count = gr.Slider(1, 10, step=1, label="Country Count")
+        alpha_order = gr.Checkbox(True, label="Alphabetical Order")
+
+    gr.JSON(lambda count, alpha_order: countries[:count] if alpha_order else countries[-count:], inputs=[count, alpha_order])
+    timer = gr.Timer(1)
+    with gr.Row():
+        gr.Textbox(lambda: random.choice(countries), label="Random Country", every=timer)
+        gr.Textbox(lambda count: ", ".join(random.sample(countries, count)), inputs=count, label="Random Countries", every=timer)
+    with gr.Row():
+        gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer)
+        gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer)
+
+
+if __name__ == "__main__":
+    demo.launch()

demo/timer/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: timer"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "with gr.Blocks() as demo:\n", "  timer = gr.Timer(1)\n", "  timestamp = gr.Number(label=\"Time\")\n", "  timer.tick(lambda: round(time.time()), outputs=timestamp)\n", "\n", "  with gr.Row():\n", "    min = gr.Number(1, label=\"Min\")\n", "    max = gr.Number(10, label=\"Max\")\n", "  timer2 = gr.Timer(1)\n", "  number = gr.Number(lambda a, b: random.randint(a, b), inputs=[min, max], every=timer2, label=\"Random Number\")\n", "  with gr.Row():\n", "    gr.Button(\"Start\").click(lambda: gr.Timer(active=True), None, timer2)\n", "    gr.Button(\"Stop\").click(lambda: gr.Timer(active=False), None, timer2)\n", "    gr.Button(\"Go Fast\").click(lambda: 0.2, None, timer2)\n", "    gr.Button(\"Go Slow\").click(lambda: 2, None, timer2)\n", "    \n", "if __name__ == \"__main__\":\n", "  demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/timer/run.py

@@ -0,0 +1,22 @@
+import gradio as gr
+import random
+import time
+
+with gr.Blocks() as demo:
+  timer = gr.Timer(1)
+  timestamp = gr.Number(label="Time")
+  timer.tick(lambda: round(time.time()), outputs=timestamp)
+
+  with gr.Row():
+    min = gr.Number(1, label="Min")
+    max = gr.Number(10, label="Max")
+  timer2 = gr.Timer(1)
+  number = gr.Number(lambda a, b: random.randint(a, b), inputs=[min, max], every=timer2, label="Random Number")
+  with gr.Row():
+    gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer2)
+    gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer2)
+    gr.Button("Go Fast").click(lambda: 0.2, None, timer2)
+    gr.Button("Go Slow").click(lambda: 2, None, timer2)
+
+if __name__ == "__main__":
+  demo.launch()

gradio/__init__.py

@@ -53,6 +53,7 @@
     State,
     Text,
     Textbox,
+    Timer,
     UploadButton,
     Video,
     component,

gradio/_simple_templates/simpledropdown.py

@@ -1,11 +1,14 @@
 from __future__ import annotations
 
 import warnings
-from typing import Any, Callable
+from typing import TYPE_CHECKING, Any, Callable
 
-from gradio.components.base import FormComponent
+from gradio.components.base import Component, FormComponent
 from gradio.events import Events
 
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
 
 class SimpleDropdown(FormComponent):
     """
@@ -21,7 +24,8 @@ def __init__(
         value: str | int | float | Callable | None = None,
         label: str | None = None,
         info: str | None = None,
-        every: float | None = None,
+        every: Timer | None = None,
+        inputs: Component | list[Component] | set[Component] | None = None,
         show_label: bool | None = None,
         scale: int | None = None,
         min_width: int = 160,
@@ -38,7 +42,7 @@ def __init__(
             value: default value selected in dropdown. If None, no value is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
             label: component name in interface.
             info: additional component description.
-            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            every: If `value` is a callable, run the function every time the provided Timer ticks. Has no effect otherwise.
             show_label: if True, will display label.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
@@ -58,6 +62,7 @@ def __init__(
             label=label,
             info=info,
             every=every,
+            inputs=inputs,
             show_label=show_label,
             scale=scale,
             min_width=min_width,

gradio/_simple_templates/simpleimage.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import Any
+from typing import TYPE_CHECKING, Any
 
 from gradio_client import handle_file
 from gradio_client.documentation import document
@@ -12,6 +12,9 @@
 from gradio.data_classes import FileData
 from gradio.events import Events
 
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
 
 @document()
 class SimpleImage(Component):
@@ -32,7 +35,8 @@ def __init__(
         value: str | None = None,
         *,
         label: str | None = None,
-        every: float | None = None,
+        every: Timer | None = None,
+        inputs: Component | list[Component] | set[Component] | None = None,
         show_label: bool | None = None,
         show_download_button: bool = True,
         container: bool = True,
@@ -49,7 +53,7 @@ def __init__(
         Parameters:
             value: A path or URL for the default value that SimpleImage component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
             label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            every: Deprecated, use gr.Timer() instead. If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
             show_label: if True, will display label.
             show_download_button: If True, will display button to download image.
             container: If True, will place the component in a container - providing some extra padding around the border.
@@ -66,6 +70,7 @@ def __init__(
         super().__init__(
             label=label,
             every=every,
+            inputs=inputs,
             show_label=show_label,
             container=container,
             scale=scale,

gradio/_simple_templates/simpletextbox.py

@@ -1,10 +1,13 @@
 from __future__ import annotations
 
-from typing import Any, Callable
+from typing import TYPE_CHECKING, Any, Callable
 
-from gradio.components.base import FormComponent
+from gradio.components.base import Component, FormComponent
 from gradio.events import Events
 
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
 
 class SimpleTextbox(FormComponent):
     """
@@ -23,7 +26,8 @@ def __init__(
         *,
         placeholder: str | None = None,
         label: str | None = None,
-        every: float | None = None,
+        every: Timer | None = None,
+        inputs: Component | list[Component] | set[Component] | None = None,
         show_label: bool | None = None,
         scale: int | None = None,
         min_width: int = 160,
@@ -40,7 +44,7 @@ def __init__(
             value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
             placeholder: placeholder hint to provide behind textbox.
             label: component name in interface.
-            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            every: If `value` is a callable, run the function every time the provided Timer ticks. Has no effect otherwise.
             show_label: if True, will display label.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
@@ -57,6 +61,7 @@ def __init__(
         super().__init__(
             label=label,
             every=every,
+            inputs=inputs,
             show_label=show_label,
             scale=scale,
             min_width=min_width,

gradio/blocks.py

@@ -702,7 +702,7 @@ def set_event_trigger(
             batch: whether this function takes in a batch of inputs
             max_batch_size: the maximum batch size to send to the function
             cancels: a list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
-            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            every: Deprecated, use gr.Timer() instead. Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
             collects_event_data: whether to collect event data for this event
             trigger_after: if set, this event will be triggered after 'trigger_after' function index
             trigger_only_on_success: if True, this event will only be triggered if the previous event was successful (only applies if `trigger_after` is set)
@@ -740,6 +740,10 @@ def set_event_trigger(
 
         if fn is not None and not cancels:
             check_function_inputs_match(fn, inputs, inputs_as_dict)
+        if isinstance(every, float):
+            warnings.warn(
+                "The 'every' parameter as a float is deprecated. Use gr.Timer() instead.",
+            )
         if every is not None and every <= 0:
             raise ValueError("Parameter every must be positive or None")
         if every and batch:
@@ -2678,21 +2682,25 @@ def attach_load_events(self):
                     isinstance(component, components.Component)
                     and component.load_event_to_attach
                 ):
-                    load_fn, every = component.load_event_to_attach
+                    load_fn, every_interval, triggers, inputs = (
+                        component.load_event_to_attach
+                    )
+                    has_target = len(triggers) > 0
+                    triggers += [(self, "load")]
                     # Use set_event_trigger to avoid ambiguity between load class/instance method
 
                     dep = self.default_config.set_event_trigger(
-                        [EventListenerMethod(self, "load")],
+                        [EventListenerMethod(*trigger) for trigger in triggers],
                         load_fn,
-                        None,
+                        inputs,
                         component,
-                        no_target=True,
+                        no_target=not has_target,
                         # If every is None, for sure skip the queue
                         # else, let the enable_queue parameter take precedence
                         # this will raise a nice error message is every is used
                         # without queue
-                        queue=every is not None,
-                        every=every,
+                        queue=every_interval is not None,
+                        every=every_interval,
                     )[0]
                     component.load_event = dep.get_config()
 

gradio/component_meta.py

@@ -49,7 +49,7 @@ def {{ event }}(self,
             preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
             postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
             cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
-            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            every: Deprecated, use gr.Timer() instead. Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
             trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
             js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
             concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).

gradio/components/__init__.py

@@ -46,6 +46,7 @@
 from gradio.components.slider import Slider
 from gradio.components.state import State
 from gradio.components.textbox import Textbox
+from gradio.components.timer import Timer
 from gradio.components.upload_button import UploadButton
 from gradio.components.video import Video
 from gradio.layouts import Form
@@ -109,6 +110,7 @@
     "ScatterPlot",
     "Slider",
     "State",
+    "Timer",
     "UploadButton",
     "Video",
     "StreamingInput",

gradio/components/annotated_image.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, List
+from typing import TYPE_CHECKING, Any, List
 
 import gradio_client.utils as client_utils
 import numpy as np
@@ -15,6 +15,9 @@
 from gradio.data_classes import FileData, GradioModel
 from gradio.events import Events
 
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
 PIL.Image.init()  # fixes https://github.com/gradio-app/gradio/issues/2843
 
 
@@ -57,7 +60,8 @@ def __init__(
         width: int | str | None = None,
         color_map: dict[str, str] | None = None,
         label: str | None = None,
-        every: float | None = None,
+        every: Timer | None = None,
+        inputs: Component | list[Component] | set[Component] | None = None,
         show_label: bool | None = None,
         container: bool = True,
         scale: int | None = None,
@@ -77,7 +81,7 @@ def __init__(
             width: The width of the image, specified in pixels if a number is passed, or in CSS units if a string is passed.
             color_map: A dictionary mapping labels to colors. The colors must be specified as hex codes.
             label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            every: If `value` is a callable, run the function every time the provided Timer ticks. Has no effect otherwise.
             show_label: if True, will display label.
             container: If True, will place the component in a container - providing some extra padding around the border.
             scale: Relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
@@ -96,6 +100,7 @@ def __init__(
         super().__init__(
             label=label,
             every=every,
+            inputs=inputs,
             show_label=show_label,
             container=container,
             scale=scale,