Translate English Text To Hindi and Bengali through Google Transliterate API

Rajnilari2015
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 520 red flag

Google Transliterate API is a JavaScript API that is useful for detecting the language of a given text block and transliterate it into a different language. In this article we will demonstrate the powerful capabilities of Google Transliterate API for converting a text written in English to other languages like Hindi and Bengali.


 Download source code for Translate English Text To Hindi and Bengali through Google Transliterate API

Recommendation
Read Let's Explore Diagnostics in ASP.NET Core 1.0 before this article.

Introduction

Google Transliterate API is a JavaScript API that is useful for detecting the language of a given text block and transliterate it into a different language. In this article we will demonstrate the powerful capabilities of Google Transliterate API for converting a text written in English to other languages like Hindi and Bengali.

Let's start the experiment

Let us first write the below piece of code

<html>

	<head>

		<title>Translate English To Hindi/Bengali through Google API</title>
		
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		
		<script type="text/javascript">

			 // Load the Google Transliterate API
			google.load("elements", "1", {packages: "transliteration"});

		</script>  

		<script>

		//Get the user selected language for translation
		function getUserLanguage() {
			
			var e = document.getElementById("ddlLanguage");
			var chooseLanguage = e.options[e.selectedIndex].value;
			
			OnLoad(chooseLanguage);		
		}

		//Get the Destination Language Culture
		function getTheTargetLanguageCulture(chooseLanguage){
			var destLanguageCulture = "";

			switch(chooseLanguage)
	 			{
	 				case "HINDI" : 	destLanguageCulture = [google.elements.transliteration.LanguageCode.HINDI];
	 							   	document.getElementById("spLanguage").textContent="Hindi";
	 								break;

	 				case "BENGALI" : destLanguageCulture = [google.elements.transliteration.LanguageCode.BENGALI];
	 								 document.getElementById("spLanguage").textContent="Bengali";
	 								 break;

	 				default : 		destLanguageCulture = [google.elements.transliteration.LanguageCode.BENGALI];
	 						  		document.getElementById("spLanguage").textContent="Bengali";
	 								break;
	 			}
	 			return destLanguageCulture; 
	 		}

			function OnLoad(chooseLanguage) {	 			

				//get the target language culture
	 			var destLanguageCulture = getTheTargetLanguageCulture(chooseLanguage);	 			
	 			
	 			//Make the options
				 var options = {
				                 	sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,

				                	destinationLanguage: destLanguageCulture,

				                	shortcutKey: 'ctrl+g',

				                	transliterationEnabled: true

								};	 

				// Create an instance of TransliterationControl with the needed options.
				var control = new  google.elements.transliteration.TransliterationControl(options);

				// Enable transliteration in the textbox with id 'txtInput'.
				control.makeTransliteratable(["txtInput"]);							

				} //end onLoad function

			//Invoking the onLoad handler
			google.setOnLoadCallback(OnLoad);	 

		</script> 

	</head>

  	<body> 
        	Choose Your Language:
        	<select onchange="getUserLanguage()" id="ddlLanguage">
				  <option value="HINDI">Hindi</option>
				  <option value="BENGALI" selected>Bengali</option>				  
			</select>
			<br/><br/>
			Type In English and the code will be translated in <span id="spLanguage"></span>: <input size="40" type="text" id="txtInput"/>
	</body>
</html>

Code Explanation

Initially we are including the needed JS file

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Next we are loading the Google Transliterate API

google.load("elements", "1", {packages: "transliteration"});

The above line is a specific example of the general Google Transliterate API syntax

google.load(module, version, package)

The Load function imports google APIs. For more information, please refer here.

The function getTheTargetLanguageCulture get the Destination Language Culture that we next set in the options which is used as a parameter for TransliterationControl function.

The google.elements.transliteration.TransliterationControl(options) enables transliteration on a set of editable HTML DOM elements.

The makeTransliteratable does the translation by enabling transliteration on the specified HTML element(in our case 'txtInput').

Finally, for invoking the onLoad handler, we are using the setOnLoadCallback(callback) static function

The final output will be as under

References

Google Transliterate API Developer's Guide

Conclusion

In this article, we have learnt about the usage of Google Transliterate API for translating English Text To Hindi and Bengali. Hope this will be helpful. Thanks for reading. Zipped file attached.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)