@gradio/core 0.19.3 → 0.21.0

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}

package/src/Render.svelte

@@ -54,7 +54,11 @@
 
 	$: {
 		if (node && node.type === "form") {
-			if (node.children?.every((c) => !c.props.visible)) {
+			if (
+				node.children?.every(
+					(c) => typeof c.props.visible === "boolean" && !c.props.visible
+				)
+			) {
 				node.props.visible = false;
 			} else {
 				node.props.visible = true;
@@ -76,34 +80,39 @@
 	);
 </script>
 
-<RenderComponent
-	_id={node?.id}
-	component={node.component}
-	bind:instance={node.instance}
-	bind:value={node.props.value}
-	elem_id={("elem_id" in node.props && node.props.elem_id) ||
-		`component-${node.id}`}
-	elem_classes={("elem_classes" in node.props && node.props.elem_classes) || []}
-	{target}
-	{...node.props}
-	{theme_mode}
-	{root}
-	visible={typeof node.props.visible === "boolean" ? node.props.visible : true}
->
-	{#if node.children && node.children.length}
-		{#each node.children as _node (_node.id)}
-			<svelte:self
-				node={_node}
-				component={_node.component}
-				{target}
-				id={_node.id}
-				{root}
-				{theme_mode}
-				on:destroy
-				on:mount
-				{max_file_size}
-				{client}
-			/>
-		{/each}
-	{/if}
-</RenderComponent>
+{#if node.component}
+	<RenderComponent
+		_id={node?.id}
+		component={node.component}
+		bind:instance={node.instance}
+		bind:value={node.props.value}
+		elem_id={("elem_id" in node.props && node.props.elem_id) ||
+			`component-${node.id}`}
+		elem_classes={("elem_classes" in node.props && node.props.elem_classes) ||
+			[]}
+		{target}
+		{...node.props}
+		{theme_mode}
+		{root}
+		visible={typeof node.props.visible === "boolean"
+			? node.props.visible
+			: true}
+	>
+		{#if node.children && node.children.length}
+			{#each node.children as _node (_node.id)}
+				<svelte:self
+					node={_node}
+					component={_node.component}
+					{target}
+					id={_node.id}
+					{root}
+					{theme_mode}
+					on:destroy
+					on:mount
+					{max_file_size}
+					{client}
+				/>
+			{/each}
+		{/if}
+	</RenderComponent>
+{/if}

package/src/RenderComponent.svelte

@@ -49,7 +49,7 @@
 		return ProxiedMyClass;
 	}
 
-	const _component = wrap(component);
+	let _component = wrap(component);
 
 	const supported_props = [
 		"description",
@@ -72,20 +72,19 @@
 	$: value = translate_if_needed(value);
 </script>
 
-<!-- {#if visible} -->
-<svelte:component
-	this={_component}
-	bind:this={instance}
-	bind:value
-	on:prop_change
-	{elem_id}
-	{elem_classes}
-	{target}
-	{visible}
-	{...$$restProps}
-	{theme_mode}
-	{root}
->
-	<slot />
-</svelte:component>
-<!-- {/if} -->
+{#if visible}
+	<svelte:component
+		this={_component}
+		bind:this={instance}
+		bind:value
+		on:prop_change
+		{elem_id}
+		{elem_classes}
+		{target}
+		{...$$restProps}
+		{theme_mode}
+		{root}
+	>
+		<slot />
+	</svelte:component>
+{/if}

package/src/i18n.test.ts

@@ -7,7 +7,7 @@ import {
 	beforeEach,
 	afterEach
 } from "vitest";
-import { process_langs } from "./i18n";
+import { Lang, process_langs } from "./i18n";
 import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
 import BCP47 from "./lang/BCP47_codes";
 import {
@@ -36,22 +36,31 @@ describe("i18n", () => {
 	test("languages are loaded correctly", () => {
 		const langs = process_langs();
 		assert.ok(langs.en);
-		assert.ok(langs.en.common);
+		assert.ok((langs.en as { type: "static"; data: Lang }).data.common);
 	});
 
-	test("language codes follow the correct format", () => {
+	test("language codes follow the correct format", async () => {
 		const langs = Object.entries(process_langs());
 
-		langs.forEach(([code, translation]) => {
-			const BCP47_REGEX = /^.{2}-.{2}$/;
+		await Promise.all(
+			langs.map(async ([code, translation]) => {
+				const BCP47_REGEX = /^.{2}-.{2}$/;
 
-			if (BCP47_REGEX.test(code)) {
-				assert.ok(BCP47.includes(code));
-			} else {
-				assert.exists(languagesByAnyCode[code]);
-			}
-			assert.ok(translation.common);
-		});
+				if (BCP47_REGEX.test(code)) {
+					assert.ok(BCP47.includes(code));
+				} else {
+					assert.exists(languagesByAnyCode[code]);
+				}
+
+				let data: Lang;
+				if (translation.type === "lazy") {
+					data = await translation.data();
+				} else {
+					data = translation.data;
+				}
+				assert.ok(data.common);
+			})
+		);
 	});
 
 	describe("basic functions", () => {
@@ -106,7 +115,7 @@ describe("i18n", () => {
 				}
 			};
 
-			load_translations(custom_translations);
+			load_translations({ processed_langs: {}, custom_translations });
 
 			expect(mockAddMessages).toHaveBeenCalledTimes(2);
 			expect(mockAddMessages).toHaveBeenCalledWith(

package/src/i18n.ts

@@ -1,21 +1,66 @@
-import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
+import {
+	addMessages,
+	init,
+	getLocaleFromNavigator,
+	locale,
+	register,
+	waitLocale
+} from "svelte-i18n";
 import { formatter } from "./gradio_helper";
 
-const langs = import.meta.glob("./lang/*.json", {
-	eager: true
-});
+const lang_map = {
+	ar: "العربية",
+	ca: "Català",
+	ckb: "کوردی",
+	de: "Deutsch",
+	en: "English",
+	es: "Español",
+	eu: "Euskara",
+	fa: "فارسی",
+	fi: "Suomi",
+	fr: "Français",
+	he: "עברית",
+	hi: "हिंदी",
+	ja: "日本語",
+	ko: "한국어",
+	lt: "Lietuvių",
+	nb: "Norsk bokmål",
+	nl: "Nederlands",
+	pl: "Polski",
+	"pt-BR": "Português do Brasil",
+	pt: "Português",
+	ro: "Română",
+	ru: "Русский",
+	sv: "Svenska",
+	ta: "தமிழ்",
+	th: "ภาษาไทย",
+	tr: "Türkçe",
+	uk: "Українська",
+	ur: "اردو",
+	uz: "O'zbek",
+	"zh-CN": "简体中文",
+	"zh-TW": "繁體中文"
+};
+
+const langs = import.meta.glob("./lang/*.json");
+import en from "./lang/en.json";
 
 export interface I18nData {
 	__type__: "translation_metadata";
 	key: string;
 }
 
+export type Lang = {
+	[key: string]: Record<string, string> | string;
+};
+
 export interface LangsRecord {
-	[lang: string]: any;
+	[lang: string]:
+		| { type: "lazy"; data: () => Promise<Lang> }
+		| { type: "static"; data: Lang };
 }
 
 export function is_translation_metadata(obj: any): obj is I18nData {
-	console.log(obj);
 	const result =
 		obj &&
 		typeof obj === "object" &&
@@ -83,12 +128,17 @@ export function translate_if_needed(value: any): string {
 }
 
 export function process_langs(): LangsRecord {
-	return Object.fromEntries(
-		Object.entries(langs).map(([path, module]) => [
+	const lazy_langs = Object.fromEntries(
+		Object.entries(langs).map(([path, mod]) => [
 			path.split("/").pop()!.split(".")[0],
-			(module as Record<string, any>).default
+			{ type: "lazy", data: mod }
 		])
 	);
+
+	return {
+		...lazy_langs,
+		en: { type: "static", data: en }
+	};
 }
 
 const processed_langs = process_langs();
@@ -96,7 +146,7 @@ const available_locales = Object.keys(processed_langs);
 
 export const language_choices: [string, string][] = Object.entries(
 	processed_langs
-).map(([code, data]) => [data._name || code, code]);
+).map(([code]) => [lang_map[code as keyof typeof lang_map] || code, code]);
 
 export let all_common_keys: Set<string> = new Set();
 
@@ -116,8 +166,8 @@ export async function setupi18n(
 	previous_translations = custom_translations;
 
 	load_translations({
-		...processed_langs,
-		...(custom_translations ?? {})
+		processed_langs,
+		custom_translations: custom_translations ?? {}
 	});
 
 	const browser_locale = getLocaleFromNavigator();
@@ -140,20 +190,6 @@ export async function setupi18n(
 		initialLocale: initial_locale
 	});
 
-	for (const lang_code in processed_langs) {
-		if (
-			processed_langs[lang_code] &&
-			typeof processed_langs[lang_code] === "object" &&
-			processed_langs[lang_code].common &&
-			typeof processed_langs[lang_code].common === "object"
-		) {
-			const common_ns = processed_langs[lang_code].common;
-			for (const key in common_ns) {
-				all_common_keys.add(`common.${key}`);
-			}
-		}
-	}
-
 	i18n_initialized = true;
 }
 
@@ -175,16 +211,28 @@ export function get_initial_locale(
 	return fallback_locale;
 }
 
-export function load_translations(
-	translations: LangsRecord | null | undefined
-): void {
+export function load_translations(translations: {
+	processed_langs: LangsRecord;
+	custom_translations: Record<string, Record<string, string>>;
+}): void {
 	if (!translations) {
 		return;
 	}
 
 	try {
-		for (const lang in translations) {
-			addMessages(lang, translations[lang]);
+		for (const lang in translations.custom_translations) {
+			addMessages(lang, translations.custom_translations[lang]);
+		}
+
+		for (const lang in translations.processed_langs) {
+			if (
+				lang === "en" &&
+				translations.processed_langs[lang].type === "static"
+			) {
+				addMessages(lang, en);
+			} else if (translations.processed_langs[lang].type === "lazy") {
+				register(lang, translations.processed_langs[lang].data);
+			}
 		}
 	} catch (e) {
 		console.error("Error loading translations:", e);