@gradio/core 0.22.0 → 0.23.1

package/dist/src/init.js

@@ -1,4 +1,5 @@
 import { writable, get } from "svelte/store";
+import { dequal } from "dequal";
 import { load_component } from "virtual:component-loader";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
@@ -11,8 +12,9 @@ const raf = is_browser
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
-let has_run = new Set();
-export function create_components(initial_layout) {
+export function create_components({ initial_layout = undefined } = {
+    initial_layout: undefined
+}) {
     let _component_map;
     let target_map = writable({});
     let _target_map = {};
@@ -26,6 +28,10 @@ export function create_components(initial_layout) {
     let app;
     let keys_per_render_id = {};
     let _rootNode;
+    let value_change_cb = null;
+    function value_change(cb) {
+        value_change_cb = cb;
+    }
     // Store current layout and root for dynamic visibility recalculation
     let current_layout;
     let current_root;
@@ -48,8 +54,12 @@ export function create_components(initial_layout) {
         if (instance_map) {
             // re-render in reload mode
             components.forEach((c) => {
-                if (c.props.value == null && c.id in instance_map) {
-                    c.props.value = instance_map[c.id].props.value;
+                if (c.props.value == null && c.key) {
+                    // If the component has a key, we preserve its value by finding a matching instance with the same key
+                    const matching_instance = Object.values(instance_map).find((instance) => instance.key === c.key);
+                    if (matching_instance) {
+                        c.props.value = matching_instance.props.value;
+                    }
                 }
             });
         }
@@ -178,17 +188,11 @@ export function create_components(initial_layout) {
         if (!instance.component) {
             const constructor_key = instance.component_class_id || instance.type;
             let component_constructor = constructor_map.get(constructor_key);
-            // Only load component if it was preloaded (i.e., it's visible)
             if (component_constructor) {
                 instance.component = (await component_constructor)?.default;
             }
-            // If component wasn't preloaded, leave it unloaded for now
-            // It will be loaded later when/if it becomes visible
         }
         instance.parent = parent;
-        // if (instance.type === "timer") {
-        // 	console.log("timer", instance, constructor_map);
-        // }
         if (instance.type === "dataset") {
             instance.props.component_map = get_component(instance.type, instance.component_class_id, root, components, instance.props.components).example_components;
         }
@@ -300,6 +304,7 @@ export function create_components(initial_layout) {
                     if (!instance)
                         continue;
                     let new_value;
+                    const old_value = instance.props[update.prop];
                     if (update.value instanceof Map)
                         new_value = new Map(update.value);
                     else if (update.value instanceof Set)
@@ -313,6 +318,11 @@ export function create_components(initial_layout) {
                     else
                         new_value = update.value;
                     instance.props[update.prop] = new_value;
+                    if (update.prop === "value" &&
+                        !is_visible(instance) &&
+                        !dequal(old_value, new_value)) {
+                        value_change_cb?.(update.id, new_value);
+                    }
                 }
             }
             return layout;
@@ -407,7 +417,8 @@ export function create_components(initial_layout) {
         loading_status,
         scheduled_updates: update_scheduled_store,
         create_layout: create_layout,
-        rerender_layout
+        rerender_layout,
+        value_change
     };
 }
 /** An async version of 'new Function' */
@@ -721,3 +732,13 @@ export function preload_all_components(components, root) {
     });
     return constructor_map;
 }
+function is_visible(component) {
+    if (typeof component.props.visible === "boolean" &&
+        component.props.visible === false) {
+        return false;
+    }
+    else if (component.parent) {
+        return is_visible(component.parent);
+    }
+    return true;
+}

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.19",
+    "@gradio/accordion": "^0.5.20",
+    "@gradio/annotatedimage": "^0.9.25",
     "@gradio/atoms": "^0.16.3",
-    "@gradio/audio": "^0.17.20",
+    "@gradio/audio": "^0.17.21",
     "@gradio/box": "^0.2.21",
-    "@gradio/annotatedimage": "^0.9.24",
-    "@gradio/button": "^0.5.6",
-    "@gradio/chatbot": "^0.26.17",
-    "@gradio/checkboxgroup": "^0.6.24",
-    "@gradio/checkbox": "^0.4.25",
-    "@gradio/code": "^0.14.10",
-    "@gradio/client": "^1.15.5",
-    "@gradio/colorpicker": "^0.4.24",
+    "@gradio/browserstate": "^0.3.2",
+    "@gradio/button": "^0.5.7",
+    "@gradio/chatbot": "^0.26.18",
+    "@gradio/checkbox": "^0.4.26",
+    "@gradio/client": "^1.15.6",
+    "@gradio/code": "^0.14.11",
+    "@gradio/colorpicker": "^0.4.25",
     "@gradio/column": "^0.2.1",
-    "@gradio/dataframe": "^0.18.2",
-    "@gradio/dataset": "^0.4.26",
-    "@gradio/datetime": "^0.3.17",
-    "@gradio/downloadbutton": "^0.4.6",
-    "@gradio/dropdown": "^0.9.24",
-    "@gradio/fallback": "^0.4.24",
-    "@gradio/fileexplorer": "^0.5.34",
+    "@gradio/dataframe": "^0.18.3",
+    "@gradio/checkboxgroup": "^0.6.25",
+    "@gradio/dataset": "^0.4.27",
+    "@gradio/downloadbutton": "^0.4.7",
+    "@gradio/datetime": "^0.3.18",
+    "@gradio/dropdown": "^0.9.25",
+    "@gradio/fallback": "^0.4.25",
+    "@gradio/file": "^0.12.24",
     "@gradio/form": "^0.2.21",
-    "@gradio/gallery": "^0.15.26",
-    "@gradio/file": "^0.12.23",
+    "@gradio/fileexplorer": "^0.5.35",
+    "@gradio/gallery": "^0.15.27",
     "@gradio/group": "^0.2.0",
-    "@gradio/highlightedtext": "^0.9.7",
+    "@gradio/highlightedtext": "^0.9.8",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.12",
-    "@gradio/html": "^0.6.16",
-    "@gradio/imageeditor": "^0.16.0",
-    "@gradio/imageslider": "^0.2.8",
-    "@gradio/label": "^0.5.16",
-    "@gradio/browserstate": "^0.3.2",
-    "@gradio/json": "^0.5.26",
-    "@gradio/markdown": "^0.13.17",
-    "@gradio/model3d": "^0.14.19",
-    "@gradio/nativeplot": "^0.7.1",
-    "@gradio/multimodaltextbox": "^0.10.12",
-    "@gradio/number": "^0.6.1",
-    "@gradio/paramviewer": "^0.7.12",
-    "@gradio/plot": "^0.9.19",
-    "@gradio/radio": "^0.7.7",
+    "@gradio/html": "^0.6.17",
+    "@gradio/image": "^0.22.13",
+    "@gradio/imageeditor": "^0.16.1",
+    "@gradio/imageslider": "^0.2.9",
+    "@gradio/label": "^0.5.17",
+    "@gradio/json": "^0.5.27",
+    "@gradio/markdown": "^0.13.18",
+    "@gradio/model3d": "^0.14.21",
+    "@gradio/multimodaltextbox": "^0.10.13",
+    "@gradio/nativeplot": "^0.7.2",
+    "@gradio/paramviewer": "^0.7.13",
+    "@gradio/number": "^0.6.2",
+    "@gradio/plot": "^0.9.20",
+    "@gradio/radio": "^0.7.8",
+    "@gradio/sidebar": "^0.1.18",
+    "@gradio/simpledropdown": "^0.3.25",
+    "@gradio/simpleimage": "^0.8.35",
+    "@gradio/simpletextbox": "^0.3.26",
     "@gradio/row": "^0.2.1",
-    "@gradio/sidebar": "^0.1.17",
-    "@gradio/simpledropdown": "^0.3.24",
-    "@gradio/simpleimage": "^0.8.34",
-    "@gradio/simpletextbox": "^0.3.25",
-    "@gradio/sketchbox": "^0.6.12",
+    "@gradio/sketchbox": "^0.6.13",
+    "@gradio/slider": "^0.6.14",
+    "@gradio/statustracker": "^0.10.15",
     "@gradio/state": "^0.1.2",
-    "@gradio/slider": "^0.6.13",
-    "@gradio/statustracker": "^0.10.14",
     "@gradio/tabitem": "^0.5.0",
     "@gradio/tabs": "^0.4.5",
-    "@gradio/textbox": "^0.10.16",
+    "@gradio/textbox": "^0.10.17",
     "@gradio/theme": "^0.4.0",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.10",
-    "@gradio/uploadbutton": "^0.9.6",
+    "@gradio/upload": "^0.16.11",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.14.20",
+    "@gradio/video": "^0.14.21",
+    "@gradio/uploadbutton": "^0.9.7",
     "@gradio/wasm": "^0.18.1"
   },
   "msw": {
@@ -94,5 +94,8 @@
     "type": "git",
     "url": "git+https://github.com/gradio-app/gradio.git",
     "directory": "js/core"
+  },
+  "dependencies": {
+    "dequal": "^2.0.2"
   }
 }

package/src/Blocks.svelte

@@ -56,6 +56,7 @@
 	export let max_file_size: number | undefined = undefined;
 	export let initial_layout: ComponentMeta | undefined = undefined;
 	export let css: string | null | undefined = null;
+	let broken_connection = false;
 
 	let {
 		layout: _layout,
@@ -68,8 +69,11 @@
 		loading_status,
 		scheduled_updates,
 		create_layout,
-		rerender_layout
-	} = create_components(initial_layout);
+		rerender_layout,
+		value_change
+	} = create_components({
+		initial_layout
+	});
 
 	$: components, layout, dependencies, root, app, fill_height, target, run();
 
@@ -275,13 +279,17 @@
 
 	let _error_id = -1;
 
-	let user_left_page = false;
-
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
 	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
-	const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+	const LOST_CONNECTION_MESSAGE =
+		"Connection to the server was lost. Attempting reconnection...";
+	const CHANGED_CONNECTION_MESSAGE =
+		"Reconnected to server, but the server has changed. You may need to <a href=''>refresh the page</a>.";
+	const RECONNECTION_MESSAGE = "Connection re-established.";
+	const SESSION_NOT_FOUND_MESSAGE =
+		"Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
 	const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
@@ -424,6 +432,43 @@
 			}
 		}
 
+		async function reconnect(): Promise<void> {
+			const connection_status = await app.reconnect();
+			if (connection_status === "broken") {
+				setTimeout(reconnect, 1000);
+			} else if (connection_status === "changed") {
+				broken_connection = false;
+				messages = [
+					new_message(
+						"Changed Connection",
+						CHANGED_CONNECTION_MESSAGE,
+						-1,
+						"info",
+						3,
+						true
+					),
+					...messages.map((m) =>
+						m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+					)
+				];
+			} else if (connection_status === "connected") {
+				broken_connection = false;
+				messages = [
+					new_message(
+						"Reconnected",
+						RECONNECTION_MESSAGE,
+						-1,
+						"success",
+						null,
+						true
+					),
+					...messages.map((m) =>
+						m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+					)
+				];
+			}
+		}
+
 		async function make_prediction(
 			payload: Payload,
 			streaming = false
@@ -567,6 +612,35 @@
 
 			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
+				if (message.broken && !broken_connection) {
+					messages = [
+						new_message(
+							"Broken Connection",
+							LOST_CONNECTION_MESSAGE,
+							-1,
+							"error",
+							null,
+							true
+						),
+						...messages
+					];
+
+					broken_connection = true;
+					setTimeout(reconnect, 1000);
+				}
+				if (message.session_not_found) {
+					messages = [
+						new_message(
+							"Session Not Found",
+							SESSION_NOT_FOUND_MESSAGE,
+							-1,
+							"error",
+							null,
+							true
+						),
+						...messages
+					];
+				}
 				const { fn_index, ...status } = message;
 				if (status.stage === "streaming" && status.time_limit) {
 					dep.inputs.forEach((id) => {
@@ -636,16 +710,11 @@
 					});
 					submit_map.delete(dep_index);
 				}
-				if (status.broken && is_mobile_device && user_left_page) {
-					window.setTimeout(() => {
-						messages = [
-							new_message("Error", MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-							...messages
-						];
-					}, 0);
-					wait_then_trigger_api_call(dep.id, payload.trigger_id, event_data);
-					user_left_page = false;
-				} else if (status.stage === "error") {
+				if (
+					status.stage === "error" &&
+					!broken_connection &&
+					!message.session_not_found
+				) {
 					if (status.message) {
 						const _message = status.message.replace(
 							MESSAGE_QUOTE_RE,
@@ -779,6 +848,16 @@
 		render_complete = true;
 	}
 
+	value_change((id, value) => {
+		const deps = $targets[id]?.["change"];
+
+		deps?.forEach((dep_id) => {
+			requestAnimationFrame(() => {
+				wait_then_trigger_api_call(dep_id, id, value);
+			});
+		});
+	});
+
 	const handle_load_triggers = (): void => {
 		dependencies.forEach((dep) => {
 			if (dep.targets.some((dep) => dep[1] === "load")) {
@@ -851,12 +930,6 @@
 	let is_screen_recording = writable(false);
 
 	onMount(() => {
-		document.addEventListener("visibilitychange", function () {
-			if (document.visibilityState === "hidden") {
-				user_left_page = true;
-			}
-		});
-
 		is_mobile_device =
 			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 				navigator.userAgent

package/src/RenderComponent.svelte

@@ -81,6 +81,7 @@
 		{elem_id}
 		{elem_classes}
 		{target}
+		{visible}
 		{...$$restProps}
 		{theme_mode}
 		{root}