Перейти к основному содержимому

JS SDK

Translify JS SDK помогает вам реализовать двуязычный перевод на вашем сайте.

Как использовать​

  1. Инициализируйте Translify:
<script>
  window.immersiveTranslateConfig = {
    pageRule: {}
  }
</script>
  1. Добавьте следующий код script на вашу веб-страницу
<script src="https://download.translify.ai/immersive-translate-sdk-latest.js"></script>

Пример

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Translify JS SDK</title>
    <script>
      window.immersiveTranslateConfig = {
        pageRule: {},
      };
    </script>
    <script
      async
      src="https://download.translify.ai/immersive-translate-sdk-latest.js"
    ></script>
  </head>

  <body>
    <div>
      <p>
        Night gathers, and now my watch begins. It shall not end until my death.
        I shall take no wife, hold no lands, father no children. I shall wear no
        crowns and win no glory. I shall live and die at my post.
      </p>
    </div>
  </body>
</html>

Параметры​

С помощью pageRule вы можете настроить конфигурацию сайта, решая, какой контент нужно перевести или изменяя стили веб-страницы.

initImmersiveTranslate({
  pageRule: {
    selectors: [".text"],
    excludeSelectors: ["nav", "footer"],
  },
});

Использование selectors переопределит диапазон умного перевода, переводя только элементы, соответствующие селектору.

Использование excludeSelectors может исключить элементы из перевода.

Использование selectors.add добавит некоторые селекторы поверх стандартных.

Использование selectors.remove удалит некоторые селекторы из стандартных.

Если вы хотите перевести конкретную область и рассматривать элемент как целое, не разбивая его на строки, вы можете использовать селектор atomicBlockSelectors. Обратите внимание, что вам нужно выбрать элементы с помощью selectors перед использованием atomicBlockSelectors.

{
  "selectors": ["div._aa_c h1", "li._acaz div[role=\"menuitem\"]"],
  "atomicBlockSelectors": ["div._aa_c h1", "li._acaz div[role=\"menuitem\"]"]
}

pageRule больше объяснений параметров:

export interface PageRule {
  excludeMatches?: string | string[]; // Исключить конкретные сайты.
  selectorMatches?: string | string[]; // Совпадение с использованием селекторов без указания всех URL
  excludeSelectorMatches?: string | string[]; // Исключить правила, то же самое, что и выше.

  // Указать диапазон перевода
  selectors?: string | string[]; // Переводить только совпавшие элементы
  excludeSelectors?: string | string[]; // Исключить элементы, не переводить совпавшие элементы
  excludeTags?: string | string[]; // Исключить теги, не переводить совпавшие теги

  // Добавить диапазон перевода, не переопределять
  additionalSelectors?: string | string[]; // Добавить диапазон перевода. Добавить позиции перевода в умные области перевода.
  additionalExcludeSelectors?: string | string[]; // Добавить исключенные элементы, чтобы предотвратить умный перевод в конкретных позициях.
  additionalExcludeTags?: string | string[]; // Добавить исключенные теги

  // Оставить оригинал
  stayOriginalSelectors?: string | string[]; // Совпавшие элементы останутся оригинальными. Обычно используется для тегов на форумах.
  stayOriginalTags?: string | string[]; // Совпавшие теги останутся оригинальными, такие как `code`

  // Перевод региона
  atomicBlockSelectors?: string | string[]; // Селектор региона, совпавшие элементы будут рассматриваться как целое, не переводятся по частям
  atomicBlockTags?: string | string[]; // Селектор тега региона, то же самое, что и выше

  // Блок или Inline
  extraBlockSelectors?: string | string[]; // Дополнительные селекторы, совпавшие элементы будут рассматриваться как блочные элементы, занимая одну строку.
  extraInlineSelectors?: string | string[]; // Дополнительные селекторы, совпавшие элементы будут рассматриваться как inline элементы.

  inlineTags?: string | string[]; // Совпавшие теги будут рассматриваться как inline элементы
  preWhitespaceDetectedTags?: string | string[]; // Совпавшие теги автоматически обернут строки

  // Стили перевода
  translationClasses?: string | string | string[]; // Добавить дополнительные классы к переводу

  // Глобальные стили
  globalStyles?: Record<string, string>; // Изменить стили страницы, полезно, когда переводы вызывают беспорядок на странице.
  globalAttributes?: Record<string, Record<string, string>>; // Изменить атрибуты элементов страницы

  // Встроенные стили
  injectedCss?: string | string[]; // Встроить CSS стили
  additionalInjectedCss?: string | string[]; // Добавить CSS стили вместо прямого переопределения.

  // Контекст
  wrapperPrefix?: string; // Префикс области перевода, по умолчанию умный, решает, оборачивать ли строки в зависимости от количества символов.
  wrapperSuffix?: string; // Суффикс области перевода

  // Количество символов для оборачивания перевода
  blockMinTextCount?: number; // Минимальное количество символов для перевода как блока, в противном случае перевод будет inline элементом.
  blockMinWordCount?: number; // То же самое, что и выше. Чтобы всегда оборачивать строки, установите оба значения в 0.

  // Минимальное количество символов для переводимого контента
  containerMinTextCount?: number; // Минимальное количество символов для элементов, которые будут переведены при умном распознавании, по умолчанию 18
  paragraphMinTextCount?: number; // Минимальное количество символов для оригинального абзаца, контент, превышающий это количество, будет переведен
  paragraphMinWordCount?: number; // Минимальное количество слов для оригинального абзаца

  // Принудительное количество символов для разрыва строки для длинных абзацев
  lineBreakMaxTextCount?: number; // Максимальное количество символов для принудительного разрыва строки при переводе длинных абзацев.

  // Время начала перевода
  urlChangeDelay?: number; // Задержка в миллисекундах перед началом перевода после входа на страницу. По умолчанию 250 мс, чтобы дождаться инициализации веб-страницы.

  // AI потоковый перевод
  aiRule: {
    streamingSelector: string; // Селектор веб-страницы GPT, отмечающий переводимый элемент
    messageWrapperSelector: string; // Селектор тела сообщения
    streamingChange: boolean; // Инкрементное или полное обновление для повторяющихся сообщений на страницах, подобных GPT. GPT является инкрементным
  };
}