Введение

На днях я наткнулся на шаблон ИИ-чат-бота для Next.js на Vercel. К моему удивлению, он был доступен только на английском.

Поэтому я интернационализировал его. За 5 минут. Вот как:

Посмотреть можно здесь.

Код — здесь.

Зачем интернационализировать?

Часто разработчики настолько сосредоточены на создании продукта, что забывают о пользователях. Для приложений вроде ИИ-чатботов, которые по своей природе многоязычны и которыми может пользоваться кто угодно, какой смысл в чат-боте, который поддерживает только английский?

Большинство людей в мире вообще не говорят по-английски. На самом деле на нём говорит лишь около 20%. Если вы работаете над стартапом, и ваш продукт доступен только на английском, разве вы не упускаете более 80% потенциальных клиентов?

Оказывается, есть причина, по которой большинство продуктов доступно только на английском. Всё потому, что интернационализация — это сложно.

Существующие библиотеки, такие как next-intl или next-i18next, сложно настраивать и использовать. Более того, они вообще не занимаются переводом. Вам всё равно приходится нанимать переводчиков, управлять словарями с сотнями ключей и разбираться со всеми остальными сложностями интернационализации. Даже небольшие изменения в тексте могут требовать от нескольких часов до нескольких дней на перевод.

Но теперь это в прошлом.

Я работаю над новой библиотекой под названием gt-next, которая позволяет интернационализировать ваше приложение за считанные минуты. Это универсальное решение для всех ваших задач интернационализации, включая переводы, маршрутизацию и многое другое.

Я использовал gt-next, чтобы интернационализировать чат-бот Vercel AI всего за 5 минут.

Установка

Сначала я создал форк и клонировал репозиторий:

git clone https://github.com/vercel/ai-chatbot.git

Затем я установил зависимости:

npm install

Если вы, как и я, тоже столкнулись с конфликтами зависимостей, попробуйте использовать эту ветку.

git clone -b base https://github.com/General-Translation/ai-chatbot.git

Затем я установил пакеты gt-next и gt.

npm install gt-next gt

Конфигурация

Затем я запустил инструмент CLI для настройки и выбрал "Да" на каждый вопрос:

npx gt init

После этого я добавил в плагин next.config.js несколько локалей:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // Французский, Испанский, Китайский
})

Я мог бы добавить больше локалей, но хотел лишь протестировать чат-бота на нескольких языках. Можете добавить столько локалей, сколько захотите!

Вот список всех локалей, поддерживаемых gt-next.

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

Ключевой элемент библиотеки — компонент <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

Все, что обернуто в компонент <T>, можно переводить. инструмент CLI для настройки использует пользовательский парсер Babel, чтобы сканировать кодовую базу и автоматически оборачивать все найденные React-компоненты в <T>.

У использования компонента <T> есть несколько преимуществ по сравнению с другими библиотеками:

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

Запуск чат-бота

Конечно, я не мог забыть добавить все переменные окружения.

cp .env.example .env.local

Мне пришлось создать бесплатную учётную запись в панели управления General Translation, чтобы получить API-ключ. Это заняло всего пару кликов.

Заполнив все обязательные переменные окружения, я запустил чат-бота:

npm run dev

Вот и всё! Я переключил язык браузера на французский, и интерфейс переключился на французский. То же самое — с испанским и китайским.

Просто, правда?

Я сделал переключение языков ещё проще, добавив селектор языка в шапку чат-бота.

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... существующий код ... */}
    <LocaleSelector />
    {/* ... существующий код ... */}
  );
}

Сразу заработало.

Доработка

Хотя инструмент CLI для настройки отлично справился с переводом всех React-элементов, осталось несколько проблемных строк, которые были захардкожены.

Например, в файле model-selector.tsx были захардкоженные описания моделей чата:

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

Я привёл всё это в порядок, импортировав хук useGT из gt-next/client и использовав его для перевода строк:

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

Вот и всё! Теперь весь текст в чат-боте интернационализирован и доступен на любом языке.

Развёртывание в продакшене

Развернуть приложение в продакшене оказалось ещё проще. Я заменил переменную окружения GT_API_KEY на продакшен-ключ API и выполнил команду translate:

npx gt translate --locales es fr zh

И наконец, я развернул чат-бота на Vercel.

Заключение

Интернационализация чат-бота прошла очень легко. Мне не пришлось возиться с файлами конфигурации, словарями или сложной маршрутизацией.

Всего за несколько минут у меня получился полностью рабочий ИИ-чатбот, доступный на испанском, французском и китайском языках.

Если вам интересен код, вы можете найти его здесь.

Если вы хотите попробовать General Translation, загляните на сайт, в репозиторий GitHub или в документацию.