message: t('appDebug.errorMessage.valueOfVarRequired',{key: language !==LanguagesSupportedUnderscore[1]?currentProvider.form_schema[i].label['en-US']:currentProvider.form_schema[i].label['zh-Hans']}),
message: t('appDebug.errorMessage.valueOfVarRequired',{key: language !==LanguagesSupportedUnderscore[1]?currentProvider.form_schema[i].label['en-US']:currentProvider.form_schema[i].label['zh-Hans']}),
language !==LanguagesSupportedUnderscore[1]?<TemplateEnappDetail={appDetail}variables={variables}inputs={inputs}/>:<TemplateZhappDetail={appDetail}variables={variables}inputs={inputs}/>
language !==LanguagesSupportedUnderscore[1]?<TemplateChatEnappDetail={appDetail}variables={variables}inputs={inputs}/>:<TemplateChatZhappDetail={appDetail}variables={variables}inputs={inputs}/>
This directory contains the internationalization (i18n) files for this project.
## File Structure
```
├── [ 24] README.md
├── [ 0] README_CN.md
├── [ 704] en-US
│ ├── [2.4K] app-annotation.ts
│ ├── [5.2K] app-api.ts
│ ├── [ 16K] app-debug.ts
│ ├── [2.1K] app-log.ts
│ ├── [5.3K] app-overview.ts
│ ├── [1.9K] app.ts
│ ├── [4.1K] billing.ts
│ ├── [ 17K] common.ts
│ ├── [ 859] custom.ts
│ ├── [5.7K] dataset-creation.ts
│ ├── [ 10K] dataset-documents.ts
│ ├── [ 761] dataset-hit-testing.ts
│ ├── [1.7K] dataset-settings.ts
│ ├── [2.0K] dataset.ts
│ ├── [ 941] explore.ts
│ ├── [ 52] layout.ts
│ ├── [2.3K] login.ts
│ ├── [ 52] register.ts
│ ├── [2.5K] share-app.ts
│ └── [2.8K] tools.ts
├── [1.6K] i18next-config.ts
├── [ 634] index.ts
├── [4.4K] language.ts
```
We use English as the default language. The i18n files are organized by language and then by module. For example, the English translation for the `app` module is in `en-US/app.ts`.
If you want to add a new language or modify an existing translation, you can create a new file for the language or modify the existing file. The file name should be the language code (e.g., `zh-CN` for Chinese) and the file extension should be `.ts`.
For example, if you want to add french translation, you can create a new folder `fr-FR` and add the translation files in it.
By default we will use `LanguagesSupported` to determine which languages are supported. For example, in login page and settings page, we will use `LanguagesSupported` to determine which languages are supported and display them in the language selection dropdown.
## Example
1. Create a new folder for the new language.
```
cp -r en-US fr-FR
```
2. Modify the translation files in the new folder.
3. Add type to new language in the `language.ts` file.
```typescript
export type I18nText = {
'en-US': string
'zh-Hans': string
'pt-BR': string
'es-ES': string
'fr-FR': string
'de-DE': string
'ja-JP': string
'ko-KR': string
'ru-RU': string
'it-IT': string
'uk-UA': string
'YOUR_LANGUAGE_CODE': string
}
```
4. Add the new language to the `language.ts` file.
```typescript
export const languages = [
{
value: 'en-US',
name: 'English(United States)',
example: 'Hello, Dify!',
supported: true,
},
{
value: 'zh-Hans',
name: '简体中文',
example: '你好，Dify！',
supported: true,
},
{
value: 'pt-BR',
name: 'Português(Brasil)',
example: 'Olá, Dify!',
supported: true,
},
{
value: 'es-ES',
name: 'Español(España)',
example: 'Saluton, Dify!',
supported: false,
},
{
value: 'fr-FR',
name: 'Français(France)',
example: 'Bonjour, Dify!',
supported: false,
},
{
value: 'de-DE',
name: 'Deutsch(Deutschland)',
example: 'Hallo, Dify!',
supported: false,
},
{
value: 'ja-JP',
name: '日本語(日本)',
example: 'こんにちは、Dify!',
supported: false,
},
{
value: 'ko-KR',
name: '한국어(대한민국)',
example: '안녕, Dify!',
supported: false,
},
{
value: 'ru-RU',
name: 'Русский(Россия)',
example: ' Привет, Dify!',
supported: false,
},
{
value: 'it-IT',
name: 'Italiano(Italia)',
example: 'Ciao, Dify!',
supported: false,
},
{
value: 'th-TH',
name: 'ไทย(ประเทศไทย)',
example: 'สวัสดี Dify!',
supported: false,
},
{
value: 'id-ID',
name: 'Bahasa Indonesia',
example: 'Saluto, Dify!',
supported: false,
},
{
value: 'uk-UA',
name: 'Українська(Україна)',
example: 'Привет, Dify!',
supported: true,
},
// Add your language here 👇
...
// Add your language here 👆
]
```
5. Don't forget to mark the supported field as `true` if the language is supported.
6. Sometime you might need to do some changes in the server side. Please change this file as well. 👇
That's it! You have successfully added a new language to the project. If you want to remove a language, you can simply delete the folder and remove the language from the `language.ts` file.
We have a list of languages that we support in the `language.ts` file. But some of them are not supported yet. So, they are marked as `false`. If you want to support a language, you can follow the steps above and mark the supported field as `true`.
`api/libs/helper.py:117` Add corresponding language support. Such as:
```python
def supported_language(lang):
if lang in ['en-US', 'zh-Hans', 'de', 'de-AT']:
return lang
```
## Adding multiple language files
Add multilingual files for different modules under web/i18n/lang. The file name is Module name.{LANG}.ts. Please refer [LANG](https://www.venea.net/web/culture_code) for details.
## Introducing a newly added multilingual file
Introduce the newly added multilingual file in the resources object in web/i18n/i18next-config.ts. For example:
```javascript
const resources = {
'en': {...},
'zh-Hans': {...},
_// Introduce the newly added language_
'new LANG': {
translation: {
common: commonNewLan,
layout: layoutNewLan,
...
}
}
}
```
## Changes in the translation process
### Multi-language processing of date formatting
Currently, two files are involved in date formatting in multiple languages:
There will be variables in the translation, and the value of the variables will be replaced at runtime. Variables in translation will be wrapped in {{ and }}.
When translating content with variables:
1. Do not change the variable name. That is: the variable name does not need to be translated.
2. Ensure that the statement remains smooth after the variable is filled.
Find all translations with variables: search for {{ under ./web/i18n/lang.
### Translation content is too long to destroy UI
If a certain translation content is much longer than other languages, check if it will destroy the UI.
## Help documentation
The current logic for adjusting the help documentation is: Chinese jumps to Chinese, other languages jump to English. If the help documentation is also multilingual, changes need to be made in this area.
## Verification
It is recommended to verify the newly added language pack through local deployment of the latest code. For reference: https://docs.dify.ai/getting-started/install-self-hosted/local-source-code
Verification points:
1. Whether the initial installation has new language drop-down options, and whether the new language can be used for initialization
2. Whether there is a new language drop-down option in personal settings, and whether the new language can be selected and saved
3. Whether the text in the interface is displayed in the new language, and whether the text destroys the UI
4. Whether the content created from the template is all in the new language
5. (CLOUD version) After logging in through OAuth authorization, whether the current browser language is set directly as the interface language
crazywoola
2 years ago
committed by
GitHub