@gradio/core 1.0.1 → 1.0.2

package/dist/src/init.svelte.js

@@ -1,6 +1,8 @@
 import { determine_interactivity, get_component, get_inputs_outputs } from "./init_utils";
 import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
+import { dequal } from "dequal";
+import {} from "@gradio/utils";
 import { allowed_shared_props } from "@gradio/utils";
 import { Client } from "@gradio/client";
 const type_map = {
@@ -21,6 +23,7 @@ export class AppTree {
     client;
     /** the root node of the processed layout tree */
     root = $state();
+    root_untracked;
     /** a set of all component IDs that are inputs to dependencies */
     #input_ids = new Set();
     /** a set of all component IDs that are outputs of dependencies */
@@ -29,13 +32,15 @@ export class AppTree {
     #pending_components = [];
     #get_callbacks = new Map();
     #set_callbacks = new Map();
+    #event_dispatcher;
     component_ids;
     initial_tabs = {};
     components_to_register = new Set();
     ready;
     ready_resolve;
     resolved = false;
-    constructor(components, layout, dependencies, config, app, reactive_formatter) {
+    #hidden_on_startup = new Set();
+    constructor(components, layout, dependencies, config, app, reactive_formatter, event_dispatcher) {
         this.ready = new Promise((resolve) => {
             this.ready_resolve = resolve;
         });
@@ -66,6 +71,8 @@ export class AppTree {
         this.initial_tabs = {};
         gather_initial_tabs(this.root, this.initial_tabs);
         this.postprocess(this.root);
+        this.#event_dispatcher = event_dispatcher;
+        this.root_untracked = this.root;
     }
     reload(components, layout, dependencies, config) {
         this.#layout_payload = layout;
@@ -126,7 +133,8 @@ export class AppTree {
             (node) => handle_empty_forms(node, this.components_to_register),
             (node) => translate_props(node),
             (node) => apply_initial_tabs(node, this.initial_tabs),
-            (node) => this.find_attached_events(node, this.#dependency_payload)
+            (node) => this.find_attached_events(node, this.#dependency_payload),
+            (node) => untrack_children_of_closed_accordions_or_inactive_tabs(node, this.components_to_register, this.#hidden_on_startup)
         ]);
     }
     find_attached_events(node, dependencies) {
@@ -211,7 +219,8 @@ export class AppTree {
                 : null,
             key: component.key,
             rendered_in: component.rendered_in,
-            documentation: component.documentation
+            documentation: component.documentation,
+            original_visibility: processed_props.shared_props.visible
         };
         return node;
     }
@@ -230,6 +239,15 @@ export class AppTree {
         }
         n.children = subtree.children;
     }
+    async update_visibility(node, new_state) {
+        node.children.forEach((child) => {
+            const _set_data = this.#set_callbacks.get(child.id);
+            if (_set_data) {
+                _set_data(new_state);
+            }
+            this.update_visibility(child, new_state);
+        });
+    }
     /*
      * Updates the state of a component by its ID
      * @param id the ID of the component to update
@@ -248,20 +266,44 @@ export class AppTree {
             this.root = this.traverse(this.root, [
                 //@ts-ignore
                 (n) => set_visibility_for_updated_node(n, id, new_state.visible),
+                //@ts-ignore
+                (n) => update_parent_visibility(n, id, new_state.visible),
                 (n) => handle_visibility(n, this.#config.api_url)
             ]);
+            await tick();
             already_updated_visibility = true;
         }
         const _set_data = this.#set_callbacks.get(id);
-        if (!_set_data)
-            return;
-        _set_data(new_state);
+        if (!_set_data) {
+            const old_value = node?.props.props.value;
+            // @ts-ignore
+            const new_props = create_props_shared_props(new_state);
+            node.props.shared_props = {
+                ...node?.props.shared_props,
+                ...new_props.shared_props
+            };
+            node.props.props = { ...node?.props.props, ...new_props.props };
+            if ("value" in new_state && !dequal(old_value, new_state.value)) {
+                this.#event_dispatcher(id, "change", null);
+            }
+        }
+        else if (_set_data) {
+            _set_data(new_state);
+        }
         if (!check_visibility || already_updated_visibility)
             return;
         // need to let the UI settle before traversing again
         // otherwise there could be
         await tick();
-        this.root = this.traverse(this.root, (n) => handle_visibility(n, this.#config.api_url));
+        // Update the visibility in a way that does not
+        // re-render the root/tree. Doing that would nuke
+        // any values currently in the UI.
+        // @ts-ignore
+        await this.update_visibility(node, new_state);
+        const parent_node = find_parent(this.root, id);
+        if (parent_node)
+            // @ts-ignore
+            update_parent_visibility(parent_node, id, new_state.visible);
     }
     /**
      * Gets the current state of a component by its ID
@@ -270,15 +312,34 @@ export class AppTree {
      */
     async get_state(id) {
         const _get_data = this.#get_callbacks.get(id);
-        const component = this.#component_payload.find((c) => c.id === id);
+        const component = find_node_by_id(this.root, id);
         if (!_get_data && !component)
             return null;
         if (_get_data)
             return await _get_data();
         if (component)
-            return Promise.resolve({ value: component.props.value });
+            return Promise.resolve({ value: component.props.props.value });
         return null;
     }
+    async render_previously_invisible_children(id) {
+        this.root = this.traverse(this.root, [
+            (node) => {
+                if (node.id === id) {
+                    make_visible_if_not_rendered(node, this.#hidden_on_startup);
+                }
+                return node;
+            },
+            (node) => handle_visibility(node, this.#config.api_url)
+        ]);
+    }
+}
+function make_visible_if_not_rendered(node, hidden_on_startup) {
+    node.props.shared_props.visible = hidden_on_startup.has(node.id)
+        ? true
+        : node.props.shared_props.visible;
+    node.children.forEach((child) => {
+        make_visible_if_not_rendered(child, hidden_on_startup);
+    });
 }
 /**
  * Process the server function names and return a dictionary of functions
@@ -302,15 +363,7 @@ export function process_server_fn(id, server_fns, app) {
         return acc;
     }, {});
 }
-/**
- * Gathers the props for a component
- * @param id the ID of the component
- * @param props the props of the component
- * @param dependencies the component's dependencies
- * @param additional any additional props to include
- * @returns the gathered props as an object with `shared_props` and `props` keys
- */
-function gather_props(id, props, dependencies, client, api_url, additional = {}) {
+function create_props_shared_props(props) {
     const _shared_props = {};
     const _props = {};
     for (const key in props) {
@@ -322,14 +375,24 @@ function gather_props(id, props, dependencies, client, api_url, additional = {})
         else if (allowed_shared_props.includes(key)) {
             const _key = key;
             _shared_props[_key] = props[key];
-            if (_key === "server_fns") {
-                _shared_props.server = process_server_fn(id, props.server_fns, client);
-            }
         }
         else {
             _props[key] = props[key];
         }
     }
+    return { shared_props: _shared_props, props: _props };
+}
+/**
+ * Gathers the props for a component
+ * @param id the ID of the component
+ * @param props the props of the component
+ * @param dependencies the component's dependencies
+ * @param additional any additional props to include
+ * @returns the gathered props as an object with `shared_props` and `props` keys
+ */
+function gather_props(id, props, dependencies, client, api_url, additional = {}) {
+    const { shared_props: _shared_props, props: _props } = create_props_shared_props(props);
+    _shared_props.server = process_server_fn(id, props.server_fns, client);
     for (const key in additional) {
         if (allowed_shared_props.includes(key)) {
             const _key = key;
@@ -385,6 +448,38 @@ function untrack_children_of_invisible_parents(node, components_to_register) {
     }
     return node;
 }
+function mark_component_invisible_if_visible(node, hidden_on_startup) {
+    if (node.props.shared_props.visible === true) {
+        hidden_on_startup.add(node.id);
+        node.props.shared_props.visible = false;
+    }
+    node.children.forEach((child) => {
+        mark_component_invisible_if_visible(child, hidden_on_startup);
+    });
+    return node;
+}
+function untrack_children_of_closed_accordions_or_inactive_tabs(node, components_to_register, hidden_on_startup) {
+    // Check if the node is an accordion or tabs
+    if (node.type === "accordion" && node.props.props.open === false) {
+        _untrack(node, components_to_register);
+        if (node.children) {
+            node.children.forEach((child) => {
+                mark_component_invisible_if_visible(child, hidden_on_startup);
+            });
+        }
+    }
+    if (node.type === "tabs") {
+        node.children.forEach((child) => {
+            if (child.type === "tabitem" &&
+                child.props.props.id !==
+                    (node.props.props.selected || node.props.props.initial_tabs[0].id)) {
+                _untrack(child, components_to_register);
+                mark_component_invisible_if_visible(child, hidden_on_startup);
+            }
+        });
+    }
+    return node;
+}
 function handle_empty_forms(node, components_to_register) {
     // Check if the node is visible
     if (node.type === "form") {
@@ -397,6 +492,27 @@ function handle_empty_forms(node, components_to_register) {
     }
     return node;
 }
+function update_parent_visibility(node, child_made_visible, visibility_state) {
+    // This function was added to address a tricky situation:
+    // Form components are wrapped in a Form component automatically.
+    // If all the children of the Form are invisible, the Form itself is marked invisible.
+    // in AppTree.postprocess -> handle_empty_forms
+    // This is to avoid rendering empty forms in the UI. They look ugly.
+    // So what happens when a child inside the Form is made visible again?
+    // The Form needs to become visible again too.
+    // If the child is made invisible, the form should be too if all other children are invisible.
+    // However, we are not doing this now since what we want to do is fetch the latest visibility of all
+    // the children from the UI. However, get_data only returns the props, not the shared props.
+    if (node.type === "form" &&
+        node.children.length &&
+        node.children.some((child) => child.id === child_made_visible)) {
+        if (visibility_state === true)
+            node.props.shared_props.visible = true;
+        else if (!visibility_state && node.children.length === 1)
+            node.props.shared_props.visible = "hidden";
+    }
+    return node;
+}
 function translate_props(node) {
     const supported_props = [
         "description",
@@ -424,6 +540,9 @@ function apply_initial_tabs(node, initial_tabs) {
         const tabs = initial_tabs[node.id].sort((a, b) => a.order - b.order);
         node.props.props.initial_tabs = tabs;
     }
+    else if (node.type === "tabitem") {
+        node.props.props.component_id = node.id;
+    }
     return node;
 }
 function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
@@ -440,7 +559,8 @@ function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
             elem_id: node.props.shared_props.elem_id,
             visible: node.props.shared_props.visible,
             interactive: node.props.shared_props.interactive,
-            scale: node.props.shared_props.scale || null
+            scale: node.props.shared_props.scale || null,
+            component_id: node.id
         });
         node.props.props.order = order;
     }
@@ -473,3 +593,17 @@ function find_node_by_id(tree, id) {
     }
     return null;
 }
+function find_parent(tree, id) {
+    if (tree.children) {
+        for (const child of tree.children) {
+            if (child.id === id) {
+                return tree;
+            }
+            const result = find_parent(child, id);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}

package/dist/src/types.d.ts

@@ -28,6 +28,7 @@ export interface ProcessedComponentMeta {
     component_class_id: string;
     key: string | number | null;
     rendered_in?: number;
+    original_visibility: boolean | "hidden";
 }
 /** Dictates whether a dependency is continous and/or a generator */
 export interface DependencyTypes {

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "devDependencies": {
-    "@gradio/annotatedimage": "^0.10.1",
+    "@gradio/accordion": "^0.5.26",
     "@gradio/atoms": "^0.19.0",
+    "@gradio/annotatedimage": "^0.10.1",
     "@gradio/box": "^0.2.26",
+    "@gradio/audio": "^0.21.0",
     "@gradio/browserstate": "^0.3.3",
-    "@gradio/button": "^0.5.14",
-    "@gradio/checkbox": "^0.5.0",
+    "@gradio/button": "^0.6.0",
     "@gradio/chatbot": "^0.28.0",
-    "@gradio/client": "^2.0.0",
-    "@gradio/audio": "^0.20.0",
-    "@gradio/checkboxgroup": "^0.8.0",
-    "@gradio/accordion": "^0.5.25",
-    "@gradio/colorpicker": "^0.5.0",
+    "@gradio/checkbox": "^0.5.1",
     "@gradio/code": "^0.16.0",
-    "@gradio/dataframe": "^0.21.0",
+    "@gradio/checkboxgroup": "^0.8.0",
+    "@gradio/colorpicker": "^0.5.1",
     "@gradio/column": "^0.3.0",
+    "@gradio/client": "^2.0.0",
     "@gradio/dataset": "^0.5.0",
+    "@gradio/dataframe": "^0.21.1",
+    "@gradio/dropdown": "^0.10.7",
     "@gradio/datetime": "^0.3.23",
-    "@gradio/downloadbutton": "^0.4.13",
-    "@gradio/dropdown": "^0.10.6",
+    "@gradio/downloadbutton": "^0.4.14",
     "@gradio/fallback": "^0.4.30",
     "@gradio/file": "^0.13.1",
-    "@gradio/form": "^0.2.27",
     "@gradio/fileexplorer": "^0.5.42",
-    "@gradio/gallery": "^0.15.35",
+    "@gradio/form": "^0.2.27",
+    "@gradio/gallery": "^0.15.36",
     "@gradio/group": "^0.3.0",
-    "@gradio/highlightedtext": "^0.9.14",
-    "@gradio/html": "^0.8.0",
+    "@gradio/highlightedtext": "^0.9.15",
+    "@gradio/html": "^0.8.1",
     "@gradio/image": "^0.24.0",
-    "@gradio/imageeditor": "^0.18.2",
     "@gradio/icons": "^0.15.0",
-    "@gradio/imageslider": "^0.3.1",
+    "@gradio/imageeditor": "^0.18.2",
     "@gradio/json": "^0.5.32",
-    "@gradio/markdown": "^0.13.23",
+    "@gradio/imageslider": "^0.3.1",
     "@gradio/label": "^0.5.22",
+    "@gradio/markdown": "^0.13.23",
     "@gradio/model3d": "^0.15.1",
-    "@gradio/multimodaltextbox": "^0.11.0",
-    "@gradio/nativeplot": "^0.9.0",
+    "@gradio/multimodaltextbox": "^0.11.1",
     "@gradio/number": "^0.7.2",
-    "@gradio/paramviewer": "^0.9.0",
     "@gradio/plot": "^0.9.25",
+    "@gradio/nativeplot": "^0.9.1",
+    "@gradio/paramviewer": "^0.9.0",
     "@gradio/radio": "^0.8.0",
     "@gradio/row": "^0.3.0",
     "@gradio/sidebar": "^0.1.24",
+    "@gradio/simpleimage": "^0.9.1",
     "@gradio/simpledropdown": "^0.3.30",
     "@gradio/simpletextbox": "^0.3.31",
-    "@gradio/slider": "^0.7.0",
-    "@gradio/simpleimage": "^0.9.1",
+    "@gradio/slider": "^0.7.1",
     "@gradio/state": "^0.2.0",
-    "@gradio/tabitem": "^0.6.2",
-    "@gradio/tabs": "^0.5.2",
-    "@gradio/textbox": "^0.12.0",
+    "@gradio/tabitem": "^0.6.3",
     "@gradio/statustracker": "^0.12.0",
+    "@gradio/textbox": "^0.12.1",
+    "@gradio/tabs": "^0.5.3",
     "@gradio/theme": "^0.5.0",
     "@gradio/timer": "^0.4.6",
-    "@gradio/upload": "^0.17.2",
+    "@gradio/uploadbutton": "^0.9.14",
     "@gradio/utils": "^0.10.4",
-    "@gradio/uploadbutton": "^0.9.13",
-    "@gradio/video": "^0.17.0",
-    "@gradio/vibeeditor": "^0.3.1"
+    "@gradio/vibeeditor": "^0.3.1",
+    "@gradio/video": "^0.18.0",
+    "@gradio/upload": "^0.17.2"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -104,27 +104,6 @@
 		}
 	});
 
-	let app_tree = new AppTree(
-		components,
-		layout,
-		dependencies,
-		{
-			root,
-			theme: theme_mode,
-			version,
-			api_prefix,
-			max_file_size,
-			autoscroll
-		},
-		app,
-		$reactive_formatter
-	);
-
-	setContext(GRADIO_ROOT, {
-		register: app_tree.register_component.bind(app_tree),
-		dispatcher: gradio_event_dispatcher
-	});
-
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
 
 	function gradio_event_dispatcher(
@@ -142,6 +121,12 @@
 			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
 			new_message("Info", data as string, -1, event, 10, true);
+		} else if (event === "gradio_expand" || event === "gradio_tab_select") {
+			const id_ =
+				event === "gradio_expand"
+					? id
+					: (data as { component_id: number }).component_id;
+			app_tree.render_previously_invisible_children(id_);
 		} else if (event == "clear_status") {
 			app_tree.update_state(
 				id,
@@ -173,6 +158,28 @@
 		}
 	}
 
+	let app_tree = new AppTree(
+		components,
+		layout,
+		dependencies,
+		{
+			root,
+			theme: theme_mode,
+			version,
+			api_prefix,
+			max_file_size,
+			autoscroll
+		},
+		app,
+		$reactive_formatter,
+		gradio_event_dispatcher
+	);
+
+	setContext(GRADIO_ROOT, {
+		register: app_tree.register_component.bind(app_tree),
+		dispatcher: gradio_event_dispatcher
+	});
+
 	let api_calls: Payload[] = $state([]);
 	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager
@@ -322,8 +329,10 @@
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
-	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
-	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
+	const DUPLICATE_MESSAGE = $reactive_formatter("blocks.long_requests_queue");
+	const MOBILE_QUEUE_WARNING = $reactive_formatter(
+		"blocks.connection_can_break"
+	);
 	const LOST_CONNECTION_MESSAGE =
 		"Connection to the server was lost. Attempting reconnection...";
 	const CHANGED_CONNECTION_MESSAGE =
@@ -331,7 +340,9 @@
 	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 WAITING_FOR_INPUTS_MESSAGE = $reactive_formatter(
+		"blocks.waiting_for_inputs"
+	);
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
 	let is_mobile_device = false;
@@ -440,11 +451,11 @@
 						class="show-api"
 					>
 						{#if app.config?.mcp_server}
-							{$_("errors.use_via_api_or_mcp")}
+							{$reactive_formatter("errors.use_via_api_or_mcp")}
 						{:else}
-							{$_("errors.use_via_api")}
+							{$reactive_formatter("errors.use_via_api")}
 						{/if}
-						<img src={api_logo} alt={$_("common.logo")} />
+						<img src={api_logo} alt={$reactive_formatter("common.logo")} />
 					</button>
 				{/if}
 				{#if footer_links.includes("gradio")}
@@ -455,8 +466,8 @@
 						target="_blank"
 						rel="noreferrer"
 					>
-						{$_("common.built_with_gradio")}
-						<img src={logo} alt={$_("common.logo")} />
+						{$reactive_formatter("common.built_with_gradio")}
+						<img src={logo} alt={$reactive_formatter("common.logo")} />
 					</a>
 				{/if}
 				<button
@@ -466,8 +477,11 @@
 					}}
 					class="record"
 				>
-					{$_("common.stop_recording")}
-					<img src={record_stop} alt={$_("common.stop_recording")} />
+					{$reactive_formatter("common.stop_recording")}
+					<img
+						src={record_stop}
+						alt={$reactive_formatter("common.stop_recording")}
+					/>
 				</button>
 				<div class="divider">·</div>
 				{#if footer_links.includes("settings")}
@@ -481,8 +495,11 @@
 						}}
 						class="settings"
 					>
-						{$_("common.settings")}
-						<img src={settings_logo} alt={$_("common.settings")} />
+						{$reactive_formatter("common.settings")}
+						<img
+							src={settings_logo}
+							alt={$reactive_formatter("common.settings")}
+						/>
 					</button>
 				{/if}
 			</footer>
@@ -552,15 +569,16 @@
 					this={Settings}
 					bind:allow_zoom
 					bind:allow_video_trim
-					on:close={() => {
+					onclose={() => {
 						set_settings_visible(false);
 					}}
-					on:start_recording={() => {
+					start_recording={() => {
 						screen_recording();
 					}}
 					pwa_enabled={app.config.pwa}
 					{root}
 					{space_id}
+					i18n={$reactive_formatter}
 				/>
 			</div>
 		</div>