Bolt

Bolt — это платформа для разработки на основе ИИ, работающая в браузере, от компании StackBlitz. В этом руководстве объясняется, как локализовать приложение на React с помощью Lingo.dev Compiler в Bolt.

Известные ограничения

Bolt использует веб-контейнеры для запуска веб-приложений прямо в браузере. Это мощная технология, но она имеет некоторые проблемы совместимости с Lingo.dev:

Вы можете использовать только API-ключ для аутентификации с Lingo.dev Engine, а не команду login в CLI.
В Bolt Lingo.dev Compiler совместим только с приложениями на основе Vite. Использование Next.js невозможно.
Компонент <LocaleSwitcher /> не работает в встроенном окне Preview Bolt.
Ollama не поддерживается в Bolt, так как Ollama необходимо запускать локально.

Шаг 1. Получите API-ключ

Lingo.dev Compiler использует большие языковые модели (LLM) для локализации приложений с помощью ИИ. Чтобы использовать одну из этих моделей, вам нужен API-ключ от одного из поддерживаемых провайдеров. Вы можете использовать Lingo.dev Engine или собственного провайдера LLM.

Lingo.dev Engine

Lingo.dev Engine — это наша собственная хостинговая платформа, которая предоставляет динамический выбор моделей, авто-маршрутизацию, память переводов и поддержку глоссариев. Регистрация бесплатна, и все пользователи получают 10 000 токенов в месяц для бесплатного использования.

Чтобы получить API-ключ:

Войдите в Lingo.dev Engine.
Перейдите на страницу Projects.
Нажмите API key > Copy.

Собственный провайдер LLM

Lingo.dev Compiler также интегрируется с рядом сторонних провайдеров, включая:

Google AI
GROQ
Mistral
Ollama (не поддерживается в Bolt)
OpenRouter

Точные инструкции по настройке API-ключа зависят от провайдера.

Примечание: Убедитесь, что вы активировали свою учетную запись у провайдера LLM и приняли их Условия использования перед использованием в Compiler.

Шаг 2. Установите lingo.dev

Пакет lingo.dev содержит компилятор.

Чтобы установить пакет:

Создайте или откройте проект в Bolt.
Переключитесь на вкладку Code.
Нажмите Terminal.
Выполните следующую команду:
```
npm install lingo.dev
```

Шаг 3. Настройте Vite

При использовании Vite Lingo.dev Compiler должен быть инициализирован в конфигурационном файле проекта:

Если вы используете TypeScript, конфигурационный файл — это vite.config.ts.
Если вы используете JavaScript, конфигурационный файл — это vite.config.js.

Вы можете настроить поведение компилятора во время инициализации. Именно эта конфигурация определяет, между какими локалями будет происходить перевод и какие модели будут использоваться для локализации.

Для полного списка доступных опций смотрите Compiler Options.

Движок Lingo.dev

Если вы используете движок Lingo.dev, установите models в значение "lingo.dev":

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: "lingo.dev",
  })(viteConfig),
);

Пользовательский провайдер LLM

Если вы используете пользовательский провайдер LLM, установите models как объект, который сопоставляет исходные и целевые локали с моделями, которые должны выполнять локализацию. Например, эта конфигурация локализует все строки с помощью "groq:mistral-saba-24b":

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Шаг 4. Установите переменную окружения

Чтобы Lingo.dev Compiler мог получить доступ к API-ключам для настроенных моделей, эти ключи должны быть доступны как переменные окружения.

Для настройки переменных окружения в Bolt:

Создайте файл .env.
1. Щелкните правой кнопкой мыши по панели файлов.
2. Выберите New file.
3. Введите .env.

Добавьте соответствующие переменные окружения в файл:

# Lingo.dev Engine
LINGODOTDEV_API_KEY="YOUR_API_KEY_GOES_HERE"

# Google AI
GOOGLE_API_KEY="YOUR_API_KEY_GOES_HERE"

# GROQ
GROQ_API_KEY="YOUR_API_KEY_GOES_HERE"

# Mistral
MISTRAL_API_KEY="YOUR_API_KEY_GOES_HERE"

# OpenRouter
OPENROUTER_API_KEY="YOUR_API_KEY_GOES_HERE"

Примечание: Bolt автоматически шифрует переменные окружения. Чтобы узнать больше, смотрите Environment Variables (developer.stackblitz.com).

Шаг 4. Добавьте провайдера

Пакет lingo.dev экспортирует компонент <LingoProviderWrapper />. Этот компонент отвечает за загрузку переводов и их доступность во всем приложении.

Чтобы использовать этот компонент, импортируйте его в файл src/main.tsx и оберните им компонент <App />:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

(Опционально) Шаг 5. Добавьте переключатель локали

Пакет lingo.dev экспортирует неоформленный компонент <LocaleSwitcher />. Этот компонент отображает выпадающий список, который позволяет пользователям выбрать предпочитаемый язык и запоминает этот выбор при повторных посещениях.

Чтобы использовать компонент, включите его как потомка компонента <LingoProviderWrapper /> и установите свойство locales в массив, содержащий исходные и целевые локали:

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es"]} />
      </header>
      <main>
        <h1>Добро пожаловать в ваше приложение</h1>
        <p>Этот контент переводится автоматически</p>
      </main>
    </div>
  );
}

export default App;

Предупреждение: Компонент <LocaleSwitcher /> не работает в встроенном Предпросмотре Bolt. Чтобы увидеть компонент в действии, нажмите на значок Открыть предпросмотр в отдельной вкладке.

Шаг 6. Сборка и тестирование

Если сервер разработки еще не запущен, запустите его с помощью следующей команды:

npm run dev

Компилятор автоматически:

Сканирует ваши React-компоненты на наличие переводимого контента
Извлекает ключи переводов
Генерирует переводы с использованием ИИ
Создает оптимизированные файлы переводов в директории lingo/

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

Расширенная конфигурация: Варианты настройки
Часто задаваемые вопросы: Общие вопросы и устранение неполадок
Как это работает: Понимание процесса сборки