#100daysofMiva कोडिंग चुनौती का 8वां दिन और मैंने एक सरल अनुवादक मॉडल पर काम किया जो एक भाषा का दूसरी भाषा में अनुवाद करता है?
यह जेएस है, यह जादू है✨?

? भाषा अनुवादक स्क्रिप्ट दस्तावेज़ीकरण

सिंहावलोकन

यह जावास्क्रिप्ट कोड एक चंचल, इंटरैक्टिव भाषा अनुवादक बनाने के लिए डिज़ाइन किया गया है! यह विभिन्न भाषाओं के बीच पाठ का अनुवाद करने के लिए MyMemory API का उपयोग करता है और आपको भाषाओं को स्वैप करने, अनुवादों की प्रतिलिपि बनाने या यहां तक ​​कि पाठ को ज़ोर से बोलने की अनुमति देता है। ??

विशेषताएँ

• ? भाषा चयन: उपयोगकर्ता अम्हारिक् से लेकर ज़ुलू तक कई भाषाओं में से चुन सकते हैं!
• ? भाषा अदला-बदली: एक बटन के एक क्लिक से स्रोत और लक्ष्य भाषाओं के बीच आसानी से अदला-बदली करें।
• ? टेक्स्ट-टू-स्पीच: चयनित भाषा में मूल या अनुवादित टेक्स्ट को सुनें।
• ? क्लिपबोर्ड पर कॉपी करें: मूल या अनुवादित पाठ को एक क्लिक से कॉपी करें।

कोड ब्रेकडाउन

भाषा डेटा

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

इस ऑब्जेक्ट में उपलब्ध भाषाएं और उनके संबंधित देश कोड शामिल हैं। उदाहरण के लिए, "en-GB": "अंग्रेजी" भाषा कोड को उसके नाम के साथ जोड़ता है।

गतिशील ड्रॉपडाउन

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

यह कोड देश ऑब्जेक्ट में सूचीबद्ध सभी भाषाओं के साथ ड्रॉपडाउन मेनू को गतिशील रूप से पॉप्युलेट करता है। पहला ड्रॉपडाउन डिफ़ॉल्ट रूप से अंग्रेजी ("en-GB"), और दूसरा हिंदी ("hi-IN") पर डिफ़ॉल्ट होता है।

भाषा अदला-बदली

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

स्वैप आइकन पर क्लिक करने से उपयोगकर्ता "से" और "से" फ़ील्ड के बीच टेक्स्ट और चयनित भाषाओं को स्वैप कर सकते हैं।

वास्तविक समय अनुवाद

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

जब "अनुवाद" बटन पर क्लिक किया जाता है, तो पाठ MyMemory API पर भेजा जाता है, और अनुवादित पाठ "टू-टेक्स्ट" फ़ील्ड में प्रदर्शित होता है। प्रतिक्रिया की प्रतीक्षा करते समय, एक "अनुवाद हो रहा है..." प्लेसहोल्डर दिखाया जाता है।

टेक्स्ट-टू-स्पीच और कॉपी

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

यह अनुभाग टेक्स्ट-टू-स्पीच और कॉपी कार्यप्रणाली को संभालता है:

• भाषण: चयनित भाषा में पाठ को ज़ोर से चलाता है।
• कॉपी: टेक्स्ट को क्लिपबोर्ड पर कॉपी करता है।

यह काम किस प्रकार करता है

1. भाषाएं चुनें ?: ड्रॉपडाउन से अपनी भाषाएं चुनें।
2. टेक्स्ट टाइप या पेस्ट करें ✍️: वह टेक्स्ट इनपुट करें जिसका आप अनुवाद करना चाहते हैं।
3. अनुवाद करें ?: "अनुवाद करें" बटन पर क्लिक करें और जादू होते हुए देखें!
4. स्वैप करें, सुनें, या कॉपी करें ???: भाषाएं बदलें, अनुवाद सुनें, या टेक्स्ट को अपने क्लिपबोर्ड पर कॉपी करें।

निर्भरताएँ

• MyMemory API: अनुवाद कार्यक्षमता MyMemory API द्वारा संचालित है। सुनिश्चित करें कि इसके काम करने के लिए आपके पास एक सक्रिय इंटरनेट कनेक्शन है।

संभावित संवर्द्धन

• भाषा ऑटो-डिटेक्शन: इनपुट टेक्स्ट की भाषा का स्वचालित रूप से पता लगाएं।
• उन्नत त्रुटि प्रबंधन: अनुवाद त्रुटियों या एपीआई विफलताओं के लिए प्रतिक्रिया में सुधार करें।
• एकाधिक अनुवाद: जहां उपलब्ध हो वहां वैकल्पिक अनुवाद दिखाएं।

कोड कैसे काम करता है और क्या करता है, इसका चरण-दर-चरण विवरण यहां दिया गया है:

चरण 1: उपलब्ध भाषाओं को परिभाषित करना

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

• यह क्या करता है: इस ऑब्जेक्ट में कुंजी-मूल्य जोड़े हैं जहां कुंजी एक भाषा-देश कोड है (जैसे अंग्रेजी के लिए "एन-जीबी") और मान भाषा का नाम है (जैसे "अंग्रेजी" ).
• उद्देश्य: इस डेटा का उपयोग भाषा चयन ड्रॉपडाउन को पॉप्युलेट करने के लिए किया जाता है ताकि उपयोगकर्ता अपना स्रोत और लक्ष्य भाषा चुन सकें।

चरण 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: भाषाओं और पाठ को स्वैप करने के लिए उपयोग किया जाने वाला आइकन।
  • सेलेक्टटैग: भाषाओं के चयन के लिए ड्रॉपडाउन मेनू।
  • आइकन: कॉपी और भाषण कार्यों के लिए आइकन।
  • 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 = `${countries[country_code]}`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• यह क्या करता है: यह लूप देशों के ऑब्जेक्ट से होकर गुजरता है और प्रत्येक भाषा को भाषा चयन ड्रॉपडाउन में एक विकल्प के रूप में जोड़ता है।
  • यदि ड्रॉपडाउन पहला है (आईडी == 0), तो अंग्रेजी ("एन-जीबी") डिफ़ॉल्ट रूप से चयनित है।
  • यदि ड्रॉपडाउन दूसरा है (आईडी == 1), तो हिंदी ("हाय-आईएन") डिफ़ॉल्ट रूप से चयनित है।

चरण 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 अस्थायी रूप से मूल पाठ को "से-पाठ" फ़ील्ड से रखता है।
  • टेम्पलैंग पहले ड्रॉपडाउन से मूल भाषा को अस्थायी रूप से रखता है।
  • फिर "से-पाठ" को "से-पाठ" से बदल दिया जाता है, और इसके विपरीत। चयनित भाषाओं की भी अदला-बदली की जाती है।

चरण 5: अनुवादित पाठ साफ़ करना

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

• यह क्या करता है: यदि उपयोगकर्ता "से-टेक्स्ट" फ़ील्ड से सभी टेक्स्ट हटा देता है, तो यह फ़ंक्शन स्वचालित रूप से "टू-टेक्स्ट" फ़ील्ड को भी साफ़ कर देता है।
• उद्देश्य: यह सुनिश्चित करता है कि यदि इनपुट टेक्स्ट साफ़ हो जाता है, तो अनुवाद भी साफ़ हो जाता है, जिससे भ्रम की स्थिति नहीं बनती है।

चरण 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. "पाठ से" फ़ील्ड से पाठ को निकालता है।
  2. ड्रॉपडाउन से चयनित भाषाओं की पहचान करता है।
  3. पाठ और चयनित भाषाओं के साथ MyMemory API को एक अनुरोध भेजता है।
  4. एपीआई से अनुवाद प्राप्त करता है और इसे "टू-टेक्स्ट" फ़ील्ड में प्रदर्शित करता है।
  5. अनुवाद की प्रतीक्षा करते समय प्लेसहोल्डर टेक्स्ट को अपडेट करता है यह इंगित करने के लिए कि प्रक्रिया जारी है।

सारांश

स्क्रिप्ट उपयोगकर्ताओं को एक गतिशील और इंटरैक्टिव इंटरफ़ेस के साथ विभिन्न भाषाओं के बीच पाठ का अनुवाद करने की अनुमति देती है। उपयोगकर्ता भाषाओं का चयन कर सकते हैं, अपना टेक्स्ट टाइप कर सकते हैं, एक क्लिक से इसका अनुवाद कर सकते हैं, भाषाओं और टेक्स्ट की अदला-बदली कर सकते हैं, बोले गए अनुवाद को ज़ोर से सुन सकते हैं, या इसे अपने क्लिपबोर्ड पर कॉपी कर सकते हैं।

विभिन्न भाषाओं के साथ खेलने का आनंद लें और अपनी अनुवाद यात्रा को मज़ेदार और इंटरैक्टिव बनाएं! ?? अगले तक ?✌?✨

यहां इसकी जांच कीजिए
https://app.marvelly.com.ng/100daysofMiva/day-8/

सोर्स कोड
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_langage_translator