diff --git a/gradio/templates/frontend/lang/en.json b/gradio/templates/frontend/lang/en.json new file mode 100644 index 0000000000..25e71bfe3d --- /dev/null +++ b/gradio/templates/frontend/lang/en.json @@ -0,0 +1,14 @@ +{ + "interface": { + "submit": "Submit", + "clear": "Clear", + "interpret": "Interpret", + "flag": "Flag", + "examples": "Examples", + "drop_image": "Drop Image Here", + "or": "or", + "click_to_upload": "Click to Upload", + "view_api": "view the api", + "built_with_Gradio": "built with gradio" + } +} diff --git a/gradio/templates/frontend/lang/es.json b/gradio/templates/frontend/lang/es.json new file mode 100644 index 0000000000..d158c35887 --- /dev/null +++ b/gradio/templates/frontend/lang/es.json @@ -0,0 +1,14 @@ +{ + "interface": { + "submit": "Enviar", + "clear": "Limpiar", + "interpret": "Interpretar", + "flag": "Avisar", + "examples": "Ejemplos", + "drop_image": "Coloque la Imagen Aquí", + "or": "o", + "click_to_upload": "Haga Clic para Cargar", + "view_api": "Para ver la API", + "built_with_Gradio": "Construido con Gradio" + } +} diff --git a/ui/package.json b/ui/package.json index b85dcffa1f..93c56b86c0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -19,6 +19,7 @@ "prettier-plugin-svelte": "^2.6.0", "svelte": "^3.46.3", "svelte-check": "^2.4.1", + "svelte-i18n": "^3.3.13", "vitest": "^0.3.2" } } diff --git a/ui/packages/app/public/lang/en.json b/ui/packages/app/public/lang/en.json new file mode 100644 index 0000000000..fea6961c71 --- /dev/null +++ b/ui/packages/app/public/lang/en.json @@ -0,0 +1,18 @@ +{ + "interface": { + "submit": "Submit", + "clear": "Clear", + "interpret": "Interpret", + "flag": "Flag", + "examples": "Examples", + "drop_image": "Drop Image Here", + "drop_video": "Drop Video Here", + "drop_audio": "Drop Audio Here", + "drop_file": "Drop File Here", + "drop_csv": "Drop CSV Here", + "or": "or", + "click_to_upload": "Click to Upload", + "view_api": "view the api", + "built_with_Gradio": "built with gradio" + } +} diff --git a/ui/packages/app/public/lang/es.json b/ui/packages/app/public/lang/es.json new file mode 100644 index 0000000000..04d250d986 --- /dev/null +++ b/ui/packages/app/public/lang/es.json @@ -0,0 +1,18 @@ +{ + "interface": { + "submit": "Enviar", + "clear": "Limpiar", + "interpret": "Interpretar", + "flag": "Avisar", + "examples": "Ejemplos", + "drop_image": "Coloque la Imagen Aquí", + "drop_video": "Coloque la Video Aquí", + "drop_audio": "Coloque la Audio Aquí", + "drop_file": "Coloque la Archivo Aquí", + "drop_csv": "Coloque el CSV Aquí", + "or": "o", + "click_to_upload": "Haga Clic para Cargar", + "view_api": "Para ver la API", + "built_with_Gradio": "Construido con Gradio" + } +} diff --git a/ui/packages/app/src/App.svelte b/ui/packages/app/src/App.svelte index 0bee01752f..1a780eb6cb 100644 --- a/ui/packages/app/src/App.svelte +++ b/ui/packages/app/src/App.svelte @@ -13,6 +13,9 @@ import "./themes/grass.css"; import "./themes/peach.css"; import "./themes/seafoam.css"; + import { _ } from "svelte-i18n"; + import { setupi18n } from "./i18n"; + setupi18n(); interface Component { name: string; @@ -99,17 +102,18 @@ class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 justify-center py-2" > - view the api + {$_("interface.view_api")} api • - built with logo diff --git a/ui/packages/app/src/ExampleSet.svelte b/ui/packages/app/src/ExampleSet.svelte index 018d6a72b3..317a70c033 100644 --- a/ui/packages/app/src/ExampleSet.svelte +++ b/ui/packages/app/src/ExampleSet.svelte @@ -1,5 +1,6 @@
-

Examples

+

{$_("interface.examples")}

- Clear + {$_("interface.clear")}
@@ -295,7 +296,7 @@ {#if interpret_mode} Hide {:else} - Interpret + {$_("interface.interpret")} {/if} {/if} @@ -304,7 +305,7 @@ class="panel-button flag bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none" on:click={flag} > - Flag + {$_("interface.flag")} {/if} diff --git a/ui/packages/app/src/components/input/Audio/Audio.svelte b/ui/packages/app/src/components/input/Audio/Audio.svelte index 33f1055e6d..fb483a8774 100644 --- a/ui/packages/app/src/components/input/Audio/Audio.svelte +++ b/ui/packages/app/src/components/input/Audio/Audio.svelte @@ -6,6 +6,7 @@ import ModifyUpload from "../../utils/ModifyUpload.svelte"; //@ts-ignore import Range from "svelte-range-slider-pips"; + import { _ } from "svelte-i18n"; export let value: null | Value; export let setValue: (val: typeof value) => typeof value; @@ -135,9 +136,9 @@ {/if} {:else if source === "upload"} - Drop Audio Here -
- or -
- Click to Upload + {$_("interface.drop_audio")} +
- {$_("interface.or")} -
+ {$_("interface.click_to_upload")} {/if} {:else} diff --git a/ui/packages/app/src/components/input/File/File.svelte b/ui/packages/app/src/components/input/File/File.svelte index fb0cc6d3df..deefcf13a0 100644 --- a/ui/packages/app/src/components/input/File/File.svelte +++ b/ui/packages/app/src/components/input/File/File.svelte @@ -3,6 +3,7 @@ import Upload from "../../utils/Upload.svelte"; import ModifyUpload from "../../utils/ModifyUpload.svelte"; import { prettyBytes } from "../../utils/helpers"; + import { _ } from "svelte-i18n"; export let value: null | FileData; export let setValue: ( @@ -15,9 +16,9 @@
{#if value === null} - Drop File Here -
- or -
- Click to Upload + {$_("interface.drop_file")} +
- {$_("interface.or")} -
+ {$_("interface.click_to_upload")} {:else}
typeof value; export let theme: string; @@ -60,9 +61,9 @@ include_file_metadata={false} {theme} > - Drop Image Here -
- or -
- Click to Upload + {$_("interface.drop_image")} +
- {$_("interface.or")} -
+ {$_("interface.click_to_upload")} {:else if source === "webcam"} setValue(detail)} {static_src} /> diff --git a/ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte b/ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte index 0b17be5f90..d8066e2a36 100644 --- a/ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte +++ b/ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte @@ -1,6 +1,7 @@