@gradio/core 0.27.2 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @gradio/core
 
+## 0.29.0
+
+### Features
+
+- [#11894](https://github.com/gradio-app/gradio/pull/11894) [`cf10724`](https://github.com/gradio-app/gradio/commit/cf107246c104f3d8be1adf7a4c3d85558a0a5497) - Remove additional indentation in python API docs.  Thanks @freddyaboulton!
+- [#11858](https://github.com/gradio-app/gradio/pull/11858) [`3f8ea13`](https://github.com/gradio-app/gradio/commit/3f8ea13a8ca92abf0ad34392e403a449fda3c6c2) - remove lite.  Thanks @pngwn!
+- [#11902](https://github.com/gradio-app/gradio/pull/11902) [`6d39644`](https://github.com/gradio-app/gradio/commit/6d39644ee1000b04728eb4909cee405e7ee3b5b2) - Add navbar visibility controls and customization options.  Thanks @abidlabs!
+
+### Fixes
+
+- [#11919](https://github.com/gradio-app/gradio/pull/11919) [`3b15f63`](https://github.com/gradio-app/gradio/commit/3b15f6370bc143c0acd91225574250bccf0a8877) - ensure spaces iframe resizes when images load.  Thanks @pngwn!
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+- [#11866](https://github.com/gradio-app/gradio/pull/11866) [`02df670`](https://github.com/gradio-app/gradio/commit/02df670eccf365c253f38b682a3000fe316eef22) - Fix i18n when accept-language header contains multiple values.  Thanks @freddyaboulton!
+- [#11903](https://github.com/gradio-app/gradio/pull/11903) [`895d884`](https://github.com/gradio-app/gradio/commit/895d884a7345894f95df5f131d6517e935fd275a) - enhanced_the_arabic_translation.  Thanks @makhlwf!
+
+### Dependency updates
+
+- @gradio/paramviewer@0.8.0
+- @gradio/code@0.15.0
+- @gradio/statustracker@0.11.1
+- @gradio/tabitem@0.6.1
+- @gradio/tabs@0.5.1
+- @gradio/atoms@0.18.0
+- @gradio/checkbox@0.4.30
+- @gradio/client@1.19.0
+- @gradio/upload@0.17.0
+- @gradio/button@0.5.13
+- @gradio/textbox@0.11.1
+- @gradio/gallery@0.15.33
+- @gradio/plot@0.9.24
+- @gradio/image@0.23.0
+- @gradio/column@0.2.2
+- @gradio/dropdown@0.10.4
+- @gradio/file@0.13.0
+- @gradio/video@0.16.0
+
+## 0.28.0
+
+### Features
+
+- [#11814](https://github.com/gradio-app/gradio/pull/11814) [`013784a`](https://github.com/gradio-app/gradio/commit/013784a7086047651e8e661a38bde7d5c7f10db7) - add validation support.  Thanks @pngwn!
+- [#11833](https://github.com/gradio-app/gradio/pull/11833) [`a446fcb`](https://github.com/gradio-app/gradio/commit/a446fcba6f3fe59c32194beb7f27fb6f80b61347) - Add gr.Navbar component for multipage apps.  Thanks @abidlabs!
+- [#11783](https://github.com/gradio-app/gradio/pull/11783) [`f407daf`](https://github.com/gradio-app/gradio/commit/f407daf8046f37e042ab8b86730ff0ab8d174bcf) - Add Walkthrough and Step compoents to facilitate multi-step workflows.  Thanks @pngwn!
+
+### Fixes
+
+- [#11815](https://github.com/gradio-app/gradio/pull/11815) [`1a477c5`](https://github.com/gradio-app/gradio/commit/1a477c5202c13097d1089fb70a32a08db22d7660) - Fix i18n string visible during load and i18n not respecting HTML.  Thanks @freddyaboulton!
+- [#11749](https://github.com/gradio-app/gradio/pull/11749) [`70f4532`](https://github.com/gradio-app/gradio/commit/70f4532a4dc7576dbdbe1d0a43a05644a0dfcf43) - fix various iFrame related UI issues when deploying to spaces.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/client@1.18.0
+- @gradio/icons@0.14.0
+- @gradio/atoms@0.17.0
+- @gradio/statustracker@0.11.0
+- @gradio/gallery@0.15.32
+- @gradio/plot@0.9.23
+- @gradio/upload@0.16.17
+- @gradio/file@0.12.29
+- @gradio/image@0.22.18
+- @gradio/video@0.15.1
+- @gradio/tabitem@0.6.0
+- @gradio/tabs@0.5.0
+- @gradio/code@0.14.16
+- @gradio/paramviewer@0.7.16
+- @gradio/column@0.2.1
+- @gradio/textbox@0.11.0
+- @gradio/dropdown@0.10.3
+- @gradio/button@0.5.12
+- @gradio/checkbox@0.4.29
+
 ## 0.27.2
 
 ### Features

package/dist/src/Blocks.svelte

@@ -193,6 +193,17 @@ async function handle_update(data, fn_index) {
     }
   });
   update_value(updates);
+  updates.forEach((update) => {
+    const component = components.find((comp) => comp.id === update.id);
+    if (component && component.type === "navbar") {
+      import("./navbar_store").then(({ navbar_config }) => {
+        navbar_config.update((current) => ({
+          ...current,
+          [update.prop]: update.value
+        }));
+      });
+    }
+  });
   await tick();
 }
 let submit_map = /* @__PURE__ */ new Map();
@@ -485,6 +496,40 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       }
     }
     function handle_status_update(message) {
+      if (message.code === "validation_error") {
+        const dep2 = dependencies.find((dep3) => dep3.id === message.fn_index);
+        if (dep2 === void 0 || message.message === void 0 || typeof message.message === "string") {
+          return;
+        }
+        const validation_error_data = [];
+        message.message.forEach((message2, i) => {
+          if (message2.is_valid) {
+            return;
+          }
+          validation_error_data.push({
+            id: dep2.inputs[i],
+            prop: "validation_error",
+            value: message2.message
+          });
+          validation_error_data.push({
+            id: dep2.inputs[i],
+            prop: "loading_status",
+            value: { validation_error: message2.message }
+          });
+        });
+        if (validation_error_data.length > 0) {
+          update_value(validation_error_data);
+          loading_status.update({
+            status: "complete",
+            fn_index: message.fn_index,
+            eta: 0,
+            queue: false,
+            queue_position: null
+          });
+          set_status($loading_status);
+          return;
+        }
+      }
       if (message.broken && !broken_connection) {
         messages = [
           new_message(
@@ -567,7 +612,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
         submit_map.delete(dep_index);
       }
       if (status.stage === "error" && !broken_connection && !message.session_not_found) {
-        if (status.message) {
+        if (status.message && typeof status.message === "string") {
           const _message = status.message.replace(
             MESSAGE_QUOTE_RE,
             (_2, b) => b
@@ -636,6 +681,11 @@ async function handle_mount() {
   target.addEventListener("prop_change", (e) => {
     if (!isCustomEvent(e)) throw new Error("not a custom event");
     const { id, prop, value } = e.detail;
+    if (prop === "value") {
+      update_value([
+        { id, prop: "loading_status", value: { validation_error: void 0 } }
+      ]);
+    }
     update_value([{ id, prop, value }]);
     if (prop === "input_ready" && value === false) {
       inputs_waiting.push(id);
@@ -780,6 +830,37 @@ function screen_recording() {
     screen_recorder.startRecording();
   }
 }
+let footer_height = 0;
+let root_container;
+$: root_node = $_layout && get_root_node(root_container);
+function get_root_node(container) {
+  if (!container) return null;
+  return container.children[container.children.length - 1];
+}
+function handle_resize() {
+  if ("parentIFrame" in window) {
+    const box = root_node?.getBoundingClientRect();
+    if (!box) return;
+    window.parentIFrame?.size(box.bottom + footer_height + 32);
+  }
+}
+onMount(() => {
+  if ("parentIFrame" in window) {
+    window.parentIFrame?.autoResize(false);
+  }
+  const mut = new MutationObserver(handle_resize);
+  const res = new ResizeObserver(handle_resize);
+  mut.observe(root_container, {
+    childList: true,
+    subtree: true,
+    attributes: true
+  });
+  res.observe(root_container);
+  return () => {
+    mut.disconnect();
+    res.disconnect();
+  };
+});
 </script>
 
 <svelte:head>
@@ -795,6 +876,7 @@ function screen_recording() {
 	<div
 		class="contain"
 		style:flex-grow={app_mode ? "1" : "auto"}
+		bind:this={root_container}
 		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
 	>
 		{#if $_layout && app.config}
@@ -813,7 +895,7 @@ function screen_recording() {
 	</div>
 
 	{#if show_footer}
-		<footer>
+		<footer bind:clientHeight={footer_height}>
 			{#if show_api}
 				<button
 					on:click={() => {

package/dist/src/Embed.svelte

@@ -1,12 +1,12 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import space_logo from "./images/spaces.svg";
 import { _ } from "svelte-i18n";
+import { navbar_config } from "./navbar_store";
 export let wrapper;
 export let version;
 export let initial_height;
 export let fill_width;
 export let is_embed;
-export let is_lite;
 export let space;
 export let display;
 export let info;
@@ -14,7 +14,45 @@ export let loaded;
 export let pages = [];
 export let current_page = "";
 export let root;
-const set_page = getContext("set_lite_page");
+export let components = [];
+let navbar_component = components.find((c) => c.type === "navbar");
+let navbar = navbar_component ? {
+  visible: navbar_component.props.visible,
+  main_page_name: navbar_component.props.main_page_name,
+  value: navbar_component.props.value
+} : null;
+if (navbar) {
+  navbar_config.set(navbar);
+}
+$: if ($navbar_config) {
+  navbar = {
+    visible: $navbar_config.visible ?? true,
+    main_page_name: $navbar_config.main_page_name ?? "Home",
+    value: $navbar_config.value ?? null
+  };
+}
+$: show_navbar = pages.length > 1 && (navbar === null || navbar.visible !== false);
+$: effective_pages = (() => {
+  let visible_pages = pages.filter(([route, label, show], index) => {
+    if (index === 0 && route === "") {
+      return navbar?.main_page_name !== false;
+    }
+    return show !== false;
+  });
+  let base_pages = navbar && navbar.main_page_name !== false && navbar.main_page_name !== "Home" ? visible_pages.map(
+    ([route, label, show], index) => index === 0 && route === "" && label === "Home" ? [route, navbar.main_page_name] : [route, label]
+  ) : visible_pages.map(
+    ([route, label]) => [route, label]
+  );
+  if (navbar?.value && navbar.value.length > 0) {
+    const existing_routes = new Set(base_pages.map(([route]) => route));
+    const additional_pages = navbar.value.map(
+      ([page_name, page_path]) => [page_path, page_name]
+    ).filter(([route]) => !existing_routes.has(route));
+    return [...base_pages, ...additional_pages];
+  }
+  return base_pages;
+})();
 </script>
 
 <div
@@ -27,27 +65,24 @@ const set_page = getContext("set_lite_page");
 	style:flex-grow={!display ? "1" : "auto"}
 	data-iframe-height
 >
-	{#if pages.length > 1}
+	{#if show_navbar}
 		<div class="nav-holder">
 			<nav class="fillable" class:fill_width>
-				{#each pages as [route, label], i}
-					{#if is_lite}
-						<button
-							class:active={route === current_page}
-							on:click={(e) => {
-								e.preventDefault();
-								set_page?.(route);
-							}}
-							>{label}
-						</button>
-					{:else}
-						<a
-							href={`${root}/${route}`}
-							class:active={route === current_page}
-							data-sveltekit-reload
-							>{label}
-						</a>
-					{/if}
+				{#each effective_pages as [route, label], i}
+					<a
+						href={route.startsWith("http://") || route.startsWith("https://")
+							? route
+							: `${root}/${route}`}
+						class:active={route === current_page}
+						data-sveltekit-reload
+						target={route.startsWith("http://") || route.startsWith("https://")
+							? "_blank"
+							: "_self"}
+						rel={route.startsWith("http://") || route.startsWith("https://")
+							? "noopener noreferrer"
+							: ""}
+						>{label}
+					</a>
 				{/each}
 			</nav>
 		</div>
@@ -93,16 +128,14 @@ const set_page = getContext("set_lite_page");
 		margin: 0 auto;
 		padding: 0 var(--size-8);
 	}
-	nav a,
-	button {
+	nav a {
 		padding: var(--size-1) var(--size-2);
 		border-radius: var(--block-radius);
 		border-width: var(--block-border-width);
 		border-color: transparent;
 		color: var(--body-text-color-subdued);
 	}
-	nav a.active,
-	button.active {
+	nav a.active {
 		color: var(--body-text-color);
 		border-color: var(--block-border-color);
 		background-color: var(--block-background-fill);

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

@@ -6,14 +6,14 @@ declare const __propDef: {
         initial_height: string;
         fill_width: boolean;
         is_embed: boolean;
-        is_lite: boolean;
         space: string | null;
         display: boolean;
         info: boolean;
         loaded: boolean;
-        pages?: [string, string][];
+        pages?: [string, string, boolean][];
         current_page?: string;
         root: string;
+        components?: any[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/Render.svelte

@@ -39,10 +39,14 @@ $: {
 setContext("BLOCK_KEY", parent);
 $: {
   if (node && node.type === "form") {
-    if (node.children?.every(
-      (c) => typeof c.props.visible === "boolean" && !c.props.visible
-    )) {
-      node.props.visible = false;
+    const allChildrenInvisible = node.children?.every(
+      (c) => c.props.visible === false || c.props.visible === "hidden"
+    );
+    if (allChildrenInvisible) {
+      const hasHiddenChild = node.children?.some(
+        (c) => c.props.visible === "hidden"
+      );
+      node.props.visible = hasHiddenChild ? "hidden" : false;
     } else {
       node.props.visible = true;
     }
@@ -76,7 +80,8 @@ $: node.props.gradio = new Gradio(
 		{...node.props}
 		{theme_mode}
 		{root}
-		visible={typeof node.props.visible === "boolean"
+		visible={typeof node.props.visible === "boolean" ||
+		node.props.visible === "hidden"
 			? node.props.visible
 			: true}
 	>

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         elem_id: string;
         elem_classes: string[];
         _id: number;
-        visible: boolean;
+        visible: boolean | "hidden";
     };
     events: {
         prop_change: any;

package/dist/src/api_docs/CodeSnippet.svelte

@@ -43,13 +43,13 @@ $: normalised_root = root.replace(/\/$/, "");
 							class="highlight">import</span
 						> Client{#if has_file_path}, handle_file{/if}
 
-	client = Client(<span class="token string">"{space_id || root}"</span
+client = Client(<span class="token string">"{space_id || root}"</span
 						>{#if username !== null}, auth=("{username}", **password**){/if})
-	result = client.<span class="highlight">predict</span
+result = client.<span class="highlight">predict</span
 						>(<!--
-	-->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
-			-->
-			{parameter_name
+-->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
+		-->
+	{parameter_name
 								? parameter_name + "="
 								: ""}<span
 								>{represent_value(
@@ -59,11 +59,11 @@ $: normalised_root = root.replace(/\/$/, "");
 								)}</span
 							>,{/each}<!--
 
-			-->
-			api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
-			-->
-	)
-	<span class="highlight">print</span>(result)</pre>
+	-->
+	api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
+	-->
+)
+<span class="highlight">print</span>(result)</pre>
 				</div>
 			</code>
 		</Block>

package/dist/src/i18n.d.ts

@@ -15,11 +15,12 @@ export interface LangsRecord {
     };
 }
 export declare function is_translation_metadata(obj: any): obj is I18nData;
+export declare const i18n_marker = "__i18n__";
 export declare function translate_if_needed(value: any): string;
 export declare function process_langs(): LangsRecord;
 export declare const language_choices: [string, string][];
 export declare let all_common_keys: Set<string>;
-export declare function setupi18n(custom_translations?: Record<string, Record<string, string>>): Promise<void>;
+export declare function setupi18n(custom_translations?: Record<string, Record<string, string>>, preferred_locale?: 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: {

package/dist/src/i18n.js

@@ -43,12 +43,12 @@ export function is_translation_metadata(obj) {
         typeof obj.key === "string";
     return result;
 }
+export const i18n_marker = "__i18n__";
 // handles strings with embedded JSON metadata of shape "__i18n__{"key": "some.key"}"
 export function translate_if_needed(value) {
     if (typeof value !== "string") {
         return value;
     }
-    const i18n_marker = "__i18n__";
     const marker_index = value.indexOf(i18n_marker);
     if (marker_index === -1) {
         return value;
@@ -108,7 +108,19 @@ export const language_choices = Object.entries(processed_langs).map(([code]) =>
 export let all_common_keys = new Set();
 let i18n_initialized = false;
 let previous_translations;
-export async function setupi18n(custom_translations) {
+function get_lang_from_preferred_locale(header) {
+    const options = header
+        .split(",")
+        .map((value) => value.includes(";") ? value.split(";").slice(0, 2) : [value, 1]);
+    options.sort((a, b) => parseFloat(b[1]) - parseFloat(a[1]));
+    for (const [lang, _] of options) {
+        if (available_locales.includes(lang)) {
+            return lang;
+        }
+    }
+    return null;
+}
+export async function setupi18n(custom_translations, preferred_locale) {
     const should_reinitialize = i18n_initialized && custom_translations !== previous_translations;
     if (i18n_initialized && !should_reinitialize) {
         return;
@@ -118,10 +130,17 @@ export async function setupi18n(custom_translations) {
         processed_langs,
         custom_translations: custom_translations ?? {}
     });
+    let initial_locale = null;
     const browser_locale = getLocaleFromNavigator();
-    let initial_locale = browser_locale && available_locales.includes(browser_locale)
-        ? browser_locale
-        : null;
+    if (preferred_locale) {
+        initial_locale = get_lang_from_preferred_locale(preferred_locale);
+    }
+    else {
+        initial_locale =
+            browser_locale && available_locales.includes(browser_locale)
+                ? browser_locale
+                : null;
+    }
     if (!initial_locale) {
         const normalized_locale = browser_locale?.split("-")[0];
         initial_locale =