Update i18n tokens and locale files (#5216)

* tokenize en strings in components and refactor en.json

* add changeset

* refactor more translation files

* more translation files

* tweak

* fix test

* fix other test

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/seven-cobras-brush.md

@@ -0,0 +1,27 @@
+---
+"@gradio/annotatedimage": minor
+"@gradio/app": minor
+"@gradio/atoms": minor
+"@gradio/audio": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/dataframe": minor
+"@gradio/dropdown": minor
+"@gradio/file": minor
+"@gradio/gallery": minor
+"@gradio/highlightedtext": minor
+"@gradio/image": minor
+"@gradio/label": minor
+"@gradio/model3d": minor
+"@gradio/number": minor
+"@gradio/plot": minor
+"@gradio/radio": minor
+"@gradio/slider": minor
+"@gradio/statustracker": minor
+"@gradio/upload": minor
+"gradio": minor
+---
+
+feat:Update i18n tokens and locale files

js/annotatedimage/static/AnnotatedImage.svelte

@@ -6,14 +6,14 @@
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { type FileData, normalise_file } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
-
+	import { _ } from "svelte-i18n";
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value: [FileData, [FileData, string][]] | null;
 	let old_value: [FileData, [FileData, string][]] | null;
 	let _value: [FileData, [FileData, string][]] | null;
-	export let label = "Annotated Image";
+	export let label = $_("annotated_image.annotated_image");
 	export let show_label = true;
 	export let show_legend = true;
 	export let height: number | undefined;
@@ -42,8 +42,8 @@
 				normalise_file(value[0], root, root_url) as FileData,
 				value[1].map(([file, _label]) => [
 					normalise_file(file, root, root_url) as FileData,
-					_label
-				])
+					_label,
+				]),
 			];
 		} else {
 			_value = null;
@@ -70,7 +70,7 @@
 	{min_width}
 >
 	<StatusTracker {...loading_status} />
-	<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
+	<BlockLabel {show_label} Icon={Image} label={label || $_("image.image")} />
 
 	<div class="container">
 		{#if _value == null}

js/app/src/Blocks.svelte

@@ -11,7 +11,7 @@
 		ComponentMeta,
 		Dependency,
 		LayoutNode,
-		Documentation
+		Documentation,
 	} from "./components/types";
 	import { setupi18n } from "./i18n";
 	import Render from "./Render.svelte";
@@ -53,7 +53,7 @@
 		props: { mode: "static" },
 		has_modes: false,
 		instance: {} as ComponentMeta["instance"],
-		component: {} as ComponentMeta["component"]
+		component: {} as ComponentMeta["component"],
 	};
 
 	components.push(rootNode);
@@ -125,13 +125,10 @@
 		);
 	}
 
-	let instance_map = components.reduce(
-		(acc, next) => {
-			acc[next.id] = next;
-			return acc;
-		},
-		{} as { [id: number]: ComponentMeta }
-	);
+	let instance_map = components.reduce((acc, next) => {
+		acc[next.id] = next;
+		return acc;
+	}, {} as { [id: number]: ComponentMeta });
 
 	type LoadedComponent = {
 		default: ComponentMeta["component"];
@@ -149,15 +146,15 @@
 			const c = await component_map[name][mode]();
 			return {
 				name,
-				component: c as LoadedComponent
+				component: c as LoadedComponent,
 			};
 		} catch (e) {
 			if (mode === "interactive") {
 				try {
 					const c = await component_map[name]["static"]();
 					return {
 						name,
-						component: c as LoadedComponent
+						component: c as LoadedComponent,
 					};
 				} catch (e) {
 					console.error(`failed to load: ${name}`);
@@ -305,7 +302,7 @@
 			message,
 			fn_index,
 			type,
-			id: ++_error_id
+			id: ++_error_id,
 		};
 	}
 
@@ -320,12 +317,9 @@
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
-	const DUPLICATE_MESSAGE =
-		"There is a long queue of requests pending. Duplicate this Space to skip.";
-	const MOBILE_QUEUE_WARNING =
-		"On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.";
-	const MOBILE_RECONNECT_MESSAGE =
-		"Lost connection due to leaving page. Rejoining queue...";
+	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
+	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
+	const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
 	const is_mobile_device =
@@ -359,7 +353,7 @@
 		let payload = {
 			fn_index: dep_index,
 			data: dep.inputs.map((id) => instance_map[id].props.value),
-			event_data: dep.collects_event_data ? event_data : null
+			event_data: dep.collects_event_data ? event_data : null,
 		};
 
 		if (dep.frontend_fn) {
@@ -395,7 +389,7 @@
 						...status,
 						status: status.stage,
 						progress: status.progress_data,
-						fn_index
+						fn_index,
 					});
 					if (
 						!showed_duplicate_message &&
@@ -408,7 +402,7 @@
 						showed_duplicate_message = true;
 						messages = [
 							new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
-							...messages
+							...messages,
 						];
 					}
 					if (
@@ -420,7 +414,7 @@
 						showed_mobile_warning = true;
 						messages = [
 							new_message(MOBILE_QUEUE_WARNING, fn_index, "warning"),
-							...messages
+							...messages,
 						];
 					}
 
@@ -437,7 +431,7 @@
 						window.setTimeout(() => {
 							messages = [
 								new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-								...messages
+								...messages,
 							];
 						}, 0);
 						trigger_api_call(dep_index, event_data);
@@ -450,7 +444,7 @@
 							);
 							messages = [
 								new_message(_message, fn_index, "error"),
-								...messages
+								...messages,
 							];
 						}
 						dependencies.map(async (dep, i) => {
@@ -515,7 +509,7 @@
 			let { targets, trigger, inputs, outputs } = dep;
 			const target_instances: [number, ComponentMeta][] = targets.map((t) => [
 				t,
-				instance_map[t]
+				instance_map[t],
 			]);
 
 			// page events
@@ -565,7 +559,7 @@
 					c.instance.$on("error", (event_data: any) => {
 						messages = [
 							new_message(event_data.detail, -1, "error"),
-							...messages
+							...messages,
 						];
 					});
 				}
@@ -650,7 +644,10 @@
 					}}
 					class="show-api"
 				>
-					Use via API <img src={api_logo} alt="" />
+					$_('errors.use_via_api') <img
+						src={api_logo}
+						alt={$_("common.logo")}
+					/>
 				</button>
 				<div>·</div>
 			{/if}
@@ -660,8 +657,8 @@
 				target="_blank"
 				rel="noreferrer"
 			>
-				Built with Gradio
-				<img src={logo} alt="logo" />
+				$_('common.built_with_gradio')
+				<img src={logo} alt={$_("common.logo")} />
 			</a>
 		</footer>
 	{/if}

js/app/src/Embed.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import space_logo from "./images/spaces.svg";
+	import { _ } from "svelte-i18n";
 	export let wrapper: HTMLDivElement;
 	export let version: string;
 	export let initial_height: string;
@@ -30,14 +31,14 @@
 				>
 			</span>
 			<span>
-				built with
+				$_('common.built_with')
 				<a class="gradio" href="https://gradio.app">Gradio</a>.
 			</span>
 			<span>
-				Hosted on
+				$_('common.hosted_on')
 				<a class="hf" href="https://huggingface.co/spaces"
 					><span class="space-logo">
-						<img src={space_logo} alt="Hugging Face space logo" />
+						<img src={space_logo} alt={`Hugging Face space ${$_("logo")}`} />
 					</span> Spaces</a
 				>
 			</span>

js/app/src/Index.svelte

@@ -5,7 +5,7 @@
 	import type {
 		ComponentMeta,
 		Dependency,
-		LayoutNode
+		LayoutNode,
 	} from "./components/types";
 
 	declare let BUILD_MODE: string;
@@ -66,6 +66,10 @@
 	import Embed from "./Embed.svelte";
 	import type { ThemeMode } from "./components/types";
 	import { StatusTracker } from "@gradio/statustracker";
+	import { _ } from "svelte-i18n";
+	import { setupi18n } from "./i18n";
+
+	setupi18n();
 
 	export let autoscroll: boolean;
 	export let version: string;
@@ -95,7 +99,7 @@
 	let wrapper: HTMLDivElement;
 	let ready = false;
 	let config: Config;
-	let loading_text = "Loading...";
+	let loading_text = $_("common.loading") + "...";
 	let active_theme_mode: ThemeMode;
 
 	async function mount_custom_css(
@@ -183,7 +187,7 @@
 		message: "",
 		load_status: "pending",
 		status: "sleeping",
-		detail: "SLEEPING"
+		detail: "SLEEPING",
 	};
 
 	let app: Awaited<ReturnType<typeof client>>;
@@ -203,7 +207,7 @@
 
 		app = await client(api_url, {
 			status_callback: handle_status,
-			normalise_files: false
+			normalise_files: false,
 		});
 		config = app.config;
 		window.__gradio_space__ = config.space_id;
@@ -212,7 +216,7 @@
 			message: "",
 			load_status: "complete",
 			status: "running",
-			detail: "RUNNING"
+			detail: "RUNNING",
 		};
 
 		await mount_custom_css(wrapper, config.css);
@@ -257,28 +261,25 @@
 		| "RUNTIME_ERROR"
 		| "PAUSED";
 
+	// todo @hannahblair: translate these messages
 	const discussion_message = {
 		readable_error: {
-			NO_APP_FILE: "there is no app file",
-			CONFIG_ERROR: "there is a config error",
-			BUILD_ERROR: "there is a build error",
-			RUNTIME_ERROR: "there is a runtime error",
-			PAUSED: "the space is paused"
+			NO_APP_FILE: $_("errors.no_app_file"),
+			CONFIG_ERROR: $_("errors.config_error"),
+			BUILD_ERROR: $_("errors.build_error"),
+			RUNTIME_ERROR: $_("errors.runtime_error"),
+			PAUSED: $_("errors.space_paused"),
 		} as const,
 		title(error: error_types): string {
-			return encodeURIComponent(
-				`Space isn't working because ${
-					this.readable_error[error] || "an error"
-				}`
-			);
+			return encodeURIComponent($_("errors.space_not_working"));
 		},
 		description(error: error_types, site: string): string {
 			return encodeURIComponent(
 				`Hello,\n\nFirstly, thanks for creating this space!\n\nI noticed that the space isn't working correctly because there is ${
 					this.readable_error[error] || "an error"
 				}.\n\nIt would be great if you could take a look at this because this space is being embedded on ${site}.\n\nThanks!`
 			);
-		}
+		},
 	};
 
 	onMount(async () => {
@@ -306,6 +307,7 @@
 			translucent={true}
 			{loading_text}
 		>
+			<!-- todo: translate message text -->
 			<div class="error" slot="error">
 				<p><strong>{status?.message || ""}</strong></p>
 				{#if (status.status === "space_error" || status.status === "paused") && status.discussions_enabled}
@@ -322,7 +324,7 @@
 						> to let them know.
 					</p>
 				{:else}
-					<p>Please contact the author of the page to let them know.</p>
+					<p>{$_("errors.contact_page_author")}</p>
 				{/if}
 			</div>
 		</StatusTracker>