add frontend for page load events

demo/blocks_page_load/run.py

@@ -0,0 +1,13 @@
+import gradio as gr
+
+def print_message(n):
+    return "Welcome! This page has loaded for " + n
+
+with gr.Blocks() as demo:
+  t = gr.Textbox("Frank", label="Name")
+  t2 = gr.Textbox(label="Output")
+  demo.load(print_message, t, t2)
+
+
+if __name__ == "__main__":
+    demo.launch()

gradio/blocks.py

@@ -37,6 +37,7 @@ def set_event_trigger(
         outputs: List[Component],
         preprocess=True,
         queue=False,
+        no_target: bool = False,
     ) -> None:
         """
         Adds an event to the component's dependencies.
@@ -45,6 +46,7 @@ def set_event_trigger(
             fn: Callable function
             inputs: input list
             outputs: output list
+            no_target: if True, sets "targets" to [], used for Blocks "load" event
         Returns: None
         """
         # Support for singular parameter
@@ -56,7 +58,7 @@ def set_event_trigger(
         Context.root_block.fns.append((fn, preprocess))
         Context.root_block.dependencies.append(
             {
-                "targets": [self._id],
+                "targets": [self._id] if not no_target else [],
                 "trigger": event_name,
                 "inputs": [block._id for block in inputs],
                 "outputs": [block._id for block in outputs],
@@ -243,3 +245,19 @@ def __exit__(self, *args):
             Context.root_block = None
         else:
             self.parent.children.extend(self.children)
+
+    def load(
+        self, fn: Callable, inputs: List[Component], outputs: List[Component]
+    ) -> None:
+        """
+        Adds an event for when the demo loads in the browser.
+
+        Parameters:
+            fn: Callable function
+            inputs: input list
+            outputs: output list
+        Returns: None
+        """
+        self.set_event_trigger(
+            event_name="load", fn=fn, inputs=inputs, outputs=outputs, no_target=True
+        )

gradio/test_data/blocks_configs.py

@@ -157,6 +157,13 @@
             "outputs": [12],
             "queue": False,
         },
+        {
+            "targets": [],
+            "trigger": "load",
+            "inputs": [],
+            "outputs": [14],
+            "queue": False,
+        },
     ],
 }
 

test/test_blocks.py

@@ -7,14 +7,15 @@
 
 class TestBlocks(unittest.TestCase):
     def test_xray(self):
+        def fake_func():
+            return "Hello There"
+
         xray_model = lambda diseases, img: {
             disease: random.random() for disease in diseases
         }
         ct_model = lambda diseases, img: {disease: 0.1 for disease in diseases}
 
-        xray_blocks = gr.Blocks()
-
-        with xray_blocks:
+        with gr.Blocks() as demo:
             gr.components.Markdown(
                 """
             # Detect Disease From Scan
@@ -48,10 +49,10 @@ def test_xray(self):
                     ct_run.click(
                         ct_model, inputs=[disease, ct_scan], outputs=ct_results
                     )
+            textbox = gr.components.Textbox()
+            demo.load(fake_func, [], [textbox])
 
-            _ = gr.components.Textbox()
-
-        self.assertEqual(XRAY_CONFIG, xray_blocks.get_config_file())
+        self.assertEqual(XRAY_CONFIG, demo.get_config_file())
 
 
 if __name__ == "__main__":

ui/packages/app/src/Blocks.svelte

@@ -24,10 +24,10 @@
 	}
 
 	interface Dependency {
-		trigger: "click" | "change";
+		trigger: string;
 		targets: Array<number>;
-		inputs: Array<string>;
-		outputs: Array<string>;
+		inputs: Array<number>;
+		outputs: Array<number>;
 		queue: boolean;
 	}
 
@@ -121,6 +121,32 @@
 				instance_map[t]
 			]);
 
+			// page events
+			if (
+				targets.length === 0 &&
+				!handled_dependencies[i]?.includes(-1) &&
+				trigger === "load" &&
+				// check all input + output elements are on the page
+				outputs.every((v) => instance_map[v].instance) &&
+				inputs.every((v) => instance_map[v].instance)
+			) {
+				fn(
+					"predict",
+					{
+						fn_index: i,
+						data: inputs.map((id) => instance_map[id].value)
+					},
+					queue,
+					() => {}
+				).then((output) => {
+					output.data.forEach((value, i) => {
+						instance_map[outputs[i]].value = value;
+					});
+				});
+
+				handled_dependencies[i] = [-1];
+			}
+
 			target_instances.forEach(([id, { instance }]: [number, Instance]) => {
 				// console.log(id, handled_dependencies[i]?.includes(id) || !instance);
 				if (handled_dependencies[i]?.includes(id) || !instance) return;