Wide Coverage Demo Web App: add segmentation

Click on sentences to choose among alternative translations.

src/www/js/wc.js

@@ -1,6 +1,7 @@
 var wc={}
 wc.cnl="Phrasebook" // try this controlled natural language first
 wc.f=document.forms[0]
+wc.o=element("output")
 wc.e=element("extra")
 wc.p=element("pick")
 wc.serial=0
@@ -9,124 +10,167 @@ wc.delayed_translate=function() {
     function restart(){ if(wc.f.input.value!=wc.translating) wc.translate() }
     if(wc.timer) clearTimeout(wc.timer);
     wc.timer=setTimeout(restart,500)
+    var h=wc.f.input.scrollHeight,bh=document.body.clientHeight
+    if(h>bh) h=bh
+    if(wc.f.input.clientHeight<h) wc.f.input.style.height=h+15+"px"
+}
+
+wc.split_punct=function(s) {
+    return s.split(/([.!?]+[ \t\n]+|\n\n+|[ \t\n]*[-•*+#]+[ \t\n]+)/)
 }
 
 wc.translate=function() {
     var current= ++wc.serial
     var f=wc.f, e=wc.e, p=wc.p
+    var selected= -1
 
     function disable(yes) {
 	f.translate.disabled=yes
 	f.to.disabled=yes
-	f.swap.disabled=yes
+	if(f.swap) f.swap.disabled=yes
     }
     disable(true)
-    f.output.value=""
+    clear(wc.o)
-    f.output.className=""
-    wc.r=[]
-    wc.current=0
-    wc.translating=f.input.value
     clear(e)
     clear(p)
 
-    function show_error(msg) {
+    function translate_segment(si) {
-	if(e) e.innerHTML="<span class=low_quality>Translation problem: "+msg+"</span>"
+	var rs=[]
-	else {
+	var current_pick=0
-	    f.output.value="["+msg+"]"
+	var get_more
-	    f.output.className="low_quality"
+	var output=os[si].target
-	}
-	disable(false)
-    }
-    function trans_quality(r) {
-	var text=r.text
-	if(r.prob==0) return {quality:"high_quality",text:text}
-	else {
-	    var quality="default_quality"
-	    switch(text[0]) {
-	    case '+': text=text.substr(1); quality="high_quality"; break;
-	    case '*': text=text.substr(1); quality="low_quality"; break;
-	    default:
-		if(r.tree[0]=="?") quality="low_quality"
-	    }
-	    if(text[0]==" ") text=text.substr(1)
-	    return {quality:quality,text:text}
-	}
-    }
-    function show_pick(i) { return function() { show_trans(i); return false; } }
-    function show_picks() {
-	clear(p)
-	for(var i=0;i<wc.r.length;i++) {
-	    p.appendChild(text(" "))
-	    var pick=text(i+1) // +"⃝"
-	    if(i!=wc.current) {
-		var pick=node("a",{href:"#"},[pick])
-		pick.onclick=pick.onmouseover=show_pick(i)
-	    }
-	    var q=trans_quality(wc.r[i]).quality
-	    p.appendChild(span_class("pick "+q,pick))
-	}
-	p.appendChild(wrap_class("small","pick",
-				 node("a",{href:wc.google_translate_url(),
-					   target:"google_translate"},
-				      [text("Google Translate")])))
-    }
-    function show_trans(i) {
-	var r=wc.r[i]
-	var t=trans_quality(r)
-	f.output.value=t.text
-	f.output.className=t.quality
-	if(e) e.innerHTML=(r.prob||"")+"<br>"+r.tree
-	wc.current=i
-	if(wc.p /*&& wc.r.length>1*/) show_picks()
-	if(f.speak.checked) wc.speak(t.text,f.to.value)
-    }
 
-    function showit(r,text) {
+	function show_error(msg) {
-	wc.r.push(r)
+	    //if(e) e.innerHTML="<span class=low_quality>Translation problem: "+msg+"</span>"
-	var j=wc.r.length-1
+	    //else
-	wc.r[j].text=text
+	    {
-	if(wc.current==j) show_trans(j)
+		replaceChildren(output,text("["+msg+"]"))
-	else show_picks()
+		output.className="error"
-	disable(false)
+	    }
-    }
+	    disable(false)
-    function trans(text,i) {
+	}
-	function step3(tra) {
+	function trans_quality(r) {
-	    if(wc.serial==current) {
+	    var text=r.text
-		if(tra.length>=1) {
+	    if(r.prob==0) return {quality:"high_quality",text:text}
-		    var r=tra[0]
+	    else {
-		    if(r.error!=undefined) show_error(tra[0].error)
+		var quality="default_quality"
-		    else if(r.linearizations) {
+		switch(text[0]) {
-			r.text=r.linearizations[0].text
+		case '+': text=text.substr(1); quality="high_quality"; break;
-			// Two server requests in parallel:
+		case '*': text=text.substr(1); quality="low_quality"; break;
-			unlextext(r.text,function(text){showit(r,text)})
+		default:
-			if(wc.p && i<9) trans(text,i+1)
+		    if(r.tree[0]=="?") quality="low_quality"
-		    }
-		    else show_error("no linearizations")
 		}
-		else if(i==0) show_error("Unable to translate")
+		if(text[0]==" ") text=text.substr(1)
+		return {quality:quality,text:text}
 	    }
 	}
-	gftranslate.translate(text,f.from.value,f.to.value,i,1,step3)
+	function show_pick(i) { return function() { show_trans(i); return false; } }
-    }
+	function show_picks() {
-    function step2(text) { trans(text,0) }
+	    clear(p)
-    function step2cnl(text) {
+	    for(var i=0;i<rs.length;i++) {
-	function step3cnl(results) {
+		p.appendChild(text(" "))
-	    var trans=results[0].translations
+		var pick=text(i+1) // +"⃝"
-	    if(trans && trans.length>=1) {
+		if(i!=current_pick) {
-		var r=trans[0]
+		    var pick=node("a",{href:"#"},[pick])
-		r.text=r.linearizations[0].text
+		    pick.onclick=pick.onmouseover=show_pick(i)
-		r.prob=0
+		}
-		unlextext(r.text,function(text){showit(r,text)})
+		var q=trans_quality(rs[i]).quality
+		p.appendChild(span_class("pick "+q,pick))
 	    }
-	    step2(text)
+	    /*
+	    p.appendChild(wrap_class("small","pick",
+				     node("a",{href:wc.google_translate_url(),
+					       target:"google_translate"},
+					  [text("Google Translate")])))
+	    */
+	}
+	function show_more() {
+	    selected=si
+	    var r=rs[current_pick]
+	    if(e) e.innerHTML=(r.prob||"")+"<br>"+r.tree
+	    if(wc.p /*&& rs.length>1*/) show_picks()
+	    //if(f.speak.checked) wc.speak(t.text,f.to.value)
+	    if(get_more) {
+		var f=get_more
+		get_more=null
+		f()
+	    }
+	}
+	output.onclick=show_more
+
+	function show_trans(i) {
+	    var r=rs[i]
+	    var t=trans_quality(r)
+	    replaceChildren(output,text(t.text))
+	    output.className=t.quality
+	    current_pick=i
+	    if(selected==si) show_more()
+	}
+
+	function showit(r,text) {
+	    if(text.length>0 && text[text.length-1]=="\n")
+		text=text.substr(0,text.length-1)
+	    rs.push(r)
+	    var j=rs.length-1
+	    rs[j].text=text
+	    if(current_pick==j) show_trans(j)
+	    else if(selected==si) show_picks()
+	    disable(false)
+	}
+	function trans(text,i) {
+	    function step3(tra) {
+		if(wc.serial==current) {
+		    if(tra.length>=1) {
+			var r=tra[0]
+			if(r.error!=undefined) show_error(tra[0].error)
+			else if(r.linearizations) {
+			    r.text=r.linearizations[0].text
+			    unlextext(r.text,function(text){showit(r,text)})
+			    if(wc.p && i<9) {
+				if(si==selected) trans(text,i+1)
+				else get_more=function() { trans(text,i+1) }
+			    }
+			}
+			else show_error("no linearizations")
+		    }
+		    else if(i==0) show_error("Unable to translate")
+		}
+	    }
+	    gftranslate.translate(text,f.from.value,f.to.value,i,1,step3)
+	}
+	function step2(text) { trans(text,0) }
+	function step2cnl(text) {
+	    function step3cnl(results) {
+		var trans=results[0].translations
+		if(trans && trans.length>=1) {
+		    var r=trans[0]
+		    r.text=r.linearizations[0].text
+		    r.prob=0
+		    unlextext(r.text,function(text){showit(r,text)})
+		}
+		step2(text)
+	    }
+	    wc.pgf_online.translate({from:wc.cnl+f.from.value,
+				     to:wc.cnl+f.to.value,
+				     input:text},
+				    step3cnl,
+				    function(){step2(text)})
+	}
+	lextext(is[si],wc.cnl ? step2cnl : step2)
+    }
+    wc.translating=f.input.value
+    var is=wc.is=wc.split_punct(wc.translating+"\n")
+    var os=[]
+    for(var i=0;i<is.length;i++) {
+	if(i&1) { // punctiation
+	    wc.o.appendChild(span_class("punct",text(is[i])))
+	}
+	else { // segment
+	    var o=os[i]={target:span_class("placeholder",text(is[i]))}
+	    wc.o.appendChild(o.target)
+	    translate_segment(i)
 	}
-	wc.pgf_online.translate({from:wc.cnl+f.from.value,
-				 to:wc.cnl+f.to.value,
-				 input:text},
-				step3cnl,
-				function(){step2(text)})
     }
-    lextext(wc.translating,wc.cnl ? step2cnl : step2)
     return false;
 }
 
@@ -182,8 +226,11 @@ function init_languages() {
 }
 
 function init_speech() {
-    wc.speech=window.speechSynthesis && window.speechSynthesis.getVoices().length>0
+    var speak=element("speak")
-    if(wc.speech) element("speak").style.display="inline"
+    if(speak) {
+	wc.speech=window.speechSynthesis && window.speechSynthesis.getVoices().length>0
+	if(wc.speech) speak.style.display="inline"
+    }
 }
 
 init_languages()

src/www/wc.html

@@ -8,8 +8,11 @@
 <style>
 div.center { text-align: center; }
 table { border-collapse: collapse; table-layout: fixed; width: 100%; }
-td { padding: 0 5px; }
+td { padding: 0 5px; vertical-align: top; }
-textarea { margin: 0; }
+td.output { background: #fcfcfc; }
+td.input, td.output { font-family: sans-serif; font-size: 90%; }
+div#output { white-space: pre-line; }
+textarea { margin: 0; font: inherit; }
 body:target h1, body:target div.modtime { display: none; }
 small { color: #666; }
 #pick>* { padding: 0 0.5ex; }
@@ -17,12 +20,14 @@ small { color: #666; }
 .default_quality { background-color: #ffc; }
 .high_quality { background-color: #cfc; }
 .low_quality { background-color: #fcc; }
+.placeholder { color: #999; }
+.error { color: #c00; }
 </style>
 </head>
 
 <body id=embed>
 <div>
-<h1><a href="http://www.grammaticalframework.org/"><img class=nofloat src="P/gf-cloud.png" alt="GF"></a> Wide Coverage Translation</h1>
+<h1><a href="http://www.grammaticalframework.org/"><img class=nofloat src="P/gf-cloud.png" alt="GF"></a> Wide Coverage Translation Demo</h1>
 </div>
 
 <form onsubmit="return wc.translate()" style="width: 100%">
@@ -39,7 +44,7 @@ small { color: #666; }
     <option value=Swe>Swedish</option>
   </select>
   <td style="text-align: right">
-  <input type=button name=swap onclick="wc.swap()" value="⇆">
+    <!--<input type=button name=swap onclick="wc.swap()" value="⇆">-->
   <td>
   <select name=to onchange="wc.translate()">
     <option value=Bul>Bulgarian</option>
@@ -52,14 +57,16 @@ small { color: #666; }
     <option value=Swe selected>Swedish</option>
   </select>
   <td><button name=translate type=submit><strong><big>Translate</big></strong></button>
-  <tr><td colspan=2>
+  <tr><td class=input colspan=2>
   <textarea name=input rows=5 style="width: 100%" onkeyup="wc.delayed_translate()"></textarea>
-  <td colspan=2>
-  <textarea name=output rows=5 style="width: 100%" readonly></textarea>
-  <tr><td colspan=2>
     <small>Enter text to translate above.</small>
+  <td class=output colspan=2>
+
+  <div id=output></div>
+  <tr><td colspan=2>
     <td colspan=2>
-  <small id=speak><input name=speak type=checkbox> Enable speech synthesis</small>
+  <!--<small id=speak><input name=speak type=checkbox> Enable speech synthesis</small>-->
+
 </table>
 </form>
 
@@ -70,7 +77,7 @@ small { color: #666; }
   </div>
 <p>
 <div class=modtime><small>
-<!-- hhmts start -->Last modified: Fri Apr  4 13:47:19 CEST 2014 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Mon Apr  7 14:48:57 CEST 2014 <!-- hhmts end -->
 </small></div>
 <script src="js/support.js"></script>
 <script src="js/gftranslate.js"></script>