मुख्य सामग्री पर जाएं

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 चयनकर्ता का उपयोग कर सकते हैं। ध्यान दें कि atomicBlockSelectors का उपयोग करने से पहले आपको selectors का उपयोग करके तत्वों का चयन करना होगा।

{
  "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[]; // सभी URLs को निर्दिष्ट किए बिना चयनकर्ताओं का उपयोग करके मेल खाएं
  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[]; // क्षेत्र टैग चयनकर्ता, जैसा कि ऊपर है

  // ब्लॉक या इनलाइन
  extraBlockSelectors?: string | string[]; // अतिरिक्त चयनकर्ता, मेल खाने वाले तत्व ब्लॉक तत्वों के रूप में माने जाएंगे, एक लाइन पर कब्जा करेंगे।
  extraInlineSelectors?: string | string[]; // अतिरिक्त चयनकर्ता, मेल खाने वाले तत्व इनलाइन तत्वों के रूप में माने जाएंगे।

  inlineTags?: string | string[]; // मेल खाने वाले टैग इनलाइन तत्वों के रूप में माने जाएंगे
  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; // ब्लॉक के रूप में अनुवाद के लिए न्यूनतम वर्ण संख्या, अन्यथा, अनुवाद एक इनलाइन तत्व होगा।
  blockMinWordCount?: number; // जैसा कि ऊपर। लाइनों को हमेशा लपेटने के लिए, दोनों को 0 पर सेट करें।

  // अनुवाद योग्य सामग्री के लिए न्यूनतम वर्ण संख्या
  containerMinTextCount?: number; // स्मार्ट पहचान के दौरान अनुवादित होने वाले तत्वों के लिए न्यूनतम वर्ण संख्या, डिफ़ॉल्ट 18 है
  paragraphMinTextCount?: number; // मूल अनुच्छेद के लिए न्यूनतम वर्ण संख्या, संख्या से अधिक सामग्री का अनुवाद किया जाएगा
  paragraphMinWordCount?: number; // मूल अनुच्छेद के लिए न्यूनतम शब्द संख्या

  // लंबे अनुच्छेदों के लिए मजबूर लाइन ब्रेक वर्ण संख्या
  lineBreakMaxTextCount?: number; // लंबे अनुच्छेदों का अनुवाद करते समय मजबूर लाइन ब्रेक के लिए अधिकतम वर्ण संख्या।

  // अनुवाद शुरू करने का समय
  urlChangeDelay?: number; // पृष्ठ में प्रवेश करने के बाद अनुवाद शुरू करने से पहले मिलीसेकंड में विलंब। डिफ़ॉल्ट 250ms है ताकि वेबपेज प्रारंभिककरण के लिए प्रतीक्षा की जा सके।

  // AI स्ट्रीमिंग अनुवाद
  aiRule: {
    streamingSelector: string; // GPT वेबपेज चयनकर्ता जो अनुवादित तत्व को चिह्नित करता है
    messageWrapperSelector: string; // संदेश बॉडी चयनकर्ता
    streamingChange: boolean; // GPT-जैसे वेबपेजों में दोहराए गए संदेशों के लिए वृद्धिशील या पूर्ण अपडेट। GPT वृद्धिशील है
  };
}