帶有 API 的簡單語言翻譯器

首頁 > 程式設計 > 帶有 API 的簡單語言翻譯器

帶有 API 的簡單語言翻譯器

發佈於2024-10-31

Simple Language Translator with API

#100daysofMiva 编码挑战的第 8 天，我研究了一个简单的翻译模型，可以将一种语言翻译成另一种语言？
这是JS，这很神奇✨？

？语言翻译器脚本文档

概述

此 JavaScript 代码旨在创建一个有趣的交互式语言翻译器！它利用 MyMemory API 在不同语言之间翻译文本，并允许您交换语言、复制翻译，甚至大声朗读文本。 ??

特征

？语言选择：用户可以从多种语言中进行选择，从阿姆哈拉语到祖鲁语！
？语言交换： 单击按钮即可轻松在源语言和目标语言之间交换。
？文本转语音： 聆听所选语言的原始文本或翻译文本。
？复制到剪贴板： 单击即可复制原始文本或翻译文本。

代码分解

语言数据

const countries = { /*...*/ }

该对象包含可用的语言及其各自的国家代码。例如，“en-GB”：“English”将语言代码与其名称配对。

动态下拉菜单

selectTag.forEach((tag, id) => {
    /*...*/
});

此代码使用国家对象中列出的所有语言动态填充下拉菜单。第一个下拉列表默认为英语（“en-GB”），第二个下拉列表默认为印地语（“hi-IN”）。

语言交换

exchageIcon.addEventListener("click", () => {
    /*...*/
});

单击交换图标允许用户在“从”和“到”字段之间交换文本和所选语言。

实时翻译

translateBtn.addEventListener("click", () => {
    /*...*/
});

单击“翻译”按钮时，文本将发送到 MyMemory API，翻译后的文本将显示在“目标文本”字段中。在等待响应时，会显示“正在翻译...”占位符。

文本转语音和复制

icons.forEach(icon => {
    /*...*/
});

本部分处理文本转语音和复制功能：

语音：以所选语言大声播放文本。
复制：将文本复制到剪贴板。

它是如何运作的

选择语言 ?：从下拉列表中选择您的语言。
输入或粘贴文本 ✍️：输入要翻译的文本。
翻译 ?：点击“翻译”按钮，观看奇迹发生！
交换、聆听或复制 ???：交换语言、聆听翻译或将文本复制到剪贴板。

依赖关系

MyMemory API：翻译功能由 MyMemory API 提供支持。确保您有有效的互联网连接才能正常工作。

潜在的增强功能

语言自动检测：自动检测输入文本的语言。
高级错误处理：改进对翻译错误或 API 故障的响应。
多种翻译：显示可用的替代翻译。

以下是代码的工作原理及其用途的逐步细分：

第 1 步：定义可用语言

const countries = { /*...*/ }

它的作用：该对象包含键值对，其中键是语言国家代码（例如英语的“en-GB”），值是语言的名称（例如“English” ).
目的：此数据用于填充语言选择下拉列表，以便用户可以选择其源语言和目标语言。

第 2 步：选择 DOM 元素

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

它的作用：此代码从 HTML 文档中选择各种元素并将它们存储在变量中以便以后轻松访问。
- fromText 和 toText：用户输入文本并查看翻译的文本区域。
- exchageIcon: 用于交换语言和文本的图标。
- selectTag：用于选择语言的下拉菜单。
- 图标：复制和语音功能的图标。
- translateBtn: 触发翻译的按钮。

第 3 步：填充语言下拉列表

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = ``;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

它的作用：此循环遍历国家对象并将每种语言添加为语言选择下拉列表中的选项。
- 如果下拉菜单是第一个（id == 0），则默认选择英语（“en-GB”）。
- 如果下拉菜单是第二个（id == 1），则默认选择印地语（“hi-IN”）。

第 4 步：交换语言和文本

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

它的作用：单击交换图标时，此功能会在“从”和“到”文本区域以及所选语言之间交换文本。
- tempText 暂时保存“from-text”字段中的原始文本。
- tempLang 暂时保留第一个下拉列表中的原始语言。
- 然后将“源文本”替换为“目标文本”，反之亦然。所选语言也会交换。

第5步：清除翻译文本

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

它的作用：如果用户删除“from-text”字段中的所有文本，此函数也会自动清除“to-text”字段。
目的：确保如果输入文本被清除，翻译也被清除，防止混淆。

第 6 步：翻译文本

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

它的作用：当单击“翻译”按钮时，此功能：
1. 从“from-text”字段中提取文本。
2. 从下拉列表中标识所选语言。
3. 使用文本和所选语言向 MyMemory API 发送请求。
4. 从 API 接收翻译并将其显示在“目标文本”字段中。
5. 更新占位符文本，同时等待翻译以指示该过程正在进行。