@gradio/core 1.0.1 → 1.1.0

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,
@@ -155,6 +140,9 @@
 			// update_status(id, "complete", data);
 		} else if (event == "close_stream") {
 			dep_manager.close_stream(id);
+		} else if (event === "custom_button_click") {
+			const button_id = (data as { id: number }).id;
+			dispatch_to_target(button_id, "click", null);
 		} else {
 			// Tabs are a bit weird. The Tabs component dispatches 'select' events
 			// but the target id corresponds to the child Tab component that was selected.
@@ -173,6 +161,41 @@
 		}
 	}
 
+	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
+	);
+
+	function dispatch_to_target(
+		target_id: number,
+		event: string,
+		data: unknown
+	): void {
+		dep_manager.dispatch({
+			type: "event",
+			event_name: event,
+			target_id: target_id,
+			event_data: data
+		});
+	}
+
+	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 +345,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 +356,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;
@@ -425,69 +452,75 @@
 		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
 	>
 		<MountComponents node={app_tree.root} />
+	</div>
 
-		{#if footer_links.length > 0}
-			<footer bind:clientHeight={footer_height}>
-				{#if footer_links.includes("api")}
-					<button
-						on:click={() => {
-							set_api_docs_visible(!api_docs_visible);
-						}}
-						on:mouseenter={() => {
-							loadApiDocs();
-							loadApiRecorder();
-						}}
-						class="show-api"
-					>
-						{#if app.config?.mcp_server}
-							{$_("errors.use_via_api_or_mcp")}
-						{:else}
-							{$_("errors.use_via_api")}
-						{/if}
-						<img src={api_logo} alt={$_("common.logo")} />
-					</button>
-				{/if}
-				{#if footer_links.includes("gradio")}
-					<div class="divider show-api-divider">·</div>
-					<a
-						href="https://gradio.app"
-						class="built-with"
-						target="_blank"
-						rel="noreferrer"
-					>
-						{$_("common.built_with_gradio")}
-						<img src={logo} alt={$_("common.logo")} />
-					</a>
-				{/if}
+	{#if footer_links.length > 0}
+		<footer bind:clientHeight={footer_height}>
+			{#if footer_links.includes("api")}
 				<button
-					class:hidden={!$is_screen_recording}
 					on:click={() => {
-						screen_recording();
+						set_api_docs_visible(!api_docs_visible);
 					}}
-					class="record"
+					on:mouseenter={() => {
+						loadApiDocs();
+						loadApiRecorder();
+					}}
+					class="show-api"
 				>
-					{$_("common.stop_recording")}
-					<img src={record_stop} alt={$_("common.stop_recording")} />
+					{#if app.config?.mcp_server}
+						{$reactive_formatter("errors.use_via_api_or_mcp")}
+					{:else}
+						{$reactive_formatter("errors.use_via_api")}
+					{/if}
+					<img src={api_logo} alt={$reactive_formatter("common.logo")} />
 				</button>
-				<div class="divider">·</div>
-				{#if footer_links.includes("settings")}
-					<div class="divider" class:hidden={!$is_screen_recording}>·</div>
-					<button
-						on:click={() => {
-							set_settings_visible(!settings_visible);
-						}}
-						on:mouseenter={() => {
-							loadSettings();
-						}}
-						class="settings"
-					>
-						{$_("common.settings")}
-						<img src={settings_logo} alt={$_("common.settings")} />
-					</button>
-				{/if}
-			</footer>
-		{/if}
-	</div>
+			{/if}
+			{#if footer_links.includes("gradio")}
+				<div class="divider show-api-divider">·</div>
+				<a
+					href="https://gradio.app"
+					class="built-with"
+					target="_blank"
+					rel="noreferrer"
+				>
+					{$reactive_formatter("common.built_with_gradio")}
+					<img src={logo} alt={$reactive_formatter("common.logo")} />
+				</a>
+			{/if}
+			<button
+				class:hidden={!$is_screen_recording}
+				on:click={() => {
+					screen_recording();
+				}}
+				class="record"
+			>
+				{$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")}
+				<div class="divider" class:hidden={!$is_screen_recording}>·</div>
+				<button
+					on:click={() => {
+						set_settings_visible(!settings_visible);
+					}}
+					on:mouseenter={() => {
+						loadSettings();
+					}}
+					class="settings"
+				>
+					{$reactive_formatter("common.settings")}
+					<img
+						src={settings_logo}
+						alt={$reactive_formatter("common.settings")}
+					/>
+				</button>
+			{/if}
+		</footer>
+	{/if}
 	{#if api_recorder_visible && ApiRecorder}
 		<!-- TODO: fix -->
 		<!-- svelte-ignore a11y-click-events-have-key-events-->
@@ -552,15 +585,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/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/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/src/dependency.ts

@@ -113,7 +113,14 @@ export class Dependency {
 		if (this.functions.backend) {
 			return {
 				type: "submit",
-				data: client.submit(this.id, _data_payload, event_data, target_id)
+				data: client.submit(
+					this.id,
+					_data_payload,
+					event_data,
+					target_id,
+					undefined,
+					{ "x-gradio-user": "app" }
+				)
 			};
 		} else if (this.functions.frontend) {
 			return { type: "data", data: _data_payload };
@@ -320,7 +327,6 @@ export class DependencyManager {
 				`${event_meta.event_name}-${event_meta.target_id}`
 			);
 		}
-
 		for (let i = 0; i < (deps?.length || 0); i++) {
 			const dep = deps ? deps[i] : undefined;
 			if (dep) {
@@ -791,6 +797,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);
 			}
 		}