@gradio/core 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/core
 
+## 1.0.2
+
+### Fixes
+
+- [#12515](https://github.com/gradio-app/gradio/pull/12515) [`0892c29`](https://github.com/gradio-app/gradio/commit/0892c297b35742ed5cabf64d0846fd36ae02ecea) - Fix plot Rendering + visibility bug.  Thanks @freddyaboulton!
+- [#12493](https://github.com/gradio-app/gradio/pull/12493) [`8a6cff6`](https://github.com/gradio-app/gradio/commit/8a6cff6738d09a6e708fc6351d806967fa82ca91) - Fix bug where cancelling an events shows an error in the UI.  Thanks @freddyaboulton!
+- [#12518](https://github.com/gradio-app/gradio/pull/12518) [`e8efab2`](https://github.com/gradio-app/gradio/commit/e8efab2cb19860146cec7946e77b34a599ad6258) - Fix Settings.  Thanks @freddyaboulton!
+- [#12491](https://github.com/gradio-app/gradio/pull/12491) [`4f6327b`](https://github.com/gradio-app/gradio/commit/4f6327be6815fc8d574b60272b02915c75359ace) - Load visible components in 6.0.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/button@0.6.0
+- @gradio/dropdown@0.10.7
+- @gradio/textbox@0.12.1
+- @gradio/tabs@0.5.3
+- @gradio/tabitem@0.6.3
+- @gradio/audio@0.21.0
+- @gradio/video@0.18.0
+- @gradio/checkbox@0.5.1
+
 ## 1.0.1
 
 ### Fixes

package/dist/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>

package/dist/src/api_docs/Settings.svelte

@@ -7,17 +7,18 @@
 	import { language_choices, changeLocale } from "../i18n";
 	import { locale, _ } from "svelte-i18n";
 	import record from "./img/record.svg";
-	import { createEventDispatcher } from "svelte";
 
 	let {
 		root,
 		space_id,
 		pwa_enabled,
 		allow_zoom = $bindable(),
-		allow_video_trim = $bindable()
+		allow_video_trim = $bindable(),
+		onclose,
+		start_recording,
+		i18n
 	} = $props();
 
-	const dispatch = createEventDispatcher();
 	if (root === "") {
 		root = location.protocol + "//" + location.host + location.pathname;
 	}
@@ -34,6 +35,7 @@
 			url.searchParams.set("__theme", theme);
 			current_theme = theme;
 		}
+		url.searchParams.delete("view");
 		window.location.href = url.toString();
 	}
 
@@ -59,8 +61,8 @@
 		}
 	});
 
-	function handleLanguageChange(e: CustomEvent): void {
-		const new_locale = e.detail;
+	function handleLanguageChange(value: string): void {
+		const new_locale = value;
 		changeLocale(new_locale);
 	}
 
@@ -74,54 +76,51 @@
 </script>
 
 <div class="banner-wrap">
-	<SettingsBanner on:close {root} />
+	<SettingsBanner onclose={() => onclose()} {root} />
 </div>
 {#if space_id === null}
 	<!-- on Spaces, the theme is set in HF settings -->
 	<div class="banner-wrap">
-		<h2>{$_("common.display_theme")}</h2>
-		<p class="padded theme-buttons">
+		<h2>{i18n("common.display_theme")}</h2>
+		<ul class="padded theme-buttons">
 			<li
 				class="theme-button {current_theme === 'light'
 					? 'current-theme'
 					: 'inactive-theme'}"
-				on:click={() => setTheme("light")}
 			>
-				<button>☀︎ &nbsp;Light</button>
+				<button on:click={() => setTheme("light")}>☀︎ &nbsp;Light</button>
 			</li>
 			<li
 				class="theme-button {current_theme === 'dark'
 					? 'current-theme'
 					: 'inactive-theme'}"
-				on:click={() => setTheme("dark")}
 			>
-				<button>⏾ &nbsp; Dark</button>
+				<button on:click={() => setTheme("dark")}>⏾ &nbsp; Dark</button>
 			</li>
 			<li
 				class="theme-button {current_theme === 'system'
 					? 'current-theme'
 					: 'inactive-theme'}"
-				on:click={() => setTheme("system")}
 			>
-				<button>🖥︎ &nbsp;System</button>
+				<button on:click={() => setTheme("system")}>🖥︎ &nbsp;System</button>
 			</li>
-		</p>
+		</ul>
 	</div>
 {/if}
 <div class="banner-wrap">
-	<h2>{$_("common.language")}</h2>
+	<h2>{i18n("common.language")}</h2>
 	<p class="padded">
 		<Dropdown
 			label="Language"
 			choices={language_choices}
 			show_label={false}
-			value={current_locale}
-			on:change={handleLanguageChange}
+			bind:value={current_locale}
+			on_change={() => handleLanguageChange(current_locale)}
 		/>
 	</p>
 </div>
 <div class="banner-wrap">
-	<h2>{$_("common.pwa")}</h2>
+	<h2>{i18n("common.pwa")}</h2>
 	<p class="padded">
 		{#if pwa_enabled}
 			You can install this app as a Progressive Web App on your device. Visit <a
@@ -135,7 +134,7 @@
 	</p>
 </div>
 <div class="banner-wrap">
-	<h2>{$_("common.screen_studio")} <span class="beta-tag">beta</span></h2>
+	<h2>{i18n("common.screen_studio")} <span class="beta-tag">beta</span></h2>
 	<p class="padded">
 		Screen Studio allows you to record your screen and generates a video of your
 		app with automatically adding zoom in and zoom out effects as well as
@@ -164,8 +163,8 @@
 	<button
 		class="record-button"
 		on:click={() => {
-			dispatch("close");
-			dispatch("start_recording");
+			onclose?.();
+			start_recording?.();
 		}}
 	>
 		<img src={record} alt="Start Recording" />

package/dist/src/api_docs/Settings.svelte.d.ts

@@ -1,27 +1,12 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Settings: $$__sveltets_2_IsomorphicComponent<{
+declare const Settings: import("svelte").Component<{
     root: any;
     space_id: any;
     pwa_enabled: any;
     allow_zoom?: any;
     allow_video_trim?: any;
-}, {
-    close: CustomEvent<any>;
-    start_recording: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "allow_zoom" | "allow_video_trim">;
-type Settings = InstanceType<typeof Settings>;
+    onclose: any;
+    start_recording: any;
+    i18n: any;
+}, {}, "allow_zoom" | "allow_video_trim">;
+type Settings = ReturnType<typeof Settings>;
 export default Settings;

package/dist/src/api_docs/SettingsBanner.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { _ } from "svelte-i18n";
 	import settings_logo from "./img/settings-logo.svg";
 	import Clear from "./img/clear.svelte";
 	import { setupi18n } from "../i18n";
 
-	export let root: string;
+	let { root, onclose }: { root: string; onclose?: () => void } = $props();
 
-	const dispatch = createEventDispatcher();
 	setupi18n();
 </script>
 
@@ -21,7 +19,7 @@
 	</div>
 </h2>
 
-<button on:click={() => dispatch("close")}>
+<button on:click={() => onclose?.()}>
 	<Clear />
 </button>
 

package/dist/src/api_docs/SettingsBanner.svelte.d.ts

@@ -1,22 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SettingsBanner: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     root: string;
-}, {
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SettingsBanner = InstanceType<typeof SettingsBanner>;
+    onclose?: () => void;
+};
+declare const SettingsBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsBanner = ReturnType<typeof SettingsBanner>;
 export default SettingsBanner;

package/dist/src/dependency.js

@@ -558,6 +558,14 @@ export class DependencyManager {
             const submission = this.submissions.get(id);
             if (submission) {
                 await submission.cancel();
+                this.loading_stati.update({
+                    status: "complete",
+                    fn_index: id,
+                    eta: 0,
+                    queue: false,
+                    stream_state: null
+                });
+                this.update_loading_stati_state();
                 this.submissions.delete(id);
             }
         }

package/dist/src/init.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentMeta, ProcessedComponentMeta, LayoutNode, Dependency, AppConfig, ServerFunctions } from "./types";
-import type { SharedProps } from "@gradio/utils";
+import { type SharedProps } from "@gradio/utils";
 import { Client } from "@gradio/client";
 type client_return = Awaited<ReturnType<typeof Client.connect>>;
 type set_data_type = (data: Record<string, unknown>) => void;
@@ -13,6 +13,7 @@ type Tab = {
     elem_id: string | undefined;
     scale: number | null;
     order?: number;
+    component_id: number;
 };
 export declare class AppTree {
     #private;
@@ -21,13 +22,14 @@ export declare class AppTree {
     client: client_return;
     /** the root node of the processed layout tree */
     root: ProcessedComponentMeta | undefined;
+    root_untracked: ProcessedComponentMeta;
     component_ids: number[];
     initial_tabs: Record<number, Tab[]>;
     components_to_register: Set<number>;
     ready: Promise<void>;
     ready_resolve: () => void;
     resolved: boolean;
-    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">, app: client_return, reactive_formatter: (str: string) => string);
+    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">, app: client_return, reactive_formatter: (str: string) => string, event_dispatcher: (id: number, event: string, data: unknown) => void);
     reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">): void;
     /**
      * Registers a component with its ID and data callbacks
@@ -59,6 +61,7 @@ export declare class AppTree {
      */
     create_node(opts: LayoutNode, component_map: Map<number, ComponentMeta>, root?: boolean, reactive_formatter?: (str: string) => string): ProcessedComponentMeta;
     rerender(components: ComponentMeta[], layout: LayoutNode): void;
+    update_visibility(node: ProcessedComponentMeta, new_state: any): Promise<void>;
     update_state(id: number, new_state: Partial<SharedProps> & Record<string, unknown>, check_visibility?: boolean): Promise<void>;
     /**
      * Gets the current state of a component by its ID
@@ -66,6 +69,7 @@ export declare class AppTree {
      * @returns the current state of the component, or null if not found
      */
     get_state(id: number): Promise<Record<string, unknown> | null>;
+    render_previously_invisible_children(id: number): Promise<void>;
 }
 /**
  * Process the server function names and return a dictionary of functions