Guillermo
10 years ago
18 changed files with 1228 additions and 835 deletions
@ -1,93 +0,0 @@ |
|||||||
#wow { |
|
||||||
} |
|
||||||
|
|
||||||
#splash { |
|
||||||
/*border-bottom: solid 1px #ddd;*/ |
|
||||||
/*background-color: #222*/ |
|
||||||
} |
|
||||||
|
|
||||||
.desc { |
|
||||||
/* text-shadow: 0px 0px 2px rgba(0, 131, 255, 0.53); */ |
|
||||||
} |
|
||||||
|
|
||||||
.headernav { |
|
||||||
} |
|
||||||
|
|
||||||
.vr { |
|
||||||
} |
|
||||||
|
|
||||||
/*.ellipsis { |
|
||||||
background-color: rgb(58, 51, 60); |
|
||||||
color: white; |
|
||||||
padding: 3px; |
|
||||||
border-radius: 2px; |
|
||||||
|
|
||||||
}*/ |
|
||||||
|
|
||||||
|
|
||||||
.getStarted { |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.npm { |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#marterial { |
|
||||||
/*background: linear-gradient(#27C6F9 80%, #0CB5EB 100%);*/ |
|
||||||
/*background-attachment: fixed;*/ |
|
||||||
} |
|
||||||
.demoheader .CodeMirror { |
|
||||||
} |
|
||||||
.runbutton { |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.demo { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.hint { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
} |
|
||||||
|
|
||||||
hr { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
} |
|
||||||
|
|
||||||
.manyLanguages { |
|
||||||
/*color: #C8D1F3;*/ |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
button:hover { |
|
||||||
} |
|
||||||
|
|
||||||
@media (max-width: 914px) { |
|
||||||
|
|
||||||
button:hover { |
|
||||||
background: rgba(255,255,255,.3); |
|
||||||
border: solid 1px #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.desc { |
|
||||||
color: #FFFFFF; |
|
||||||
text-shadow: 0px 0px 3px rgba(58, 58, 58, 1); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/*#splash { |
|
||||||
background-color: #27C6F9; |
|
||||||
}*/ |
|
||||||
} |
|
||||||
|
After Width: | Height: | Size: 276 KiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 5.6 MiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 628 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,233 @@ |
|||||||
|
function builddemo(id, val){ |
||||||
|
var demo = document.getElementById(id) |
||||||
|
var prog = demo.querySelector('.prog') |
||||||
|
var out = demo.querySelector('.out') |
||||||
|
|
||||||
|
var disp = demo.querySelector('.display') |
||||||
|
var dctx = disp.getContext('2d') |
||||||
|
disp.width = 0 |
||||||
|
disp.height = 0 |
||||||
|
|
||||||
|
demo.querySelector('.runbutton').onclick = function(){ |
||||||
|
setrunning(0) |
||||||
|
run(editor) |
||||||
|
} |
||||||
|
|
||||||
|
function show_progress(p){ |
||||||
|
|
||||||
|
setrunning(0) |
||||||
|
console.log(p) |
||||||
|
if(p.loaded_lang_model) prog.value = p.loaded_lang_model |
||||||
|
if(p.recognized) prog.value = p.recognized |
||||||
|
out.innerText = JSON.stringify(p) |
||||||
|
out.innerText = JSON.stringify(p) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function setrunning(v){ |
||||||
|
if (v == 1) { |
||||||
|
demo.querySelector('.running').style.display = 'none' |
||||||
|
demo.querySelector('.notrunning').style.display = 'block' |
||||||
|
// out.style.visibility = 'hidden'
|
||||||
|
} |
||||||
|
else { |
||||||
|
demo.querySelector('.running').style.display = 'block' |
||||||
|
demo.querySelector('.notrunning').style.display = 'none' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function display(result) { |
||||||
|
|
||||||
|
React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo_plz_click_stuff"}), document.getElementById("explorer")); |
||||||
|
|
||||||
|
setrunning(1) |
||||||
|
|
||||||
|
out.innerText = "Lightning Speeeeeeed" |
||||||
|
prog.value = 0 |
||||||
|
|
||||||
|
console.log(result) |
||||||
|
|
||||||
|
disp.width = demo.querySelector('.to_ocr').naturalWidth |
||||||
|
disp.height = demo.querySelector('.to_ocr').naturalHeight |
||||||
|
|
||||||
|
disp.style.width = demo.querySelector('.to_ocr').offsetWidth |
||||||
|
disp.style.height = demo.querySelector('.to_ocr').offsetHeight |
||||||
|
|
||||||
|
|
||||||
|
dctx.shadowColor = "rgba(255,255,255,.1)" |
||||||
|
dctx.shadowOffsetX = 0; |
||||||
|
dctx.shadowOffsetY = 0; |
||||||
|
dctx.shadowBlur = 10; |
||||||
|
|
||||||
|
dctx.fillRect(0,0,disp.width, disp.height) |
||||||
|
|
||||||
|
var m = result.words.map(function(w){ |
||||||
|
|
||||||
|
var b = w.bbox |
||||||
|
dctx.font = '20px Times' |
||||||
|
var font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Times" |
||||||
|
|
||||||
|
|
||||||
|
var k = function(){ |
||||||
|
dctx.font = font |
||||||
|
dctx.fillText(w.text, b.x0, w.baseline.y0); |
||||||
|
return font |
||||||
|
} |
||||||
|
|
||||||
|
return k |
||||||
|
}) |
||||||
|
|
||||||
|
var times = 0 |
||||||
|
var maxtimes = m.length + 100 |
||||||
|
function draw(i){ |
||||||
|
|
||||||
|
times++ |
||||||
|
// dctx.fillStyle="rgba(30, 29, 49, .8)"
|
||||||
|
dctx.fillStyle="rgba(0, 219, 157, "+Math.min(i/100,1)+")" |
||||||
|
// dctx.globalAlpha = .1;
|
||||||
|
dctx.clearRect(0,0,disp.width, disp.height) |
||||||
|
dctx.fillRect(0,0,disp.width, disp.height) |
||||||
|
|
||||||
|
for (var j = 0; j < Math.min(i,m.length); j++) { |
||||||
|
var asdf = Math.min(Math.max(i - j,0), 100) |
||||||
|
dctx.fillStyle = "rgba(255,255,255,"+asdf*.01+")" |
||||||
|
m[j]() |
||||||
|
}; |
||||||
|
|
||||||
|
if(i<maxtimes){ |
||||||
|
setTimeout(function(){ |
||||||
|
draw(i+1) |
||||||
|
},10) |
||||||
|
} |
||||||
|
else{ |
||||||
|
console.log('done') |
||||||
|
} |
||||||
|
} |
||||||
|
draw(0) |
||||||
|
result.words.forEach(function(word, index){ |
||||||
|
var wdiv = document.createElement('div') |
||||||
|
wdiv.innerText = word.text+' ' |
||||||
|
wdiv.style['font-family'] = "Times" |
||||||
|
wdiv.style.position = 'absolute' |
||||||
|
var to_ocr = document.querySelector('.to_ocr') |
||||||
|
var scale = to_ocr.offsetHeight / to_ocr.naturalHeight |
||||||
|
wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale |
||||||
|
wdiv.style.color = "rgba(0,0,0,0)" |
||||||
|
wdiv.style.top = word.bbox.y0 * scale |
||||||
|
wdiv.style.left = word.bbox.x0 * scale |
||||||
|
wdiv.style.height = (word.bbox.y1 - word.bbox.y0)*scale |
||||||
|
wdiv.style.width = (word.bbox.x1 - word.bbox.x0)*scale |
||||||
|
document.querySelector('.ocroutput').appendChild(wdiv) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
window.addEventListener('resize', function() { |
||||||
|
disp.style.width = demo.querySelector('.to_ocr').offsetWidth |
||||||
|
disp.style.height = demo.querySelector('.to_ocr').offsetHeight |
||||||
|
}) |
||||||
|
|
||||||
|
function run(c){ |
||||||
|
eval(c.getValue()) |
||||||
|
} |
||||||
|
|
||||||
|
var editor = CodeMirror(demo.querySelector('.editor'),{ |
||||||
|
// lineNumbers: true,
|
||||||
|
viewportMargin: Infinity, |
||||||
|
value: val |
||||||
|
}); |
||||||
|
|
||||||
|
var sc = demo.querySelector('.demoheader') |
||||||
|
var scdiv = document.createElement('div') |
||||||
|
sc.appendChild(scdiv) |
||||||
|
scdiv.className = 'CodeMirror cm-s-default' |
||||||
|
// scdiv.className = 'cm-s-default'
|
||||||
|
CodeMirror.runMode('<script src="http://localhost:1234/master/lib/Tesseract_dev.js"></script>', { |
||||||
|
name: 'xml', |
||||||
|
htmlMode: true |
||||||
|
}, scdiv) |
||||||
|
|
||||||
|
// var scripttag = CodeMirror(,{
|
||||||
|
// mode: {name: 'xml', htmlMode: true},
|
||||||
|
// readOnly: 'nocursor',
|
||||||
|
// value:
|
||||||
|
// });
|
||||||
|
editor.clear = function(){ |
||||||
|
dctx.clearRect(0,0,disp.width, disp.height) |
||||||
|
document.querySelector('.ocroutput').innerHTML = '' |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
editor.img = demo.querySelector('.to_ocr') |
||||||
|
|
||||||
|
editor.run = function(){ |
||||||
|
|
||||||
|
if (editor.img.complete) { |
||||||
|
run(editor) |
||||||
|
} else{ |
||||||
|
editor.img.onload = function(){ |
||||||
|
run(editor) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return editor |
||||||
|
} |
||||||
|
|
||||||
|
setTimeout(function(){ |
||||||
|
document.getElementById('wow').className += ' opaque' |
||||||
|
}, 100) |
||||||
|
|
||||||
|
var wow = builddemo('wow', |
||||||
|
"var img = demo.querySelector('img.to_ocr')\n\n\ |
||||||
|
Tesseract\n\ |
||||||
|
.recognize( img, {\n\ |
||||||
|
progress: show_progress} )\n\ |
||||||
|
.then( display ) // scroll down for full output ")
|
||||||
|
|
||||||
|
wow.run() |
||||||
|
|
||||||
|
|
||||||
|
var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel')) |
||||||
|
var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab')) |
||||||
|
var langs = ['eng', 'chi_sim', 'rus', 'tha'] |
||||||
|
|
||||||
|
function setlang(i){ |
||||||
|
tabs.forEach(function(t){ |
||||||
|
t.className = 'langlabel' |
||||||
|
}) |
||||||
|
tabs[i].className = 'langlabel selected' |
||||||
|
console.log(tabs[i]) |
||||||
|
wow.setValue( |
||||||
|
"var img = demo.querySelector('img.to_ocr')\n\n" |
||||||
|
+"Tesseract\n" |
||||||
|
+" .recognize( img, {\n" |
||||||
|
+" progress: show_progress, lang: '"+langs[i]+"'} )\n" |
||||||
|
+" .then( display ) // scroll down for full output ") |
||||||
|
wow.img.src = 'img/'+langs[i]+'.png' |
||||||
|
wow.clear() |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
ltabs.forEach(function(ltab,i){ |
||||||
|
ltab.onclick = function(){ |
||||||
|
setlang(i) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
tabs.forEach(function(tab,i){ |
||||||
|
tab.onclick = function(){ |
||||||
|
setlang(i) |
||||||
|
} |
||||||
|
}) |
||||||
|
// document.querySelector('.getStarted')[0].onclick = function(){
|
||||||
|
// location.href = '#'
|
||||||
|
// location.href = '#get_started'
|
||||||
|
// }
|
||||||
|
|
||||||
|
// builddemo('demo2',
|
||||||
|
// "var img = demo.querySelector('img.to_ocr')\n\n\
|
||||||
|
// Tesseract\n\
|
||||||
|
// .recognize( img, {progress: show_progress, lang:'chi_sim'} )\n\
|
||||||
|
// .then( display )")
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue