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”

4 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:

3 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.

As I remember, you can use the dcc.Markdown component to display text in different languages based on user preferences. I’ve done something similar before, and it’s quite doable with some manual handling.

I used these app localization services to get rid of headaches, which might be an alternative solution. They did accurate work + provided certifications that ensured all were linguistically and culturally translated.

1 Like

Hello,

I made multi language dash app using JSON documents and every element is translated to specified language… You can see result here: https://bit.ly/Salaries_and_real_estate_prices_in_Slovakia

Base language is Slovak but in top right corner you can select preferred language.
Extend app to another language is just about create new JSON dictionary like:

{
  "labels": {
    "The_date": "Date",
    "bank_name": "Bank",
    "interest": "Interest rate [in %]",
    "the_date": "Date",
    "place": "District",
    "price": "Price [in €]",
    "salary": "Salary [in €]",
    "count": "Count",
    "count_of_respondents": "Count of respondents",
    "position": "Work position",
    "position_industry": "Position industry",
    "parameter_info.stav": "Condition of the building",
    "parameter_info.uzit_plocha": "Building area [in m2]",
    "stav": "Condition of the building",

    "gender": "Sex",
    "age": "Age range",
    "position_place": "Industry",
    "no_years": "No. years",

    "Iba pohlavie": "Gender only",
    "Aj s vekovým rozložením": "Also with age distribution",

    "a / alebo": "and / or"
  },
  "Kapitoly": "Chapters",
  "Údaje o platoch": "Salary data",
  "Údaje o nehnutelnostiach": "Real estate data",
  "Kontakt": "Contact",

  "Vitaj": "Welcome!",
  "text_1": "You can click the Sidebar button on the top right or if you're on mobile and the sidebar would be annoying, you can click the Chapters menu.",
  "text_2": "qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq",

  "Mediánové platy podľa miest v SR": "Median salaries by city the Slovak Republic",
  "Platy na pozíciach v SR": "Salaries for positions in the Slovak Republic",
  "Medián": "Median",
  "Priemer": "Average",
  "Odstrániť outlierov": "Remove outliers",
  "Celé Slovensko... alebo vyber mesto.": "All of Slovakia... or choose a city.",

  "Platy podľa lokality": "Salaries by location",
  "Platy podla pozície": "Salaries by position",
  "Priemerný plat:": "Average salary:",
  "Mediánový plat:":  "Median salary:",

  "Platy podľa odvetvia": "Salaries by Industry",
  "Porovnanie platov na základe pohlavia": "Salary comparison by gender",
  "Distribúcia platov": "Salary distribution",

  "Density HeatMap podľa typu nehnutelnosti a okresu.": "Density HeatMap by property type and district.",
  "DisPlot - vyjadrenie ceny vs. plochy objektu na XY súradnicovej osy": "DisPlot - expression of price vs. area of the object on the XY coordinate axis",


  "Platy podľa odvetvia v SR": "Salaries by industry in the Slovak Republic",
  "Distribúcia mzdy podľa počtu obsadených miest / respondentov": "Wage distribution by number of occupied positions / respondents",
  "Podľa zamestnancov": "By employees",
  "Podľa pozízií": "By position",

  "Porovnanie celkových platov muži / ženy": "Comparison of total salaries male / female",
  "Len na základe pohlavia": "Based on gender only",
  "Aj s vekovým rozpätím": "Also with age range",

  "Počet objektov na predaj v ponuke": "Number of objects for sale on offer",
  "Počet ponúk na predaj podľa typu nehnutelnosti a okresu.": "Number of offers for sale by property type and county.",

  "Ceny vybraných nehnuteľností podľa stavu": "Selected property prices by condition",
  "Ceny vybraných nehnuteľností podľa stavu.": "Selected property prices by condition.",

  "Vývoj ceny nehnuteľností podľa druhu": "Property price development by type",
  "Vývoj ceny nehnuteľností podľa druhu.": "Property price development by type.",

  "Ceny nájmov vybraných nehnuteľností podľa stavu": "Rental prices of selected properties by state",
  "Ceny nájmov vybraných nehnuteľností podľa stavu.": "Rental prices of selected properties by state.",

  "Vývoj úrokových sadzieb": "Long-term interest rates",
  "Vývoj úrokových sadzieb na hypotéky 3r fix.": "Long-term interest rates on 3-year fixed mortages",

  "Mapa Slovenska: mzdy v regiónoch": "Map of Slovakia: wages in regions",
  "Mzdy v regiónoch.": "Wages in regions.",

  "Mapa Slovenska: pomer ceny nehnutelnosti a mzdy": "Map of Slovakia: property price to wage ratio",
  "Mapa nám vyjadruje, aká je priemerná mzda v regiónoch.": "The map tells us what the average wage is in the regions.",

  "Pomer mzdy a ceny bývania podľa okresu.": "Ratio of wages and housing prices by district.",
  "Mapa nám vyjadruje, koľko priemerných ročných platov v danom regióne potrebuješ, aby si si mohol kúpiť priemernú nehnuteľnosť daného typu.": "The map tells us how many average annual salaries in a given region you need to be able to buy an average property of a given type.",

  "Autor": "Author",

  "Vyber si povolanie...": "Choose a profession...",
  "Vyber si mesto...": "Choose a city...",

  "<b>© vytvorené Marcelom Suleimanom</b>": "<b>© made by Marcel Suleiman</b>",
  "Histogram nám vyjadruje, koľko zamestnancov sa nachádza v danom platovom rozsahu.": "The histogram tells us how many employees are in a given salary range.",
  "Po vyradení outlierov na základe pracovnej pozície.<br> Histogram nám vyjadruje, koľko pracovných pozícií s mediánovou mzdou sa nachádza v danom platovom rozsahu.": "After eliminating outliers based on job position.<br>The histogram tells us how many jobs with a median salary are in a given salary range."
}
2 Likes

Thanks for sharing, @MarcelSuleiman .
Looking over the JSON dictionary you attached, I couldn’t find a few French translations that were visible in the app.

I’m assuming that we would need to detail all translations in the JSON dictionary that we want to see in the app. Is that correct?

1 Like

@adamschroeder
Yes, correct, ENG JSON is just “template”, I have also FR JSON as separate file. Every language mutation needs separate dictionary. Also I played with DeepL to be able to translate dynamically to any language.

Now I see that a better approach would be to use the base language English and create JSON files like:
EN: EN
EN: FR
EN: SK
EN: FI

anyone can be useful and create a new language mutation easily.

Today I will finish refactor (get out hardcoded secrets) and then push source code to public repository. Pandas calculations moved to private API

1 Like

Really nice app @MarcelSuleiman ! And it is also lovely to see some fellow Slovak Dash enthusiast :slight_smile:

Recently I also developed a multilingual app since I wanted to have my blog posts in slovak and also english. It is my personal page in bio and also the code is available on github.

For the translations I had a base material in Slovak and it was a markdown format. I had a really great results using deepl api. It needed just a few corrections and the result was much better than my broken english :slight_smile:

1 Like

OK, here is my public repository for dashboard

@MarcelSuleiman you inspired me to play around with deepl: