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,31 +10,42 @@ 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 translate_segment(si) {
+	var rs=[]
+	var current_pick=0
+	var get_more
+	var output=os[si].target
+
 	function show_error(msg) {
-	if(e) e.innerHTML="<span class=low_quality>Translation problem: "+msg+"</span>"
+	    //if(e) e.innerHTML="<span class=low_quality>Translation problem: "+msg+"</span>"
-	else {
+	    //else
-	    f.output.value="["+msg+"]"
+	    {
-	    f.output.className="low_quality"
+		replaceChildren(output,text("["+msg+"]"))
+		output.className="error"
 	    }
 	    disable(false)
 	}
@@ -55,38 +67,54 @@ wc.translate=function() {
 	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++) {
+	    for(var i=0;i<rs.length;i++) {
 		p.appendChild(text(" "))
 		var pick=text(i+1) // +"⃝"
-	    if(i!=wc.current) {
+		if(i!=current_pick) {
 		    var pick=node("a",{href:"#"},[pick])
 		    pick.onclick=pick.onmouseover=show_pick(i)
 		}
-	    var q=trans_quality(wc.r[i]).quality
+		var q=trans_quality(rs[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) {
+	function show_more() {
-	var r=wc.r[i]
+	    selected=si
-	var t=trans_quality(r)
+	    var r=rs[current_pick]
-	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 /*&& rs.length>1*/) show_picks()
-	if(wc.p /*&& wc.r.length>1*/) show_picks()
+	    //if(f.speak.checked) wc.speak(t.text,f.to.value)
-	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) {
-	wc.r.push(r)
+	    if(text.length>0 && text[text.length-1]=="\n")
-	var j=wc.r.length-1
+		text=text.substr(0,text.length-1)
-	wc.r[j].text=text
+	    rs.push(r)
-	if(wc.current==j) show_trans(j)
+	    var j=rs.length-1
-	else show_picks()
+	    rs[j].text=text
+	    if(current_pick==j) show_trans(j)
+	    else if(selected==si) show_picks()
 	    disable(false)
 	}
 	function trans(text,i) {
@@ -97,9 +125,11 @@ wc.translate=function() {
 			if(r.error!=undefined) show_error(tra[0].error)
 			else if(r.linearizations) {
 			    r.text=r.linearizations[0].text
-			// Two server requests in parallel:
 			    unlextext(r.text,function(text){showit(r,text)})
-			if(wc.p && i<9) trans(text,i+1)
+			    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")
 		    }
@@ -126,7 +156,21 @@ wc.translate=function() {
 				    step3cnl,
 				    function(){step2(text)})
 	}
-    lextext(wc.translating,wc.cnl ? step2cnl : step2)
+	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)
+	}
+    }
     return false;
 }
 
@@ -182,8 +226,11 @@ function init_languages() {
 }
 
 function init_speech() {
+    var speak=element("speak")
+    if(speak) {
 	wc.speech=window.speechSynthesis && window.speechSynthesis.getVoices().length>0
-    if(wc.speech) element("speak").style.display="inline"
+	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>