Современные 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
ссылка на оригинал статьи https://habr.com/ru/articles/850346/
Добавить комментарий