Saltar al contenido principal

JS SDK

El SDK de Translify JS te ayuda a implementar traducción bilingüe en tu sitio web.

Cómo Usar​

  1. Inicializa Translify:
<script>
  window.immersiveTranslateConfig = {
    pageRule: {}
  }
</script>
  1. Agrega el siguiente código script a tu página web
<script src="https://download.translify.ai/immersive-translate-sdk-latest.js"></script>

Ejemplo

<!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>

Parámetros​

Con pageRule, puedes personalizar la configuración del sitio web, decidiendo qué contenido necesita ser traducido o ajustando los estilos de la página web.

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

Usar selectors anulará el rango de traducción inteligente, traduciendo solo los elementos que coincidan con el selector.

Usar excludeSelectors puede excluir elementos de la traducción.

Usar selectors.add agregará algunos selectores además de los predeterminados.

Usar selectors.remove eliminará algunos selectores de los predeterminados.

Si deseas traducir un área específica y considerar un elemento como un todo sin dividirlo en líneas, puedes usar el selector atomicBlockSelectors. Ten en cuenta que necesitas seleccionar elementos usando selectors antes de usar atomicBlockSelectors.

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

Más explicaciones de parámetros de pageRule:

export interface PageRule {
  excludeMatches?: string | string[]; // Excluir sitios web específicos.
  selectorMatches?: string | string[]; // Coincidir usando selectores sin especificar todas las URLs
  excludeSelectorMatches?: string | string[]; // Excluir reglas, igual que arriba.

  // Especificar rango de traducción
  selectors?: string | string[]; // Traducir solo elementos coincidentes
  excludeSelectors?: string | string[]; // Excluir elementos, no traducir elementos coincidentes
  excludeTags?: string | string[]; // Excluir etiquetas, no traducir etiquetas coincidentes

  // Agregar rango de traducción, no anular
  additionalSelectors?: string | string[]; // Agregar rango de traducción. Agregar posiciones de traducción en áreas de traducción inteligente.
  additionalExcludeSelectors?: string | string[]; // Agregar elementos excluidos para prevenir traducción inteligente en posiciones específicas.
  additionalExcludeTags?: string | string[]; // Agregar etiquetas excluidas

  // Mantener original
  stayOriginalSelectors?: string | string[]; // Los elementos coincidentes permanecerán originales. Comúnmente usado para etiquetas en sitios web de foros.
  stayOriginalTags?: string | string[]; // Las etiquetas coincidentes permanecerán originales, como `code`

  // Traducción de región
  atomicBlockSelectors?: string | string[]; // Selector de región, los elementos coincidentes serán considerados como un todo, no traducidos en segmentos
  atomicBlockTags?: string | string[]; // Selector de etiqueta de región, igual que arriba

  // Bloque o Inline
  extraBlockSelectors?: string | string[]; // Selectores adicionales, los elementos coincidentes serán tratados como elementos de bloque, ocupando una línea.
  extraInlineSelectors?: string | string[]; // Selectores adicionales, los elementos coincidentes serán tratados como elementos en línea.

  inlineTags?: string | string[]; // Las etiquetas coincidentes serán tratadas como elementos en línea
  preWhitespaceDetectedTags?: string | string[]; // Las etiquetas coincidentes envolverán automáticamente líneas

  // Estilos de traducción
  translationClasses?: string | string | string[]; // Agregar clases adicionales a la traducción

  // Estilos globales
  globalStyles?: Record<string, string>; // Modificar estilos de página, útil cuando las traducciones causan desorden en la página.
  globalAttributes?: Record<string, Record<string, string>>; // Modificar atributos de elementos de la página

  // Estilos incrustados
  injectedCss?: string | string[]; // Incrustar estilos CSS
  additionalInjectedCss?: string | string[]; // Agregar estilos CSS en lugar de anular directamente.

  // Contexto
  wrapperPrefix?: string; // Prefijo del área de traducción, por defecto es inteligente, decide si envolver líneas basado en el número de caracteres.
  wrapperSuffix?: string; // Sufijo del área de traducción

  // Conteo de caracteres para envolver traducción
  blockMinTextCount?: number; // Conteo mínimo de caracteres para traducir como un bloque, de lo contrario, la traducción será un elemento en línea.
  blockMinWordCount?: number; // Igual que arriba. Para siempre envolver líneas, establece ambos en 0.

  // Conteo mínimo de caracteres para contenido traducible
  containerMinTextCount?: number; // Conteo mínimo de caracteres para que los elementos sean traducidos durante el reconocimiento inteligente, por defecto es 18
  paragraphMinTextCount?: number; // Conteo mínimo de caracteres para párrafo original, contenido mayor al número será traducido
  paragraphMinWordCount?: number; // Conteo mínimo de palabras para párrafo original

  // Conteo de caracteres para salto de línea forzado en párrafos largos
  lineBreakMaxTextCount?: number; // Conteo máximo de caracteres para salto de línea forzado al traducir párrafos largos.

  // Momento para iniciar la traducción
  urlChangeDelay?: number; // Retraso en milisegundos antes de iniciar la traducción después de entrar en la página. El valor por defecto es 250ms para esperar la inicialización de la página web.

  // Traducción en streaming de IA
  aiRule: {
    streamingSelector: string; // Selector de página web GPT marcando el elemento que se está traduciendo
    messageWrapperSelector: string; // Selector del cuerpo del mensaje
    streamingChange: boolean; // Actualización incremental o completa para mensajes repetidos en páginas web tipo GPT. GPT es incremental
  };
}