@gradio/core 0.28.0 → 0.29.1

package/src/init.ts

@@ -89,7 +89,6 @@ export function create_components(
 		value_change_cb = cb;
 	}
 
-	// Store current layout and root for dynamic visibility recalculation
 	let current_layout: LayoutNode;
 	let current_root: string;
 
@@ -123,15 +122,12 @@ export function create_components(
 			fill_height: boolean;
 		};
 	}): Promise<void> {
-		// make sure the state is settled before proceeding
 		flush();
 		app = _app;
 
 		if (instance_map) {
-			// re-render in reload mode
 			components.forEach((c) => {
 				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
 					);
@@ -150,14 +146,17 @@ export function create_components(
 		_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",
-			props: { interactive: false, scale: options.fill_height ? 1 : null },
+			props: {
+				interactive: false,
+				scale: options.fill_height ? 1 : null,
+				visible: true
+			},
 			has_modes: false,
 			instance: null as unknown as ComponentMeta["instance"],
 			component: null as unknown as ComponentMeta["component"],
@@ -410,7 +409,10 @@ export function create_components(
 				label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
 				id: child.props.id,
 				visible:
-					typeof child.props.visible === "boolean" ? child.props.visible : true,
+					typeof child.props.visible === "boolean" ||
+					child.props.visible === "hidden"
+						? child.props.visible
+						: true,
 				interactive: child.props.interactive,
 				order: child.props.order
 			}));
@@ -446,7 +448,6 @@ export function create_components(
 		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(
@@ -464,7 +465,6 @@ export function create_components(
 					}
 				}
 
-				// Load the component if it doesn't exist yet
 				if (!component.component) {
 					component.component = (await loadable_component)?.default;
 				}
@@ -487,10 +487,8 @@ export function create_components(
 				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;
@@ -505,7 +503,6 @@ export function create_components(
 			? [..._component_map.values()]
 			: _components;
 
-		// Capture current visibility state before applying updates
 		if (had_visibility_changes && current_layout) {
 			previous_visible_ids = determine_visible_components(
 				current_layout,
@@ -541,10 +538,10 @@ export function create_components(
 					}
 				}
 			}
+
 			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(
@@ -553,17 +550,14 @@ export function create_components(
 				);
 				const newly_visible_ids = new Set<number>();
 
-				// 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, all_components);
 
-				// Trigger a layout update to render the newly loaded components
 				if (newly_visible_ids.size > 0) {
 					layout_store.update((layout) => layout);
 				}
@@ -906,13 +900,11 @@ function get_selected_tab_id(
 	layout: LayoutNode,
 	components: ComponentMeta[]
 ): string | number | undefined {
-	// 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);
@@ -975,27 +967,42 @@ function determine_visible_components(
 	parent_tabs_context?: { selected_tab_id?: string | number }
 ): Set<number> {
 	const visible_components: Set<number> = 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);
+		component.props.visible !== false &&
+		component.props.visible !== "hidden" &&
+		parent_visible;
+
+	const should_load = component.props.visible === "hidden" || component_visible;
+
+	if (!should_load) {
+		return visible_components;
+	}
+
+	if (component.type === "tabs") {
+		const selected_tab_id = get_selected_tab_id(component, layout, components);
+		const tabs_context = { selected_tab_id };
 
-	// Handle tab_item special case
-	if (component.type === "tabitem") {
+		visible_components.add(layout.id);
+
+		const child_visible = process_children_visibility(
+			layout,
+			components,
+			tabs_context
+		);
+		child_visible.forEach((id) => visible_components.add(id));
+	} else if (component.type === "tabitem") {
 		if (
 			is_tab_item_visible(component, component_visible, parent_tabs_context)
 		) {
-			visible_components.add(component.id);
+			visible_components.add(layout.id);
 
-			// Process children if this tab item is visible
 			const child_visible = process_children_visibility(
 				layout,
 				components,
@@ -1003,36 +1010,9 @@ function determine_visible_components(
 			);
 			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);
+	} else {
+		visible_components.add(layout.id);
 
-		// Process children if this component is visible
 		const child_visible = process_children_visibility(
 			layout,
 			components,
@@ -1040,7 +1020,6 @@ function determine_visible_components(
 		);
 		child_visible.forEach((id) => visible_components.add(id));
 	}
-	// If component is not visible, don't process children
 
 	return visible_components;
 }
@@ -1059,13 +1038,11 @@ export function preload_visible_components(
 ): Map<ComponentMeta["type"], LoadingComponent> {
 	let constructor_map: Map<ComponentMeta["type"], LoadingComponent> = 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(
@@ -1121,12 +1098,21 @@ export function preload_all_components(
 }
 
 function is_visible(component: ComponentMeta): boolean {
+	if (component.props.visible === "hidden") {
+		return true;
+	}
 	if (
 		typeof component.props.visible === "boolean" &&
 		component.props.visible === false
 	) {
 		return false;
 	} else if (component.parent) {
+		if (component.parent.type === "tabitem") {
+			return is_tab_item_visible(
+				component.parent,
+				is_visible(component.parent)
+			);
+		}
 		return is_visible(component.parent);
 	}
 	return true;

package/src/lang/ar.json

@@ -2,7 +2,7 @@
 	"_name": "العربية",
 	"3D_model": {
 		"3d_model": "نموذج ثلاثي الأبعاد",
-		"drop_to_upload": "اسقط ملف نموذج 3D (.obj، .glb، .stl، .gltf، .splat، أو .ply) هنا للتحميل"
+		"drop_to_upload": "اسقط ملف نموذج ثلاثي الأبعاد 3D (.obj، .glb، .stl، .gltf، .splat، أو .ply) هنا للتحميل"
 	},
 	"annotated_image": {
 		"annotated_image": "صورة مشروحة"
@@ -23,10 +23,10 @@
 		"drop_to_upload": "اسقط ملف صوت هنا للتحميل"
 	},
 	"blocks": {
-		"connection_can_break": "على الهاتف المحمول، يمكن أن ينقطع الاتصال إذا تم تغيير التبويب أو دخل الجهاز في وضع السكون، مما يؤدي إلى فقدان موقعك في قائمة الانتظار.",
-		"long_requests_queue": "هناك قائمة انتظار طويلة من الطلبات المعلقة. قم بتكرار هذا الفضاء للتخطي.",
-		"lost_connection": "فقد الاتصال بسبب مغادرة الصفحة. إعادة الانضمام إلى قائمة الانتظار...",
-		"waiting_for_inputs": "انتظار انتهاء تحميل الملف(ات)، يرجى إعادة المحاولة."
+		"connection_can_break": "على الهاتف المحمول، يمكن أن ينقطع الاتصال إذا تم تغيير التبويب لهذه الصفحةة أو دخل الجهاز في وضع السكون، مما يؤدي إلى فقدان موقعك في قائمة الانتظار.",
+		"long_requests_queue": "هناك قائمة انتظار طويلة من الطلبات المعلقة. قم بنسخ هذه المساحة للتخطي.",
+		"lost_connection": "تم فقدان الاتصال بسبب مغادرة الصفحة. جارٍ إعادة الانضمام إلى قائمة الانتظار...",
+		"waiting_for_inputs": "إنتظر انتهاء رفع الملف(ات)، يرجى إعادة المحاولة."
 	},
 	"checkbox": {
 		"checkbox": "خانة اختيار",
@@ -40,9 +40,9 @@
 	},
 	"common": {
 		"built_with": "بُني باستخدام",
-		"built_with_gradio": "تم الإنشاء بإستخدام Gradio",
+		"built_with_gradio": "بني بإستخدام Gradio",
 		"clear": "أمسح",
-		"download": "تحميل",
+		"download": "تنزيل",
 		"edit": "تعديل",
 		"empty": "فارغ",
 		"error": "خطأ",
@@ -58,7 +58,12 @@
 		"no_devices": "لم يتم العثور على أجهزة",
 		"language": "اللغة",
 		"display_theme": "مظهر العرض",
-		"pwa": "تطبيق ويب تقدمي"
+		"pwa": "تطبيق ويب تقدمي",
+		"record": "تسجيل",
+		"stop_recording": "إيقاف التسجيل",
+		"screen_studio": "شاشة الأستوديو",
+		"share_gradio_tab": "مشاركة تبويبة صفحة Gradio",
+		"run": "تشغيل"
 	},
 	"dataframe": {
 		"incorrect_format": "تنسيق غير صحيح، يتم دعم ملفات CSV و TSV فقط",
@@ -73,8 +78,10 @@
 		"sort_column": "فرز العمود",
 		"sort_ascending": "فرز تصاعدي",
 		"sort_descending": "فرز تنازلي",
-		"drop_to_upload": "اسقط ملفات CSV أو TSV هنا لاستيراد البيانات إلى الإطار الجدولية",
-		"clear_sort": "مسح الترتيب"
+		"drop_to_upload": "اسقط ملفات CSV أو TSV هنا لاستيراد البيانات إلى الإطر الجدولية",
+		"clear_sort": "مسح الترتيب",
+		"filter": "مرشح",
+		"clear_filter": "مسح المرشحات"
 	},
 	"dropdown": {
 		"dropdown": "قائمة منسدلة"
@@ -82,18 +89,19 @@
 	"errors": {
 		"build_error": "هناك خطأ في البناء",
 		"config_error": "هناك خطأ في التكوين",
-		"contact_page_author": "يرجى الاتصال بمؤلف الصفحة",
+		"contact_page_author": "يرجى التواصل مع مبرمج الصفحة",
 		"no_app_file": "لا يوجد ملف تطبيق",
-		"runtime_error": "هناك خطأ في وقت التشغيل",
+		"runtime_error": "هناك خطأ أثناء التشغيل",
 		"space_not_working": "المساحة لا تعمل لأن {0}",
 		"space_paused": "المساحة متوقفة مؤقتًا",
-		"use_via_api": "استخدم عبر API"
+		"use_via_api": "إستخدام عبر API",
+		"use_via_api_or_mcp": "إستخدام عبر واجهة برمجة التطبيقات API أو خادم MCP"
 	},
 	"file": {
 		"uploading": "جاري الرفع..."
 	},
 	"highlighted_text": {
-		"highlighted_text": "نص مميز"
+		"highlighted_text": "نص محدد"
 	},
 	"image": {
 		"allow_webcam_access": "يرجى السماح بالوصول إلى كاميرا الويب للتسجيل.",

package/src/types.ts

@@ -8,6 +8,7 @@ interface SharedProps {
 	components?: string[];
 	server_fns?: string[];
 	interactive: boolean;
+	visible: boolean | "hidden";
 	[key: string]: unknown;
 }
 

package/dist/src/stories/I18nMultiLanguageTest.stories.d.ts

@@ -1,11 +0,0 @@
-import type { StoryObj } from "@storybook/svelte";
-import I18nMultiLanguageTestComponent from "./I18nMultiLanguageTestComponent.svelte";
-declare const meta: {
-    component: typeof I18nMultiLanguageTestComponent;
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;