Add new i18n tokens (#1751)

* add new i18n tokens

* fixes

* fixes

* format

demo/blocks_xray/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.24\n",
+  "version": "3.1.1\n",
   "mode": "blocks",
   "dev_mode": true,
   "components": [
@@ -64,6 +64,7 @@
         "source": "upload",
         "tool": "editor",
         "streaming": false,
+        "mirror_webcam": true,
         "show_label": true,
         "name": "image",
         "visible": true,
@@ -127,6 +128,7 @@
         "source": "upload",
         "tool": "editor",
         "streaming": false,
+        "mirror_webcam": true,
         "show_label": true,
         "name": "image",
         "visible": true,
@@ -188,6 +190,7 @@
   ],
   "theme": "default",
   "css": null,
+  "title": "Gradio",
   "enable_queue": false,
   "layout": {
     "id": 0,
@@ -277,11 +280,11 @@
       "show_progress": true,
       "documentation": [
         [
-          "(List[str]): list of selected choices",
-          "(str | dict): base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data"
+          null,
+          null
         ],
         [
-          "(Dict | List): JSON output"
+          null
         ]
       ]
     },
@@ -306,11 +309,11 @@
       "show_progress": true,
       "documentation": [
         [
-          "(List[str]): list of selected choices",
-          "(str | dict): base64 url data, or (if tool == \"sketch) a dict of image and mask base64 url data"
+          null,
+          null
         ],
         [
-          "(Dict | List): JSON output"
+          null
         ]
       ]
     },

ui/packages/app/src/components/Gallery/Gallery.svelte

@@ -7,6 +7,7 @@
 	import type { Styles } from "@gradio/utils";
 	import { get_styles } from "@gradio/utils";
 	import { Image } from "@gradio/icons";
+	import { _ } from "svelte-i18n";
 
 	export let loading_status: LoadingStatus;
 	export let show_label: boolean;
@@ -160,7 +161,7 @@
 						/>
 					</button>
 				{:else}
-					<p>Empty</p>
+					<p>{$_("interface.empty")}</p>
 				{/each}
 			</div>
 		</div>

ui/packages/app/src/components/Json/Json.svelte

@@ -7,6 +7,7 @@
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { LoadingStatus } from "../StatusTracker/types";
 	import type { Styles } from "@gradio/utils";
+	import { _ } from "svelte-i18n";
 
 	export let elem_id: string = "";
 	export let visible: boolean = true;
@@ -37,7 +38,7 @@
 	<StatusTracker {...loading_status} />
 
 	{#if value && value !== '""'}
-		<JSON {value} />
+		<JSON {value} copy_to_clipboard={$_("interface.copy_to_clipboard")} />
 	{:else}
 		<div class="h-full min-h-[6rem] flex justify-center items-center">
 			<div class="h-7 dark:text-white opacity-50"><JSONIcon /></div>

ui/packages/app/src/lang/en.json

@@ -7,7 +7,11 @@
 		"drop_csv": "Drop CSV Here",
 		"click_to_upload": "Click to Upload",
 		"view_api": "view the api",
-		"built_with_Gradio": "built with gradio"
+		"built_with_Gradio": "built with gradio",
+		"copy_to_clipboard": "copy to clipboard",
+		"loading": "Loading",
+		"error": "ERROR",
+		"empty": "Empty"
 	},
 	"Submit": "Submit",
 	"Clear": "Clear",

ui/packages/json/src/JSON.svelte

@@ -4,6 +4,7 @@
 	import JSONNode from "./JSONNode.svelte";
 
 	export let value: any = {};
+	export let copy_to_clipboard: string = "copy to clipboard";
 
 	let copied = false;
 	let timer: NodeJS.Timeout;
@@ -32,7 +33,7 @@
 	on:click={handle_copy}
 	class="transition-color overflow-hidden font-sans absolute right-0 top-0  rounded-bl-lg shadow-sm text-xs text-gray-500 flex items-center  bg-white z-20 border-l border-b border-gray-100 dark:text-slate-200"
 >
-	<span class="py-1 px-2">copy to clipboard</span>
+	<span class="py-1 px-2">{copy_to_clipboard}</span>
 	{#if copied}
 		<span
 			in:fade={{ duration: 100 }}