Language Support

[KrishavRajSingh]

Hey, I was trying to work on #374

We can easily install i18n in the cvat-ui and configure the components to get the translation file via hooks and props. We have 2 option, either keep the translation file in the frontend or we can make a api call to get the translation file.

Making a api call is preferred as loading all the translation might make the front-end heavy and will take time to load.

I have tried making a endpoint at 'localhost:7000/locales/{lng}/translation.json' and I am able to get the data at this endpoint but for some reasons I am not able to get this at 'localhost:3000/locales/{lng}/translation.json'. I thought it might work just like 'localhost:3000/api/...' . Also I am not able to call 'localhost:7000/locales/{lng}/translation.json' directly from the cvat-ui.

Can you suggest me how to fix this.

And if you have any other alternatives please let me know.
Thanks.

[acecode]

I'm using i18next-resources-to-backend + webpack
this way webpack will pack resouce files

For this error says URL scheme，maybe you should add http:// or // at begin of the url

`//` means use the same with current page URL

There will be another problems

1. the static site is start at localhost:3000 and the API server is localhost:7000

   • i18n resources is more related to Static(frontend) server than the API(backend) Server
   • I suggest put locales in cvat-ui project

2. src/locales folder is not served on url localhost:3000/locales/

   • src/locales folder is not copy to dist by default in dev/prod env

3. Use an online service like locize.com give us the benefit to manage the resouces and for other ones to
   contribute. The cons is not support no net connection.

[KrishavRajSingh]

The main issue I am facing now is the endpoint is at localhost:7000/locales and I am not able to call ot from cvat-ui.

I can only call localhost:3000.

[acecode]

Webpack dev config only proxy some path to api server
webpack.config.js DevServer Proxy Path

/\/api\/.*|analytics\/.*|static\/.*|admin(?:\/(.*))?.*|profiler(?:\/(.*))?.*|documentation\/.*|django-rq(?:\/(.*))?/gm

Default cvat-ui can't call ajax api on different domain

localhost:3000 -> localhost:7000

I suggest again that keep the locales resource in cvat-ui asides the frontend code

```js
// component/x.ts
...
t('Save')
...

// locales/zh-cn.json
...
  Save: "保存"
...
``` 

Also We could share some common/basic resource with the api server

[KrishavRajSingh]

I made an api call to http://localhost:3000/api/locales/..., it is working fine. You can checkout this PR.
Thanks a lot for your suggestion. Always open to reviews!!!

Webpack dev config only proxy some path to api server webpack.config.js DevServer Proxy Path

/\/api\/.*|analytics\/.*|static\/.*|admin(?:\/(.*))?.*|profiler(?:\/(.*))?.*|documentation\/.*|django-rq(?:\/(.*))?/gm

Default cvat-ui can't call ajax api on different domain

localhost:3000 -> localhost:7000

I suggest again that keep the locales resource in cvat-ui asides the frontend code

```js
// component/x.ts
...
t('Save')
...

// locales/zh-cn.json
...
  Save: "保存"
...

Also We could share some common/basic resource with the `api server`

[acecode]

1. Maybe we should remove the host and port in i18n.ts loadPath

backend: {
-            loadPath: 'http://localhost:3000/api/locales/{{lng}}/{{ns}}.json', // Adjust this path based on your project structure
+            loadPath: '/api/locales/{{lng}}/{{ns}}.json', // Adjust this path based on your project structure
},

this host and port may not work in production(docker) env