@gradio/core 1.0.0 → 1.0.2

package/src/Blocks.svelte

@@ -40,7 +40,6 @@
 	import * as screen_recorder from "./screen_recorder";
 
 	import { DependencyManager } from "./dependency";
-
 	let {
 		root,
 		components,
@@ -105,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(
@@ -138,11 +116,17 @@
 			// trigger_share(title, description);
 			// TODO: lets combine all of the into a log type with levels
 		} else if (event === "error") {
-			new_message("Error", data, -1, event, 10, true);
+			new_message("Error", data as string, -1, event, 10, true);
 		} else if (event === "warning") {
-			new_message("Warning", data, -1, event, 10, true);
+			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
-			new_message("Info", data, -1, event, 10, true);
+			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,
@@ -163,7 +147,7 @@
 			// so we need to pull out the correct id here.
 			if (event === "select" && id in app_tree.initial_tabs) {
 				// this is the id of the selected tab
-				id = data.id;
+				id = (data as { id: number }).id;
 			}
 			dep_manager.dispatch({
 				type: "event",
@@ -174,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
@@ -239,8 +245,8 @@
 		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;
+			if (!ApiDocs) ApiDocs = api_docs_module?.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module?.default;
 		}
 	}
 
@@ -323,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 =
@@ -332,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;
@@ -441,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")}
@@ -456,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
@@ -467,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")}
@@ -482,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>
@@ -553,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/src/Login.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Form from "@gradio/form";
+	import { BaseForm } from "@gradio/form";
 	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let space_id: string | null;
+	export let i18n: (s: string) => string;
 
 	let username = "";
 	let password = "";
@@ -34,23 +34,23 @@
 </script>
 
 <div class="wrap" class:min-h-screen={app_mode}>
-	<Column variant="panel" min_width={480}>
-		<h2>{$_("login.login")}</h2>
+	<BaseColumn variant="panel" min_width={480}>
+		<h2>{i18n("login.login")}</h2>
 		{#if auth_message}
 			<p class="auth">{@html auth_message}</p>
 		{/if}
 		{#if space_id}
 			<p class="auth">
-				{$_("login.enable_cookies")}
+				{i18n("login.enable_cookies")}
 			</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="creds">{$_("login.incorrect_credentials")}</p>
+			<p class="creds">{i18n("login.incorrect_credentials")}</p>
 		{/if}
-		<Form>
+		<BaseForm>
 			<Block>
 				<Textbox
-					label={$_("login.username")}
+					label={i18n("login.username")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -61,7 +61,7 @@
 
 			<Block>
 				<Textbox
-					label={$_("login.password")}
+					label={i18n("login.password")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -70,12 +70,12 @@
 					bind:value={password}
 				/>
 			</Block>
-		</Form>
+		</BaseForm>
 
 		<BaseButton size="lg" variant="primary" on:click={submit}
-			>{$_("login.login")}</BaseButton
+			>{i18n("login.login")}</BaseButton
 		>
-	</Column>
+	</BaseColumn>
 </div>
 
 <style>

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

@@ -9,7 +9,11 @@ import { AsyncFunction } from "./init_utils";
 import { Client, type client_return } from "@gradio/client";
 import { LoadingStatus, type LoadingStatusArgs } from "@gradio/statustracker";
 import type { ToastMessage } from "@gradio/statustracker";
-import type { StatusMessage, ValidationError } from "@gradio/client";
+import type {
+	StatusMessage,
+	ValidationError,
+	LogMessage
+} from "@gradio/client";
 const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 const NOVALUE = Symbol("NOVALUE");
@@ -150,6 +154,25 @@ interface DispatchEvent {
 	event_data: unknown;
 }
 
+type UpdateStateCallback = (
+	id: number,
+	state: Record<string, unknown>,
+	check_visibility?: boolean
+) => Promise<void>;
+type GetStateCallback = (id: number) => Promise<Record<string, unknown> | null>;
+type RerenderCallback = (
+	components: ComponentMeta[],
+	layout: LayoutNode
+) => void;
+type LogCallback = (
+	title: string,
+	message: string,
+	fn_index: number,
+	type: ToastMessage["type"],
+	duration?: number | null,
+	visible?: boolean
+) => void;
+
 /**
  * Manages all dependencies for an app acting as a bridge between app state and Dependencies
  * Responsible for registering dependencies and dispatching events to them
@@ -171,21 +194,11 @@ export class DependencyManager {
 	queue: Set<number> = new Set();
 	add_to_api_calls: (payload: Payload) => void;
 
-	update_state_cb: (
-		id: number,
-		state: Record<string, unknown>,
-		check_visibility?: boolean
-	) => Promise<void>;
-	get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
-	rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
-	log_cb: (
-		title: string,
-		message: string,
-		fn_index: number,
-		type: ToastMessage["type"],
-		duration?: number | null,
-		visible?: boolean
-	) => void;
+	update_state_cb: UpdateStateCallback;
+	get_state_cb: GetStateCallback;
+	rerender_cb: RerenderCallback;
+	log_cb: LogCallback;
+
 	loading_stati = new LoadingStatus();
 
 	constructor(
@@ -213,6 +226,7 @@ export class DependencyManager {
 		this.update_state_cb = update_state_cb;
 		this.get_state_cb = get_state_cb;
 		this.rerender_cb = rerender_cb;
+		this.client = client;
 		this.reload(
 			dependencies,
 			update_state_cb,
@@ -224,10 +238,10 @@ export class DependencyManager {
 
 	reload(
 		dependencies: IDependency[],
-		update_state,
-		get_state,
-		rerender,
-		client
+		update_state: UpdateStateCallback,
+		get_state: GetStateCallback,
+		rerender: RerenderCallback,
+		client: Client
 	) {
 		const { by_id, by_event } = this.create(dependencies);
 		this.dependencies_by_event = by_event;
@@ -306,7 +320,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) {
@@ -367,7 +380,7 @@ export class DependencyManager {
 							data: data_payload,
 							event_data: event_meta.event_data
 						};
-						submission!.send_chunk(payload);
+						submission!.send_chunk(payload as any);
 						unset_args.forEach((fn) => fn());
 						continue;
 					}
@@ -508,8 +521,9 @@ export class DependencyManager {
 										(_, b) => b
 									);
 									this.log_cb(
-										result._title ?? "Error",
-										_message,
+										//@ts-ignore
+										result?._title ?? "Error",
+										_message || "",
 										fn_index,
 										"error",
 										status.duration,
@@ -776,6 +790,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);
 			}
 		}