@gradio/core 0.20.0 → 0.21.0

package/dist/src/init.js

@@ -26,6 +26,9 @@ export function create_components(initial_layout) {
     let app;
     let keys_per_render_id = {};
     let _rootNode;
+    // Store current layout and root for dynamic visibility recalculation
+    let current_layout;
+    let current_root;
     function set_event_specific_args(dependencies) {
         dependencies.forEach((dep) => {
             dep.targets.forEach((target) => {
@@ -57,6 +60,9 @@ export function create_components(initial_layout) {
         constructor_map = new Map();
         _component_map = new Map();
         instance_map = {};
+        // Store current layout and root for dynamic visibility recalculation
+        current_layout = layout;
+        current_root = root;
         _rootNode = {
             id: layout.id,
             type: "column",
@@ -75,7 +81,7 @@ export function create_components(initial_layout) {
             get_inputs_outputs(dep, inputs, outputs);
         });
         target_map.set(_target_map);
-        constructor_map = preload_all_components(components, root);
+        constructor_map = preload_visible_components(components, layout, root);
         instance_map = components.reduce((acc, c) => {
             acc[c.id] = c;
             return acc;
@@ -88,6 +94,9 @@ export function create_components(initial_layout) {
      * Rerender the layout when the config has been modified to attach new components
      */
     function rerender_layout({ render_id, components, layout, root, dependencies }) {
+        // Update current layout and root for dynamic visibility recalculation
+        current_layout = layout;
+        current_root = root;
         components.forEach((c) => {
             for (const prop in c.props) {
                 if (c.props[prop] === null) {
@@ -105,7 +114,7 @@ export function create_components(initial_layout) {
                 replacement_components.push(c);
             }
         });
-        let _constructor_map = preload_all_components(new_components, root);
+        let _constructor_map = preload_visible_components(new_components, layout, root);
         _constructor_map.forEach((v, k) => {
             constructor_map.set(k, v);
         });
@@ -167,9 +176,19 @@ export function create_components(initial_layout) {
     async function walk_layout(node, root, components, parent) {
         const instance = instance_map[node.id];
         if (!instance.component) {
-            instance.component = (await constructor_map.get(instance.component_class_id || instance.type))?.default;
+            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;
         }
@@ -199,7 +218,7 @@ export function create_components(initial_layout) {
             instance.props.initial_tabs = child_tab_items?.map((child) => ({
                 label: child.props.label,
                 id: child.props.id,
-                visible: child.props.visible,
+                visible: typeof child.props.visible === "boolean" ? child.props.visible : true,
                 interactive: child.props.interactive,
                 order: child.props.order
             }));
@@ -214,7 +233,63 @@ export function create_components(initial_layout) {
     }
     let update_scheduled = false;
     let update_scheduled_store = writable(false);
+    /**
+     * Load newly visible components after visibility changes
+     * @param newly_visible_ids Set of component IDs that are now visible
+     */
+    async function load_newly_visible_components(newly_visible_ids) {
+        if (newly_visible_ids.size === 0)
+            return;
+        const components_to_load = _components.filter((c) => newly_visible_ids.has(c.id));
+        for (const component of components_to_load) {
+            const constructor_key = component.component_class_id || component.type;
+            // Only load if not already loaded
+            if (!constructor_map.has(constructor_key)) {
+                const { component: loadable_component, example_components } = get_component(component.type, component.component_class_id, current_root, _components);
+                constructor_map.set(constructor_key, loadable_component);
+                if (example_components) {
+                    for (const [name, example_component] of example_components) {
+                        constructor_map.set(name, example_component);
+                    }
+                }
+                // Load the component if it doesn't exist yet
+                if (!component.component) {
+                    component.component = (await loadable_component)?.default;
+                }
+            }
+            else {
+                component.component =
+                    (await constructor_map.get(constructor_key))?.default ??
+                        component.component;
+            }
+        }
+    }
+    /**
+     * Check if any visibility-affecting properties have changed
+     * @param updates Array of update transactions
+     * @returns True if visibility might have changed
+     */
+    function has_visibility_changes(updates) {
+        return updates.some((update_batch) => update_batch.some((update) => {
+            const instance = instance_map[update.id];
+            if (!instance)
+                return false;
+            // Check for visibility property changes
+            if (update.prop === "visible")
+                return true;
+            // Check for selected tab changes in tabs components
+            if (update.prop === "selected" && instance.type === "tabs")
+                return true;
+            return false;
+        }));
+    }
     function flush() {
+        const had_visibility_changes = has_visibility_changes(pending_updates);
+        let previous_visible_ids;
+        // Capture current visibility state before applying updates
+        if (had_visibility_changes && current_layout) {
+            previous_visible_ids = determine_visible_components(current_layout, _components);
+        }
         layout_store.update((layout) => {
             for (let i = 0; i < pending_updates.length; i++) {
                 for (let j = 0; j < pending_updates[i].length; j++) {
@@ -242,6 +317,25 @@ export function create_components(initial_layout) {
             }
             return layout;
         });
+        // After applying updates, check if we need to load new components
+        if (had_visibility_changes && current_layout && previous_visible_ids) {
+            raf(async () => {
+                const new_visible_ids = determine_visible_components(current_layout, _components);
+                const newly_visible_ids = new Set();
+                // Find components that are now visible but weren't before
+                for (const id of new_visible_ids) {
+                    if (!previous_visible_ids.has(id)) {
+                        newly_visible_ids.add(id);
+                    }
+                }
+                // Load the newly visible components
+                await load_newly_visible_components(newly_visible_ids);
+                // Trigger a layout update to render the newly loaded components
+                if (newly_visible_ids.size > 0) {
+                    layout_store.update((layout) => layout);
+                }
+            });
+        }
         pending_updates = [];
         update_scheduled = false;
         update_scheduled_store.set(false);
@@ -475,7 +569,141 @@ export function get_component(type, class_id, root, components, example_componen
     };
 }
 /**
- * Preload all components
+ * Check if a tab item should be visible based on selection state
+ * @param component The tab item component
+ * @param component_visible Whether the component is visible
+ * @param parent_tabs_context Tab context from parent
+ * @returns Whether the tab item should be visible
+ */
+function is_tab_item_visible(component, component_visible, parent_tabs_context) {
+    const is_selected_tab = parent_tabs_context?.selected_tab_id === component.id ||
+        parent_tabs_context?.selected_tab_id === component.props.id;
+    return component_visible && is_selected_tab;
+}
+/**
+ * Determine the selected tab ID for a tabs component
+ * @param component The tabs component
+ * @param layout The layout node
+ * @param components All components
+ * @returns The selected tab ID
+ */
+function get_selected_tab_id(component, layout, components) {
+    // Check if selected prop is a string or number
+    const selected = component.props.selected;
+    if (typeof selected === "string" || typeof selected === "number") {
+        return selected;
+    }
+    // If no tab is explicitly selected, find the first visible and interactive tab
+    if (layout.children) {
+        for (const child of layout.children) {
+            const child_component = components.find((c) => c.id === child.id);
+            if (child_component?.type === "tabitem" &&
+                child_component.props.visible !== false &&
+                child_component.props.interactive !== false) {
+                return (child_component.id || child_component.props.id);
+            }
+        }
+    }
+    return undefined;
+}
+/**
+ * Process children components for visibility
+ * @param layout The layout node
+ * @param components All components
+ * @param parent_tabs_context Tab context
+ * @returns Set of visible child component IDs
+ */
+function process_children_visibility(layout, components, parent_tabs_context) {
+    const visible_components = new Set();
+    if (layout.children) {
+        for (const child of layout.children) {
+            const child_visible = determine_visible_components(child, components, true, parent_tabs_context);
+            child_visible.forEach((id) => visible_components.add(id));
+        }
+    }
+    return visible_components;
+}
+/**
+ * Determine which components should be visible based on layout structure and visibility rules
+ * @param layout The layout tree
+ * @param components All component metadata
+ * @param parent_visible Whether the parent component is visible
+ * @param parent_tabs_context Information about parent tabs if any
+ * @returns Set of component IDs that should be visible
+ */
+function determine_visible_components(layout, components, parent_visible = true, parent_tabs_context) {
+    const visible_components = new Set();
+    const component = components.find((c) => c.id === layout.id);
+    if (!component) {
+        return visible_components;
+    }
+    // Check if the component itself is visible
+    const component_visible = parent_visible &&
+        (typeof component.props.visible === "boolean"
+            ? component.props.visible
+            : true);
+    // Handle tab_item special case
+    if (component.type === "tabitem") {
+        if (is_tab_item_visible(component, component_visible, parent_tabs_context)) {
+            visible_components.add(component.id);
+            // Process children if this tab item is visible
+            const child_visible = process_children_visibility(layout, components, parent_tabs_context);
+            child_visible.forEach((id) => visible_components.add(id));
+        }
+        // If tab item is not visible, none of its children should be loaded
+        return visible_components;
+    }
+    // Handle tabs component
+    if (component.type === "tabs") {
+        if (component_visible) {
+            visible_components.add(component.id);
+            // Determine which tab should be selected
+            const selected_tab_id = get_selected_tab_id(component, layout, components);
+            // Process children with tabs context
+            const child_visible = process_children_visibility(layout, components, {
+                selected_tab_id
+            });
+            child_visible.forEach((id) => visible_components.add(id));
+        }
+        return visible_components;
+    }
+    // For regular components
+    if (component_visible) {
+        visible_components.add(component.id);
+        // Process children if this component is visible
+        const child_visible = process_children_visibility(layout, components, parent_tabs_context);
+        child_visible.forEach((id) => visible_components.add(id));
+    }
+    // If component is not visible, don't process children
+    return visible_components;
+}
+/**
+ * Preload only visible components
+ * @param components A list of component metadata
+ * @param layout The layout tree to determine visibility
+ * @param root The root url of the app
+ * @returns A map of component ids to their constructors
+ */
+export function preload_visible_components(components, layout, root) {
+    let constructor_map = new Map();
+    // Determine which components should be visible
+    const visible_component_ids = determine_visible_components(layout, components);
+    // Only preload visible components
+    components.forEach((c) => {
+        if (visible_component_ids.has(c.id)) {
+            const { component, example_components } = get_component(c.type, c.component_class_id, root, components);
+            constructor_map.set(c.component_class_id || c.type, component);
+            if (example_components) {
+                for (const [name, example_component] of example_components) {
+                    constructor_map.set(name, example_component);
+                }
+            }
+        }
+    });
+    return constructor_map;
+}
+/**
+ * Preload all components (legacy function, kept for backwards compatibility)
  * @param components A list of component metadata
  * @param root The root url of the app
  * @returns A map of component ids to their constructors

package/dist/src/lang/get_lang_names.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lang/get_lang_names.js

@@ -0,0 +1,23 @@
+//@ts-nocheck
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const langs = fs.readdirSync(path.join(__dirname, "..", "lang"));
+
+let lang_names = {};
+for (const lang of langs) {
+	if (lang.endsWith(".json")) {
+		const lang_text = fs.readFileSync(
+			path.join(__dirname, "..", "lang", lang),
+			"utf8"
+		);
+		const lang_data = JSON.parse(lang_text.trim());
+		lang_names[lang.split(".")[0]] = lang_data._name;
+	}
+}
+
+console.log(lang_names);

package/package.json

@@ -1,68 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.18",
-    "@gradio/annotatedimage": "^0.9.23",
-    "@gradio/audio": "^0.17.19",
-    "@gradio/box": "^0.2.20",
-    "@gradio/button": "^0.5.5",
-    "@gradio/atoms": "^0.16.2",
-    "@gradio/chatbot": "^0.26.16",
-    "@gradio/checkbox": "^0.4.24",
-    "@gradio/client": "^1.15.4",
-    "@gradio/checkboxgroup": "^0.6.23",
-    "@gradio/code": "^0.14.9",
-    "@gradio/colorpicker": "^0.4.23",
-    "@gradio/dataset": "^0.4.25",
-    "@gradio/dataframe": "^0.18.0",
-    "@gradio/datetime": "^0.3.16",
-    "@gradio/downloadbutton": "^0.4.5",
+    "@gradio/accordion": "^0.5.19",
+    "@gradio/atoms": "^0.16.3",
+    "@gradio/audio": "^0.17.20",
+    "@gradio/box": "^0.2.21",
+    "@gradio/annotatedimage": "^0.9.24",
+    "@gradio/button": "^0.5.6",
+    "@gradio/chatbot": "^0.26.17",
+    "@gradio/checkbox": "^0.4.25",
+    "@gradio/checkboxgroup": "^0.6.24",
+    "@gradio/client": "^1.15.5",
+    "@gradio/colorpicker": "^0.4.24",
+    "@gradio/code": "^0.14.10",
     "@gradio/column": "^0.2.1",
-    "@gradio/dropdown": "^0.9.23",
-    "@gradio/file": "^0.12.22",
-    "@gradio/fileexplorer": "^0.5.33",
-    "@gradio/fallback": "^0.4.23",
-    "@gradio/form": "^0.2.20",
+    "@gradio/dataframe": "^0.18.1",
+    "@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/file": "^0.12.23",
+    "@gradio/fileexplorer": "^0.5.34",
+    "@gradio/gallery": "^0.15.26",
+    "@gradio/form": "^0.2.21",
     "@gradio/group": "^0.2.0",
-    "@gradio/highlightedtext": "^0.9.6",
-    "@gradio/gallery": "^0.15.25",
-    "@gradio/html": "^0.6.15",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.11",
-    "@gradio/imageeditor": "^0.15.5",
-    "@gradio/imageslider": "^0.2.7",
-    "@gradio/json": "^0.5.25",
-    "@gradio/label": "^0.5.15",
+    "@gradio/highlightedtext": "^0.9.7",
+    "@gradio/html": "^0.6.16",
+    "@gradio/image": "^0.22.12",
+    "@gradio/imageeditor": "^0.16.0",
+    "@gradio/imageslider": "^0.2.8",
+    "@gradio/label": "^0.5.16",
+    "@gradio/json": "^0.5.26",
+    "@gradio/markdown": "^0.13.17",
+    "@gradio/model3d": "^0.14.19",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/model3d": "^0.14.18",
-    "@gradio/markdown": "^0.13.16",
-    "@gradio/multimodaltextbox": "^0.10.11",
-    "@gradio/nativeplot": "^0.7.0",
-    "@gradio/paramviewer": "^0.7.11",
-    "@gradio/number": "^0.6.0",
-    "@gradio/plot": "^0.9.18",
-    "@gradio/radio": "^0.7.6",
+    "@gradio/multimodaltextbox": "^0.10.12",
+    "@gradio/nativeplot": "^0.7.1",
+    "@gradio/number": "^0.6.1",
+    "@gradio/paramviewer": "^0.7.12",
+    "@gradio/plot": "^0.9.19",
     "@gradio/row": "^0.2.1",
-    "@gradio/sidebar": "^0.1.16",
-    "@gradio/simpledropdown": "^0.3.23",
-    "@gradio/simpletextbox": "^0.3.24",
+    "@gradio/radio": "^0.7.7",
+    "@gradio/sidebar": "^0.1.17",
+    "@gradio/simpleimage": "^0.8.34",
+    "@gradio/simpledropdown": "^0.3.24",
+    "@gradio/simpletextbox": "^0.3.25",
+    "@gradio/sketchbox": "^0.6.12",
+    "@gradio/slider": "^0.6.13",
+    "@gradio/tabitem": "^0.5.0",
     "@gradio/state": "^0.1.2",
-    "@gradio/simpleimage": "^0.8.33",
-    "@gradio/slider": "^0.6.12",
-    "@gradio/statustracker": "^0.10.13",
+    "@gradio/textbox": "^0.10.16",
     "@gradio/tabs": "^0.4.5",
-    "@gradio/tabitem": "^0.4.6",
-    "@gradio/sketchbox": "^0.6.11",
     "@gradio/theme": "^0.4.0",
-    "@gradio/textbox": "^0.10.15",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.9",
-    "@gradio/uploadbutton": "^0.9.5",
+    "@gradio/upload": "^0.16.10",
+    "@gradio/uploadbutton": "^0.9.6",
+    "@gradio/statustracker": "^0.10.14",
     "@gradio/utils": "^0.10.2",
-    "@gradio/wasm": "^0.18.1",
-    "@gradio/video": "^0.14.19"
+    "@gradio/video": "^0.14.20",
+    "@gradio/wasm": "^0.18.1"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -9,7 +9,6 @@
 	import type { ComponentMeta, Dependency, LayoutNode } from "./types";
 	import type { UpdateTransaction } from "./init";
 	import { setupi18n } from "./i18n";
-	import { ApiDocs, ApiRecorder, Settings } from "./api_docs/";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";
@@ -17,6 +16,11 @@
 	import MountComponents from "./MountComponents.svelte";
 	import { prefix_css } from "./css";
 
+	import type ApiDocs from "./api_docs/ApiDocs.svelte";
+	import type ApiRecorder from "./api_docs/ApiRecorder.svelte";
+	import type Settings from "./api_docs/Settings.svelte";
+	import type { ComponentType } from "svelte";
+
 	import logo from "./images/logo.svg";
 	import api_logo from "./api_docs/img/api-logo.svg";
 	import settings_logo from "./api_docs/img/settings-logo.svg";
@@ -107,8 +111,39 @@
 	let allow_zoom = true;
 	let allow_video_trim = true;
 
-	function set_api_docs_visible(visible: boolean): void {
+	// Lazy component loading state
+	let ApiDocs: ComponentType<ApiDocs> | null = null;
+	let ApiRecorder: ComponentType<ApiRecorder> | null = null;
+	let Settings: ComponentType<Settings> | null = null;
+
+	async function loadApiDocs(): Promise<void> {
+		if (!ApiDocs || !ApiRecorder) {
+			const api_docs_module = await import("./api_docs/ApiDocs.svelte");
+			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
+			if (!ApiDocs) ApiDocs = api_docs_module.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
+		}
+	}
+
+	async function loadApiRecorder(): Promise<void> {
+		if (!ApiRecorder) {
+			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
+			ApiRecorder = api_recorder_module.default;
+		}
+	}
+
+	async function loadSettings(): Promise<void> {
+		if (!Settings) {
+			const settings_module = await import("./api_docs/Settings.svelte");
+			Settings = settings_module.default;
+		}
+	}
+
+	async function set_api_docs_visible(visible: boolean): Promise<void> {
 		api_recorder_visible = false;
+		if (visible) {
+			await loadApiDocs();
+		}
 		api_docs_visible = visible;
 		let params = new URLSearchParams(window.location.search);
 		if (visible) {
@@ -119,7 +154,10 @@
 		history.replaceState(null, "", "?" + params.toString());
 	}
 
-	function set_settings_visible(visible: boolean): void {
+	async function set_settings_visible(visible: boolean): Promise<void> {
+		if (visible) {
+			await loadSettings();
+		}
 		let params = new URLSearchParams(window.location.search);
 		if (visible) {
 			params.set("view", "settings");
@@ -831,6 +869,17 @@
 				$is_screen_recording = isRecording;
 			}
 		);
+
+		// Load components if they should be visible on initial page load
+		if (api_docs_visible) {
+			loadApiDocs();
+		}
+		if (api_recorder_visible) {
+			loadApiRecorder();
+		}
+		if (settings_visible) {
+			loadSettings();
+		}
 	});
 
 	function screen_recording(): void {
@@ -840,11 +889,6 @@
 			screen_recorder.startRecording();
 		}
 	}
-
-	let i18n_ready = false;
-	setupi18n(app.config?.i18n_translations ?? undefined).then(() => {
-		i18n_ready = true;
-	});
 </script>
 
 <svelte:head>
@@ -858,7 +902,7 @@
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
 	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
-		{#if $_layout && app.config && i18n_ready}
+		{#if $_layout && app.config}
 			<MountComponents
 				rootNode={$_layout}
 				{root}
@@ -880,6 +924,10 @@
 					on:click={() => {
 						set_api_docs_visible(!api_docs_visible);
 					}}
+					on:mouseenter={() => {
+						loadApiDocs();
+						loadApiRecorder();
+					}}
 					class="show-api"
 				>
 					{#if app.config?.mcp_server}
@@ -916,6 +964,9 @@
 				on:click={() => {
 					set_settings_visible(!settings_visible);
 				}}
+				on:mouseenter={() => {
+					loadSettings();
+				}}
 				class="settings"
 			>
 				{$_("common.settings")}
@@ -925,7 +976,7 @@
 	{/if}
 </div>
 
-{#if api_recorder_visible}
+{#if api_recorder_visible && ApiRecorder}
 	<!-- TODO: fix -->
 	<!-- svelte-ignore a11y-click-events-have-key-events-->
 	<!-- svelte-ignore a11y-no-static-element-interactions-->
@@ -936,11 +987,11 @@
 			api_recorder_visible = false;
 		}}
 	>
-		<ApiRecorder {api_calls} {dependencies} />
+		<svelte:component this={ApiRecorder} {api_calls} {dependencies} />
 	</div>
 {/if}
 
-{#if api_docs_visible && $_layout}
+{#if api_docs_visible && $_layout && ApiDocs}
 	<div class="api-docs">
 		<!-- TODO: fix -->
 		<!-- svelte-ignore a11y-click-events-have-key-events-->
@@ -952,12 +1003,14 @@
 			}}
 		/>
 		<div class="api-docs-wrap">
-			<ApiDocs
+			<svelte:component
+				this={ApiDocs}
 				root_node={$_layout}
 				on:close={(event) => {
 					set_api_docs_visible(false);
 					api_calls = [];
-					api_recorder_visible = event.detail?.api_recorder_visible;
+					api_recorder_visible = api_recorder_visible =
+						event.detail?.api_recorder_visible;
 				}}
 				{dependencies}
 				{root}
@@ -970,7 +1023,7 @@
 	</div>
 {/if}
 
-{#if settings_visible && $_layout && app.config}
+{#if settings_visible && $_layout && app.config && Settings}
 	<div class="api-docs">
 		<!-- TODO: fix -->
 		<!-- svelte-ignore a11y-click-events-have-key-events-->
@@ -982,13 +1035,14 @@
 			}}
 		/>
 		<div class="api-docs-wrap">
-			<Settings
+			<svelte:component
+				this={Settings}
 				bind:allow_zoom
 				bind:allow_video_trim
-				on:close={(event) => {
+				on:close={() => {
 					set_settings_visible(false);
 				}}
-				on:start_recording={(event) => {
+				on:start_recording={() => {
 					screen_recording();
 				}}
 				pwa_enabled={app.config.pwa}