add frontend for page load events (#967)

* Blocks load event implemented

* tweks

* add frontend for page load events

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Ömer Faruk Özdemir <farukozderim@gmail.com>

Author: 3 people

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()

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;