Create multi-language app (EN/DE/ES)

Hi!

I’m interesting in create an app available in more than one lenguaje. I found that Flask has the option as shows the following link: https://phrase.com/blog/posts/flask-app-tutorial-i18n/

Do you know if is possible to develop in Dash??

Hi,

It is certainly possible to do it in Dash following a similar approach as in the link you shared. One could use the structure of a multi-page application with a page template that can be filled by text in speficic language, just like they did using json files.

@AnnMarie, it could be a good functionality to be demo-ed with the /pages features…

1 Like

Hi @isaamarod

Yes, as @jlfsjunior mentioned, it’s possible to make an app like this with Dash, and it’s much, much easier with Dash than in the blog post you linked to, especially if you use the new /pages feature.

In the blog, they use flask to render a page template that uses the Jinja2 template engine as described here. With Dash, the “template” is the page layout. If you make the layout a function, then you can pass variables to it from the URL using query strings - or as path variables.

For example:

if the URL is: (query string)

http://127.0.0.1:8050/dashboard?lang=french

or a path variable:

http://127.0.0.1:8050/dashboard/french

the language parameter will be passed to the layout - for example:


def layout(lang="english", **other_unknown_query_strings):
    translate = {"english": {"greeting":"hello"}, "french": {"greeting": "bonjour"}}
    return html.Div(translate[lang]["greeting"])

This example will render:
bonjour

If no language is specified, it will show the default english greeting of “hello”

Note - /page will be in a future release of Dash, but for now, you can try it out in dash-labs

3 Likes

Thank you for your help !! :smile:

1 Like

I wrote an app with three languages (fi/en/sv). You can check the repo here:

Here is the link to the app itself:

2 Likes

very cool app, @Tuomas_Gu . Congratulations and thanks for sharing.
Would you be ok if we shared this app on our Plotly social media channels?

@adamschroeder Sure, please feel free to do so!

@Tuomas_Gu
How were you able to add the translation to the app?

@adamschroeder Well, basically the pages are just copies of themselves with the only differences being method names, component property ids and used locales. There is a page for each language. The texts in html tags are just manual translations. The data itself has labels in these three languages which is why I only included them and not, say, German. I noticed that you need to specify which locale to use in each callback despite the page, otherwise you might have, say, Swedish text on a graph on the English page. I guess this is just pandas dataframe’s datetime index not recognizing the used locale. I had a .locales file that includes the used locales. Just a few details, but nothing too complicated.