Localization support

[nmanovic]

Translate UI and all error messages to different languages and provide a way for users to choose a language. As first step need to support:

• Chinese
• Russian
• Korean
• Hebrew

[one-game]

is there any progress on this issue , localization is really needed

[yangulei]

Looking forward to this great enhancement.

[nmanovic]

@one-game , @yangulei , let me know if you can help us here to implement the feature.

Django supports localization: https://docs.djangoproject.com/en/3.0/topics/i18n/translation/
JS localization: https://github.com/globalizejs/globalize

[nmanovic]

JS localization: https://lingui.js.org/

[yangulei]

@one-game , @yangulei , let me know if you can help us here to implement the feature.

Django supports localization: https://docs.djangoproject.com/en/3.0/topics/i18n/translation/
JS localization: https://github.com/globalizejs/globalize

Sorry, I'm not familiar with Django or JS. But I can help to translate English to Chinese and it's my pleasure to do that.

[i-karen]

Hello @nmanovic ,

I have worked with django and I can help with internalisation and localization of views and templates.

[nmanovic]

@i-karen , thanks. We will be happy to accept PRs with the feature from you.

[chang50961471]

@one游戏，@yangulei，请告诉我您是否可以帮助我们在这里实现该功能。
Django 支持本地化：https://docs.djangoproject.com/en/3.0/topics/i18n/translation/ JS 本地化：https://github.com/globalizejs/globalize

抱歉，我不熟悉 Django 或 JS。但我可以帮助将英文翻译成中文，我很高兴这样做。

Hello, may I ask how to translate the page into Chinese

[absolutetsonga]

Hello, what is the top one priority language? Is it Chinese?

[nmanovic]

@absolutetsonga , we want to build infrastructure. Any second language can be used for the purpose.

[m-sameer]

@nmanovic From my research I have concluded that we would have to build an i18next implementation for cvat. Then we can translate for every locale.

[acecode]

@m-sameer @nmanovic
I think we should use an i18n component too.
I'm a front-end coder, so I have an idea for the cvat-ui package

We can inject the i18n translate function call in source code, saving time changing code.
And collect the texts need to be translated at the same time for translating.

1. use babel transform method to parse and change the source code
   a. only deal with UI related methods and some JSX Attribute and Text
   b. inject the translate function -> back to the code
   c. collect texts -> resource file
   d. add import code
   d. leave an ID as comment
2. Edit the resource file then update source code
   a. remove useless ones
   b. add some named keys
   c. maybe change the condition in step 1, run _step 1 again
3. Add i18next setup code in cvat-ui, load resource file
4. remove the ID comments

For Example, t is the translate function name

Modal.confirm({
     title: 'title',
     ...
})
// -> 
Modal.confirm({
     title: /*i18n-1*/ t('title'),
     ...
})

<Text>Foo</Text>
<Text>{ /*i18n-2*/ t('Foo')}</Text>
// ->
<Foo title="titleFoo"/>
<Foo title={ /*i18n-3*/ t("titleFoo")}/>

I have write some code here

[KrishavRajSingh]

I would like to work on this if no one is working.

[nmanovic]

@KrishavRajSingh , sure. Could you please prepare HLD (High-Level Design) and share it with our team? It is just a presentation with some details how you want to implement the feature. When you are ready, our team can meet you and discuss the HLD. Thus, you will get feedback before you implement something. Also, on the stage you can implement a dirty prototype (MVP), just to support your ideas and check some of them.

[acecode]

@KrishavRajSingh @nmanovic
Here is a Dirty Prototype maybe
Only zh-cn and en locales

i18next on v2.12.1

• packages
  1. i18n-next and some plugin on it
  • i18next-browser-languagedetector
  • i18next-resources-to-backend
  2. react Layer component i18next-react
• init i18next load resource
• i18n features
  • For React Function Components, use Hooks
  • For React Class Components, use i18n-react Component or Hoc
  • For 3rd party Package, overwrite config when language changed

[KrishavRajSingh]

@KrishavRajSingh @nmanovic Here is a Dirty Prototype maybe Only zh-cn and en locales

i18next on v2.12.1

• packages

  1. i18n-next and some plugin on it
  • i18next-browser-languagedetector
  • i18next-resources-to-backend
  2. react Layer component i18next-react

• init i18next load resource

• i18n features

  • For React Function Components, use Hooks
  • For React Class Components, use i18n-react Component or Hoc
  • For 3rd party Package, overwrite config when language changed

@KrishavRajSingh @nmanovic Here is a Dirty Prototype maybe Only zh-cn and en locales

i18next on v2.12.1

• packages

  1. i18n-next and some plugin on it
  • i18next-browser-languagedetector
  • i18next-resources-to-backend
  2. react Layer component i18next-react

• init i18next load resource

• i18n features

  • For React Function Components, use Hooks
  • For React Class Components, use i18n-react Component or Hoc
  • For 3rd party Package, overwrite config when language changed

Thanks for this.

[KrishavRajSingh]

@KrishavRajSingh , sure. Could you please prepare HLD (High-Level Design) and share it with our team? It is just a presentation with some details how you want to implement the feature. When you are ready, our team can meet you and discuss the HLD. Thus, you will get feedback before you implement something. Also, on the stage you can implement a dirty prototype (MVP), just to support your ideas and check some of them.

@KrishavRajSingh , sure. Could you please prepare HLD (High-Level Design) and share it with our team? It is just a presentation with some details how you want to implement the feature. When you are ready, our team can meet you and discuss the HLD. Thus, you will get feedback before you implement something. Also, on the stage you can implement a dirty prototype (MVP), just to support your ideas and check some of them.

Hey, I have opened a disussion regarding this. You may check #7975 or if there is any other way, you can tell me and I will share the details there.