Современные AI чатботы это инструмент. Для каких-то вещей в жизни разработчика он подходит хорошо, для каких-то - не очень. Для интернационализации сайтов - хорошо.

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

У меня проект на Vue 3, но данный метод подходит как для любых фронтенд фреймворков, так и сайтов на чистом JS или PHP. Главное, нужна функция t() которая будет принимать ключ строки и выдавать перевод в соответствии с текущей локалью.

Предполагаем, что библиотечный или кастомный i18n пакет уже стоит, или каким-то другим способом функция t() уже определена.

Я использую Cursor AI IDE, который основан на VS Code и сам может вносить изменения одновременно в несколько файлов, но можно задействовать, наверняка, и других AI помощников и помощниц.

Итак, предположим уже есть сайт с зашитыми строками на английском языке. Сперва надо вытащить их в en.json. Пример будущего json файла перевода:

{
  "msg": "Hello",
  "login": {
    "signup": "Sign In",
    "subtitle": "to {name}"
  },
  "sidebar": {
    "menu": {
      "home": "Home",
      "profile": "User Profile",
      "logout": "Logout",

Первый промпт:

Ты должна помочь мне с добавлением интернационализации (i18n) в проект.
Для этого сейчас нужно создать файл с переводами для английского языка.

Вот пример структуры файла:

{
  "msg": "Hello"
}

Файл en.json уже есть, нужно дополнить его переводами для английского языка.
Все переводы нужно вытащить из кода проекта - из *.vue и *.ts файлов.
Вместо зашитых строк должны быть ключи, на которые потом нужно будет ссылаться в коде.
Ключи используются в вызове функции t(key, params) из useI18n.ts
Везде, где ты будешь менять зашитые значения на вызовы функции t(key, params), 
нужно сделать импорт функции t из useI18n.ts
Используй вложенность до второго уровня, например, ключ 'sidebar.menu.profile'
В en.json это будут вложенные объекты, например:
{
  "sidebar": {
    "menu": {
      "profile": "Profile"
    }
  }
}

Не генерируй новых файлов в качестве примера как это должно быть.
Используй текущую кодовую базу, чтобы провести в ней изменения.
Не трогай строки внутри console.log()

AI у меня обработала всего 3-4 файла сразу таким образом и достаточно хорошо. Видимо она проверяет - правильно ли она меня поняла. Поэтому промпт надо будет прогнать несколько раз. Можно просто заходить в файл и писать в том же AI потоке: Сделай i18n

Вручную надо будет поработать с параметрами для строкt().Поначалу, потом она научится вытаскивать их сама

В итоге

<h1>Hello</h1>

превратится в

<h1>{{ t("msg") }}</h1>

с добавлением этой строки с данным ключом в en.json

После того, как все зашитые строки перегнаны в en.json, второй промпт для создания переводов:

Возьми файл en.json, служащий для i18n, и переведи значения его ключей 
на испанский, немецкий, французский, арабский, вьетнамский, китайский и русский языки. 
Работай только с этими языками, не обращай внимания на переводы на другие языки.
Если необходимо, сделай изменения в файле app/composables/useI18n.ts 
(добавь новые локали).
Порядок языков должен соответствовать популярности языков в США.

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

Если просишь за раз перевести на большое количество языков, у меня выскакивает ошибка о превышении лимита обращений к cursor.sh. Надо переводить частями по 3-4 языка.

Переводы получаются достаточно качественные, учитывающие контекст. На порядок лучше автоматического Google Translate.

Ну и третий промпт на будущее:

Возьми файл en.json, служащий для i18n, и посмотри, какие появились у него значения его ключей, которых нет в других переводах.
Переведи эти новые значения на все остальные языки и добавь в соответствующие .json файлы.

Естественно, все промпты желательно улучшить прогоном через сам AI

Тогда, например, последний промпт превратится в следующее:

Инструкции по обновлению языковых файлов i18n:

1. Анализ файла en.json:
   - Откройте файл en.json, который служит основой для интернационализации (i18n).
   - Проанализируйте все ключи и их значения в этом файле.

2. Сравнение с другими языковыми файлами:
   - Просмотрите все остальные языковые файлы (например, ru.json, fr.json, de.json и т.д.).
   - Найдите ключи из en.json, которых нет в других языковых файлах или значения которых отличаются.

3. Перевод новых значений:
   - Для каждого нового или измененного ключа переведите его значение на все остальные языки.
   - Убедитесь, что перевод учитывает контекст и специфику каждого языка.

4. Обновление соответствующих .json файлов:
   - Добавьте новые переведенные ключи и значения в соответствующие языковые файлы.
   - Если ключ уже существует, но его значение изменилось, обновите перевод.
   - Сохраните изменения в каждом языковом файле.

5. Проверка согласованности:
   - После обновления всех файлов, проверьте, что все ключи из en.json присутствуют во всех других языковых файлах.
   - Убедитесь, что структура всех файлов идентична.

Можно подредактировать, явно указав контекст приложения и предпочтения при переводе.

Всё.

Можно в дальнейшем улучшать и автоматизировать систему, например, проверять последние коммиты на добавление новых строк и переводить их, но это уже на любителя


Интересная и полезная информация о Vue.js и фронтенде в целом на нашем Телеграм‑канале: @vuefaq

Комментарии (1)


  1. danilovmy
    14.10.2024 07:13

    Можно, конечно, AI использовать, но можно и vue-i18n-extract поставить, который создает файлы методом статического анализа, поскольку $t(message) уже определены. В этом плане я больше доверяю функции, чем AI генератору текста.

    Файлы на перевод мы отдаем переводчикам, у них свои AI на переводы, и свои промпты, более заточенные на перевод.

    А вот сборку мест с непереведенными статическими текстами можно запросить: "проверь код на наличие статических текстов, которые видны или будут показаны пользователю пока приложение работает...<желаемое действие>".

    Cуть в том, что часто глаз "замыливается" и в проекте с 2500 файлов компонентов нет-нет да и проскочит статика, не помеченная на перевод, т.е. не завернутая в $t(). Тут AI действительно хороший помощник.

    P.s. тут на хабре есть гениальная статья о локализации. Там говорят, что кроме текстов, надо еще и картинки переводить/адаптировать. Я с этим очень согласен, но до заказа перерисовки картинок наш проект еще не дорос.

    @gmtd Успехов с переводами :)