diff --git a/src/server/MainFastCGI.hs b/src/server/MainFastCGI.hs
index e275d6e7e..a0ce72f9d 100644
--- a/src/server/MainFastCGI.hs
+++ b/src/server/MainFastCGI.hs
@@ -42,8 +42,8 @@ cgiMain pgf =
                             mfrom <- getLang pgf "from"
                             mto   <- getLang pgf "to"
                             outputJSON $ translate pgf input mcat mfrom mto
-         "/cats"  -> outputJSON $ categories pgf
-         "/langs" -> outputJSON $ languages pgf
+         "/categories" -> outputJSON $ categories pgf
+         "/languages"  -> outputJSON $ languages pgf
          _ -> outputNotFound path
 
 getCat :: PGF -> String -> CGI (Maybe Category)
diff --git a/src/server/gf-client.html b/src/server/gf-client.html
index 6a4627981..68131a44f 100644
--- a/src/server/gf-client.html
+++ b/src/server/gf-client.html
@@ -4,9 +4,36 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="gf-server-jsapi.js"></script>
+    <script type="text/javascript" src="translator.js"></script>
+    <script type="text/javascript">
+     function updateTranslation () {
+        var input = document.getElementById('inputText').value;
+        var fromLang = document.getElementById('fromLang').value;
+        var toLang = document.getElementById('toLang').value;
+        var output = document.getElementById('output');
+        var callback = function(translation) {
+                         removeChildren(output);
+                         output.appendChild(formatTranslation(translation));
+                       };
+        gf.translate(input, fromLang, toLang, '', callback);
+      }
+
+      function populateLangs (langs) {
+        var f = document.getElementById('fromLang');
+        var t = document.getElementById('toLang');
+        for (var i in langs) {
+          addOption(f, langs[i], langs[i]);
+          addOption(t, langs[i], langs[i]);
+        }
+      }
+
+      function initialize() {
+        gf.getLanguages(populateLangs);
+      }
+    </script>
     <title>Web-based GF Translator</title>
   </head>
-  <body>
+  <body onload="initialize()">
     <form id="translate">
       <p>
         <input type="text" name="inputText" id="inputText" value="this cheese is warm" size="50" />
@@ -14,7 +41,7 @@
       <p>
         From: <select name="fromLang" id="fromLang" onchange=""><option value="">Any language</option></select>
         To: <select name="toLang" id="toLang"><option value="">All languages</option></select>
-        <input type="button" value="Translate" onclick="translate(document.getElementById('inputText').value,document.getElementById('fromLang').value,document.getElementById('toLang').value,'');" />
+        <input type="button" value="Translate" onclick="updateTranslation();" />
       </p>
     </form>
     <div id="output"></div>
diff --git a/src/server/gf-server-jsapi.js b/src/server/gf-server-jsapi.js
index f9db41ef2..9a2096532 100644
--- a/src/server/gf-server-jsapi.js
+++ b/src/server/gf-server-jsapi.js
@@ -1,8 +1,14 @@
-function translate (input,from,to,cat) {
-  httpGetText("gf.fcgi/translate?input="+escape(input)+"&from="+escape(from)+"&to="+escape(to)+"&cat="+escape(cat), function (output) { alert(output); });
-}
+var gf = new Object();
 
-function httpGetText(url, callback) { 
+gf.translate = function (input,from,to,cat,callback) {
+  gf.httpGetText("gf.fcgi/translate?input="+escape(input)+"&from="+escape(from)+"&to="+escape(to)+"&cat="+escape(cat), function (output) { callback(gf.readJSON(output)); });
+};
+
+gf.getLanguages = function (callback) {
+    gf.httpGetText("gf.fcgi/languages", function (output) { callback(gf.readJSON(output)); });
+};
+
+gf.httpGetText = function (url, callback) { 
   var XMLHttpRequestObject = false; 
 
   if (window.XMLHttpRequest) {
@@ -25,5 +31,8 @@ function httpGetText(url, callback) {
     XMLHttpRequestObject.send(null); 
 
   }
+};
 
-}
+gf.readJSON = function (text) {
+  return eval("("+text+")");
+};
diff --git a/src/server/translator.js b/src/server/translator.js
new file mode 100644
index 000000000..99bd8b191
--- /dev/null
+++ b/src/server/translator.js
@@ -0,0 +1,49 @@
+function formatTranslation (outputs) {
+  var dl1 = document.createElement("dl");
+  for (var fromLang in outputs) {
+    var ul = document.createElement("ul");
+    addDefinition(dl1, document.createTextNode(fromLang), ul);
+    for (var i in outputs[fromLang]) {
+      var dl2 = document.createElement("dl");      
+      for (var toLang in outputs[fromLang][i]) {
+	addDefinition(dl2, document.createTextNode(toLang), document.createTextNode(outputs[fromLang][i][toLang]));
+      }
+      addItem(ul, dl2);
+    }
+  }
+
+  return dl1;
+}
+
+/* DOM utilities for specific tags */
+
+function addDefinition (dl, t, d) {
+    var dt = document.createElement("dt");
+    dt.appendChild(t);
+    dl.appendChild(dt);
+    var dd = document.createElement("dd");
+    dd.appendChild(d);
+    dl.appendChild(dd);
+}
+
+function addItem (ul, i) {
+    var li = document.createElement("ul");
+    li.appendChild(i);
+    ul.appendChild(li);
+}
+
+function addOption (select, value, content) {
+  var option = document.createElement("option");
+  option.value = value;
+  option.appendChild(document.createTextNode(content));
+  select.appendChild(option);
+}
+
+/* General DOM utilities */
+
+/* Removes all the children of a node */
+function removeChildren(node) {
+  while (node.hasChildNodes()) {
+    node.removeChild(node.firstChild);
+  }
+}
