DOCSEARCHbyAlgolia
Submit Docs

i18n-jsautotranslate Documentation

repository·master·Indexed 25 days ago

https://github.com/xnx3/translate

An AI-driven i18n library (translate.js) that provides automatic, zero-configuration HTML translation via JavaScript. It enables multi-language support without modifying source code, managing API keys, or using language configuration files. The project includes the i18n-jsautotranslate npm package (v4.1.0), a Translate AI BOT for automated integration using Playwright and Claude AI, a Chrome extension, and specialized integrations for Vue 3 with ArcoDesign and Layui.

Tokens
17.8K
Snippets
37
Records
111
Agent score
84%

What's inside i18n-jsautotranslate

  1. Overview of translate.service with ZhipuAI

    master

    The translate.service acts as a middleware scheduler for ZhipuAI's large language models (LLMs) to provide high-quality text translation. It offers two primary capabilities:

    1. Standard Text Translation API: Provides a reliable API for translating text without requiring direct interaction with LLM prompting logic.
    2. Website Multi-language Support: Enables existing websites or backends to support dozens of languages via a simple integration (adding two lines of JavaScript), allowing users to switch languages via a UI button.

    Key advantages include cost-efficiency by utilizing the GLM-4-Flash free model and high reliability through a multi-stage self-checking mechanism.

  2. Overview of translate.js

    master

    translate.js is an AI-powered i18n library that enables automatic HTML translation using just a few lines of JavaScript. It is designed to be zero-config: it requires no language files, no API keys, and no modifications to your existing page structure. It works by scanning the DOM to identify and translate text content automatically.

    Key Features

    • Zero Configuration: No need to manage language JSON files or request API keys. It scans the DOM and translates content on the fly.
    • SEO Friendly: It does not modify the original source code of the webpage, ensuring that search engine crawlers see the original content.
    • High Performance: Utilizes multi-threading, a three-layer caching mechanism, pre-loading, and text pre-processing to provide millisecond-level translation speeds.
    • Flexible Customization: Supports translating only specific DOM areas, excluding certain IDs/classes/tags from translation, defining custom terminology, and customizing the language switcher UI.
    • Automatic Language Detection: Can automatically switch languages based on the user's browser language or geographic location.
    • Global Availability: Uses a global network of nodes (Americas, Asia, Europe, etc.) and automatically selects the lowest-latency node every minute.
    • Privacy & Deployment: Supports private deployment for scenarios requiring high data security or air-gapped environments.
    • Open Source: Licensed under the MIT license.

  3. Overview of translate.service-admin

    master
    The translate.service-admin project is a web-based management interface for the privately deployed translate.service. It acts as a simplified UI layer that interacts with the management API endpoints provided by a translate.service private deployment. It does not contain independent logic but rather provides a user interface to simplify the calling of existing translate.service APIs.

  4. Compare Translate Service with translate.js

    master

    It is important to distinguish between the Translate Service and the translate.js library:

    • translate.js: Performs automated translation on the page via JavaScript for the user's view. However, the underlying HTML source code remains in the original language.
    • Translate Service: Operates at the source code level (acting as a translation layer/CDN). The HTML source code itself is translated before reaching the browser, which is essential for search engine indexing (SEO).

  5. Understand the limitations of `translate.js` for cross-platform use

    master

    The current implementation of translate.js is primarily a Web DOM automatic translator. It relies heavily on Web-specific APIs such as DOM, iframe, postMessage, and MutationObserver.

    Important: You cannot directly reuse the DOM scanning or iframe logic in WeChat Mini Programs, Android, iOS, or HarmonyOS. For cross-platform needs, you should only attempt to reuse the 'translation kernel' and 'object translation capabilities' by implementing custom adapters for those platforms.

  7. Quickstart: Integrate translate.js with Layui

    master

    To use the translate.js AI translation module in a Layui-based project, include the translate.js script in your <head> and configure the translation settings.

    Key configuration steps:

    1. Set Local Language: Use translate.language.setLocal('language_code') to set the target language (e.g., 'chinese_simplified'). If not set, it will attempt auto-detection.
    2. Set Translation Service: Use translate.service.use('service_name') to select the translation channel (e.g., 'client.edge').
    3. Visual Effects:
      • translate.visual.webPageLoadTranslateBeforeHiddenText(): Automatically hides original text when the page loads and shows translated text once complete.
      • translate.progress.api.startUITip(): Enables a UI mask/overlay during the translation process.
    4. Execution: Call translate.execute() once the DOM is fully loaded (e.g., inside window.onload).
    <script src="./translate/translate.js"></script>
<script>
translate.language.setLocal('chinese_simplified'); 
translate.service.use('client.edge'); 
translate.visual.webPageLoadTranslateBeforeHiddenText(); 
translate.progress.api.startUITip(); 

window.onload = function () {
	translate.execute(); 
};
</script>

  9. Provision a server for translate service

    master

    To host the translation service, provision a server with the following minimum specifications:

    • CPU: 1 Core
    • Memory: 1 GB
    • OS: CentOS 7.4 (or 7.6 if 7.4 is unavailable)
    • Disk: Default system disk (no data disk required)
    • Network: Elastic Public IP (Bandwidth: 1MB is sufficient for low volume; 10MB for higher volume)
    • Security Group: Ensure ports 22 and 80 are open.

    Note: Select the most cost-effective instance type available (e.g., t6).

  10. Use the LanguageSelect component in Vue 3

    master

    To add a basic language switcher to your Vue 3 application, import the LanguageSelect component from i18n-jsautotranslate/vue/vue3/LanguageSelect.vue and place the <LanguageSelect/> tag in your template.

    By default, the component renders a standard HTML select menu. You can style it using the .LanguageSelect CSS class.

    <template>
  <div class="login">
    <h3 class="login-logo">
      Logo
    </h3>

    <!-- 多语言切换的 Select 下拉选择 -->
    <LanguageSelect/>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import LanguageSelect from 'i18n-jsautotranslate/vue/vue3/LanguageSelect.vue';
</script>

<style scoped>
.LanguageSelect {
  position: fixed;
  top: 20px;
  right: 80px;
}
</style>

  11. Integrate translate.js for automatic website multi-language support

    master

    To add multi-language switching to your website, include the translate.js script at the very end of your HTML (before the closing </body> tag). The script scans the DOM to identify and translate text elements.

    Implementation Steps:

    1. Include the script via CDN or host it locally.
    2. Configure the local language, the translation service host, and execute the translation.

    Note: translate.js is standard vanilla JavaScript with no dependencies and is open-source.

  12. Enable context-aware translation with translate.whole

    master

    To improve translation quality for sentences split by HTML tags (like <a>, <span>, or <b>), use the translate.whole capability. When an element is marked for translate.whole, the system collects continuous inline text nodes into a single context for translation rather than translating each node individually.

    Context Merging Rules

    Within a translate.whole container, the following inline elements can be merged into a single translation unit:

    • TextNode
    • a
    • span
    • b
    • strong
    • em
    • i
    • small
    • font
    • Other elements with display: inline

    Context Boundary Rules

    Translation context will be cut (terminated) if any of the following are encountered:

    • Block-level elements: div, p, section, article, table, ul, ol, etc.
    • Line breaks: br
    • Code blocks: pre, block-level code
    • Scripting/Styling: script, style
    • Ignored elements: Elements matching translate.ignore rules, class="notranslate", or translate="no".
    • Form elements: input, textarea, or any contenteditable elements.
    • Hidden elements.