Google AJAX भाषा API का व्यावहारिक अनुप्रयोग - हम अपनी परियोजना में एक अनुवादक को एम्बेड करते हैं।

बधाई, प्रिय पाठकों! शायद कुछ अनैतिक रूप से, लेकिन मुझे यह घोषणा करने दें कि रनेट में पहली समीक्षा होगी और जावास्क्रिप्ट अनुप्रयोगों से अनुवाद सेवाओं तक पहुंचने के लिए हाल ही में खोले गए Google AJAX भाषा एपीआई के व्यावहारिक अनुप्रयोग का वर्णन होगा। हर जगह मैंने अब तक केवल घोषणाएं और विश्लेषण करने का प्रयास किया है कि यह डेवलपर्स और उपयोगकर्ताओं के लिए क्या हो सकता है, लेकिन मैंने अभी तक अपनी वेबसाइट या प्रोजेक्ट में एम्बेड करने के निर्देशों को नहीं पढ़ा है, इसलिए मैंने इसे जानने और इसे स्वयं लिखने का फैसला किया।



और इसलिए, पहले, सामान्य जानकारी। जैसा कि आप जानते हैं, Google की एक अनुवाद सेवा है जो एक दर्जन से अधिक भाषाओं में ग्रंथों का अनुवाद कर सकती है। अनुवाद के बहुत अधिक जोड़े हैं, लेकिन कुछ भाषाओं के लिए केवल एक या दो भाषाओं में अनुवाद उपलब्ध हैं, दूसरों के लिए, उदाहरण के लिए, अंग्रेजी - कई में। पहले, आप इस सेवा का उपयोग फ़्लाई पर वेब पेजों का अनुवाद करने के लिए कर सकते थे, या किसी ब्राउज़र में अलग-अलग शब्दों और वाक्यों का अनुवाद कर सकते थे, लेकिन AJAX का उपयोग करके सेवा की दूरस्थ पहुँच ने संबंधित API को खोलकर और कोड उदाहरणों को पोस्ट करके केवल दूसरे दिन ही संभव बना दिया।



एपीआई में स्रोत पाठ की भाषा को स्वचालित रूप से निर्धारित करने के लिए फ़ंक्शन शामिल हैं, और वास्तव में, अनुवाद स्वयं। अब तक तेरह विभिन्न भाषाओं और उनतीस अनुवाद विकल्पों का समर्थन किया जाता है। दुर्भाग्य से, रूसी केवल रूसी की एक जोड़ी के रूप में समर्थित है <> अंग्रेजी, अर्थात्, रूसी से अंग्रेजी में अनुवाद और इसके विपरीत, और अनुवाद की सबसे बड़ी संख्या, निश्चित रूप से अंग्रेजी के लिए है। हालांकि, वे भविष्य में स्थानांतरण की संभावनाओं को फिर से भरने का वादा करते हैं, इसलिए निराशा न करें।



अनुवाद स्वयं सर्वर पर किया जाता है, क्लाइंट कोड भाषा की मान्यता और अनुवाद के लिए पाठ भेजता है और एक प्रतिक्रिया प्राप्त करता है, इसे उपयोगकर्ता को प्रदर्शित करता है। ध्यान दें कि अनुवाद के लिए भाषा का निर्धारण करने के लिए कोई पृष्ठभूमि कार्य नहीं है, इसलिए आपको हमेशा अपने पाठ की भाषा निर्धारित करने की आवश्यकता है (यदि आप इसे मैन्युअल रूप से निर्दिष्ट नहीं करते हैं), और फिर इसे अनुवाद में भेजें।



अब तक, अनुरोधों की संख्या पर प्रतिबंध के बारे में कुछ भी ज्ञात नहीं है, लेकिन एक अनुरोध (500 वर्ण) में पाठ की लंबाई पर प्रतिबंध पहले से ही कष्टप्रद हो सकता है। हालांकि, मुझे लगता है कि आप स्वयं यह पता लगाएंगे कि इसके आस-पास कैसे पहुंचें (परीक्षण को ऐसे टुकड़ों में काटकर एक-एक करके उनका अनुवाद करना काफी सरल है)।



तो इन अवसरों का उपयोग कहां और कैसे किया जा सकता है? खैर, ऑफहैंड, कम से कम दो विकल्प कुछ लघु ग्रंथों का अनुवाद हैं, उदाहरण के लिए, उत्पाद विवरण या लेख एनोटेशन और उपयोगकर्ता की भाषा में इंटरफ़ेस और / या संकेत प्रणाली का स्वचालित अनुवाद।



आइए अब एक वेबसाइट (किसी भी) के लिए एक मॉड्यूल का एक विशिष्ट उदाहरण देखें जहां ऐसा समाधान लागू किया जा सकता है। मैंने इसे अपनी परियोजनाओं में से एक के लिए किया था, इसलिए आप अपने संसाधन पर काम करने की आवश्यकता को बदल सकते हैं।



चूंकि सभी भाषाओं में अनुवाद की सभी दिशाएं पूरी तरह से नहीं हैं, और हमें हमेशा सभी विशेषताओं की आवश्यकता नहीं होती है, पहले हम अनुवाद के सभी विकल्पों को निर्धारित करेंगे, जो हमारे लिए रुचि रखते हैं। चलिए वैश्विक वैरिएबल trans_var बनाते हैं, जिसमें निम्नलिखित सरणी होगी:

var trans_var = {"en":[{"code":"zh","lang":"Chinese"},{"code":"fr","lang":"French"},

{"code":"de","lang":"German"},{"code":"ru","lang":"Russian"},

{"code":"es","lang":"Spanish"}

],

"ru":[{"code":"en","lang":"English"}],

"de":[{"code":"en","lang":"English"},{"code":"fr","lang":"French"}],

"zh":[{"code":"en","lang":"English"}]};



इसका मतलब है कि हमारा स्रोत पाठ अंग्रेजी, रूसी, जर्मन और चीनी में हो सकता है, हमने यह भी निर्धारित किया है कि स्रोत पाठ के प्रत्येक संस्करण को किन भाषाओं में अनुवादित किया जा सकता है। अंग्रेजी के लिए सबसे बड़ी सूची। चीनी I ने परीक्षण के लिए यहां अधिक उल्लेख किया है, इसके कई संस्करण हैं, इसलिए आपको सिद्धांत रूप में, वर्तनी (पारंपरिक या सरलीकृत) को ध्यान में रखना चाहिए, लेकिन यदि आवश्यक हो तो आप इसे स्वयं जोड़ लेंगे।



अब आइए चीजों के दृश्य पक्ष पर जाएं या एक इंटरफ़ेस डिज़ाइन करें। मैंने इसे इस तरह बनाने का फैसला किया:







पाठ की विशिष्ट भाषा के आधार पर, हम स्वचालित रूप से अनुवाद के लिए भाषाओं की एक सूची संकलित करते हैं ( ट्रांस_वर में परिभाषाओं के आधार पर, जिनमें से प्रत्येक के लिए हम राष्ट्रीय ध्वज की छवि को प्रदर्शित करते हैं, साथ ही रद्द करें बटन (अनुवादित पाठ को उसके मूल रूप में लौटाते हैं)। ध्वज चित्र इस सेट से लिए गए हैं। , और भाषा कोड के अनुसार फाइलों का नाम बदल दिया जाता है। वैसे, Google द्वारा उपयोग किए जाने वाले भाषा कोड यहां मिल सकते हैं ।



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



मेरा अनुवादित पाठ मेरे साथ मूल को प्रतिस्थापित करता है, इसलिए अनुवाद से पहले मैं इसे एक विशेष आंतरिक चर में सहेजता हूं, ताकि जब मैं "मूल को पुनर्स्थापित करूं" फ़ंक्शन को कॉल करूं, तो मैं इसे वापस रख सकता हूं - आखिरकार, आप इसे फिर से किसी अन्य भाषा में अनुवाद करना चाह सकते हैं।



यद्यपि भाषा को निर्धारित करने के लिए एपीआई का अपना कार्य है, मैंने इसके ऊपर एक छोटा आवरण लिखने का फैसला किया, और इसे इंटरफ़ेस रेंडरिंग फ़ंक्शन के साथ एक सामान्य आवरण में रखा, इसे कॉल करके आप पृष्ठ लोड करने के बाद स्वचालित रूप से सब कुछ करेंगे - लेख की भाषा निर्धारित करें और तुरंत वांछित अनुवाद इंटरफ़ेस प्रदर्शित करें।



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



मैंने अपना आवरण - _detect_lang_code लिखा, जो DOM तत्व का नाम लेता है, जिसमें अनुवाद के लिए आवश्यक पाठ और भाषा को निर्धारित करने के बाद उस फ़ंक्शन के लिंक को बुलाया जाना चाहिए। हमारे मामले में, इस तरह के एक समारोह में अनुवाद के लिए इंटरफ़ेस का पहले से वर्णित प्रतिपादन होगा। अंदर, हम पहले स्वयं पाठ प्राप्त करते हैं। चूंकि कोई तृतीय-पक्ष लाइब्रेरी का उपयोग नहीं किया जाता है, इसलिए मैं इसे सामान्य इनर HTML प्रॉपर्टी के माध्यम से प्राप्त करता हूं (यह अफ़सोस की बात है कि वहाँ प्रारूपित पाठ के लिए टैग होंगे, उन्हें काटने की आवश्यकता है), और यदि ब्राउज़र IE है, तो मैं तुरंत इनरवेक्स संपत्ति का उपयोग करता हूं। अगला, पाठ की लंबाई की जांच करना और इसे ट्रिम करना वांछनीय है - भाषा का पता लगाने के फ़ंक्शन को अनुवाद सीमा की तुलना में बहुत कम वर्णों की आवश्यकता होती है, इसलिए ट्रैफ़िक को कम करने के लिए, आप लाइन को पहले 50 या 100 वर्णों तक सीमित कर सकते हैं। अब हम भाषा को निर्धारित करने के लिए विधि कहते हैं - एपीआई में इसे google.language.detect कहा जाता है और दो पैरामीटर लेता है - पाठ के साथ एक स्ट्रिंग और एक कॉलबैक फ़ंक्शन, हमारे मामले में अनाम, जो उत्तर देता है। आधिकारिक वेबसाइट पर उदाहरणों की तुलना में यहां एक छोटी सी बारीकियों है। वहां, भाषा का निर्धारण करने के बाद, इसका नाम पूरी तरह से प्रदर्शित होता है, और हमें केवल इसके कोड का पता लगाने की आवश्यकता होती है, इसलिए हमें केवल आंतरिक सरणी google.language.Languages के सूचकांक में रुचि होगी, जो भाषा कोड है (सर्वर पूर्ण भाषा का नाम देता है)। यह सब है, परिणामी कोड को वैश्विक वैरिएबल Orig_text_lang पर असाइन करें और तुरंत इंटरफ़ेस रेंडरिंग फ़ंक्शन को कॉल करें। अंग्रेजी में स्रोत पाठ ( एन कोड) के लिए हमें ऊपर दिए गए चित्र में दिखाया गया इंटरफ़ेस मिलता है।



अनुवाद स्वयं हमारे स्वयं के फ़ंक्शन द्वारा नियंत्रित किया जाता है Translate_text , जो सार्वभौमिकता के लिए, तुरंत दो मापदंडों को लेता है - स्रोत पाठ की भाषा कोड और जिस में हम अनुवाद करते हैं। चूँकि हमने इंटरफ़ेस बनाते समय कॉल कोड जेनरेट किया था, इसलिए प्रत्येक भाषा का कोड पहले से ही वहां लिखा होता है, और स्रोत कोड वैश्विक चर original_text_lang में संग्रहीत होता है, इसलिए हम तुरंत इसे पास कर देते हैं (हालांकि, निश्चित रूप से, आप उदाहरण को सरल कर सकते हैं)। इसके अलावा, यदि आवश्यक हो, तो हम एक बार फिर ऐसी अनुवाद जोड़ी की वैधता की जांच कर सकते हैं, और यदि आवश्यक हो, तो हम अपने पाठ को 500 वर्णों से विभाज्य ब्लॉक में तोड़ देते हैं। यदि आप चाहते हैं कि अनुवाद मूल पाठ के बजाय डाला जाए, तो इसे एक चर में सहेजें - मैं इसके लिए _tmp_original_text का उपयोग करता हूं ।



दरअसल, अनुवाद खुद google.language.translate API फ़ंक्शन को कॉल करके किया जाता है , जो टेक्स्ट, मूल भाषा कोड, भाषा कोड जिसमें हम अनुवाद करते हैं, साथ ही अनुवाद के बाद निष्पादित होने वाले कॉलबैक फ़ंक्शन के लिंक के साथ एक स्ट्रिंग भेजते हैं और परिणाम की प्रक्रिया करते हैं। चूंकि लाइब्रेरी सभी निम्न-स्तरीय कार्यों को लेती है, हमें केवल परिणाम ऑब्जेक्ट मिलता है, जिसमें लौटा डेटा शामिल होता है। हम result.translation प्रॉपर्टी की जांच करते हैं, यदि यह गलत नहीं है, तो अनुवाद सफल है और इसमें टेक्स्ट का अनुवादित स्ट्रिंग शामिल है। हुर्रे, बस स्रोत पाठ को अनुवादित एक के साथ बदलें और यह बात है!



वह सब है! अनुवाद की गुणवत्ता के विशुद्ध रूप से भाषाई मुद्दों पर स्पर्श किए बिना, हमें अपने आगंतुकों को चयनित भाषा में पाठ दिखाने का एक त्वरित अवसर मिला। बेशक, अक्सर वह आदर्श से बहुत दूर है, लेकिन अक्सर यह अभी भी कुछ भी नहीं से बेहतर है।



और अब, एक स्नैक के लिए, एक दिलचस्प चाल। अपने इंटरफ़ेस को किसी अन्य भाषा में अनुवादित करना चाहते हैं? उदाहरण के लिए, मेरी एक परियोजना में एक शीर्ष मेनू है जो पंजीकरण के बाद उपयोगकर्ता के लिए उपलब्ध है, और विभिन्न आइटम हैं, जैसे "संदेश", "सहायता", "मेरे कार्यक्रम" और जैसे। बेशक, उनमें से सभी के चित्रचित्रों के साथ होते हैं जो सबसे अधिक बारीकी से मेनू के सार को दर्शाते हैं, लेकिन फिर भी मैं अनुवाद करना चाहूंगा। बहुत आसान है! पहले आपको अनुवाद को एक स्ट्रिंग के रूप में व्यवस्थित करने की आवश्यकता है, और आगे की प्रक्रिया के लिए हम एक JSON स्ट्रिंग, सभी मेनू आइटमों की एक सरणी बनाएंगे। कुछ इस तरह:



["मेरे कार्यक्रम", "सदस्यता", "संदेश", "मेरे आँकड़े", "बाहर निकलें", "घर", "खोज", "सहायता"]



हां, यदि आप इस लाइन को अनुवादक को खिलाते हैं, तो सेवा के सभी अक्षर अछूते नहीं रहेंगे! अंग्रेजी में अनुवाद के बाद हम प्राप्त करेंगे:



["मेरे कार्यक्रम", "सदस्यता", "संदेश", "मेरे आँकड़े", "बाहर निकलें", "घर", "खोज", "सहायता"]



जैसा कि आप देख सकते हैं, अनुवाद काफी सटीक है ताकि आपके आगंतुक साइट के साथ काम करने के लिए बिना किसी समस्या के इसका उपयोग कर सकें। वैसे, सभी भाषाओं में अनुवाद करने के लिए, मूल इंटरफ़ेस (यदि यह रूसी है) का अनुवाद करना आवश्यक है, लेकिन अलग से अंग्रेजी अंकन के साथ एक सरणी बनाएं, और फिर किसी भी समर्थित में अनुवाद करें। यह सरणी बाद में प्राथमिक रूप से जावास्क्रिप्ट ऑब्जेक्ट में बदल जाती है या आपके पसंदीदा फ्रेमवर्क के माध्यम से उपयोग की जाती है, और आप यह पता लगा सकते हैं कि मेनू में मूल शिलालेखों को कैसे बदला जाए, सही?



संबंधित लिंक :

• एपीआई आधिकारिक पेज
• उदाहरण के साथ डेवलपर प्रलेखन
• कक्षा का विवरण
• एक लेख से उदाहरण का स्रोत कोड (ज़िप-संग्रह, 9 Kb)

PS यह मेरे व्यक्तिगत ब्लॉग का क्रॉस-पोस्ट है। मूल यहाँ है ।