Gradio Agents & MCP Hackathon
Winners
- Additional Features
- Internationalization
Related spaces:
Internationalization (i18n)
Gradio comes with ready-to-use internationalization (i18n) support:
- Built-in translations: Gradio automatically translates standard UI elements (like "Submit", "Clear", "Cancel") in more than 40 languages based on the user's browser locale.
- Custom translations: For app-specific text, Gradio provides the I18n class that lets you extend the built-in system with your own translations.
Setting Up Translations%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)
You can initialize the I18n class with multiple language dictionaries to add custom translations:
import gradio as gr
# Create an I18n instance with translations for multiple languages
i18n = gr.I18n(
en={"greeting": "Hello, welcome to my app!", "submit": "Submit"},
es={"greeting": "¡Hola, bienvenido a mi aplicación!", "submit": "Enviar"},
fr={"greeting": "Bonjour, bienvenue dans mon application!", "submit": "Soumettre"}
)
with gr.Blocks() as demo:
# Use the i18n method to translate the greeting
gr.Markdown(i18n("greeting"))
with gr.Row():
input_text = gr.Textbox(label="Input")
output_text = gr.Textbox(label="Output")
submit_btn = gr.Button(i18n("submit"))
# Pass the i18n instance to the launch method
demo.launch(i18n=i18n)How It Works
When you use the i18n instance with a translation key, Gradio will show the corresponding translation to users based on their browser's language settings or the language they've selected in your app.
If a translation isn't available for the user's locale, the system will fall back to English (if available) or display the key itself.
Valid Locale Codes
Locale codes should follow the BCP 47 format (e.g., 'en', 'en-US', 'zh-CN'). The I18n class will warn you if you use an invalid locale code.
Supported Component Properties
The following component properties typically support internationalization:
descriptioninfotitleplaceholdervaluelabel
Note that support may vary depending on the component, and some properties might have exceptions where internationalization is not applicable. You can check this by referring to the typehint for the parameter and if it contains I18nData, then it supports internationalization.