@gradio/core 0.4.1 → 0.6.0

package/src/RenderComponent.svelte

@@ -17,6 +17,7 @@
 	export let elem_id: string;
 	export let elem_classes: string[];
 	export let _id: number;
+	export let visible: boolean;
 
 	const s = (id: number, p: string, v: any): CustomEvent =>
 		new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
@@ -51,6 +52,7 @@
 	const _component = wrap(component);
 </script>
 
+<!-- {#if visible} -->
 <svelte:component
 	this={_component}
 	bind:this={instance}
@@ -59,9 +61,11 @@
 	{elem_id}
 	{elem_classes}
 	{target}
+	{visible}
 	{...$$restProps}
 	{theme_mode}
 	{root}
 >
 	<slot />
 </svelte:component>
+<!-- {/if} -->

package/src/api_docs/Settings.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	/* eslint-disable */
+	import { onMount } from "svelte";
+	import SettingsBanner from "./SettingsBanner.svelte";
+	export let root: string;
+	export let space_id: string | null;
+	export let pwa_enabled: boolean | undefined;
+	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: "light" | "dark" | "system") {
+		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 as "light" | "dark" | "system") || "system";
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	});
+
+	let current_locale: string;
+	let current_theme: "light" | "dark" | "system" = "system";
+
+	locale.subscribe((value) => {
+		if (value) {
+			current_locale = value;
+		}
+	});
+
+	function handleLanguageChange(e: CustomEvent): void {
+		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/src/api_docs/SettingsBanner.svelte

@@ -0,0 +1,74 @@
+<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;
+
+	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/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/src/api_docs/index.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/src/i18n.ts

@@ -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
@@ -23,14 +23,37 @@ export function process_langs(): LangsRecord {
 }
 
 const processed_langs = process_langs();
+const available_locales = Object.keys(processed_langs);
+
+export const language_choices: [string, string][] = 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(): Promise<void> {
+	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: string): void {
+	locale.set(new_locale);
 }

package/src/init.ts

@@ -154,7 +154,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			{} as { [id: number]: ComponentMeta }
 		);
 
-		await walk_layout(layout, root);
+		await walk_layout(layout, root, _components);
 
 		layout_store.set(_rootNode);
 		set_event_specific_args(dependencies);
@@ -230,7 +230,12 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			] = instance_map[layout.id];
 		}
 
-		walk_layout(layout, root, current_element.parent).then(() => {
+		walk_layout(
+			layout,
+			root,
+			_components.concat(components),
+			current_element.parent
+		).then(() => {
 			layout_store.set(_rootNode);
 		});
 
@@ -240,6 +245,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 	async function walk_layout(
 		node: LayoutNode,
 		root: string,
+		components: ComponentMeta[],
 		parent?: ComponentMeta
 	): Promise<ComponentMeta> {
 		const instance = instance_map[node.id];
@@ -254,7 +260,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 				instance.type,
 				instance.component_class_id,
 				root,
-				_components,
+				components,
 				instance.props.components
 			).example_components;
 		}
@@ -288,21 +294,21 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 
 		if (node.children) {
 			instance.children = await Promise.all(
-				node.children.map((v) => walk_layout(v, root, instance))
+				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) => {
+				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 as any),
-							id: instance.props.id
+							id: instance.props.id,
+							order: i
 						}
 					};
 				}) || [];
@@ -315,10 +321,18 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 				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;
 	}
 
@@ -379,7 +393,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		if (!comp) {
 			return null;
 		}
-		if (comp.instance.get_value) {
+		if (comp.instance?.get_value) {
 			return comp.instance.get_value() as Promise<any>;
 		}
 		return comp.props.value;
@@ -408,7 +422,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		state: "open" | "closed" | "waiting"
 	): void {
 		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);
 		}
 	}
@@ -417,14 +431,14 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		id: number
 	): "open" | "closed" | "waiting" | "not_set" {
 		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: number, time_limit: number | undefined): void {
 		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);
 		}
 	}

package/src/lang/ar.json

@@ -1,16 +1,130 @@
 {
+	"_name": "العربية",
+	"3D_model": {
+		"3d_model": "نموذج ثلاثي الأبعاد"
+	},
+	"annotated_image": {
+		"annotated_image": "صورة مشروحة"
+	},
+	"audio": {
+		"allow_recording_access": "يرجى السماح بالوصول إلى الميكروفون للتسجيل",
+		"audio": "الصوت",
+		"record_from_microphone": "تسجيل من الميكروفون",
+		"stop_recording": "إيقاف التسجيل",
+		"no_device_support": "لا يمكن الوصول إلى أجهزة الوسائط. تأكد من أنك تعمل على مصدر آمن (https) أو localhost (أو قمت بتمرير شهادة SSL صالحة إلى ssl_verify)، وأنك سمحت للمتصفح بالوصول إلى جهازك.",
+		"stop": "إيقاف",
+		"resume": "استئناف",
+		"record": "تسجيل",
+		"no_microphone": "لم يتم العثور على ميكروفون",
+		"pause": "إيقاف مؤقت",
+		"play": "تشغيل",
+		"waiting": "جاري الانتظار"
+	},
+	"blocks": {
+		"connection_can_break": "على الهاتف المحمول، يمكن أن ينقطع الاتصال إذا تم تغيير التبويب أو دخل الجهاز في وضع السكون، مما يؤدي إلى فقدان موقعك في قائمة الانتظار.",
+		"long_requests_queue": "هناك قائمة انتظار طويلة من الطلبات المعلقة. قم بتكرار هذا الفضاء للتخطي.",
+		"lost_connection": "فقد الاتصال بسبب مغادرة الصفحة. إعادة الانضمام إلى قائمة الانتظار..."
+	},
+	"checkbox": {
+		"checkbox": "خانة اختيار",
+		"checkbox_group": "مجموعة خانات الاختيار"
+	},
+	"code": {
+		"code": "الكود"
+	},
+	"color_picker": {
+		"color_picker": "منتقي الألوان"
+	},
 	"common": {
+		"built_with": "بُني باستخدام",
 		"built_with_gradio": "تم الإنشاء بإستخدام Gradio",
 		"clear": "أمسح",
+		"download": "تحميل",
+		"edit": "تعديل",
+		"empty": "فارغ",
+		"error": "خطأ",
+		"hosted_on": "مستضاف على",
+		"loading": "جاري التحميل",
+		"logo": "شعار",
 		"or": "أو",
-		"submit": "أرسل"
+		"remove": "إزالة",
+		"settings": "الإعدادات",
+		"share": "مشاركة",
+		"submit": "أرسل",
+		"undo": "تراجع",
+		"no_devices": "لم يتم العثور على أجهزة",
+		"language": "اللغة",
+		"display_theme": "مظهر العرض",
+		"pwa": "تطبيق ويب تقدمي"
+	},
+	"dataframe": {
+		"incorrect_format": "تنسيق غير صحيح، يتم دعم ملفات CSV و TSV فقط",
+		"new_column": "إضافة عمود",
+		"new_row": "صف جديد",
+		"add_row_above": "إضافة صف فوق",
+		"add_row_below": "إضافة صف تحت",
+		"add_column_left": "إضافة عمود لليسار",
+		"add_column_right": "إضافة عمود لليمين"
+	},
+	"dropdown": {
+		"dropdown": "قائمة منسدلة"
+	},
+	"errors": {
+		"build_error": "هناك خطأ في البناء",
+		"config_error": "هناك خطأ في التكوين",
+		"contact_page_author": "يرجى الاتصال بمؤلف الصفحة لإعلامه.",
+		"no_app_file": "لا يوجد ملف تطبيق",
+		"runtime_error": "هناك خطأ في وقت التشغيل",
+		"space_not_working": "\"المساحة لا تعمل لأن\" {0}",
+		"space_paused": "المساحة متوقفة مؤقتًا",
+		"use_via_api": "استخدم عبر API"
+	},
+	"file": {
+		"uploading": "جاري الرفع..."
+	},
+	"highlighted_text": {
+		"highlighted_text": "نص مميز"
+	},
+	"image": {
+		"allow_webcam_access": "يرجى السماح بالوصول إلى كاميرا الويب للتسجيل.",
+		"brush_color": "لون الفرشاة",
+		"brush_radius": "حجم الفرشاة",
+		"image": "صورة",
+		"remove_image": "إزالة الصورة",
+		"select_brush_color": "اختر لون الفرشاة",
+		"start_drawing": "ابدأ الرسم",
+		"use_brush": "استخدم الفرشاة"
+	},
+	"label": {
+		"label": "تسمية"
+	},
+	"login": {
+		"enable_cookies": "إذا كنت تزور مساحة HuggingFace في وضع التصفح المتخفي، يجب عليك تمكين ملفات تعريف الارتباط من الجهات الخارجية.",
+		"incorrect_credentials": "بيانات الاعتماد غير صحيحة",
+		"username": "اسم المستخدم",
+		"password": "كلمة المرور",
+		"login": "تسجيل الدخول"
+	},
+	"number": {
+		"number": "رقم"
+	},
+	"plot": {
+		"plot": "رسم بياني"
+	},
+	"radio": {
+		"radio": "زر راديو"
+	},
+	"slider": {
+		"slider": "شريط التمرير"
 	},
 	"upload_text": {
-		"click_to_upload": "إضغط للتحميل",
+		"click_to_upload": "انقر للتحميل",
 		"drop_audio": "أسقط الملف الصوتي هنا",
 		"drop_csv": "أسقط ملف البيانات هنا",
 		"drop_file": "أسقط الملف هنا",
 		"drop_image": "أسقط الصورة هنا",
-		"drop_video": "أسقط الفيديو هنا"
+		"drop_video": "أسقط الفيديو هنا",
+		"drop_gallery": "أسقط الوسائط هنا",
+		"paste_clipboard": "لصق من الحافظة"
 	}
 }