Wednesday, June 24, 2009

How to translate using Google Translate API ?( why it sucks?)

Recently Google have launched  Translate API. Which is nice and quick way to get your text translated. This is also good when you are translating HTML formatted text. They will preserve the formatting.
Here I have quickly created a Hack To enable any document translatable.
lets assume you have a document likethis.In which every paragraph which requires translation is a div with Id “lang_text”
<div class="lang_text">
Just checking that this thing will be translated properly or not?
</div>

Now with the help of jQery i will add a DorpDownList just above these div, when you select it will translate the text.
Simple Translate API works like this
google.language.translate('This is what i want to translate', 'en', ‘el’,
function(result)
{
if (result.translation)
{
alert(result.translation);
}
}
);


Why it sucks?
On the demo page, you will see that its not translating the last paragraph. Yes, this where it sucks. It does not translate longer text. WTF?
Here is complete source. (you can also view source of demopage)
<html>
<head>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages: ['table']});
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("language", "1");
</script>
<style type="text/css">
#TranslatedText{
color: #cc0000
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var ele=document.createElement('div');

$(ele).html('Translate<select class="translate_lan"><option value="en">English</option><option value="hi">Hindi</option><option value="el">Greek</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="de">German</option><option value="el">Greek</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option></select>');
$(ele).attr('class','translate');
$('.lang_text').before(ele);
$('.translate_lan').change(function(){
var translate_text=$(this).parent().next('.lang_text').html();
if(translate_text)
{
google.language.translate(translate_text, 'en', this.value, function(result) {
if (result.translation) {
$("#TranslatedText").html(result.translation);
}
if(result.error)
{
$("#TranslatedText").html(result.error.message);
}
alert('done');
});

}
});
google.language.getBranding('brand');
});
</script>
</head>
<body>
<div id="TranslatedText" title="Translation">
Your Translation will appear here
</div>
<div class="lang_text">
This is a simple text
</div>
<div class="lang_text">
Just checking that this thing will be translated properly or not?
</div>
<div class="lang_text">
This is a HTML, <a href="http://www.markandey.com">This is a link.</a> This is not
a link.
</div>
<div class="lang_text">
Lets test for multiparagraph translation
<p>
This is paragraph1</p>
<p>
This is paragraph2</p>
</div>
<div class="lang_text">
Description of Service. The API consists of Javascript and associated service
protocols that enable You to display results from Google ("Google Results") on your
website or in your application (each, a "Property"), subject to the limitations
and conditions described below. You are allowed to use the API only to display,
and to make such uses as are necessary for You to display, Google Results on your
Property. The API does not provide You with the ability to access, and you are not
allowed to access, other underlying Google Services or data. 1.2 Modifications.
Google is constantly innovating in order to provide the best possible experience
for its users. Google reserves the right to change the form and nature of the Service
that Google provides (e.g. to charge for access to the API, to set a maximum number
of Google Results You may access through the API, etc.) with or without notice.
In addition, Google reserves the right to release subsequent versions of the API
at any time with or without notice, but in accordance with Section 1.3. If a modification
is unacceptable to You, You may cancel the Service by removing the Javascript and/or
other implementation of the API from your Property. If You continue to use the Service
on any Property, You will be deemed to have accepted the modifications. 1.3 Deprecation.
If Google in its discretion chooses to cease providing the current version of the
Service whether through discontinuation of the Service or by upgrading the Service
to a newer version, the current version of the Service will be deprecated and become
a Deprecated Version of the Service. Google will issue an announcement if the current
version of the Service will be deprecated. For a period of 3 years after an announcement
(the "Deprecation Period"), Google will use commercially reasonable efforts to continue
to operate the Deprecated Version of the Service and to respond to problems with
the Deprecated Version of the Service deemed by Google in its discretion to be critical.
During the Deprecation Period, no new features will be added to the Deprecated Version
of the Service.
</div>
<div id="brand">
</div>
</body>
</html>
Now Let me guess why it does not work. This API is based on a REST API. A REST API submits the data using a URL
e.g.
so certainly you have the limitation of data you can send.
So beware of such scenario, else you might encounter a hang case, because your call-back will not be invoked!!!

No comments:

Post a Comment