@gradio/core 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @gradio/core
 
+## 0.6.0
+
+### Features
+
+- [#10192](https://github.com/gradio-app/gradio/pull/10192) [`4fc7fb7`](https://github.com/gradio-app/gradio/commit/4fc7fb777c42af537e4af612423fa44029657d41) - Ensure components can be remounted with their previous data.  Thanks @pngwn!
+- [#10254](https://github.com/gradio-app/gradio/pull/10254) [`da07707`](https://github.com/gradio-app/gradio/commit/da0770748db9ea40194a43c9138ee2c6536b1247) - Add a `settings` link to the footer with i18n options & pwa instructions.  Thanks @abidlabs!
+
+### Fixes
+
+- [#10207](https://github.com/gradio-app/gradio/pull/10207) [`314a8b5`](https://github.com/gradio-app/gradio/commit/314a8b55f57a30806b37fe077b471df97d04245d) - fix: make sure `comp.instance` exists.  Thanks @Col0ring!
+
+### Dependency updates
+
+- @gradio/atoms@0.13.0
+- @gradio/utils@0.10.0
+- @gradio/gallery@0.14.1
+- @gradio/upload@0.14.4
+- @gradio/client@1.9.0
+- @gradio/icons@0.9.0
+- @gradio/statustracker@0.10.0
+- @gradio/wasm@0.16.0
+- @gradio/plot@0.9.5
+- @gradio/image@0.20.0
+- @gradio/video@0.13.0
+- @gradio/file@0.12.0
+- @gradio/button@0.4.0
+- @gradio/tabs@0.4.0
+- @gradio/column@0.2.0
+- @gradio/tabitem@0.4.0
+- @gradio/code@0.10.11
+- @gradio/paramviewer@0.6.2
+- @gradio/textbox@0.10.0
+- @gradio/checkbox@0.4.10
+
 ## 0.5.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -2,12 +2,13 @@
 import { _ } from "svelte-i18n";
 import { Client } from "@gradio/client";
 import { setupi18n } from "./i18n";
-import { ApiDocs, ApiRecorder } from "./api_docs/";
+import { ApiDocs, ApiRecorder, Settings } from "./api_docs/";
 import { Toast } from "@gradio/statustracker";
 import MountComponents from "./MountComponents.svelte";
 import { prefix_css } from "./css";
 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";
 import { create_components, AsyncFunction } from "./init";
 setupi18n();
 export let root;
@@ -65,6 +66,7 @@ async function run() {
 }
 export let search_params;
 let api_docs_visible = search_params.get("view") === "api" && show_api;
+let settings_visible = search_params.get("view") === "settings";
 let api_recorder_visible = search_params.get("view") === "api-recorder" && show_api;
 function set_api_docs_visible(visible) {
   api_recorder_visible = false;
@@ -77,6 +79,16 @@ function set_api_docs_visible(visible) {
   }
   history.replaceState(null, "", "?" + params.toString());
 }
+function set_settings_visible(visible) {
+  let params = new URLSearchParams(window.location.search);
+  if (visible) {
+    params.set("view", "settings");
+  } else {
+    params.delete("view");
+  }
+  history.replaceState(null, "", "?" + params.toString());
+  settings_visible = !settings_visible;
+}
 let api_calls = [];
 export let render_complete = false;
 async function handle_update(data, fn_index) {
@@ -603,8 +615,8 @@ onMount(() => {
 				>
 					{$_("errors.use_via_api")}
 					<img src={api_logo} alt={$_("common.logo")} />
+					<div>&nbsp;·</div>
 				</button>
-				<div>·</div>
 			{/if}
 			<a
 				href="https://gradio.app"
@@ -615,6 +627,16 @@ onMount(() => {
 				{$_("common.built_with_gradio")}
 				<img src={logo} alt={$_("common.logo")} />
 			</a>
+			<button
+				on:click={() => {
+					set_settings_visible(!settings_visible);
+				}}
+				class="settings"
+			>
+				<div>· &nbsp;</div>
+				{$_("common.settings")}
+				<img src={settings_logo} alt={$_("common.settings")} />
+			</button>
 		</footer>
 	{/if}
 </div>
@@ -664,6 +686,30 @@ onMount(() => {
 	</div>
 {/if}
 
+{#if settings_visible && $_layout && app.config}
+	<div class="api-docs">
+		<!-- TODO: fix -->
+		<!-- svelte-ignore a11y-click-events-have-key-events-->
+		<!-- svelte-ignore a11y-no-static-element-interactions-->
+		<div
+			class="backdrop"
+			on:click={() => {
+				set_settings_visible(false);
+			}}
+		/>
+		<div class="api-docs-wrap">
+			<Settings
+				on:close={(event) => {
+					set_settings_visible(false);
+				}}
+				pwa_enabled={app.config.pwa}
+				{root}
+				{space_id}
+			/>
+		</div>
+	</div>
+{/if}
+
 {#if messages}
 	<Toast {messages} on:close={handle_error_close} />
 {/if}
@@ -694,7 +740,8 @@ onMount(() => {
 		margin-left: var(--size-2);
 	}
 
-	.show-api {
+	.show-api,
+	.settings {
 		display: flex;
 		align-items: center;
 	}
@@ -708,12 +755,19 @@ onMount(() => {
 		width: var(--size-3);
 	}
 
+	.settings img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-1);
+		width: var(--size-4);
+	}
+
 	.built-with {
 		display: flex;
 		align-items: center;
 	}
 
-	.built-with:hover {
+	.built-with:hover,
+	.settings:hover {
 		color: var(--body-text-color);
 	}
 
@@ -768,4 +822,19 @@ onMount(() => {
 		bottom: 10px;
 		z-index: 1000;
 	}
+
+	.show-api {
+		display: flex;
+		align-items: center;
+	}
+
+	@media (max-width: 640px) {
+		.show-api {
+			display: none;
+		}
+	}
+
+	.show-api:hover {
+		color: var(--body-text-color);
+	}
 </style>

package/dist/src/Render.svelte

@@ -73,6 +73,7 @@ $:
 	{...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)}

package/dist/src/RenderComponent.svelte

@@ -10,6 +10,7 @@ export let value;
 export let elem_id;
 export let elem_classes;
 export let _id;
+export let visible;
 const s = (id, p, v) => new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
 function wrap(component2) {
   const ProxiedMyClass = new Proxy(component2, {
@@ -35,6 +36,7 @@ function wrap(component2) {
 const _component = wrap(component);
 </script>
 
+<!-- {#if visible} -->
 <svelte:component
 	this={_component}
 	bind:this={instance}
@@ -43,9 +45,11 @@ const _component = wrap(component);
 	{elem_id}
 	{elem_classes}
 	{target}
+	{visible}
 	{...$$restProps}
 	{theme_mode}
 	{root}
 >
 	<slot />
 </svelte:component>
+<!-- {/if} -->

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

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

package/dist/src/api_docs/Settings.svelte

@@ -0,0 +1,175 @@
+<script>import { onMount } from "svelte";
+import SettingsBanner from "./SettingsBanner.svelte";
+export let root;
+export let space_id;
+export let pwa_enabled;
+import { BaseDropdown as Dropdown } from "@gradio/dropdown";
+import { language_choices, changeLocale } from "../i18n";
+import { locale, _ } from "svelte-i18n";
+import { setupi18n } from "../i18n";
+if (root === "") {
+  root = location.protocol + "//" + location.host + location.pathname;
+}
+if (!root.endsWith("/")) {
+  root += "/";
+}
+function setTheme(theme) {
+  const url = new URL(window.location.href);
+  if (theme === "system") {
+    url.searchParams.delete("__theme");
+    current_theme = "system";
+  } else {
+    url.searchParams.set("__theme", theme);
+    current_theme = theme;
+  }
+  window.location.href = url.toString();
+}
+onMount(() => {
+  document.body.style.overflow = "hidden";
+  if ("parentIFrame" in window) {
+    window.parentIFrame?.scrollTo(0, 0);
+  }
+  const url = new URL(window.location.href);
+  const theme = url.searchParams.get("__theme");
+  current_theme = theme || "system";
+  return () => {
+    document.body.style.overflow = "auto";
+  };
+});
+let current_locale;
+let current_theme = "system";
+locale.subscribe((value) => {
+  if (value) {
+    current_locale = value;
+  }
+});
+function handleLanguageChange(e) {
+  const new_locale = e.detail;
+  changeLocale(new_locale);
+}
+setupi18n();
+</script>
+
+<div class="banner-wrap">
+	<SettingsBanner on:close {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">
+			<li
+				class="theme-button {current_theme === 'light'
+					? 'current-theme'
+					: 'inactive-theme'}"
+				on:click={() => setTheme("light")}
+			>
+				<button>☀︎ &nbsp;Light</button>
+			</li>
+			<li
+				class="theme-button {current_theme === 'dark'
+					? 'current-theme'
+					: 'inactive-theme'}"
+				on:click={() => setTheme("dark")}
+			>
+				<button>⏾ &nbsp; Dark</button>
+			</li>
+			<li
+				class="theme-button {current_theme === 'system'
+					? 'current-theme'
+					: 'inactive-theme'}"
+				on:click={() => setTheme("system")}
+			>
+				<button>🖥︎ &nbsp;System</button>
+			</li>
+		</p>
+	</div>
+{/if}
+<div class="banner-wrap">
+	<h2>{$_("common.language")}</h2>
+	<p class="padded">
+		<Dropdown
+			label="Language"
+			choices={language_choices}
+			show_label={false}
+			{root}
+			value={current_locale}
+			on:change={handleLanguageChange}
+		/>
+	</p>
+</div>
+<div class="banner-wrap">
+	<h2>{$_("common.pwa")}</h2>
+	<p class="padded">
+		{#if pwa_enabled}
+			You can install this app as a Progressive Web App on your device. Visit <a
+				href={root}>{root}</a
+			> and click the install button in the URL address bar of your browser.
+		{:else}
+			Progressive Web App is not enabled for this app. To enable it, start your
+			Gradio app with <code>launch(pwa=True)</code>.
+		{/if}
+	</p>
+</div>
+
+<style>
+	.banner-wrap {
+		position: relative;
+		border-bottom: 1px solid var(--border-color-primary);
+		padding: var(--size-4) var(--size-6);
+		font-size: var(--text-md);
+	}
+
+	.banner-wrap h2 {
+		font-size: var(--text-xl);
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	p.padded {
+		padding: 15px 0px;
+	}
+
+	.theme-buttons {
+		display: flex;
+		align-items: center;
+	}
+
+	.theme-buttons > * + * {
+		margin-left: var(--size-2);
+	}
+
+	.theme-button {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		padding: var(--size-2) var(--size-2-5);
+		line-height: 1;
+		user-select: none;
+		text-transform: capitalize;
+		cursor: pointer;
+	}
+
+	.current-theme {
+		border: 1px solid var(--body-text-color-subdued);
+		color: var(--body-text-color);
+	}
+
+	.inactive-theme {
+		color: var(--body-text-color-subdued);
+	}
+
+	.inactive-theme:hover,
+	.inactive-theme:focus {
+		box-shadow: var(--shadow-drop);
+		color: var(--body-text-color);
+	}
+
+	.theme-button button {
+		all: unset;
+		cursor: pointer;
+	}
+</style>

package/dist/src/api_docs/Settings.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        root: string;
+        space_id: string | null;
+        pwa_enabled: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SettingsProps = typeof __propDef.props;
+export type SettingsEvents = typeof __propDef.events;
+export type SettingsSlots = typeof __propDef.slots;
+export default class Settings extends SvelteComponent<SettingsProps, SettingsEvents, SettingsSlots> {
+}
+export {};

package/dist/src/api_docs/SettingsBanner.svelte

@@ -0,0 +1,71 @@
+<script>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;
+const dispatch = createEventDispatcher();
+setupi18n();
+</script>
+
+<h2>
+	<img src={settings_logo} alt="" />
+	<div class="title">
+		{$_("common.settings")}
+		<div class="url">
+			{root}
+		</div>
+	</div>
+</h2>
+
+<button on:click={() => dispatch("close")}>
+	<Clear />
+</button>
+
+<style>
+	h2 {
+		display: flex;
+		color: var(--body-text-color);
+		font-weight: var(--weight-semibold);
+		font-size: var(--text-xl);
+		gap: var(--size-3);
+	}
+
+	h2 img {
+		width: var(--size-4);
+		display: inline-block;
+		margin-top: 0.1rem;
+	}
+
+	.url {
+		color: var(--color-accent);
+		font-weight: normal;
+	}
+
+	button {
+		position: absolute;
+		top: var(--size-5);
+		right: var(--size-6);
+		width: var(--size-4);
+		color: var(--body-text-color);
+	}
+
+	button:hover {
+		color: var(--color-accent);
+	}
+
+	@media (--screen-md) {
+		button {
+			top: var(--size-6);
+		}
+
+		h2 img {
+			width: var(--size-5);
+		}
+	}
+	.title {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+</style>

package/dist/src/api_docs/SettingsBanner.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        root: string;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SettingsBannerProps = typeof __propDef.props;
+export type SettingsBannerEvents = typeof __propDef.events;
+export type SettingsBannerSlots = typeof __propDef.slots;
+export default class SettingsBanner extends SvelteComponent<SettingsBannerProps, SettingsBannerEvents, SettingsBannerSlots> {
+}
+export {};

package/dist/src/api_docs/img/settings-logo.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <!-- Outer gear teeth (gray) -->
+  <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" 
+        fill="#808080"/>
+  
+  <!-- Inner circle (now gray) -->
+  <circle cx="12" cy="12" r="2.5" fill="#808080"/>
+</svg>

package/dist/src/api_docs/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ApiDocs } from "./ApiDocs.svelte";
 export { default as ApiRecorder } from "./ApiRecorder.svelte";
+export { default as Settings } from "./Settings.svelte";

package/dist/src/api_docs/index.js

@@ -1,2 +1,3 @@
 export { default as ApiDocs } from "./ApiDocs.svelte";
 export { default as ApiRecorder } from "./ApiRecorder.svelte";
+export { default as Settings } from "./Settings.svelte";

package/dist/src/i18n.d.ts

@@ -2,5 +2,7 @@ type LangsRecord = Record<string, {
     [key: string]: any;
 }>;
 export declare function process_langs(): LangsRecord;
+export declare const language_choices: [string, string][];
 export declare function setupi18n(): Promise<void>;
+export declare function changeLocale(new_locale: string): void;
 export {};

package/dist/src/i18n.js

@@ -1,4 +1,4 @@
-import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
+import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
 const langs = import.meta.glob("./lang/*.json", {
     eager: true
 });
@@ -11,12 +11,26 @@ export function process_langs() {
     return _langs;
 }
 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]);
 for (const lang in processed_langs) {
     addMessages(lang, processed_langs[lang]);
 }
+let i18n_initialized = false;
 export async function setupi18n() {
+    if (i18n_initialized) {
+        return;
+    }
+    const browser_locale = getLocaleFromNavigator();
+    const initial_locale = browser_locale && available_locales.includes(browser_locale)
+        ? browser_locale
+        : "en";
     await init({
         fallbackLocale: "en",
-        initialLocale: getLocaleFromNavigator()
+        initialLocale: initial_locale
     });
+    i18n_initialized = true;
+}
+export function changeLocale(new_locale) {
+    locale.set(new_locale);
 }

package/dist/src/init.js

@@ -147,15 +147,15 @@ export function create_components(initial_layout) {
             instance.children = await Promise.all(node.children.map((v) => walk_layout(v, root, components, instance)));
         }
         if (instance.type === "tabs" && !instance.props.initial_tabs) {
-            const tab_items_props = node.children?.map((c) => {
+            const tab_items_props = node.children?.map((c, i) => {
                 const instance = instance_map[c.id];
-                // console.log("tabs", JSON.stringify(instance.props, null, 2));
                 instance.props.id ??= c.id;
                 return {
                     type: instance.type,
                     props: {
                         ...instance.props,
-                        id: instance.props.id
+                        id: instance.props.id,
+                        order: i
                     }
                 };
             }) || [];
@@ -164,9 +164,16 @@ export function create_components(initial_layout) {
                 label: child.props.label,
                 id: child.props.id,
                 visible: child.props.visible,
-                interactive: child.props.interactive
+                interactive: child.props.interactive,
+                order: child.props.order
             }));
         }
+        if (instance.type === "tabs") {
+            node.children?.forEach((c, i) => {
+                const child = instance_map[c.id];
+                child.props.order = i;
+            });
+        }
         return instance;
     }
     let update_scheduled = false;
@@ -229,7 +236,7 @@ export function create_components(initial_layout) {
         if (!comp) {
             return null;
         }
-        if (comp.instance.get_value) {
+        if (comp.instance?.get_value) {
             return comp.instance.get_value();
         }
         return comp.props.value;
@@ -250,19 +257,19 @@ export function create_components(initial_layout) {
     }
     function modify_stream(id, state) {
         const comp = _component_map.get(id);
-        if (comp && comp.instance.modify_stream_state) {
+        if (comp && comp.instance?.modify_stream_state) {
             comp.instance.modify_stream_state(state);
         }
     }
     function get_stream_state(id) {
         const comp = _component_map.get(id);
-        if (comp && comp.instance.get_stream_state)
+        if (comp?.instance?.get_stream_state)
             return comp.instance.get_stream_state();
         return "not_set";
     }
     function set_time_limit(id, time_limit) {
         const comp = _component_map.get(id);
-        if (comp && comp.instance.set_time_limit) {
+        if (comp?.instance?.set_time_limit) {
             comp.instance.set_time_limit(time_limit);
         }
     }