@gradio/core 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @gradio/core
 
+## 0.22.0
+
+### Features
+
+- [#11572](https://github.com/gradio-app/gradio/pull/11572) [`552a5eb`](https://github.com/gradio-app/gradio/commit/552a5ebf9beb5d543f82a24a546daaf9ad3d88b1) - handle i18n error when browsers aren't set to en.  Thanks @hannahblair!
+
+## 0.21.0
+
+### Features
+
+- [#11427](https://github.com/gradio-app/gradio/pull/11427) [`6b2bcd0`](https://github.com/gradio-app/gradio/commit/6b2bcd097ae5ef999a7fb273ecf7c7e4c0eab305) - Improve load times of the Gradio front-end.  Thanks @pngwn!
+- [#11511](https://github.com/gradio-app/gradio/pull/11511) [`1a99336`](https://github.com/gradio-app/gradio/commit/1a99336043076e7b0a4c4b07f97082f0361882f4) - Fix SSR.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.16.3
+- @gradio/statustracker@0.10.14
+- @gradio/column@0.2.1
+- @gradio/tabs@0.4.5
+- @gradio/upload@0.16.10
+- @gradio/video@0.14.20
+- @gradio/tabitem@0.5.0
+- @gradio/code@0.14.10
+- @gradio/paramviewer@0.7.12
+- @gradio/client@1.15.5
+- @gradio/image@0.22.12
+- @gradio/button@0.5.6
+- @gradio/checkbox@0.4.25
+- @gradio/gallery@0.15.26
+- @gradio/plot@0.9.19
+- @gradio/textbox@0.10.16
+- @gradio/file@0.12.23
+
 ## 0.20.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -3,7 +3,6 @@ import { _ } from "svelte-i18n";
 import { Client } from "@gradio/client";
 import { writable } from "svelte/store";
 import { setupi18n } from "./i18n";
-import { ApiDocs, ApiRecorder, Settings } from "./api_docs/";
 import { Toast } from "@gradio/statustracker";
 import MountComponents from "./MountComponents.svelte";
 import { prefix_css } from "./css";
@@ -61,6 +60,7 @@ $:
     old_dependencies = dependencies;
   }
 async function run() {
+  await setupi18n(app.config?.i18n_translations || void 0);
   layout_creating = true;
   await create_layout({
     components,
@@ -80,8 +80,36 @@ let settings_visible = search_params.get("view") === "settings";
 let api_recorder_visible = search_params.get("view") === "api-recorder" && show_api;
 let allow_zoom = true;
 let allow_video_trim = true;
-function set_api_docs_visible(visible) {
+let ApiDocs = null;
+let ApiRecorder = null;
+let Settings = null;
+async function loadApiDocs() {
+  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() {
+  if (!ApiRecorder) {
+    const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
+    ApiRecorder = api_recorder_module.default;
+  }
+}
+async function loadSettings() {
+  if (!Settings) {
+    const settings_module = await import("./api_docs/Settings.svelte");
+    Settings = settings_module.default;
+  }
+}
+async function set_api_docs_visible(visible) {
   api_recorder_visible = false;
+  if (visible) {
+    await loadApiDocs();
+  }
   api_docs_visible = visible;
   let params = new URLSearchParams(window.location.search);
   if (visible) {
@@ -91,7 +119,10 @@ function set_api_docs_visible(visible) {
   }
   history.replaceState(null, "", "?" + params.toString());
 }
-function set_settings_visible(visible) {
+async function set_settings_visible(visible) {
+  if (visible) {
+    await loadSettings();
+  }
   let params = new URLSearchParams(window.location.search);
   if (visible) {
     params.set("view", "settings");
@@ -658,6 +689,15 @@ onMount(() => {
       $is_screen_recording = isRecording;
     }
   );
+  if (api_docs_visible) {
+    loadApiDocs();
+  }
+  if (api_recorder_visible) {
+    loadApiRecorder();
+  }
+  if (settings_visible) {
+    loadSettings();
+  }
 });
 function screen_recording() {
   if ($is_screen_recording) {
@@ -666,10 +706,6 @@ function screen_recording() {
     screen_recorder.startRecording();
   }
 }
-let i18n_ready = false;
-setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
-  i18n_ready = true;
-});
 </script>
 
 <svelte:head>
@@ -683,7 +719,7 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 
 <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}
@@ -705,6 +741,10 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 					on:click={() => {
 						set_api_docs_visible(!api_docs_visible);
 					}}
+					on:mouseenter={() => {
+						loadApiDocs();
+						loadApiRecorder();
+					}}
 					class="show-api"
 				>
 					{#if app.config?.mcp_server}
@@ -741,6 +781,9 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 				on:click={() => {
 					set_settings_visible(!settings_visible);
 				}}
+				on:mouseenter={() => {
+					loadSettings();
+				}}
 				class="settings"
 			>
 				{$_("common.settings")}
@@ -750,7 +793,7 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 	{/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-->
@@ -761,11 +804,11 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 			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-->
@@ -777,12 +820,14 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 			}}
 		/>
 		<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}
@@ -795,7 +840,7 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 	</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-->
@@ -807,13 +852,14 @@ setupi18n(app.config?.i18n_translations ?? void 0).then(() => {
 			}}
 		/>
 		<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/dist/src/Render.svelte

@@ -39,7 +39,9 @@ $: {
 setContext("BLOCK_KEY", parent);
 $: {
   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;
@@ -61,34 +63,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/dist/src/RenderComponent.svelte

@@ -34,7 +34,7 @@ function wrap(component2) {
   });
   return ProxiedMyClass;
 }
-const _component = wrap(component);
+let _component = wrap(component);
 const supported_props = [
   "description",
   "info",
@@ -56,20 +56,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/dist/src/i18n.d.ts

@@ -2,8 +2,17 @@ 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 declare function is_translation_metadata(obj: any): obj is I18nData;
 export declare function translate_if_needed(value: any): string;
@@ -13,4 +22,7 @@ export declare let all_common_keys: Set<string>;
 export declare function setupi18n(custom_translations?: Record<string, Record<string, string>>): Promise<void>;
 export declare function changeLocale(new_locale: string): void;
 export declare function get_initial_locale(browser_locale: string | null, available_locales: string[], fallback_locale?: string): string;
-export declare function load_translations(translations: LangsRecord | null | undefined): void;
+export declare function load_translations(translations: {
+    processed_langs: LangsRecord;
+    custom_translations: Record<string, Record<string, string>>;
+}): void;

package/dist/src/i18n.js

@@ -1,10 +1,41 @@
-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 function is_translation_metadata(obj) {
-    console.log(obj);
     const result = obj &&
         typeof obj === "object" &&
         obj.__type__ === "translation_metadata" &&
@@ -61,14 +92,18 @@ export function translate_if_needed(value) {
     }
 }
 export function process_langs() {
-    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.default
+        { type: "lazy", data: mod }
     ]));
+    return {
+        ...lazy_langs,
+        en: { type: "static", data: en }
+    };
 }
 const processed_langs = process_langs();
 const available_locales = Object.keys(processed_langs);
-export const language_choices = Object.entries(processed_langs).map(([code, data]) => [data._name || code, code]);
+export const language_choices = Object.entries(processed_langs).map(([code]) => [lang_map[code] || code, code]);
 export let all_common_keys = new Set();
 let i18n_initialized = false;
 let previous_translations;
@@ -79,8 +114,8 @@ export async function setupi18n(custom_translations) {
     }
     previous_translations = custom_translations;
     load_translations({
-        ...processed_langs,
-        ...(custom_translations ?? {})
+        processed_langs,
+        custom_translations: custom_translations ?? {}
     });
     const browser_locale = getLocaleFromNavigator();
     let initial_locale = browser_locale && available_locales.includes(browser_locale)
@@ -97,17 +132,6 @@ export async function setupi18n(custom_translations) {
         fallbackLocale: "en",
         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;
 }
 export function changeLocale(new_locale) {
@@ -126,8 +150,17 @@ export function load_translations(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) {

package/dist/src/init.d.ts

@@ -97,7 +97,15 @@ export declare function get_component(type: string, class_id: string, root: stri
     example_components?: Map<ComponentMeta["type"], LoadingComponent>;
 };
 /**
- * Preload all components
+ * Preload only visible components
+ * @param components A list of component metadata
+ * @param layout The layout tree to determine visibility
+ * @param root The root url of the app
+ * @returns A map of component ids to their constructors
+ */
+export declare function preload_visible_components(components: ComponentMeta[], layout: LayoutNode, root: string): Map<ComponentMeta["type"], LoadingComponent>;
+/**
+ * Preload all components (legacy function, kept for backwards compatibility)
  * @param components A list of component metadata
  * @param root The root url of the app
  * @returns A map of component ids to their constructors