Salta al contenuto principale

JS SDK

Il Translify JS SDK ti aiuta a implementare la traduzione bilingue sul tuo sito web.

Come Usare​

  1. Inizializza Translify:
<script>
  window.immersiveTranslateConfig = {
    pageRule: {}
  }
</script>
  1. Aggiungi il seguente codice script alla tua pagina web
<script src="https://download.translify.ai/immersive-translate-sdk-latest.js"></script>

Esempio

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

Parametri​

Con pageRule, puoi personalizzare la configurazione del sito web, decidendo quale contenuto deve essere tradotto o regolando gli stili della pagina web.

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

Utilizzando selectors sovrascriverai l'intervallo di traduzione intelligente, traducendo solo gli elementi corrispondenti al selettore.

Utilizzando excludeSelectors puoi escludere elementi dalla traduzione.

Utilizzando selectors.add aggiungerai alcuni selettori sopra quelli predefiniti.

Utilizzando selectors.remove rimuoverai alcuni selettori da quelli predefiniti.

Se vuoi tradurre un'area specifica e considerare un elemento nel suo insieme senza suddividerlo in righe, puoi usare il selettore atomicBlockSelectors. Nota che devi selezionare gli elementi usando selectors prima di utilizzare atomicBlockSelectors.

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

Ulteriori spiegazioni sui parametri di pageRule:

export interface PageRule {
  excludeMatches?: string | string[]; // Escludi siti web specifici.
  selectorMatches?: string | string[]; // Corrispondenza utilizzando selettori senza specificare tutti gli URL
  excludeSelectorMatches?: string | string[]; // Escludi regole, come sopra.

  // Specifica l'intervallo di traduzione
  selectors?: string | string[]; // Traduci solo elementi corrispondenti
  excludeSelectors?: string | string[]; // Escludi elementi, non tradurre elementi corrispondenti
  excludeTags?: string | string[]; // Escludi tag, non tradurre tag corrispondenti

  // Aggiungi intervallo di traduzione, non sovrascrivere
  additionalSelectors?: string | string[]; // Aggiungi intervallo di traduzione. Aggiungi posizioni di traduzione in aree di traduzione intelligente.
  additionalExcludeSelectors?: string | string[]; // Aggiungi elementi esclusi per prevenire la traduzione intelligente in posizioni specifiche.
  additionalExcludeTags?: string | string[]; // Aggiungi tag esclusi

  // Mantieni originale
  stayOriginalSelectors?: string | string[]; // Gli elementi corrispondenti rimarranno originali. Comunemente usato per tag su siti web di forum.
  stayOriginalTags?: string | string[]; // I tag corrispondenti rimarranno originali, come `code`

  // Traduzione di regione
  atomicBlockSelectors?: string | string[]; // Selettore di regione, gli elementi corrispondenti saranno considerati nel loro insieme, non tradotti in segmenti
  atomicBlockTags?: string | string[]; // Selettore di tag di regione, come sopra

  // Blocco o Inline
  extraBlockSelectors?: string | string[]; // Selettori extra, gli elementi corrispondenti saranno trattati come elementi di blocco, occupando una linea.
  extraInlineSelectors?: string | string[]; // Selettori extra, gli elementi corrispondenti saranno trattati come elementi inline.

  inlineTags?: string | string[]; // I tag corrispondenti saranno trattati come elementi inline
  preWhitespaceDetectedTags?: string | string[]; // I tag corrispondenti avvolgeranno automaticamente le righe

  // Stili di traduzione
  translationClasses?: string | string | string[]; // Aggiungi classi extra alla traduzione

  // Stili globali
  globalStyles?: Record<string, string>; // Modifica gli stili della pagina, utile quando le traduzioni causano disordine nella pagina.
  globalAttributes?: Record<string, Record<string, string>>; // Modifica gli attributi degli elementi della pagina

  // Stili incorporati
  injectedCss?: string | string[]; // Incorpora stili CSS
  additionalInjectedCss?: string | string[]; // Aggiungi stili CSS invece di sovrascrivere direttamente.

  // Contesto
  wrapperPrefix?: string; // Prefisso dell'area di traduzione, predefinito è intelligente, decide se avvolgere le righe in base al numero di caratteri.
  wrapperSuffix?: string; // Suffisso dell'area di traduzione

  // Conteggio caratteri di avvolgimento traduzione
  blockMinTextCount?: number; // Conteggio minimo di caratteri per la traduzione come blocco, altrimenti, la traduzione sarà un elemento inline.
  blockMinWordCount?: number; // Come sopra. Per avvolgere sempre le righe, imposta entrambi a 0.

  // Conteggio minimo di caratteri per contenuto traducibile
  containerMinTextCount?: number; // Conteggio minimo di caratteri per elementi da tradurre durante il riconoscimento intelligente, predefinito è 18
  paragraphMinTextCount?: number; // Conteggio minimo di caratteri per paragrafo originale, contenuto maggiore del numero sarà tradotto
  paragraphMinWordCount?: number; // Conteggio minimo di parole per paragrafo originale

  // Conteggio caratteri di interruzione forzata per paragrafi lunghi
  lineBreakMaxTextCount?: number; // Conteggio massimo di caratteri per interruzione forzata quando si traducono paragrafi lunghi.

  // Tempistica per iniziare la traduzione
  urlChangeDelay?: number; // Ritardo in millisecondi prima di iniziare la traduzione dopo l'ingresso nella pagina. Predefinito è 250ms per attendere l'inizializzazione della pagina web.

  // Traduzione streaming AI
  aiRule: {
    streamingSelector: string; // Selettore pagina GPT che segna l'elemento in traduzione
    messageWrapperSelector: string; // Selettore del corpo del messaggio
    streamingChange: boolean; // Aggiornamento incrementale o completo per messaggi ripetuti in pagine simili a GPT. GPT è incrementale
  };
}