diff --git a/content/guides/02.content/7.translations.md b/content/guides/02.content/7.translations.md index 278768bf..15f24e0a 100644 --- a/content/guides/02.content/7.translations.md +++ b/content/guides/02.content/7.translations.md @@ -1,6 +1,6 @@ --- title: Translations -description: Both content and the data studio can be translated into multiple languages. +description: Both content and the data studio can be translated into multiple languages. --- Localising content in Directus involves using translation strings, which are multilingual key-value pairs that you can use throughout the app. They enable you to translate things like dropdown options, placeholder text, field notes, and more. @@ -14,7 +14,6 @@ This article refers to translating your content in Directus. Many parts of the D :video-embed{video-id="0ecac717-cbf2-4dbd-9d2b-aec232c10b0a"} :: - ## Create a Translation String :video-embed{video-id="b588e6c5-d031-4be6-aef4-e4f421f10cd5"} @@ -110,6 +109,14 @@ Now, when [editing an item](/guides/content/editor) of that collection, you'll b When no explicit default language is set on a translation interface, the first language in the `languages` collection determines the default tab shown when editing translations. To control this order, add an integer field (e.g. `sort`) to the `languages` collection and set it as the collection's sort field. :: +## AI Translations + +Directus can automatically translate your content into multiple languages using AI. Configure an AI provider in [Settings > AI](/guides/ai/assistant/setup), then use the **Translate with AI** button in the translations interface to translate fields across all your configured languages at once. + +::card{icon="material-symbols:auto-awesome" title="AI Translations" to="/guides/ai/translations"} +Learn how to set up and use AI-powered translations. +:: + ## RTL Support Directus provides comprehensive Right-to-Left (RTL) language support for both content editing and the entire studio interface. @@ -134,4 +141,3 @@ To manually control the text direction regardless of selected language: - "Automatic" - Follows the language's natural direction - "Left to Right" - Forces left-to-right direction - "Right to Left" - Forces right-to-left direction - diff --git a/content/guides/11.ai/0.index.md b/content/guides/11.ai/0.index.md index c5e48536..106e0b7e 100644 --- a/content/guides/11.ai/0.index.md +++ b/content/guides/11.ai/0.index.md @@ -28,3 +28,15 @@ The Model Context Protocol (MCP) server lets you connect external AI tools to Di ::card{icon="material-symbols:hub" title="MCP Server" to="/guides/ai/mcp"} Connect your preferred AI tools to Directus. :: + +## Content Translations: AI Translations + +AI Translations let you translate content fields into multiple languages directly from the translations interface. + +- Translate all fields across all languages in one click +- Streams translations in real time +- Supports glossaries and style guides for consistent output + +::card{icon="material-symbols:translate" title="AI Translations" to="/guides/ai/translations"} +Set up and use AI-powered content translations. +:: diff --git a/content/guides/11.ai/3.translations.md b/content/guides/11.ai/3.translations.md new file mode 100644 index 00000000..0077688d --- /dev/null +++ b/content/guides/11.ai/3.translations.md @@ -0,0 +1,112 @@ +--- +title: AI Translations +description: Translate content into multiple languages using AI models directly from the Directus translations interface. +--- + +Translate content fields into multiple languages at once using AI. Works with any configured AI provider and streams translations in real time. + +## Requirements + +- AI enabled (the `AI_ENABLED` environment variable defaults to `true`) +- At least one [AI provider API key configured](/guides/ai/assistant/setup#configure-providers-in-directus) +- At least one model in the provider's allowed models list +- A collection with a [translations field](/guides/content/translations#content-translations) containing translatable string or text fields +- User must have create or update permissions on the translations junction collection + +## Setup + +AI Translations shares provider configuration with [AI Assistant](/guides/ai/assistant/setup). If you've already configured AI Assistant, translations are ready to use. + +### Translation-Specific Settings + +In **Settings > AI**, you'll find three additional settings specific to translations: + +![AI Translation settings showing default model, glossary, and style guide](/img/ai-translations-settings.png) + +**Default Translation Model** --- Optionally pre-select a model for all users. Users can still override this per-translation. + +**Translation Glossary** --- A list of terms with translation notes (up to 200 entries). Use this for brand names, product names, and technical terms that need specific handling. + +| Term | Translation Note | +| ----------- | -------------------------------------- | +| Directus | Never translate, keep as-is | +| Data Studio | Keep as "Data Studio" in all languages | +| API | Keep as "API" | + +**Style Guide** --- A rich text field for organizational writing standards, tone, and terminology preferences. Applied to all translations. + +## Usage + +### Open the Translation Modal + +Navigate to an item with a translations field and click the :icon{name="material-symbols:auto-awesome"} **Translate with AI** button in the translations interface header. + +![Translate with AI button in the translations interface](/img/ai-translations-button.png) + +### Configure the Translation + +![Translation modal configuration with source language, model, fields, and target languages](/img/ai-translations-config.png) + +::steps{level="4"} + +#### Source Language + +Select which language contains the content you want to translate from. + +#### Model + +Pick an AI model to use. This selector only appears when multiple models are available. Defaults to the admin-configured default model. + +#### Fields to Translate + +Check the fields you want translated. Fields without source content are grayed out. A preview of the source content is shown next to each field. + +#### Target Languages + +Check which languages to translate into. Each language shows existing translation progress (e.g., 2/4 fields filled). Languages you don't have write permission for are disabled with a reason. + +#### Translate + +Click **Translate N Languages** to start. + +:: + +### During Translation + +![Translation progress showing field status and language progress bars](/img/ai-translations-progress-drawer.png) + +Translated field values stream into the form in real time as the AI generates them. + +![Translations streaming into the form during active translation](/img/ai-translations-progress-form.png) + +- Translations stream in real time --- field values appear in the editor as the AI generates them +- Per-language progress bars show completion status +- Per-field status indicators show which field is actively being translated, queued, or done +- All target languages are translated concurrently + +### Errors and Retries + +- Transient errors (rate limits, server errors) automatically retry up to 3 times with exponential backoff +- Permanent errors display a per-language error notice with a **Retry** button +- You can cancel the entire job at any time + +## Field Handling + +Different field types are handled automatically based on their interface and content type: + +| Field Type | Behavior | +| ---------------- | -------------------------------------------------------------- | +| Plain text | Translated naturally | +| Slug fields | Generates localized URL-safe slugs (lowercase, hyphens, ASCII) | +| Markdown | Preserves syntax and structure, translates prose only | +| HTML / Rich text | Preserves tags and attributes, translates text content only | + +Non-translatable interfaces --- booleans, dates, files, colors, select dropdowns, and similar --- are automatically excluded from the field list. + +## Tips + +- Use the **glossary** for brand names, product names, and technical terms that shouldn't be translated or need specific handling across languages. +- Use the **style guide** for consistent tone and voice across all translations. +- Cheaper, faster models (GPT-5 Nano, Claude Haiku 4.5, Gemini 2.5 Flash) work well for straightforward content translation. +- You can retry individual failed languages without re-translating the ones that succeeded. +- Translations are applied to the item but not saved automatically --- review the results and save when ready. diff --git a/public/img/ai-translations-button.png b/public/img/ai-translations-button.png new file mode 100644 index 00000000..052f7d95 Binary files /dev/null and b/public/img/ai-translations-button.png differ diff --git a/public/img/ai-translations-config.png b/public/img/ai-translations-config.png new file mode 100644 index 00000000..eeda368a Binary files /dev/null and b/public/img/ai-translations-config.png differ diff --git a/public/img/ai-translations-progress-drawer.png b/public/img/ai-translations-progress-drawer.png new file mode 100644 index 00000000..f2fcdacc Binary files /dev/null and b/public/img/ai-translations-progress-drawer.png differ diff --git a/public/img/ai-translations-progress-form.png b/public/img/ai-translations-progress-form.png new file mode 100644 index 00000000..f0c36424 Binary files /dev/null and b/public/img/ai-translations-progress-form.png differ diff --git a/public/img/ai-translations-settings.png b/public/img/ai-translations-settings.png new file mode 100644 index 00000000..83a1d88b Binary files /dev/null and b/public/img/ai-translations-settings.png differ