@gradio/core 0.14.1 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @gradio/core
 
+## 0.15.1
+
+### Fixes
+
+- [#11088](https://github.com/gradio-app/gradio/pull/11088) [`a5105cc`](https://github.com/gradio-app/gradio/commit/a5105cccd6ca0682bd206608a080e24d69dad136) - fix: ensure all translation files work as expected.  Thanks @Col0ring!
+
+### Dependency updates
+
+- @gradio/gallery@0.15.17
+- @gradio/button@0.4.17
+- @gradio/video@0.14.12
+- @gradio/image@0.22.4
+
+## 0.15.0
+
+### Features
+
+- [#11027](https://github.com/gradio-app/gradio/pull/11027) [`eff532b`](https://github.com/gradio-app/gradio/commit/eff532b913a3c8f06f10a4f9471d3177e3744053) - Add new `ImageSlider` component.  Thanks @pngwn!
+
+### Fixes
+
+- [#11049](https://github.com/gradio-app/gradio/pull/11049) [`8d2aa3e`](https://github.com/gradio-app/gradio/commit/8d2aa3e99e165413bae1d8f5f3b4630e870308f5) - Ensure translations work as expected.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/code@0.14.2
+- @gradio/paramviewer@0.7.8
+- @gradio/statustracker@0.10.10
+- @gradio/image@0.22.3
+- @gradio/upload@0.16.3
+- @gradio/button@0.4.16
+- @gradio/video@0.14.11
+- @gradio/atoms@0.16.0
+- @gradio/column@0.2.0
+- @gradio/gallery@0.15.16
+- @gradio/plot@0.9.15
+- @gradio/textbox@0.10.10
+- @gradio/checkbox@0.4.20
+- @gradio/file@0.12.16
+
 ## 0.14.1
 
 ### Fixes

package/dist/src/gradio_helper.d.ts

@@ -0,0 +1,14 @@
+export { Gradio } from "@gradio/utils";
+export type I18nFormatter = typeof formatter;
+/**
+ * i18n formatter with fallback to svelte-i18n's format function.
+ *
+ * @param value - The string to translate or format
+ * @returns The translated string
+ *
+ * This formatter attempts translation in the following order:
+ * 1. Direct translation of the input string
+ * 2. Checks if input matches any common key names
+ * 3. Falls back to svelte-i18n's format function
+ */
+export declare function formatter(value: string | null | undefined): string;

package/dist/src/gradio_helper.js

@@ -1,4 +1,44 @@
-import { format } from "svelte-i18n";
+import { format, _ } from "svelte-i18n";
 import { get } from "svelte/store";
+import { all_common_keys } from "./i18n";
 export { Gradio } from "@gradio/utils";
-export const formatter = get(format);
+/**
+ * i18n formatter with fallback to svelte-i18n's format function.
+ *
+ * @param value - The string to translate or format
+ * @returns The translated string
+ *
+ * This formatter attempts translation in the following order:
+ * 1. Direct translation of the input string
+ * 2. Checks if input matches any common key names
+ * 3. Falls back to svelte-i18n's format function
+ */
+export function formatter(value) {
+    if (value == null) {
+        return "";
+    }
+    const string_value = String(value);
+    const translate = get(_);
+    const initial_formatter = get(format);
+    let direct_translation = translate(string_value);
+    if (direct_translation !== string_value) {
+        return direct_translation;
+    }
+    const lower_value = string_value.toLowerCase();
+    for (const common_key of all_common_keys) {
+        const key_name = common_key.substring(common_key.indexOf(".") + 1);
+        if (lower_value === key_name) {
+            const translation = translate(common_key);
+            if (translation !== common_key) {
+                return translation;
+            }
+            break;
+        }
+    }
+    // fall back to the svelte-i18n formatter to maintain compatibility
+    const formatted = initial_formatter(string_value);
+    if (formatted !== string_value) {
+        return formatted;
+    }
+    return string_value;
+}

package/dist/src/i18n.d.ts

@@ -3,6 +3,7 @@ type LangsRecord = Record<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(): Promise<void>;
 export declare function changeLocale(new_locale: string): void;
 export {};

package/dist/src/i18n.js

@@ -1,4 +1,4 @@
-import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
+import { addMessages, init, getLocaleFromNavigator, locale, _ } from "svelte-i18n";
 const langs = import.meta.glob("./lang/*.json", {
     eager: true
 });
@@ -13,6 +13,7 @@ export function process_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]);
+export let all_common_keys = new Set();
 for (const lang in processed_langs) {
     addMessages(lang, processed_langs[lang]);
 }
@@ -22,13 +23,31 @@ export async function setupi18n() {
         return;
     }
     const browser_locale = getLocaleFromNavigator();
-    const initial_locale = browser_locale && available_locales.includes(browser_locale)
+    let initial_locale = browser_locale && available_locales.includes(browser_locale)
         ? browser_locale
-        : "en";
+        : null;
+    if (!initial_locale) {
+        const normalized_locale = browser_locale?.split("-")[0];
+        initial_locale =
+            normalized_locale && available_locales.includes(normalized_locale)
+                ? normalized_locale
+                : "en";
+    }
     await init({
         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) {

package/dist/src/lang/en.json

@@ -68,7 +68,8 @@
 		"no_devices": "No devices found",
 		"language": "Language",
 		"display_theme": "Display Theme",
-		"pwa": "Progressive Web App"
+		"pwa": "Progressive Web App",
+		"run": "Run"
 	},
 	"dataframe": {
 		"incorrect_format": "Incorrect format, only CSV and TSV files are supported",

package/dist/src/lang/es.json

@@ -46,6 +46,7 @@
 		"edit": "Editar",
 		"empty": "Vacío",
 		"error": "Error",
+		"flag": "Marcar",
 		"hosted_on": "Alojado en",
 		"loading": "Cargando",
 		"logo": "logo",

package/dist/src/lang/fr.json

@@ -45,6 +45,7 @@
 		"download": "Télécharger",
 		"edit": "Modifier",
 		"empty": "Vide",
+		"flag": "Marquer",
 		"error": "Erreur",
 		"hosted_on": "Hébergé sur",
 		"loading": "Chargement",
@@ -58,7 +59,8 @@
 		"no_devices": "Aucun périphérique trouvé",
 		"language": "Langue",
 		"display_theme": "Thème d'affichage",
-		"pwa": "Application web progressive"
+		"pwa": "Application web progressive",
+		"run": "Exécuter"
 	},
 	"dataframe": {
 		"incorrect_format": "Format incorrect, seuls les fichiers CSV et TSV sont pris en charge",

package/dist/src/stories/I18nMultiLanguageTest.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/svelte";
+import I18nMultiLanguageTestComponent from "./I18nMultiLanguageTestComponent.svelte";
+declare const meta: {
+    title: string;
+    component: typeof I18nMultiLanguageTestComponent;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/stories/I18nMultiLanguageTest.stories.js

@@ -0,0 +1,12 @@
+import I18nMultiLanguageTestComponent from "./I18nMultiLanguageTestComponent.svelte";
+const meta = {
+    title: "Core/I18n Multi-Language Test",
+    component: I18nMultiLanguageTestComponent,
+    parameters: {
+        layout: "centered"
+    }
+};
+export default meta;
+export const Default = {
+    args: {}
+};

package/dist/src/stories/I18nMultiLanguageTestComponent.svelte

@@ -0,0 +1,107 @@
+<script>import { formatter } from "../gradio_helper";
+import I18nTestSetup from "./I18nTestSetup.svelte";
+const testStrings = ["share", "submit", "clear", "flag", "error"];
+</script>
+
+<I18nTestSetup />
+
+<div class="i18n-multi-language-container">
+	<h2>I18n Formatter Test</h2>
+
+	<div class="translation-table">
+		<div class="table-header">
+			<div class="col">String Key</div>
+			<div class="col">Common Key</div>
+			<div class="col">Formatted Output</div>
+		</div>
+
+		{#each testStrings as str}
+			<div class="table-row">
+				<div class="col key">{str}</div>
+				<div class="col key">common.{str}</div>
+				<div class="col result">{formatter(str)}</div>
+			</div>
+		{/each}
+	</div>
+
+	<div class="instructions">
+		<h3>Testing</h3>
+		Use the&nbsp;<strong>Locale</strong> selector in the toolbar to change languages
+		and refresh
+	</div>
+</div>
+
+<style>
+	.i18n-multi-language-container {
+		padding: 2rem;
+		border-radius: 0.5rem;
+		border: 1px solid #e2e8f0;
+		margin: 1rem;
+		max-width: 700px;
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+
+	h2 {
+		margin-top: 0;
+		margin-bottom: 1rem;
+		font-size: 1.5rem;
+		font-weight: 600;
+	}
+
+	h3 {
+		font-size: 1.1rem;
+		font-weight: 600;
+		margin-bottom: 0.75rem;
+	}
+
+	.translation-table {
+		border: 1px solid #e2e8f0;
+		border-radius: 0.5rem;
+		overflow: hidden;
+		margin-bottom: 1.5rem;
+	}
+
+	.table-header {
+		display: flex;
+		background-color: #f8fafc;
+		font-weight: 600;
+		border-bottom: 1px solid #e2e8f0;
+	}
+
+	.table-row {
+		display: flex;
+		border-bottom: 1px solid #e2e8f0;
+	}
+
+	.table-row:last-child {
+		border-bottom: none;
+	}
+
+	.col {
+		padding: 0.75rem 1rem;
+		flex: 1;
+	}
+
+	.col:not(:last-child) {
+		border-right: 1px solid #e2e8f0;
+	}
+
+	.key {
+		font-family: monospace;
+		background-color: #f8fafc;
+	}
+
+	.result {
+		font-weight: 500;
+	}
+
+	.instructions {
+		padding: 1rem;
+		background-color: #f0f9ff;
+		border-radius: 0.5rem;
+		font-size: 0.9rem;
+	}
+</style>

package/dist/src/stories/I18nMultiLanguageTestComponent.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type I18nMultiLanguageTestComponentProps = typeof __propDef.props;
+export type I18nMultiLanguageTestComponentEvents = typeof __propDef.events;
+export type I18nMultiLanguageTestComponentSlots = typeof __propDef.slots;
+export default class I18nMultiLanguageTestComponent extends SvelteComponent<I18nMultiLanguageTestComponentProps, I18nMultiLanguageTestComponentEvents, I18nMultiLanguageTestComponentSlots> {
+}
+export {};

package/dist/src/stories/I18nTestSetup.svelte

@@ -0,0 +1,29 @@
+<script>import { onMount } from "svelte";
+import { init, _ } from "svelte-i18n";
+export let active = true;
+onMount(async () => {
+  if (!active)
+    return;
+  await init({
+    fallbackLocale: "en",
+    initialLocale: "en"
+  });
+});
+</script>
+
+{#if active}
+	<div class="i18n-test-setup">
+		<p>i18n test setup active - translations loaded for: en, fr, de, es, ar</p>
+	</div>
+{/if}
+
+<style>
+	.i18n-test-setup {
+		font-size: 0.75rem;
+		color: #94a3b8;
+		margin-bottom: 0.5rem;
+		padding: 0.5rem;
+		background-color: #f1f5f9;
+		border-radius: 0.25rem;
+	}
+</style>

package/dist/src/stories/I18nTestSetup.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        active?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type I18nTestSetupProps = typeof __propDef.props;
+export type I18nTestSetupEvents = typeof __propDef.events;
+export type I18nTestSetupSlots = typeof __propDef.slots;
+export default class I18nTestSetup extends SvelteComponent<I18nTestSetupProps, I18nTestSetupEvents, I18nTestSetupSlots> {
+}
+export {};

package/package.json

@@ -1,67 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.13",
-    "@gradio/annotatedimage": "^0.9.16",
-    "@gradio/audio": "^0.17.10",
-    "@gradio/button": "^0.4.15",
-    "@gradio/chatbot": "^0.26.1",
-    "@gradio/box": "^0.2.17",
-    "@gradio/checkbox": "^0.4.19",
-    "@gradio/atoms": "^0.15.2",
-    "@gradio/checkboxgroup": "^0.6.19",
+    "@gradio/accordion": "^0.5.14",
+    "@gradio/atoms": "^0.16.0",
+    "@gradio/audio": "^0.17.12",
+    "@gradio/button": "^0.4.17",
+    "@gradio/chatbot": "^0.26.3",
+    "@gradio/checkbox": "^0.4.20",
+    "@gradio/checkboxgroup": "^0.6.20",
+    "@gradio/box": "^0.2.18",
     "@gradio/client": "^1.14.2",
-    "@gradio/colorpicker": "^0.4.19",
-    "@gradio/code": "^0.14.1",
+    "@gradio/code": "^0.14.2",
+    "@gradio/colorpicker": "^0.4.20",
     "@gradio/column": "^0.2.0",
-    "@gradio/dataframe": "^0.17.8",
-    "@gradio/dataset": "^0.4.15",
-    "@gradio/downloadbutton": "^0.3.15",
-    "@gradio/datetime": "^0.3.11",
-    "@gradio/dropdown": "^0.9.19",
-    "@gradio/file": "^0.12.15",
-    "@gradio/fallback": "^0.4.19",
-    "@gradio/fileexplorer": "^0.5.26",
-    "@gradio/form": "^0.2.17",
-    "@gradio/gallery": "^0.15.15",
+    "@gradio/datetime": "^0.3.12",
+    "@gradio/dataframe": "^0.17.10",
+    "@gradio/downloadbutton": "^0.3.17",
+    "@gradio/dataset": "^0.4.16",
+    "@gradio/dropdown": "^0.9.20",
+    "@gradio/fallback": "^0.4.20",
+    "@gradio/file": "^0.12.16",
+    "@gradio/fileexplorer": "^0.5.27",
+    "@gradio/form": "^0.2.18",
+    "@gradio/annotatedimage": "^0.9.17",
+    "@gradio/gallery": "^0.15.17",
     "@gradio/group": "^0.2.0",
-    "@gradio/highlightedtext": "^0.9.2",
-    "@gradio/html": "^0.6.10",
+    "@gradio/highlightedtext": "^0.9.3",
+    "@gradio/html": "^0.6.11",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.2",
-    "@gradio/json": "^0.5.19",
-    "@gradio/label": "^0.5.11",
-    "@gradio/imageeditor": "^0.14.2",
-    "@gradio/markdown": "^0.13.9",
+    "@gradio/image": "^0.22.4",
+    "@gradio/imageslider": "^0.2.0",
+    "@gradio/imageeditor": "^0.14.4",
+    "@gradio/json": "^0.5.20",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/multimodaltextbox": "^0.10.2",
-    "@gradio/model3d": "^0.14.10",
-    "@gradio/nativeplot": "^0.5.13",
-    "@gradio/number": "^0.5.19",
-    "@gradio/paramviewer": "^0.7.7",
-    "@gradio/plot": "^0.9.14",
-    "@gradio/radio": "^0.7.2",
-    "@gradio/sidebar": "^0.1.11",
+    "@gradio/markdown": "^0.13.10",
+    "@gradio/label": "^0.5.12",
+    "@gradio/multimodaltextbox": "^0.10.4",
+    "@gradio/model3d": "^0.14.11",
+    "@gradio/nativeplot": "^0.5.14",
+    "@gradio/number": "^0.5.20",
+    "@gradio/plot": "^0.9.15",
+    "@gradio/paramviewer": "^0.7.8",
+    "@gradio/radio": "^0.7.3",
     "@gradio/row": "^0.2.1",
-    "@gradio/simpledropdown": "^0.3.19",
-    "@gradio/simpleimage": "^0.8.26",
-    "@gradio/sketchbox": "^0.6.6",
-    "@gradio/simpletextbox": "^0.3.19",
+    "@gradio/sidebar": "^0.1.12",
+    "@gradio/simpledropdown": "^0.3.20",
+    "@gradio/simpleimage": "^0.8.27",
+    "@gradio/sketchbox": "^0.6.7",
+    "@gradio/simpletextbox": "^0.3.20",
+    "@gradio/slider": "^0.6.8",
     "@gradio/state": "^0.1.2",
-    "@gradio/statustracker": "^0.10.9",
+    "@gradio/statustracker": "^0.10.10",
     "@gradio/tabitem": "^0.4.3",
-    "@gradio/slider": "^0.6.7",
     "@gradio/tabs": "^0.4.3",
+    "@gradio/textbox": "^0.10.10",
     "@gradio/theme": "^0.4.0",
-    "@gradio/textbox": "^0.10.9",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.2",
-    "@gradio/uploadbutton": "^0.8.15",
-    "@gradio/utils": "^0.10.2",
+    "@gradio/upload": "^0.16.3",
+    "@gradio/uploadbutton": "^0.8.17",
+    "@gradio/video": "^0.14.12",
     "@gradio/wasm": "^0.18.1",
-    "@gradio/video": "^0.14.10"
+    "@gradio/utils": "^0.10.2"
   },
   "msw": {
     "workerDirectory": "public"

package/src/gradio_helper.ts

@@ -1,7 +1,55 @@
-import { format } from "svelte-i18n";
+import { format, _ } from "svelte-i18n";
 import { get } from "svelte/store";
+import { all_common_keys } from "./i18n";
+
 export { Gradio } from "@gradio/utils";
+export type I18nFormatter = typeof formatter;
 
-export const formatter = get(format);
+/**
+ * i18n formatter with fallback to svelte-i18n's format function.
+ *
+ * @param value - The string to translate or format
+ * @returns The translated string
+ *
+ * This formatter attempts translation in the following order:
+ * 1. Direct translation of the input string
+ * 2. Checks if input matches any common key names
+ * 3. Falls back to svelte-i18n's format function
+ */
+export function formatter(value: string | null | undefined): string {
+	if (value == null) {
+		return "";
+	}
+	const string_value = String(value);
+	const translate = get(_);
+	const initial_formatter = get(format);
 
-export type I18nFormatter = typeof formatter;
+	let direct_translation = translate(string_value);
+
+	if (direct_translation !== string_value) {
+		return direct_translation;
+	}
+
+	const lower_value = string_value.toLowerCase();
+
+	for (const common_key of all_common_keys) {
+		const key_name = common_key.substring(common_key.indexOf(".") + 1);
+
+		if (lower_value === key_name) {
+			const translation = translate(common_key);
+
+			if (translation !== common_key) {
+				return translation;
+			}
+			break;
+		}
+	}
+
+	// fall back to the svelte-i18n formatter to maintain compatibility
+	const formatted = initial_formatter(string_value);
+	if (formatted !== string_value) {
+		return formatted;
+	}
+
+	return string_value;
+}

package/src/i18n.ts

@@ -1,4 +1,10 @@
-import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
+import {
+	addMessages,
+	init,
+	getLocaleFromNavigator,
+	locale,
+	_
+} from "svelte-i18n";
 
 const langs = import.meta.glob("./lang/*.json", {
 	eager: true
@@ -29,6 +35,8 @@ export const language_choices: [string, string][] = Object.entries(
 	processed_langs
 ).map(([code, data]) => [data._name || code, code]);
 
+export let all_common_keys: Set<string> = new Set();
+
 for (const lang in processed_langs) {
 	addMessages(lang, processed_langs[lang]);
 }
@@ -41,16 +49,39 @@ export async function setupi18n(): Promise<void> {
 	}
 
 	const browser_locale = getLocaleFromNavigator();
-	const initial_locale =
+
+	let initial_locale =
 		browser_locale && available_locales.includes(browser_locale)
 			? browser_locale
-			: "en";
+			: null;
+
+	if (!initial_locale) {
+		const normalized_locale = browser_locale?.split("-")[0];
+		initial_locale =
+			normalized_locale && available_locales.includes(normalized_locale)
+				? normalized_locale
+				: "en";
+	}
 
 	await init({
 		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;
 }
 

package/src/lang/en.json

@@ -68,7 +68,8 @@
 		"no_devices": "No devices found",
 		"language": "Language",
 		"display_theme": "Display Theme",
-		"pwa": "Progressive Web App"
+		"pwa": "Progressive Web App",
+		"run": "Run"
 	},
 	"dataframe": {
 		"incorrect_format": "Incorrect format, only CSV and TSV files are supported",

package/src/lang/es.json

@@ -46,6 +46,7 @@
 		"edit": "Editar",
 		"empty": "Vacío",
 		"error": "Error",
+		"flag": "Marcar",
 		"hosted_on": "Alojado en",
 		"loading": "Cargando",
 		"logo": "logo",

package/src/lang/fr.json

@@ -45,6 +45,7 @@
 		"download": "Télécharger",
 		"edit": "Modifier",
 		"empty": "Vide",
+		"flag": "Marquer",
 		"error": "Erreur",
 		"hosted_on": "Hébergé sur",
 		"loading": "Chargement",
@@ -58,7 +59,8 @@
 		"no_devices": "Aucun périphérique trouvé",
 		"language": "Langue",
 		"display_theme": "Thème d'affichage",
-		"pwa": "Application web progressive"
+		"pwa": "Application web progressive",
+		"run": "Exécuter"
 	},
 	"dataframe": {
 		"incorrect_format": "Format incorrect, seuls les fichiers CSV et TSV sont pris en charge",

package/src/stories/I18nMultiLanguageTest.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/svelte";
+import I18nMultiLanguageTestComponent from "./I18nMultiLanguageTestComponent.svelte";
+
+const meta = {
+	title: "Core/I18n Multi-Language Test",
+	component: I18nMultiLanguageTestComponent,
+	parameters: {
+		layout: "centered"
+	}
+} satisfies Meta<I18nMultiLanguageTestComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {}
+};

package/src/stories/I18nMultiLanguageTestComponent.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { formatter } from "../gradio_helper";
+	import I18nTestSetup from "./I18nTestSetup.svelte";
+
+	const testStrings = ["share", "submit", "clear", "flag", "error"];
+</script>
+
+<I18nTestSetup />
+
+<div class="i18n-multi-language-container">
+	<h2>I18n Formatter Test</h2>
+
+	<div class="translation-table">
+		<div class="table-header">
+			<div class="col">String Key</div>
+			<div class="col">Common Key</div>
+			<div class="col">Formatted Output</div>
+		</div>
+
+		{#each testStrings as str}
+			<div class="table-row">
+				<div class="col key">{str}</div>
+				<div class="col key">common.{str}</div>
+				<div class="col result">{formatter(str)}</div>
+			</div>
+		{/each}
+	</div>
+
+	<div class="instructions">
+		<h3>Testing</h3>
+		Use the&nbsp;<strong>Locale</strong> selector in the toolbar to change languages
+		and refresh
+	</div>
+</div>
+
+<style>
+	.i18n-multi-language-container {
+		padding: 2rem;
+		border-radius: 0.5rem;
+		border: 1px solid #e2e8f0;
+		margin: 1rem;
+		max-width: 700px;
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+
+	h2 {
+		margin-top: 0;
+		margin-bottom: 1rem;
+		font-size: 1.5rem;
+		font-weight: 600;
+	}
+
+	h3 {
+		font-size: 1.1rem;
+		font-weight: 600;
+		margin-bottom: 0.75rem;
+	}
+
+	.translation-table {
+		border: 1px solid #e2e8f0;
+		border-radius: 0.5rem;
+		overflow: hidden;
+		margin-bottom: 1.5rem;
+	}
+
+	.table-header {
+		display: flex;
+		background-color: #f8fafc;
+		font-weight: 600;
+		border-bottom: 1px solid #e2e8f0;
+	}
+
+	.table-row {
+		display: flex;
+		border-bottom: 1px solid #e2e8f0;
+	}
+
+	.table-row:last-child {
+		border-bottom: none;
+	}
+
+	.col {
+		padding: 0.75rem 1rem;
+		flex: 1;
+	}
+
+	.col:not(:last-child) {
+		border-right: 1px solid #e2e8f0;
+	}
+
+	.key {
+		font-family: monospace;
+		background-color: #f8fafc;
+	}
+
+	.result {
+		font-weight: 500;
+	}
+
+	.instructions {
+		padding: 1rem;
+		background-color: #f0f9ff;
+		border-radius: 0.5rem;
+		font-size: 0.9rem;
+	}
+</style>

package/src/stories/I18nTestSetup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { init, _ } from "svelte-i18n";
+
+	export let active = true;
+
+	onMount(async () => {
+		if (!active) return;
+
+		await init({
+			fallbackLocale: "en",
+			initialLocale: "en"
+		});
+	});
+</script>
+
+{#if active}
+	<div class="i18n-test-setup">
+		<p>i18n test setup active - translations loaded for: en, fr, de, es, ar</p>
+	</div>
+{/if}
+
+<style>
+	.i18n-test-setup {
+		font-size: 0.75rem;
+		color: #94a3b8;
+		margin-bottom: 0.5rem;
+		padding: 0.5rem;
+		background-color: #f1f5f9;
+		border-radius: 0.25rem;
+	}
+</style>