@gradio/core 0.5.0 → 0.6.0

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

@@ -300,15 +300,15 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 
 		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
 						}
 					};
 				}) || [];
@@ -321,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;
 	}
 
@@ -385,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;
@@ -414,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);
 		}
 	}
@@ -423,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": "لصق من الحافظة"
 	}
 }

package/src/lang/ca.json

@@ -1,12 +1,121 @@
 {
+	"_name": "Català",
+	"3D_model": {
+		"3d_model": "Model 3D"
+	},
+	"annotated_image": {
+		"annotated_image": "Imatge Anotada"
+	},
+	"audio": {
+		"allow_recording_access": "Si us plau, permeteu l'accés al micròfon per gravar.",
+		"audio": "Àudio",
+		"record_from_microphone": "Gravar des del micròfon",
+		"stop_recording": "Aturar la gravació",
+		"no_device_support": "No s'ha pogut accedir als dispositius multimèdia. Comproveu que esteu executant en un origen segur (https) o localhost (o heu passat un certificat SSL vàlid a ssl_verify), i que heu permès l'accés del navegador al vostre dispositiu.",
+		"stop": "Aturar",
+		"resume": "Reprendre",
+		"record": "Gravar",
+		"no_microphone": "No s'ha trobat cap micròfon",
+		"pause": "Pausa",
+		"play": "Reproduir",
+		"waiting": "Esperant"
+	},
+	"blocks": {
+		"connection_can_break": "En dispositius mòbils, la connexió es pot trencar si aquesta pestanya perd el focus o el dispositiu s'adorm, perdent la vostra posició a la cua.",
+		"long_requests_queue": "Hi ha una llarga cua de sol·licituds pendents. Dupliqueu aquest Space per saltar-la.",
+		"lost_connection": "S'ha perdut la connexió en deixar la pàgina. Tornant a la cua..."
+	},
+	"checkbox": {
+		"checkbox": "Casella de selecció",
+		"checkbox_group": "Grup de caselles"
+	},
+	"code": {
+		"code": "Codi"
+	},
+	"color_picker": {
+		"color_picker": "Selector de color"
+	},
 	"common": {
+		"built_with": "construït amb",
 		"built_with_gradio": "Construït amb gradio",
 		"clear": "Neteja",
+		"download": "Descarregar",
+		"edit": "Editar",
 		"empty": "Buit",
 		"error": "Error",
+		"hosted_on": "Allotjat a",
 		"loading": "S'està carregant",
+		"logo": "logotip",
 		"or": "o",
-		"submit": "Envia"
+		"remove": "Eliminar",
+		"settings": "Configuració",
+		"share": "Compartir",
+		"submit": "Envia",
+		"undo": "Desfer",
+		"no_devices": "No s'han trobat dispositius",
+		"language": "Idioma",
+		"display_theme": "Tema de visualització",
+		"pwa": "Aplicació web progressiva"
+	},
+	"dataframe": {
+		"incorrect_format": "Format incorrecte, només s'admeten fitxers CSV i TSV",
+		"new_column": "Afegir columna",
+		"new_row": "Nova fila",
+		"add_row_above": "Afegir fila a dalt",
+		"add_row_below": "Afegir fila a baix",
+		"add_column_left": "Afegir columna a l'esquerra",
+		"add_column_right": "Afegir columna a la dreta"
+	},
+	"dropdown": {
+		"dropdown": "Desplegable"
+	},
+	"errors": {
+		"build_error": "hi ha un error de compilació",
+		"config_error": "hi ha un error de configuració",
+		"contact_page_author": "Si us plau, contacteu amb l'autor de la pàgina per informar-lo.",
+		"no_app_file": "no hi ha fitxer d'aplicació",
+		"runtime_error": "hi ha un error d'execució",
+		"space_not_working": "\"L'Space no funciona perquè\" {0}",
+		"space_paused": "l'space està en pausa",
+		"use_via_api": "Utilitzar via API"
+	},
+	"file": {
+		"uploading": "Pujant..."
+	},
+	"highlighted_text": {
+		"highlighted_text": "Text ressaltat"
+	},
+	"image": {
+		"allow_webcam_access": "Si us plau, permeteu l'accés a la càmera web per gravar.",
+		"brush_color": "Color del pinzell",
+		"brush_radius": "Radi del pinzell",
+		"image": "Imatge",
+		"remove_image": "Eliminar imatge",
+		"select_brush_color": "Seleccionar color del pinzell",
+		"start_drawing": "Començar a dibuixar",
+		"use_brush": "Utilitzar pinzell"
+	},
+	"label": {
+		"label": "Etiqueta"
+	},
+	"login": {
+		"enable_cookies": "Si esteu visitant un Space de HuggingFace en mode Incògnit, heu d'habilitar les cookies de tercers.",
+		"incorrect_credentials": "Credencials incorrectes",
+		"username": "nom d'usuari",
+		"password": "contrasenya",
+		"login": "Iniciar sessió"
+	},
+	"number": {
+		"number": "Número"
+	},
+	"plot": {
+		"plot": "Gràfic"
+	},
+	"radio": {
+		"radio": "Ràdio"
+	},
+	"slider": {
+		"slider": "Control lliscant"
 	},
 	"upload_text": {
 		"click_to_upload": "Feu clic per pujar",
@@ -14,6 +123,8 @@
 		"drop_csv": "Deixeu anar el CSV aquí",
 		"drop_file": "Deixeu anar el fitxer aquí",
 		"drop_image": "Deixeu anar la imatge aquí",
-		"drop_video": "Deixeu anar el vídeo aquí"
+		"drop_video": "Deixeu anar el vídeo aquí",
+		"drop_gallery": "Deixeu anar els mitjans aquí",
+		"paste_clipboard": "Enganxar del porta-retalls"
 	}
 }