Как это работает

Компилятор Lingo.dev автоматизирует локализацию React-приложений на этапе сборки с помощью интеллектуального анализа кода и перевода на основе ИИ.

Когда вы запускаете процесс сборки, компилятор выполняет следующие шаги, чтобы сделать ваше приложение многоязычным без изменения исходного кода:

1. Анализ AST

Компилятор Lingo.dev обрабатывает абстрактное синтаксическое дерево (AST) вашего React-кода, чтобы детерминированно выявлять переводимый контент. Он анализирует:

  • Текстовое содержимое и атрибуты JSX
  • Строковые литералы внутри компонентов React (Поддержка строковых литералов скоро появится.)
  • Шаблоны динамического контента

Компилятор понимает границы компонентов React и сохраняет контекстную информацию для точных переводов.

2. Извлечение контента

Компилятор извлекает переводимые строки, сохраняя:

  • Иерархию компонентов и контекст
  • React-специфические шаблоны, такие как props и state
  • Структуру и форматирование кода

Извлекается только читаемый человеком контент. Технические идентификаторы, фрагменты кода и непереводимые элементы автоматически отфильтровываются.

3. Создание отпечатков и версий

Фингерпринтинг контента обеспечивает эффективное управление переводами:

  • Хеширование MD5 создаёт уникальные фингерпринты контента
  • Версионированные словари отслеживают изменения в директории lingo/
  • Интеграция с Git сохраняет историю переводов
  • Обработка дельт переводит только новый или изменённый контент

Этот подход минимизирует затраты на переводы и обеспечивает консистентность между сборками.

4. Перевод с помощью ИИ

Перевод осуществляется с помощью ИИ-моделей с учетом контекста:

  • Интеграция ИИ-моделей обеспечивает быстрые и качественные переводы через Lingo.dev Engine или одного из поддерживаемых поставщиков LLM
  • Контекстуальные границы помогают ИИ понимать взаимосвязи компонентов
  • Единая терминология по всему вашему приложению
  • Пакетная обработка для оптимальной производительности

Компилятор отправляет контекстную информацию, чтобы гарантировать, что переводы естественно вписываются в ваши UI-компоненты.

5. Внедрение кода

Переводы внедряются обратно в сборку без изменения исходных файлов:

  • Обработка на этапе сборки создает локализованные версии
  • Интеграция с фреймворками работает с Next.js, Vite и React Router
  • Оптимизированные сборки с загрузкой словарей для каждой локали
  • Эффективность выполнения благодаря предварительно скомпилированным переводам

Результат — готовые к производству многоязычные React-приложения с минимальной нагрузкой на выполнение.

Интеграция с фреймворками

Next.js App Router

Компилятор интегрируется с Next.js через систему конфигурации:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Серверные компоненты обрабатываются на этапе сборки
  • Клиентские компоненты получают оптимизированные пакеты переводов
  • Автоматическая маршрутизация поддерживает URL-адреса, основанные на локалях

React Router / Remix

Интеграция через архитектуру плагинов Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Серверный рендеринг с предварительно загруженными словарями
  • Гидратация на стороне клиента сохраняет состояние переводов
  • Разделение кода по маршрутам включает пакеты переводов

Vite

Прямая интеграция с плагином Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Горячая замена модулей обновляет переводы во время разработки
  • Оптимизация сборки создает минимальные производственные пакеты
  • Обработка ресурсов эффективно управляет файлами переводов

Рабочий процесс разработки

  1. Пишите React-компоненты, используя текст на естественном языке
  2. Запустите сервер разработки — компилятор извлекает и переводит контент
  3. Проверьте переводы в сгенерированном каталоге lingo/
  4. Закоммитьте файлы переводов в систему контроля версий
  5. Разверните с встроенной поддержкой мультиязычности

Преимущества в продакшене

  • Нулевые затраты на выполнение — переводы предварительно компилируются
  • Оптимальные размеры пакетов — включаются только используемые переводы
  • SEO-дружественность — корректный рендеринг для каждой локали
  • Единый пользовательский опыт — профессиональное качество переводов

Компилятор создает приложения для продакшена, которые ощущаются как нативные для каждого поддерживаемого языка, сохраняя ваш исходный рабочий процесс разработки.

Поставщики LLM

Вариант 1. Lingo.dev Engine

Lingo.dev Compiler может использовать Lingo.dev Engine в качестве вашего ИИ-движка для перевода.

Он предоставляет динамический выбор моделей, автоматическое перенаправление на разные модели для каждой языковой пары, автоматические резервные модели, память переводов, учитывающую предыдущие переводы, и поддержку глоссария для терминологии, специфичной для вашего проекта. Доступны как бесплатные, так и платные варианты, и бесплатный тариф Hobby должен быть достаточным для большинства проектов.

Для аутентификации выполните команду:

npx lingo.dev@latest login

Настройте Lingo.dev Engine в качестве вашего провайдера, например, для Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

Важная деталь. Если вы используете браузер Brave или ваши расширения браузера блокируют процесс аутентификации, вы можете вручную аутентифицироваться, добавив переменную окружения LINGODOTDEV_API_KEY в ваш файл .env:

LINGODOTDEV_API_KEY=...

Вариант 2. Альтернативные поставщики LLM

Компилятор поддерживает следующих поставщиков LLM:

Вам необходимо создать учетную запись и получить API-ключ у выбранного поставщика LLM для настройки.

Примечание: Убедитесь, что вы активировали свою учетную запись у поставщика LLM и приняли их Условия использования перед началом работы с Компилятором. Поставщик LLM может запретить вам использовать их платформу, пока вы не выполните все необходимые шаги. Эти шаги могут различаться у разных поставщиков LLM.

Настройте выбранного поставщика LLM, например, чтобы использовать Groq в приложении Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

Добавьте ваш API-ключ для настроенного поставщика LLM в переменные окружения:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

Мы хотим поддерживать больше LLM - свяжитесь с нами или отправьте нам pull request!

Следующие шаги