Wide Coverage Demo Web App: add segmentation

Click on sentences to choose among alternative translations.
This commit is contained in:
hallgren
2014-04-07 12:51:13 +00:00
parent baef6eee90
commit 620f30d187
2 changed files with 163 additions and 109 deletions

View File

@@ -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=""
f.output.className=""
wc.r=[]
wc.current=0
wc.translating=f.input.value
clear(wc.o)
clear(e)
clear(p)
function show_error(msg) {
if(e) e.innerHTML="<span class=low_quality>Translation problem: "+msg+"</span>"
else {
f.output.value="["+msg+"]"
f.output.className="low_quality"
}
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 translate_segment(si) {
var rs=[]
var current_pick=0
var get_more
var output=os[si].target
function showit(r,text) {
wc.r.push(r)
var j=wc.r.length-1
wc.r[j].text=text
if(wc.current==j) show_trans(j)
else 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
// Two server requests in parallel:
unlextext(r.text,function(text){showit(r,text)})
if(wc.p && i<9) trans(text,i+1)
}
else show_error("no linearizations")
function show_error(msg) {
//if(e) e.innerHTML="<span class=low_quality>Translation problem: "+msg+"</span>"
//else
{
replaceChildren(output,text("["+msg+"]"))
output.className="error"
}
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"
}
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 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)})
function show_pick(i) { return function() { show_trans(i); return false; } }
function show_picks() {
clear(p)
for(var i=0;i<rs.length;i++) {
p.appendChild(text(" "))
var pick=text(i+1) // +"⃝"
if(i!=current_pick) {
var pick=node("a",{href:"#"},[pick])
pick.onclick=pick.onmouseover=show_pick(i)
}
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
if(wc.speech) element("speak").style.display="inline"
var speak=element("speak")
if(speak) {
wc.speech=window.speechSynthesis && window.speechSynthesis.getVoices().length>0
if(wc.speech) speak.style.display="inline"
}
}
init_languages()

View File

@@ -8,8 +8,11 @@
<style>
div.center { text-align: center; }
table { border-collapse: collapse; table-layout: fixed; width: 100%; }
td { padding: 0 5px; }
textarea { margin: 0; }
td { padding: 0 5px; vertical-align: top; }
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>