Friday, April 25th, 2008

Immediate Translation and Mibbit

Category: Ajax, JavaScript, Library, Screencast

>Translate Bookmarklet

I just posted on a a translate bookmarklet that uses the Google AJAX Language API:

I really liked getting the Ajax Language API out into developers hands as god knows we shouldn’t have to worry about translations. Now we can use the API and have the Google back-end do all of the work.

I have recently had a couple of scenarios where I really wanted a quick translation. I had a few twitter messages pass through my stream in French and Spanish. I had the answer to some technical issues show up on foreign forums.

So, I decided to create a Translate bookmarklet that allows me to select any foreign text, click on the bookmark, and a little window pops up with the English translation if it can work it out. Automatic translation is far from perfect yet, but for many scenarios you can easily get the gist (e.g. you wouldn’t want to automatically convert a book).

This is how I created the bookmarklet:

The source

First, I have the raw JavaScript source that will become the bookmarklet. There are a few sections of the code. First, we setup a method that will go off and call the Ajax Language API, passing in the translation and language that we want. This is where you would change the language code for non-English.

javascript
< view plain text >
  1. if (!window['apiLoaded']) {
  2.   window.apiLoaded = function() {
  3.     var language = "en";
  4.     var text = window.getSelection().toString();
  5.     if (text) {
  6.       google.load("language", "1", { "callback" : function() {
  7.         google.language.detect(text, function(dresult) {
  8.           if (!dresult.error && dresult.language) {
  9.             google.language.translate(text, dresult.language, language, function(tresult) {
  10.               if (tresult.translation) {
  11.                 translationWindow(tresult, dresult);
  12.               } else {
  13.                 alert('No translation found for "' + text + '" guessing the language: ' + dresult.language);
  14.               }
  15.             });
  16.           }
  17.         });
  18.       }});
  19.     }
  20.   };
  21. }

Then we setup a method that is able to display a window showing the result. I used the Prototype UI Window object if available, and good old alert() if not:

javascript
< view plain text >
  1. if (!window['translationWindow']) {
  2.   window.translationWindow = function(tresult, dresult) {
  3.     if (window['UI']) {
  4.       new UI.Window({theme:  "black_hud",
  5.                    shadow: true,
  6.                    width:  350,
  7.                    height: 100}).setContent("<div style='padding:6px'>" + tresult.translation + "</div>")
  8.                    .setHeader("English Translation")
  9.                    .setFooter("Language detected: " + dresult.language)
  10.                    .center({top: 20}).show();
  11.     } else {
  12.       alert(tresult.translation + " [lang = " + dresult.language + "]");
  13.     }
  14.   }
  15. }

Next, we load the Prototype UI window code, and accompanying CSS resources by dynamically adding the resources to the DOM:

javascript
< view plain text >
  1. if (!window['UI']) {
  2.   var pw = document.createElement('script');
  3.   pw.src = 'http://almaer.com/downloads/protowindow/protowin.js';
  4.   pw.type = "text/javascript";
  5.   document.getElementsByTagName('body')[0].appendChild(pw);
  6.  
  7.   var pwdefault = document.createElement('link');
  8.   pwdefault.setAttribute('rel', 'stylesheet');
  9.   pwdefault.setAttribute('type', 'text/css');
  10.   pwdefault.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/window.css');
  11.   document.getElementsByTagName('body')[0].appendChild(pwdefault);
  12.  
  13.   var pwblack = document.createElement('link');
  14.   pwblack.setAttribute('rel', 'stylesheet');
  15.   pwblack.setAttribute('type', 'text/css');
  16.   pwblack.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/black_hud.css');
  17.   document.getElementsByTagName('body')[0].appendChild(pwblack);
  18. }

Finally, we load the Google API loader, and use the dynamic loading option with the ?callback=apiLoaded. This kicks off the main driver that we saw first, and if it is already loaded we call it directly (for multiple translations on the same page).

javascript
< view plain text >
  1. if (!window['google']) {
  2.   var s = document.createElement('script');
  3.   s.src = 'http://www.google.com/jsapi?callback=apiLoaded';
  4.   s.type = "text/javascript";
  5.   document.getElementsByTagName('body')[0].appendChild(s);
  6. } else {
  7.   apiLoaded();
  8. };

“Compilation”

This is the raw form, and we need to get the bookmarklet form, which you can just use right away if you are wanting English. For this, I use John Grubber’s makebookmarklet Perl script to do the conversion.

The Server

The Prototype UI code lives on the server, so I put a striped down version over there which just contains a combined Prototype + Window JavaScript file, and just the one theme CSS set.

In Action

Unsure what I am talking about? Just watch it in action:

I also saw that Mibbit, the Web based IRC application has a new “translate” function that auto translates in the chat rooms. It works two way, so you can go into a foreign channel and be seen to just be a bad speaker as you convert their words back.

Mibbit

Posted by Dion Almaer at 10:32 am
10 Comments

++++-
4.7 rating from 32 votes

10 Comments »

Comments feed TrackBack URI

I *need* to start programming for my smartphone. i cannot wait to mash this up with some kind of OCR from my phone’s camera

Comment by SchizoDuckie — April 25, 2008

actually, visual c++ 2005 is installing, i found a free pocketpc OCR program ( http://www.topocr.com ) that has commandline support, and accessing the camera API should be super-simple according to the webpages i read. ( http://www.pocketpcmag.com/cms/_archives/Feb06/rad.aspx?page=0%2C3 )

if i combine this with a couple of URL calls in the webbrowser components i think i should be able to transfer tekst from a picture of your camera straight to the google api for language detection, and then translation :D

I’m gonna experiment with this in the weekend :D

Comment by SchizoDuckie — April 25, 2008

Wow that is really cool! I’ve been waiting for some interesting (and actually useful) uses of the Google translation API (other than the obvious use in chat applications), and am glad to see them finally coming…

Comment by zulugrid — April 25, 2008

Hey Look! That’s my face! :-)

Oh, and the translation stuff is cool too.

-Russ

Comment by RussellBeattie — April 25, 2008

Russ,

Haha! I tried to look at what was said there in case there were privacy issues. I hope it is OK ;)

Now everyone knows that I follow you.

Cheers,

Dion

Comment by Dion Almaer — April 25, 2008

Cool stuff, inline translation is one of the features I like most in IE8 (translate and the other web slice features still work in IE7 mode). I hope the other browsers implement the web slice specs because I don’t use IE as my main browser ;-).

Comment by posure — April 25, 2008

Correction: WebSlices is something else, I meant Activities.

Comment by posure — April 25, 2008

Wow! Except that Google translation completely sucks. Any bilingual person will have a field day with it. For example, select “French to English” and type “Bonjour”. It says, “Good morning”. Um, not quite, but it’s OK. Then type “A bientôt” and it doesn’t know what to do at all. My favorite, though, is “Longtemps, je me suis couché de bonne heure” for which I got “Long, I slept good time”. Give me a f*cking break. Google talk pretty one day?

Comment by ds94103 — April 25, 2008

Ayttm has done auto-translation of chats for about six years now. It uses the babelfish engine. The problem with it (and all online translations) is that they suck at doing real translation, and just do approximations. You need a human to use common sense, trial and error, and some amount of patterns to figure out what it really means. With chat, that will only happen if both parties first agree that they’re going to use auto-translation, and then have a way that they can override it to explain each other better.

Comment by bluesmoon — April 27, 2008

I have had to use auto-translation quite a few times with my clients and I have found it helpful

Comment by Aphrodisiac — July 31, 2008

Leave a comment

You must be logged in to post a comment.